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

<template>
    <el-form ref="form" :model="$parent.formData" :rules="$parent.formRules" label-width="90px">
        <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>
        <div v-for="(item, index) in $parent.idsObj" :key="index">
            <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-table :data="item.thisArr" style="width: 100%" 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="daterange"
                        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>
</template>
<script>
export default {
    data() {
        return {
            times: [],
            tegyArr: [],
            formRules: {}
        };
    },
    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) {
            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];
                        //   item.chargeCycle = data[item.houseId].cycle
                    });
                    console.log(idsObj);
                })
                .catch(function () {});
        },
        getTegy() {
            this.$http
                .get('/sc-charge/scChargeStrategy/page', { pageNum: 1, pageSize: 15, chargeType: 8 })
                .then(({ data }) => {
                    this.tegyArr = data.list;
                })
                .catch(function () {});
        }
    },
    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>