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

<template>
    <el-form :model="formData" :rules="formRules" label-width="100px" ref="formRu">
        <el-form-item label="所属社区" prop="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>
        </el-form-item>
        <el-form-item label="费用类型" prop="chargeType">
            <el-select v-model="formData.chargeType" @change="chargeTypeToggle">
                <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-option label="卫生费" :value="6"></el-option>
                <el-option label="其他费用" :value="7"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="费用名称" prop="chargeName">
            <el-input v-model="formData.chargeName" placeholder="请输入费用名称"></el-input>
        </el-form-item>
        <el-form-item label="计费方式" prop="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-if="formData.chargeType == 2 || formData.chargeType == 3">
                    <el-option label="单价*用量" :value="4"></el-option>
                </template>
                <template v-else>
                    <el-option label="固定收费" :value="1"></el-option>
                </template>
            </el-select>
        </el-form-item>
        <el-form-item :label="labelActive" prop="chargePrice">
            <el-input v-model="formData.chargePrice" placeholder="请输入费用名称"></el-input>
        </el-form-item>
        <!-- 计费周期除水电费 -->
        <el-form-item label="计费周期" v-if="formData.chargeType !== 2 && formData.chargeType !== 3">
            <div class="form-item-flex">
                <el-select v-model="formData.chargeCycle" class="select">
                    <el-option :label="item" v-for="item in 12" :value="item" :key="item"></el-option>
                </el-select>
                <div class="widthFlex">个月</div>
            </div>
        </el-form-item>
        <!-- 物业费收取滞纳金 -->
        <el-form-item label="收滞纳金" v-if="formData.chargeType === 1">
            <div class="form-item-flex">
                <el-input
                    class="input-number"
                    v-model="formData.lateFee"
                    controls-position="right"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                >
                    <i slot="suffix" style="font-style: normal; margin-right: 70px"
                        >‰
                        <div class="input-button">
                            <span
                                class="button down"
                                @click="formData.lateFee <= 0 ? null : lateAdd('-')"
                                :class="formData.lateFee <= 0 ? 'no-drop' : ''"
                                ><i class="el-icon-arrow-down"></i
                            ></span>
                            <span
                                class="button up"
                                :class="formData.lateFee >= 100 ? 'no-drop' : ''"
                                @click="formData.lateFee >= 100 ? null : 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"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    v-model="formData.arrearsDays"
                    placeholder="请输入天数"
                ></el-input>
                天
            </div>
        </el-form-item>
        <!-- 生成规则除水电费 -->
        <el-form-item label="生成规则" v-if="formData.chargeType !== 2 && formData.chargeType !== 3">
            <el-select v-model="formData.generationRules">
                <el-option label="预生成账单" :value="1"></el-option>
                <el-option label="后生成账单" :value="2"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="desc">
            <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="formData.remark"
                :rows="3"
                maxlength="100"
                show-word-limit
                resize="none"
            ></el-input>
        </el-form-item>
    </el-form>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            formData: {
                communityId: '',
                arrearsDays: '',
                chargeType: 1,
                chargeName: '',
                chargeMode: '',
                chargePrice: '',
                chargeCycle: 1,
                chargeCycleUnit: 1,
                generationRules: '',
                lateFee: 1,
                remark: ''
            },
            lateFeeMsg: '滞纳金计算规则：</br>月费用*逾期天数*滞纳金标准',
            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'];
        },
        labelActive() {
            let text = '价格(元/月)';
            switch (this.formData.chargeType) {
                case 2:
                    text = '价格(元/吨)';
                    break;
                case 3:
                    text = '价格(元/度)';
                    break;
            }
            return text;
        }
    },
    methods: {
        lateAdd(fu) {
            if (this.formData.lateFee == null || this.formData.lateFee == undefined) {
                this.formData.lateFee = 1;
            }
            let newx = Number(this.formData.lateFee);
            if (newx >= 0) {
                if (fu == '-') {
                    this.formData.lateFee = newx - 1;
                } else if (fu == '+') {
                    this.formData.lateFee = newx + 1;
                }
            }
        },
        submit() {
            this.$refs['formRu'].validate((valid) => {
                if (valid) {
                    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();
                        });
                } else {
                    return false;
                }
            });
        },
        installFromData() {
            let installData = {
                communityId: this.formData.communityId,
                chargeType: this.formData.chargeType,
                chargeName: this.formData.chargeName,
                chargeMode: this.formData.chargeMode,
                remark: this.formData.remark,
                chargePrice: this.formData.chargePrice
            };
            if (this.formData.chargeType === 1) {
                installData.lateFee = this.formData.lateFee;
                installData.arrearsDays = this.formData.arrearsDays;
            }
            if (this.formData.chargeType !== 2 && this.formData.chargeType !== 3) {
                installData.generationRules = this.formData.generationRules;
                installData.chargeCycle = this.formData.chargeCycle;
            }
            return installData;
        },
        chargeTypeToggle() {
            this.$refs['formRu'].clearValidate('chargeMode');
            this.formData.chargeMode = '';
        }
    },
    created() {
        if (this.params.todo == 'edit') {
            let paramsData = JSON.parse(JSON.stringify(this.params.data));
            if (paramsData.chargeCycle == null) {
                paramsData.chargeCycle = 1;
            }
            Object.assign(this.formData, paramsData);
        }
    }
};
</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 {
            height: 33px ;
        }
        /deep/ .el-input--suffix .el-input__inner {
            padding-right: 50px;
        }
        .input-button {
            line-height: 15px;
            .button {
                cursor: pointer;
                &.no-drop {
                    cursor: no-drop;
                    background: #dcdfe6;
                }
            }
            .up {
                position: absolute;
                top: 2px;
                height: 16px;
                width: 25px;
                right: -4px;
                border-radius: 0px 4px 0 0;
                background: white;
                border-bottom: 1px solid #dcdfe6;
                border-left: 1px solid #dcdfe6;
            }
            .down {
                position: absolute;
                bottom: 1px;
                height: 16px;
                width: 25px;
                right: -4px;
                background: white;
                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;
        white-space: nowrap;
    }
    .sunm {
        width: 15px;
        text-align: center;
        cursor: pointer;
    }
}
</style>