feat: 完善xselect封装

src/components/xSelect/index.vue

@@ -30,6 +30,7 @@
 				:width="tableWidth"
 			>
 				<el-input
+					v-if="!isFixOptions"
 					v-model="keyword"
 					placeholder="关键词查找"
 					@keyup.enter="handleQuery"
@@ -39,6 +40,7 @@
                     v-if="showPopover"
 					ref="table"
 					:apiObj="apiObj"
+					:data="tableData"
 					:params="params"
 					:query="query"
 					:height="tableHeight"
@@ -52,7 +54,12 @@
                     @selection-change="selectionChange"
 				>
                     <el-table-column v-if="multiple" type="selection" width="40" :reserve-selection="true"></el-table-column>
-					<slot></slot>
+					<slot v-if="!isFixOptions"></slot>
+					<template v-else>
+						<el-table-column
+							:prop="props.labelField"
+						></el-table-column>
+					</template>
             </scTable>
 			</el-popover>
 		</div>
@@ -60,7 +67,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits, computed } from "vue";
+import { ref, defineProps, defineEmits, computed, onMounted } from "vue";
 
 const props = defineProps({
     multiple: { type: Boolean, default: false },
@@ -68,23 +75,58 @@ const props = defineProps({
 	hidePagination: { type: Boolean, default: false },
 	tableWidth: { type: Number, default: 600 },
 	tableHeight: { type: Number, default: 400 },
-	apiObj: { type: Object, default: () => {}, required: true },
+	apiObj: { type: Object, default: null },
 	params: { type: Object, default: () => {} },
 	label: { type: [String, Number, Array], default: "" },
     obj: { type: Object, default: () => {} },
 	modelValue: { type: [String, Number, Array], default: null },
 	labelField: { type: String, default: "name" },
 	valueField: { type: String, default: "id" },
+	splitField: { type: String, default: ";" },
+	options: { type: Array, default: null },
 });
 
-const emit = defineEmits(["update:modelValue", "update:label", "update:obj"]);
+const emit = defineEmits(["update:modelValue", "update:obj", "update:label"]);
 
 // 控制 popover 显示与隐藏的状态
-const multiple = ref(props.multiple);
-const obj = ref(props.obj);
 const showPopover = ref(false);
 const inputRef = ref();
 const table = ref();
+const hidePagination = ref(props.hidePagination);
+
+onMounted(() => {
+	if(props.options != null) {
+		isFixOptions.value = true;
+		tableData.value = props.options;
+		hidePagination.value = true;
+	}
+	
+	if(props.label) {
+		selectLabel.value = props.label;
+	}
+	else {
+		if (props.multiple) {
+			if (isFixOptions.value) {
+				selectLabel.value = props.options.filter(item => props.modelValue.includes(item[props.valueField])).map(item => item[props.labelField]).join(props.splitField);
+			}
+			else if (props.obj && props.obj.length > 0) {
+			    selectLabel.value = props.obj.map(item => item[props.labelField]).join(props.splitField);
+			}
+		}
+		else {
+			if (isFixOptions.value) {
+				const selectedOption = props.options.find(item => item[props.valueField] === props.modelValue);
+				selectLabel.value = selectedOption ? selectedOption[props.labelField] : "";
+			}
+			else {
+				selectLabel.value = props.obj[props.labelField];
+			}
+		}
+	}
+})
+
+const isFixOptions = ref(false);
+const tableData = ref(null);
 
 const selectObj = computed({
 	get() {
@@ -95,14 +137,6 @@ const selectObj = computed({
     }
 })
 
-const selectLabel = computed({
-	get() {
-		return props.label;
-	},
-	set(val) {
-		emit("update:label", val);
-	},
-});
 const selectValue = computed({
 	get() {
 		return props.modelValue;
@@ -112,6 +146,8 @@ const selectValue = computed({
 	},
 });
 
+const selectLabel = ref("");
+
 const keyword = ref("");
 const query = ref({ search: "" });
 
@@ -121,7 +157,7 @@ const handleQuery = () => {
 };
 
 const rowClick = (row) => {
-    if(!multiple.value){
+    if(!props.multiple){
         selectObj.value = row;
         selectLabel.value = row[props.labelField];
         selectValue.value = row[props.valueField];
@@ -130,9 +166,16 @@ const rowClick = (row) => {
 };
 
 const handleClear = () => {
-    selectObj.value = {};
+	if(props.multiple){
-	selectLabel.value = "";
+		selectObj.value = [],
-	selectValue.value = null;
+		selectLabel.value = "";
+		selectValue.value = [];
+	}else{
+		selectObj.value = {};
+		selectLabel.value = "";
+		selectValue.value = null;
+	}
+	emit("update:label", "");
 };
 
 const tdChange = (res, tableData) =>{
@@ -142,10 +185,12 @@ const tdChange = (res, tableData) =>{
 }
 
 const selectionChange = (val) => {
-    if(multiple.value){
+    if(props.multiple){
         selectObj.value = val;
-        selectLabel.value = val.map(item => item[props.labelField]).join(";");
         selectValue.value = val.map(item => item[props.valueField]);
+
+		selectLabel.value = val.map(item => item[props.labelField]).join(props.splitField);
+		emit("update:label", val);
     }
 };
 </script>

src/views/home/testx.vue

@@ -26,24 +26,65 @@
 				></ehsSelect>
 			</div>
 			<div v-if="currentM == 'xSelect'">
+				<h1>基于input封装的远程表格select-单选分页</h1>
 				<xSelect
 					:apiObj="apiObj"
 					v-model="x2"
 					v-model:label="x2_name"
 					v-model:obj="x2_obj"
 					style="width: 500px"
+				>
+					<el-table-column label="id" prop="id"></el-table-column>
+					<el-table-column label="名称" prop="name"></el-table-column>
+				</xSelect>
+				<div>
+					当前选择：
+					<h1>v-model: {{ x2 }}</h1>
+					<h1>v-model:label: {{ x2_name }}</h1>
+					<h1>v-model:obj: {{ x2_obj }}</h1>
+				</div>
+				<h1 style="margin-top: 20px">基于input封装的远程表格select-多选不分页</h1>
+				<xSelect
+					:apiObj="apiObj"
+					v-model="x2s"
+					v-model:obj="x2s_obj"
+					style="width: 500px"
 					:multiple="true"
 				>
 					<el-table-column label="id" prop="id"></el-table-column>
 					<el-table-column label="名称" prop="name"></el-table-column>
 				</xSelect>
-
 				<div>
 					当前选择：
-					<h1>value: {{ x2 }}</h1>
+					<h1>v-model: {{ x2s }}</h1>
-					<h1>label: {{ x2_name }}</h1>
+					<h1>v-model:obj: {{ x2s_obj }}</h1>
-					<h1>obj: {{ x2_obj }}</h1>
 				</div>
+
+				<h1 style="margin-top: 20px">基于input封装的固定选项select-单选</h1>
+				<xSelect
+					:options="options"
+					v-model="x2sf"
+					style="width: 500px"
+				>
+				</xSelect>
+				<div>
+					当前选择：
+					<h1>v-model: {{ x2sf }}</h1>
+				</div>
+
+				<h1 style="margin-top: 20px">基于input封装的固定选项select-多选</h1>
+				<xSelect
+					:options="options"
+					v-model="x2sfs"
+					style="width: 500px"
+					:multiple="true"
+				>
+				</xSelect>
+				<div>
+					当前选择：
+					<h1>v-model: {{ x2sfs }}</h1>
+				</div>
+
 			</div>
 			<div v-if="currentM == 'scEcharts'">
 				<el-card title="测试图表">
@@ -59,23 +100,18 @@
 			<div v-if="currentM == 'ehsTableSelect'">
 				<ehsTableSelect
 					:apiObj="apiObj"
-					v-model="x2"
+					v-model="x_3"
-					:props="{ value: 'id', label: 'name' }"
+					:props="props"
-					:multiple="true"
 				>
 					<el-table-column label="id" prop="id"></el-table-column>
 					<el-table-column label="名称" prop="name"></el-table-column>
 				</ehsTableSelect>
 			</div>
 			<div v-if="currentM == 'scTableSelect'">
-				<scTableSelect :apiObj="apiObj" v-model="x3" :props="props">
+				<scTableSelect :apiObj="apiObj" v-model="x_3" :props="props">
 					<el-table-column label="id" prop="id"></el-table-column>
 					<el-table-column label="名称" prop="name"></el-table-column>
 				</scTableSelect>
-
-				<el-select v-model="x3" >
-
-				</el-select>
 			</div>
 		</el-main>
 	</el-container>
@@ -103,8 +139,8 @@ export default {
 				keyword: "search",
 			},
 			x_3: {
-				value: "3347207082608115712",
+				id: "3347207082608115712",
-				label: "烧成车间",
+				name: "烧成车间",
 			},
 			currentM: "",
 			apiObj: this.$API.system.dept.list,
@@ -112,9 +148,22 @@ export default {
 			x_name: "光芯科技",
 			// x:null,
 			apiObj2: this.$API.system.user.list,
+
 			x2: "3347207082608115712",
 			x2_name: "烧成车间",
 			x2_obj: {},
+			
+			x2s: [ "1561653664806998016", "3423856735881117696" ],
+			x2s_obj: [{id: "1561653664806998016", name: "水泥工厂"}, {id: "3423856735881117696", name: "光子科技"}],
+
+			options: [
+				{ name: "选项1", id: 10 },
+				{ name: "选项2", id: 20 },
+				{ name: "选项3", id: 30 },
+			],
+			x2sf: 10,
+			x2sfs: [10, 20],
+
 			chartOption: {
 				textStyle: {
 					fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',