auth-web/src/pages/log-manage/auth-risk-detection/edit.vue

<template>
  <div>
    <el-form ref="ruleForm" :rules="rules" :model="sizeForm" label-suffix=":" label-position="right" label-width="90px">
      <dg-row>
        <dg-col :span="12">
          <el-form-item label="方案名称" prop="name">
            {{ sizeForm.name }}
            <!-- <el-input
                            v-model.trim="sizeForm.name"
                            show-word-limit
                            placeholder="请输入方案名称"
                            clearable
                            disabled
                        /> -->
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row>
        <dg-col :span="12">
          <el-form-item label="方案状态" prop="state">
            <dg-select
              style="width: 100%"
              v-model="sizeForm.state"
              placeholder="请选择方案状态"
              enum="ProgrammeStateEnum"
            >
            </dg-select>
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row>
        <dg-col :span="24">
          <el-form-item label="检测规则" prop="ruleContent">
            <!-- DSJPFJQFX    DSJPFHBMDMZFX JQBYTJBWZFX -->
            <div v-if="sizeForm.type === 'JQBYTJBWZFX'">
              <p>鉴权时，必要条件不完整。</p>
              <div>
                鉴权类型：
                <dg-radio-group
                  v-model="sizeForm.authType"
                  enum="AuthenticationNecessaryParamEnum"
                  @change="setNecessaryParams"
                  call-off
                ></dg-radio-group>
              </div>
              <div class="form-inline">
                <label>必要参数：</label>
                <dg-checkbox-group
                  v-model="sizeForm.necessaryParams"
                  enum="AuthenticationNecessaryParamEnum"
                  disabled
                ></dg-checkbox-group>
              </div>
            </div>
            <div v-else class="form-inline">
              <el-form-item label="" prop="interval">
                <el-input style="width: 80px" v-model.trim="sizeForm.interval"></el-input>
              </el-form-item>
              &nbsp;{{ ruleText }}&nbsp;
              <el-form-item label="" prop="frequency"
                ><el-input style="width: 80px" v-model.trim="sizeForm.frequency"></el-input>
              </el-form-item>
              &nbsp;次
            </div>
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row>
        <dg-col :span="24">
          <el-form-item label="规则说明" prop="ruleExplain">
            {{ sizeForm.ruleExplain }}
            <!-- <el-input
                            type="textarea"
                            rows="4"
                            v-model.trim="sizeForm.ruleExplain"
                            placeholder="请输入规则说明"
                            clearable
                            show-word-limit
                            disabled
                            maxlength="500"
                        /> -->
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row>
        <dg-col :span="24">
          <el-form-item label="风险内容" prop="contentFormat">
            {{ sizeForm.contentFormat }}
          </el-form-item>
        </dg-col>
      </dg-row>
      <dg-row>
        <dg-col :span="24">
          <el-form-item label="处理意见" prop="handleOpinion">
            <el-input
              type="textarea"
              rows="4"
              v-model.trim="sizeForm.handleOpinion"
              placeholder="请输入处理意见"
              clearable
              show-word-limit
              maxlength="500"
            />
          </el-form-item>
        </dg-col>
      </dg-row>
    </el-form>
    <div class="dg-layer-demo" v-footer>
      <dg-button @click="handleClose">取消</dg-button>
      <dg-button type="primary" @click="handlSave">保存</dg-button>
    </div>
  </div>
</template>

<script>
import { saveAuthRisk } from '@/api/log-manage';

export default {
  name: 'auth-risk-edit',
  props: {
    formData: Object
  },
  computed: {
    ruleText() {
      let str = '';
      const { type } = this.sizeForm;
      if (this.sizeForm.type === 'DSJPFJQFX') {
        str = '分钟内，鉴权次数超过';
      } else if (type === 'DSJPFHBMDMZFX') {
        str = '分钟内，命中红/白名单超过';
      } else if (type === 'YHCXYQFWFX') {
        str = '分钟内，持续越权访问超过';
      }
      return str
    }
  },
  data() {
    return {
      necessaryParams: [],
      sizeForm: {
        interval: '',
        frequency: '',
        authType: '',
        necessaryParams: ''
      },
      rules: {
        handleOpinion: [{ required: true, message: '请输入处理意见', trigger: 'blur' }],
        name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
        interval: [{ required: true, message: '请输入分钟数', trigger: 'blur' }],
        frequency: [{ required: true, message: '请输入次数', trigger: 'blur' }],
        state: [{ required: true, message: '请选择方案状态', trigger: 'blur' }],
        ruleContent: [{ required: true }]
      }
    };
  },
  methods: {
    init() {
      this.sizeForm = Object.assign({}, this.formData, this.sizeForm);
      if (this.sizeForm.type === 'JQBYTJBWZFX') {
        this.necessaryParams = JSON.parse(this.sizeForm.ruleContent);
        if (Array.isArray(this.necessaryParams) && this.necessaryParams.length) {
          this.sizeForm.authType = this.necessaryParams[0].type;
          this.setNecessaryParams(this.sizeForm.authType);
        }
        return;
      }
      const { interval, frequency } = JSON.parse(this.sizeForm.ruleContent);
      this.sizeForm.interval = interval;
      this.sizeForm.frequency = frequency;
    },
    setNecessaryParams(key) {
      const seleted = this.necessaryParams.find((item) => item.type === key);
      if (seleted) {
        this.sizeForm.necessaryParams = seleted.params
          .map((item) => {
            return item.name;
          })
          .join(',');
      }
    },
    handleClose() {
      this.$emit('close');
    },
    async handlSave() {
      const that = this;
      const valid = await new Promise((resolve) => this.$refs.ruleForm.validate(resolve));
      if (!valid) return;

      const sizeForm = { ...this.sizeForm };
      if (['DSJPFHBMDMZFX', 'DSJPFJQFX', 'YHCXYQFWFX'].includes(this.sizeForm.type)) {
        sizeForm.ruleContent = JSON.stringify({ frequency: sizeForm.frequency, interval: sizeForm.interval });
      }
      saveAuthRisk(sizeForm.id, sizeForm)
        .then(() => {
          that.handleClose(true);
          that.$message.success('保存成功');
        })
        .catch((error) => that.$message.error(error));
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.form-inline {
  display: flex;
  label {
    min-width: 5.4em;
  }
}
</style>