From 4b1614952b2875a1bbce0522f6f43a07cce8716b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E5=87=A1?= <2508779859@qq.com>
Date: Mon, 21 Apr 2025 22:12:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20pageModal=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0=E4=BA=8C=E7=BA=A7=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E4=B8=8E=E4=BD=BF=E7=94=A8=E6=A1=88=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CURD/PageContent.vue |  40 ++--
 src/components/CURD/PageModal.vue   | 279 ++++++++++++++--------------
 src/components/CURD/types.ts        |  49 ++---
 src/components/CURD/usePage.ts      |  55 ++++--
 src/views/demo/curd/config/add.ts   |  20 +-
 src/views/demo/curd/config/add2.ts  |  59 ++++++
 src/views/demo/curd/index.vue       |  58 +++---
 7 files changed, 331 insertions(+), 229 deletions(-)
 create mode 100644 src/views/demo/curd/config/add2.ts

diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index fd461292..68e01afb 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -503,19 +503,24 @@ function handleDelete(id?: number | string) {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
-  }).then(function () {
-    if (props.contentConfig.deleteAction) {
-      props.contentConfig.deleteAction(ids).then(() => {
-        ElMessage.success("删除成功");
-        removeIds.value = [];
-        //清空选中项
-        tableRef.value?.clearSelection();
-        handleRefresh(true);
-      });
-    } else {
-      ElMessage.error("未配置deleteAction");
-    }
-  });
+  })
+    .then(function () {
+      if (props.contentConfig.deleteAction) {
+        props.contentConfig
+          .deleteAction(ids)
+          .then(() => {
+            ElMessage.success("删除成功");
+            removeIds.value = [];
+            //清空选中项
+            tableRef.value?.clearSelection();
+            handleRefresh(true);
+          })
+          .catch(() => {});
+      } else {
+        ElMessage.error("未配置deleteAction");
+      }
+    })
+    .catch(() => {});
 }
 
 // 导出表单
