fix: 🐛 共享下拉数据，避免重复请求

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<UserForm> = {
   permPrefix: "sys:user",
@@ -51,15 +50,15 @@ const modalConfig: IModalConfig<UserForm> = {
       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<UserForm> = {
         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",

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<UserForm> = {
   permPrefix: "sys:user",
@@ -46,15 +45,15 @@ const modalConfig: IModalConfig<UserForm> = {
       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<UserForm> = {
         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",

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<OptionType[]>([]);
+export let roleArr = ref<OptionType[]>([]);
+export let stateArr = ref<OptionType[]>([
+  { 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);
+  }
+};

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",

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<UserForm> = {
   colon: true,
@@ -35,15 +35,11 @@ const modalConfig: IModalConfig<UserForm> = {
       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",

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",

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<PageModalInstance>);
 };
@@ -205,4 +206,8 @@ const secondSubmit = (formData: any) => {
 
 // 切换示例
 const isA = ref(true);
+
+onMounted(() => {
+  initOptions();
+});
 </script>