x-php-Admin/src/components/xTable/columnItem.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="bind" :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="bind" style="cursor: pointer; "></el-badge>
		<el-link v-else-if="item.columntype == 'link'" v-bind="bind" @click="handleClick(row, item)"> {{ row[item.name] }} </el-link>
		<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'" :style="item.style">
			<template v-for="{ value, type = 'success', label, options={} } in options">
				<x-status-indicator :key="value" pulse :type="type" :label="label" @click="handleClick(row, options || item)" v-if="value == row[item.name]"></x-status-indicator>
			</template>
		</p>
		<p v-else-if="item.columntype == 'button'">
			<span v-if="options && options.length > 0">
				<template v-for="(op, index) in options">
					<el-button @click="handleClick(row, op.options || item)" :key="index" type="warning" size="small" v-bind="op" v-if="op.value == row[item.name]">
						{{ op.label }}
					</el-button>
				</template>
			</span>
			<el-button v-else @click="handleClick(row, item)" type="warning" v-bind="bind"> {{ row[item.name] }} </el-button>
		</p>
		<p v-else-if="item.columntype == 'text'">
			<el-text v-bind="bind" v-if="item.copy" v-copy="row[item.copy]" style="cursor: pointer;display: inline;"> {{ row[item.name] }} </el-text>
			<el-text v-bind="bind" v-else @click="handleClick(row, item)" style="cursor: pointer;display: inline;"> {{ row[item.name] }} </el-text>
		</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' && options ? getNameByValue(row[item.name], options) : row[item.name] }}
		</slot>
	</div>
</template>
<style scoped>
.el-badge {
	display: inherit;
}
</style>
<script>
export default {
	name: 'XTableColumnItem',
	props: {
		item: {
			type: Object, default: () => ({
				options: [],
				bind: {},
			})
		},
		row: { type: Object, default: () => { } },
	},
	computed: {
		options() {
			return this.item.options.items || (Array.isArray(this.item.options) ? this.item.options : []); // 兼容旧版
		},
		bind() {
			const { bind, options } = this.item;
			return bind || (this.isPlainObject(options) ? options : {});
		},
	},
	methods: {
		isPlainObject(obj) {
			return typeof obj === 'object' && obj !== null && !Array.isArray(obj);
		},
		handleClick(row, item) {

			// 打开新窗口链接
			if (item.open && item.open.name && row[item.open.name]?.trim()) {
				window.open(row[item.open.name], item.open.target || "_blank");
				return;
			}
			// 打开路由跳转
			else if (item.router && item.router.path) {
				var param = Object.assign({}, { [item.router.key]: row[item.router.rowkey || item.router.key] }, item.router.param || {});
				// 在路由跳转前设置数据
				this.$tool.store.set("routerData", param)
				this.$router.push({
					path: row[item.router.path] || item.router.path
				});
				return;
			}
			// 打开编辑层
			else if (item.update && (item.update.url || item.update.name)) {
				this.$emit('xtablehandleClick', row, Object.assign({ name: item.update.name || item.label, remoteurl: item.update.url || 'table/getUpdate?name=' + item.update.name }, item.update), 'update');
				return;
			}
			// 统计
			else if (item.stat && (item.stat.value || item.stat.key)) {
				this.$emit('xtablehandleClick', row, item.stat, 'stat');
				return;
			}
			// 打开表格
			else if (item.table && (item.table.url || item.table.name)) {
				this.$emit('xtablehandleClick', row, Object.assign({ name: item.table.name || item.label, remoteurl: item.table.url || 'table/get?name=' + item.table.name }, item.table), 'table');
				return;
			} else if (item.http && item.http.url && item.http.key && String(row[item.http.key])?.trim()) {

				this.$confirm(item.http.tips || '确定要执行？', item.http.title || '提示', { type: item.http.type || 'warning' }).then(() => {
					var param = Object.assign({}, { [item.http.key]: row[item.http.key] }, item.http.param || {});
					this.$http.post(row[item.http.url] || item.http.url, param).then((res) => {
						if (res.code == 200) {
							this.$message.success(res.message || '操作成功')
							// 刷新
							this.$emit('xtablerefresh');
							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>