From b376e8e2a8a38e39547ba1f37c6e121b21d473c3 Mon Sep 17 00:00:00 2001
From: shizhong <124974919@qq.com>
Date: Tue, 22 Aug 2023 17:33:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=83=A8=E9=97=A8=E5=92=8C?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=9A=84=E8=AF=A6=E6=83=85=EF=BC=8C=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cropper/src/CropperAvatar.vue |  2 +-
 src/utils/index.ts                           | 44 +++++++++++++++++++
 src/views/system/dept/dept.data.ts           |  2 +-
 src/views/system/dept/index.vue              | 45 +++++++++++++++++++-
 src/views/system/menu/index.vue              | 31 ++++++++++++++
 src/views/system/user/index.vue              |  7 ++-
 6 files changed, 126 insertions(+), 5 deletions(-)

diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 179e0ec9..7517e5b9 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user-info-head" @click="open()">
-    <img v-if="sourceValue" :src="sourceValue" alt="avatar" class="img-circle img-lg" />
+    <img :src="sourceValue" class="img-circle img-lg" />
     <el-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" @click="open()">
       {{ btnText ? btnText : t('cropper.selectImage') }}
     </el-button>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3d596a36..7ed408d6 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -209,3 +209,47 @@ export const yuanToFen = (amount: string | number): number => {
 export const fenToYuan = (amount: string | number): number => {
   return Number((Number(amount) / 100).toFixed(2))
 }
+
+export const treeFormatter = (ary: any, val: string, valueField = 'value', nameField = 'label') => {
+  let o = ''
+  if (ary != null) {
+    for (const v of ary) {
+      if (v[valueField] == val) {
+        o = v[nameField]
+        if (o) return o
+      } else if (v.children?.length) {
+        o = treeFormatter(v.children, val, valueField, nameField)
+        if (o) return o
+      }
+    }
+    return o
+  } else {
+    return val
+  }
+}
+
+/**
+ *
+ * @param ary 数组
+ * @param val 参数值
+ * @param name 对比字段
+ * @param returnVal 输出字段
+ * @returns
+ */
+export const commonFormatter = (ary: any, val: string, name: string, returnVal: string) => {
+  let o = ''
+  if (ary && val) {
+    for (const v of ary) {
+      if (v[name] == val) {
+        o = v[returnVal]
+        if (o) return o
+      } else if (v.children?.length) {
+        o = commonFormatter(v.children, val, name, returnVal)
+        if (o) return o
+      }
+    }
+    return o
+  } else {
+    return val
+  }
+}
diff --git a/src/views/system/dept/dept.data.ts b/src/views/system/dept/dept.data.ts
index a80d531b..6ae707a0 100644
--- a/src/views/system/dept/dept.data.ts
+++ b/src/views/system/dept/dept.data.ts
@@ -9,7 +9,7 @@ export const rules = reactive({
   status: [required],
   // email: [required],
   email: [
-    { required: true, message: t('profile.rules.mail'), trigger: 'blur' },
+    { message: t('profile.rules.mail'), trigger: 'blur' },
     {
       type: 'email',
       message: t('profile.rules.truemail'),
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index c97085b3..476027ec 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -25,6 +25,8 @@
           v-hasPermi="['system:dept:update']"
           @click="handleUpdate(row.id)"
         />
+        <!-- 操作：详情 -->
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row.id)" />
         <!-- 操作：删除 -->
         <XTextButton
           preIcon="ep:delete"
@@ -38,7 +40,12 @@
   <!-- 添加或修改菜单对话框 -->
   <XModal id="deptModel" v-model="dialogVisible" :title="dialogTitle">
     <!-- 对话框(添加 / 修改) -->
-    <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules">
+    <Form
+      v-if="['create', 'update'].includes(actionType)"
+      ref="formRef"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+    >
       <template #parentId="form">
         <el-tree-select
           node-key="id"
@@ -60,6 +67,26 @@
         </el-select>
       </template>
     </Form>
+    <!-- 对话框(详情) -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailData"
+      ref="formRefDetail"
+    >
+      <template #parentId="{ row }">
+        <el-tag>
+          {{ dataFormatter(row.parentId) }}
+        </el-tag>
+      </template>
+      <template #leaderUserId="{ row }">
+        <template v-if="row.leaderUserId !== null">
+          <el-tag>
+            {{ userNicknameFormat(row) }}
+          </el-tag>
+        </template>
+      </template>
+    </Descriptions>
     <template #footer>
       <!-- 按钮：保存 -->
       <XButton
@@ -80,6 +107,7 @@ import type { FormExpose } from '@/components/Form'
 import { allSchemas, rules } from './dept.data'
 import * as DeptApi from '@/api/system/dept'
 import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
+import { treeFormatter } from '@/utils'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -113,6 +141,11 @@ const getTree = async () => {
   dept.children = handleTree(res)
   deptOptions.value.push(dept)
 }
+
+const dataFormatter = (val) => {
+  return treeFormatter(deptOptions.value, val, 'id', 'name')
+}
+
 const [registerTable, { reload, deleteData }] = useXTable({
   allSchemas: allSchemas,
   treeConfig: treeConfig,
@@ -142,6 +175,14 @@ const handleUpdate = async (rowId: number) => {
   unref(formRef)?.setValues(res)
 }
 
+const detailData = ref()
+const handleDetail = async (rowId: number) => {
+  setDialogTile('detail')
+  // 设置数据
+  const res = await DeptApi.getDeptApi(rowId)
+  detailData.value = res
+}
+
 // 提交新增/修改的表单
 const submitForm = async () => {
   const elForm = unref(formRef)?.getElFormRef()
@@ -171,7 +212,7 @@ const submitForm = async () => {
 
 const userNicknameFormat = (row) => {
   if (!row || !row.leaderUserId) {
-    return '未设置'
+    return ''
   }
   for (const user of userOption.value) {
     if (row.leaderUserId === user.id) {
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 278586a7..b68c6ca7 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -27,6 +27,8 @@
           v-hasPermi="['system:menu:update']"
           @click="handleUpdate(row.id)"
         />
+        <!-- 操作：详情 -->
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row.id)" />
         <!-- 操作：删除 -->
         <XTextButton
           preIcon="ep:delete"
@@ -46,6 +48,7 @@
       :rules="rules"
       label-width="100px"
       label-position="right"
+      v-if="['create', 'update'].includes(actionType)"
     >
       <el-form-item label="上级菜单">
         <el-tree-select
@@ -186,6 +189,21 @@
         </el-col>
       </template>
     </el-form>
+    <!-- 对话框(详情) -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailData"
+    >
+      <template #parentId="{ row }">
+        <template v-if="row.parentId !== ''">
+          <el-tag>
+            {{ dataFormatter(row.parentId) }}
+          </el-tag>
+        </template>
+        <template v-else> </template>
+      </template>
+    </Descriptions>
     <template #footer>
       <!-- 按钮：保存 -->
       <XButton
@@ -209,6 +227,7 @@ import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
 import { handleTree, defaultProps } from '@/utils/tree'
 import * as MenuApi from '@/api/system/menu'
 import { allSchemas, rules } from './menu.data'
+import { treeFormatter } from '@/utils'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -265,6 +284,10 @@ const getTree = async () => {
   menuOptions.value.push(menu)
 }
 
+const dataFormatter = (val) => {
+  return treeFormatter(menuOptions.value, val, 'id', 'name')
+}
+
 // ========== 新增/修改 ==========
 
 // 设置标题
@@ -310,6 +333,14 @@ const handleUpdate = async (rowId: number) => {
   menuForm.value.alwaysShow = res.alwaysShow !== undefined ? res.alwaysShow : true
 }
 
+let detailData = ref()
+const handleDetail = async (rowId: number) => {
+  await setDialogTile('detail')
+  // 设置数据
+  const res = await MenuApi.getMenuApi(rowId)
+  detailData.value = res
+}
+
 // 提交新增/修改的表单
 const submitForm = async () => {
   actionLoading.value = true
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index e5f7b483..37a1808c 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -163,7 +163,12 @@
       </template>
       <template #postIds="{ row }">
         <template v-if="row.postIds !== ''">
-          <el-tag v-for="(post, index) in row.postIds" :key="index" index="">
+          <el-tag
+            v-for="(post, index) in row.postIds"
+            :key="index"
+            index=""
+            :style="index !== row.postIds.length - 1 ? 'margin-right: 5px' : ''"
+          >
             <template v-for="postObj in postOptions">
               {{ post === postObj.id ? postObj.name : '' }}
             </template>