Merge branch 'master' of https://gitee.com/youlaiorg/vue3-element-admin

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"

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>

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;

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,14 @@ const contentConfig: IContentConfig<UserPageQuery> = {
       label: "操作",
       align: "center",
       fixed: "right",
-      width: 220,
+      width: 280,
       templet: "tool",
       operat: [
+        {
+          icon: "Document",
+          name: "detail",
+          text: "详情",
+        },
         {
           name: "reset_pwd",
           auth: "password:reset",

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);
   }
 }