feat: 更新xselect以支持多选

2024-10-25 14:52:59 +08:00 · 2024-10-25 14:52:59 +08:00 · 9c12eea0f3
parent f4117b72e0
commit 9c12eea0f3
6 changed files with 299 additions and 109 deletions
--- a/src/components/xSelect/index.vue
+++ b/src/components/xSelect/index.vue
@ -1,8 +1,6 @@
 <template>
 	<div>
-		<el-input ref="inputRef0" style="display: none" v-model="inputValue">
-		</el-input>
-		<el-input ref="inputRef" v-model="inputLabel" :readonly="true">
+		<el-input ref="inputRef" v-model="selectLabel" :readonly="true">
 			<template #prefix>
 				<el-button
 					text
@ -12,14 +10,13 @@
                    @click="showPopover=true"
 				></el-button>
 			</template>
-
 			<template #suffix>
 				<el-button
 					text
 					size="small"
 					circle
 					icon="el-icon-close"
-					v-show="inputLabel && edit"
+					v-show="selectLabel && edit"
 					@click="handleClear"
 				></el-button>
 			</template>
@ -39,6 +36,7 @@
 				></el-input>
 				<div style="height: 2px"></div>
 				<scTable
+                    v-if="showPopover"
 					ref="table"
 					:apiObj="apiObj"
 					:params="params"
@ -50,9 +48,12 @@
 					: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></slot>
-				</scTable>
+            </scTable>
 			</el-popover>
 		</div>
 	</div>
