|
|
@@ -4,11 +4,10 @@
|
|
|
class="page-dialog"
|
|
|
:visible.sync="modalIsShow"
|
|
|
title="应用配置管理"
|
|
|
- top="10px"
|
|
|
- width="900px"
|
|
|
:close-on-click-modal="false"
|
|
|
:close-on-press-escape="false"
|
|
|
append-to-body
|
|
|
+ fullscreen
|
|
|
@opened="visibleChange"
|
|
|
>
|
|
|
<div class="part-box part-box-filter part-box-flex">
|
|
|
@@ -34,23 +33,36 @@
|
|
|
: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-button type="success" icon="md-add" @click="toUpdate"
|
|
|
+ >配置基线修改</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="mb-4 tab-btns tab-nowrap">
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ :type="filter.envId == null ? 'primary' : 'default'"
|
|
|
+ @click="selectEnv({ id: null })"
|
|
|
+ >基线
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ v-for="env in envList"
|
|
|
+ :key="env.id"
|
|
|
+ size="medium"
|
|
|
+ :type="filter.envId == env.id ? 'primary' : 'default'"
|
|
|
+ @click="selectEnv(env)"
|
|
|
+ >{{ env.name }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="part-box part-box-pad">
|
|
|
- <el-table ref="TableList" :data="dataList">
|
|
|
+ <el-table ref="TableList" :data="configList">
|
|
|
<el-table-column prop="key" label="配置项"> </el-table-column>
|
|
|
<el-table-column prop="value" label="配置值"> </el-table-column>
|
|
|
<el-table-column prop="mode" label="模式">
|
|
|
@@ -71,23 +83,41 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
- <modify-app-config
|
|
|
- ref="ModifyAppConfig"
|
|
|
- :instance="curRow"
|
|
|
- @modified="search"
|
|
|
- ></modify-app-config>
|
|
|
+ <!-- UpdateAppBaseline -->
|
|
|
+ <update-app-baseline
|
|
|
+ ref="UpdateAppBaseline"
|
|
|
+ :data="filter"
|
|
|
+ @modified="baselineModified"
|
|
|
+ ></update-app-baseline>
|
|
|
+ <!-- ModifyAppBaselineItem -->
|
|
|
+ <modify-app-baseline-item
|
|
|
+ ref="ModifyAppBaselineItem"
|
|
|
+ :instance="curBaselineItem"
|
|
|
+ @modified="baselineItemModified"
|
|
|
+ ></modify-app-baseline-item>
|
|
|
+ <!-- ModifyAppConfigItem -->
|
|
|
+ <modify-app-config-item
|
|
|
+ ref="ModifyAppConfigItem"
|
|
|
+ :instance="curConfigItem"
|
|
|
+ ></modify-app-config-item>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { appConfigList, appConfigModes } from "../api";
|
|
|
-import ModifyAppConfig from "./ModifyAppConfig.vue";
|
|
|
+import {
|
|
|
+ appConfigBaseline,
|
|
|
+ appConfigModes,
|
|
|
+ appConfigGroups,
|
|
|
+ appEnvList,
|
|
|
+ appConfigList
|
|
|
+} from "../api";
|
|
|
+import UpdateAppBaseline from "../components/UpdateAppBaseline.vue";
|
|
|
+import ModifyAppBaselineItem from "../components/ModifyAppBaselineItem.vue";
|
|
|
+import ModifyAppConfigItem from "../components/ModifyAppConfigItem.vue";
|
|
|
|
|
|
export default {
|
|
|
name: "app-config-manage",
|
|
|
- components: {
|
|
|
- ModifyAppConfig
|
|
|
- },
|
|
|
+ components: { UpdateAppBaseline, ModifyAppBaselineItem, ModifyAppConfigItem },
|
|
|
props: {
|
|
|
app: {
|
|
|
type: Object,
|
|
|
@@ -101,14 +131,16 @@ export default {
|
|
|
modalIsShow: false,
|
|
|
filter: {
|
|
|
appId: "",
|
|
|
- moduleId: "",
|
|
|
- versionId: "",
|
|
|
- envId: ""
|
|
|
+ moduleId: null,
|
|
|
+ versionId: null,
|
|
|
+ envId: null
|
|
|
},
|
|
|
+ searchFilter: {},
|
|
|
rules: {
|
|
|
moduleId: [
|
|
|
{
|
|
|
required: true,
|
|
|
+ type: "number",
|
|
|
message: "请选择模块",
|
|
|
triggr: "change"
|
|
|
}
|
|
|
@@ -116,28 +148,48 @@ export default {
|
|
|
versionId: [
|
|
|
{
|
|
|
required: true,
|
|
|
+ type: "number",
|
|
|
message: "请选择版本",
|
|
|
triggr: "change"
|
|
|
}
|
|
|
- ],
|
|
|
- envId: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择环境",
|
|
|
- triggr: "change"
|
|
|
- }
|
|
|
]
|
|
|
},
|
|
|
- dataList: [],
|
|
|
- curRow: {},
|
|
|
- modeMap: {}
|
|
|
+ configList: [],
|
|
|
+ curConfigItem: {},
|
|
|
+ baselineCaches: {},
|
|
|
+ baselineList: [],
|
|
|
+ curBaselineItem: {},
|
|
|
+ modeMap: {},
|
|
|
+ envList: [],
|
|
|
+ configGroups: [],
|
|
|
+ groupConfigList: []
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
async visibleChange() {
|
|
|
+ await this.getConfigModes();
|
|
|
+ await this.appConfigGroups();
|
|
|
+ if (!this.filter.appId !== this.app.id) this.resetData();
|
|
|
this.filter.appId = this.app.id;
|
|
|
|
|
|
- // await this.getConfigModes();
|
|
|
+ await this.getEnvList();
|
|
|
+ // TODO:选择环境
|
|
|
+ this.selectEnv({ id: null });
|
|
|
+ },
|
|
|
+ resetData() {
|
|
|
+ this.filter = {
|
|
|
+ appId: "",
|
|
|
+ moduleId: null,
|
|
|
+ versionId: null,
|
|
|
+ envId: null
|
|
|
+ };
|
|
|
+ this.searchFilter = {};
|
|
|
+ this.configList = [];
|
|
|
+ this.curConfigItem = {};
|
|
|
+ this.baselineCaches = {};
|
|
|
+ this.baselineList = [];
|
|
|
+ this.curBaselineItem = {};
|
|
|
+ this.envList = [];
|
|
|
},
|
|
|
cancel() {
|
|
|
this.modalIsShow = false;
|
|
|
@@ -145,6 +197,12 @@ export default {
|
|
|
open() {
|
|
|
this.modalIsShow = true;
|
|
|
},
|
|
|
+ async getEnvList() {
|
|
|
+ const res = await appEnvList({
|
|
|
+ appId: this.app.id
|
|
|
+ });
|
|
|
+ this.envList = res || [];
|
|
|
+ },
|
|
|
async getConfigModes() {
|
|
|
if (Object.keys(this.modeMap).length) return;
|
|
|
|
|
|
@@ -155,16 +213,155 @@ export default {
|
|
|
});
|
|
|
this.modeMap = modeMap;
|
|
|
},
|
|
|
+ async appConfigGroups() {
|
|
|
+ if (this.configGroups.length) return;
|
|
|
+
|
|
|
+ const data = await appConfigGroups();
|
|
|
+ this.configGroups = data || [];
|
|
|
+ },
|
|
|
+ selectEnv(env) {
|
|
|
+ this.filter.envId = env.id;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
async search() {
|
|
|
const valid = await this.$refs.FilterForm.validate().catch(() => {});
|
|
|
if (!valid) return;
|
|
|
|
|
|
- const data = await appConfigList(this.filter);
|
|
|
- this.dataList = data;
|
|
|
+ this.searchFilter = { ...this.filter };
|
|
|
+
|
|
|
+ if (this.filter.envId) {
|
|
|
+ await this.getConfigList();
|
|
|
+ this.buildGroupConfigList(this.configList);
|
|
|
+ } else {
|
|
|
+ await this.getBaselineList();
|
|
|
+ this.buildGroupConfigList(this.baselineList);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCacheBaselineList() {
|
|
|
+ const k = [
|
|
|
+ this.searchFilter.appId,
|
|
|
+ this.searchFilter.moduleId,
|
|
|
+ this.searchFilter.versionId
|
|
|
+ ].join("_");
|
|
|
+ return this.baselineCaches[k] || [];
|
|
|
+ },
|
|
|
+ setCacheBaselineList(baseline) {
|
|
|
+ const k = [
|
|
|
+ this.searchFilter.appId,
|
|
|
+ this.searchFilter.moduleId,
|
|
|
+ this.searchFilter.versionId
|
|
|
+ ].join("_");
|
|
|
+ this.baselineCaches[k] = baseline;
|
|
|
+ },
|
|
|
+ async getBaselineList() {
|
|
|
+ const cacheBaseline = this.getCacheBaselineList();
|
|
|
+ if (cacheBaseline.length) {
|
|
|
+ this.baselineList = cacheBaseline;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const data = await appConfigBaseline(this.searchFilter);
|
|
|
+ this.setCacheBaselineList(data);
|
|
|
+ },
|
|
|
+ async getConfigList() {
|
|
|
+ await this.getBaselineList();
|
|
|
+ const data = await appConfigList(this.searchFilter);
|
|
|
+ // TODO:merge config data
|
|
|
+ this.configList = data;
|
|
|
+ },
|
|
|
+ buildGroupConfigList(dataList) {
|
|
|
+ console.log(dataList);
|
|
|
+
|
|
|
+ let groupConfigList = [];
|
|
|
+ dataList.forEach(configItem => {
|
|
|
+ const info = this.getConfigItemGroupPosInfo(configItem.key);
|
|
|
+ if (info) {
|
|
|
+ let group = groupConfigList.find(
|
|
|
+ gitem => gitem.name === info.group.name
|
|
|
+ );
|
|
|
+ if (!group) {
|
|
|
+ group.children = [];
|
|
|
+ groupConfigList.push(group);
|
|
|
+ }
|
|
|
+ group.children.push({
|
|
|
+ ...configItem,
|
|
|
+ available: info.available
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let group = groupConfigList.find(gitem => gitem.name === "other");
|
|
|
+ if (!group) {
|
|
|
+ group = [
|
|
|
+ {
|
|
|
+ name: "other",
|
|
|
+ prefix: "",
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ groupConfigList.push(group);
|
|
|
+ }
|
|
|
+ group.children.push({
|
|
|
+ ...configItem,
|
|
|
+ available: info.available
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ this.groupConfigList = groupConfigList;
|
|
|
+ },
|
|
|
+ getConfigItemGroupPosInfo(configItemKey) {
|
|
|
+ const curGroup = this.configGroups.find(group =>
|
|
|
+ configItemKey.include(group.prefix)
|
|
|
+ );
|
|
|
+ if (!curGroup) return;
|
|
|
+ let groupData = {
|
|
|
+ name: curGroup.name,
|
|
|
+ prefix: curGroup.prefix
|
|
|
+ };
|
|
|
+
|
|
|
+ for (let i = 0; i < curGroup.available.length; i++) {
|
|
|
+ const avai = { ...curGroup.available[i] };
|
|
|
+ if (avai.key.include(".*.")) {
|
|
|
+ const regCont = avai.key
|
|
|
+ .split(".")
|
|
|
+ .join("\\.")
|
|
|
+ .replace("*", ".*");
|
|
|
+ const reg = new RegExp(`^${regCont}$`);
|
|
|
+ if (reg.test(configItemKey)) {
|
|
|
+ return {
|
|
|
+ group: groupData,
|
|
|
+ available: avai
|
|
|
+ };
|
|
|
+ }
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ if (avai.key === configItemKey) {
|
|
|
+ return {
|
|
|
+ group: groupData,
|
|
|
+ available: avai
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async toUpdate() {
|
|
|
+ const valid = await this.$refs.FilterForm.validate().catch(() => {});
|
|
|
+ if (!valid) return;
|
|
|
+
|
|
|
+ this.$refs.UpdateAppBaseline.open();
|
|
|
+ },
|
|
|
+ toEditBaseline(row) {
|
|
|
+ this.curBaselineItem = { ...row, ...this.filter };
|
|
|
+ this.$refs.ModifyAppBaselineItem.open();
|
|
|
+ },
|
|
|
+ toEditConfigItem(row) {
|
|
|
+ this.curConfigItem = { ...row, ...this.filter };
|
|
|
+ this.$refs.ModifyAppConfigItem.open();
|
|
|
+ },
|
|
|
+ baselineItemModified(data) {
|
|
|
+ console.log(data);
|
|
|
},
|
|
|
- toEdit(row) {
|
|
|
- this.curRow = { ...row, ...this.filter };
|
|
|
- this.$refs.ModifyAppConfig.open();
|
|
|
+ baselineModified(data) {
|
|
|
+ this.setCacheBaselineList(data);
|
|
|
}
|
|
|
}
|
|
|
};
|
zhangjie