组件更新

web/src/components/tableSelector/index.vue

@@ -3,6 +3,7 @@
 		popper-class="popperClass"
 		class="tableSelector"
 		multiple
+    :collapseTags="props.tableConfig.collapseTags"
 		@remove-tag="removeTag"
 		v-model="data"
 		placeholder="请选择"
@@ -18,20 +19,22 @@
 				<el-table
 					ref="tableRef"
 					:data="tableData"
-					size="mini"
+					:size="props.tableConfig.size"
 					border
 					row-key="id"
 					:lazy="props.tableConfig.lazy"
 					:load="props.tableConfig.load"
 					:tree-props="props.tableConfig.treeProps"
-					style="width: 400px"
+					style="width: 600px"
 					max-height="200"
 					height="200"
 					:highlight-current-row="!props.tableConfig.isMultiple"
-					@selection-change="handleSelectionChange"
+          @selection-change="handleSelectionChange"
+					@select="handleSelectionChange"
+          @selectAll="handleSelectionChange"
 					@current-change="handleCurrentChange"
 				>
-					<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55" />
+					<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" reserve-selection width="55" />
 					<el-table-column fixed type="index" label="#" width="50" />
 					<el-table-column
 						:prop="item.prop"
@@ -56,24 +59,32 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, reactive, ref, watch } from 'vue';
+import {computed, defineProps, onMounted, reactive, ref, watch} from 'vue';
 import XEUtils from 'xe-utils';
 import { request } from '/@/utils/service';
 
 const props = defineProps({
-	modelValue: {},
+	modelValue: {
+    type: Array || String || Number,
+    default: () => []
+  },
 	tableConfig: {
-		url: null,
-		label: null, //显示值
-		value: null, //数据值
-		isTree: false,
-		lazy: true,
-		load: () => {},
-		data: [], //默认数据
-		isMultiple: false, //是否多选
-		treeProps: { children: 'children', hasChildren: 'hasChildren' },
-		columns: [], //每一项对应的列表项
-	},
+    type: Object,
+    default:{
+      url: null,
+      label: null, //显示值
+      value: null, //数据值
+      isTree: false,
+      lazy: true,
+      size:'default',
+      load: () => {},
+      data: [], //默认数据
+      isMultiple: false, //是否多选
+      collapseTags:false,
+      treeProps: { children: 'children', hasChildren: 'hasChildren' },
+      columns: [], //每一项对应的列表项
+    },
+  },
 	displayLabel: {},
 } as any);
 const emit = defineEmits(['update:modelValue']);
@@ -86,7 +97,7 @@ const multipleSelection = ref();
 // 搜索值
 const search = ref(undefined);
 //表格数据
-const tableData = ref();
+const tableData = ref([]);
 // 分页的配置
 const pageConfig = reactive({
 	page: 1,
@@ -99,7 +110,6 @@ const pageConfig = reactive({
  * @param val:Array
  */
 const handleSelectionChange = (val: any) => {
-	multipleSelection.value = val;
 	const { tableConfig } = props;
 	const result = val.map((item: any) => {
 		return item[tableConfig.value];
@@ -117,7 +127,7 @@ const handleSelectionChange = (val: any) => {
 const handleCurrentChange = (val: any) => {
 	const { tableConfig } = props;
 	if (!tableConfig.isMultiple && val) {
-		data.value = [val[tableConfig.label]];
+		// data.value = [val[tableConfig.label]];
 		emit('update:modelValue', val[tableConfig.value]);
 	}
 };
@@ -150,6 +160,32 @@ const getDict = async () => {
 	}
 };
 
+// 获取节点值
+const getNodeValues = () => {
+	request({
+    url:props.tableConfig.valueUrl,
+    method:'post',
+    data:{ids:props.modelValue}
+  }).then(res=>{
+    if(res.data.length>0){
+      data.value = res.data.map((item:any)=>{
+        return item[props.tableConfig.label]
+      })
+
+      tableRef.value!.clearSelection()
+      res.data.forEach((row) => {
+        tableRef.value!.toggleRowSelection(
+            row,
+            true,
+            false
+        )
+      })
+    }
+
+  })
+ }
+
+
 /**
  * 下拉框展开/关闭
  * @param bool
@@ -169,20 +205,12 @@ const handlePageChange = (page: any) => {
 	getDict();
 };
 
-// 监听displayLabel的变化，更新数据
-watch(
-	() => {
-		return props.displayLabel;
-	},
-	(value) => {
-		const { tableConfig } = props;
-		const result = value
-			? value.map((item: any) => { return item[tableConfig.label];})
-			: null;
-		data.value = result;
-	},
-	{ immediate: true }
-);
+onMounted(()=>{
+  setTimeout(()=>{
+    getNodeValues()
+  },1000)
+})
+
 </script>
 
 <style scoped>