应用配置

src/modules/admin/components/AppBaselineManage.vue

@@ -1,62 +1,71 @@
 <template>
   <div class="app-baseline-manage">
-    <div class="part-box part-box-filter part-box-flex">
-      <el-form
-        ref="FilterForm"
-        label-position="left"
-        label-width="80px"
-        :model="filter"
-        :rules="rules"
-        inline
-      >
-        <el-form-item prop="appId" label="应用">
-          <app-select v-model="filter.appId" clearable></app-select>
-        </el-form-item>
-        <el-form-item prop="versionId" label="版本">
-          <app-select
-            v-model="filter.versionId"
-            :app-id="filter.appId"
-            :clearable="false"
-          ></app-select>
-        </el-form-item>
-        <el-form-item prop="moduleId" label="模块">
-          <app-select
-            v-model="filter.moduleId"
-            :app-id="filter.appId"
-            :clearable="false"
-          ></app-select>
-        </el-form-item>
-        <el-form-item label-width="0px">
-          <el-button type="primary" icon="ios-search" @click="search"
-            >查询</el-button
-          >
-          <el-button type="success" icon="md-add" @click="toUpdate"
-            >修改</el-button
-          >
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <div class="part-box part-box-pad">
-      <el-table ref="TableList" :data="dataList">
-        <el-table-column prop="key" label="配置项"> </el-table-column>
-        <el-table-column prop="value" label="配置值"> </el-table-column>
-        <el-table-column prop="mode" label="模式">
-          <span slot-scope="scope">{{ modeMap[scope.row.mode] }}</span>
-        </el-table-column>
-        <el-table-column prop="comment" label="注释"> </el-table-column>
-        <el-table-column label="操作" width="80" class-name="action-column">
-          <template slot-scope="scope">
-            <el-button
-              class="btn-primary"
-              type="text"
-              @click="toEdit(scope.row)"
-              >编辑</el-button
+    <el-dialog
+      class="page-dialog"
+      :visible.sync="modalIsShow"
+      title="应用配置基线管理"
+      top="10px"
+      width="900px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @opened="visibleChange"
+    >
+      <div class="part-box part-box-filter part-box-flex">
+        <el-form
+          ref="FilterForm"
+          label-position="left"
+          label-width="80px"
+          :model="filter"
+          :rules="rules"
+          inline
+        >
+          <el-form-item prop="versionId" label="版本">
+            <version-select
+              v-model="filter.versionId"
+              :app-id="filter.appId"
+              :clearable="false"
+            ></version-select>
+          </el-form-item>
+          <el-form-item prop="moduleId" label="模块">
+            <module-select
+              v-model="filter.moduleId"
+              :app-id="filter.appId"
+              :clearable="false"
+            ></module-select>
+          </el-form-item>
+          <el-form-item label-width="0px">
+            <el-button type="primary" icon="ios-search" @click="search"
+              >查询</el-button
+            >
+            <el-button type="success" icon="md-add" @click="toUpdate"
+              >修改</el-button
             >
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="part-box part-box-pad">
+        <el-table ref="TableList" :data="dataList">
+          <el-table-column prop="key" label="配置项"> </el-table-column>
+          <el-table-column prop="value" label="配置值"> </el-table-column>
+          <el-table-column prop="mode" label="模式">
+            <span slot-scope="scope">{{ modeMap[scope.row.mode] }}</span>
+          </el-table-column>
+          <el-table-column prop="comment" label="注释"> </el-table-column>
+          <el-table-column label="操作" width="80" class-name="action-column">
+            <template slot-scope="scope">
+              <el-button
+                class="btn-primary"
+                type="text"
+                @click="toEdit(scope.row)"
+                >编辑</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
 
     <!-- UpdateAppBaseline -->
     <update-app-baseline
