简单菜单表单

src/messages/menu_cn.js

@@ -6,6 +6,7 @@ menu.label.userManagement = '用户管理'
 menu.label.roleManagement = '角色管理'
 menu.label.authorityManagement = '权限管理'
 menu.label.menuManagement = '菜单管理'
+menu.label.menuEdit = '菜单编辑'
 menu.label.toolsManagement = '工具管理'
 menu.label.toolsIcons = '图标工具'
 menu.label.toolsForms = '表单工具'
@@ -15,3 +16,9 @@ menu.label.errorPage = '错误页面'
 menu.label.errorPage404 = '找不到页面'
 menu.label.errorPage403 = '没有权限'
 menu.label.errorPage500 = '服务器错误'
+
+menu.label.menuNameCn = '菜单中文名'
+menu.label.menuNameEn = '菜单英文名'
+menu.label.menuIcon = '菜单图标'
+menu.label.menuParent = '上级菜单'
+menu.label.menuUrl = '菜单地址'

src/messages/menu_en.js

@@ -5,7 +5,8 @@ menu.label.systemManagement = 'System Management'
 menu.label.userManagement = 'User Management'
 menu.label.roleManagement = 'Role Management'
 menu.label.authorityManagement = 'Authority Management'
-menu.label.menuManagement = 'Menu Management'
+menu.label.menuEdit = 'Edit Menu'
+menu.label.menuOperation = 'Menu {0}'
 menu.label.toolsManagement = 'Tools'
 menu.label.toolsIcons = 'Icons'
 menu.label.toolsForms = 'Forms'
@@ -15,3 +16,9 @@ menu.label.errorPage = 'Error Page'
 menu.label.errorPage404 = 'Not Found'
 menu.label.errorPage403 = 'Access Denied'
 menu.label.errorPage500 = 'Server Error'
+
+menu.label.menuNameCn = 'Name CN'
+menu.label.menuNameEn = 'Name EN'
+menu.label.menuIcon = 'Menu Icon'
+menu.label.menuParent = 'Parent Menu'
+menu.label.menuUrl = 'Menu Url'

src/route/AdminRoutes.js

@@ -15,5 +15,18 @@ export default [{
 }, {
   path: `${BASE_PATH}/menus`,
   name: 'Menus',
-  component: () => import('@/views/admin/Menus.vue')
+  children: [{
+    path: '',
+    name: 'menus-index',
+    component: () => import('@/views/admin/Menus.vue')
+  }, {
+    path: 'edit/:id',
+    name: 'menus-edit',
+    component: () => import('@/views/admin/MenuEdit.vue'),
+    meta: {
+      replaceTabHistory: 'menus-index',
+      labelKey: 'menu.label.menuEdit',
+      icon: 'Edit'
+    }
+  }]
 }]

src/services/menu/MenuService.js

@@ -9,12 +9,45 @@
  * @property {[MenuDto]} children 子菜单
  */
 
-import { $httpPost } from '@/vendors/axios'
+import { $httpGet, $httpPost } from '@/vendors/axios'
 import { $i18nMsg } from '@/messages'
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
 import { GlobalLocales } from '@/consts/GlobalConstants'
 import { useLoginConfigStore } from '@/stores/LoginConfigStore'
 
+export const searchMenusResult = (queryParam, config) => {
+  return $httpPost('/api/searchMenus', queryParam, config)
+}
+
+export const loadMenuResult = (id, config) => {
+  return $httpGet(`/api/menus/${id}`, config)
+}
+
+/**
+ * @return {[CommonFormOption]}
+ */
+export const useMenuFormOptions = () => {
+  return [{
+    labelKey: 'menu.label.menuNameCn',
+    prop: 'nameCn',
+    required: true
+  }, {
+    labelKey: 'menu.label.menuNameEn',
+    prop: 'nameEn',
+    required: true
+  }, {
+    labelKey: 'menu.label.menuParent',
+    prop: 'parentId'
+  }, {
+    labelKey: 'menu.label.menuIcon',
+    prop: 'iconCls',
+    type: 'common-icon-select'
+  }, {
+    labelKey: 'menu.label.menuUrl',
+    prop: 'menuUrl'
+  }]
+}
+
 /**
  * 接口菜单格式转换成页面展示格式
  * @param menu {MenuDto}
@@ -35,11 +68,11 @@ export const menu2CommonMenu = (menu) => {
   return menuItem
 }
 
-export const loadAndParseMenus = async config => {
+export const loadAndParseMenus = async (param, config) => {
   /**
    * @type {[MenuDto]}
    */
