From 0964c71b2e9e8f067ab8f389ee5088f4be76e46b Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Tue, 13 Aug 2024 14:47:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(CURD):=20:recycle:=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=92=8C=E4=BF=AE=E6=94=B9=E4=BD=BF=E7=94=A8=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CURD/PageContent.vue |  5 ++--
 src/components/CURD/PageForm.vue    |  2 +-
 src/components/CURD/PageModal.vue   | 12 +++++---
 src/views/demo/curd/config/add.ts   | 45 ++++++++++++-----------------
 src/views/demo/curd/config/edit.ts  | 29 ++++---------------
 src/views/demo/curd/index.vue       | 22 ++++++++++++--
 6 files changed, 55 insertions(+), 60 deletions(-)

diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 7b73799f..d36167e8 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -245,7 +245,7 @@
             </template>
             <!-- 格式化为百分比 -->
             <template v-else-if="col.templet === 'percent'">
-              <template v-if="col.prop"> {{ scope.row[col.prop] }}% </template>
+              <template v-if="col.prop">{{ scope.row[col.prop] }}%</template>
             </template>
             <!-- 显示图标 -->
             <template v-else-if="col.templet === 'icon'">
@@ -448,7 +448,8 @@
             >
               <el-icon class="el-icon--upload"><upload-filled /></el-icon>
               <div class="el-upload__text">
-                将文件拖到此处，或<em>点击上传</em>
+                <span>将文件拖到此处，或</span>
+                <em>点击上传</em>
               </div>
               <template #tip>
                 <div class="el-upload__tip">
diff --git a/src/components/CURD/PageForm.vue b/src/components/CURD/PageForm.vue
index 524a6a4b..0979019e 100644
--- a/src/components/CURD/PageForm.vue
+++ b/src/components/CURD/PageForm.vue
@@ -149,7 +149,7 @@ prepareFuncs.forEach((func) => func());
 
 // 获取表单数据
 function getFormData(key?: string) {
-  return key === undefined ? formData : formData[key] ?? undefined;
+  return key === undefined ? formData : (formData[key] ?? undefined);
 }
 
 // 设置表单值
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index 37854c11..214b28e1 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -133,7 +133,7 @@
       <template #footer>
         <div>
           <el-button type="primary" @click="handleSubmit">确 定</el-button>
-          <el-button @click="handleCloseModal">取 消</el-button>
+          <el-button @click="handleClose">取 消</el-button>
         </div>
       </template>
     </el-drawer>
@@ -285,7 +285,7 @@
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
           <el-button type="primary" @click="handleSubmit">确 定</el-button>
-          <el-button @click="handleCloseModal">取 消</el-button>
+          <el-button @click="handleClose">取 消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -399,15 +399,19 @@ const handleSubmit = useThrottleFn(() => {
         }
         ElMessage.success(msg);
         emit("submitClick");
-        handleCloseModal();
+        handleClose();
       });
     }
   });
 }, 3000);
 
