SmartCommunity/operationSupport/src/views/alarmManagement/hydropowerAlarmSetting/popups/add.vue

<template>
    <div class="formContent">
        <el-form ref="form" :model="formData" :rules="rules">
            <div class="formContent-item_title">设置对象</div>
            <el-form-item label="告警名称" prop="name" label-width="80px">
                <el-input v-model="formData.name" clearable placeholder="请输入告警名称"></el-input>
            </el-form-item>
            <el-form-item label="所属社区" prop="communityId" label-width="80px">
                <el-select v-model="formData.communityId" placeholder="请选择社区">
                    <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <div class="formContent-item_title">告警规则</div>
            <div class="flex-contetn">
                <el-form-item label="规则项" prop="type" class="fisrt">
                    <el-select placeholder="状态" v-model="formData.type" clearable>
                        <el-option label="日用水" :value="1"></el-option>
                        <el-option label="月用水" :value="2"></el-option>
                        <el-option label="日用电" :value="3"></el-option>
                        <el-option label="月用电" :value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运算符" prop="operate">
                    <el-select placeholder="状态" v-model="formData.operate" clearable>
                        <el-option label="=" value="="></el-option>
                        <el-option label=">" value=">"></el-option>
                        <el-option label="≥" value="≥"></el-option>
                        <el-option label="＜" value="＜"></el-option>
                        <el-option label="≤" value="≤"></el-option>
                        <el-option label="≠" value="≠"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="条件值" prop="value" class="inputs">
                    <el-input v-model="formData.value" clearable placeholder="请输入数值"></el-input>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    props: ['params'],
    data() {
        return {
            communityArr: [],
            formData: {
                name: '',
                communityId: '',
                type: '',
                operate: '',
                value: '',
                enable:1
            },
            rules: {
                name: [this.$valid.inputRequired('告警名称')],
                communityId: [this.$valid.selectRequired('社区')],
                type: [this.$valid.selectRequired('规则项')],
                operate: [this.$valid.selectRequired('运算符')],
                value: [this.$valid.inputRequired('条件值')]
            }
        };
    },
    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    var loading = this.$loading();
                    let url = '/sc-community/alarmHydropower/add';
                    if (this.params.todo == 'edit') {
                        url = '/sc-community/alarmHydropower/update';
                    }
                    this.$http
                        .post(url, this.formData)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.params.callback();
                                this.$emit('close');
                            } else {
                                this.$message.error(msg);
                            }
                            loading.close();
                        })
                        .catch(() => {
                            loading.close();
                        });
                }
            });
        }
    },
    created() {
        this.communityArr = this.params.communityArr;
        if (this.params.todo == 'edit') {
            this.formData = JSON.parse(JSON.stringify(this.params.data));
        }
    }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.flex-contetn {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #e0e1e3;

    /deep/ .el-form-item__label {
        float: initial;
        display: block;
        text-align: left;
        line-height: rem(40);
        background: #f8fcff;
        padding-left: rem(20);
    }

    /deep/ .el-form-item__content {
        padding: 0 rem(10);
        margin-top: rem(20);
    }
    .inputs {
        /deep/ .el-form-item__content {
            padding-right: rem(20);
        }
    }
    .fisrt {
        /deep/ .el-form-item__content {
            padding-left: rem(20);
        }
    }
}
</style>