@ -62,6 +63,7 @@
 import { ref, defineProps, defineEmits, computed } from "vue";

 const props = defineProps({
+    multiple: { type: Boolean, default: false },
 	edit: { type: Boolean, default: true },
 	hidePagination: { type: Boolean, default: false },
 	tableWidth: { type: Number, default: 600 },
@ -69,19 +71,31 @@ const props = defineProps({
 	apiObj: { type: Object, default: () => {}, required: true },
 	params: { type: Object, default: () => {} },
 	label: { type: String, default: "" },
+    obj: { type: Object, default: () => {} },
 	modelValue: { type: String, default: null },
 	labelField: { type: String, default: "name" },
 	valueField: { type: String, default: "id" },
 });

-const emit = defineEmits(["update:modelValue", "update:label"]);
+const emit = defineEmits(["update:modelValue", "update:label", "update:obj"]);

 // 控制 popover 显示与隐藏的状态
+const multiple = ref(props.multiple);
+const obj = ref(props.obj);
 const showPopover = ref(false);
 const inputRef = ref();
-const inputRef0 = ref();
 const table = ref();
-const inputLabel = computed({
+
+const selectObj = computed({
+	get() {
+		return props.obj;
+	},
+	set(val) {
+		emit("update:obj", val);
+    }
+})
+
+const selectLabel = computed({
 	get() {
 		return props.label;
 	},
@ -89,7 +103,7 @@ const inputLabel = computed({
 		emit("update:label", val);
 	},
 });
-const inputValue = computed({
+const selectValue = computed({
 	get() {
 		return props.modelValue;
 	},
@ -107,13 +121,31 @@ const handleQuery = () => {
 };

 const rowClick = (row) => {
-	inputLabel.value = row[props.labelField];
-	inputValue.value = row[props.valueField];
-	showPopover.value = false;
+    if(!multiple.value){
+        selectObj.value = row;
+        selectLabel.value = row[props.labelField];
+        selectValue.value = row[props.valueField];
+        showPopover.value = false;
+    }
 };

 const handleClear = () => {
-	inputLabel.value = "";
-	inputValue.value = null;
+    selectObj.value = {};
+	selectLabel.value = "";
+	selectValue.value = null;
 };
-</script>
+
+const tdChange = (res, tableData) =>{
+    // if(obj.value && multiple){
+
+    // }
+}
+
+const selectionChange = (val) => {
+    if(multiple.value){
+        selectObj.value = val;
+        selectLabel.value = val.map(item => item[props.labelField]).join(";");
+        selectValue.value = val.map(item => item[props.valueField]);
+    }
+};
+</script>
--- a/src/components/xSelect/index2.vue
+++ b/src/components/xSelect/index2.vue
@ -0,0 +1,126 @@
+<template>
+	<div>
+		<el-select v-bind="$attrs" ref="selectRef"
+			v-model="selectValue"
+			:value-key="valueField"
+		>
+			<template #empty>
+				<div :style="{ width: tableWidth + 'px', padding: '2px' }">
+					<el-input
+						v-model="keyword"
+						placeholder="关键词查找"
+						@keyup.enter="handleQuery"
+					></el-input>
+					<div style="height: 2px"></div>
+					<scTable
+						ref="table"
+						:apiObj="apiObj"
+						:params="params"
+						:query="query"
+						:height="tableHeight"
+						row-key="id"
+						stripe
+						@row-click="rowClick"
+						:hidePagination="hidePagination"
+						paginationLayout="prev, pager, next"
+						hideDo
+						@dataChange="tdChange"
+						@selection-change="
+							(selection) => {
+								selections = selection;
+							}
+						"
+					>
+						<el-table-column
+							v-if="multiple"
+							type="selection"
+							width="40"
+							:reserve-selection="true"
+						></el-table-column>
+						<slot></slot>
+					</scTable>
+				</div>
+			</template>
+		</el-select>
+	</div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, computed } from "vue";
+
+const props = defineProps({
+	multiple: { type: Boolean, default: false },
+	edit: { type: Boolean, default: true },
+	hidePagination: { type: Boolean, default: false },
+	tableWidth: { type: Number, default: 600 },
+	tableHeight: { type: Number, default: 400 },
+	apiObj: { type: Object, default: () => {}, required: true },
+	params: { type: Object, default: () => {} },
+	label: { type: String, default: "" },
+	obj: { type: Object, default: () => {} },
+	modelValue: { type: String, default: null },
+	labelField: { type: String, default: "name" },
+	valueField: { type: String, default: "id" },
+});
+
+const emit = defineEmits(["update:modelValue", "update:label", "rowSelect"]);
+
+// 控制 popover 显示与隐藏的状态
+const showPopover = ref(false);
+const table = ref();
+const selectRef = ref();
+
+const selectObj = computed({
+	get() {
+		return props.obj;
+	},
+	set(val) {
+		emit("update:obj", val);
+	},
+});
+
+const selectLabel = computed({
+	get() {
+		return props.label;
+	},
+	set(val) {
+		emit("update:label", val);
+	},
+});
+const selectValue = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(val) {
+		emit("update:modelValue", val);
+	},
+});
+
+const keyword = ref("");
+const query = ref({ search: "" });
+
+const handleQuery = () => {
+	query.value.search = keyword.value;
+	table.value.queryData(query.value);
+};
+
+const rowClick = (row) => {
+	selectObj.value = row;
+	selectLabel.value = row[props.labelField];
+	selectValue.value = row[props.valueField];
+	initOptions();
+	showPopover.value = false;
+};
+
+const handleClear = () => {
+	selectObj.value = {};
+	selectLabel.value = "";
+	selectValue.value = null;
+};
+
+const initOptions = () => {
+    console.log(selectRef.value)
+}
+
+const tdChange = (res, tableData) => {};
+</script>
--- a/src/main.js
+++ b/src/main.js
@ -18,9 +18,6 @@ import htmlToPdf from "./utils/htmlToPdf";

 import * as Cesium from "cesium";

-import "echarts";
-import ECharts from 'vue-echarts';
-
 const app = createApp(App);

 app.use(store);
@ -36,7 +33,6 @@ app.use(Xlsx);
 app.use(htmlToPdf);
 app.use(jsBarCode);
 app.use(DataVVue3);
-app.component('v-chart', ECharts);

 //挂载app
 app.mount("#app");
--- a/src/scui.js
+++ b/src/scui.js
@ -22,6 +22,7 @@ import scTitle from './components/scTitle'
 import scWaterMark from './components/scWaterMark'
 import scQrCode from './components/scQrCode'
 import scIconSelect from './components/scIconSelect'
+import scEcharts from './components/scEcharts'

 import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
@ -70,6 +71,7 @@ export default {
 		app.component('scTrend', scTrend);
 		app.component('scFire', scFire);
 		app.component('scIconSelect', scIconSelect);
+		app.component('scEcharts', scEcharts);

 		//注册全局指令
 		app.directive('auth', auth)
--- a/src/views/home/testx.vue
+++ b/src/views/home/testx.vue
@ -1,15 +1,21 @@
 <template>
 	<el-container>
-        <el-aside width="200px">
-            <el-menu>
-                <el-menu-item v-for="item in menu" :key="item" :index="item" @click="currentM=item">{{item}}</el-menu-item>
-            </el-menu>
-        </el-aside>
+		<el-aside width="200px">
+			<el-menu>
+				<el-menu-item
+					v-for="item in menu"
+					:key="item"
+					:index="item"
+					@click="currentM = item"
+					>{{ item }}</el-menu-item
+				>
+			</el-menu>
+		</el-aside>
 		<el-main>
-			<div v-if="currentM=='二维码'">
+			<div v-if="currentM == '二维码'">
 				<scQrCode text="xxxx"></scQrCode>
 			</div>
-			<div v-if="currentM=='带默认的选择'">
+			<div v-if="currentM == 'ehsSelect'">
 				<ehsSelect
 					:apiObj="apiObj"
 					v-model="x"
@ -19,108 +25,134 @@
 					:params="{ search: '生产' }"
 				></ehsSelect>
 			</div>
-			<div v-if="currentM=='图标选择'">
-				<scIconSelect></scIconSelect>
-			</div>
-			<div v-if="currentM=='xselect'">
-				<xSelect :apiObj="apiObj" v-model="x2" v-model:label="x2_name" style="width: 200px">
-          <el-table-column label="id" prop="id"></el-table-column>
-          <el-table-column label="名称" prop="name"></el-table-column>
-        </xSelect>
+			<div v-if="currentM == 'xSelect'">
+				<xSelect
+					:apiObj="apiObj"
+					v-model="x2"
+					v-model:label="x2_name"
+          v-model:obj="x2_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>当前选择：{{ x2 }}  {{ x2_name }}</div>
+				<div>当前选择：
+          <h1>value: {{ x2 }} </h1>
+          <h1>label: {{ x2_name }} </h1>
+          <h1>obj: {{ x2_obj }}</h1>
+        </div>
+			</div>
+			<div v-if="currentM == 'scEcharts'">
+        <el-card title="测试图表">
+				<scEcharts
+					:option="chartOption"
+          height="400px"
+				/>
+      </el-card>
+			</div>
+			<div v-if="currentM == 'ehsUserSelect'">
+				<ehsUserSelect :multiple="true" @submit="getMember" />
+			</div>
+			<div v-if="currentM == 'ehsEpSelect'">
+				<ehsEpSelect :multiple="true" @submit="getMember" />
+			</div>
+			<div v-if="currentM == 'ehsTableSelect'">
+				<ehsTableSelect
+					:apiObj="apiObj"
+					v-model="x2"
+					:props="{ value: 'id', label: 'name' }"
+          :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=='vue-echarts'">
-                <v-chart :option="chartOption" autoresize  style="height: 400px; width: 400px"/>
-            </div>
-            <div v-if="currentM=='用户选择'">
-              <ehsUserSelect :multiple="true" @submit="getMember"/>
-            </div>
-            <div v-if="currentM=='员工选择'">
-              <ehsEpSelect :multiple="true" @submit="getMember"/>
-            </div>
 		</el-main>
 	</el-container>
 </template>
 <script>
+// import xSelects from "@/components/xSelect/index2.vue";
 export default {
 	name: "testx",
 	components: {},
 	data() {
 		return {
-      menu: [
-        '二维码',
-        '带默认的选择',
-        '图标选择',
-        'xselect',
-        'vue-echarts',
-        '用户选择',
-        '员工选择'
-      ],
-      currentM: "",
+			menu: [
+				"二维码",
+        "xSelect",
+				"ehsSelect",
+				"scEcharts",
+				"ehsUserSelect",
+				"ehsEpSelect",
+				"ehsTableSelect",
+			],
+			currentM: "",
 			apiObj: this.$API.system.dept.list,
 			x: "3607937377546706944",
 			x_name: "光芯科技",
 			// x:null,
 			apiObj2: this.$API.system.user.list,
 			x2: "3347207082608115712",
-            x2_name: "烧成车间",
-            chartOption: {
-              textStyle: {
-                fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-              },
-              title: {
-                text: 'Traffic Sources',
-                left: 'center',
-              },
-              tooltip: {
-                trigger: 'item',
-                formatter: '{a} <br/>{b} : {c} ({d}%)',
-              },
-              legend: {
-                orient: 'vertical',
-                left: 'left',
-                data: [
-                  'Direct',
-                  'Email',
-                  'Ad Networks',
-                  'Video Ads',
-                  'Search Engines',
-                ],
-              },
-              series: [
-                {
-                  name: 'Traffic Sources',
-                  type: 'pie',
-                  radius: '55%',
-                  center: ['50%', '60%'],
-                  data: [
-                    { value: 335, name: 'Direct' },
-                    { value: 310, name: 'Email' },
-                    { value: 234, name: 'Ad Networks' },
-                    { value: 135, name: 'Video Ads' },
-                    { value: 1548, name: 'Search Engines' },
-                  ],
-                  emphasis: {
-                    itemStyle: {
-                      shadowBlur: 10,
-                      shadowOffsetX: 0,
-                      shadowColor: 'rgba(0, 0, 0, 0.5)',
-                    },
-                  },
-                },
-              ],
-            },
+			x2_name: "烧成车间",
+      x2_obj: {},
+			chartOption: {
+				textStyle: {
+					fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+				},
+				title: {
+					text: "Traffic Sources",
+					left: "center",
+				},
+				tooltip: {
+					trigger: "item",
+					formatter: "{a} <br/>{b} : {c} ({d}%)",
+				},
+				legend: {
+					orient: "vertical",
+					left: "left",
+					data: [
+						"Direct",
+						"Email",
+						"Ad Networks",
+						"Video Ads",
+						"Search Engines",
+					],
+				},
+				series: [
+					{
+						name: "Traffic Sources",
+						type: "pie",
+						radius: "55%",
+						center: ["50%", "60%"],
+						data: [
+							{ value: 335, name: "Direct" },
+							{ value: 310, name: "Email" },
+							{ value: 234, name: "Ad Networks" },
+							{ value: 135, name: "Video Ads" },
+							{ value: 1548, name: "Search Engines" },
+						],
+						emphasis: {
+							itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								shadowColor: "rgba(0, 0, 0, 0.5)",
+							},
+						},
+					},
+				],
+			},
 		};
 	},
 	mounted() {},
 	methods: {
-    getMember(data) {
-      console.log(data)
-    },
-    showx2(){
-            // console.log(this.x2)
-        }
-    },
+		getMember(data) {
+			console.log(data);
+		},
+		showx2() {
+			// console.log(this.x2)
+		},
+	},
 };
 </script>
--- a/src/xui.js
+++ b/src/xui.js
@ -1,12 +1,14 @@
 import ehsUserSelect from './components/ehsSelect/userselect'
 import ehsEpSelect from './components/ehsSelect/epselect'
 import ehsSelect from './components/ehsSelect/select'
+import ehsTableSelect from './components/ehsSelect/tableSelect'
 import xSelect from './components/xSelect/index.vue'
 export default {
 	install(app) {
 		app.component('ehsUserSelect', ehsUserSelect);
 		app.component('ehsEpSelect', ehsEpSelect);
 		app.component('ehsSelect', ehsSelect);
+		app.component('ehsTableSelect', ehsTableSelect);
 		app.component('xSelect', xSelect);
 	}
 }