|
|
@@ -1,17 +1,16 @@
|
|
|
<template>
|
|
|
<div class="app-nginx-manange">
|
|
|
<el-dialog
|
|
|
- class="page-dialog config-nginx-dialog"
|
|
|
+ class="page-dialog config-manage-dialog config-nginx-dialog"
|
|
|
:visible.sync="modalIsShow"
|
|
|
- :title="title"
|
|
|
- width="1000px"
|
|
|
:close-on-click-modal="false"
|
|
|
:close-on-press-escape="false"
|
|
|
append-to-body
|
|
|
fullscreen
|
|
|
- @opened="visibleChange"
|
|
|
+ @opened="visibleChange(1)"
|
|
|
+ @closed="visibleChange(0)"
|
|
|
>
|
|
|
- <div class="part-box part-box-filter part-box-flex">
|
|
|
+ <div class="part-box part-box-filter" slot="title">
|
|
|
<el-form
|
|
|
ref="FilterForm"
|
|
|
label-position="left"
|
|
|
@@ -19,69 +18,53 @@
|
|
|
:model="filter"
|
|
|
inline
|
|
|
>
|
|
|
- <el-form-item prop="envId" label="环境">
|
|
|
- <el-select
|
|
|
- v-model="filter.envId"
|
|
|
- placeholder="请选择环境"
|
|
|
- @change="envChange"
|
|
|
- >
|
|
|
+ <el-form-item>
|
|
|
+ <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 envList"
|
|
|
+ v-for="item in moduleList"
|
|
|
:key="item.id"
|
|
|
:label="item.name"
|
|
|
:value="item.id"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="moduleId" label="模块">
|
|
|
- <module-select
|
|
|
- ref="ModuleSelect"
|
|
|
- v-model="filter.moduleId"
|
|
|
- :app-id="filter.appId"
|
|
|
- ></module-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 v-if="checkEditPrivilege()" class="part-box-action">
|
|
|
- <el-button
|
|
|
- v-if="isEdit"
|
|
|
- type="primary"
|
|
|
- :loading="loading"
|
|
|
- @click="confirm"
|
|
|
- >提交</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- :type="isEdit ? 'success' : 'default'"
|
|
|
- @click="isEdit = !isEdit"
|
|
|
- >编辑</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="part-box part-box-pad nginx-body">
|
|
|
- <div
|
|
|
- v-if="!isEdit"
|
|
|
- :class="['nginx-body-cont', { 'is-none': !nginxContent }]"
|
|
|
- >
|
|
|
- {{ nginxContent || "暂无内容" }}
|
|
|
- </div>
|
|
|
- <div v-else class="nginx-body-edit">
|
|
|
- <el-input v-model="nginxContent" type="textarea"></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-row v-if="dataReady" type="flex" :gutter="20">
|
|
|
+ <el-col v-if="hasBaselinePrivilege" :span="12">
|
|
|
+ <edit-nginx-content
|
|
|
+ ref="EditBaseNginxContent"
|
|
|
+ :filter-data="filter"
|
|
|
+ is-baseline
|
|
|
+ ></edit-nginx-content>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="hasBaselinePrivilege ? 12 : 24">
|
|
|
+ <edit-nginx-content
|
|
|
+ ref="EditCommonNginxContent"
|
|
|
+ :filter-data="filter"
|
|
|
+ ></edit-nginx-content>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { appNginxConfig, appNginxConfigUpdate, appEnvList } from "../api";
|
|
|
+import EditNginxContent from "./EditNginxContent.vue";
|
|
|
+import { appModuleList } from "../api";
|
|
|
|
|
|
export default {
|
|
|
name: "app-nginx-manange",
|
|
|
+ components: { EditNginxContent },
|
|
|
props: {
|
|
|
app: {
|
|
|
type: Object,
|
|
|
@@ -95,51 +78,34 @@ export default {
|
|
|
modalIsShow: false,
|
|
|
filter: {
|
|
|
appId: "",
|
|
|
- moduleId: null,
|
|
|
- envId: null
|
|
|
+ moduleId: null
|
|
|
},
|
|
|
- searchFilter: {},
|
|
|
- nginxContent: "",
|
|
|
- envList: [],
|
|
|
- isEdit: false,
|
|
|
- loading: false,
|
|
|
- curSelectEnv: {},
|
|
|
- curSearchEnv: {},
|
|
|
- user: {}
|
|
|
+ moduleList: [],
|
|
|
+ dataReady: false,
|
|
|
+ hasBaselinePrivilege: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
title() {
|
|
|
return `应用nginx配置-${this.app.name}`;
|
|
|
- },
|
|
|
- IS_BASELINE() {
|
|
|
- return this.filter.envId === null;
|
|
|
- },
|
|
|
- IS_MAINTAINER() {
|
|
|
- return (
|
|
|
- this.curSearchEnv.user && this.curSearchEnv.user.id === this.user.id
|
|
|
- );
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.user = this.$ls.get("user", {});
|
|
|
+ this.hasBaselinePrivilege = this.checkPrivilege("app_nginx_baseline");
|
|
|
},
|
|
|
methods: {
|
|
|
- visibleChange() {
|
|
|
- this.isEdit = false;
|
|
|
- this.nginxContent = "";
|
|
|
- this.filter = {
|
|
|
- appId: this.app.id,
|
|
|
- moduleId: null,
|
|
|
- envId: null
|
|
|
- };
|
|
|
+ async visibleChange(visible) {
|
|
|
+ if (visible) {
|
|
|
+ this.filter = {
|
|
|
+ appId: this.app.id,
|
|
|
+ moduleId: null
|
|
|
+ };
|
|
|
|
|
|
- this.$nextTick(async () => {
|
|
|
- await this.getEnvList();
|
|
|
- this.filter.envId = this.envList[0] && this.envList[0].id;
|
|
|
- this.curSelectEnv = this.envList[0] || {};
|
|
|
- this.search();
|
|
|
- });
|
|
|
+ await this.getModuleList();
|
|
|
+ this.dataReady = true;
|
|
|
+ } else {
|
|
|
+ this.dataReady = false;
|
|
|
+ }
|
|
|
},
|
|
|
cancel() {
|
|
|
this.modalIsShow = false;
|
|
|
@@ -147,69 +113,18 @@ export default {
|
|
|
open() {
|
|
|
this.modalIsShow = true;
|
|
|
},
|
|
|
- async getEnvList() {
|
|
|
- const res = await appEnvList({
|
|
|
- appId: this.app.id
|
|
|
- });
|
|
|
- let envList = res || [];
|
|
|
- const testValid = this.checkPrivilege("app_nginx_test");
|
|
|
- const prodValid = this.checkPrivilege("app_nginx_prod");
|
|
|
- this.envList = envList.filter(env => {
|
|
|
- return (
|
|
|
- (testValid && env.type === "TEST") ||
|
|
|
- (prodValid && env.type === "PROD")
|
|
|
- );
|
|
|
- });
|
|
|
- if (this.checkPrivilege("app_nginx_baseline"))
|
|
|
- this.envList.unshift({ id: null, name: "基线" });
|
|
|
- },
|
|
|
- envChange() {
|
|
|
- const curSearchEnv = this.envList.find(
|
|
|
- item => item.id === this.filter.envId
|
|
|
- );
|
|
|
- this.curSelectEnv = curSearchEnv || {};
|
|
|
- this.search();
|
|
|
- },
|
|
|
- checkEditPrivilege() {
|
|
|
- const privilege =
|
|
|
- (this.checkPrivilege("app_nginx_test_edit") &&
|
|
|
- this.curSelectEnv.type === "TEST") ||
|
|
|
- (this.checkPrivilege("app_nginx_prod_edit") &&
|
|
|
- this.curSelectEnv.type === "PROD") ||
|
|
|
- (this.checkPrivilege("app_nginx_baseline_edit") && this.IS_BASELINE);
|
|
|
+ async getModuleList() {
|
|
|
+ if (!this.filter.appId) return;
|
|
|
|
|
|
- return privilege || (!this.IS_BASELINE && this.IS_MAINTAINER);
|
|
|
- },
|
|
|
- async search() {
|
|
|
- this.searchFilter = { ...this.filter };
|
|
|
- const data = await appNginxConfig(this.searchFilter);
|
|
|
- this.nginxContent = data.content || "";
|
|
|
- this.curSearchEnv = { ...this.curSelectEnv };
|
|
|
+ const res = await appModuleList({
|
|
|
+ appId: this.filter.appId
|
|
|
+ });
|
|
|
+ this.moduleList = res || [];
|
|
|
+ this.moduleList.unshift({ id: null, name: "全部" });
|
|
|
},
|
|
|
- async confirm() {
|
|
|
- if (!this.checkEditPrivilege()) return;
|
|
|
-
|
|
|
- if (!this.nginxContent) {
|
|
|
- this.$message.error("请输入配置内容！");
|
|
|
- return;
|
|
|
- }
|
|
|
- if (this.nginxContent.length > 9999) {
|
|
|
- this.$message.error("请输入配置内容过长！");
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if (this.loading) return;
|
|
|
- this.loading = true;
|
|
|
-
|
|
|
- const res = await appNginxConfigUpdate({
|
|
|
- ...this.filter,
|
|
|
- content: this.nginxContent
|
|
|
- }).catch(() => {});
|
|
|
- this.loading = false;
|
|
|
-
|
|
|
- if (!res) return;
|
|
|
-
|
|
|
- this.$message.success("保存成功！");
|
|
|
+ search() {
|
|
|
+ this.$refs.EditBaseNginxContent.initData();
|
|
|
+ this.$refs.EditCommonNginxContent.initData();
|
|
|
}
|
|
|
}
|
|
|
};
|
zhangjie