SmartCommunity/operationSupport/src/views/businessManagement/contractManagement/stepPage/stepTwo.vue

<template>
    <div>
        <div class="formContent-item_title">房屋信息</div>

        <el-table :data="$parent.tableArr" style="width: 100%" class="mrbt20">
            <el-table-column prop="communityName" label="所属社区"> </el-table-column>
            <el-table-column prop="buildingName" label="楼栋"> </el-table-column>
            <el-table-column prop="unitName" label="单元"> </el-table-column>
            <el-table-column prop="floorNumber" label="楼层"> </el-table-column>
            <el-table-column prop="roomNumber" label="房间号"> </el-table-column>
            <el-table-column prop="buildingTypeDict" label="房屋类型"> </el-table-column>
            <el-table-column prop="buildingArea" label="建筑面积">
                <template slot-scope="scope">{{
                    !!scope.row.buildingArea ? scope.row.buildingArea + '㎡' : '-'
                }}</template></el-table-column
            >
        </el-table>
        <el-form ref="form" :rules="$parent.idsObjRules" label-width="90px">
            <div v-for="(item, index) in $parent.idsObj" :key="index">
                <el-col :span="12">
                    <el-form-item label="租金规则" :rules="rulesFun('租金规则', item.ruleId)">
                        <el-select v-model="item.ruleId" placeholder="请选择租金规则" clearable @change="ruleIdChange(index, item.ruleId)">
                            <el-option v-for="(item, index) in tegyArr" :key="index" :label="item.chargeName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-table :data="item.thisArr" style="width: 100%; clear: both" class="mrbt20">
                    <el-table-column prop="chargeName" label="费用名称"> </el-table-column>
                    <el-table-column label="计费方式">
                        <template slot-scope="scope">
                            <span v-if="scope.row.chargeMode === 1">固定收费 </span>
                            <span v-if="scope.row.chargeMode === 2">价格*面积收费</span>
                            <span v-if="scope.row.chargeMode === 3">阶梯计费 </span>
                            <span v-if="scope.row.chargeMode === 4">单价*用量</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价"> </el-table-column>
                    <el-table-column label="月租金">
                        <template slot-scope="scope">
                            {{ scope.row.chargePrice }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="roomNumber" label="计费周期">
                        <template slot-scope="scope"> {{ scope.row.chargeCycle || 0 }} 个月 </template>
                    </el-table-column>
                    <el-table-column prop="buildingTypeDict" label="滞纳金标准">
                        <template slot-scope="scope">
                            欠费{{ scope.row.arrearsDays }}天后，收{{ scope.row.lateFee || 0 }} ‰滞纳金
                        </template>
                    </el-table-column>
                    <el-table-column prop="buildingArea" label="递增规则">
                        <template slot-scope="scope">
                            {{ scope.row.increasingYear }}年后，每年递增 {{ scope.row.increasingPercentage || 0 }} %
                        </template></el-table-column
                    >
                </el-table>
                <el-col :span="13">
                    <el-form-item label="免租期">
                        <el-date-picker
                            v-model="item.timesTwo"
                            class="timeWidth"
                            value-format="yyyy-MM"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份"
                            @change="effectiveDateToggle(item, item.timesTwo)"
                            :editable="false"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12"
                    ><el-form-item label="租赁保证金">
                        <el-input v-model="item.earnestMoney" placeholder="请输入租赁保证金"></el-input> </el-form-item
                ></el-col>
                <el-col :span="12"
                    ><el-form-item label="租赁保证金是否抵扣第一期租金：" label-width="220px">
                        <el-radio v-model="item.enable" :label="1">是</el-radio>
                        <el-radio v-model="item.enable" :label="2">否</el-radio>
                    </el-form-item></el-col
                >
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            times: [],
            tegyArr: [],
            thisRule: []
        };
    },
    methods: {
        rulesFun(name, val) {
            return {
                required: true,
                message: `${name}不能为空`,
                trigger: 'change',
                validator(rule, value, cb) {
                    if (!val) {
                        cb(new Error());
                    } else {
                        cb();
                    }
                }
            };
        },
        effectiveDateToggle(item, val) {
            item.freeTime = `${!!val ? val[0] + '###' : ''}${!!val ? val[1] : ''}`;
        },
        ruleIdChange(index, id) {
            if (!!id) {
                this.thisRule.splice(index, 0, 0);
            } else {
                this.thisRule[index] = 1;
            }
            this.tegyArr.map((item) => {
                if (item.id == id) {
                    this.$parent.idsObj[index].thisArr = [item];
                    this.$parent.idsObj[index].chargePrice = item.chargePrice;
                    this.$parent.idsObj[index].cycle = item.chargeCycle;
                    this.$parent.idsObj[index].increasingPercentage = item.increasingPercentage;
                    this.$parent.idsObj[index].increasingYear = item.increasingYear;
                }
            });
        },
        getList() {
            const { formData, idsObj } = this.$parent;
            let arrs = [];
            idsObj.map((item) => {
                arrs.push({
                    amount: item.chargePrice,
                    cycle: item.cycle,
                    earnestMoney: item.earnestMoney,
                    enable: item.enable,
                    endTime: formData.endTime,
                    takeEffectDate: formData.startTime,
                    freeTime: item.freeTime,
                    houseId: item.houseId,
                    increasingPercentage: item.increasingPercentage,
                    increasingYear: item.increasingYear
                });
            });
            this.$http
                .post('/sc-community/contract/getPlans', arrs)
                .then(({ data }) => {
                    idsObj.map((item) => {
                        item.contractPlanDtos = data[item.houseId];
                    });
                })
                .catch(function () {});
        },
        getTegy() {
            this.$http
                .get('/sc-charge/scChargeStrategy/page', { pageNum: 1, pageSize: 15, chargeType: 8 })
                .then(({ data }) => {
                    this.tegyArr = data.list;
                })
                .catch(function () {});
        },
        chanIndexSumit(resolve) {
            if (!!this.thisRule.length) {
                let len = 0;
                this.thisRule.map((item) => {
                    if (item == 0) {
                        len++;
                    }
                });
                if (this.$parent.tableArr.length == len) {
                    resolve && resolve();
                } else {
                    this.$message.info('请选择完规则项');
                }
            } else {
                this.$message.info('请选择规则项');
            }
        }
    },
    created() {
        this.getTegy();
    }
};
</script>
<style lang="scss" scoped>
.formContent-item_title {
    clear: both;
}
.mrbt20 {
    margin-bottom: 20px;
}
/deep/ .el-date-editor .el-range-separator {
    padding: 0;
}
/deep/ .el-form-item__label,
/deep/ .el-input__inner {
    font-size: 12px;
}
</style>