@@ -777,7 +782,14 @@ function handleToolbar(name: string) {
 
 // 操作列
 function handleOperate(data: IOperateData) {
-  emit("operateClick", data);
+  switch (data.name) {
+    case "delete":
+      props.contentConfig?.deleteAction && handleDelete(data.row[pk]);
+      break;
+    default:
+      emit("operateClick", data);
+      break;
+  }
 }
 
 // 属性修改
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index 10ab9952..fe1fa5c9 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -1,147 +1,151 @@
 <template>
-  <!-- drawer -->
-  <template v-if="modalConfig.component === 'drawer'">
-    <el-drawer
-      v-model="modalVisible"
-      v-bind="{ destroyOnClose: true, ...modalConfig.drawer }"
-      @close="handleClose"
-    >
-      <!-- 表单 -->
-      <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
-        <el-row :gutter="20">
-          <template v-for="item in formItems" :key="item.prop">
-            <el-col v-show="!item.hidden" v-bind="item.col">
-              <el-form-item :label="item.label" :prop="item.prop">
-                <!-- Label -->
-                <template #label>
-                  <span>
-                    {{ item?.label || "" }}
-                    <el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
-                      <QuestionFilled class="w-4 h-4 mx-1" />
-                    </el-tooltip>
-                    <span v-if="modalConfig.colon" class="ml-0.5">:</span>
-                  </span>
-                </template>
-
-                <!-- components -->
-                <template v-if="item.type === 'custom'">
-                  <slot
-                    :name="item.slotName ?? item.prop"
-                    :prop="item.prop"
-                    :form-data="formData"
-                    :attrs="item.attrs"
-                    style="width: 100%"
-                  ></slot>
-                </template>
-                <component
-                  :is="componentMap.get(item.type)"
-                  v-else
-                  v-model.trim="formData[item.prop]"
-                  v-bind="{ style: { width: '100%' }, ...item.attrs }"
-                >
-                  <template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
-                    <component
-                      :is="childrenMap.get(item.type)"
-                      v-for="opt in item.options"
-                      :label="opt.label"
-                      :value="opt.value"
-                    ></component>
+  <div>
+    <!-- drawer -->
+    <template v-if="modalConfig.component === 'drawer'">
+      <el-drawer
+        v-model="modalVisible"
+        v-bind="{ destroyOnClose: true, ...modalConfig.drawer }"
+        @close="handleClose"
+      >
+        <!-- 表单 -->
+        <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
+          <el-row :gutter="20">
+            <template v-for="item in formItems" :key="item.prop">
+              <el-col v-show="!item.hidden" v-bind="item.col">
+                <el-form-item :label="item.label" :prop="item.prop">
+                  <!-- Label -->
+                  <template #label>
+                    <span>
+                      {{ item?.label || "" }}
+                      <el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
+                        <QuestionFilled class="w-4 h-4 mx-1" />
+                      </el-tooltip>
+                      <span v-if="modalConfig.colon" class="ml-0.5">:</span>
+                    </span>
                   </template>
 
-                  <template v-if="item?.slotName && $slots[item.slotName]" #[item.slotName]>
-                    <slot :name="item.slotName" />
+                  <!-- components -->
+                  <template v-if="item.type === 'custom'">
+                    <slot
+                      :name="item.slotName ?? item.prop"
+                      :prop="item.prop"
+                      :form-data="formData"
+                      :attrs="item.attrs"
+                    ></slot>
                   </template>
-                </component>
-              </el-form-item>
-            </el-col>
-          </template>
-        </el-row>
-      </el-form>
-      <!-- 弹窗底部操作按钮 -->
-      <template #footer>
-        <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
-        <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
-      </template>
-    </el-drawer>
-  </template>
-  <!-- dialog -->
-  <template v-else>
-    <el-dialog
-      v-model="modalVisible"
-      v-bind="{ destroyOnClose: true, appendToBody: true, ...modalConfig.dialog }"
-      @close="handleClose"
-    >
-      <!-- 表单 -->
-      <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
-        <el-row :gutter="20">
-          <template v-for="item in formItems" :key="item.prop">
-            <el-col v-show="!item.hidden" v-bind="item.col">
-              <el-form-item :label="item.label" :prop="item.prop">
-                <!-- Label -->
-                <template #label>
-                  <span class="flex-y-center">
-                    {{ item?.label || "" }}
-                    <el-tooltip v-if="item?.tips">
-                      <QuestionFilled class="w-4 h-4 mx-1" />
-                    </el-tooltip>
-                    <span v-if="modalConfig.colon" class="ml-0.5">:</span>
-                  </span>
-                </template>
+                  <component
+                    :is="componentMap.get(item.type)"
+                    v-else
+                    v-model.trim="formData[item.prop]"
+                    v-bind="{ style: { width: '100%' }, ...item.attrs }"
+                  >
+                    <template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
+                      <component
+                        :is="childrenMap.get(item.type)"
+                        v-for="opt in item.options"
+                        :label="opt.label"
+                        :value="opt.value"
+                      ></component>
+                    </template>
 
-                <!-- components -->
-                <template v-if="item.type === 'custom'">
-                  <slot
-                    :name="item.slotName ?? item.prop"
-                    :prop="item.prop"
-                    :form-data="formData"
-                    :attrs="item.attrs"
-                  ></slot>
-                </template>
-                <component
-                  :is="componentMap.get(item.type)"
-                  v-else
-                  v-model.trim="formData[item.prop]"
-                  v-bind="{ style: { width: '100%' }, ...item.attrs }"
-                >
-                  <template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
-                    <component
-                      :is="childrenMap.get(item.type)"
-                      v-for="opt in item.options"
-                      :label="opt.label"
-                      :value="opt.value"
-                    >
-                      <slot v-if="item.slotName" :name="item.slotName"></slot>
-                    </component>
+                    <template v-if="item?.slotName && $slots[item.slotName]" #[item.slotName]>
+                      <slot :name="item.slotName" />
+                    </template>
+                  </component>
+                </el-form-item>
+              </el-col>
+            </template>
+          </el-row>
+        </el-form>
+        <!-- 弹窗底部操作按钮 -->
+        <template #footer>
+          <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
+        </template>
+      </el-drawer>
+    </template>
+    <!-- dialog -->
+    <template v-else>
+      <el-dialog
+        v-model="modalVisible"
+        v-bind="{ destroyOnClose: true, ...modalConfig.dialog }"
+        @close="handleClose"
+      >
+        <!-- 表单 -->
+        <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
+          <el-row :gutter="20">
+            <template v-for="item in formItems" :key="item.prop">
+              <el-col v-show="!item.hidden" v-bind="item.col">
+                <el-form-item :label="item.label" :prop="item.prop">
+                  <!-- Label -->
+                  <template #label>
+                    <span>
+                      {{ item?.label || "" }}
+                      <el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
+                        <QuestionFilled class="w-4 h-4 mx-1" />
+                      </el-tooltip>
+                      <span v-if="modalConfig.colon" class="ml-0.5">:</span>
+                    </span>
                   </template>
-                </component>
-              </el-form-item>
-            </el-col>
-          </template>
-        </el-row>
-      </el-form>
-      <!-- 弹窗底部操作按钮 -->
-      <template #footer>
-        <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
-        <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
-      </template>
-    </el-dialog>
-  </template>
+
+                  <!-- components -->
+                  <template v-if="item.type === 'custom'">
+                    <slot
+                      :name="item.slotName ?? item.prop"
+                      :prop="item.prop"
+                      :form-data="formData"
+                      :attrs="item.attrs"
+                    ></slot>
+                  </template>
+                  <component
+                    :is="componentMap.get(item.type)"
+                    v-else
+                    v-model.trim="formData[item.prop]"
+                    v-bind="{ style: { width: '100%' }, ...item.attrs }"
+                  >
+                    <template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
+                      <component
+                        :is="childrenMap.get(item.type)"
+                        v-for="opt in item.options"
+                        :label="opt.label"
+                        :value="opt.value"
+                      ></component>
+                    </template>
+
+                    <template v-if="item?.slotName && $slots[item.slotName]" #[item.slotName]>
+                      <slot :name="item.slotName" />
+                    </template>
+                  </component>
+                </el-form-item>
+              </el-col>
+            </template>
+          </el-row>
+        </el-form>
+        <!-- 弹窗底部操作按钮 -->
+        <template #footer>
+          <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
+        </template>
+      </el-dialog>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useThrottleFn } from "@vueuse/core";
 import type { FormInstance, FormRules } from "element-plus";
