From 4efb7657210fdc24ff5391dee6d3d762084d75bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9E=E4=BB=99=E9=83=BD=E6=B2=A1=E7=94=A8?=
 <615206459@qq.com>
Date: Fri, 10 Nov 2023 18:16:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AD=97=E5=85=B8=200=20?=
 =?UTF-8?q?=E7=9A=84=E9=94=99=E8=AF=AF=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/demo/components/select-user.vue | 59 ++++++++++++++++++---
 src/modules/demo/views/crud.vue             | 15 +++---
 src/modules/dict/store/dict.ts              |  2 +-
 3 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/src/modules/demo/components/select-user.vue b/src/modules/demo/components/select-user.vue
index e1e5bdf..48c1509 100644
--- a/src/modules/demo/components/select-user.vue
+++ b/src/modules/demo/components/select-user.vue
@@ -16,6 +16,9 @@
 				<!-- 刷新按钮 -->
 				<cl-refresh-btn />
 
+				<!-- 全选 -->
+				<el-button type="primary" @click="selectAll">全选</el-button>
+
 				<cl-filter label="状态">
 					<cl-select :options="options.status" prop="status" :width="120" />
 				</cl-filter>
@@ -27,11 +30,11 @@
 
 			<cl-row>
 				<!-- 数据表格 -->
-				<cl-table ref="Table" :auto-height="false" />
+				<cl-table ref="Table" :auto-height="false" @selection-change="onSelectionChange" />
 			</cl-row>
 
 			<cl-row>
-				<span>已选 {{ Table?.selection.length }} 人</span>
+				<span>已选 {{ selection.length }} 人</span>
 				<cl-flex1 />
 				<!-- 分页控件 -->
 				<cl-pagination />
@@ -48,12 +51,15 @@
 <script lang="ts" setup name="select-user">
 import { useCrud, useForm, useTable } from "@cool-vue/crud";
 import { useCool } from "/@/cool";
-import { nextTick, reactive, ref, watch } from "vue";
+import { PropType, nextTick, reactive, ref, watch } from "vue";
 import { cloneDeep } from "lodash";
 
+// 替换你的类型
+type Item = Eps.BaseSysUserEntity;
+
 const props = defineProps({
 	modelValue: {
-		type: Array,
+		type: Array as PropType<Item[]>,
 		default: () => []
 	},
 	isDisabled: Boolean,
@@ -134,7 +140,10 @@ const Table = useTable({
 const Crud = useCrud({
 	service: service.base.sys.user,
 	async onRefresh(params, { next }) {
-		await next(params);
+		const res = await next(params);
+
+		// 添加已加载列表的 id
+		loadIds.value.push(...res.list.map((e) => e.id));
 
 		// 数据反选
 		list.value.forEach((e) => {
@@ -155,16 +164,37 @@ async function refresh(params?: any) {
 // 弹窗是否可见
 const visible = ref(false);
 
+// 已选的数据列表，双向绑定用
+const list = ref<Item[]>([]);
+
 // 已选列表
-const list = ref<Eps.BaseSysUserEntity[]>([]);
+const selection = ref<any[]>([]);
+
+// 已加载列表的 id
+const loadIds = ref<number[]>([]);
+
+// 监听已选列表
+function onSelectionChange(arr: Item[]) {
+	// 已加载的
+	const ids = Array.from(new Set(loadIds.value));
+
+	// 过滤掉已加载的，再加上已选的
+	selection.value = selection.value.filter((e) => !ids.includes(e.id!)).concat(...arr);
+}
 
 // 打开选择弹窗
 function open() {
 	visible.value = true;
 
+	// 清空数据
+	loadIds.value = [];
+
+	// 设置已选
+	selection.value = cloneDeep(list.value);
+
 	nextTick(() => {
 		refresh({
-			size: 10
+			size: 2
 		});
 	});
 }
@@ -176,7 +206,20 @@ function close() {
 
 // 选择
 function select() {
-	list.value = cloneDeep(Table.value?.selection || []);
+	list.value = cloneDeep(selection.value || []);
+	close();
+}
+
+// 全选
+async function selectAll() {
+	// 全部数据
+	await Crud.value?.service.page({ page: 1, size: 10000 }).then((res) => {
+		list.value = res.list;
+	});
+
+	// 当前页数据
+	// list.value = Table.value?.data || [];
+
 	close();
 }
 
diff --git a/src/modules/demo/views/crud.vue b/src/modules/demo/views/crud.vue
index dd47386..46586b8 100644
--- a/src/modules/demo/views/crud.vue
+++ b/src/modules/demo/views/crud.vue
@@ -102,7 +102,7 @@
 <script lang="tsx" name="demo-crud" setup>
 import { useCrud, useUpsert, useTable, useAdvSearch, setFocus, useSearch } from "@cool-vue/crud";
 import { useDict } from "/$/dict";
-import { reactive } from "vue";
+import { onMounted, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useCool } from "/@/cool";
 import FormBtn from "../components/form-btn.vue";
@@ -255,9 +255,12 @@ const Upsert = useUpsert({
 			}
 		},
 		{
-			label: "选择用户",
+			label: "",
 			prop: "userIds",
 			group: "select",
+			props: {
+				labelWidth: "0px"
+			},
 			component: {
 				name: "slot-userIds"
 			}
@@ -267,9 +270,6 @@ const Upsert = useUpsert({
 			label: "工作",
 			prop: "occupation",
 			group: "other",
-			hook: {
-				bind: "string"
-			},
 			component: {
 				name: "el-tree-select",
 				props: {
@@ -420,10 +420,7 @@ const Table = useTable({
 			prop: "occupation",
 			dict: dict.get("occupation"),
 			dictColor: true,
-			minWidth: 120,
-			formatter(row) {
-				return String(row.occupation);
-			}
+			minWidth: 120
 		},
 		{
 			label: "状态",
diff --git a/src/modules/dict/store/dict.ts b/src/modules/dict/store/dict.ts
index dd227db..62365e6 100644
--- a/src/modules/dict/store/dict.ts
+++ b/src/modules/dict/store/dict.ts
@@ -34,7 +34,7 @@ const useDictStore = defineStore("dict", () => {
 				for (const [i, arr] of Object.entries(res)) {
 					arr.forEach((e) => {
 						e.label = e.name;
-						e.value = e.value || e.id;
+						e.value = e.value ?? e.id;
 					});
 
 					d[i] = deepTree(arr, "desc");