md

src/components/ModuleSelect.vue

@@ -37,11 +37,21 @@ export default {
       type: Boolean,
       default: false,
     },
+    filterType: {
+      type: String,
+      default: null,
+      validate: (val) => ["nginx", "property"].includes(val),
+    },
+    showAllLabelOption: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       optionList: [],
       selected: "",
+      moduleTypesMap: {},
     };
   },
   watch: {
@@ -61,6 +71,13 @@ export default {
     },
   },
   created() {
+    const moduleTypes = this.$ls.get("moduleTypes", []);
+    let moduleTypesMap = {};
+    moduleTypes.forEach((item) => {
+      moduleTypesMap[item.code] = item;
+    });
+    this.moduleTypesMap = moduleTypesMap;
+
     if (!this.manualFetch) this.search();
   },
   methods: {
@@ -73,6 +90,16 @@ export default {
       });
       this.optionList = res || [];
 
+      if (this.filterType) {
+        this.optionList = this.optionList.filter(
+          (option) => this.moduleTypesMap[option.type][this.filterType]
+        );
+      }
+
+      if (this.showAllLabelOption) {
+        this.optionList.unshift({ id: null, name: "全部" });
+      }
+
       if (!this.selectDefault) return;
 
       if (this.value) {

src/modules/admin/app-config/AppConfigManage.vue

@@ -39,6 +39,7 @@
               v-model="filter.moduleId"
               :app-id="filter.appId"
               :clearable="false"
+              filter-type="property"
               manual-fetch
               select-default
             ></module-select>

src/modules/admin/app-module/AppModuleManage.vue

@@ -115,7 +115,7 @@
 </template>
 
 <script>
-import { appModuleList, appModuleEnable, appModuleTypes } from "../api";
+import { appModuleList, appModuleEnable } from "../api";
 import { ABLE_TYPE } from "@/constants/enumerate";
 import ModifyAppModule from "./ModifyAppModule.vue";
 
@@ -140,13 +140,17 @@ export default {
       },
       dataList: [],
       curRow: {},
-      moduleTypes: [],
+      moduleTypes: this.$ls.get("moduleTypes", []),
       moduleTypesMap: {},
     };
   },
   methods: {
     async visibleChange() {
-      await this.getModuleTypes();
+      let moduleTypesMap = {};
+      this.moduleTypes.forEach((item) => {
+        moduleTypesMap[item.code] = item.name;
+      });
+      this.moduleTypesMap = moduleTypesMap;
       await this.getList();
     },
     cancel() {
@@ -155,16 +159,6 @@ export default {
     open() {
       this.modalIsShow = true;
     },
-    async getModuleTypes() {
-      if (this.moduleTypes.length) return;
-      const res = await appModuleTypes();
-      this.moduleTypes = res || [];
-      let moduleTypesMap = {};
-      this.moduleTypes.forEach((item) => {
-        moduleTypesMap[item.code] = item.name;
-      });
-      this.moduleTypesMap = moduleTypesMap;
-    },
     async getList() {
       const datas = {
         ...this.filter,

src/modules/admin/app-nginx/AppNginxManage.vue

@@ -22,14 +22,16 @@
             <h2 class="dialog-title">{{ title }}</h2>
           </el-form-item>
           <el-form-item label="模块">
-            <el-select v-model="filter.moduleId" placeholder="请选择模块">
-              <el-option
-                v-for="item in moduleList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              ></el-option>
-            </el-select>
+            <module-select
+              ref="ModuleSelect"
+              v-model="filter.moduleId"
+              :app-id="filter.appId"
+              :clearable="false"
+              filter-type="nginx"
+              manual-fetch
+              select-default
+              show-all-label-option
+            ></module-select>
           </el-form-item>
           <el-form-item label-width="0px">
             <el-button type="primary" icon="ios-search" @click="search"
@@ -60,7 +62,6 @@
 
 <script>
 import EditNginxContent from "./EditNginxContent.vue";
-import { appModuleList } from "../api";
 
 export default {
   name: "app-nginx-manange",
@@ -98,17 +99,19 @@ export default {
   },
   methods: {
     async visibleChange(visible) {
-      if (visible) {
-        this.filter = {
-          appId: this.app.id,
-          moduleId: null,
-        };
-
-        await this.getModuleList();
-        this.dataReady = true;
-      } else {
+      if (!visible) {
         this.dataReady = false;
+        return;
       }
+
+      this.filter = {
+        appId: this.app.id,
+        moduleId: null,
+      };
+      this.$nextTick(async () => {
+        await this.$refs.ModuleSelect.search();
+        this.dataReady = true;
+      });
     },
     cancel() {
       this.modalIsShow = false;
@@ -116,15 +119,6 @@ export default {
     open() {
       this.modalIsShow = true;
     },
-    async getModuleList() {
-      if (!this.filter.appId) return;
-
-      const res = await appModuleList({
-        appId: this.filter.appId,
-      });
-      this.moduleList = res || [];
-      this.moduleList.unshift({ id: null, name: "全部" });
-    },
     search() {
       this.$refs.EditBaseNginxContent.initData();
       this.$refs.EditCommonNginxContent.initData();

src/modules/login/views/Login.vue

@@ -49,7 +49,7 @@
 
 <script>
 import { login } from "../api";
-import { orgTypesList } from "../../admin/api";
+import { orgTypesList, appModuleTypes } from "../../admin/api";
 import { APP_TITLE } from "@/constants/app";
 
 export default {
@@ -97,6 +97,11 @@ export default {
       this.$ls.set("orgTypes", types || []);
       this.$ls.set("orgTypeMap", orgTypeMap);
     },
+    async getModuleTypes() {
+      const res = await appModuleTypes();
+      let moduleTypes = res || [];
+      this.$ls.set("moduleTypes", moduleTypes);
+    },
     async submit(name) {
       const valid = await this.$refs[name].validate().catch(() => {});
       if (!valid) return;
@@ -125,6 +130,7 @@ export default {
       this.$ls.set("privilegeMap", privilegeMap);
 
       await this.getOrgTypes();
+      await this.getModuleTypes();
       this.$router.push({
         name: "Home",
       });