-import type { IModalConfig, IObject } from "./types";
+import type { IComponentType, IModalConfig, IObject } from "./types";
 import InputTag from "@/components/InputTag/index.vue";
 import IconSelect from "@/components/IconSelect/index.vue";
 
+defineSlots<{ [key: string]: (_args: any) => any }>();
 // 定义接收的属性
 const props = defineProps<{ modalConfig: IModalConfig }>();
 // 自定义事件
-const emit = defineEmits<{ submitClick: [] }>();
+const emit = defineEmits<{ submitClick: []; customSubmit: [queryParams: IObject] }>();
 // 组件映射表
 /* eslint-disable */
-const componentMap = new Map([
+const componentMap = new Map<IComponentType, any>([
   // @ts-ignore
   ["input", markRaw(ElInput)], // @ts-ignore
   ["select", markRaw(ElSelect)], // @ts-ignore
@@ -160,7 +164,7 @@ const componentMap = new Map([
   ["icon-select", markRaw(IconSelect)], // @ts-ignore"
   ["custom", ""],
 ]);
-const childrenMap = new Map([
+const childrenMap = new Map<IComponentType, any>([
   // @ts-ignore
   ["select", markRaw(ElOption)], // @ts-ignore
   ["radio", markRaw(ElRadio)], // @ts-ignore"
@@ -168,13 +172,13 @@ const childrenMap = new Map([
 ]);
 /* eslint-enable */
 
-const pk = props.modalConfig.pk ?? "id";
-const modalVisible = ref(false);
-const formRef = ref<FormInstance>();
-const formItems = reactive(props.modalConfig.formItems ?? []);
-const formData = reactive<IObject>({});
-const formRules: FormRules = {};
-const formDisable = ref(false);
+const pk = props.modalConfig.pk ?? "id"; // 主键名，用于表单数据处理
+const modalVisible = ref(false); // 弹窗显示状态
+const formRef = ref<FormInstance>(); // 表单实例
+const formItems = reactive(props.modalConfig.formItems ?? []); // 表单配置项
+const formData = reactive<IObject>({}); // 表单数据
+const formRules: FormRules = {}; // 表单验证规则
+const formDisable = ref(false); // 表单禁用状态
 
 // 获取tooltip提示框属性
 const getTooltipProps = (tips: string | IObject) => {
@@ -204,17 +208,16 @@ const handleSubmit = useThrottleFn(() => {
       props.modalConfig.beforeSubmit(formData);
     }
     if (!props.modalConfig?.formAction) {
-      ElMessage.error("未配置exportAction");
+      emit("customSubmit", formData);
+      handleClose();
       return;
     }
     props.modalConfig.formAction(formData).then(() => {
-      let msg = "操作成功";
       if (props.modalConfig.component === "drawer") {
-        msg = `${props.modalConfig.drawer?.title}成功`;
+        ElMessage.success(`${props.modalConfig.drawer?.title}成功`);
       } else {
-        msg = `${props.modalConfig.dialog?.title}成功`;
+        ElMessage.success(`${props.modalConfig.dialog?.title}成功`);
       }
-      ElMessage.success(msg);
       emit("submitClick");
       handleClose();
     });
diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts
index a9da104a..781f6063 100644
--- a/src/components/CURD/types.ts
+++ b/src/components/CURD/types.ts
@@ -13,11 +13,11 @@ export type PageFormInstance = InstanceType<typeof PageForm>;
 
 export type IObject = Record<string, any>;
 
-type DataComponent = "date-picker" | "time-picker" | "time-select" | "custom-tag" | "input-tag";
+type DateComponent = "date-picker" | "time-picker" | "time-select" | "custom-tag" | "input-tag";
 type InputComponent = "input" | "select" | "input-number" | "cascader" | "tree-select";
 type OtherComponent = "text" | "radio" | "checkbox" | "switch" | "icon-select" | "custom";
-export type ISearchComponent = DataComponent | InputComponent;
-export type IComponentType = DataComponent | InputComponent | OtherComponent;
+export type ISearchComponent = DateComponent | InputComponent;
+export type IComponentType = DateComponent | InputComponent | OtherComponent;
 
 type ToolbarLeft = "add" | "delete" | "import" | "export";
 type ToolbarRight = "refresh" | "filter" | "imports" | "exports" | "search";
@@ -44,26 +44,7 @@ export interface ISearchConfig {
   // 标签冒号(默认：false)
   colon?: boolean;
   // 表单项(默认：[])
-  formItems?: Array<{
-    // 组件类型(如input,select等)
-    type?: ISearchComponent;
-    // 标签文本
-    label?: string;
-    // 标签提示
-    tips?: string | IObject;
-    // 键名
-    prop: string;
-    // 组件属性(input-tag组件支持join,btnText,size属性)
-    attrs?: IObject;
-    // 初始值
-    initialValue?: any;
-    // 可选项(适用于select组件)
-    options?: Array<{ label: string; value: any }>;
-    // 组件事件
-    events?: Record<string, (...args: any) => void>;
-    // 初始化数据函数扩展
-    initFn?: (formItem: IObject) => void;
-  }>;
+  formItems?: IFormItems;
   // 是否开启展开和收缩(默认：true)
   isExpandable?: boolean;
   // 默认展示的表单项数量(默认：3)
@@ -199,36 +180,36 @@ export interface IModalConfig<T = any> {
   // 提交之前处理
   beforeSubmit?: (data: T) => void;
   // 提交的网络请求函数(需返回promise)
-  formAction: (data: T) => Promise<any>;
+  formAction?: (data: T) => Promise<any>;
 }
 
 export type IForm = Partial<Omit<FormProps, "model" | "rules">>;
 
 // 表单项
 export type IFormItems = Array<{
-  // 组件类型(如input,select,radio,custom等，默认input)
+  // 组件类型(如input,select,radio,custom等)
   type: IComponentType;
+  // 标签提示
+  tips?: string | IObject;
+  // 标签文本
+  label: string;
+  // 键名
+  prop: string;
   // 组件属性
   attrs?: IObject;
-  // 组件可选项(适用于select,radio,checkbox组件)
+  // 组件可选项(只适用于select,radio,checkbox组件)
   options?: Array<{
     label: string;
     value: any;
     disabled?: boolean;
     [key: string]: any;
   }>;
-  // 插槽名(适用于组件类型为custom)
-  slotName?: string;
-  // 标签文本
-  label: string;
-  // 标签提示
-  tips?: string | IObject;
-  // 键名
-  prop: string;
   // 验证规则
   rules?: FormItemRule[];
   // 初始值
   initialValue?: any;
+  // 插槽名(适用于自定义组件，设置类型为custom)
+  slotName?: string;
   // 是否隐藏
   hidden?: boolean;
   // layout组件Col属性
diff --git a/src/components/CURD/usePage.ts b/src/components/CURD/usePage.ts
index b5f6c557..95ee9db0 100644
--- a/src/components/CURD/usePage.ts
+++ b/src/components/CURD/usePage.ts
@@ -18,23 +18,50 @@ function usePage() {
     contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
   }
   // 新增
-  function handleAddClick() {
-    //显示添加表单
-    addModalRef.value?.setModalVisible();
+  function handleAddClick(RefImpl?: Ref<PageContentInstance>) {
+    if (RefImpl) {
+      RefImpl?.value.setModalVisible();
+      RefImpl?.value.handleDisabled(false);
+    } else {
+      addModalRef.value?.setModalVisible();
+      addModalRef.value?.handleDisabled(false);
+    }
   }
   // 编辑
-  async function handleEditClick(row: IObject, callback?: (result?: IObject) => IObject) {
-    editModalRef.value?.setModalVisible();
-    editModalRef.value?.handleDisabled(false);
-    let from = await (callback?.(row) ?? Promise.resolve(row));
-    editModalRef.value?.setFormData(from ? from : row);
+  async function handleEditClick(
+    row: IObject,
+    callback?: (result?: IObject) => IObject,
+    RefImpl?: Ref<PageContentInstance>
+  ) {
+    if (RefImpl) {
+      RefImpl.value?.setModalVisible();
+      RefImpl.value?.handleDisabled(false);
+      let from = await (callback?.(row) ?? Promise.resolve(row));
+      RefImpl.value?.setFormData(from ? from : row);
+    } else {
+      editModalRef.value?.setModalVisible();
+      editModalRef.value?.handleDisabled(false);
+      let from = await (callback?.(row) ?? Promise.resolve(row));
+      editModalRef.value?.setFormData(from ? from : row);
+    }
   }
-  // 编辑
-  async function handleViewClick(row: IObject, callback?: (result?: IObject) => IObject) {
-    editModalRef.value?.setModalVisible();
-    editModalRef.value?.handleDisabled(true);
-    let from = await (callback?.(row) ?? Promise.resolve(row));
-    editModalRef.value?.setFormData(from ? from : row);
+  // 查看
+  async function handleViewClick(
+    row: IObject,
+    callback?: (result?: IObject) => IObject,
+    RefImpl?: Ref<PageContentInstance>
+  ) {
+    if (RefImpl) {
+      RefImpl.value?.setModalVisible();
+      RefImpl.value?.handleDisabled(true);
+      let from = await (callback?.(row) ?? Promise.resolve(row));
+      RefImpl.value?.setFormData(from ? from : row);
+    } else {
+      editModalRef.value?.setModalVisible();
+      editModalRef.value?.handleDisabled(true);
+      let from = await (callback?.(row) ?? Promise.resolve(row));
+      editModalRef.value?.setFormData(from ? from : row);
+    }
   }
   // 表单提交
   function handleSubmitClick() {
diff --git a/src/views/demo/curd/config/add.ts b/src/views/demo/curd/config/add.ts
index 65d91f7a..f3598bd8 100644
--- a/src/views/demo/curd/config/add.ts
+++ b/src/views/demo/curd/config/add.ts
@@ -1,5 +1,7 @@
 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";
 
 const modalConfig: IModalConfig<UserForm> = {
   permPrefix: "sys:user",
@@ -45,7 +47,7 @@ const modalConfig: IModalConfig<UserForm> = {
     {
       label: "所属部门",
       prop: "deptId",
-      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
+      rules: [{ required: true, message: "所属部门不能为空", trigger: "change" }],
       type: "tree-select",
       attrs: {
         placeholder: "请选择所属部门",
@@ -54,17 +56,22 @@ const modalConfig: IModalConfig<UserForm> = {
         "check-strictly": true,
         "render-after-expand": false,
       },
+      async initFn(formItem) {
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        formItem.attrs.data = await DeptAPI.getOptions();
+      },
     },
     {
       type: "custom",
       label: "性别",
       prop: "gender",
       initialValue: 1,
+      attrs: { style: { width: "100%" } },
     },
     {
       label: "角色",
       prop: "roleIds",
-      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+      rules: [{ required: true, message: "用户角色不能为空", trigger: "change" }],
       type: "select",
       attrs: {
         placeholder: "请选择",
@@ -72,6 +79,9 @@ const modalConfig: IModalConfig<UserForm> = {
       },
       options: [],
       initialValue: [],
+      async initFn(formItem) {
+        formItem.options = await RoleAPI.getOptions();
+      },
     },
     {
       type: "input",
@@ -115,6 +125,12 @@ const modalConfig: IModalConfig<UserForm> = {
       ],
       initialValue: 1,
     },
+    {
+      type: "custom",
+      label: "二级弹窗",
+      prop: "openModal",
+      slotName: "openModal",
+    },
   ],
 };
 
diff --git a/src/views/demo/curd/config/add2.ts b/src/views/demo/curd/config/add2.ts
new file mode 100644
index 00000000..aefe2797
--- /dev/null
+++ b/src/views/demo/curd/config/add2.ts
@@ -0,0 +1,59 @@
+import { type UserForm } from "@/api/system/user.api";
+import type { IModalConfig } from "@/components/CURD/types";
+import DeptAPI from "@/api/system/dept.api";
+
+const modalConfig: IModalConfig<UserForm> = {
+  colon: true,
+  dialog: {
+    title: "二级弹窗",
+    width: 500,
+    draggable: true,
+  },
+  form: {
+    labelWidth: "auto",
+    labelPosition: "top",
+  },
+  formItems: [
+    {
+      label: "用户名",
+      prop: "username",
+      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      type: "input",
+      attrs: { placeholder: "请输入" },
+    },
+    {
+      label: "用户昵称",
+      prop: "nickname",
+      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+      type: "input",
+      attrs: { placeholder: "请输入" },
+    },
+    {
+      label: "所属部门",
+      prop: "deptId",
+      rules: [{ required: true, message: "所属部门不能为空", trigger: "change" }],
+      type: "tree-select",
+      attrs: {
+        placeholder: "请选择",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+      },
+      async initFn(formItem) {
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        formItem.attrs.data = await DeptAPI.getOptions();
+      },
+    },
+    {
+      type: "custom",
+      label: "性别",
+      prop: "gender",
+      initialValue: 1,
+      attrs: { style: { width: "100%" } },
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index 0ceeb080..c6cecb09 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -57,7 +57,17 @@
         @submit-click="handleSubmitClick"
       >
         <template #gender="scope">
-          <Dict v-model="scope.formData[scope.prop]" code="gender" />
+          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        </template>
+        <template #openModal>
+          <el-button type="primary" @click="openSecondModal">打开二级弹窗</el-button>
+        </template>
+      </page-modal>
+
+      <!-- 二级弹窗 -->
+      <page-modal ref="addModalRef2" :modal-config="addModalConfig2" @custom-click="secondSubmit">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
         </template>
       </page-modal>
 
@@ -104,9 +114,10 @@
 
 <script setup lang="ts">
 import UserAPI from "@/api/system/user.api";
-import type { IObject, IOperateData } from "@/components/CURD/types";
+import type { IObject, IOperateData, PageContentInstance } 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";
@@ -121,7 +132,7 @@ const {
   editModalRef,
   handleQueryClick,
   handleResetClick,
-  // handleAddClick,
+  handleAddClick,
   handleEditClick,
   handleViewClick,
   handleSubmitClick,
@@ -130,12 +141,8 @@ const {
   handleFilterChange,
 } = usePage();
 
-// 新增
-async function handleAddClick() {
-  addModalRef.value?.setModalVisible();
-  // 加载下拉数据源，建议在初始化配置项 initFn 中加载，避免多次请求
-  // addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-}
+const addModalRef2 = ref();
+
 // 其他工具栏
 function handleToolbarClick(name: string) {
   console.log(name);
@@ -162,25 +169,14 @@ const handleOperateClick = (data: IObject) => {
     ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
-    }).then(({ value }) => {
-      if (!value || value.length < 6) {
-        ElMessage.warning("密码至少需要6位字符，请重新输入");
-        return false;
-      }
-      UserAPI.resetPassword(data.row.id, value).then(() => {
-        ElMessage.success("密码重置成功，新密码是：" + value);
-      });
-    });
-  } else if (data.name === "delete") {
-    ElMessageBox.confirm("确认删除?", "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
     })
-      .then(function () {
-        UserAPI.deleteByIds(data.row.id).then(() => {
-          ElMessage.success("删除成功");
-          contentRef.value?.handleRefresh(true); // 刷新列表
+      .then(({ value }) => {
+        if (!value || value.length < 6) {
+          ElMessage.warning("密码至少需要6位字符，请重新输入");
+          return false;
+        }
+        UserAPI.resetPassword(data.row.id, value).then(() => {
+          ElMessage.success("密码重置成功，新密码是：" + value);
         });
       })
       .catch(() => {});
@@ -198,6 +194,14 @@ const handleOperateClick2 = (data: IOperateData) => {
   }
 };
 
+// 打开二级弹窗
+const openSecondModal = () => {
+  handleAddClick(addModalRef2 as Ref<PageContentInstance>);
+};
+const secondSubmit = () => {
+  ElMessage.success("二级弹窗提交成功");
+};
+
 // 切换示例
 const isA = ref(true);
 </script>