配置细节优化

src/assets/styles/home.scss

@@ -253,8 +253,15 @@
   display: inline-block;
   vertical-align: top;
 
+  > span {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
   > i {
     font-size: 16px;
+    display: inline-block;
+    vertical-align: middle;
   }
 }
 .user-name {
@@ -266,6 +273,7 @@
   font-weight: 600;
   > i {
     margin-right: 5px;
+    margin-top: 2px;
   }
 }
 .user-logout {

src/components/ModuleSelect.vue

@@ -28,7 +28,15 @@ export default {
     placeholder: { type: String, default: "请选择模块" },
     value: { type: [Number, String], default: "" },
     clearable: { type: Boolean, default: true },
-    appId: { type: [String, Number], default: "" }
+    appId: { type: [String, Number], default: "" },
+    manualFetch: {
+      type: Boolean,
+      default: false
+    },
+    selectDefault: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -63,6 +71,31 @@ export default {
         appId: this.appId
       });
       this.optionList = res || [];
+
+      if (!this.selectDefault) return;
+
+      if (this.value) {
+        const option = this.optionList.find(item => item.id === this.value);
+        if (option) {
+          this.$emit("input", this.value);
+          this.$emit("change", option);
+        } else {
+          this.selectFirst();
+        }
+      } else {
+        this.selectFirst();
+      }
+    },
+    selectFirst() {
+      if (!this.optionList.length) {
+        this.selected = "";
+        this.$emit("input", this.selected);
+        this.$emit("change", {});
+        return;
+      }
+      this.selected = this.optionList[0].id;
+      this.$emit("input", this.selected);
+      this.$emit("change", this.optionList[0]);
     },
     select() {
       this.$emit("input", this.selected);

src/components/VersionSelect.vue

@@ -35,6 +35,14 @@ export default {
       default() {
         return [];
       }
+    },
+    manualFetch: {
+      type: Boolean,
+      default: false
+    },
+    selectDefault: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -59,7 +67,7 @@ export default {
     }
   },
   created() {
-    this.search();
+    if (!this.manualFetch) this.search();
   },
   methods: {
     async search() {
@@ -72,6 +80,31 @@ export default {
         pageSize: 100
       });
       this.optionList = res.records;
+
+      if (!this.selectDefault) return;
+
+      if (this.value) {
+        const option = this.optionList.find(item => item.id === this.value);
+        if (option) {
+          this.$emit("input", this.value);
+          this.$emit("change", option);
+        } else {
+          this.selectFirst();
+        }
+      } else {
+        this.selectFirst();
+      }
+    },
+    selectFirst() {
+      if (!this.optionList.length) {
+        this.selected = "";
+        this.$emit("input", this.selected);
+        this.$emit("change", {});
+        return;
+      }
+      this.selected = this.optionList[0].id;
+      this.$emit("input", this.selected);
+      this.$emit("change", this.optionList[0]);
     },
     select() {
       this.$emit("input", this.selected);

src/modules/admin/components/AppConfigManage.vue

@@ -12,6 +12,7 @@
     >
       <div class="part-box part-box-filter" slot="title">
         <el-form
+          v-if="modalIsShow"
           ref="FilterForm"
           label-position="left"
           label-width="80px"
@@ -24,16 +25,22 @@
           </el-form-item>
           <el-form-item prop="versionId" label="版本">
             <version-select
+              ref="VersionSelect"
               v-model="filter.versionId"
               :app-id="filter.appId"
               :clearable="false"
+              manual-fetch
+              select-default
             ></version-select>
           </el-form-item>
           <el-form-item prop="moduleId" label="模块">
             <module-select
+              ref="ModuleSelect"
               v-model="filter.moduleId"
               :app-id="filter.appId"
               :clearable="false"
+              manual-fetch
+              select-default
             ></module-select>
           </el-form-item>
           <el-form-item label-width="0px">
@@ -54,25 +61,13 @@
       <div class="config-menu box-justify mb-2">
         <div class="tab-btns tab-nowrap">
           <el-button
-            v-if="checkPrivilege('app_config_baseline')"
+            v-for="env in envList"
+            :key="env.id"
             size="medium"
-            :type="filter.envId == null ? 'primary' : 'default'"
-            @click="selectEnv({ id: null })"
-            >基线
+            :type="filter.envId == env.id ? 'primary' : 'default'"
+            @click="selectEnv(env)"
+            >{{ env.name }}
           </el-button>
-          <template v-for="env in envList">
-            <el-button
-              v-if="
-                (checkPrivilege('app_config_test') && env.type === 'TEST') ||
-                  (checkPrivilege('app_config_prod') && env.type === 'PROD')
-              "
-              :key="env.id"
-              size="medium"
-              :type="filter.envId == env.id ? 'primary' : 'default'"
-              @click="selectEnv(env)"
-              >{{ env.name }}
-            </el-button>
-          </template>
         </div>
         <div class="menu-set" v-if="!IS_BASELINE">
           <el-checkbox v-model="hideReadonly">隐藏只读配置</el-checkbox>
@@ -269,9 +264,11 @@ export default {
       await this.appConfigGroups();
       if (!this.filter.appId !== this.app.id) this.resetData();
       this.filter.appId = this.app.id;
+      await this.$refs.VersionSelect.search();
+      await this.$refs.ModuleSelect.search();
 
       await this.getEnvList();
-      this.selectEnv({ id: null });
+      this.selectEnv(this.envList[0]);
     },
     resetData() {
       this.filter = {
@@ -320,7 +317,17 @@ export default {
       const res = await appEnvList({
         appId: this.app.id
       });
-      this.envList = res || [];
+      let envList = res || [];
+      const testValid = this.checkPrivilege("app_config_test");
+      const prodValid = this.checkPrivilege("app_config_prod");
+      this.envList = envList.filter(env => {
+        return (
+          (testValid && env.type === "TEST") ||
+          (prodValid && env.type === "PROD")
+        );
+      });
+      if (this.checkPrivilege("app_config_baseline"))
+        this.envList.unshift({ id: null, name: "基线" });
     },
     async getConfigModes() {
       if (Object.keys(this.modeMap).length) return;

src/modules/admin/components/ModifyAppConfigItem.vue

@@ -173,7 +173,13 @@ export default {
         value: [
           {
             required: true,
-            message: "请设置配置值",
+            validator: (rule, value, callback) => {
+              if (value === "" || value === null) {
+                callback(new Error("请设置配置值"));
+              } else {
+                callback();
+              }
+            },
             trigger: "change"
           }
         ]
@@ -216,10 +222,15 @@ export default {
       );
       this.isStrictKey = !this.selectAvailableKey.includes(".*.");
       this.modalForm.key = this.selectAvailableKey;
-      this.modalForm.value = this.selectAvailable.defaultValue || null;
+      this.modalForm.value = this.isEmpty(this.selectAvailable.defaultValue)
+        ? null
+        : this.selectAvailable.defaultValue;
       this.available = this.selectAvailable;
       this.$refs.modalFormComp.validate().catch(() => {});
     },
+    isEmpty(val) {
+      return val === null || val === "" || val === undefined;
+    },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;

src/modules/admin/views/AppManage.vue

@@ -31,17 +31,7 @@
         <el-table-column prop="id" label="ID" width="80"></el-table-column>
         <el-table-column prop="name" label="名称"> </el-table-column>
         <el-table-column prop="code" label="编码"> </el-table-column>
-        <el-table-column prop="masterVersionName" label="主干版本">
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="170">
-          <span slot-scope="scope">{{
-            scope.row.createTime | timestampFilter
-          }}</span>
-        </el-table-column>
-        <el-table-column prop="updateTime" label="修改时间" width="170">
-          <span slot-scope="scope">{{
-            scope.row.updateTime | timestampFilter
-          }}</span>
+        <el-table-column prop="masterVersionName" label="主干版本" width="120">
         </el-table-column>
         <el-table-column
           v-if="checkPrivilege('app_edit')"
@@ -58,7 +48,7 @@
             >
           </template>
         </el-table-column>
-        <el-table-column label="管理" width="220" class-name="action-column">
+        <el-table-column label="管理" width="260" class-name="action-column">
           <template slot-scope="scope">
             <el-button
               v-if="checkPrivilege('app_user')"
@@ -93,7 +83,7 @@
               class="btn-primary"
               type="text"
               @click="toEditConfig(scope.row)"
-              >配置</el-button
+              >程序配置</el-button
             >
           </template>
         </el-table-column>