SmartCommunity/operationSupport/src/views/payService/billingRules/stepPage/add.vue

<template>
    <zz-form :cols="cols" :data="formData" :rules="formRules" ref="form" labelWidth="80">
        <template slot="communityId">
            <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>
        </template>
        <template slot="chargeType">
            <el-select v-model="formData.chargeType">
                <el-option label="物业费" :value="1"></el-option>
                <el-option label="水费" :value="2"></el-option>
                <el-option label="电费" :value="3"></el-option>
            </el-select>
        </template>
        <template slot="chargeMode">
            <el-select v-model="formData.chargeMode">
                <template v-if="formData.chargeType == 1">
                    <el-option label="固定收费" :value="1"></el-option>
                    <el-option label="价格*面积收费" :value="2"></el-option>
                </template>
                <template v-else>
                    <el-option label="单价*用量" :value="2"></el-option>
                    <el-option label="阶梯计费" :value="3"></el-option>
                </template>
            </el-select>
        </template>
        <template slot="chargeCycle">
            <div class="form-item-flex">
                <el-select v-model="formData.chargeCycle" class="select" disabled>
                    <el-option label="1" :value="1"></el-option>
                </el-select>
                <div class="widthFlex">个月</div>
            </div>
        </template>
        <template slot="lateFee">
            <div class="form-item-flex">
                <!-- <el-input-number
                    v-model="formData.lateFee"
                    :precision="2"
                    controls-position="right"
                    :step="0.1"
                    :min="0"
                    :max="100"
                    @change="lateAdd"
                >
                    <i slot="suffix" style="font-style: normal; margin-right: 10px">℃</i>
                </el-input-number> -->
                <el-input
                    class="input-number"
                    v-model="formData.lateFee"
                    :precision="2"
                    controls-position="right"
                    :step="0.1"
                    :min="0"
                    :max="100"
                >
                    <i slot="suffix" style="font-style: normal; margin-right: 70px"
                        >‰
                        <div class="input-button">
                            <span class="button down" @click="lateAdd('-')"><i class="el-icon-arrow-down"></i></span>
                            <span class="button up" @click="lateAdd('+')"><i class="el-icon-arrow-up"></i></span>
                        </div>
                    </i>
                </el-input>
                <el-tooltip class="item" effect="light" placement="right">
                    <div slot="content" v-html="lateFeeMsg"></div>
                    <img src="@/assets/img/menuicon/icon_tishi_zhengchang.png" alt="" />
                </el-tooltip>
                <div>欠费时间(＞)</div>
                <el-input class="input" v-model="formData.arrearsDays" placeholder="请输入天数"></el-input>
                天
            </div>
        </template>
        <template slot="generationRules">
            <el-select v-model="formData.generationRules">
                <el-option label="当月生成上月" :value="1"></el-option>
                <el-option label="当月生成当月" :value="2"></el-option>
            </el-select>
        </template>
        <template :slot="'price' + (index + 1)" v-for="(item, index) in formData.ladderList">
            <div class="form-item-flex just" :key="index">
                <div>价格(元)</div>
                <el-input class="input100" v-model="item.price" placeholder="请输入价格"></el-input>
                <div v-if="formData.chargeType === 2">阶梯水量(吨)</div>
                <div v-if="formData.chargeType === 3">阶梯电量(度)</div>
                <el-input class="input100" v-model="item.quantity" placeholder="请输入用量"></el-input>
                <div class="sunm" @click="addPrice" v-if="index === 0 && formData.ladderList.length < 5">
                    <i class="zoniot_font zoniot-icon-tianjia1"></i>
                </div>
                <div class="sunm" v-else style="cursor: inherit"></div>
                <div class="sunm" @click="delePrice" v-if="index === 0 && formData.ladderList.length > 1">
                    <i class="zoniot_font zoniot-icon-shanjian"></i>
                </div>
                <div class="sunm" v-else style="cursor: inherit"></div>
            </div>
        </template>
    </zz-form>
