租赁信息页面搭建

guanqb

2024-03-26 fdfa4d9e37e80a2c6baf6a93952534a0620fd069

租赁信息页面搭建

 src/api/rentalInfo/index.js

New file
@@ -0,0 +1,33 @@
import request from "@/router/axios.js"

/**
 * 获得居住证申请记录列表
 * @param {*} params
 * @returns
 */
export const getTaskResidencePermitApplyList = (params) => {
    return request({
        url: "/api/blade-taskResidencePermitApply/taskResidencePermitApply/page",
        method: "get",
        meta: {
            isToken: false,
        },
        params: params,
    })
}

/**
 * 获得出租屋列表
 * @param {*} params
 * @returns
 */
export const getHouseRentalList = (params) => {
    return request({
        url: "/api/blade-houseRental/houseRental/page",
        method: "get",
        meta: {
            isToken: false,
        },
        params: params,
    })
}

 src/router/page/index.js

@@ -20,6 +20,7 @@
const activity = () => import("../../views/activity/index.vue")
const policeInfor = () => import("../../views/policeInfor/index.vue")
const scanOrCode = () => import("../../views/scanOrCode/index.vue")
const rentalInfo = () => import("../../views/rentalInfo/index.vue")
const positionManage = () => import("../../views/positionManage/index.vue")
const practitionersManage = () => import("../../views/practitionersManage/index.vue")
const policeAlarmRecordsManage = () => import("../../views/policeAlarmRecordsManage/index.vue")
@@ -145,6 +146,13 @@
                component: practitionersManage,
            },
            {
                path: "rentalInfo",
                meta: {
                    title: "租赁信息",
                },
                component: rentalInfo,
            },
            {
                path: "policeAlarmRecordsManage",
                meta: {
                    title: "扫码警单",

 src/views/layout/index.vue

@@ -59,20 +59,26 @@
                    <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
                    <div class="userBtn">
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/rentalInfo' ? '#fcbd56' : '#fff' }"
                            @click="goToPage('/layout/rentalInfo')">
                            <i class="el-icon-s-grid"></i>
                            租赁信息
                        </div>
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/positionManage' ? '#fcbd56' : '#fff' }"
                            @click="goToZD">
                            @click="goToPage('/layout/positionManage')">
                            <i class="el-icon-s-grid"></i>
                            阵地管理
                        </div>
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/practitionersManage' ? '#fcbd56' : '#fff' }"
                            @click="goToCYRY">
                            @click="goToPage('/layout/practitionersManage')">
                            <i class="el-icon-s-custom"></i>
                            从业人员
                        </div>
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/policeAlarmRecordsManage' ? '#fcbd56' : '#fff' }"
                            @click="goToSMBJ">
                            @click="goToPage('/layout/policeAlarmRecordsManage')">
                            <i class="el-icon-full-screen"></i>
                            扫码报警
                        </div>
@@ -372,19 +378,9 @@
            })
        },

        // 跳转阵地
        goToZD () {
            this.$router.push('/layout/positionManage')
        },

        // 跳转从业人员管理
        goToCYRY () {
            this.$router.push('/layout/practitionersManage')
        },

        // 跳转扫码报警
        goToSMBJ () {
            this.$router.push('/layout/policeAlarmRecordsManage')
        // 跳转页面
        goToPage (pagePath) {
            this.$router.push(pagePath)
        },

        /**

 src/views/rentalInfo/index.vue

New file
@@ -0,0 +1,203 @@
<template>
    <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"
                    :class="{ on: chooseTab == item }">
                    {{ item }}</div>
            </div>
            <div class="list-container">
                <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>
                        <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>
                        <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 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>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pages all-pagination-sty" ref="tablePagination">
                        <el-pagination background layout="prev, pager, next" :page-size="pages.size"
                            :total="pages.total" :pager-count="4" :current-page="pages.current"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

let loading = null

export default {
    inject: ['userInfo'],

    data () {
        return {
            boxShow: false,
            tabList: ['居住证申请', '出租屋管理', '租客管理'],
            chooseTab: '居住证申请',
            placeName: '',
            typeValue: '',
            typeOptions: [],

            tableData: [],

            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
        }
    },

    created () {
        const that = this

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

    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.$EventBus.$emit('closeMxTileset')
        })
    },

    computed: {
        positionColor () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        },

        positionDisabled () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return false
                } else {
                    return true
                }
            }
        },
    },

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

        // 加载动画
        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    },

    destroyed () {
        loading && loading.close()

        this.$parent.$parent.resize('0px')
    }
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    height: 100%;

    &-content {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;

        .tab {
            width: 40px;

            &>div {
                writing-mode: vertical-lr;
                text-align: center;
                height: 33.3%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                letter-spacing: 6px;
                font-weight: 700;
                background-color: #0838b9e6;
                cursor: pointer;
                border-bottom: 1px solid #3d95f3;
            }

            .on {
                background-color: #3b63cde6;
            }
        }

        .list-container {
            width: 0;
            flex: 1;

            .list {
                display: flex;
                flex-direction: column;

                .pages {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}
</style>