From 0ab21ab02ceee93aa52974009705bfed4e93c3f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E5=87=A1?= <2508779859@qq.com> Date: Thu, 24 Apr 2025 00:18:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E5=85=B1=E4=BA=AB=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=E6=95=B0=E6=8D=AE=EF=BC=8C=E9=81=BF=E5=85=8D=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=E8=AF=B7=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CURD/PageContent.vue | 6 +++- src/components/CURD/types.ts | 7 +---- src/views/demo/curd/config/add.ts | 21 ++++++------- src/views/demo/curd/config/edit.ts | 21 ++++++------- src/views/demo/curd/config/options.ts | 31 +++++++++++++++++++ src/views/demo/curd/config/search.ts | 18 +++++------ .../curd/{config/add2.ts => config2/add.ts} | 8 ++--- .../content2.ts => config2/content.ts} | 0 .../curd/{config/edit2.ts => config2/edit.ts} | 0 .../{config/search2.ts => config2/search.ts} | 20 +++++------- src/views/demo/curd/index.vue | 17 ++++++---- 11 files changed, 84 insertions(+), 65 deletions(-) create mode 100644 src/views/demo/curd/config/options.ts rename src/views/demo/curd/{config/add2.ts => config2/add.ts} (82%) rename src/views/demo/curd/{config/content2.ts => config2/content.ts} (100%) rename src/views/demo/curd/{config/edit2.ts => config2/edit.ts} (100%) rename src/views/demo/curd/{config/search2.ts => config2/search.ts} (88%) diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue index 9b421e24..d98b98fe 100644 --- a/src/components/CURD/PageContent.vue +++ b/src/components/CURD/PageContent.vue @@ -790,7 +790,11 @@ function handleToolbar(name: string) { function handleOperate(data: IOperateData) { switch (data.name) { case "delete": - props.contentConfig?.deleteAction && handleDelete(data.row[pk]); + if (props.contentConfig?.deleteAction) { + handleDelete(data.row[pk]); + } else { + emit("operateClick", data); + } break; default: emit("operateClick", data); diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts index 12ae896c..19095438 100644 --- a/src/components/CURD/types.ts +++ b/src/components/CURD/types.ts @@ -196,12 +196,7 @@ export type IFormItems = Array<{ // 组件属性 attrs?: IObject; // 组件可选项(只适用于select,radio,checkbox组件) - options?: Array<{ - label: string; - value: any; - disabled?: boolean; - [key: string]: any; - }>; + options?: Array<{ label: string; value: any; [key: string]: any }> | Ref; // 验证规则 rules?: FormItemRule[]; // 初始值 diff --git a/src/views/demo/curd/config/add.ts b/src/views/demo/curd/config/add.ts index f3598bd8..972861c2 100644 --- a/src/views/demo/curd/config/add.ts +++ b/src/views/demo/curd/config/add.ts @@ -1,7 +1,6 @@ import UserAPI, { type UserForm } from "@/api/system/user.api"; import type { IModalConfig } from "@/components/CURD/types"; -import DeptAPI from "@/api/system/dept.api"; -import RoleAPI from "@/api/system/role.api"; +import { deptArr, roleArr } from "./options"; const modalConfig: IModalConfig = { permPrefix: "sys:user", @@ -51,15 +50,15 @@ const modalConfig: IModalConfig = { type: "tree-select", attrs: { placeholder: "请选择所属部门", - data: [], + data: deptArr, filterable: true, "check-strictly": true, "render-after-expand": false, }, - async initFn(formItem) { - // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem - formItem.attrs.data = await DeptAPI.getOptions(); - }, + // async initFn(formItem) { + // // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem + // formItem.attrs.data = await DeptAPI.getOptions(); + // }, }, { type: "custom", @@ -77,11 +76,11 @@ const modalConfig: IModalConfig = { placeholder: "请选择", multiple: true, }, - options: [], + options: roleArr, initialValue: [], - async initFn(formItem) { - formItem.options = await RoleAPI.getOptions(); - }, + // async initFn(formItem) { + // formItem.options = await RoleAPI.getOptions(); + // }, }, { type: "input", diff --git a/src/views/demo/curd/config/edit.ts b/src/views/demo/curd/config/edit.ts index 1581d6a0..57b44448 100644 --- a/src/views/demo/curd/config/edit.ts +++ b/src/views/demo/curd/config/edit.ts @@ -2,8 +2,7 @@ import UserAPI, { type UserForm } from "@/api/system/user.api"; import type { IModalConfig } from "@/components/CURD/types"; import { DeviceEnum } from "@/enums/settings/device.enum"; import { useAppStore } from "@/store"; -import DeptAPI from "@/api/system/dept.api"; -import RoleAPI from "@/api/system/role.api"; +import { deptArr, roleArr } from "./options"; const modalConfig: IModalConfig = { permPrefix: "sys:user", @@ -46,15 +45,15 @@ const modalConfig: IModalConfig = { type: "tree-select", attrs: { placeholder: "请选择所属部门", - data: [], + data: deptArr, // setup，Vue会自动解包ref，不需要.value filterable: true, "check-strictly": true, "render-after-expand": false, }, - async initFn(formItem) { - // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem - formItem.attrs.data = await DeptAPI.getOptions(); - }, + // async initFn(formItem) { + // // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem + // formItem.attrs.data = await DeptAPI.getOptions(); + // }, }, { type: "custom", @@ -72,11 +71,11 @@ const modalConfig: IModalConfig = { placeholder: "请选择", multiple: true, }, - options: [], + options: roleArr, initialValue: [], - async initFn(formItem) { - formItem.options = await RoleAPI.getOptions(); - }, + // async initFn(formItem) { + // formItem.options = await RoleAPI.getOptions(); + // }, }, { type: "input", diff --git a/src/views/demo/curd/config/options.ts b/src/views/demo/curd/config/options.ts new file mode 100644 index 00000000..4fe2f479 --- /dev/null +++ b/src/views/demo/curd/config/options.ts @@ -0,0 +1,31 @@ +/** 公共下载数据，减少重复请求次数 */ +import DeptAPI from "@/api/system/dept.api"; +import RoleAPI from "@/api/system/role.api"; + +interface OptionType { + label: string; + value: any; + [key: string]: any; // 允许其他属性 +} + +// 明确指定类型为 OptionType[] +export let deptArr = ref([]); +export let roleArr = ref([]); +export let stateArr = ref([ + { label: "启用", value: 1 }, + { label: "禁用", value: 0 }, +]); + +// 初始化逻辑，在 onMounted 钩子中调用 +export const initOptions = async () => { + try { + // 使用Promise.all并行请求 + const [dept, roles] = await Promise.all([DeptAPI.getOptions(), RoleAPI.getOptions()]); + // 获取部门选项并赋值 + deptArr.value = dept; + // 获取角色选项并赋值 + roleArr.value = roles; + } catch (error) { + console.error("初始化选项失败:", error); + } +}; diff --git a/src/views/demo/curd/config/search.ts b/src/views/demo/curd/config/search.ts index f4e6b5fa..35f29428 100644 --- a/src/views/demo/curd/config/search.ts +++ b/src/views/demo/curd/config/search.ts @@ -1,5 +1,5 @@ -import DeptAPI from "@/api/system/dept.api"; import type { ISearchConfig } from "@/components/CURD/types"; +import { deptArr, stateArr } from "./options"; const searchConfig: ISearchConfig = { permPrefix: "sys:user", @@ -21,18 +21,17 @@ const searchConfig: ISearchConfig = { prop: "deptId", attrs: { placeholder: "请选择", - data: [], + data: deptArr, filterable: true, "check-strictly": true, "render-after-expand": false, clearable: true, style: { width: "200px" }, }, - async initFn(formItem) { - formItem.attrs.data = await DeptAPI.getOptions(); - // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem - // this.attrs!.data = await DeptAPI.getOptions(); - }, + // async initFn(formItem) { + // // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem + // formItem.attrs.data = await DeptAPI.getOptions(); + // }, }, { type: "select", @@ -43,10 +42,7 @@ const searchConfig: ISearchConfig = { clearable: true, style: { width: "200px" }, }, - options: [ - { label: "启用", value: 1 }, - { label: "禁用", value: 0 }, - ], + options: stateArr, }, { type: "date-picker", diff --git a/src/views/demo/curd/config/add2.ts b/src/views/demo/curd/config2/add.ts similarity index 82% rename from src/views/demo/curd/config/add2.ts rename to src/views/demo/curd/config2/add.ts index aefe2797..0c5300ee 100644 --- a/src/views/demo/curd/config/add2.ts +++ b/src/views/demo/curd/config2/add.ts @@ -1,6 +1,6 @@ import { type UserForm } from "@/api/system/user.api"; import type { IModalConfig } from "@/components/CURD/types"; -import DeptAPI from "@/api/system/dept.api"; +import { deptArr } from "../config/options"; const modalConfig: IModalConfig = { colon: true, @@ -35,15 +35,11 @@ const modalConfig: IModalConfig = { type: "tree-select", attrs: { placeholder: "请选择", - data: [], + data: deptArr, filterable: true, "check-strictly": true, "render-after-expand": false, }, - async initFn(formItem) { - // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem - formItem.attrs.data = await DeptAPI.getOptions(); - }, }, { type: "custom", diff --git a/src/views/demo/curd/config/content2.ts b/src/views/demo/curd/config2/content.ts similarity index 100% rename from src/views/demo/curd/config/content2.ts rename to src/views/demo/curd/config2/content.ts diff --git a/src/views/demo/curd/config/edit2.ts b/src/views/demo/curd/config2/edit.ts similarity index 100% rename from src/views/demo/curd/config/edit2.ts rename to src/views/demo/curd/config2/edit.ts diff --git a/src/views/demo/curd/config/search2.ts b/src/views/demo/curd/config2/search.ts similarity index 88% rename from src/views/demo/curd/config/search2.ts rename to src/views/demo/curd/config2/search.ts index 0055b573..15611a7c 100644 --- a/src/views/demo/curd/config/search2.ts +++ b/src/views/demo/curd/config2/search.ts @@ -1,10 +1,5 @@ -import DeptAPI from "@/api/system/dept.api"; import type { ISearchConfig } from "@/components/CURD/types"; - -const selectOptions = reactive([ - { label: "启用", value: 1 }, - { label: "禁用", value: 0 }, -]); +import { deptArr, stateArr } from "../config/options"; const searchConfig: ISearchConfig = { grid: "right", @@ -38,7 +33,7 @@ const searchConfig: ISearchConfig = { label: "下拉选择框", prop: "testSelect", attrs: { placeholder: "全部", clearable: true }, - options: selectOptions, + options: stateArr as any, events: { change: function (e) { console.log("选中的值: ", e); @@ -51,17 +46,16 @@ const searchConfig: ISearchConfig = { prop: "testTreeSelect", attrs: { placeholder: "请选择", - data: [], + data: deptArr, filterable: true, "check-strictly": true, "render-after-expand": false, clearable: true, }, - async initFn(formItem) { - formItem.attrs.data = await DeptAPI.getOptions(); - // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem - // this.attrs!.data = await DeptAPI.getOptions(); - }, + // async initFn(formItem) { + // // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem + // formItem.attrs.data = await DeptAPI.getOptions(); + // }, }, { type: "cascader", diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue index 2201d158..4ed75e73 100644 --- a/src/views/demo/curd/index.vue +++ b/src/views/demo/curd/index.vue @@ -117,13 +117,15 @@ import UserAPI from "@/api/system/user.api"; import type { IObject, IOperateData, PageModalInstance } from "@/components/CURD/types"; import usePage from "@/components/CURD/usePage"; import addModalConfig from "./config/add"; -import addModalConfig2 from "./config/add2"; import contentConfig from "./config/content"; -import contentConfig2 from "./config/content2"; import editModalConfig from "./config/edit"; -import editModalConfig2 from "./config/edit2"; import searchConfig from "./config/search"; -import searchConfig2 from "./config/search2"; +import { initOptions } from "./config/options"; + +import addModalConfig2 from "./config2/add"; +import contentConfig2 from "./config2/content"; +import editModalConfig2 from "./config2/edit"; +import searchConfig2 from "./config2/search"; const { searchRef, @@ -141,8 +143,6 @@ const { handleFilterChange, } = usePage(); -const addModalRef2 = ref(); - // 其他工具栏 function handleToolbarClick(name: string) { console.log(name); @@ -195,6 +195,7 @@ const handleOperateClick2 = (data: IOperateData) => { }; // 打开二级弹窗 +const addModalRef2 = ref(); const openSecondModal = () => { handleAddClick(addModalRef2 as Ref); }; @@ -205,4 +206,8 @@ const secondSubmit = (formData: any) => { // 切换示例 const isA = ref(true); + +onMounted(() => { + initOptions(); +});