nginx配置页面调整

src/assets/styles/home.scss

@@ -310,7 +310,7 @@
 // config-manage-dialog
 .config-manage-dialog {
   .el-dialog__body {
-    padding-top: 85px !important;
+    padding-top: 75px !important;
     height: 100%;
     overflow: hidden;
     display: flex;
@@ -319,10 +319,10 @@
     flex-direction: column;
   }
   .el-dialog__header {
-    padding-top: 20px;
-    padding-bottom: 5px;
+    padding-top: 15px;
+    padding-bottom: 0px;
     .el-dialog__headerbtn {
-      top: 27px;
+      top: 22px;
       width: 20px;
       height: 20px;
     }
@@ -338,6 +338,7 @@
   .config-menu {
     flex-shrink: 0;
     flex-grow: 0;
+    margin-bottom: 12px;
 
     .menu-set {
       flex-shrink: 0;
@@ -503,7 +504,10 @@
 }
 // config-nginx-dialog
 .config-nginx-dialog {
-  .el-dialog__body {
+  .el-row {
+    height: 100%;
+  }
+  .edit-nginx-content {
     height: 100%;
     overflow: hidden;
     display: flex;
@@ -511,14 +515,25 @@
     align-items: stretch;
     flex-direction: column;
   }
-  .part-box-filter {
-    flex-shrink: 0;
+  .tab-btns {
     flex-grow: 0;
+    flex-shrink: 0;
+    min-height: 28px;
+    margin-bottom: 12px;
   }
+
   .nginx-body {
     flex-grow: 2;
     margin: 0;
     overflow: hidden;
+    position: relative;
+    padding-bottom: 50px;
+  }
+  .nginx-body-action {
+    position: absolute;
+    bottom: 10px;
+    right: 20px;
+    z-index: 9;
   }
   .nginx-body-cont {
     height: 100%;
@@ -531,7 +546,7 @@
 
     &.is-none {
       color: $--color-text-gray;
-      line-height: 100px;
+      line-height: 200px;
       text-align: center;
     }
   }

src/modules/admin/components/AppConfigManage.vue

@@ -3,7 +3,6 @@
     <el-dialog
       class="page-dialog config-manage-dialog"
       :visible.sync="modalIsShow"
-      title="应用配置管理"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       append-to-body
@@ -31,6 +30,7 @@
               :clearable="false"
               manual-fetch
               select-default
+              style="width:140px"
             ></version-select>
           </el-form-item>
           <el-form-item prop="moduleId" label="模块">
@@ -58,12 +58,12 @@
         </el-form>
       </div>
 
-      <div class="config-menu box-justify mb-2">
+      <div class="config-menu box-justify">
         <div class="tab-btns tab-nowrap">
           <el-button
             v-for="env in envList"
             :key="env.id"
-            size="medium"
+            size="mini"
             :type="filter.envId == env.id ? 'primary' : 'default'"
             @click="selectEnv(env)"
             >{{ env.name }}

src/modules/admin/components/AppNginxManage.vue

@@ -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();
     }
   }
 };

src/modules/admin/components/EditNginxContent.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="edit-nginx-content">
+    <div class="tab-btns tab-nowrap">
+      <el-button
+        v-for="env in envList"
+        :key="env.id"
+        size="mini"
+        :type="curEnv.id == env.id ? 'primary' : 'default'"
+        @click="selectEnv(env)"
+        >{{ env.name }}
+      </el-button>
+    </div>
+    <div class="part-box part-box-pad nginx-body">
+      <div v-if="checkEditPrivilege()" class="nginx-body-action">
+        <el-button
+          v-if="isEdit"
+          type="primary"
+          size="mini"
+          :loading="loading"
+          @click="confirm"
+          >提交</el-button
+        >
+        <el-button
+          :type="isEdit ? 'success' : 'default'"
+          size="mini"
+          @click="isEdit = !isEdit"
+          >编辑</el-button
+        >
+      </div>
+
+      <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>
+  </div>
+</template>
+
+<script>
+import { appNginxConfig, appNginxConfigUpdate, appEnvList } from "../api";
+
+export default {
+  name: "EditNginxContent",
+  props: {
+    filterData: {
+      type: Object,
+      default() {
+        return {
+          appId: "",
+          moduleId: ""
+        };
+      }
+    },
+    isBaseline: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      envList: [],
+      curEnv: {},
+      nginxContent: "",
+      isEdit: false,
+      loading: false,
+      user: {}
+    };
+  },
+  computed: {
+    IS_MAINTAINER() {
+      return this.curEnv.user && this.curEnv.user.id === this.user.id;
+    }
+  },
+  created() {
+    this.user = this.$ls.get("user", {});
+    this.initData();
+  },
+  methods: {
+    async initData() {
+      if (this.isBaseline) {
+        this.envList = [{ id: null, name: "基线" }];
+      } else {
+        await this.getEnvList();
+      }
+      this.selectEnv(this.envList[0]);
+    },
+    async getEnvList() {
+      const res = await appEnvList({
+        appId: this.filterData.appId,
+        moduleId: this.filterData.moduleId
+      });
+      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")
+        );
+      });
+    },
+    selectEnv(env) {
+      this.curEnv = env || {};
+      this.search();
+      this.isEdit = false;
+    },
+    checkEditPrivilege() {
+      const privilege =
+        (this.checkPrivilege("app_nginx_test_edit") &&
+          this.curEnv.type === "TEST") ||
+        (this.checkPrivilege("app_nginx_prod_edit") &&
+          this.curEnv.type === "PROD") ||
+        (this.checkPrivilege("app_nginx_baseline_edit") && this.isBaseline);
+
+      return privilege || (!this.isBaseline && this.IS_MAINTAINER);
+    },
+    async search() {
+      if (!this.isBaseline && !this.curEnv.id) {
+        this.$message.error("请选择环境！");
+        return;
+      }
+      const data = await appNginxConfig({
+        ...this.filterData,
+        envId: this.curEnv.id
+      });
+      this.nginxContent = data.content || "";
+    },
+    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("保存成功！");
+    }
+  }
+};
+</script>