ops-web/src/modules/admin/components/AppNginxManage.vue

<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
              @change="envChange"
            ></env-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="checkPrivilege('app_config_nginx_edit') || IS_MAINTAINER"
          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,
      curSelectEnv: {},
      curSearchEnv: {},
      user: {}
    };
  },
  computed: {
    title() {
      return `应用nginx配置-${this.app.name}`;
    },
    IS_MAINTAINER() {
      return (
        this.curSearchEnv.user && this.curSearchEnv.user.id === this.user.id
      );
    }
  },
  created() {
    this.user = this.$ls.get("user", {});
  },
  methods: {
    visibleChange() {
      this.isEdit = false;
      this.nginxContent = "";
      this.filter = {
        appId: this.app.id,
        moduleId: null,
        envId: null
      };

      this.$nextTick(async () => {
        await this.$refs.EnvSelect.search();
        this.search();
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    envChange(val) {
      this.curSelectEnv = val || {};
    },
    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 || "";
      this.curSearchEnv = { ...this.curSelectEnv };
    },
    async confirm() {
      if (!this.checkPrivilege("app_config_nginx_edit") && !this.IS_MAINTAINER)
        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>