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

<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.filterData,
        envId: this.curEnv.id,
        content: this.nginxContent,
      }).catch(() => {});
      this.loading = false;

      if (!res) return;

      this.$message.success("保存成功！");
    },
  },
};
</script>