路由系统调整

src/api/menu/omsIndex.ts

@@ -0,0 +1,17 @@
+import request from '@/config/axios'
+
+export const getMenuListApi = () => {
+  return request.get({ url: '/oms/menu/tree' })
+}
+
+export const saveMenu = (data: any) => {
+  return request.post({ url: '/oms/menu/save', data })
+}
+
+export const deleteMenu = (data: any) => {
+  return request.post({ url: '/oms/menu/delete', data })
+}
+
+export const updateMenu = (data: any) => {
+  return request.post({ url: '/oms/menu/update', data })
+}

src/api/region/index.ts

@@ -0,0 +1,24 @@
+import request from '@/config/axios'
+
+export const getListApi = (params: any) => {
+  return request.get({ url: '/sys/region/list', params })
+}
+
+export const getInfoApi = (params: any) => {
+  return request.get({ url: `/sys/region/info/${params.id}`, params })
+}
+
+export const saveApi = (data: any) => {
+  return request.post({ url: `/sys/region/save`, data })
+}
+
+export const updateApi = (data: any) => {
+  return request.post({ url: `/sys/region/update`, data })
+}
+
+export const deleteApi = (data: any) => {
+  return request.post({ url: `/sys/region/delete`, data })
+}
+export const getRegionTree = () => {
+  return request.get({ url: `/common/region/all` })
+}

src/components/Menu/src/components/useRenderMenuItem.tsx

