nginx配置新增

src/assets/styles/home.scss

@@ -501,3 +501,52 @@
     }
   }
 }
+// config-nginx-dialog
+.config-nginx-dialog {
+  .el-dialog__body {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .part-box-filter {
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+  .nginx-body {
+    flex-grow: 2;
+    margin: 0;
+    overflow: hidden;
+  }
+  .nginx-body-cont {
+    height: 100%;
+    overflow: auto;
+    white-space: pre;
+    padding: 6px 16px;
+    color: $--color-text-dark;
+    font-size: 14px;
+    line-height: 20px;
+
+    &.is-none {
+      color: $--color-text-gray;
+      line-height: 100px;
+      text-align: center;
+    }
+  }
+  .nginx-body-edit {
+    height: 100%;
+
+    .el-textarea {
+      height: 100%;
+    }
+    .el-textarea__inner {
+      height: 100%;
+      resize: none;
+      color: $--color-text-dark;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

src/components/EnvSelect.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/constants/navs.js

@@ -35,7 +35,8 @@ export const ROLE_NAV = {
         "app_config_baseline_edit",
         "app_config_baseline_item_edit",
         "app_config_test",
-        "app_config_prod"
+        "app_config_prod",
+        "app_config_nginx"
       ]
     }
   ],
@@ -50,7 +51,8 @@ export const ROLE_NAV = {
         "app_config_test",
         "app_config_test_item_add",
         "app_config_test_item_edit",
-        "app_config_prod"
+        "app_config_prod",
+        "app_config_nginx"
       ]
     }
   ],
@@ -66,7 +68,9 @@ export const ROLE_NAV = {
         "app_config_test_item_edit",
         "app_config_prod",
         "app_config_prod_item_add",
-        "app_config_prod_item_edit"
+        "app_config_prod_item_edit",
+        "app_config_nginx",
+        "app_config_nginx_edit"
       ]
     }
   ],
@@ -100,7 +104,9 @@ export const ROLE_NAV = {
         "app_config_test_item_edit",
         "app_config_prod",
         "app_config_prod_item_add",
-        "app_config_prod_item_edit"
+        "app_config_prod_item_edit",
+        "app_config_nginx",
+        "app_config_nginx_edit"
       ]
     },
     { url: "UserManage", privilege: ["add", "edit", "resetPwd"] }

src/modules/admin/api.js

@@ -116,3 +116,10 @@ export const appConfigList = datas => {
 export const appConfigItemUpdate = datas => {
   return $postParam("/api/admin/property/item/update", datas);
 };
+// app-nginx
+export const appNginxConfig = datas => {
+  return $postParam("/api/admin/nginx/find", datas);
+};
+export const appNginxConfigUpdate = datas => {
+  return $postParam("/api/admin/nginx/update", datas);
+};

src/modules/admin/components/AppNginxManage.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="app-nginx-manange">
+    <el-dialog
+      class="page-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"
+    >
+      <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="envId" label="环境">
+            <env-select
+              ref="EnvSelect"
+              v-model="filter.envId"
+              :app-id="filter.appId"
+              :clearable="false"
+              manual-fetch
+              select-default
+            ></env-select>
+          </el-form-item>
+          <el-form-item prop="moduleId" label="模块">
+            <module-select
+              ref="ModuleSelect"
+              v-model="filter.moduleId"
+              :app-id="filter.appId"
+              manual-fetch
+            ></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="checkPrivilege('app_config_nginx_edit')"
+          class="part-box-action"
+        >
+          <el-button
+            :type="isEdit ? 'success' : 'default'"
+            @click="isEdit = !isEdit"
+            >编辑</el-button
+          >
+          <el-button type="primary" :loading="loading" @click="confirm"
+            >提交</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-dialog>
+  </div>
+</template>
+
+<script>
+import { appNginxConfig, appNginxConfigUpdate } from "../api";
+
+export default {
+  name: "app-nginx-manange",
+  props: {
+    app: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      filter: {
+        appId: "",
+        moduleId: null,
+        envId: null
+      },
+      searchFilter: {},
+      rules: {
+        envId: [
+          {
+            required: true,
+            type: "number",
+            message: "请选择环境",
+            triggr: "change"
+          }
+        ]
+      },
+      nginxContent: "",
+      isEdit: false,
+      loading: false
+    };
+  },
+  computed: {
+    title() {
+      return `应用nginx配置-${this.app.name}`;
+    }
+  },
+  methods: {
+    async visibleChange() {
+      this.isEdit = false;
+      this.nginxContent = "";
+      this.filter = {
+        appId: this.app.id,
+        moduleId: null,
+        envId: null
+      };
+      await this.$refs.EnvSelect.search();
+      await this.$refs.ModuleSelect.search();
+      this.search();
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async search() {
+      const valid = await this.$refs.FilterForm.validate().catch(() => {});
+      if (!valid) return;
+
+      this.searchFilter = { ...this.filter };
+      const data = await appNginxConfig(this.searchFilter);
+      this.nginxContent = data.content || "";
+    },
+    async confirm() {
+      if (!this.checkPrivilege("app_config_nginx_edit")) 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>

src/modules/admin/views/AppManage.vue

@@ -48,7 +48,7 @@
             >
           </template>
         </el-table-column>
-        <el-table-column label="管理" width="260" class-name="action-column">
+        <el-table-column label="管理" width="320" class-name="action-column">
           <template slot-scope="scope">
             <el-button
               v-if="checkPrivilege('app_user')"
@@ -85,6 +85,13 @@
               @click="toEditConfig(scope.row)"
               >程序配置</el-button
             >
+            <el-button
+              v-if="checkPrivilege('app_config_nginx')"
+              class="btn-primary"
+              type="text"
+              @click="toEditConfigNginx(scope.row)"
+              >nginx配置</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -140,6 +147,12 @@
       ref="AppConfigManage"
       :app="curRow"
     ></app-config-manage>
+    <!-- AppNginxManage -->
+    <app-nginx-manage
+      v-if="checkPrivilege('app_config_nginx')"
+      ref="AppNginxManage"
+      :app="curRow"
+    ></app-nginx-manage>
   </div>
 </template>
 
@@ -151,6 +164,7 @@ 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 AppNginxManage from "../components/AppNginxManage.vue";
 
 export default {
   name: "app-manage",
@@ -160,7 +174,8 @@ export default {
     AppModuleManage,
     AppVersionManage,
     AppEnvManage,
-    AppConfigManage
+    AppConfigManage,
+    AppNginxManage
   },
   data() {
     return {
@@ -224,6 +239,10 @@ export default {
     toEditConfig(row) {
       this.curRow = row;
       this.$refs.AppConfigManage.open();
+    },
+    toEditConfigNginx(row) {
+      this.curRow = row;
+      this.$refs.AppNginxManage.open();
     }
   }
 };