SmartCommunity/operationSupport/src/views/payService/systemSetup/stepPage/paymentSetup.vue

<template>
    <div>
        <community-tree @organId="currentOrganId"></community-tree>
        <div class="content-right">
            <el-form ref="form" :model="formData">
                <el-form-item>
                    <div class="item-title">存在未缴费账单，小程序首页强制弹出提示信息</div>
                    <el-radio-group v-model="formData[0].enable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <div class="item-title">存在未缴纳的物业费账单，无法进行水费充值</div>
                    <el-radio-group v-model="formData[1].enable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <div class="item-title">
                        水费预存金额低于
                        <el-input
                            placeholder="请输入金额"
                            v-model="formData[2].amount"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                        ></el-input
                        >元，发送提示信息
                    </div>
                    <el-checkbox-group v-model="listCheckWater">
                        <el-checkbox :label="1">短信</el-checkbox>
                        <el-checkbox :label="2">微信</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <div class="item-title">
                        电费预存金额低于
                        <el-input
                            placeholder="请输入金额"
                            v-model="formData[3].amount"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                        ></el-input
                        >元，发送提示信息
                    </div>
                    <el-checkbox-group v-model="listCheckElectric">
                        <el-checkbox :label="1">短信</el-checkbox>
                        <el-checkbox :label="2">微信</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <div class="item-title">
                        水费预存金额不能大于
                        <el-input
                            placeholder="请输入金额"
                            v-model="formData[8].amount"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                        ></el-input
                        >元
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="item-title">
                        电费预存金额不能大于
                        <el-input
                            placeholder="请输入金额"
                            v-model="formData[9].amount"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                        ></el-input
                        >元
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="item-title">水费收费规则</div>
                    <el-radio-group v-model="formData[4].enable">
                        <el-radio :label="0">按账单收费</el-radio>
                        <el-radio :label="1">预充值，按计费周期扣费</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <div class="item-title">电费收费规则</div>
                    <el-radio-group v-model="formData[5].enable">
                        <el-radio :label="0">按账单收费</el-radio>
                        <el-radio :label="1">预充值，按计费周期扣费</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <div class="item-title">
                        水费计费周期
                        <el-select v-model="formData[6].amount">
                            <el-option v-for="item in 12" :key="item" :label="item" :value="item"></el-option> </el-select
                        >个月
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="item-title">
                        电费计费周期
                        <el-select v-model="formData[7].amount">
                            <el-option v-for="item in 12" :key="item" :label="item" :value="item"></el-option> </el-select
                        >个月
                    </div>
                </el-form-item>
                <el-form-item style="text-align: right">
                    <el-button type="primary" @click="submit">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import communityTree from './communityTree.vue';
export default {
    components: {
        communityTree
    },
    data() {
        return {
            currentId: '',
            listCheckWater: [1],
            listCheckElectric: [1],
            formData: [
                {
                    type: 1,
                    category: 1,
                    enable: 0
                },
                {
                    type: 2,
                    category: 1,
                    enable: 0
                },
                {
                    type: 3,
                    category: 1,
                    enable: null,
                    amount: null
                },
                {
                    type: 4,
                    category: 1,
                    enable: null,
                    amount: null
                },
                {
                    type: 9,
                    category: 1,
                    enable: 0
                },
                {
                    type: 10,
                    category: 1,
                    enable: 0
                },
                {
                    type: 11,
                    category: 1,
                    enable: null,
                    amount: 1
                },
                {
                    type: 12,
                    category: 1,
                    enable: null,
                    amount: 1
                },
                {
                    type: 13,
                    category: 1,
                    enable: null,
                    amount: 1
                },
                {
                    type: 14,
                    category: 1,
                    enable: null,
                    amount: 1
                }
            ],
            initFormData: [
                {
                    type: 1,
                    category: 1,
                    enable: 0
                },
                {
                    type: 2,
                    category: 1,
                    enable: 0
                },
                {
                    type: 3,
                    category: 1,
                    enable: null,
                    amount: null
                },
                {
                    type: 4,
                    category: 1,
                    enable: null,
                    amount: null
                },
                {
                    type: 9,
                    category: 1,
                    enable: 0
                },
                {
                    type: 10,
                    category: 1,
                    enable: 0
                },
                {
                    type: 11,
                    category: 1,
                    enable: null,
                    amount: 1
                },
                {
                    type: 12,
                    category: 1,
                    enable: null,
                    amount: 1
                },
                {
                    type: 13,
                    category: 1,
                    enable: null,
                    amount: 1
                },
                {
                    type: 14,
                    category: 1,
                    enable: null,
                    amount: 1
                }
            ]
        };
    },
    methods: {
        submit() {
            this.formData[2].enable = this.installRules(this.listCheckWater);
            this.formData[3].enable = this.installRules(this.listCheckElectric);
            this.formData.map((item) => {
                item.communityId = this.currentId;
            });
            let url = '/sc-community/systemConfig/batchAdd';
            this.$http
                .post(url, this.formData)
                .then(({ msg, status }) => {
                    this.$message({
                        type: status === 0 ? 'success' : 'error',
                        message: msg
                    });
                })
                .catch(() => {});
        },
        installRules(arr) {
            let thisArr = null;
            if (arr.length) {
                if (arr.length == 2) {
                    thisArr = 3;
                } else {
                    thisArr = arr[0];
                }
            } else {
                thisArr = 0;
            }
            return thisArr;
        },
        getInstallData(arr, num) {
            if (num === 3) {
                this[arr] = [1, 2];
            } else if (num === 0) {
                this[arr] = [];
            } else {
                this[arr] = [num];
            }
        },
        getData() {
            let instaData = { communityId: this.currentId, category: 1, pageNum: 1, pageSize: 10 };
            this.$http
                .post('/sc-community/systemConfig/page', instaData)
                .then(({ data, msg, status }) => {
                    if (data.total == 0) {
                        this.formData = JSON.parse(JSON.stringify(this.initFormData));
                    } else {
                        data.list.forEach((item, index) => {
                            if (item.type == '1') {
                                Object.assign(this.formData[0], item);
                            } else if (item.type == '2') {
                                Object.assign(this.formData[1], item);
                            } else if (item.type == '3') {
                                Object.assign(this.formData[2], item);
                                this.getInstallData('listCheckWater', item.enable);
                            } else if (item.type == '4') {
                                Object.assign(this.formData[3], item);
                                this.getInstallData('listCheckElectric', item.enable);
                            } else if (item.type == '9') {
                                Object.assign(this.formData[4], item);
                            } else if (item.type == '10') {
                                Object.assign(this.formData[5], item);
                            } else if (item.type == '11') {
                                Object.assign(this.formData[6], item);
                            } else if (item.type == '12') {
                                Object.assign(this.formData[7], item);
                            }else if (item.type == '13') {
                                Object.assign(this.formData[8], item);
                            }else if (item.type == '14') {
                                Object.assign(this.formData[9], item);
                            }
                        });
                    }
                    this.$refs.form.resetFields();
                })
                .catch(() => {});
        },
        currentOrganId(data) {
            this.currentId = data.id || '';
            this.getData();
        }
    },

    created() {}
};
</script>
<style scoped lang='scss'>
.content-right {
    background: white;
    font-size: 12px;
    padding: 20px;
    height: calc(100% - 100px);
    .item-title {
        /deep/ .el-input {
            display: inline-block;
            width: 120px;
            margin: 0 10px;
        }
    }
}
</style>