-  const menus = await $httpPost('/api/menus', config).then(data => data.resultData?.menuList || [])
+  const menus = await $httpPost('/api/menus', param, config).then(data => data.resultData?.menuList || [])
   return processMenus(menus)
 }
 /**

src/views/admin/MenuEdit.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { loadMenuResult, useMenuFormOptions } from '@/services/menu/MenuService'
+
+const route = useRoute()
+
+const menuDto = ref({
+  id: route.params.id
+})
+
+const menuFormOptions = ref(useMenuFormOptions())
+
+const loadMenu = async () => {
+  const id = route.params.id
+  if (id) {
+    const menuResult = await loadMenuResult(id)
+    if (menuResult.success && menuResult.resultData) {
+      const resultData = menuResult.resultData
+      menuDto.value = resultData.menu
+    }
+  }
+}
+
+onMounted(() => {
+  loadMenu()
+})
+
+const submitForm = form => {
+  form.validate(valid => {
+    if (valid) {
+      console.log('submit', menuDto.value)
+    }
+  })
+}
+</script>
+
+<template>
+  <el-container class="container-center">
+    <common-form
+      class="form-edit-width-70"
+      :model="menuDto"
+      :options="menuFormOptions"
+      label-width="120px"
+      back-url="/admin/menus"
+      @submit-form="submitForm"
+    />
+  </el-container>
+</template>
+
+<style scoped>
+
+</style>

src/views/admin/Menus.vue

@@ -1,17 +1,112 @@
 <script setup>
-import { onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, onMounted, ref } from 'vue'
+import { useDefaultPage } from '@/config'
+import { useRouter } from 'vue-router'
+import { searchMenusResult } from '@/services/menu/MenuService'
+
+const router = useRouter()
+
+const page = ref(useDefaultPage(8))
+
+const tableData = ref([])
+const loading = ref(true)
+const searchMenus = async () => {
+  loading.value = true
+  const searchResult = await searchMenusResult({ page: page.value })
+  loading.value = false
+  if (searchResult.success && searchResult.resultData) {
+    const resultData = searchResult.resultData
+    tableData.value = resultData.menuList
+    Object.assign(page.value, resultData.page)
+  }
+}
+
 onMounted(() => {
-  console.info('=========mounted', useRoute().path)
+  searchMenus()
 })
+
+/**
+ *
+ * @type {[CommonTableColumn]}
+ */
+const columns = [{
+  labelKey: 'menu.label.menuNameCn',
+  property: 'nameCn',
+  click (data) {
+    router.push(`menus/edit/${data.id}`)
+  }
+}, {
+  labelKey: 'menu.label.menuNameEn',
+  property: 'nameEn',
+  click (data) {
+    router.push(`menus/edit/${data.id}`)
+  }
+}, {
+  labelKey: 'menu.label.menuParent',
+  property: 'parentId'
+}, {
+  labelKey: 'menu.label.menuIcon',
+  property: 'iconCls',
+  slot: 'iconCls'
+}, {
+  labelKey: 'menu.label.menuUrl',
+  property: 'menuUrl'
+}]
+const buttons = ref([{
+  labelKey: 'common.label.edit',
+  type: 'primary',
+  click: item => {
+    router.push(`menus/edit/${item.id}`)
+  }
+}, {
+  labelKey: 'common.label.delete',
+  type: 'danger',
+  click: item => {
+    console.info('删除=============', item)
+  }
+}])
+//* ************搜索框**************//
+const searchParam = ref({})
+const searchFormOptions = computed(() => {
+  return [
+    {
+      label: '关键字',
+      prop: 'keywords'
+    }
+  ]
+})
+const doSearch = form => {
+  console.info('=================searchParam', searchParam.value)
+}
 </script>
 
 <template>
-  <div>
-    <strong>
-      {{ $t('menu.label.menuManagement') }}
-    </strong>
-  </div>
+  <el-container
+    class="no_flex"
+  >
+    <common-form
+      inline
+      :model="searchParam"
+      :options="searchFormOptions"
+      :submit-label="$t('common.label.search')"
+      @submit-form="doSearch"
+    />
+    <common-table
+      v-model:page="page"
+      :data="tableData"
+      :columns="columns"
+      :buttons="buttons"
+      buttons-slot="buttons"
+      :buttons-column-attrs="{width:'250px'}"
+      :loading="loading"
+      @current-page-change="searchMenus()"
+    >
+      <template #iconCls="{item}">
+        <common-icon :icon="item.iconCls" />
+        {{ item.iconCls }}
+      </template>
+    </common-table>
+  </el-container>
 </template>
 
 <style scoped>