x-php-Admin/src/components/xTable/columnItem.vue
2024-01-04 18:53:32 +08:00

112 lines
4.3 KiB
Vue

<template>
<div style="display: flex;">
<el-badge v-if="item.status && item.status.key && row[item.status.key]" is-dot class="item" :type="item.status.type || 'primary'" style="width: 10px;cursor: pointer;margin-top: 10px;"></el-badge>
<x-avatar v-if="item.columntype == 'avatar' || item.component == 'avatar'" :name="item.name" :options="item.options" :data="row"></x-avatar>
<el-badge v-else-if="item.columntype == 'badge' || item.columntype == 'imagegroup'" :value="getType(row[item.name])" @click="handleClick(row, item)" v-bind="item.options"></el-badge>
<el-image v-else-if="item.columntype == 'image'" :preview-src-list="[getImg(row[item.name])]" :preview-teleported="true" hide-on-click-modal="true" lazy="true" style="max-width: 60px; height: 26px; border-radius: 2px;" fit="cover" :src="getImg(row[item.name])">
<template #error>
<div class="image-slot">
无图
</div>
</template>
</el-image>
<input v-else-if="item.columntype == 'input'" @click="handleClick(row, item)" style="cursor: pointer; " class="el-input__inner" type="text" readonly :value="row[item.name]">
<p v-else-if="item.columntype == 'status'">
<template v-for="{ value, type = 'success', label } in item.options.items">
<x-status-indicator :key="value" pulse :type="type || 'success'" :label="label" @click="handleClick(row, item)" v-if="value == row[item.name]"></x-status-indicator>
</template>
</p>
<p v-else-if="item.columntype == 'button' && item.options.items && item.options.items.length > 0">
<template v-for="op in item.options.items">
<el-button @click="handleClick(row, op.options || item)" :key="op.value" :type="op.type || 'warning'" v-bind="op" v-if="op.value == row[item.name]">
{{ op.label }}
</el-button>
</template>
</p>
<p v-else-if="item.columntype == 'button'">
<el-button @click="handleClick(row, item)" :type="item.options.type || 'warning'" v-bind="item.options"> {{ row[item.name] }} </el-button>
</p>
<p v-else-if="item.columntype == 'tag' || item.columntype == 'time'" @click="handleClick(row, item)" v-time.tip="row[item.name]"></p>
<slot v-else :name="item.name">
{{ item.columntype == 'select' && item.options && item.options.items ? getNameByValue(row[item.name], item.options.items) : row[item.name] }}
</slot>
</div>
</template>
<style scoped>
.el-badge {
display: inherit;
}
</style>
<script>
export default {
name: 'XTableColumnItem',
props: {
item: {
type: Object, default: () => ({
options: {}
})
},
row: { type: Object, default: () => { } },
},
methods: {
handleClick(row, item) {
// 打开新窗口链接
if (item.open && item.open.name && row[item.open.name]?.trim()) {
window.open(row[item.open.name], "_blank");
return;
}
// 打开编辑层
else if (item.update && (item.update.url || item.update.name)) {
var options = Object.assign({ name: item.update.name || item.label, remoteurl: item.update.url || 'table/getUpdate?name=' + item.update.name }, item.update);
this.$emit('xtableupdate', row, options, 'update');
return;
}
// 打开表格
else if (item.table && (item.table.url || item.table.name)) {
this.$emit('xtableupdate', row, {
name: item.table.name || item.name,
remoteurl: item.table.url || 'table/get?name=' + item.table.name
}, item.table.type || 'dialog', 'table');
return;
} else if (item.http && item.http.url && item.http.key && String(row[item.http.key])?.trim()) {
this.$confirm(item.http.title || '确定要执行?', '提示', { type: item.http.type || 'warning' }).then(() => {
const loading = this.$loading();
this.$http.post(item.http.url, { [item.http.key]: row[item.http.key] }).then((res) => {
loading.close();
if (res.code == 200) {
this.$message.success(res.message || '操作成功')
return;
}
this.$alert(res.message || '操作失败', "提示", { type: 'error' });
});
}).catch(() => {
})
}
},
getType(value) {
if (Array.isArray(value)) {
return value.length;
}
return value;
},
getNameByValue(value, degrees) {
const degree = degrees.find(degree => degree.value == value);
return degree ? (degree.name ? degree.name : degree.label) : value;
},
getImg(o) {
if (!o) {
return;
}
return typeof o === 'string' ? o : o.url;
},
}
}
</script>