</template>
<script >
export default {
    props: ['params'],
    data() {
        let _this = this;
        return {
            formData: {
                communityId: '',
                chargeType: 1,
                chargeName: '',
                chargeMode: '',
                chargePrice: '',
                chargeCycle: 1,
                chargeCycleUnit: 1,
                generationRules: '',
                lateFee: 0.0,
                remark: '',
                ladderList: [
                    {
                        ladder: 1,
                        price: '',
                        quantity: ''
                    },
                    {
                        ladder: 2,
                        price: '',
                        quantity: ''
                    }
                ]
            },
            lateFeeMsg: '滞纳金计算规则：</br>月费用*逾期天数*滞纳金标准',
            cols: [
                [
                    {
                        label: '所属社区',
                        prop: 'communityId',
                        slot: 'communityId'
                    },
                    {
                        label: '费用类型',
                        prop: 'chargeType',
                        slot: 'chargeType'
                    },
                    {
                        label: '费用名称',
                        prop: 'chargeName',
                        slot: 'chargeName',
                        input: true
                    },
                    {
                        label: '计费方式',
                        prop: 'chargeMode',
                        slot: 'chargeMode'
                    },
                    {
                        label: '价格(元)',
                        prop: 'chargePrice',
                        input: true
                    },
                    {
                        label: '计费周期',
                        prop: 'chargeCycle',
                        slot: 'chargeCycle'
                    },
                    {
                        label: '收滞纳金',
                        prop: 'lateFee',
                        slot: 'lateFee'
                    },
                    {
                        label: '生成规则',
                        prop: 'generationRules',
                        slot: 'generationRules'
                    },
                    {
                        label: ' 一阶水价',
                        prop: 'price',
                        slot: 'price1',
                        showRequired: true,
                        offShow: true
                    },
                    {
                        label: ' 二阶水价',
                        prop: 'price',
                        slot: 'price2',
                        showRequired: true,
                        offShow: true
                    },
                    {
                        label: ' 三阶水价',
                        prop: 'price',
                        slot: 'price3',
                        showRequired: true,
                        offShow: true
                    },
                    {
                        label: ' 四阶水价',
                        prop: 'price',
                        slot: 'price4',
                        showRequired: true,
                        offShow: true
                    },
                    {
                        label: ' 五阶水价',
                        prop: 'price',
                        slot: 'price5',
                        showRequired: true,
                        offShow: true
                    },
                    {
                        label: '备注信息',
                        prop: 'remark',
                        textarea: true,
                        maxlength: 100
                    }
                ]
            ],

            formRules: {
                chargeName: [this.$valid.inputRequired('费用名称')],
                chargePrice: [this.$valid.inputRequired('价格')],
                chargeMode: [this.$valid.selectRequired('计费方式')],
                chargeType: [this.$valid.selectRequired('费用类型')],
                communityId: [this.$valid.selectRequired('社区')]
            }
        };
    },
    computed: {
        communityArr() {
            return this.$store.getters['getAreaSelect'];
        }
    },
    watch: {
        // 切换是否阶梯
        'formData.chargeMode'(val) {
            if (!!val) {
                this.$refs.form.clearValidate();
                if (val == 2) {
                    this.cols[0][4].offShow = false;
                    this.cols[0][5].offShow = true;

                    for (let a = 0; a < this.formData.ladderList.length; a++) {
                        this.cols[0][8 + a].offShow = true;
                    }
                } else if (val == 3) {
                    this.cols[0][4].offShow = true;
                    this.cols[0][5].offShow = false;

                    for (let a = 0; a < this.formData.ladderList.length; a++) {
                        this.cols[0][8 + a].offShow = false;
                    }
                }
            }
        },
        // 切换电水label
        'formData.chargeType'(val) {
            // this.formData.chargeMode = '';
            let sunm = ['一', '二', '三', '四', '五'];
            let type = '水';
            this.$refs.form.clearValidate();
            if (val === 1) {
                this.cols[0][5].offShow = false;
                this.cols[0][6].offShow = false;
                this.cols[0][7].offShow = false;
            } else {
                this.cols[0][5].offShow = true;
                this.cols[0][6].offShow = true;
                this.cols[0][7].offShow = true;
                if (val === 2) {
                    for (let a = 8; a < 13; a++) {
                        this.cols[0][a].label = sunm[a - 8] + '阶' + type + '价';
                    }
                } else if (val == 3) {
                    type = '电';
                    for (let a = 8; a < 13; a++) {
                        this.cols[0][a].label = sunm[a - 8] + '阶' + type + '价';
                    }
                }
            }
        }
    },
    methods: {
        // 添加删除显示item-label
        addPrice() {
            this.formData.ladderList.push({
                ladder: this.formData.ladderList.length + 1,
                price: '',
                quantity: ''
            });
            for (let a = 0; a < this.formData.ladderList.length; a++) {
                this.cols[0][8 + a].offShow = false;
            }
        },
        delePrice() {
            this.formData.ladderList.splice(this.formData.ladderList.length - 1, 1);
            for (let a = 0; a < 5 - this.formData.ladderList.length; a++) {
                this.cols[0][12 - a].offShow = true;
            }
        },
        lateAdd(fu) {
            if (this.formData.lateFee == null || this.formData.lateFee == undefined) {
                this.formData.lateFee = 0.0;
            }
            let newx = Number(Number(this.formData.lateFee).toFixed(2));
            if (newx >= 0) {
                if (fu === '-') {
                    if (newx <= 0) {
                        this.formData.lateFee = 0.0;
                    } else {
                        this.formData.lateFee = Number(Number(this.formData.lateFee - 0.1).toFixed(2));
                    }
                } else if (fu === '+') {
                    this.formData.lateFee = Number(Number(this.formData.lateFee + 0.1).toFixed(2));
                }
            } else {
                this.formData.lateFee = 0.0;
            }
        },
        submit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                if (!this.checkFromData()) {
                    this.$message.error('阶梯价格与用量必须');
                    return;
                }
                let formData = this.installFromData();
                var loading = this.$loading();
                let url = '/sc-charge/scChargeStrategy/add';
                if (this.params.todo === 'edit') {
                    formData.id = this.params.data.id;
                    url = '/sc-charge/scChargeStrategy/update';
                }
                this.$http
                    .post(url, 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();
                    });
            });
        },
        installFromData() {
            let installData = {
                communityId: this.formData.communityId,
                chargeType: this.formData.chargeType,
                chargeName: this.formData.chargeName,
                chargeMode: this.formData.chargeMode,
                remark: this.formData.remark
            };
            if (this.formData.chargeType === 1) {
                installData.chargePrice = this.formData.chargePrice;
                installData.chargeCycle = this.formData.chargeCycle;
                installData.lateFee = this.formData.lateFee;
                installData.arrearsDays = this.formData.arrearsDays;
                installData.generationRules = this.formData.generationRules;
            } else {
                if (this.formData.chargeMode === 2) {
                    installData.chargePrice = this.formData.chargePrice;
                } else {
                    installData.chargeCycle = this.formData.chargeCycle;
                    installData.ladderList = this.formData.ladderList;
                }
            }
            return installData;
        },
        checkFromData() {
            let isOK = true;
            if (this.formData.chargeMode === 3) {
                this.formData.ladderList.forEach((item) => {
                    if (item.price === '' || item.price == null || item.price == undefined) {
                        isOK = false;
                    }
                    if (item.quantity === '' || item.quantity == null || item.quantity == undefined) {
                        isOK = false;
                    }
                });
            }
            return isOK;
        }
    },
    created() {
        if (this.params.todo == 'edit') {
            Object.assign(this.formData, this.params.data);
            this.formData.ladderList = JSON.parse(this.formData.chargePriceLadder) || this.formData.ladderList;
        }
    }
};
</script>
<style lang="scss" scoped>
.just {
    justify-content: space-between;
}
.form-item-flex {
    display: flex;

    .input {
        width: 110px;
        margin: 0 15px 0 12px;
    }
    .input-number {
        width: 110px;
        /deep/ .el-input--suffix .el-input__inner {
            padding-right: 50px;
        }
        .input-button {
            line-height: 15px;
            .up {
                position: absolute;
                top: 2px;
                height: 16px;
                width: 25px;
                right: -4px;
                border-radius: 0px 4px 0 0;
                background: #f5f7fa;
                border-bottom: 1px solid #dcdfe6;
                border-left: 1px solid #dcdfe6;
            }
            .down {
                position: absolute;
                bottom: 1px;
                height: 16px;
                width: 25px;
                right: -4px;
                background: #f5f7fa;
                border-radius: 0 0 4px 0;
                border-top: 1px solid #dcdfe6;
                border-left: 1px solid #dcdfe6;
            }
        }
    }
    .input100 {
        width: 100px;
    }
    .select {
        width: 360px !important;
    }
    .el-tooltip {
        margin: 10px 10px 0 16px;
        width: 16px;
        height: 16px;
    }
    .widthFlex {
        flex: 1;
        text-align: right;
    }
    .sunm {
        width: 15px;
        text-align: center;
        cursor: pointer;
    }
}
</style>