From 239781788ee51f37d37502664e9058413e2d9e1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=B0=91=E7=BF=94?= <971366405@qq.com>
Date: Wed, 27 Nov 2024 17:46:00 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20:sparkles:=20=E5=A2=9E=E5=88=A0?=
 =?UTF-8?q?=E6=94=B9=E6=9F=A5=E6=BC=94=E7=A4=BA=E5=A2=9E=E5=8A=A0=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

增删改查演示增加详情功能
---
 src/components/CURD/PageModal.vue     | 22 ++++++++++++++++++++--
 src/views/demo/curd/config/content.ts | 17 +++++++++++++++--
 src/views/demo/curd/index.vue         | 23 +++++++++++++++++++++--
 3 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index da5a2daf..87465d69 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -101,10 +101,13 @@
       </el-form>
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
-        <div>
+        <div v-if="!formDisable">
           <el-button type="primary" @click="handleSubmit">确 定</el-button>
           <el-button @click="handleClose">取 消</el-button>
         </div>
+        <div v-else>
+          <el-button @click="handleClose">关闭</el-button>
+        </div>
       </template>
     </el-drawer>
   </template>
@@ -247,6 +250,7 @@ const formRef = ref<FormInstance>();
 const formItems = reactive(props.modalConfig.formItems);
 const formData = reactive<IObject>({});
 const formRules: FormRules = {};
+const formDisable = ref(false);
 const prepareFuncs = [];
 for (const item of formItems) {
   item.initFn && item.initFn(item);
@@ -352,8 +356,22 @@ function handleCloseModal() {
   });
 }
 
+// 禁用表单--用于详情时候用
+function handleDisabled(disable: boolean) {
+  formDisable.value = disable;
+  props.modalConfig.formItems.forEach((item) => {
+    if (item) {
+      if (item.attrs) {
+        item.attrs.disabled = disable;
+      } else {
+        item.attrs = { disabled: disable };
+      }
+    }
+  });
+}
+
 // 暴露的属性和方法
-defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData });
+defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled });
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
index 3cb11ea8..e9fc2e18 100644
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -56,7 +56,14 @@ const contentConfig: IContentConfig<UserPageQuery> = {
     { label: "用户名", align: "center", prop: "username" },
     { label: "头像", align: "center", prop: "avatar", templet: "image" },
     { label: "用户昵称", align: "center", prop: "nickname", width: 120 },
-    { label: "性别", align: "center", prop: "genderLabel", width: 100 },
+    {
+      label: "性别",
+      align: "center",
+      prop: "gender",
+      width: 100,
+      templet: "custom",
+      slotName: "gender",
+    },
     { label: "部门", align: "center", prop: "deptName", width: 120 },
     {
       label: "角色",
@@ -94,9 +101,15 @@ const contentConfig: IContentConfig<UserPageQuery> = {
       label: "操作",
       align: "center",
       fixed: "right",
-      width: 220,
+      width: 280,
       templet: "tool",
       operat: [
+        {
+          auth: "password:reset",
+          icon: "Document",
+          name: "detail",
+          text: "详情",
+        },
         {
           name: "reset_pwd",
           auth: "password:reset",
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index 495ae850..d1499d9d 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -38,6 +38,9 @@
             {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
           </el-tag>
         </template>
+        <template #gender="scope">
+          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+        </template>
         <template #mobile="scope">
           <el-text>{{ scope.row[scope.prop] }}</el-text>
           <copy-button
@@ -66,7 +69,7 @@
         @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>
       </page-modal>
     </template>
@@ -123,6 +126,7 @@ async function handleAddClick() {
 }
 // 编辑
 async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
   editModalRef.value?.setModalVisible();
   // 加载部门下拉数据源
   editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
@@ -140,7 +144,7 @@ function handleToolbarClick(name: string) {
   }
 }
 // 其他操作列
-function handleOperatClick(data: IOperatData) {
+async function handleOperatClick(data: IOperatData) {
   console.log(data);
   // 重置密码
   if (data.name === "reset_pwd") {
@@ -156,6 +160,21 @@ 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);
   }
 }
 

From 64a6adad96cbb9686c451ee7485a3dd30aa15d47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=B0=91=E7=BF=94?= <971366405@qq.com>
Date: Wed, 27 Nov 2024 17:53:51 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20:recycle:=20cURD=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=A2=9D=E5=A4=96=E7=9A=84=E6=93=8D=E4=BD=9C=E5=88=97?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E4=B8=8D=E9=9C=80=E8=A6=81auth=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CURD组件额外的操作列可以不需要auth属性
---
 src/components/CURD/PageContent.vue   | 4 +++-
 src/components/CURD/types.ts          | 2 +-
 src/views/demo/curd/config/content.ts | 1 -
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 5e420119..e8a408f7 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -284,7 +284,9 @@
                 <template v-else-if="typeof item === 'object'">
                   <el-button
                     v-if="item.render === undefined || item.render(scope.row)"
-                    v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+                    v-bind="
+                      item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
+                    "
                     :icon="item.icon"
                     :type="item.type ?? 'primary'"
                     size="small"
diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts
index 1e2a25cc..7ed66edb 100644
--- a/src/components/CURD/types.ts
+++ b/src/components/CURD/types.ts
@@ -174,7 +174,7 @@ export interface IContentConfig<T = any> {
       | "edit"
       | "delete"
       | {
-          auth: string;
+          auth?: string;
           icon?: string;
           name: string;
           text: string;
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
index e9fc2e18..c1c2f908 100644
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -105,7 +105,6 @@ const contentConfig: IContentConfig<UserPageQuery> = {
       templet: "tool",
       operat: [
         {
-          auth: "password:reset",
           icon: "Document",
           name: "detail",
           text: "详情",