auth-web/src/pages/log-manage/err-auth-earlywarning-manage/edit.vue

<!--
 * @Author: Liugh
 * @Date: 2021-05-26 15:09:38
 * @LastEditTime: 2021-05-28 16:36:56
 * @LastEditors: Do not edit
 * @FilePath: \auth-web\src\pages\log-manage\err-auth-earlywarning-manage\edit.vue
 * @Description: 
-->
<template>
    <main class="auth-earlywarning-plan-edit">
        <el-form ref="ruleForm" :model="form" label-width="100px" label-suffix="：">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="方案名称" >
                        <el-input clearable placeholder="请输入方案名称" v-model="form.name" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="方案状态">
                        <dg-select
                            v-model="form.state"
                            placeholder="请选择方案状态"
                            enum="ProgrammeStateEnum"
                            style="width: 100%"
                            clearable
                        >
                        </dg-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="预警规则">
                        <!--TODO 内嵌form  -->
                        <!-- <el-input type="textarea" :rows="2" placeholder="请输入预警规则" v-model="form.textarea"></el-input> -->
                        <el-form-item v-for="(domain, index) in form.ruleContent" :key="index">
                            <div class="time-picker-layer">
                                用户在
                                <dg-time-picker
                                    v-model="domain.time"
                                    type="timerange2"
                                    :picker-options="pickerOptions"
                                    begin-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                >
                                </dg-time-picker>
                                进行鉴权
                                <div class="time-picker-layer_button">
                                    <dg-button circle @click.prevent="addDomain" size="mini">
                                        <i class="el-icon-plus"></i>
                                    </dg-button>
                                    <dg-button circle @click.prevent="removeDomain(domain)" size="mini">
                                        <i class="el-icon-minus"></i>
                                    </dg-button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="规则说明" >
                        <el-input type="textarea" :rows="2" placeholder="请输入规则说明" v-model="form.ruleExplain" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="预警信息">
                        <el-input type="textarea" :rows="2" placeholder="请输入预警信息" v-model="form.contentFormat" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="item.span" v-for="(item, index) in earlyWarningPlanTableInfo" :key="index"> -->
                <!-- <el-form-item :label="item.label">{{ detailInfo[item.value] }} </el-form-item> -->
                <!-- </el-col> -->
            </el-row>
            <el-form-item align="right">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="close">取消</el-button>
            </el-form-item>
        </el-form>
    </main>
</template>

<script>
import { earlyWarningPlanTableInfo } from "../DataConfig";
import { riskProgramme, warningProgrammeInfo } from "@/api/log-manage";
import transferBusinessTagMixin from "@/mixins/transfer-business-tag";

export default {
    name: "auth-earlywarning-plan-edit", // 组件名称
    props: {
        // 接收父组件的数据
        info: Object
    },
    mixins: [transferBusinessTagMixin],
    data() {
        // 组件内部参数
        return {
            earlyWarningPlanTableInfo,
            pickerOptions: {
                start: "00:00",
                step: "01:00",
                end: "23:00"
            },
            form: {
                ruleContent: [
                    {
                        time: ""
                    }
                ]
            }
        };
    },
    components: {}, // 注册局部组件
    computed: {},
    methods: {
        /**
         * @description: 关闭
         */
        close() {
            this.$emit("success");
        },
        /**
         * @description: 提交
         */
        onSubmit() {
            let obj = JSON.parse(JSON.stringify(this.form));
            obj.ruleContent.forEach(item => {
                item.start = parseInt(item.time[0]);
                item.end = parseInt(item.time[1]);
                delete item.time;
            });
            obj.ruleContent = JSON.stringify(obj.ruleContent);
            riskProgramme(obj).then(res => {
                this.$message.success("操作成功");
                this.$emit("success");
            });
        },
        /**
         * @description:添加规则
         * @param {*}
         * @return {*}
         */
        addDomain() {
            this.form.ruleContent.push({
                time: ""
            });
        },
        /**
         * @description:移除规则
         * @param {*} item
         * @return {*}
         */
        removeDomain(item) {
            if (this.form.ruleContent.length <= 1) return;
            var index = this.form.ruleContent.indexOf(item);
            if (index !== -1) {
                this.form.ruleContent.splice(index, 1);
            }
        },
        countTime(val) {
            return val >= 10 ? val + ":00" : "0" + val + ":00";
        },
        /**
         * @description: 获取详情
         */
        getDetail() {
            return new Promise(resolve => {
                warningProgrammeInfo(this.info.id).then(res => {
                    res.ruleContent = JSON.parse(res.ruleContent);
                    res.ruleContent.forEach(item => {
                        item.time = [this.countTime(item.start), this.countTime(item.end)];
                        delete item.start;
                        delete item.end;
                    });
                    this.form = res;
                    console.log(this.form);
                    resolve(res);
                });
            });
        }
    }, // 内部方法
    async created() {
        await this.getDetail();
    }
};
</script>
<style lang="scss">
.auth-earlywarning-plan-edit-layer {
    .time-picker-layer {
        display: flex;
        // align-items: center;
        margin-bottom: 0.75rem;
        &_button {
            margin-left: 0.9375rem;
        }
    }
    .dg-range-editor {
        margin: 0 0.9375rem;
        display: flex;
        // align-items: center;
    }
}
</style>