页面修改

src/components/system/menu-form.vue

@@ -17,11 +17,19 @@
           </div>
           <q-select class="col-6 q-pr-lg" v-model="objOption.MenuType" :options="MenuTypeOpts" emit-value map-options
             label="菜单类型" @input="queryMenuList()" />
-          <q-select class="col-6 q-pr-lg q-pb-lg" v-if="objOption.IsUserCenter==0" v-model="objOption.MenuLevel" :options="MenuLevelOpts" emit-value map-options
-            label="菜单等级" @input="queryMenuList()" />
-          <q-select v-if="objOption.IsUserCenter==0"  :option-value="(item) => item === null ? null : item.MenuId" option-label="MenuName"
-            v-model="objOption.ParentId" :options="MenuList" label="上级菜单" :dense="false" emit-value map-options
-            class="col-6 q-pr-lg q-pb-lg" />
+          <q-select class="col-6 q-pr-lg q-pb-lg" v-if="objOption.IsUserCenter==0" v-model="objOption.MenuLevel"
+            :options="MenuLevelOpts" emit-value map-options label="菜单等级" @input="queryMenuList()" />
+          <q-select v-if="objOption.IsUserCenter==0" filled clearable use-input option-value="MenuId"
+            option-label="MenuName" v-model="objOption.ParentId" :options="MenuList" label="上级菜单" :dense="false"
+            emit-value map-options class="col-6 q-pr-lg q-pb-lg" @filter="filterFn">
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  未找到相关数据
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
           <q-input stack-label maxlength="60" :dense="false" v-model="objOption.MenuIcon" class="col-6 q-pr-lg q-pb-lg"
             label="图标" />
           <q-input filled stack-label maxlength="10" :dense="false" v-model="objOption.SortNum"
@@ -31,7 +39,7 @@
               v-model="objOption.Status" />
             <div class="text-grey-6 text-caption">注意：关闭后，菜单将无法正常使用.</div>
           </div>
-          <q-select class="col-6 q-pr-lg" v-model="objOption.TeamType" :options="TeamTypeOpts" emit-value map-options 
+          <q-select class="col-6 q-pr-lg" v-model="objOption.TeamType" :options="TeamTypeOpts" emit-value map-options
             label="项目类型" />
         </div>
       </q-card-section>
@@ -66,15 +74,15 @@
         MenuLevelOpts: [],
         //菜单类型
         MenuTypeOpts: [],
-        TeamTypeOpts: [
-          {
+        TeamTypeOpts: [{
             label: '教育菜单',
             value: 1
           },
           {
             label: '资产菜单',
             value: 2
-          }],
+          }
+        ],
         persistent: true,
         objOption: {
           MenuId: 0, //菜单编号
@@ -92,6 +100,7 @@
         optionTitle: "",
         //菜单列表
         MenuList: [],
+        AllMenuList: [],
         saveLoading: false,
       }
     },
@@ -100,9 +109,21 @@
       this.initObj()
     },
     methods: {
+      //筛选员工
+      filterFn(val, update) {
+        update(() => {
+          if (val === '') {
+            this.MenuList = JSON.parse(JSON.stringify(this.AllMenuList))
+          } else {
+            const needle = val.toLowerCase();
+            this.MenuList = this.AllMenuList.filter(v => v.MenuName.toLowerCase().indexOf(needle) > -1);
+          }
+        })
+      },
       //获取菜单列表
       queryMenuList() {
         this.MenuList = [];
+        this.AllMenuList = [];
         var qMsg = {
           MenuLevel: Number(this.objOption.MenuLevel - 1),
           MenuType: this.objOption.MenuType
@@ -119,6 +140,7 @@
             });
           }
           this.MenuList = tempArray;
+          this.AllMenuList = tempArray;
           this.$forceUpdate();
         })
       },
@@ -148,7 +170,7 @@
             this.objOption.TeamType = res.Data.TeamType;
             this.objOption.SortNum = res.Data.SortNum;
             this.objOption.Status = res.Data.Status;
-            this.objOption.IsUserCenter=res.Data.IsUserCenter;
+            this.objOption.IsUserCenter = res.Data.IsUserCenter;
           })
           this.optionTitle = "修改菜单信息"
         } else {
@@ -163,7 +185,7 @@
           this.objOption.TeamType = 1;
           this.objOption.SortNum = 0;
           this.objOption.Status = 0;
-          this.objOption.IsUserCenter=0;
+          this.objOption.IsUserCenter = 0;
         }
       },
       //关闭弹窗