!214 增加部门和菜单的详情，解决个人中心无法上传图片的问题

Merge pull request !214 from clockdotnet/master-vxe

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>

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
+  }
+}

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'),

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) {

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

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>