租赁信息对接

guanqb

2024-03-27 9bd836ce21cf94f4040a49e062863a4d42da785e

租赁信息对接

 src/api/rentalInfo/index.js

@@ -10,7 +10,7 @@
        url: "/api/blade-taskResidencePermitApply/taskResidencePermitApply/page",
        method: "get",
        meta: {
            isToken: false,
            isToken: true,
        },
        params: params,
    })
@@ -26,8 +26,40 @@
        url: "/api/blade-houseRental/houseRental/page",
        method: "get",
        meta: {
            isToken: false,
            isToken: true,
        },
        params: params,
    })
}

/**
 * 获得租客列表
 * @param {*} params
 * @returns
 */
export const getHouseholdSelectTenantList = (params) => {
    return request({
        url: "/api/blade-household/household/selectTenantPage",
        method: "get",
        meta: {
            isToken: true,
        },
        params: params,
    })
}

// /api/blade-system/dict-biz/dictionary?code=rentalUseType
/**
 * 获得字典
 * @param {*} params
 * @returns
 */
export const getDictionaryListByCode = (code) => {
    return request({
        url: `/api/blade-system/dict-biz/dictionary?code=${code}`,
        method: "get",
        meta: {
            isToken: true,
        }
    })
}

 src/styles/media/index.scss

@@ -3208,7 +3208,7 @@
                display: flex;

                .tab-item {
                    padding: 0 10px;
                    padding: 0 countSizeVw(10, 1920);
                    cursor: pointer;
                }

@@ -3252,6 +3252,10 @@
                    padding: countSizeVw(10, 1920);
                }
            }

            .content {
                margin-top: countSizeVh(20);
            }
        }
    }


 src/views/rentalInfo/components/detailDialog.vue

New file
@@ -0,0 +1,119 @@
<template>
    <el-dialog class="syld-details-box prm-dialog-popup business-detail-box" :title="title" append-to-body
        :close-on-click-modal="false" :visible.sync="popupShow" center @close="popupClose">
        <div class="all-box">
            <div class="type-tab-box" v-if="tabList.length != 0">
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == order }" @click="tabClick(order)"
                    v-for="(part, order) in tabList" :key="order">
                    {{ part }}</div>
            </div>
            <div class="content" v-show="chooseTab == 0">
                <div class="item-box" v-for="(item, index) in lableList" :key="index">
                    <div class="label">{{ item.label }}：</div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </div>
            <div class="content" v-show="chooseTab == 1">
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="名称"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phoneNumber" :show-overflow-tooltip="true" label="手机号"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="employer" :show-overflow-tooltip="true" label="工作单位"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="confirmFlag" :show-overflow-tooltip="true" label="审核状态" :key="Math.random()">
                        <template slot-scope="scope">
                            <div>{{ scope.row.confirmFlag == 1 ? '待确认' : '已确认' }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'detailDialog',

    data () {
        return {
            title: '',
            popupShow: false,
            lableList: [],
            chooseTab: 0,
            tabList: [],
            tableData: []
        }
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (row, title, tabList, tableData) {
            this.chooseTab = 0
            this.popupShow = true
            this.lableList = row
            this.title = title
            this.tabList = tabList
            this.tableData = tableData
        },

        // 关闭弹窗按钮
        popupClose () {
            this.popupShow = false
        },

        // 图片转换
        getImgUrls (imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    return 'http://10.141.11.11/place/' + ele
                    // return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

        // tab切换
        tabClick (type) {
            this.chooseTab = type
        },
    },
}
</script>

<style lang="scss" scoped>
:deep(.el-image__error) {
    height: 120px;
}

.all-box {
    display: flex;
    flex-direction: column;

    .content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        .item-box {
            width: 50%;
            display: flex;
            margin-bottom: 20px;


            .label {
                min-width: 120px;
                text-align: right;
                padding-right: 10px;
            }
        }
    }

}
</style>

 src/views/rentalInfo/index.vue

