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="请选择方案状态"
                            code="DM_APPLY_STATUS"
                        >
                        </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="AuthenticationTypeEnum"
                                    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() {
            if (this.sizeForm.type === "DSJPFJQFX") return "分钟内，鉴权次数超过";
            return "分钟内，命中红/白名单超过";
        }
    },
    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("success", true);
        },
        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"].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.$notify.error({ title: "错误", message: error }));
        }
    },
    created() {
        this.init();
    }
};
</script>

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