feat: 菜单页面基本完成

package.json

@@ -18,7 +18,7 @@
     "@tailwindcss/postcss7-compat": "^2.2.2",
     "animate.css": "^4.1.0",
     "ant-design-vue": "1.7.2",
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "clipboard": "^2.0.6",
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",

src/components/menu_tree/select.vue

+<template>
+    <a-tree-select
+        show-search
+        style="width: 100%"
+        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+        placeholder="请选择"
+        allow-clear
+        tree-default-expand-all
+        :treeData="treeData"
+        :replaceFields="replaceFields"
+        v-bind="$attrs"
+        v-on="$listeners"
+    />
+</template>
+
+<script>
+import { getMenuDataApi } from '@/api';
+import { convertListToTree } from '@/utils';
+
+export default {
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    data() {
+        return {
+            treeData: [],
+            replaceFields: {
+                title: 'menuName',
+                key: 'menuId',
+                value: 'menuId',
+            },
+        };
+    },
+    async mounted() {
+        this.treeData = convertListToTree(await getMenuDataApi(), true);
+        console.log(this.treeData);
+    },
+};
+</script>

src/components/table/index.vue

@@ -124,12 +124,12 @@ export default {
             this.submitLoading = true;
             try {
                 await this.addBtn?.onOk();
+                this.addVisible = false;
                 this.getData();
             } catch (error) {
                 // todo
             }
             this.submitLoading = false;
-            this.addVisible = false;
         },
         showAdd() {
             this.addVisible = true;

src/pages/system/view/menu/form.vue

 <template>
-    <a-form-model layout="vertical" :model="form" :rules="rules">
-        <a-form-model-item label="父级" v-if="isAdd">
-            <MenuTree @check="onCheck" :value="checkedKeys" checkStrictly />
+    <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
+        <a-form-model-item label="父级" extra="没选择代表根目录" v-if="isAdd">
+            <MenuTree v-model="form.parentMenuId" />
         </a-form-model-item>
         <a-form-model-item label="类型">
             <a-radio-group v-model="form.menuType" :disabled="isEdit">
@@ -32,7 +32,7 @@
 
 <script>
 import { addMenuApi } from '@/api';
-import MenuTree from '@/components/menu_tree/index.vue';
+import MenuTree from '@/components/menu_tree/select.vue';
 
 export default {
     components: { MenuTree },
@@ -40,16 +40,12 @@ export default {
         type: 0,
         form: {
             menuType: 'CATALOG',
-            parentMenuId: 0,
+            parentMenuId: null,
             menuName: '',
         },
         rules: {
             menuUrl: [{ required: true }],
         },
-        checkedKeys: {
-            checked: [],
-            halfChecked: [],
-        },
     }),
     computed: {
         isAdd() {
@@ -60,12 +56,9 @@ export default {
         },
     },
     methods: {
-        submit() {
-            return addMenuApi({ ...this.form, parentMenuId: this.checkedKeys.checked[0] ?? 0 });
-        },
-        onCheck(checkedKeys) {
-            const checked = checkedKeys.checked.slice(-1);
-            this.checkedKeys = { checked };
+        async submit() {
+            await this.$refs['form'].validate();
+            return addMenuApi({ ...this.form, parentMenuId: this.form.parentMenuId ?? 0 });
         },
         setEdit(data) {
             this.type = 1;