perf: 完善demo

mock/menu/index.ts

@@ -24,6 +24,7 @@ export default [
               name: 'Dashboard',
               status: Mock.Random.integer(0, 1),
               id: 1,
+              title: '首页',
               meta: {
                 title: '首页',
                 icon: 'ant-design:dashboard-filled',
@@ -36,6 +37,7 @@ export default [
                   name: 'Analysis',
                   status: Mock.Random.integer(0, 1),
                   id: 2,
+                  title: '分析页',
                   meta: {
                     title: '分析页',
                     noCache: true
@@ -47,6 +49,7 @@ export default [
                   name: 'Workplace',
                   status: Mock.Random.integer(0, 1),
                   id: 3,
+                  title: '工作台',
                   meta: {
                     title: '工作台',
                     noCache: true
@@ -57,6 +60,7 @@ export default [
             {
               path: '/external-link',
               component: '#',
+              title: '文档',
               meta: {
                 title: '文档',
                 icon: 'clarity:document-solid'
@@ -70,6 +74,7 @@ export default [
                   name: 'DocumentLink',
                   status: Mock.Random.integer(0, 1),
                   id: 5,
+                  title: '文档',
                   meta: {
                     title: '文档'
                   }
@@ -83,6 +88,7 @@ export default [
               name: 'Level',
               status: Mock.Random.integer(0, 1),
               id: 6,
+              title: '菜单',
               meta: {
                 title: '菜单',
                 icon: 'carbon:skill-level-advanced'
@@ -95,6 +101,7 @@ export default [
                   status: Mock.Random.integer(0, 1),
                   id: 7,
                   redirect: '/level/menu1/menu1-1/menu1-1-1',
+                  title: '菜单1',
                   meta: {
                     title: '菜单1'
                   },
@@ -106,6 +113,7 @@ export default [
                       status: Mock.Random.integer(0, 1),
                       id: 8,
                       redirect: '/level/menu1/menu1-1/menu1-1-1',
+                      title: '菜单1-1',
                       meta: {
                         title: '菜单1-1',
                         alwaysShow: true
@@ -118,6 +126,7 @@ export default [
                           status: Mock.Random.integer(0, 1),
                           id: 9,
                           permission: ['edit', 'add', 'delete'],
+                          title: '菜单1-1-1',
                           meta: {
                             title: '菜单1-1-1'
                           }
@@ -131,6 +140,7 @@ export default [
                       status: Mock.Random.integer(0, 1),
                       id: 10,
                       permission: ['edit', 'add', 'delete'],
+                      title: '菜单1-2',
                       meta: {
                         title: '菜单1-2'
                       }
@@ -144,6 +154,7 @@ export default [
                   status: Mock.Random.integer(0, 1),
                   id: 11,
                   permission: ['edit', 'add', 'delete'],
+                  title: '菜单2',
                   meta: {
                     title: '菜单2'
                   }
@@ -157,6 +168,7 @@ export default [
               name: 'Example',
               status: Mock.Random.integer(0, 1),
               id: 12,
+              title: '综合示例',
               meta: {
                 title: '综合示例',
                 icon: 'ep:management',
@@ -169,6 +181,7 @@ export default [
                   name: 'ExampleDialog',
                   status: Mock.Random.integer(0, 1),
                   id: 13,
+                  title: '综合示例-弹窗',
                   permission: ['edit', 'add', 'delete'],
                   meta: {
                     title: '综合示例-弹窗',
@@ -182,6 +195,7 @@ export default [
                   status: Mock.Random.integer(0, 1),
                   id: 14,
                   permission: ['edit', 'add', 'delete'],
+                  title: '综合示例-页面',
                   meta: {
                     title: '综合示例-页面',
                     permission: ['edit', 'add']
@@ -194,6 +208,7 @@ export default [
                   status: Mock.Random.integer(0, 1),
                   id: 15,
                   permission: ['edit', 'add', 'delete'],
+                  title: '综合示例-新增',
                   meta: {
                     title: '综合示例-新增',
                     noTagsView: true,
@@ -211,6 +226,7 @@ export default [
                   status: Mock.Random.integer(0, 1),
                   id: 16,
                   permission: ['edit', 'add', 'delete'],
+                  title: '综合示例-编辑',
                   meta: {
                     title: '综合示例-编辑',
                     noTagsView: true,
@@ -228,6 +244,7 @@ export default [
                   status: Mock.Random.integer(0, 1),
                   id: 17,
                   permission: ['edit', 'add', 'delete'],
+                  title: '综合示例-详情',
                   meta: {
                     title: '综合示例-详情',
                     noTagsView: true,

mock/role/index.ts

@@ -332,6 +332,15 @@ const adminList = [
         meta: {
           title: 'router.request'
         }
+      },
+      {
+        path: 'test',
+        component: () => 'views/Function/Test',
+        name: 'Test',
+        meta: {
+          title: 'router.permission',
+          permission: ['add', 'edit', 'delete']
+        }
       }
     ]
   },
@@ -602,14 +611,6 @@ const adminList = [
         meta: {
           title: 'router.role'
         }
-      },
-      {
-        path: 'test',
-        component: 'views/Authorization/Test/Test',
-        name: 'Test',
-        meta: {
-          title: 'router.permission'
-        }
       }
     ]
   }
@@ -654,6 +655,7 @@ const testList: string[] = [
   '/function/multiple-tabs',
   '/function/multiple-tabs-demo/:id',
   '/function/request',
+  '/function/test',
   '/hooks',
   '/hooks/useWatermark',
   '/hooks/useTagsView',
@@ -678,7 +680,6 @@ const testList: string[] = [
   '/authorization/user',
   '/authorization/role',
   '/authorization/menu',
-  '/authorization/test',
   '/error',
   '/error/404-demo',
   '/error/403-demo',

src/components/Descriptions/src/Descriptions.vue

@@ -159,6 +159,12 @@ export default defineComponent({
 }
 
 :deep(.@{prefix-cls}-label) {
-  width: 150px;
+  width: 150px !important;
 }
+
+// .@{prefix-cls}-content {
+//   :deep(.@{elNamespace}-descriptions__cell) {
+//     width: 0;
+//   }
+// }
 </style>

src/hooks/web/useForm.ts

@@ -2,6 +2,7 @@ import type { Form, FormExpose } from '@/components/Form'
 import type { ElForm, ElFormItem } from 'element-plus'
 import { ref, unref, nextTick } from 'vue'
 import { FormSchema, FormSetProps, FormProps } from '@/components/Form'
+import { isEmptyVal, isObject } from '@/utils/is'
 
 export const useForm = () => {
   // From实例
@@ -83,9 +84,27 @@ export const useForm = () => {
      * @description 获取表单数据
      * @returns form data
      */
-    getFormData: async <T = Recordable>(): Promise<T> => {
+    getFormData: async <T = Recordable>(filterEmptyVal = true): Promise<T> => {
       const form = await getForm()
-      return form?.formModel as T
+      const model = form?.formModel as any
+      if (filterEmptyVal) {
+        // 使用reduce过滤空值，并返回一个新对象
+        return Object.keys(model).reduce((prev, next) => {
+          const value = model[next]
+          if (!isEmptyVal(value)) {
+            if (isObject(value)) {
+              if (Object.keys(value).length > 0) {
+                prev[next] = value
+              }
+            } else {
+              prev[next] = value
+            }
+          }
+          return prev
+        }, {}) as T
+      } else {
+        return model as T
+      }
     },
 
     /**

src/router/index.ts

@@ -374,6 +374,15 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.request')
         }
+      },
+      {
+        path: 'test',
+        component: () => import('@/views/Function/Test.vue'),
+        name: 'Test',
+        meta: {
+          title: t('router.permission'),
+          permission: ['add', 'edit', 'delete']
+        }
       }
     ]
   },
@@ -644,15 +653,6 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.role')
         }
-      },
-      {
-        path: 'test',
-        component: () => import('@/views/Authorization/Test/Test.vue'),
-        name: 'Test',
-        meta: {
-          title: t('router.permission'),
-          permission: ['add', 'edit', 'delete']
-        }
       }
     ]
   }

src/views/Authorization/Menu/Menu.vue

@@ -10,6 +10,7 @@ import { Search } from '@/components/Search'
 import { FormSchema } from '@/components/Form'
 import { ContentWrap } from '@/components/ContentWrap'
 import Write from './components/Write.vue'
+import Detail from './components/Detail.vue'
 import { Dialog } from '@/components/Dialog'
 
 const { t } = useI18n()
@@ -54,16 +55,16 @@ const tableColumns = reactive<TableColumn[]>([
       }
     }
   },
-  {
-    field: 'meta.permission',
-    label: t('menu.permission'),
-    slots: {
-      default: (data: any) => {
-        const permission = data.row.meta.permission
-        return permission ? <>{permission.join(', ')}</> : null
-      }
-    }
-  },
+  // {
+  //   field: 'meta.permission',
+  //   label: t('menu.permission'),
+  //   slots: {
+  //     default: (data: any) => {
+  //       const permission = data.row.meta.permission
+  //       return permission ? <>{permission.join(', ')}</> : null
+  //     }
+  //   }
+  // },
   {
     field: 'component',
     label: t('menu.component'),
@@ -105,6 +106,9 @@ const tableColumns = reactive<TableColumn[]>([
             <ElButton type="primary" onClick={() => action(row, 'edit')}>
               {t('exampleDemo.edit')}
             </ElButton>
+            <ElButton type="success" onClick={() => action(row, 'detail')}>
+              {t('exampleDemo.detail')}
+            </ElButton>
             <ElButton type="danger">{t('exampleDemo.del')}</ElButton>
           </>
         )
@@ -154,6 +158,7 @@ const AddAction = () => {
 const save = async () => {
   const write = unref(writeRef)
   const formData = await write?.submit()
+  console.log(formData)
   if (formData) {
     saveLoading.value = true
     setTimeout(() => {
@@ -183,6 +188,8 @@ const save = async () => {
   <Dialog v-model="dialogVisible" :title="dialogTitle">
     <Write v-if="actionType !== 'detail'" ref="writeRef" :current-row="currentRow" />
 
+    <Detail v-if="actionType === 'detail'" :current-row="currentRow" />
+
     <template #footer>
       <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
         {{ t('exampleDemo.save') }}

src/views/Authorization/Menu/components/Detail.vue

@@ -0,0 +1,155 @@
+<script setup lang="tsx">
+import { PropType, ref } from 'vue'
+import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
+import { Icon } from '@/components/Icon'
+import { ElTag } from 'element-plus'
+
+defineProps({
+  currentRow: {
+    type: Object as PropType<any>,
+    default: () => undefined
+  }
+})
+
+const renderTag = (enable?: boolean) => {
+  return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
+}
+
+const detailSchema = ref<DescriptionsSchema[]>([
+  {
+    field: 'type',
+    label: '菜单类型',
+    span: 24,
+    slots: {
+      default: (data) => {
+        const type = data.type
+        return <>{type === 1 ? '菜单' : '目录'}</>
+      }
+    }
+  },
+  {
+    field: 'parentName',
+    label: '父级菜单'
+  },
+  {
+    field: 'meta.title',
+    label: '菜单名称'
+  },
+  {
+    field: 'component',
+    label: '组件',
+    slots: {
+      default: (data) => {
+        const component = data.component
+        return <>{component === '#' ? '顶级目录' : component === '##' ? '子目录' : component}</>
+      }
+    }
+  },
+  {
+    field: 'name',
+    label: '组件名称'
+  },
+  {
+    field: 'meta.icon',
+    label: '图标',
+    slots: {
+      default: (data) => {
+        const icon = data.icon
+        if (icon) {
+          return (
+            <>
+              <Icon icon={icon} />
+            </>
+          )
+        } else {
+          return null
+        }
+      }
+    }
+  },
+  {
+    field: 'path',
+    label: '路径'
+  },
+  {
+    field: 'meta.activeMenu',
+    label: '高亮菜单'
+  },
+  {
+    field: 'menuState',
+    label: '菜单状态',
+    slots: {
+      default: (data) => {
+        return renderTag(data.menuState)
+      }
+    }
+  },
+  {
+    field: 'meta.hidden',
+    label: '是否隐藏',
+    slots: {
+      default: (data) => {
+        return renderTag(data.enableHidden)
+      }
+    }
+  },
+  {
+    field: 'meta.alwaysShow',
+    label: '是否一直显示',
+    slots: {
+      default: (data) => {
+        return renderTag(data.enableDisplay)
+      }
+    }
+  },
+  {
+    field: 'meta.noCache',
+    label: '是否清除缓存',
+    slots: {
+      default: (data) => {
+        return renderTag(data.enableCleanCache)
+      }
+    }
+  },
+  {
+    field: 'meta.breadcrumb',
+    label: '是否显示面包屑',
+    slots: {
+      default: (data) => {
+        return renderTag(data.enableShowCrumb)
+      }
+    }
+  },
+  {
+    field: 'meta.affix',
+    label: '是否固定标签页',
+    slots: {
+      default: (data) => {
+        return renderTag(data.enablePinnedTab)
+      }
+    }
+  },
+  {
+    field: 'meta.noTagsView',
+    label: '是否隐藏标签页',
+    slots: {
+      default: (data) => {
+        return renderTag(data.enableHiddenTab)
+      }
+    }
+  },
+  {
+    field: 'meta.canTo',
+    label: '是否可跳转',
+    slots: {
+      default: (data) => {
+        return renderTag(data.enableSkip)
+      }
+    }
+  }
+])
+</script>
+
+<template>
+  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
+</template>

src/views/Authorization/Menu/components/Write.vue

@@ -1,9 +1,11 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { Form, FormSchema } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
 import { PropType, reactive, watch } from 'vue'
 import { useValidator } from '@/hooks/web/useValidator'
 import { useI18n } from '@/hooks/web/useI18n'
+import { getMenuListApi } from '@/api/menu'
+import { ElTag, ElButton } from 'element-plus'
 
 const { t } = useI18n()
 
@@ -17,6 +19,102 @@ const props = defineProps({
 })
 
 const formSchema = reactive<FormSchema[]>([
+  {
+    field: 'type',
+    label: '菜单类型',
+    component: 'RadioButton',
+    value: 0,
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      options: [
+        {
+          label: '目录',
+          value: 0
+        },
+        {
+          label: '菜单',
+          value: 1
+        }
+      ],
+      on: {
+        change: async (val: number) => {
+          const formData = await getFormData()
+          if (val === 1) {
+            setSchema([
+              {
+                field: 'component',
+                path: 'componentProps.disabled',
+                value: false
+              }
+            ])
+            setValues({
+              component: ''
+            })
+          } else {
+            setSchema([
+              {
+                field: 'component',
+                path: 'componentProps.disabled',
+                value: true
+              }
+            ])
+
+            if (formData.parentId === void 0) {
+              setValues({
+                component: '#'
+              })
+            } else {
+              setValues({
+                component: '##'
+              })
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    field: 'parentId',
+    label: '父级菜单',
+    component: 'TreeSelect',
+    componentProps: {
+      nodeKey: 'id',
+      props: {
+        label: 'title',
+        value: 'id',
+        children: 'children'
+      },
+      highlightCurrent: true,
+      expandOnClickNode: false,
+      checkStrictly: true,
+      checkOnClickNode: true,
+      clearable: true,
+      on: {
+        change: async (val: number) => {
+          const formData = await getFormData()
+          if (val && formData.type === 0) {
+            setValues({
+              component: '##'
+            })
+          } else if (!val && formData.type === 0) {
+            setValues({
+              component: '#'
+            })
+          } else if (formData.type === 1) {
+            setValues({
+              component: ''
+            })
+          }
+        }
+      }
+    },
+    optionApi: async () => {
+      const res = await getMenuListApi()
+      return res.data.list || []
+    }
+  },
   {
     field: 'meta.title',
     label: t('menu.menuName'),
@@ -24,8 +122,13 @@ const formSchema = reactive<FormSchema[]>([
   },
   {
     field: 'component',
-    label: t('menu.component'),
-    component: 'Input'
+    label: '组件',
+    component: 'Input',
+    value: '#',
+    componentProps: {
+      disabled: true,
+      placeholder: '#为顶级目录，##为子目录'
+    }
   },
   {
     field: 'name',
@@ -42,6 +145,11 @@ const formSchema = reactive<FormSchema[]>([
     label: t('menu.path'),
     component: 'Input'
   },
+  {
+    field: 'meta.activeMenu',
+    label: t('menu.activeMenu'),
+    component: 'Input'
+  },
   {
     field: 'status',
     label: t('menu.status'),
@@ -60,29 +168,31 @@ const formSchema = reactive<FormSchema[]>([
     }
   },
   {
-    field: 'meta.activeMenu',
-    label: t('menu.activeMenu'),
-    component: 'Input'
-  },
-  {
-    field: 'permission',
+    field: 'permissionList',
     label: t('menu.permission'),
     component: 'CheckboxGroup',
-    componentProps: {
-      options: [
-        {
-          label: 'add',
-          value: 'add'
-        },
-        {
-          label: 'edit',
-          value: 'edit'
-        },
-        {
-          label: 'delete',
-          value: 'delete'
-        }
-      ]
+    colProps: {
+      span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => (
+          <>
+            <ElTag class="mx-1" closable disableTransitions={false}>
+              新增
+            </ElTag>
+            <ElTag class="mx-1" closable disableTransitions={false}>
+              编辑
+            </ElTag>
+            <ElTag class="mx-1" closable disableTransitions={false}>
+              删除
+            </ElTag>
+            <ElButton type="primary" size="small" onClick={() => console.log('添加权限')}>
+              添加权限
+            </ElButton>
+          </>
+        )
+      }
     }
   },
   {
@@ -116,7 +226,7 @@ const formSchema = reactive<FormSchema[]>([
     component: 'Switch'
   },
   {
-    field: 'canTo',
+    field: 'meta.canTo',
     label: t('menu.canTo'),
     component: 'Switch'
   }
@@ -129,7 +239,7 @@ const rules = reactive({
 })
 
 const { formRegister, formMethods } = useForm()
-const { setValues, getFormData, getElFormExpose } = formMethods
+const { setValues, getFormData, getElFormExpose, setSchema } = formMethods
 
 const submit = async () => {
   const elForm = await getElFormExpose()

src/views/Authorization/Role/components/Write.vue

@@ -68,6 +68,7 @@ const formSchema = ref<FormSchema[]>([
                     show-checkbox
                     node-key="id"
                     highlight-current
+                    check-strictly
                     expand-on-click-node={false}
                     data={treeData.value}
                     onNode-click={nodeClick}
@@ -153,10 +154,7 @@ const submit = async () => {
   })
   if (valid) {
     const formData = await getFormData()
-    const checkedKeys = [
-      ...(unref(treeRef)?.getCheckedKeys() || []),
-      ...(unref(treeRef)?.getHalfCheckedKeys() || [])
-    ]
+    const checkedKeys = unref(treeRef)?.getCheckedKeys() || []
     const data = filter(unref(treeData), (item: any) => {
       return checkedKeys.includes(item.id)
     })

src/views/Authorization/User/User.vue

@@ -81,11 +81,12 @@ const crudSchemas = reactive<CrudSchema[]>([
     field: 'department.id',
     label: t('userDemo.department'),
     detail: {
-      slots: {
-        default: (data: DepartmentUserItem) => {
-          return <>{data.department.departmentName}</>
-        }
-      }
+      hidden: true
+      // slots: {
+      //   default: (data: DepartmentUserItem) => {
+      //     return <>{data.department.departmentName}</>
+      //   }
+      // }
     },
     search: {
       hidden: true
@@ -104,7 +105,7 @@ const crudSchemas = reactive<CrudSchema[]>([
       }
     },
     table: {
-      type: 'index'
+      hidden: true
     }
   },
   {
@@ -202,7 +203,7 @@ watch(
 )
 
 const currentChange = (data: DepartmentItem) => {
-  if (data.children) return
+  // if (data.children) return
   currentNodeKey.value = data.id
   currentPage.value = 1
   getList()
@@ -290,6 +291,7 @@ const save = async () => {
         ref="treeEl"
         :data="departmentList"
         default-expand-all
+        :expand-on-click-node="false"
         node-key="id"
         :current-node-key="currentNodeKey"
         :props="{