refactor: ♻️ pageModal组件，代码重构，更新使用案例

src/views/demo/curd/config/content.ts

@@ -112,12 +112,12 @@ const contentConfig: IContentConfig<UserPageQuery> = {
         {
           name: "detail",
           text: "详情",
-          attrs: { icon: "Document" },
+          attrs: { icon: "Document", type: "primary" },
         },
         {
           name: "reset_pwd",
           text: "重置密码",
-          perm: "password:reset",
+          // perm: "password-reset",
           attrs: {
             icon: "refresh-left",
             // color: "#626AEF", // 使用 text 属性，颜色不生效

src/views/demo/curd/config/content2.ts

@@ -5,6 +5,7 @@ const contentConfig: IContentConfig = {
   table: {
     showOverflowTooltip: true,
   },
+  pagePosition: "right",
   toolbar: [],
   indexAction: function (params) {
     // 模拟发起网络请求获取列表数据
@@ -14,7 +15,7 @@ const contentConfig: IContentConfig = {
       list: [
         {
           id: 1,
-          username: "tom",
+          username: "root",
           avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
           percent: 99,
           price: 10,
@@ -115,14 +116,16 @@ const contentConfig: IContentConfig = {
       width: 220,
       templet: "tool",
       operat: [
+        "view",
+        "edit",
         {
-          name: "reset_pwd",
-          text: "重置密码",
-          perm: "password:reset",
-          attrs: { icon: "refresh-left", type: "primary" },
+          name: "delete",
+          text: "展示删除",
+          perm: "delete",
+          attrs: { icon: "delete", type: "danger" },
           render(row) {
             // 根据条件，显示或隐藏
-            return row.id === 1;
+            return row.id !== 1;
           },
         },
       ],

src/views/demo/curd/config/edit.ts

@@ -2,6 +2,8 @@ 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";
 
 const modalConfig: IModalConfig<UserForm> = {
   permPrefix: "sys:user",
@@ -11,12 +13,12 @@ const modalConfig: IModalConfig<UserForm> = {
     size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
   },
   pk: "id",
+  beforeSubmit(data) {
+    console.log("beforeSubmit", data);
+  },
   formAction: function (data) {
     return UserAPI.update(data.id as string, data);
   },
-  beforeSubmit(data) {
-    console.log("提交之前处理", data);
-  },
   formItems: [
     {
       label: "用户名",
@@ -49,12 +51,17 @@ 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: "角色",
@@ -67,6 +74,9 @@ const modalConfig: IModalConfig<UserForm> = {
       },
       options: [],
       initialValue: [],
+      async initFn(formItem) {
+        formItem.options = await RoleAPI.getOptions();
+      },
     },
     {
       type: "input",
@@ -105,6 +115,7 @@ const modalConfig: IModalConfig<UserForm> = {
       prop: "status",
       type: "switch",
       attrs: {
+        inlinePrompt: true,
         activeText: "正常",
         inactiveText: "禁用",
         activeValue: 1,

src/views/demo/curd/config/edit2.ts

@@ -0,0 +1,105 @@
+import type { IModalConfig } from "@/components/CURD/types";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import { useAppStore } from "@/store";
+
+const modalConfig: IModalConfig = {
+  permPrefix: "sys:user",
+  component: "drawer",
+  colon: true,
+  pk: "id",
+  drawer: {
+    title: "修改用户",
+    size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
+  },
+  form: { labelPosition: "right", labelWidth: "auto" },
+  beforeSubmit(data) {
+    console.log("beforeSubmit", data);
+  },
+  formAction: function (data) {
+    // return UserAPI.update(data.id as string, data);
+    // 模拟发起网络请求修改字段
+    ElMessage.success(JSON.stringify(data));
+    return Promise.resolve(null);
+  },
+  formItems: [
+    {
+      tips: { effect: "light", placement: "top", content: "自定义文字提示" },
+      type: "input",
+      label: "文本",
+      prop: "username",
+      attrs: { placeholder: "请输入", clearable: true },
+    },
+    {
+      type: "input-number",
+      label: "百分比",
+      prop: "percent",
+      attrs: { placeholder: "请输入", controls: false },
+      slotName: "suffix",
+    },
+    {
+      type: "input-number",
+      label: "货币符",
+      prop: "price",
+      attrs: { placeholder: "请输入", controls: false },
+      slotName: "prefix",
+    },
+    {
+      type: "input",
+      label: "链接",
+      prop: "url",
+      attrs: { placeholder: "请输入", clearable: true },
+    },
+    {
+      type: "icon-select",
+      label: "链接",
+      prop: "icon",
+    },
+    {
+      type: "custom",
+      label: "列表值",
+      prop: "gender",
+      slotName: "gender",
+      attrs: { style: { width: "100%" } },
+    },
+    {
+      type: "select",
+      label: "自定义",
+      prop: "status",
+      attrs: { placeholder: "全部", clearable: true },
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+    },
+    {
+      type: "switch",
+      label: "Switch",
+      prop: "status2",
+      attrs: {
+        inlinePrompt: true,
+        activeValue: 1,
+        inactiveValue: 0,
+        activeText: "启用",
+        inactiveText: "禁用",
+      },
+    },
+    {
+      type: "input-number",
+      label: "输入框",
+      prop: "sort",
+      attrs: { placeholder: "请输入", controls: false },
+    },
+    {
+      type: "date-picker",
+      label: "日期格式化",
+      prop: "createTime",
+      attrs: {
+        type: "datetime",
+        format: "YYYY/MM/DD hh:mm:ss",
+        "value-format": "x",
+      },
+    },
+  ],
+};
+
+export default reactive(modalConfig);

src/views/demo/curd/index.vue

@@ -26,11 +26,10 @@
         ref="contentRef"
         :content-config="contentConfig"
         @add-click="handleAddClick"
-        @edit-click="handleEditClick"
         @export-click="handleExportClick"
         @search-click="handleSearchClick"
         @toolbar-click="handleToolbarClick"
-        @operat-click="handleOperatClick"
+        @operate-click="handleOperateClick"
         @filter-change="handleFilterChange"
       >
         <template #status="scope">
@@ -75,10 +74,11 @@
     </template>
     <template v-else>
       <page-search ref="searchRef" :search-config="searchConfig2" @reset-click="handleResetClick" />
+
       <page-content
         ref="contentRef"
         :content-config="contentConfig2"
-        @operat-click="handleOperatClick"
+        @operate-click="handleOperateClick2"
       >
         <template #status="scope">
           <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
@@ -86,20 +86,31 @@
           </el-tag>
         </template>
       </page-content>
+
+      <page-modal ref="editModalRef" :modal-config="editModalConfig2">
+        <template #suffix>
+          <span style="color: black">%</span>
+        </template>
+        <template #prefix>
+          <span>$</span>
+        </template>
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        </template>
+      </page-modal>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import UserAPI from "@/api/system/user.api";
-import DeptAPI from "@/api/system/dept.api";
-import RoleAPI from "@/api/system/role.api";
-import type { IObject, IOperatData } from "@/components/CURD/types";
+import type { IObject, IOperateData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./config/add";
 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";
 
@@ -111,7 +122,8 @@ const {
   handleQueryClick,
   handleResetClick,
   // handleAddClick,
-  // handleEditClick,
+  handleEditClick,
+  handleViewClick,
   handleSubmitClick,
   handleExportClick,
   handleSearchClick,
@@ -121,22 +133,8 @@ const {
 // 新增
 async function handleAddClick() {
   addModalRef.value?.setModalVisible();
-  // 加载部门下拉数据源
-  addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-  // 加载角色下拉数据源
-  addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
-}
-// 编辑
-async function handleEditClick(row: IObject) {
-  editModalRef.value?.handleDisabled(false);
-  editModalRef.value?.setModalVisible();
-  // 加载部门下拉数据源
-  editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-  // 加载角色下拉数据源
-  editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
-  // 根据id获取数据进行填充
-  const data = await UserAPI.getFormData(row.id);
-  editModalRef.value?.setFormData(data);
+  // 加载下拉数据源，建议在初始化配置项 initFn 中加载，避免多次请求
+  // addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
 }
 // 其他工具栏
 function handleToolbarClick(name: string) {
@@ -145,11 +143,22 @@ function handleToolbarClick(name: string) {
     ElMessage.success("点击了自定义1按钮");
   }
 }
-// 其他操作列
-async function handleOperatClick(data: IOperatData) {
-  console.log(data);
-  // 重置密码
-  if (data.name === "reset_pwd") {
+
+// 表格工具栏
+const handleOperateClick = (data: IObject) => {
+  if (data.name === "detail") {
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "查看" };
+    handleViewClick(data.row, async () => {
+      // 加载下拉数据源，建议在初始化配置项 initFn 中加载，避免多次请求
+      // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+      return await UserAPI.getFormData(data.row.id); // 根据ID获取详情
+    });
+  } else if (data.name === "edit") {
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
+    handleEditClick(data.row, async () => {
+      return await UserAPI.getFormData(data.row.id); // 根据ID获取详情
+    });
+  } else if (data.name === "reset_pwd") {
     ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
@@ -162,23 +171,32 @@ async function handleOperatClick(data: IOperatData) {
         ElMessage.success("密码重置成功，新密码是：" + value);
       });
     });
-  } else if (data.name === "detail") {
-    // 禁用表单编辑
-    editModalRef.value?.handleDisabled(true);
-    // 打开抽屉
-    editModalRef.value?.setModalVisible();
-    // 修改抽屉标题
-    editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
-    // 加载部门下拉数据源
-    editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-    // 加载角色下拉数据源
-    editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
-    // 根据id获取数据进行填充
-    const formData = await UserAPI.getFormData(data.row.id);
-    // 设置表单数据
-    editModalRef.value?.setFormData(formData);
+  } 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); // 刷新列表
+        });
+      })
+      .catch(() => {});
   }
-}
+};
+const handleOperateClick2 = (data: IOperateData) => {
+  if (data.name === "view") {
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "查看" };
+    handleViewClick(data.row);
+  } else if (data.name === "edit") {
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
+    handleEditClick(data.row);
+  } else if (data.name === "delete") {
+    ElMessage.success("模拟删除成功");
+  }
+};
 
 // 切换示例
 const isA = ref(true);