@@ -81,21 +90,23 @@ import ModifyAppBaselineItem from "../components/ModifyAppBaselineItem.vue";
 export default {
   name: "app-baseline-manage",
   components: { UpdateAppBaseline, ModifyAppBaselineItem },
+  props: {
+    app: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
   data() {
     return {
+      modalIsShow: false,
       filter: {
         appId: "",
         moduleId: "",
         versionId: ""
       },
       rules: {
-        appId: [
-          {
-            required: true,
-            message: "请选择应用",
-            triggr: "change"
-          }
-        ],
         moduleId: [
           {
             required: true,
@@ -117,7 +128,19 @@ export default {
     };
   },
   methods: {
+    async visibleChange() {
+      this.filter.appId = this.app.id;
+      // await this.getConfigModes();
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
     async getConfigModes() {
+      if (Object.keys(this.modeMap).length) return;
+
       const data = await appConfigModes();
       let modeMap = {};
       data.forEach(({ code, name }) => {
@@ -139,7 +162,7 @@ export default {
       this.$refs.UpdateAppBaseline.open();
     },
     toEdit(row) {
-      this.curRow = row;
+      this.curRow = { ...row, ...this.filter };
       this.$refs.ModifyAppBaselineItem.open();
     },
     baselineItemModified(data) {

src/modules/admin/components/AppConfigManage.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="app-config-manage">
+    <el-dialog
+      class="page-dialog"
+      :visible.sync="modalIsShow"
+      title="应用配置管理"
+      top="10px"
+      width="900px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @opened="visibleChange"
+    >
+      <div class="part-box part-box-filter part-box-flex">
+        <el-form
+          ref="FilterForm"
+          label-position="left"
+          label-width="80px"
+          :model="filter"
+          :rules="rules"
+          inline
+        >
+          <el-form-item prop="versionId" label="版本">
+            <version-select
+              v-model="filter.versionId"
+              :app-id="filter.appId"
+              :clearable="false"
+            ></version-select>
+          </el-form-item>
+          <el-form-item prop="moduleId" label="模块">
+            <module-select
+              v-model="filter.moduleId"
+              :app-id="filter.appId"
+              :clearable="false"
+            ></module-select>
+          </el-form-item>
+          <el-form-item prop="envId" label="模块">
+            <env-select
+              v-model="filter.envId"
+              :app-id="filter.appId"
+              :clearable="false"
+            ></env-select>
+          </el-form-item>
+          <el-form-item label-width="0px">
+            <el-button type="primary" icon="ios-search" @click="search"
+              >查询</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="part-box part-box-pad">
+        <el-table ref="TableList" :data="dataList">
+          <el-table-column prop="key" label="配置项"> </el-table-column>
+          <el-table-column prop="value" label="配置值"> </el-table-column>
+          <el-table-column prop="mode" label="模式">
+            <span slot-scope="scope">{{ modeMap[scope.row.mode] }}</span>
+          </el-table-column>
+          <el-table-column prop="comment" label="注释"> </el-table-column>
+          <el-table-column label="操作" width="80" class-name="action-column">
+            <template slot-scope="scope">
+              <el-button
+                class="btn-primary"
+                type="text"
+                @click="toEdit(scope.row)"
+                >编辑</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+
+    <modify-app-config
+      ref="ModifyAppConfig"
+      :instance="curRow"
+      @modified="search"
+    ></modify-app-config>
+  </div>
+</template>
+
+<script>
+import { appConfigList, appConfigModes } from "../api";
+import ModifyAppConfig from "./ModifyAppConfig.vue";
+
+export default {
+  name: "app-config-manage",
+  components: {
+    ModifyAppConfig
+  },
+  props: {
+    app: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      filter: {
+        appId: "",
+        moduleId: "",
+        versionId: "",
+        envId: ""
+      },
+      rules: {
+        moduleId: [
+          {
+            required: true,
+            message: "请选择模块",
+            triggr: "change"
+          }
+        ],
+        versionId: [
+          {
+            required: true,
+            message: "请选择版本",
+            triggr: "change"
+          }
+        ],
+        envId: [
+          {
+            required: true,
+            message: "请选择环境",
+            triggr: "change"
+          }
+        ]
+      },
+      dataList: [],
+      curRow: {},
+      modeMap: {}
+    };
+  },
+  methods: {
+    async visibleChange() {
+      this.filter.appId = this.app.id;
+
+      // await this.getConfigModes();
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async getConfigModes() {
+      if (Object.keys(this.modeMap).length) return;
+
+      const data = await appConfigModes();
+      let modeMap = {};
+      data.forEach(({ code, name }) => {
+        modeMap[code] = name;
+      });
+      this.modeMap = modeMap;
+    },
+    async search() {
+      const valid = await this.$refs.FilterForm.validate().catch(() => {});
+      if (!valid) return;
+
+      const data = await appConfigList(this.filter);
+      this.dataList = data;
+    },
+    toEdit(row) {
+      this.curRow = { ...row, ...this.filter };
+      this.$refs.ModifyAppConfig.open();
+    }
+  }
+};
+</script>

src/modules/admin/components/ModifyApp.vue

@@ -82,7 +82,7 @@ export default {
           },
           {
             max: 50,
-            message: "名称不能超过50",
+            message: "名称不能超过50字符",
             trigger: "change"
           }
         ],
@@ -94,7 +94,7 @@ export default {
           },
           {
             max: 50,
-            message: "编码不能超过50",
+            message: "编码不能超过50字符",
             trigger: "change"
           }
         ]

src/modules/admin/components/ModifyAppConfig.vue

@@ -0,0 +1,140 @@
+<template>
+  <el-dialog
+    class="modify-app-config"
+    :visible.sync="modalIsShow"
+    title="应用配置基线配置项修改"
+    top="10vh"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @opened="visibleChange"
+  >
+    <el-form ref="modalFormComp" :model="modalForm" label-width="80px">
+      <el-form-item prop="key" label="配置项：">
+        <el-input
+          v-model.trim="modalForm.key"
+          placeholder="请输入编码"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="value" label="配置值：">
+        <el-input
+          v-model.trim="modalForm.value"
+          placeholder="请输入编码"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="comment" label="注释：">
+        <el-input
+          v-model.trim="modalForm.comment"
+          placeholder="请输入编码"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="danger" @click="cancel" plain>取消</el-button>
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { appConfigItemUpdate } from "../api";
+
+const initModalForm = {
+  appId: "",
+  moduleId: "",
+  versionId: "",
+  envId: "",
+  key: "",
+  value: "",
+  comment: ""
+};
+
+export default {
+  name: "modify-app-config",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm },
+      rules: {
+        key: [
+          {
+            required: true,
+            message: "请输入配置项",
+            trigger: "change"
+          },
+          {
+            max: 100,
+            message: "配置项不能超过100字符",
+            trigger: "change"
+          }
+        ],
+        value: [
+          {
+            required: true,
+            message: "请输入配置值",
+            trigger: "change"
+          },
+          {
+            max: 200,
+            message: "配置值不能超过200字符",
+            trigger: "change"
+          }
+        ],
+        comment: [
+          {
+            max: 200,
+            message: "编码不能超过200字符",
+            trigger: "change"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    initData(val) {
+      this.modalForm = this.$objAssign(initModalForm, val);
+      this.$refs.modalFormComp.clearValidate();
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      let datas = { ...this.modalForm };
+      const data = await appConfigItemUpdate(datas).catch(() => {});
+      this.isSubmit = false;
+
+      if (!data) return;
+
+      this.$message.success("修改成功！");
+      this.$emit("modified", data);
+      this.cancel();
+    }
+  }
+};
+</script>

src/modules/admin/components/ModifyAppEnv.vue

@@ -105,7 +105,7 @@ export default {
           },
           {
             max: 50,
-            message: "名称不能超过50",
+            message: "名称不能超过50字符",
             trigger: "change"
           }
         ],
@@ -117,7 +117,7 @@ export default {
           },
           {
             max: 50,
-            message: "编码不能超过50",
+            message: "编码不能超过50字符",
             trigger: "change"
           }
         ],

src/modules/admin/components/ModifyAppModule.vue

@@ -83,7 +83,7 @@ export default {
           },
           {
             max: 50,
-            message: "名称不能超过50",
+            message: "名称不能超过50字符",
             trigger: "change"
           }
         ],
@@ -95,7 +95,7 @@ export default {
           },
           {
             max: 50,
-            message: "编码不能超过50",
+            message: "编码不能超过50字符",
             trigger: "change"
           }
         ]

src/modules/admin/components/ModifyAppVersion.vue

@@ -81,7 +81,7 @@ export default {
           },
           {
             max: 50,
-            message: "名称不能超过50",
+            message: "名称不能超过50字符",
             trigger: "change"
           }
         ]

src/modules/admin/components/ModifyUser.vue

@@ -121,7 +121,7 @@ export default {
           },
           {
             max: 50,
-            message: "用户名不能超过50",
+            message: "用户名不能超过50字符",
             trigger: "change"
           }
         ],
@@ -133,7 +133,7 @@ export default {
           },
           {
             max: 50,
-            message: "姓名不能超过50",
+            message: "姓名不能超过50字符",
             trigger: "change"
           }
         ],

src/modules/admin/views/AppManage.vue

@@ -118,6 +118,13 @@
     ></app-version-manage>
     <!-- AppEnvManage -->
     <app-env-manage ref="AppEnvManage" :app="curRow"></app-env-manage>
+    <!-- AppConfigManage -->
+    <app-config-manage ref="AppConfigManage" :app="curRow"></app-config-manage>
+    <!-- AppBaselineManage -->
+    <app-baseline-manage
+      ref="AppBaselineManage"
+      :app="curRow"
+    ></app-baseline-manage>
   </div>
 </template>
 
@@ -128,6 +135,8 @@ import AppUserManage from "../components/AppUserManage.vue";
 import AppModuleManage from "../components/AppModuleManage.vue";
 import AppVersionManage from "../components/AppVersionManage.vue";
 import AppEnvManage from "../components/AppEnvManage.vue";
+import AppConfigManage from "../components/AppConfigManage.vue";
+import AppBaselineManage from "../components/AppBaselineManage.vue";
 
 export default {
   name: "app-manage",
@@ -136,7 +145,9 @@ export default {
     AppUserManage,
     AppModuleManage,
     AppVersionManage,
-    AppEnvManage
+    AppEnvManage,
+    AppConfigManage,
+    AppBaselineManage
   },
   data() {
     return {
@@ -208,10 +219,12 @@ export default {
       this.$refs.AppEnvManage.open();
     },
     toEditBaseline(row) {
-      console.log(row);
+      this.curRow = row;
+      this.$refs.AppBaselineManage.open();
     },
     toEditConfig(row) {
-      console.log(row);
+      this.curRow = row;
+      this.$refs.AppConfigManage.open();
     }
   }
 };