update 新增图标选择组件,优化菜单编辑功能

Web/src/pages/system/menu/addForm.vue

@@ -41,11 +41,11 @@ export default {
      * 必要的方法
      * 从外部调用打开本窗口
      */
-    async onOpen() {
+    async onOpen(record) {
       this.visible = true;
 
-      this.$nextTick(() => {
-        this.formBody.onInit();
+      this.$nextTick(async () => {
+        await this.formBody.onInit(record, true);
       });
     },
 

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

@@ -31,11 +31,7 @@
             <a-input placeholder="请输入唯一编码" v-model="form.code" />
           </a-form-model-item>
           <a-form-model-item label="所属应用" prop="application">
-            <a-select
-              @change="onChangeApplication"
-              placeholder="请选择所属应用"
-              v-model="form.application"
-            >
+            <a-select @change="onLoadMenuTree" placeholder="请选择所属应用" v-model="form.application">
               <a-select-option
                 :key="item.code"
                 :value="item.code"
@@ -99,7 +95,12 @@
             <a-switch checked-children="可见" un-checked-children="隐藏" v-model="form.visible" />
           </a-form-model-item>
           <!-- 图标只有[按钮]不可用 -->
-          <a-form-model-item label="图标" v-if="form.type != 2"></a-form-model-item>
+          <a-form-model-item label="图标" v-if="form.type != 2">
+            <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
+              <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
+              <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
+            </a-input>
+          </a-form-model-item>
           <a-form-model-item label="排序">
             <a-input-number
               :max="1000"
@@ -115,11 +116,15 @@
         </div>
       </div>
     </a-spin>
+
+    <yo-icon-selector ref="icon-selector" v-model="form.icon" />
   </a-form-model>
 </template>
 <script>
 import { EMPTY_ID } from '@/util/global';
 
+import YoIconSelector from '@/components/yoIconSelector';
+
 const defaultValue = {
   type: '1',
   openType: '1',
@@ -129,6 +134,10 @@ const defaultValue = {
 };
 
 export default {
+  components: {
+    YoIconSelector,
+  },
+
   data() {
     return {
       /** 表单数据 */
@@ -227,7 +236,7 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit(record) {
+    async onInit(record, isParent = false) {
       this.loading = true;
 
       /** 可以在这里await获取一些异步数据 */
@@ -235,17 +244,12 @@ export default {
       this.codes = await this.onLoadCodes();
       this.appList = await this.onLoadSysApplist();
       if (record) {
-        const treeData = await this.onLoadMenuTree(record.application);
-        this.parentTreeData = [
-          {
-            id: EMPTY_ID,
-            parentId: undefined,
-            title: '顶级',
-            value: EMPTY_ID,
-            pid: undefined,
-            children: treeData,
-          },
-        ];
+        await this.onLoadMenuTree(record.application);
+
+        if (isParent) {
+          this.$set(this.form, 'pid', record.id);
+          this.$set(this.form, 'application', record.application);
+        }
       }
       /** ...END */
       this.loading = false;
@@ -277,7 +281,16 @@ export default {
 
     onLoadMenuTree(app) {
       return this.$api.getMenuTree({ application: app }).then(({ data }) => {
-        return data;
+        this.parentTreeData = [
+          {
+            id: EMPTY_ID,
+            parentId: undefined,
+            title: '顶级',
+            value: EMPTY_ID,
+            pid: undefined,
+            children: data,
+          },
+        ];
       });
     },
 
@@ -304,19 +317,12 @@ export default {
       this.onTypeChangeGroup();
     },
 
-    onChangeApplication(value) {
-      this.onLoadMenuTree(value).then((data) => {
-        this.parentTreeData = [
-          {
-            id: EMPTY_ID,
-            parentId: undefined,
-            title: '顶级',
-            value: EMPTY_ID,
-            pid: undefined,
-            children: data,
-          },
-        ];
-      });
+    onOpenSelectIcon() {
+      this.$refs['icon-selector'].onOpen(this.form.icon);
+    },
+
+    onSelectIcon(icon) {
+      this.$set(this.form, 'icon', icon);
     },
   },
 };

Web/src/pages/system/menu/index.vue

@@ -1,5 +1,9 @@
 <template>
   <container>
+    <br />
+    <a-alert type="error">
+      <template slot="message">按钮编辑关闭时调用resetFields报错,原因为visible=undefined</template>
+    </a-alert>
     <br />
     <a-card :bordered="false">
       <yo-table :columns="columns" :load-data="loadData" ref="table">
@@ -14,6 +18,9 @@
         </span>
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
+            <Auth auth="sysMenu:add" v-if="record.type < 2">
+              <a @click="onOpen('add-form', record)">新增子菜单</a>
+            </Auth>
             <Auth auth="sysMenu:edit">
               <a @click="onOpen('edit-form', record)">编辑</a>
             </Auth>