@@ -12,44 +12,47 @@ export const useRenderMenuItem = (
   menuMode: 'vertical' | 'horizontal'
 ) => {
   const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
-    return routers.map((v) => {
-      const meta = v.meta ?? {}
-      if (!meta.hidden) {
-        const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
-        const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
+    return routers
+      ? routers.map((v) => {
+          const meta = v.meta ?? {}
+          if (!meta.hidden) {
+            const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
+            const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
+            if (
+              oneShowingChild &&
+              (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
+              !meta?.alwaysShow
+            ) {
+              return (
+                <ElMenuItem
+                  index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
+                >
+                  {{
+                    default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+                  }}
+                </ElMenuItem>
+              )
+            } else {
+              const { getPrefixCls } = useDesign()
 
-        if (
-          oneShowingChild &&
-          (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
-          !meta?.alwaysShow
-        ) {
-          return (
-            <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
-              {{
-                default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
-              }}
-            </ElMenuItem>
-          )
-        } else {
-          const { getPrefixCls } = useDesign()
-
-          const preFixCls = getPrefixCls('menu-popper')
-          return (
-            <ElSubMenu
-              index={fullPath}
-              popperClass={
-                menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
-              }
-            >
-              {{
-                title: () => renderMenuTitle(meta),
-                default: () => renderMenuItem(v.children!, fullPath)
-              }}
-            </ElSubMenu>
-          )
-        }
-      }
-    })
+              const preFixCls = getPrefixCls('menu-popper')
+              return (
+                <ElSubMenu
+                  index={fullPath}
+                  popperClass={
+                    menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
+                  }
+                >
+                  {{
+                    title: () => renderMenuTitle(meta),
+                    default: () => renderMenuItem(v.children!, fullPath)
+                  }}
+                </ElSubMenu>
+              )
+            }
+          }
+        })
+      : ''
   }
 
   return {

src/components/Menu/src/helper.ts

@@ -18,17 +18,19 @@ export const hasOneShowingChild = (
   parent: AppRouteRecordRaw
 ): HasOneShowingChild => {
   const onlyOneChild = ref<OnlyOneChildType>()
-
-  const showingChildren = children.filter((v) => {
-    const meta = v.meta ?? {}
-    if (meta.hidden) {
-      return false
-    } else {
-      // Temp set(will be used if only has one showing child)
-      onlyOneChild.value = v
-      return true
-    }
-  })
+  const showingChildren =
+    children && children !== null
+      ? children.filter((v) => {
+          const meta = { ...v.meta, hidden: false } ?? {}
+          if (meta.hidden) {
+            return false
+          } else {
+            // Temp set(will be used if only has one showing child)
+            onlyOneChild.value = v
+            return true
+          }
+        })
+      : []
 
   // When there is only one child router, the child router is displayed by default
   if (showingChildren.length === 1) {

src/router/index.ts

@@ -594,6 +594,27 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/organizational',
+    component: Layout,
+    redirect: '/organizational/menu',
+    name: 'Organizational',
+    meta: {
+      title: '机构管理',
+      icon: 'eos-icons:role-binding',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'menu',
+        component: () => import('@/views/Organizational/Menu/Menu.vue'),
+        name: 'OmsMenu',
+        meta: {
+          title: '机构菜单管理'
+        }
+      }
+    ]
+  },
   {
     path: '/authorization',
     component: Layout,
@@ -653,6 +674,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
           title: t('router.role')
         }
       },
+      {
+        path: 'region',
+        component: () => import('@/views/Authorization/Region/Region.vue'),
+        name: 'Region',
+        meta: {
+          title: '区域规划'
+        }
+      },
       {
         path: 'config',
         component: () => import('@/views/Authorization/Config/Config.vue'),

src/store/modules/app.ts

@@ -58,7 +58,7 @@ export const useAppStore = defineStore('app', {
       footer: true, // 显示页脚
       greyMode: false, // 是否开始灰色模式，用于特殊悼念日
       dynamicRouter: true, // 是否动态路由getStorage('dynamicRouter')
-      serverDynamicRouter: false, // 是否服务端渲染动态路由getStorage('serverDynamicRouter')
+      serverDynamicRouter: true, // 是否服务端渲染动态路由getStorage('serverDynamicRouter')
       fixedMenu: getStorage('fixedMenu'), // 是否固定菜单
 
       layout: getStorage('layout') || 'classic', // layout布局

src/utils/routerHelper.ts

@@ -99,7 +99,7 @@ export const generateRoutesByServer = (routes: AppCustomRouteRecordRaw[]): AppRo
 
   for (const route of routes) {
     const data: AppRouteRecordRaw = {
-      path: route.path,
+      path: route.url,
       name: route.name,
       redirect: route.redirect,
       meta: route.meta
@@ -116,7 +116,7 @@ export const generateRoutesByServer = (routes: AppCustomRouteRecordRaw[]): AppRo
       }
     }
     // recursive child routes
-    if (route.children) {
+    if (route.children && route.children !== null) {
       data.children = generateRoutesByServer(route.children)
     }
     res.push(data as AppRouteRecordRaw)

src/views/Authorization/Institution/Institution.vue

@@ -21,10 +21,11 @@ const { t } = useI18n()
 
 const { tableRegister, tableState, tableMethods } = useTable({
   fetchDataApi: async () => {
+    const { currentPage, pageSize } = tableState
     const res = await getDepartmentTableApi({
       ...searchParams.value,
-      limit: 100,
-      page: 1,
+      page: unref(currentPage),
+      limit: unref(pageSize),
       order: '',
       orderField: ''
     })

src/views/Authorization/Menu/Menu.vue

@@ -28,13 +28,8 @@ const { dataList, loading } = tableState
 const { getList } = tableMethods
 
 const tableColumns = reactive<TableColumn[]>([
-  // {
-  //   field: 'index',
-  //   label: t('userDemo.index'),
-  //   type: 'index'
-  // },
   {
-    field: 'name',
+    field: 'meta.title',
     label: t('menu.menuName')
   },
   {
@@ -62,8 +57,8 @@ const tableColumns = reactive<TableColumn[]>([
       default: (data: any) => {
         return (
           <>
-            <ElTag type={data.row.type === 0 ? '' : data.row.type === 1 ? 'success' : 'info'}>
-              {data.row.type === 0 ? '目录' : data.row.type === 1 ? '菜单' : '按钮'}
+            <ElTag type={data.row.type == 0 ? '' : data.row.type == 1 ? 'success' : 'info'}>
+              {data.row.type == 0 ? '目录' : data.row.type == 1 ? '菜单' : '按钮'}
             </ElTag>
           </>
         )

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

@@ -40,12 +40,7 @@ const formSchema = reactive<FormSchema[]>([
           label: '按钮',
           value: 2
         }
-      ],
-      on: {
-        change: (val: string | number) => {
-          changeType(val)
-        }
-      }
+      ]
     }
   },
   {
@@ -82,7 +77,7 @@ const formSchema = reactive<FormSchema[]>([
   },
   {
     field: 'url',
-    label: '路由',
+    label: '路由地址',
     colProps: {
       span: 24
     },
@@ -103,6 +98,104 @@ const formSchema = reactive<FormSchema[]>([
       span: 24
     },
     component: 'Input'
+  },
+  {
+    field: 'meta.title',
+    label: t('menu.menuName'),
+    component: 'Input'
+  },
+  {
+    field: 'component',
+    label: t('menu.component'),
+    component: 'Input'
+  },
+  {
+    field: 'name',
+    label: t('menu.name'),
+    component: 'Input'
+  },
+  {
+    field: 'meta.icon',
+    label: t('menu.icon'),
+    component: 'Input'
+  },
+  {
+    field: 'status',
+    label: t('menu.status'),
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: t('userDemo.disable'),
+          value: 0
+        },
+        {
+          label: t('userDemo.enable'),
+          value: 1
+        }
+      ]
+    }
+  },
+  {
+    field: 'meta.activeMenu',
+    label: t('menu.activeMenu'),
+    component: 'Input'
+  },
+  // {
+  //   field: 'permission',
+  //   label: t('menu.permission'),
+  //   component: 'CheckboxGroup',
+  //   componentProps: {
+  //     options: [
+  //       {
+  //         label: 'add',
+  //         value: 'add'
+  //       },
+  //       {
+  //         label: 'edit',
+  //         value: 'edit'
+  //       },
+  //       {
+  //         label: 'delete',
+  //         value: 'delete'
+  //       }
+  //     ]
+  //   }
+  // },
+  {
+    field: 'meta.hidden',
+    label: t('menu.hidden'),
+    component: 'Switch'
+  },
+  {
+    field: 'meta.alwaysShow',
+    label: t('menu.alwaysShow'),
+    component: 'Switch'
+  },
+  {
+    field: 'meta.noCache',
+    label: t('menu.noCache'),
+    component: 'Switch'
+  },
+  {
+    field: 'meta.breadcrumb',
+    label: t('menu.breadcrumb'),
+    component: 'Switch'
+  },
+  {
+    field: 'meta.affix',
+    label: t('menu.affix'),
+    component: 'Switch'
+  },
+  {
+    field: 'meta.noTagsView',
+    label: t('menu.noTagsView'),
+    component: 'Switch'
+  },
+  {
+    field: 'canTo',
+    label: t('menu.canTo'),
+    component: 'Switch'
   }
 ])
 
@@ -112,7 +205,7 @@ const rules = reactive({
 })
 
 const { formRegister, formMethods } = useForm()
-const { setValues, getFormData, getElFormExpose, setSchema } = formMethods
+const { setValues, getFormData, getElFormExpose } = formMethods
 
 const submit = async () => {
   const elForm = await getElFormExpose()
@@ -125,55 +218,14 @@ const submit = async () => {
   }
 }
 
-const changeType = (val: string | number) => {
-  if (val == 0) {
-    setSchema([
-      {
-        field: 'url',
-        path: 'hidden',
-        value: false
-      },
-      {
-        field: 'icon',
-        path: 'hidden',
-        value: false
-      }
-    ])
-  } else if (val == 1) {
-    setSchema([
-      {
-        field: 'url',
-        path: 'hidden',
-        value: false
-      },
-      {
-        field: 'icon',
-        path: 'hidden',
-        value: false
-      }
-    ])
-  } else {
-    setSchema([
-      {
-        field: 'url',
-        path: 'hidden',
-        value: true
-      },
-      {
-        field: 'icon',
-        path: 'hidden',
-        value: true
-      }
-    ])
-  }
-}
-
 watch(
   () => props.currentRow,
   (currentRow) => {
     if (!currentRow) return
-    setValues(currentRow)
-    changeType(currentRow.type)
+    let form = {
+      ...currentRow
+    }
+    setValues(form)
   },
   {
     deep: true,

src/views/Authorization/Region/Region.vue

@@ -0,0 +1,172 @@
+<script setup lang="tsx">
+import { reactive, ref, unref } from 'vue'
+import { getListApi, saveApi, updateApi, deleteApi } from '@/api/region'
+import { useTable } from '@/hooks/web/useTable'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Table, TableColumn } from '@/components/Table'
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
+import { Search } from '@/components/Search'
+import { FormSchema } from '@/components/Form'
+import { ContentWrap } from '@/components/ContentWrap'
+import Write from './components/Write.vue'
+import { Dialog } from '@/components/Dialog'
+
+const { t } = useI18n()
+
+const { tableRegister, tableState, tableMethods } = useTable({
+  fetchDataApi: async () => {
+    const { currentPage, pageSize } = tableState
+    const res = await getListApi({
+      ...searchParams.value,
+      limit: unref(pageSize),
+      page: unref(currentPage),
+      order: '',
+      orderField: ''
+    })
+    return {
+      list: res.data.data || [],
+      total: res.data.total
+    }
+  }
+})
+
+const { dataList, loading, total } = tableState
+const { getList } = tableMethods
+
+const tableColumns = reactive<TableColumn[]>([
+  {
+    field: 'name',
+    label: '区域名称'
+  },
+  {
+    field: 'code',
+    label: '区域标识'
+  },
+  {
+    field: 'action',
+    label: t('userDemo.action'),
+    width: 240,
+    slots: {
+      default: (data: any) => {
+        const row = data.row
+        return (
+          <>
+            <ElButton type="primary" onClick={() => action(row, 'edit')}>
+              {t('exampleDemo.edit')}
+            </ElButton>
+            <ElButton type="danger" onClick={() => handleDelete(row)}>
+              {t('exampleDemo.del')}
+            </ElButton>
+          </>
+        )
+      }
+    }
+  }
+])
+
+const searchSchema = reactive<FormSchema[]>([
+  {
+    field: 'name',
+    label: '用户名',
+    component: 'Input'
+  }
+])
+
+const searchParams = ref({})
+const setSearchParams = (data: any) => {
+  searchParams.value = data
+  getList()
+}
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+
+const currentRow = ref()
+const actionType = ref('')
+
+const writeRef = ref<ComponentRef<typeof Write>>()
+
+const saveLoading = ref(false)
+
+const action = (row: any, type: string) => {
+  dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail')
+  actionType.value = type
+  currentRow.value = row
+  dialogVisible.value = true
+}
+
+const AddAction = () => {
+  dialogTitle.value = t('exampleDemo.add')
+  currentRow.value = undefined
+  dialogVisible.value = true
+  actionType.value = ''
+}
+
+const save = async () => {
+  const write = unref(writeRef)
+  const formData = await write?.submit()
+  if (formData) {
+    saveLoading.value = true
+    if (formData.id) {
+      updateApi(formData).then((res) => {
+        if (res) {
+          ElMessage.success('修改成功')
+          dialogVisible.value = false
+          getList()
+        }
+      })
+    } else {
+      saveApi(formData).then((res) => {
+        if (res) {
+          ElMessage.success('保存成功')
+          dialogVisible.value = false
+          getList()
+        }
+      })
+    }
+    saveLoading.value = false
+  }
+}
+
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`确认删除${row.name}?`, '提示').then(() => {
+    deleteApi([row.id]).then((res) => {
+      if (res) {
+        getList()
+        ElMessage.success('删除成功')
+      }
+    })
+  })
+}
+</script>
+
+<template>
+  <ContentWrap>
+    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
+    <div class="mb-10px">
+      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
+    </div>
+    <Table
+      :columns="tableColumns"
+      default-expand-all
+      node-key="id"
+      :data="dataList"
+      :loading="loading"
+      :pagination="{
+        total
+      }"
+      @register="tableRegister"
+    />
+  </ContentWrap>
+
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <Write v-if="actionType !== 'detail'" ref="writeRef" :current-row="currentRow" />
+
+    <template #footer>
+      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
+        {{ t('exampleDemo.save') }}
+      </ElButton>
+      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+    </template>
+  </Dialog>
+</template>

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

@@ -0,0 +1,166 @@
+<script setup lang="tsx">
+import { Form, FormSchema } from '@/components/Form'
+import { useForm } from '@/hooks/web/useForm'
+import { PropType, reactive, watch, ref } from 'vue'
+import { useValidator } from '@/hooks/web/useValidator'
+// import { useI18n } from '@/hooks/web/useI18n'
+import { getRegionTree, getInfoApi } from '@/api/region'
+
+// const { t } = useI18n()
+
+const { required, isMobilePhone } = useValidator()
+
+const props = defineProps({
+  currentRow: {
+    type: Object as PropType<any>,
+    default: () => null
+  }
+})
+
+const formSchema = ref<FormSchema[]>([
+  {
+    field: 'pid',
+    label: '上级区域',
+    component: 'TreeSelect',
+    componentProps: {
+      options: [],
+      filterNodeMethod: (value, data) => data.label.includes(value),
+      filterable: true,
+      checkStrictly: true
+    },
+    optionApi: async () => {
+      let res = await getRegionTree()
+      return res.data
+    },
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'level',
+    label: '上级区域',
+    component: 'TreeSelect',
+    componentProps: {
+      options: [],
+      filterNodeMethod: (value, data) => data.label.includes(value),
+      filterable: true,
+      checkStrictly: true
+    },
+    optionApi: async () => {
+      let res = await getRegionTree()
+      return res.data
+    },
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'name',
+    label: '区域名称',
+    component: 'Input',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'sname',
+    label: '区域简称',
+    component: 'Input',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'code',
+    label: '区域标识',
+    component: 'Input',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'sort',
+    label: '排序',
+    component: 'InputNumber',
+    colProps: {
+      span: 24
+    }
+  }
+])
+
+const rules = reactive({
+  name: [required()],
+  password: [required()],
+  mobile: [required(), isMobilePhone()],
+  roles: [required()]
+})
+
+const { formRegister, formMethods } = useForm()
+const { setValues, getFormData, getElFormExpose, setSchema } = formMethods
+
+const submit = async () => {
+  const elForm = await getElFormExpose()
+  const valid = await elForm?.validate().catch((err) => {
+    console.log(err)
+  })
+  if (valid) {
+    const formData = await getFormData()
+
+    return formData
+  }
+}
+
+const initValue = () => {
+  getInfoApi({
+    id: props.currentRow.id
+  }).then((res) => {
+    setValues(res.data)
+  })
+}
+
+watch(
+  () => props.currentRow,
+  (currentRow) => {
+    if (!currentRow || !currentRow.id) {
+      setSchema([
+        {
+          field: 'level',
+          path: 'remove',
+          value: false
+        },
+        {
+          field: 'pid',
+          path: 'remove',
+          value: true
+        }
+      ])
+      return
+    }
+    setSchema([
+      {
+        field: 'level',
+        path: 'remove',
+        value: true
+      },
+      {
+        field: 'pid',
+        path: 'remove',
+        value: false
+      }
+    ])
+    initValue()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+defineExpose({
+  submit
+})
+</script>
+
+<template>
+  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
+</template>

src/views/Authorization/Role/Role.vue

@@ -16,10 +16,11 @@ const { t } = useI18n()
 
 const { tableRegister, tableState, tableMethods } = useTable({
   fetchDataApi: async () => {
+    const { currentPage, pageSize } = tableState
     const res = await getRoleListApi({
       ...searchParams.value,
-      limit: 100,
-      page: 1,
+      page: unref(currentPage),
+      limit: unref(pageSize),
       order: '',
       orderField: ''
     })

src/views/Authorization/User/User.vue

@@ -16,10 +16,11 @@ const { t } = useI18n()
 
 const { tableRegister, tableState, tableMethods } = useTable({
   fetchDataApi: async () => {
+    const { currentPage, pageSize } = tableState
     const res = await getListApi({
       ...searchParams.value,
-      limit: 100,
-      page: 1,
+      page: unref(currentPage),
+      limit: unref(pageSize),
       order: '',
       orderField: ''
     })

src/views/Login/components/LoginForm.vue

@@ -241,12 +241,12 @@ const signIn = async () => {
   })
 }
 
-const getRouterList = (routes: any[]) => {
-  let arr = treeToList(routes)
-  return arr.map((e) => {
-    return e.url
-  })
-}
+// const getRouterList = (routes: any[]) => {
+//   let arr = treeToList(routes)
+//   return arr.map((e) => {
+//     return e.url
+//   })
+// }
 
 // 获取角色信息
 const getRole = async () => {
@@ -262,12 +262,12 @@ const getRole = async () => {
 
   setStorage(appStore.getUserInfo, res.data)
   if (res.data.menuList) {
-    const routers = getRouterList(res.data.menuList) || []
+    const routers = res.data.menuList || []
     setStorage('roleRouters', routers)
     // appStore.getDynamicRouter && appStore.getServerDynamicRouter
     //   ? await permissionStore.generateRoutes('server', routers).catch(() => {})
     //   : await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})
-    await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})
+    await permissionStore.generateRoutes('server', routers).catch(() => {})
     permissionStore.getAddRouters.forEach((route) => {
       // console.log(route)
       addRoute(route as RouteRecordRaw) // 动态添加可访问路由表

src/views/Organizational/Menu/Menu.vue

@@ -0,0 +1,238 @@
+<script setup lang="tsx">
+import { reactive, ref, unref } from 'vue'
+import { getMenuListApi, saveMenu, deleteMenu, updateMenu } from '@/api/menu/omsIndex'
+import { useTable } from '@/hooks/web/useTable'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Table, TableColumn } from '@/components/Table'
+import { ElButton, ElMessageBox, ElTag, ElMessage } from 'element-plus'
+// import { Icon } from '@/components/Icon'
+import { Search } from '@/components/Search'
+import { FormSchema } from '@/components/Form'
+import { ContentWrap } from '@/components/ContentWrap'
+import Write from './components/Write.vue'
+import { Dialog } from '@/components/Dialog'
+
+const { t } = useI18n()
+
+const { tableRegister, tableState, tableMethods } = useTable({
+  fetchDataApi: async () => {
+    const res = await getMenuListApi()
+    console.log(res)
+    return {
+      list: res.data || []
+    }
+  }
+})
+
+const { dataList, loading } = tableState
+const { getList } = tableMethods
+
+const tableColumns = reactive<TableColumn[]>([
+  // {
+  //   field: 'index',
+  //   label: t('userDemo.index'),
+  //   type: 'index'
+  // },
+  {
+    field: 'name',
+    label: t('menu.menuName')
+  },
+  {
+    field: 'icon',
+    label: t('menu.icon')
+    // slots: {
+    //   default: (data: any) => {
+    //     const icon = data.row.icon
+    //     if (icon) {
+    //       return (
+    //         <>
+    //           <Icon icon={icon} />
+    //         </>
+    //       )
+    //     } else {
+    //       return null
+    //     }
+    //   }
+    // }
+  },
+  {
+    field: 'type',
+    label: '类型',
+    slots: {
+      default: (data: any) => {
+        return (
+          <>
+            <ElTag type={data.row.type === 0 ? '' : data.row.type === 1 ? 'success' : 'info'}>
+              {data.row.type === 0 ? '目录' : data.row.type === 1 ? '菜单' : '按钮'}
+            </ElTag>
+          </>
+        )
+      }
+    }
+  },
+  // {
+  //   field: 'component',
+  //   label: t('menu.component'),
+  //   slots: {
+  //     default: (data: any) => {
+  //       const component = data.row.component
+  //       return <>{component === '#' ? '顶级目录' : component === '##' ? '子目录' : component}</>
+  //     }
+  //   }
+  // },
+  {
+    field: 'orderNum',
+    label: '排序'
+  },
+  {
+    field: 'url',
+    label: '路由'
+  },
+  {
+    field: 'permissions',
+    label: '授权标识'
+  },
+  {
+    field: 'action',
+    label: t('userDemo.action'),
+    width: 240,
+    slots: {
+      default: (data: any) => {
+        const row = data.row
+        return (
+          <>
+            <ElButton type="primary" onClick={() => action(row, 'edit')}>
+              {t('exampleDemo.edit')}
+            </ElButton>
+            <ElButton
+              type="danger"
+              onClick={() => {
+                handleDelete(row)
+              }}
+            >
+              {t('exampleDemo.del')}
+            </ElButton>
+          </>
+        )
+      }
+    }
+  }
+])
+
+const searchSchema = reactive<FormSchema[]>([
+  {
+    field: 'meta.title',
+    label: t('menu.menuName'),
+    component: 'Input'
+  }
+])
+
+const searchParams = ref({})
+const setSearchParams = (data: any) => {
+  searchParams.value = data
+  getList()
+}
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+
+const currentRow = ref()
+const actionType = ref('')
+
+const writeRef = ref<ComponentRef<typeof Write>>()
+
+const saveLoading = ref(false)
+
+const action = (row: any, type: string) => {
+  dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail')
+  actionType.value = type
+  currentRow.value = row
+  dialogVisible.value = true
+}
+
+const handleDelete = (row: any) => {
+  console.log(row)
+  ElMessageBox.confirm(`确认删除${row.name}?`, '提示').then(() => {
+    deleteMenu([row.id]).then((res) => {
+      if (res) {
+        getList()
+        ElMessage.success('删除成功')
+      }
+    })
+  })
+}
+
+const AddAction = () => {
+  dialogTitle.value = t('exampleDemo.add')
+  currentRow.value = undefined
+  dialogVisible.value = true
+  actionType.value = ''
+}
+
+const save = async () => {
+  const write = unref(writeRef)
+  const formData = await write?.submit()
+  if (formData) {
+    saveLoading.value = true
+    if (formData.id) {
+      updateMenu(formData)
+        .then((res) => {
+          if (res) {
+            ElMessage.success('操作成功')
+            saveLoading.value = false
+            dialogVisible.value = false
+            getList()
+          }
+        })
+        .catch(() => {
+          saveLoading.value = false
+        })
+    } else {
+      saveMenu(formData)
+        .then((res) => {
+          if (res) {
+            ElMessage.success('操作成功')
+            saveLoading.value = false
+            dialogVisible.value = false
+            getList()
+          }
+        })
+        .catch(() => {
+          saveLoading.value = false
+        })
+    }
+  }
+}
+</script>
+
+<template>
+  <ContentWrap>
+    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
+    <div class="mb-10px">
+      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
+    </div>
+    <Table
+      :columns="tableColumns"
+      node-key="id"
+      :data="dataList"
+      :loading="loading"
+      @register="tableRegister"
+    />
+  </ContentWrap>
+
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <Write
+      v-if="actionType !== 'detail'"
+      ref="writeRef"
+      :treeSelectData="dataList"
+      :current-row="currentRow"
+    />
+
+    <template #footer>
+      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
+        {{ t('exampleDemo.save') }}
+      </ElButton>
+      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+    </template>
+  </Dialog>
+</template>

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

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+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'
+
+const { t } = useI18n()
+
+const { required } = useValidator()
+
+const props = defineProps({
+  currentRow: {
+    type: Object as PropType<any>,
+    default: () => null
+  },
+  treeSelectData: Array
+})
+
+const formSchema = reactive<FormSchema[]>([
+  {
+    field: 'type',
+    label: '类型',
+    component: 'RadioGroup',
+    value: 0,
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      options: [
+        {
+          label: '目录',
+          value: 0
+        },
+        {
+          label: '菜单',
+          value: 1
+        },
+        {
+          label: '按钮',
+          value: 2
+        }
+      ],
+      on: {
+        change: (val: string | number) => {
+          changeType(val)
+        }
+      }
+    }
+  },
+  {
+    field: 'name',
+    label: t('menu.menuName'),
+    component: 'Input',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'pid',
+    label: '上级菜单',
+    component: 'TreeSelect',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      checkStrictly: true,
+      nodeKey: 'id',
+      props: {
+        label: 'name'
+      },
+      data: props.treeSelectData
+    }
+  },
+  {
+    field: 'icon',
+    label: t('menu.icon'),
+    colProps: {
+      span: 24
+    },
+    component: 'IconPicker'
+  },
+  {
+    field: 'url',
+    label: '路由',
+    colProps: {
+      span: 24
+    },
+    component: 'Input'
+  },
+  {
+    field: 'orderNum',
+    label: '排序',
+    colProps: {
+      span: 24
+    },
+    component: 'InputNumber'
+  },
+  {
+    field: 'permissions',
+    label: '授权标识',
+    colProps: {
+      span: 24
+    },
+    component: 'Input'
+  }
+])
+
+const rules = reactive({
+  name: [required()],
+  url: [required()]
+})
+
+const { formRegister, formMethods } = useForm()
+const { setValues, getFormData, getElFormExpose, setSchema } = formMethods
+
+const submit = async () => {
+  const elForm = await getElFormExpose()
+  const valid = await elForm?.validate().catch((err) => {
+    console.log(err)
+  })
+  if (valid) {
+    const formData = await getFormData()
+    return formData
+  }
+}
+
+const changeType = (val: string | number) => {
+  if (val == 0) {
+    setSchema([
+      {
+        field: 'url',
+        path: 'hidden',
+        value: false
+      },
+      {
+        field: 'icon',
+        path: 'hidden',
+        value: false
+      }
+    ])
+  } else if (val == 1) {
+    setSchema([
+      {
+        field: 'url',
+        path: 'hidden',
+        value: false
+      },
+      {
+        field: 'icon',
+        path: 'hidden',
+        value: false
+      }
+    ])
+  } else {
+    setSchema([
+      {
+        field: 'url',
+        path: 'hidden',
+        value: true
+      },
+      {
+        field: 'icon',
+        path: 'hidden',
+        value: true
+      }
+    ])
+  }
+}
+
+watch(
+  () => props.currentRow,
+  (currentRow) => {
+    if (!currentRow) return
+    setValues(currentRow)
+    changeType(currentRow.type)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+defineExpose({
+  submit
+})
+</script>
+
+<template>
+  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
+</template>

types/router.d.ts

@@ -64,6 +64,7 @@ declare global {
     children?: AppRouteRecordRaw[]
     props?: Recordable
     fullPath?: string
+    url:string
   }
 
   declare interface AppCustomRouteRecordRaw
@@ -72,6 +73,7 @@ declare global {
     meta: RouteMetaCustom
     component: string
     path: string
+    url: string
     redirect: string
     children?: AppCustomRouteRecordRaw[]
   }