+// 隐藏弹窗
+function handleClose() {
+  modalVisible.value = false;
+}
+
 // 关闭弹窗
 function handleCloseModal() {
-  modalVisible.value = false;
   formRef.value?.resetFields();
   nextTick(() => {
     formRef.value?.clearValidate();
diff --git a/src/views/demo/curd/config/add.ts b/src/views/demo/curd/config/add.ts
index 38bcf59d..6a33ebce 100644
--- a/src/views/demo/curd/config/add.ts
+++ b/src/views/demo/curd/config/add.ts
@@ -1,6 +1,4 @@
-import DeptAPI from "@/api/dept";
-import RoleAPI from "@/api/role";
-import UserAPI, { UserForm } from "@/api/user";
+import UserAPI, { type UserForm } from "@/api/user";
 import type { IModalConfig } from "@/components/CURD/types";
 
 const modalConfig: IModalConfig<UserForm> = {
@@ -26,6 +24,10 @@ const modalConfig: IModalConfig<UserForm> = {
       attrs: {
         placeholder: "请输入用户名",
       },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
     },
     {
       label: "用户昵称",
@@ -35,6 +37,10 @@ const modalConfig: IModalConfig<UserForm> = {
       attrs: {
         placeholder: "请输入用户昵称",
       },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
     },
     {
       label: "所属部门",
@@ -48,14 +54,12 @@ const modalConfig: IModalConfig<UserForm> = {
         "check-strictly": true,
         "render-after-expand": false,
       },
-      async initFn(formItem) {
-        formItem.attrs.data = await DeptAPI.getOptions();
-      },
     },
     {
       type: "custom",
       label: "性别",
       prop: "gender",
+      initialValue: 1,
     },
     {
       label: "角色",
@@ -67,9 +71,7 @@ const modalConfig: IModalConfig<UserForm> = {
         multiple: true,
       },
       options: [],
-      async initFn(formItem) {
-        this.options = await RoleAPI.getOptions();
-      },
+      initialValue: [],
     },
     {
       type: "input",
@@ -103,29 +105,18 @@ const modalConfig: IModalConfig<UserForm> = {
         maxlength: 50,
       },
     },
-    // {
-    //   label: "状态",
-    //   prop: "status",
-    //   type: "radio",
-    //   options: [
-    //     { label: "正常", value: 1 },
-    //     { label: "禁用", value: 0 },
-    //   ],
-    //   initialValue: 1,
-    // },
     {
       label: "状态",
       prop: "status",
-      type: "switch",
-      attrs: {
-        activeText: "正常",
-        inactiveText: "禁用",
-        activeValue: 1,
-        inactiveValue: 0,
-      },
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
       initialValue: 1,
     },
   ],
 };
 
-export default modalConfig;
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);
diff --git a/src/views/demo/curd/config/edit.ts b/src/views/demo/curd/config/edit.ts
index bbcf2cb1..2a509644 100644
--- a/src/views/demo/curd/config/edit.ts
+++ b/src/views/demo/curd/config/edit.ts
@@ -1,7 +1,4 @@
-import DeptAPI from "@/api/dept";
-import RoleAPI from "@/api/role";
-import UserAPI from "@/api/user";
-import type { UserForm } from "@/api/user";
+import UserAPI, { type UserForm } from "@/api/user";
 import type { IModalConfig } from "@/components/CURD/types";
 import { DeviceEnum } from "@/enums/DeviceEnum";
 import { useAppStore } from "@/store";
@@ -11,7 +8,7 @@ const modalConfig: IModalConfig<UserForm> = {
   component: "drawer",
   drawer: {
     title: "修改用户",
-    size: useAppStore().device === DeviceEnum.MOBILE ? "90%" : 600,
+    size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
   },
   pk: "id",
   formAction: function (data) {
@@ -52,14 +49,12 @@ const modalConfig: IModalConfig<UserForm> = {
         "check-strictly": true,
         "render-after-expand": false,
       },
-      async initFn(formItem) {
-        formItem.attrs.data = await DeptAPI.getOptions();
-      },
     },
     {
       type: "custom",
       label: "性别",
       prop: "gender",
+      initialValue: 1,
     },
     {
       label: "角色",
@@ -71,9 +66,7 @@ const modalConfig: IModalConfig<UserForm> = {
         multiple: true,
       },
       options: [],
-      async initFn(formItem) {
-        this.options = await RoleAPI.getOptions();
-      },
+      initialValue: [],
     },
     {
       type: "input",
@@ -107,18 +100,8 @@ const modalConfig: IModalConfig<UserForm> = {
         maxlength: 50,
       },
     },
-    // {
-    //   label: "状态",
-    //   prop: "status",
-    //   type: "radio",
-    //   options: [
-    //     { label: "正常", value: 1 },
-    //     { label: "禁用", value: 0 },
-    //   ],
-    //   initialValue: 1,
-    // },
     {
-      label: "状态123",
+      label: "状态",
       prop: "status",
       type: "switch",
       attrs: {
@@ -131,4 +114,4 @@ const modalConfig: IModalConfig<UserForm> = {
   ],
 };
 
-export default modalConfig;
+export default reactive(modalConfig);
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index c4a146ad..e648cbc4 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -41,7 +41,7 @@
           </el-tag>
         </template>
         <template #mobile="scope">
-          <el-text> {{ scope.row[scope.prop] }} </el-text>
+          <el-text>{{ scope.row[scope.prop] }}</el-text>
           <copy-button
             v-if="scope.row[scope.prop]"
             :text="scope.row[scope.prop]"
@@ -90,6 +90,8 @@
 
 <script setup lang="ts">
 import UserAPI from "@/api/user";
+import DeptAPI from "@/api/dept";
+import RoleAPI from "@/api/role";
 import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./config/add";
@@ -105,18 +107,32 @@ const {
   editModalRef,
   handleQueryClick,
   handleResetClick,
-  handleAddClick,
+  // handleAddClick,
   // handleEditClick,
   handleSubmitClick,
   handleExportClick,
   handleSearchClick,
   handleFilterChange,
 } = usePage();
+
+// 新增
+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?.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?.setModalVisible(data);
+  editModalRef.value?.setFormData(data);
 }
 // 其他工具栏
 function handleToolbarClick(name: string) {