@@ -2,33 +2,48 @@
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="tab">
                <div v-for="(item, index) in tabList" :key="index" @click="chooseTab = item"
                <div v-for="(item, index) in tabList" :key="index" @click="changeTab(item)"
                    :class="{ on: chooseTab == item }">
                    {{ item }}</div>
            </div>
            <div class="list-container">
                <div class="time-select">
                    <div class="search-item-box" style="justify-content: flex-start;">
                        <el-button @click="filterBtn" icon="el-icon-notebook-2" class="bjnr-btn"
                            :class="{ isOneClick: keyManFlag == 3 }">重点人员</el-button>
                    </div>
                </div>
                <div class="list police-info" ref="tableBox">
                    <el-table :data="tableData" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                        :row-class-name="tableRowClassName" class="police-infor-table">
                        <el-table-column prop="name" :show-overflow-tooltip="true" label="名称"
                            v-if="chooseTab == '居住证申请'"></el-table-column>
                            v-if="chooseTab == '居住证申请'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="phone" :show-overflow-tooltip="true" label="联系电话"
                            v-if="chooseTab == '居住证申请'"></el-table-column>
                        <el-table-column prop="confirmFlag" :show-overflow-tooltip="true" label="审核状态"
                            v-if="chooseTab == '居住证申请'"></el-table-column>
                        <el-table-column prop="name" :show-overflow-tooltip="true" label="房屋"
                            v-if="chooseTab == '出租屋管理'"></el-table-column>
                            v-if="chooseTab == '居住证申请'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="address" :show-overflow-tooltip="true" label="地址"
                            v-if="chooseTab == '居住证申请'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="houseName" :show-overflow-tooltip="true" label="房屋"
                            v-if="chooseTab == '出租屋管理'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="phone" :show-overflow-tooltip="true" label="关系"
                            v-if="chooseTab == '出租屋管理'"></el-table-column>
                        <el-table-column prop="confirmFlag" :show-overflow-tooltip="true" label="房屋状态"
                            v-if="chooseTab == '出租屋管理'"></el-table-column>
                            v-if="chooseTab == '出租屋管理'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="houseStatus" :show-overflow-tooltip="true" label="房屋状态"
                            v-if="chooseTab == '出租屋管理'" :key="Math.random()">
                            <template slot-scope="scope">
                                <div>{{ scope.row.houseStatus == 1 ? '部分出租' : '全部出租' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" :show-overflow-tooltip="true" label="名称" v-if="chooseTab == '租客管理'"
                            :key="Math.random()"></el-table-column>
                        <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号"
                            v-if="chooseTab == '租客管理'" :key="Math.random()"></el-table-column>
                        <el-table-column prop="phoneNumber" :show-overflow-tooltip="true" label="手机号"
                            v-if="chooseTab == '租客管理'" :key="Math.random()"></el-table-column>
                        <el-table-column width="80" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
                                    @click="rowClick(scope.row)">
                                    <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                                <el-button type="text" size="small" title="定位" @click="rowClick(scope.row)">
                                    <i class="el-icon-location"></i>
                                </el-button>
                            </template>
                        </el-table-column>
@@ -42,17 +57,21 @@
                </div>
            </div>
        </div>
        <detailDialog ref="detailDialog" />
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import { getTaskResidencePermitApplyList, getHouseRentalList } from "@/api/rentalInfo/index.js"
import { getTaskResidencePermitApplyList, getHouseRentalList, getHouseholdSelectTenantList, getDictionaryListByCode } from "@/api/rentalInfo/index.js"
import detailDialog from './components/detailDialog.vue'

let loading = null

export default {
    inject: ['userInfo'],

    components: { detailDialog },

    data () {
        return {
@@ -66,11 +85,14 @@
            tableData: [],

            pages: {
                current: 1,
                size: 22,
                total: 0,
                pageSize: 25,
                count: 0,
                currentPage: 1
            },
            rentalUseTypeList: [],
            nationTypeList: [],
            keyManFlag: ''
        }
    },

@@ -79,9 +101,8 @@

        that.$nextTick(() => {
            initMapPosition()
            getTaskResidencePermitApplyList({ reportType: 2, current: 1, size: 10 }).then(res => {
                console.log('getTaskResidencePermitApplyList', res)
            })
            this.initTableList()
            this.getDictionaryListByCode()
        })
    },

@@ -116,10 +137,220 @@
    },

    methods: {
        // 重点人员筛选
        filterBtn () {
            if (this.keyManFlag == 3) {
                this.keyManFlag = ''
            } else {
                this.keyManFlag = 3
            }
            this.initTableList()
        },
        // 获取页面所需字典数据
        getDictionaryListByCode () {
            // 用途
            getDictionaryListByCode('rentalUseType').then(res => {
                this.rentalUseTypeList = res.data.data
            })
            // 民族
            getDictionaryListByCode('nationType').then(res => {
                this.nationTypeList = res.data.data
            })
        },

        // 列表操作按钮
        async rowClick (row) {
            console.log('row', row)
            let detailList = []
            let title = ''
            let tabList = []
            let tableData = []
            if (this.chooseTab == '居住证申请') {
                title = '居住证申请详情'
                detailList = [
                    {
                        label: '名称',
                        value: row.name
                    },
                    {
                        label: '联系电话',
                        value: row.phone
                    },
                    {
                        label: '身份证号',
                        value: row.idCard
                    },
                    {
                        label: '地址',
                        value: row.address
                    },
                    {
                        label: '房东姓名',
                        value: row.landlordName
                    },
                    {
                        label: '房东电话',
                        value: row.landlordPhone
                    },
                    {
                        label: '申请事由',
                        value: row.remak
                    },
                    {
                        label: '申请时间',
                        value: row.createTime
                    },
                    {
                        label: '审核状态',
                        value: row.confirmFlag == 1 ? '待审核' : row.confirmFlag == 3 ? '通过' : row.confirmFlag == 4 ? '驳回' : ''
                    },
                    {
                        label: '审核明细',
                        value: row.checkAnoDesc
                    }
                ]
            } else if (this.chooseTab == '出租屋管理') {
                title = '出租屋详情'
                tabList = ['出租屋信息', '租户列表']
                const { data } = await getHouseholdSelectTenantList({ housingRentalId: row.id })
                tableData = data.data.records
                detailList = [
                    {
                        label: '房屋名称',
                        value: row.houseName
                    },
                    {
                        label: '关系',
                        value: row.tenantRelationship ? (row.tenantRelationship == 1 ? '同一户' : '不同一户') : ''
                    },
                    {
                        label: '房屋状态',
                        value: row.houseStatus ? (row.houseStatus == 1 ? '部分出租' : '全部出租') : ''
                    },
                    {
                        label: '用途',
                        value: this.rentalUseTypeList.find(i => i.dictKey == row.rentalUse).dictValue
                    },
                    {
                        label: '租房时间',
                        value: row.rentalTime
                    },
                    {
                        label: '到期时间',
                        value: row.dueTime
                    },
                    {
                        label: '租赁期限',
                        value: row.dldType == 1 ? '长期' : row.dldType == 2 ? '中期' : row.dldType == 3 ? '短期' : ''
                    },
                    {
                        label: '审核状态',
                        value: row.auditStatus == 1 ? '已确认' : '待确认'
                    }
                ]
            } else if (this.chooseTab == '租客管理') {
                title = '租客详情'
                detailList = [
                    {
                        label: '姓名',
                        value: row.name
                    },
                    {
                        label: '身份证号',
                        value: row.idCard
                    },
                    {
                        label: '民族',
                        value: this.nationTypeList.find(i => i.dictKey == row.ethnicity).dictValue
                    },
                    {
                        label: '性别',
                        value: row.gender == 1 ? '男' : '女'
                    },
                    {
                        label: '手机号码',
                        value: row.phoneNumber
                    },
                    {
                        label: '户籍地址',
                        value: row.hukouRegistration
                    },
                    {
                        label: '工作单位',
                        value: row.employer
                    },
                    {
                        label: '小区名称',
                        value: row.aoiName
                    },
                    {
                        label: '审核状态',
                        value: row.confirmFlag == 1 ? '待确认' : '已确认'
                    },
                    {
                        label: '审核明细',
                        value: row.checkAnoDesc
                    }
                ]
            }
            this.$refs.detailDialog.initOpen(detailList, title, tabList, tableData)
        },

        // tab切换事件
        changeTab (item) {
            if (this.chooseTab == item) return
            this.chooseTab = item
            this.pages.currentPage = 1
            this.initTableList()
        },

        // 渲染表格数据
        initTableList () {
            this.loading()
            this.tableData = []
            if (this.chooseTab == '居住证申请') {
                this.getTaskResidencePermitApplyList()
            } else if (this.chooseTab == '出租屋管理') {
                this.getHouseRentalList()
            } else if (this.chooseTab == '租客管理') {
                this.getHouseholdSelectTenantList()
            }
        },

        // 获得居住证申请记录列表
        getTaskResidencePermitApplyList () {
            getTaskResidencePermitApplyList({ reportType: 2, current: this.pages.currentPage, size: this.pages.pageSize, checkFlag: this.keyManFlag }).then(res => {
                console.log('getTaskResidencePermitApplyList', res.data.data.records)
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                loading && loading.close()
            })
        },

        // 获得出租屋列表
        getHouseRentalList () {
            getHouseRentalList({ current: this.pages.currentPage, size: this.pages.pageSize, checkFlag: this.keyManFlag }).then(res => {
                console.log('getHouseRentalList', res.data.data.records)
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                loading && loading.close()
            })
        },

        // 获得租客列表
        getHouseholdSelectTenantList () {
            getHouseholdSelectTenantList({ current: this.pages.currentPage, size: this.pages.pageSize, relationship: 18, checkFlag: this.keyManFlag }).then(res => {
                console.log('getHouseholdSelectTenantList', res.data.data.records)
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                loading && loading.close()
            })
        },

        // 分页处理
        handleCurrentChange (current) {
            this.pages.current = current
            this.getFrontPage()
            this.initTableList()
        },

        // 加载动画
@@ -186,6 +417,9 @@
        .list-container {
            width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;

            .list {
                display: flex;
@@ -197,6 +431,10 @@
                    justify-content: center;
                }
            }

            .isOneClick {
                color: #fcbd56 !important;
            }
        }
    }
}