From 27fd49a69049205e0b2aadf63c6462a3eb96ca1c Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Sat, 26 Oct 2024 13:13:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20xselect=20edit=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/xSelect/index.vue | 178 ++++++++++++++++---------------
 1 file changed, 93 insertions(+), 85 deletions(-)

diff --git a/src/components/xSelect/index.vue b/src/components/xSelect/index.vue
index 99ece2ea..ba10a0ef 100644
--- a/src/components/xSelect/index.vue
+++ b/src/components/xSelect/index.vue
@@ -1,16 +1,16 @@
 <template>
 	<div>
 		<el-input ref="inputRef" v-model="selectLabel" :readonly="true">
-			<template #prefix>
+			<template #prefix v-if="edit">
 				<el-button
 					text
 					size="small"
 					circle
 					icon="el-icon-search"
-                    @click="showPopover=true"
+					@click="showPopover = true"
 				></el-button>
 			</template>
-			<template #suffix>
+			<template #suffix v-if="edit">
 				<el-button
 					text
 					size="small"
@@ -21,48 +21,49 @@
 				></el-button>
 			</template>
 		</el-input>
-		<div v-if="edit">
-			<el-popover
-				v-model:visible="showPopover"
-				trigger="manual"
-				virtual-triggering
-				:virtual-ref="inputRef"
-				:width="tableWidth"
+		<el-popover
+			v-model:visible="showPopover"
+			trigger="manual"
+			virtual-triggering
+			:virtual-ref="inputRef"
+			:width="tableWidth"
+		>
+			<el-input
+				v-if="!isFixOptions"
+				v-model="keyword"
+				placeholder="关键词查找"
+				@keyup.enter="handleQuery"
+			></el-input>
+			<div style="height: 2px"></div>
+			<scTable
+				v-if="showPopover"
+				ref="table"
+				:apiObj="apiObj"
+				:data="tableData"
+				:params="params"
+				:query="query"
+				:height="tableHeight"
+				row-key="id"
+				stripe
+				@row-click="rowClick"
+				:hidePagination="hidePagination"
+				paginationLayout="prev, pager, next"
+				hideDo
+				@dataChange="tdChange"
+				@selection-change="selectionChange"
 			>
-				<el-input
-					v-if="!isFixOptions"
-					v-model="keyword"
-					placeholder="关键词查找"
-					@keyup.enter="handleQuery"
-				></el-input>
-				<div style="height: 2px"></div>
-				<scTable
-                    v-if="showPopover"
-					ref="table"
-					:apiObj="apiObj"
-					:data="tableData"
-					:params="params"
-					:query="query"
-					:height="tableHeight"
-					row-key="id"
-					stripe
-					@row-click="rowClick"
-					:hidePagination="hidePagination"
-					paginationLayout="prev, pager, next"
-					hideDo
-                    @dataChange="tdChange"
-                    @selection-change="selectionChange"
-				>
-                    <el-table-column v-if="multiple" type="selection" width="40" :reserve-selection="true"></el-table-column>
-					<slot v-if="!isFixOptions"></slot>
-					<template v-else>
-						<el-table-column
-							:prop="props.labelField"
-						></el-table-column>
-					</template>
-            </scTable>
-			</el-popover>
-		</div>
+				<el-table-column
+					v-if="multiple"
+					type="selection"
+					width="40"
+					:reserve-selection="true"
+				></el-table-column>
+				<slot v-if="!isFixOptions"></slot>
+				<template v-else>
+					<el-table-column :prop="props.labelField"></el-table-column>
+				</template>
+			</scTable>
+		</el-popover>
 	</div>
 </template>
 
@@ -70,7 +71,7 @@
 import { ref, defineProps, defineEmits, computed, onMounted } from "vue";
 
 const props = defineProps({
-    multiple: { type: Boolean, default: false },
+	multiple: { type: Boolean, default: false },
 	edit: { type: Boolean, default: true },
 	hidePagination: { type: Boolean, default: false },
 	tableWidth: { type: Number, default: 600 },
@@ -78,7 +79,7 @@ const props = defineProps({
 	apiObj: { type: Object, default: null },
 	params: { type: Object, default: () => {} },
 	label: { type: [String, Number, Array], default: "" },
-    obj: { type: Object, default: () => {} },
+	obj: { type: Object, default: () => {} },
 	modelValue: { type: [String, Number, Array], default: null },
 	labelField: { type: String, default: "name" },
 	valueField: { type: String, default: "id" },
@@ -95,35 +96,42 @@ const table = ref();
 const hidePagination = ref(props.hidePagination);
 
 onMounted(() => {
-	if(props.options != null) {
+	if (props.options != null) {
 		isFixOptions.value = true;
 		tableData.value = props.options;
 		hidePagination.value = true;
 	}
-	
-	if(props.label) {
+
+	if (props.label) {
 		selectLabel.value = props.label;
-	}
-	else {
+	} 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);
+				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 (props.obj && props.obj.length > 0) {
-			    selectLabel.value = props.obj.map(item => item[props.labelField]).join(props.splitField);
-			}
-		}
-		else {
+		} else {
 			if (isFixOptions.value) {
-				const selectedOption = props.options.find(item => item[props.valueField] === props.modelValue);
-				selectLabel.value = selectedOption ? selectedOption[props.labelField] : "";
-			}
-			else {
+				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);
@@ -134,8 +142,8 @@ const selectObj = computed({
 	},
 	set(val) {
 		emit("update:obj", val);
-    }
-})
+	},
+});
 
 const selectValue = computed({
 	get() {
@@ -157,20 +165,19 @@ const handleQuery = () => {
 };
 
 const rowClick = (row) => {
-    if(!props.multiple){
-        selectObj.value = row;
-        selectLabel.value = row[props.labelField];
-        selectValue.value = row[props.valueField];
-        showPopover.value = false;
-    }
+	if (!props.multiple) {
+		selectObj.value = row;
+		selectLabel.value = row[props.labelField];
+		selectValue.value = row[props.valueField];
+		showPopover.value = false;
+	}
 };
 
 const handleClear = () => {
-	if(props.multiple){
-		selectObj.value = [],
-		selectLabel.value = "";
+	if (props.multiple) {
+		(selectObj.value = []), (selectLabel.value = "");
 		selectValue.value = [];
-	}else{
+	} else {
 		selectObj.value = {};
 		selectLabel.value = "";
 		selectValue.value = null;
@@ -178,19 +185,20 @@ const handleClear = () => {
 	emit("update:label", "");
 };
 
-const tdChange = (res, tableData) =>{
-    // if(obj.value && multiple){
-
-    // }
-}
+const tdChange = (res, tableData) => {
+	// if(obj.value && multiple){
+	// }
+};
 
 const selectionChange = (val) => {
-    if(props.multiple){
-        selectObj.value = val;
-        selectValue.value = val.map(item => item[props.valueField]);
+	if (props.multiple) {
+		selectObj.value = val;
+		selectValue.value = val.map((item) => item[props.valueField]);
 
-		selectLabel.value = val.map(item => item[props.labelField]).join(props.splitField);
+		selectLabel.value = val
+			.map((item) => item[props.labelField])
+			.join(props.splitField);
 		emit("update:label", val);
-    }
+	}
 };
-</script>
\ No newline at end of file
+</script>