From 4ccef9dc20ecdb022963a31d108d5c9b86ff70bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=99=8C?= <xiaomo.drip@gmail.com>
Date: Mon, 25 Dec 2023 19:03:23 +0800
Subject: [PATCH] no message

---
 src/components/xTableSelect/index.vue | 460 ++++++++++++++------------
 src/config/tableSelect.js             |  10 +-
 2 files changed, 252 insertions(+), 218 deletions(-)

diff --git a/src/components/xTableSelect/index.vue b/src/components/xTableSelect/index.vue
index 62be763..aadf69f 100644
--- a/src/components/xTableSelect/index.vue
+++ b/src/components/xTableSelect/index.vue
@@ -10,9 +10,6 @@
 				</div>
 				<el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll">
 					<el-table-column v-if="multiple" type="selection" width="55"></el-table-column>
-					<el-table-column v-else type="index" width="55">
-						<template #default="scope"><span>{{scope.$index+(currentPage - 1) * limit + 1}}</span></template>
-					</el-table-column>
 					<slot></slot>
 				</el-table>
 				<div class="x-table-select__page">
@@ -24,226 +21,259 @@
 </template>
 
 <script>
-	import config from "@/config/tableSelect";
+import config from "@/config/tableSelect";
 
-	export default {
-		props: {
-			modelValue: null,
-			api: { type: String, default: '' },
-			params: { type: Object, default: () => {} },
-			form: { type: Array, default: () => [] },
-			placeholder: { type: String, default: "请选择" },
-			size: { type: String, default: "default" },
-			clearable: { type: Boolean, default: false },
-			multiple: { type: Boolean, default: false },
-			filterable: { type: Boolean, default: false },
-			collapseTags: { type: Boolean, default: false },
-			collapseTagsTooltip: { type: Boolean, default: false },
-			disabled: { type: Boolean, default: false },
-			mode: { type: String, default: "popover" },
-			props: { type: Object, default: () => {} }
-		},
-		data() {
-			return {
-				loading: false,
-				keyword: null,
-				defaultValue: [],
-				tableData: [],
-				limit: config.limit,
-				total: 0,
-				currentPage: 1,
-				defaultProps: {
-					label: config.props.label,
-					value: config.props.value,
-					page: config.request.page,
-					limit: config.request.limit,
-					keyword: config.request.keyword
-				},
-				formData: {}
-			}
-		},
-		computed: {
+export default {
+	props: {
+		modelValue: null,
+		api: { type: String, default: '' },
+		params: { type: Object, default: () => { } },
+		form: { type: Array, default: () => [] },
+		placeholder: { type: String, default: "请选择" },
+		size: { type: String, default: "default" },
+		clearable: { type: Boolean, default: false },
+		multiple: { type: Boolean, default: false },
+		filterable: { type: Boolean, default: false },
+		collapseTags: { type: Boolean, default: false },
+		collapseTagsTooltip: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
+		mode: { type: String, default: "popover" },
+		props: { type: Object, default: () => { } }
+	},
+	data() {
+		return {
+			loading: false,
+			keyword: null,
+			defaultValue: [],
+			tableData: [],
+			limit: config.limit,
+			total: 0,
+			currentPage: 1,
+			defaultProps: {
+				label: config.props.label,
+				value: config.props.value,
+				page: config.request.page,
+				limit: config.request.limit,
+				keyword: config.request.keyword,
+				field: {}
+			},
+			formData: {},
+			skey: '',
+			dkey: '',
+		}
+	},
+	computed: {
 
-		},
-		watch: {
-			modelValue:{
-				handler(){
-					this.defaultValue = this.modelValue
-					this.autoCurrentLabel()
-				},
-				deep: true
-			}
-		},
-		mounted() {
-			this.defaultProps = Object.assign(this.defaultProps, this.props);
-			this.defaultValue =  this.modelValue
-			this.autoCurrentLabel()
-		},
-		methods: {
-			//表格显示隐藏回调
-			visibleChange(visible){
-				if(visible){
-					this.currentPage = 1
-					this.keyword = null
-					this.formData = {}
-					this.getData()
-				}else{
-					this.autoCurrentLabel()
-				}
-			},
-			//获取表格数据
-			async getData(){
-				this.loading = true;
-				var reqData = {
-					[this.defaultProps.page]: this.currentPage,
-					[this.defaultProps.limit]: this.limit,
-					[this.defaultProps.keyword]: this.keyword
-				}
-				Object.assign(reqData, this.params, this.formData)
-				var res = await this.$http.get(this.api, reqData, {cacheparameters:1});
-				var parseData = config.parseData(res)
-				this.tableData = parseData.rows;
-				this.total = parseData.total;
-				this.loading = false;
-				//表格默认赋值
-				this.$nextTick(() => {
-
-					if(typeof this.defaultValue === 'undefined'){
-						this.defaultValue = this.multiple ? [] : {};
-					}
-
-					if(this.multiple){
-						this.defaultValue.forEach(row => {
-							var setrow = this.tableData.filter(item => item[this.defaultProps.value]===row[this.defaultProps.value] )
-							if(setrow.length > 0){
-								this.$refs.table.toggleRowSelection(setrow[0], true);
-							}
-						})
-					}else{
-						var setrow = this.tableData.filter(item => item[this.defaultProps.value]===this.defaultValue[this.defaultProps.value] )
-						this.$refs.table.setCurrentRow(setrow[0]);
-					}
-					this.$refs.table.setScrollTop(0)
-				})
-			},
-			//插糟表单提交
-			formSubmit(){
-				this.currentPage = 1
-				this.keyword = null
-				this.getData()
-			},
-			//分页刷新表格
-			reload(){
-				this.getData()
-			},
-			//自动模拟options赋值
-			autoCurrentLabel(){
-				this.$nextTick(() => {
-					if(this.multiple){
-						this.$refs.select.selected.forEach(item => {
-							item.currentLabel = item.value[this.defaultProps.label]
-						})
-						return ;
-					}
-					this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label] : this.defaultValue
-				})
-			},
-			//表格勾选事件
-			select(rows, row){
-				var isSelect = rows.length && rows.indexOf(row) !== -1
-				if(isSelect){
-					var data = {};
-					for (const key in this.defaultProps) {
-					    if (Object.prototype.hasOwnProperty.call(row, this.defaultProps[key])) {
-					    	data[this.defaultProps[key]] = row[this.defaultProps[key]]
-					    }
-					}
-					this.defaultValue.push(data)
-				}else{
-					this.defaultValue.splice(
-						this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 
-						1
-					);
-				}
+	},
+	watch: {
+		modelValue: {
+			handler() {
+				this.defaultValue = this.modelValue
 				this.autoCurrentLabel()
-				this.$emit('update:modelValue', this.defaultValue);
-				this.$emit('change', this.defaultValue);
 			},
-			//表格全选事件
-			selectAll(rows){
-				var isAllSelect = rows.length > 0
-				if(isAllSelect){
-					rows.forEach(row => {
-						var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
-						if(!isHas){
-							this.defaultValue.push(row)
-						}
-					})
-				}else{
-					this.tableData.forEach(row => {
-						var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
-						if(isHas){
-							this.defaultValue.splice(
-								this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 
-								1
-							)
-						}
-					})
-				}
-				this.autoCurrentLabel()
-				this.$emit('update:modelValue', this.defaultValue);
-				this.$emit('change', this.defaultValue);
-			},
-			click(row){
-				if(this.multiple){
-					//处理多选点击行
-				}else{
-					for (const key in this.defaultProps) {
-					    if (Object.prototype.hasOwnProperty.call(row, this.defaultProps[key])) {
-					    	this.defaultValue[this.defaultProps[key]] = row[this.defaultProps[key]]
-					    }
-					}
-					this.$refs.select.blur()
-					this.autoCurrentLabel()
-					this.$emit('update:modelValue', this.defaultValue);
-					this.$emit('change', this.defaultValue);
-				}
-			},
-			//tags删除后回调
-			removeTag(tag){
-				var row = this.findRowByKey(tag[this.defaultProps.value])
-				this.$refs.table.toggleRowSelection(row, false);
-				this.$emit('update:modelValue', this.defaultValue);
-			},
-			//清空后的回调
-			clear(){
-				this.$emit('update:modelValue', this.defaultValue);
-			},
-			// 关键值查询表格数据行
-			findRowByKey (value) {
-				return this.tableData.find(item => item[this.defaultProps.value] === value)
-			},
-			filterMethod(keyword){
-				if(!keyword){
-					this.keyword = null;
-					return false;
-				}
-				this.keyword = keyword;
-				this.getData()
-			},
-			// 触发select隐藏
-			blur(){
-				this.$refs.select.blur();
-			},
-			// 触发select显示
-			focus(){
-				this.$refs.select.focus();
+			deep: true
+		}
+	},
+	mounted() {
+		this.defaultProps = Object.assign(this.defaultProps, this.props);
+		this.defaultValue = this.modelValue
+		this.skey = this.defaultProps.value;
+
+		if (Object.keys(this.defaultProps.field).length === 0) {
+			this.defaultProps.field = {
+				[this.defaultProps.value]: this.defaultProps.value,
+				[this.defaultProps.label]: this.defaultProps.label,
 			}
 		}
+
+		for (let key in this.defaultProps.field) {
+			if (key == this.skey) {
+				this.dkey = this.defaultProps.field[key];
+				break;
+			}
+		}
+		this.autoCurrentLabel()
+	},
+	methods: {
+		//表格显示隐藏回调
+		visibleChange(visible) {
+			if (visible) {
+				this.currentPage = 1
+				this.keyword = null
+				this.formData = {}
+				this.getData()
+			} else {
+				this.autoCurrentLabel()
+			}
+		},
+		//获取表格数据
+		async getData() {
+			this.loading = true;
+			var reqData = {
+				[this.defaultProps.page]: this.currentPage,
+				[this.defaultProps.limit]: this.limit,
+				[this.defaultProps.keyword]: this.keyword
+			}
+			Object.assign(reqData, this.params, this.formData)
+			var res = await this.$http.get(this.api, reqData, { cacheparameters: 1 });
+			var parseData = config.parseData(res)
+			this.tableData = parseData.rows;
+			this.total = parseData.total;
+			this.loading = false;
+			//表格默认赋值
+			this.$nextTick(() => {
+
+				if (typeof this.defaultValue === 'undefined') {
+					this.defaultValue = this.multiple ? [] : {};
+				}
+
+				if (this.multiple) {
+					this.defaultValue.forEach(row => {
+						var setrow = this.tableData.filter(item => item[this.dkey] === row[this.skey])
+						if (setrow.length > 0) {
+							this.$refs.table.toggleRowSelection(setrow[0], true);
+						}
+					})
+				} else {
+					var setrow = this.tableData.filter(item => item[this.dkey] === this.defaultValue[this.skey])
+					this.$refs.table.setCurrentRow(setrow[0]);
+				}
+				this.$refs.table.setScrollTop(0)
+			})
+		},
+		//插糟表单提交
+		formSubmit() {
+			this.currentPage = 1
+			this.keyword = null
+			this.getData()
+		},
+		//分页刷新表格
+		reload() {
+			this.getData()
+		},
+		//自动模拟options赋值
+		autoCurrentLabel() {
+			this.$nextTick(() => {
+				if (this.multiple) {
+					this.$refs.select.selected.forEach(item => {
+						item.currentLabel = item.value[this.defaultProps.label]
+					})
+					return;
+				}
+				this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label] : this.defaultValue
+			})
+		},
+		//表格勾选事件
+		select(rows, row) {
+			var isSelect = rows.length && rows.indexOf(row) !== -1
+			if (isSelect) {
+				var data = {};
+				for (let key in this.defaultProps.field) {
+					if (Object.prototype.hasOwnProperty.call(row, this.defaultProps.field[key])) {
+						data[key] = row[this.defaultProps.field[key]]
+					}
+				}
+				this.defaultValue.push(data)
+			} else {
+				this.defaultValue.splice(
+					this.defaultValue.findIndex(item => item[this.dkey] == row[this.skey]),
+					1
+				);
+			}
+			this.autoCurrentLabel()
+			this.$emit('update:modelValue', this.defaultValue);
+			this.$emit('change', this.defaultValue);
+		},
+		//表格全选事件
+		selectAll(rows) {
+			var isAllSelect = rows.length > 0
+			if (isAllSelect) {
+				rows.forEach(row => {
+					var isHas = this.defaultValue.find(item => item[this.skey] == row[this.dkey])
+					if (!isHas) {
+						this.defaultValue.push(row)
+					}
+				})
+			} else {
+				this.tableData.forEach(row => {
+					var isHas = this.defaultValue.find(item => item[this.skey] == row[this.dkey])
+					if (isHas) {
+						this.defaultValue.splice(
+							this.defaultValue.findIndex(item => item[this.skey] == row[this.dkey]),
+							1
+						)
+					}
+				})
+			}
+			this.autoCurrentLabel()
+			this.$emit('update:modelValue', this.defaultValue);
+			this.$emit('change', this.defaultValue);
+		},
+		click(row) {
+			if (this.multiple) {
+				//处理多选点击行
+			} else {
+
+				if (this.defaultProps.field) {
+					if (typeof this.defaultValue === 'object') {
+						for (let key in this.defaultProps.field) {
+							if (Object.prototype.hasOwnProperty.call(row, this.defaultProps.field[key])) {
+								this.defaultValue[key] = row[this.defaultProps.field[key]]
+							}
+						}
+					} else {
+						this.defaultValue = row[this.dkey];
+					}
+				} else {
+					this.defaultValue = row;
+				}
+
+				this.$refs.select.blur()
+				this.autoCurrentLabel()
+				this.$emit('update:modelValue', this.defaultValue);
+				this.$emit('change', this.defaultValue);
+			}
+		},
+		//tags删除后回调
+		removeTag(tag) {
+			var row = this.findRowByKey(tag[this.defaultProps.value])
+			this.$refs.table.toggleRowSelection(row, false);
+			this.$emit('update:modelValue', this.defaultValue);
+		},
+		//清空后的回调
+		clear() {
+			this.$emit('update:modelValue', this.defaultValue);
+		},
+		// 关键值查询表格数据行
+		findRowByKey(value) {
+			return this.tableData.find(item => item[this.defaultProps.value] === value)
+		},
+		filterMethod(keyword) {
+			if (!keyword) {
+				this.keyword = null;
+				return false;
+			}
+			this.keyword = keyword;
+			this.getData()
+		},
+		// 触发select隐藏
+		blur() {
+			this.$refs.select.blur();
+		},
+		// 触发select显示
+		focus() {
+			this.$refs.select.focus();
+		}
 	}
+}
 </script>
 
 <style scoped>
-	.x-table-select__table {padding:12px;}
-	.x-table-select__page {padding-top: 12px;}
+.x-table-select__table {
+	padding: 12px;
+}
+
+.x-table-select__page {
+	padding-top: 12px;
+}
 </style>
diff --git a/src/config/tableSelect.js b/src/config/tableSelect.js
index 6a0de9a..01a1c77 100644
--- a/src/config/tableSelect.js
+++ b/src/config/tableSelect.js
@@ -1,7 +1,7 @@
 //表格选择器配置
 export default {
     limit: 20, //表格每一页条数
-    parseData: function(res) {
+    parseData: function (res) {
         return {
             data: res.data,
             rows: res.data.data, //分析行数据字段结构
@@ -16,7 +16,11 @@ export default {
         keyword: 'keyword' //规定搜索字段
     },
     props: {
-        label: 'label', // 映射label显示字段
-        value: 'value', // 映射value值字段
+        key: null,
+        label: 'id', // 映射label显示字段
+        value: 'name', // 映射value值字段
+        field: {
+
+        }
     }
 }
\ No newline at end of file