菜单表单

src/components/common-form/public.d.ts

@@ -32,7 +32,7 @@ export interface CommonFormOption {
     /**表单类型*/
     type: 'input' | 'input-number' | 'cascader' | 'radio'
         | 'radio-group' | 'radio-button' | 'checkbox' | 'checkbox-group' | 'checkbox-button' | 'date-picker'
-        | 'time-picker' | 'switch' | 'select' | 'option' | 'slider' | 'transfer' | 'upload' | 'common-icon-select' | 'common-autocomplete';
+        | 'time-picker' | 'switch' | 'select' | 'option' | 'slider' | 'transfer' | 'upload' | 'common-icon-select' | 'common-autocomplete' | 'tree-select';
     /**数据值*/
     value?: any;
     /**属性名*/
@@ -62,4 +62,6 @@ export interface CommonFormOption {
     children?: Array<CommonFormOption>;
     /**async-validator验证器*/
     rules: Array<RuleItem>;
+    /**change事件*/
+    change: (val: any) => void
 }

src/components/public.d.ts

@@ -12,3 +12,11 @@ export interface CommonPage {
     totalCount?: number;
 }
 
+/**
+ * element树结构
+ */
+export interface CommonTreeNode {
+    value: string;
+    label: string;
+    children: Array<CommonTreeNode>;
+}

src/services/menu/MenuService.js

@@ -24,9 +24,10 @@ export const loadMenuResult = (id, config) => {
 }
 
 /**
+ * @param menus {MenuDto[]}
  * @return {[CommonFormOption]}
  */
-export const useMenuFormOptions = () => {
+export const useMenuFormOptions = (menus) => {
   return [{
     labelKey: 'menu.label.menuNameCn',
     prop: 'nameCn',
@@ -37,7 +38,11 @@ export const useMenuFormOptions = () => {
     required: true
   }, {
     labelKey: 'menu.label.menuParent',
-    prop: 'parentId'
+    prop: 'parentId',
+    type: 'tree-select',
+    attrs: {
+      data: menus ? menus.map(menu2TreeMenu) : []
+    }
   }, {
     labelKey: 'menu.label.menuIcon',
     prop: 'iconCls',
@@ -48,6 +53,24 @@ export const useMenuFormOptions = () => {
   }]
 }
 
+/**
+ * @param menu {MenuDto}
+ * @return {CommonTreeNode}
+ */
+export const menu2TreeMenu = (menu) => {
+  /**
+   * @type {CommonTreeNode}
+   */
+  const treeNode = {
+    value: menu.id,
+    label: $i18nMsg(menu.nameCn, menu.nameEn)
+  }
+  if (menu.children) {
+    treeNode.children = menu.children.map(menu2TreeMenu)
+  }
+  return treeNode
+}
+
 /**
  * 接口菜单格式转换成页面展示格式
  * @param menu {MenuDto}

src/views/admin/MenuEdit.vue

@@ -1,15 +1,17 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { loadMenuResult, useMenuFormOptions } from '@/services/menu/MenuService'
+import { loadAndParseMenus, loadMenuResult, useMenuFormOptions } from '@/services/menu/MenuService'
 
 const route = useRoute()
 
 const menuDto = ref({
   id: route.params.id
 })
-
-const menuFormOptions = ref(useMenuFormOptions())
+const selectMenus = ref([])
+const menuFormOptions = computed(() => {
+  return useMenuFormOptions(selectMenus.value)
+})
 
 const loadMenu = async () => {
   const id = route.params.id
@@ -22,7 +24,9 @@ const loadMenu = async () => {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
+  const menus = await loadAndParseMenus()
+  selectMenus.value = menus
   loadMenu()
 })