From a422f9f962bf1957a91d37e38c330d85b5fb16cc Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Thu, 4 Jun 2026 13:55:55 +0800 Subject: [PATCH] =?UTF-8?q?fix(wot-ui):=20=E4=BF=AE=E5=A4=8D=20v2=20?= =?UTF-8?q?=E5=8D=87=E7=BA=A7=E5=90=8E=E9=83=A8=E9=97=A8=E5=92=8C=E8=A7=92?= =?UTF-8?q?=E8=89=B2=E4=B8=8B=E6=8B=89=E4=B8=8D=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cascader/SelectPicker 在 v2 中不再自带触发单元格，拆分为 wd-form-item 触发 + 选择器弹出模式 --- package.json | 2 +- src/pages/work/dept/index.vue | 41 ++++++++-------------- src/pages/work/menu/index.vue | 35 +++++++------------ src/pages/work/role/index.vue | 20 +++++++++-- src/pages/work/user/index.vue | 65 +++++++++++++++++++---------------- 5 files changed, 81 insertions(+), 82 deletions(-) diff --git a/package.json b/package.json index fa3b01f..a448906 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "youlai-app", - "version": "1.0.0", + "version": "1.0.1", "scripts": { "dev:app": "uni -p app", "dev:app-android": "uni -p app-android", diff --git a/src/pages/work/dept/index.vue b/src/pages/work/dept/index.vue index e59b56e..8bc599b 100644 --- a/src/pages/work/dept/index.vue +++ b/src/pages/work/dept/index.vue @@ -44,15 +44,11 @@ {{ formData.id ? "编辑部门" : "新增部门" }} - - - + + + @@ -60,7 +56,7 @@ - + @@ -140,9 +136,10 @@ function transformDeptToTree(dept: DeptItem): any { } // 上级部门选择器 +const showParentPicker = ref(false); const parentSelected = ref<(string | number)[]>([]); -const parentColumns = ref([]); const parentOptions = ref([]); +const parentLabel = ref(""); // 格式化上级部门展示 const displayParentFormat = (selectedItems: OptionType[]) => { @@ -168,8 +165,8 @@ function findDeptPath(data: OptionType[], targetId: string, path: string[] = []) return null; } -// 上级部门列变化 -const handleParentColumnChange = ({ selectedItem, resolve, finish }: any) => { +// v2 Cascader 懒加载 +const handleParentLazyLoad = ({ selectedItem, resolve, finish }: any) => { if (String(selectedItem?.value) === "0") { finish(); return; @@ -183,9 +180,10 @@ const handleParentColumnChange = ({ selectedItem, resolve, finish }: any) => { }; // 上级部门确认选择 -const handleParentConfirm = ({ value }: any) => { +const handleParentConfirm = ({ value, selectedItems }: any) => { parentSelected.value = value; formData.parentId = Number(value[value.length - 1]) || 0; + parentLabel.value = selectedItems.map((item: any) => item.label).join("/"); }; const rules = toFormSchema({ @@ -267,12 +265,11 @@ async function openDeptDialog(dept?: DeptItem) { formRef.value?.reset(); Object.assign(formData, initialFormData); parentSelected.value = []; + parentLabel.value = ""; dialog.visible = true; const data = await DeptAPI.getOptions(); - parentOptions.value = data; - const firstColumn: OptionType[] = [{ value: "0", label: "顶级部门" }, ...data]; - parentColumns.value = [firstColumn]; + parentOptions.value = [{ value: "0", label: "顶级部门" }, ...data]; if (dept) { formData.id = dept.id; @@ -283,16 +280,6 @@ async function openDeptDialog(dept?: DeptItem) { const path = findDeptPath(data, String(form.parentId)); if (path) { parentSelected.value = path; - const columns: OptionType[][] = [firstColumn]; - let currentLevel = data; - for (let i = 0; i < path.length - 1; i++) { - const found = currentLevel.find((item: any) => String(item.value) === path[i]); - if (found && found.children) { - columns.push(found.children); - currentLevel = found.children; - } - } - parentColumns.value = columns; } else { parentSelected.value = [String(form.parentId)]; } diff --git a/src/pages/work/menu/index.vue b/src/pages/work/menu/index.vue index 97eeb46..b3cd9f0 100644 --- a/src/pages/work/menu/index.vue +++ b/src/pages/work/menu/index.vue @@ -34,10 +34,11 @@ - - - + + + @@ -167,9 +168,10 @@ } // 上级菜单选择器 + const showParentPicker = ref(false); const parentSelected = ref<(string | number)[]>([]); - const parentColumns = ref([]); const parentOptions = ref([]); + const parentLabel = ref(""); const displayParentFormat = (selectedItems: Record[]) => { if (!selectedItems || selectedItems.length === 0) return ""; @@ -197,7 +199,8 @@ return null; } - const handleParentColumnChange = ({ selectedItem, resolve, finish }: any) => { + // v2 Cascader 懒加载 + const handleParentLazyLoad = ({ selectedItem, resolve, finish }: any) => { if (String(selectedItem?.value) === "0") { finish(); return; @@ -210,9 +213,10 @@ } }; - const handleParentConfirm = ({ value }: any) => { + const handleParentConfirm = ({ value, selectedItems }: any) => { parentSelected.value = value; formData.parentId = String(value[value.length - 1]) || "0"; + parentLabel.value = selectedItems.map((item: any) => item.label).join("/"); }; const rules = toFormSchema({ @@ -289,12 +293,11 @@ formRef.value?.reset(); Object.assign(formData, initialFormData); parentSelected.value = []; + parentLabel.value = ""; dialog.visible = true; const data = await MenuAPI.getOptions(true); - parentOptions.value = data; - const firstColumn: OptionType[] = [{ value: "0", label: "顶级菜单" }, ...data]; - parentColumns.value = [firstColumn]; + parentOptions.value = [{ value: "0", label: "顶级菜单" }, ...data]; if (menu) { formData.id = menu.id; @@ -305,18 +308,6 @@ const path = findMenuPath(data, String(form.parentId)); if (path) { parentSelected.value = path; - const columns: OptionType[][] = [firstColumn]; - let currentLevel = data; - for (let i = 0; i < path.length - 1; i++) { - const found = currentLevel.find((item: any) => String(item.value) === String(path[i])); - if (found && found.children && found.children.length > 0) { - columns.push(found.children); - currentLevel = found.children; - } else { - break; - } - } - parentColumns.value = columns; } else { parentSelected.value = [String(form.parentId)]; } diff --git a/src/pages/work/role/index.vue b/src/pages/work/role/index.vue index fb5d600..2fe9044 100644 --- a/src/pages/work/role/index.vue +++ b/src/pages/work/role/index.vue @@ -58,9 +58,11 @@ - - - + + + @@ -124,6 +126,18 @@ const formData = reactive({ ...initialFormData }); + // 数据权限选择器状态 + const showDataScopePicker = ref(false); + const dataScopeLabel = computed(() => { + const opt = dataScopeOptions.value.find((o) => o.value === formData.dataScope); + return opt?.label || ""; + }); + + // 数据权限确认 + const handleDataScopeConfirm = () => { + // label 由 computed 自动计算 + }; + const dataScopeOptions = ref[]>([ { label: "全部数据", value: 1 }, { label: "部门及子部门数据", value: 2 }, diff --git a/src/pages/work/user/index.vue b/src/pages/work/user/index.vue index ee5dc56..f31f5d2 100644 --- a/src/pages/work/user/index.vue +++ b/src/pages/work/user/index.vue @@ -85,13 +85,17 @@ - - - - - - + + + + + + + @@ -186,9 +190,14 @@ const roleOptions = ref[]>([]); const deptOptions = ref([]); - // 部门多列选择器数据 + // 部门选择器状态 + const showDeptPicker = ref(false); const deptSelected = ref<(string | number)[]>([]); - const deptColumns = ref[][]>([]); + const deptLabel = ref(""); + + // 角色选择器状态 + const showRolePicker = ref(false); + const roleLabel = ref(""); // 格式化部门展示 const displayDeptFormat = (selectedItems: Record[]) => { @@ -210,8 +219,8 @@ return null; } - // 部门列变化（动态加载子部门） - const handleDeptColumnChange = ({ selectedItem, resolve, finish }: any) => { + // v2 Cascader 懒加载 + const handleDeptLazyLoad = ({ selectedItem, resolve, finish }: any) => { const children = selectedItem.children; if (children && children.length > 0) { resolve(children); @@ -223,8 +232,13 @@ // 部门确认选择 const handleDeptConfirm = ({ value, selectedItems }: any) => { deptSelected.value = value; - // 取最后一个选中的部门ID formData.deptId = value[value.length - 1]; + deptLabel.value = selectedItems.map((item: any) => item.label).join("/"); + }; + + // 角色确认选择 + const handleRoleConfirm = ({ selectedItems }: any) => { + roleLabel.value = selectedItems.map((item: any) => item.label).join("、"); }; const rules = toFormSchema({ @@ -297,6 +311,8 @@ formRef.value?.reset(); Object.assign(formData, initialFormData); deptSelected.value = []; + deptLabel.value = ""; + roleLabel.value = ""; dialog.visible = true; roleOptions.value = await RoleAPI.getOptions(); const deptData = await DeptAPI.getOptions(); @@ -306,31 +322,22 @@ formData.id = id; const data = await UserAPI.getFormData(id); Object.assign(formData, data, { id }); - // 编辑时回显部门选择（需要完整路径和预加载所有层级数据） + // 编辑时回显部门 if (data.deptId) { const path = findDeptPath(deptData, String(data.deptId)); if (path) { deptSelected.value = path; - // 预加载所有层级的 columns - const columns: any[] = [deptData]; - let currentLevel = deptData; - for (let i = 0; i < path.length - 1; i++) { - const found = currentLevel.find((item: any) => item.value === path[i]); - if (found && found.children) { - columns.push(found.children); - currentLevel = found.children; - } - } - deptColumns.value = columns; } else { deptSelected.value = [String(data.deptId)]; - deptColumns.value = [deptData]; } - } else { - deptColumns.value = [deptData]; } - } else { - deptColumns.value = [deptData]; + // 回显角色 + if (data.roleIds && data.roleIds.length > 0) { + const names = roleOptions.value + .filter((r: any) => data.roleIds.includes(r.value)) + .map((r: any) => r.label); + roleLabel.value = names.join("、"); + } } }