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-option label="租赁费" :value="8"></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 || formData.chargeType == 8">
                    <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">
            <div class="form-item-flex">
                <el-input v-model="formData.chargePrice" placeholder="请输入价格"></el-input>
            </div>
        </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="w-50">
                    <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 || formData.chargeType == 8">
            <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_fuxian@2x.png" alt="" />
                </el-tooltip>
                <div>欠费时间(＞)</div>
                <el-input
                    class="input110"
                    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 == 8">
            <div class="form-item-flex">
                <el-input v-model="formData.increasingYear" class="w150" oninput="value=value.replace(/[^0-9.]/g,'')"> </el-input>
                <span class="marLR15">年后</span>
                <el-input
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    class="w150"
                    v-model="formData.increasingPercentage"
                    placeholder="每年递增"
                >
                </el-input>
                <span class="marLR15">%</span>
            </div>
        </el-form-item>
        <!-- 生成规则除水电费 -->
        <el-form-item label="生成规则" v-if="formData.chargeType !== 2 && formData.chargeType !== 3 && formData.chargeType !== 8">
            <div class="form-item-flex">
                <el-select v-model="formData.generationRules" class="w-50">
                    <el-option label="预生成账单" :value="1"></el-option>
                    <el-option label="后生成账单" :value="2"></el-option>
                </el-select>
                <div class="widthFlex">
                    <el-tooltip class="item" effect="light" placement="left">
                        <div slot="content" v-html="rulesFeeMsg"></div>
                        <img src="@/assets/img/menuicon/icon_tishi_fuxian@2x.png" alt="" />
                    </el-tooltip>
                </div>
            </div>
        </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: '',
                increasingYear: 0,
                increasingPercentage: ''
            },
            lateFeeMsg: '滞纳金计算规则：</br>月费用*逾期天数*滞纳金标准',
            rulesFeeMsg: `预生成账单：下个月1日，按照设置的计费方式、计费周期，生成后几个月的账单</br>后生成账单：下个月1日，按照设置的计费方式、计费周期，生成前几个月的账单`,
            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 || this.formData.chargeType == 8) {
                installData.lateFee = this.formData.lateFee;
                installData.arrearsDays = this.formData.arrearsDays;
            }
            if (this.formData.chargeType !== 2 && this.formData.chargeType !== 3 && this.formData.chargeType !== 8) {
                installData.generationRules = this.formData.generationRules;
                installData.chargeCycle = this.formData.chargeCycle;
            }
            if (this.formData.chargeType == 8) {
                installData.increasingYear = this.formData.increasingYear;
                installData.increasingPercentage = this.formData.increasingPercentage;
                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>
@import './style.scss';
</style>