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

<template>
    <el-form :model="formData" label-width="85px">
        <div class="formContent-item_title blockCl">基本信息</div>
        <div>
            <el-col :span="8">
                <el-form-item label="合同编号："> {{ formData.contractNo }} </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="合同类型："> 租赁合同 </el-form-item>
            </el-col>
            <div class="blockCl">
                <el-col :span="8">
                    <el-form-item label="客户类型："> {{ formData.customerType == 1 ? '企业' : '个人' }} </el-form-item></el-col
                >
                <el-col :span="8">
                    <el-form-item label="客户名称："> {{ formData.customerName }} </el-form-item></el-col
                >
                <el-col :span="8">
                    <el-form-item label="企业法人：" label-width="110px"> {{ formData.userName }} </el-form-item></el-col
                >
            </div>

            <div class="blockCl">
                <el-col :span="8">
                    <el-form-item label="法人手机："> {{ formData.customerPhone }} </el-form-item></el-col
                >
                <el-col :span="8">
                    <el-form-item label="联系人："> {{ formData.customerName }} </el-form-item></el-col
                >
                <el-col :span="8">
                    <el-form-item label="联系人手机：" label-width="110px"> {{ formData.customerPhone }} </el-form-item></el-col
                >
            </div>

            <el-col :span="8">
                <el-form-item label="合同时间：">
                    {{ this.$moment(new Date(formData.startTime)).format('YYYY-MM-DD') }} 至
                    {{ this.$moment(new Date(formData.endTime)).format('YYYY-MM-DD') }}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="签订时间：">{{ this.$moment(new Date(formData.signTime)).format('YYYY-MM-DD') }}</el-form-item>
            </el-col>
            <div class="blockCl">
                <el-col :span="8">
                    <el-form-item label="合同附件："> {{ formData.filePath }} </el-form-item></el-col
                >
                <el-col :span="8">
                    <el-form-item label="企业营业执照：" label-width="110px"> {{ formData.businessLicense }} </el-form-item></el-col
                >
            </div>
        </div>

        <div class="formContent-item_title blockCl">金额条款</div>
        <div class="deTitle">房屋信息</div>
        <el-table :data="formData.contractHouseVos" 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 label="房屋类型">
                <template slot-scope="scope">{{ scope.row.buildingType == 1 ? '住宅' : '商业' }}</template>
            </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 class="deTitle">租金信息</div>
        <div v-for="(item, index) in formData.contractHouseVos" :key="index">
            <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-item label="免租期："> {{ ruleText(item.freeTime) }} </el-form-item>
            <el-form-item label="租赁保证金："> {{ item.earnestMoney }} </el-form-item>
        </div>
        <div class="formContent-item_title blockCl">收款计划</div>
        <div v-for="(item, index) in formData.contractHouseVos" :key="index">
            <div class="deTitle">保证金</div>
            <el-table :data="[item]" style="width: 100%" class="mrbt20">
                <el-table-column label="期数"> 第1期</el-table-column>
                <el-table-column label="应收日期">{{ $moment(new Date(formData.startTime)).format('YYYY-MM-DD') }} </el-table-column>
                <el-table-column label="应收金额（元） ">{{ item.earnestMoney }} </el-table-column>
            </el-table>
            <div class="deTitle">租金</div>
            <el-table :data="item.planVos" style="width: 100%" class="mrbt20">
                <el-table-column prop="period" label="期数">
                    <template slot-scope="scope"> 第 {{ scope.row.period || '' }}期 </template>
                </el-table-column>
                <el-table-column label="应收日期" prop="receivableDate">
                    <template slot-scope="scope"> {{ $moment(new Date(scope.row.receivableDate)).format('YYYY-MM-DD') }} </template>
                </el-table-column>
                <el-table-column label="计费周期" prop="cycle"> </el-table-column>
                <el-table-column prop="rent" label="租金（元）"> </el-table-column>
                <el-table-column prop="amount" label="应收金额（元）"> </el-table-column>
            </el-table>
        </div>
    </el-form>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            formData: {
                remark: '',
                contractHouseVos: []
            },
            ruleIdObj: {},
            tableArr: [],
            tegyArr: []
        };
    },
    methods: {
        getTegy() {
            this.$http
                .get('/sc-charge/scChargeStrategy/page', { pageNum: 1, pageSize: 15, chargeType: 8 })
                .then(({ data }) => {
                    this.tegyArr = data.list;
                })
                .catch(function () {});
        },
        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);
                        }
                        resolve && resolve(data);
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        ruleText(val) {
            let newVal = '';
            if (!!val) {
                newVal = val.replace(/###/, '至');
            }
            return newVal;
        }
    },
    created() {
        this.getTegy();
        const { row } = this.params;
        new Promise((resolve) => {
            this.findDetali(row.id, resolve);
        }).then((data) => {
            this.ruleIdObj = data.contractHouseVos[0];
            this.tegyArr.map((item) => {
                if (item.id == this.ruleIdObj.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>