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

<template>
    <el-form :model="formData" :rules="ruleForm" ref="form" label-width="85px">
        <div class="formContent-item_title">合同信息</div>

        <div>
            <el-col :span="12">
                <el-form-item label="合同编号："> {{ formData.contractNo }} </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="合同时间：">
                    {{ !!formData.startTime ? this.$moment(new Date(formData.startTime)).format('YYYY-MM-DD') : '-' }} 至
                    {{ !!formData.endTime ? this.$moment(new Date(formData.endTime)).format('YYYY-MM-DD') : '-' }}
                </el-form-item>
            </el-col>
            <el-form-item label="续期至" prop="endTimes" label-width="75px">
                <el-date-picker
                    v-model="formData.endTimes"
                    value-format="yyyy-MM-dd"
                    type="date"
                    range-separator="至"
                    placeholder="选择日期"
                    :editable="false"
                ></el-date-picker>
            </el-form-item>
        </div>
        <div class="formContent-item_title blockCl">租金信息</div>
        <el-col :span="12">
            <el-form-item label="租金规则" label-width="75px" required>
                <el-select v-model="formData.ruleId" placeholder="请选择租金规则" disabled>
                    <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="tableArr" style="width: 100%" class="mrbt20">
            <el-table-column prop="chargeName" label="费用名称"> </el-table-column>
            <el-table-column label="计费方式" width="100">
                <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="滞纳金标准" width="180">
                <template slot-scope="scope"> 欠费{{ scope.row.arrearsDays }}天后，收{{ scope.row.lateFee || 0 }} ‰滞纳金 </template>
            </el-table-column>
            <el-table-column prop="buildingArea" label="递增规则" width="180">
                <template slot-scope="scope">
                    {{ scope.row.increasingYear }}年后，每年递增 {{ scope.row.increasingPercentage || 0 }} %
                </template></el-table-column
            >
        </el-table>
    </el-form>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            formData: {
                endTimes: '',
                ruleId: ''
            },
            ruleForm: {
                endTimes: this.$valid.custome({
                    validator(rule, value, cb) {
                        const rl = rule;
                        if (!value) {
                            rl.message = '请选择时间';
                            cb(new Error());
                        } else {
                            cb();
                        }
                    }
                })
            },
            tableArr: [],
            tegyArr: []
        };
    },
    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let installData = { endTime: this.formData.endTimes, id: this.formData.id };
                    var loading = this.$loading();
                    this.$http
                        .post(`/sc-community/contract/leaseRenewal`, installData)
                        .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();
                        });
                }
            });
        },
        findDetali(id, resolve) {
            this.$http
                .get('/sc-community/contract/find/' + id)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        if (data !== null) {
                            Object.assign(this.formData, data);
                            this.formData.endTimes = '';
                        }
                        resolve && resolve(data);
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        getTegy() {
            this.$http
                .get('/sc-charge/scChargeStrategy/page', { pageNum: 1, pageSize: 15, chargeType: 8 })
                .then(({ data }) => {
                    this.tegyArr = data.list;
                })
                .catch(function () {});
        }
    },
    created() {
        const { row } = this.params;
        new Promise((resolve) => {
            this.getTegy();
            this.findDetali(row.id, resolve);
        }).then((data) => {
            data.contractHouseVos.map((item, index) => {
                this.formData.ruleId = item.ruleId;
            });
            this.tegyArr.map((item) => {
                if (item.id == this.formData.ruleId) {
                    this.tableArr.push(item);
                }
            });
        });
    }
};
</script>
<style lang="scss" scoped>
.blockCl {
    clear: both;
}
/deep/ .el-form-item__label,
/deep/ .el-form-item__content,
/deep/ .el-input__inner {
    font-size: 12px;
}
.mrbt20 {
    margin: 20px 0;
}
/deep/ .el-table th {
    background: #f8fcff !important;
}
</style>