SmartCommunity/operationSupport/src/views/ownerManagement/details.vue

<template>
    <div class="main">
        <div class="top-title">
            <h1>{{ detailsData.name }} <span class="titleType">业主</span></h1>
            <el-button class="right" type="primary" @click="close()">返回</el-button>
            <div class="text">
                <span>手机号：{{ detailsData.phone }}</span> <span>身份证号：{{ detailsData.idNumber }}</span>
            </div>
        </div>
        <div class="content">
            <div class="tages">
                <div v-for="(item, index) in tabs" :key="index" class="tages-list" :class="tabsIndex === index ? 'active' : ''">
                    <span @click="toggleTab(index)">{{ item.lable }}</span>
                </div>
            </div>
            <div class="content-item" v-show="tabsIndex === 0">
                <div class="formContent-item_title">基础信息</div>
                <div class="widthFlex">
                    <household-table :tableName="householdTable.left" :tabData="detailsData"></household-table>
                    <household-table :tableName="householdTable.right" :tabData="detailsData"></household-table>
                </div>
            </div>
            <div class="content-item" v-show="tabsIndex === 1">
                <div class="widthFlex" v-for="item in 2" :key="item">
                    <household-table :tableName="houseTable.left" :tabData="detailsData"></household-table>
                    <household-table :tableName="houseTable.right" :tabData="detailsData"></household-table>
                </div>
            </div>
            <div class="content-item" v-show="tabsIndex === 2">
                <div class="formContent-item_title">车辆信息</div>
            </div>
            <div class="content-item" v-show="tabsIndex === 3">
                <div class="widthFlex" v-for="item in 3" :key="item">
                    <household-table :tableName="parkingLotTable.left" :tabData="detailsData"></household-table>
                    <household-table :tableName="parkingLotTable.right" :tabData="detailsData"></household-table>
                </div>
            </div>
            <div class="content-item" v-show="tabsIndex === 4">
                <div class="formContent-item_title">人员进出记录</div>
            </div>
            <div class="content-item" v-show="tabsIndex === 5">
                <div class="formContent-item_title">车辆进出记录</div>
            </div>
        </div>
    </div>
</template>
<script>
import householdTable from './stepPage/householdTable.vue';
export default {
    components: { householdTable },
    data() {
        return {
            tabsIndex: 0,
            id: null,
            detailsData: {},
            tabs: [
                {
                    lable: '住户信息'
                },
                {
                    lable: '房屋信息'
                },
                {
                    lable: '车辆信息'
                },
                {
                    lable: '车位信息'
                },
                {
                    lable: '人员进出记录'
                },
                {
                    lable: '车辆进出记录'
                }
            ],
            householdTable: {
                left: [
                    {
                        lable: '姓名',
                        prop: 'name'
                    },
                    {
                        lable: '手机号',
                        prop: 'phone'
                    },
                    {
                        lable: '身份证号',
                        prop: 'idNumber'
                    },
                    {
                        lable: '出生日期',
                        prop: 'birthDate'
                    },
                    {
                        lable: '民族',
                        prop: 'nation'
                    },
                    {
                        lable: '入住时间',
                        prop: 'checkInDate'
                    }
                ],
                right: [
                    {
                        lable: '类型',
                        prop: 'householdType'
                    },
                    {
                        lable: '人员编号',
                        prop: 'personnelNumber'
                    },
                    {
                        lable: '性别',
                        prop: 'sex'
                    },
                    {
                        lable: '国籍',
                        prop: 'nationality'
                    },
                    {
                        lable: '户籍地址',
                        prop: 'permanentAddress'
                    },
                    {
                        lable: '现住地址',
                        prop: ''
                    }
                ]
            },
            houseTable: {
                left: [
                    {
                        lable: '所属小区',
                        prop: 'houseId'
                    },
                    {
                        lable: '单元',
                        prop: 'unitName'
                    },
                    {
                        lable: '房屋号',
                        prop: 'roomNumber'
                    },
                    {
                        lable: '建筑面积',
                        prop: 'name'
                    },
                    {
                        lable: '公摊面积',
                        prop: 'name'
                    },
                    {
                        lable: '装修性质',
                        prop: 'name'
                    },
                    {
                        lable: '房屋编号',
                        prop: 'id'
                    }
                ],
                right: [
                    {
                        lable: '楼宇名称',
                        prop: 'name'
                    },
                    {
                        lable: '楼层',
                        prop: 'name'
                    },
                    {
                        lable: '房屋类型',
                        prop: 'name'
                    },
                    {
                        lable: '使用面积 ',
                        prop: 'name'
                    },
                    {
                        lable: '房屋户型',
                        prop: 'name'
                    },
                    {
                        lable: '房屋朝向',
                        prop: 'name'
                    },
                    {
                        lable: '',
                        prop: ''
                    }
                ]
            },
            parkingLotTable: {
                left: [
                    {
                        lable: '所属小区',
                        prop: 'name'
                    },
                    {
                        lable: '车库区域',
                        prop: 'name'
                    },
                    {
                        lable: '车位类型',
                        prop: 'name'
                    }
                ],
                right: [
                    {
                        lable: '车库名称',
                        prop: 'name'
                    },
                    {
                        lable: '车位编号',
                        prop: 'name'
                    },
                    {
                        lable: '车位面积',
                        prop: 'name'
                    }
                ]
            }
        };
    },
    created() {
        this.id = this.$route.query.id;
        this.getDetails();
    },
    methods: {
        toggleTab(index) {
            this.tabsIndex = index;
        },
        close() {
            let activeRout = this.$route;
            let tagsList = this.$store.getters['getTagsList'];
            tagsList.forEach((item, index) => {
                if (item.title == activeRout.meta.title || item.path == activeRout.path) {
                    tagsList.splice(index, 1);
                    history.go(-1);
                    return true;
                }
            });
        },
        getDetails() {
            this.$http
                .get('/scResident/find/' + this.id)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        this.detailsData = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        }
    }
};
</script>
<style lang='scss' scoped >
@import './style.scss';
</style>