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

<template>
    <div class="main">
        <div class="top-title">
            <h1>{{ detailsData.name }}</h1>
            <!-- <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 class="formContent-item_title">人脸信息</div>
                <div class="detailImg">
                    <div class="clickUpText">
                        <img class="dataImg" v-if="!!detailsData.facePictureUrl" :src="detailsData.facePictureUrl" />
                        <template v-else>
                            <img class="bg-img" src="@/assets/img/ownerManagement/img_zhaopian2@2x.png" alt="" />
                            <div>无人脸图片</div>
                        </template>
                    </div>
                </div>
            </div>
            <div class="content-item" v-show="tabsIndex === 1">
                <div class="widthFlex" v-for="item in houseData" :key="item">
                    <household-table :tableName="houseTable.left" :tabData="item"></household-table>
                    <household-table :tableName="houseTable.right" :tabData="item"></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 parkingData" :key="item">
                    <household-table :tableName="parkingLotTable.left" :tabData="item"></household-table>
                    <household-table :tableName="parkingLotTable.right" :tabData="item"></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 },
    name: 'ownerManagementDetails',
    data() {
        let _this = this;
        return {
            tabsIndex: 0,
            id: null,
            detailsData: {},
            parkingData: [],
            houseData: [],
            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: ''
                    },
                    {
                        lable: '人员编号',
                        prop: 'personnelNumber'
                    },
                    {
                        lable: '性别',
                        prop: 'sex',
                        typeArray: [
                            { type: 0, lable: '未知' },
                            { type: 1, lable: '男' },
                            { type: 2, lable: '女' }
                        ]
                    },
                    {
                        lable: '国籍',
                        prop: 'nationality',
                        typeArray: [
                            { type: 1, lable: '中国' },
                            { type: 2, lable: '其他' }
                        ]
                    },
                    {
                        lable: '户籍地址',
                        prop: 'permanentAddress'
                    }
                    // {
                    //     lable: '现住地址',
                    //     prop: ''
                    // }
                ]
            },
            houseTable: {
                left: [
                    {
                        lable: '所属社区',
                        prop: 'communityName'
                    },
                    {
                        lable: '单元',
                        prop: 'unitName'
                    },
                    {
                        lable: '房屋号',
                        prop: 'roomNumber'
                    },
                    {
                        lable: '建筑面积',
                        prop: 'buildingArea'
                    },
                    {
                        lable: '公摊面积',
                        prop: 'publicArea'
                    },
                    {
                        lable: '装修性质',
                        prop: 'decorateProperties'
                    },
                    {
                        lable: '房屋编号',
                        prop: 'assetNumber'
                    }
                ],
                right: [
                    {
                        lable: '楼宇名称',
                        prop: 'buildingName'
                    },
                    {
                        lable: '楼层',
                        prop: 'floorNumber'
                    },
                    {
                        lable: '房屋类型',
                        prop: 'buildingType',
                        typeArray: [
                            { type: 1, lable: '住宅' },
                            { type: 2, lable: '商用' }
                        ]
                    },
                    {
                        lable: '使用面积 ',
                        prop: 'useArea'
                    },
                    {
                        lable: '房屋户型',
                        prop: 'housingType',
                        typeArray: [
                            { type: 1, lable: '室' },
                            { type: 2, lable: '厅' },
                            { type: 3, lable: '卫' }
                        ]
                    },
                    {
                        lable: '房屋朝向',
                        prop: 'orientationOfRoom',
                        typeArray: [
                            { type: 1, lable: '东' },
                            { type: 2, lable: '南' },
                            { type: 3, lable: '西' },
                            { type: 4, lable: '北' },
                            { type: 5, lable: '东南' },
                            { type: 6, lable: '西南' },
                            { type: 7, lable: '西北' },
                            { type: 8, lable: '东北' }
                        ]
                    },
                    {
                        lable: '住户类型',
                        prop: 'householdTypeDict'
                    }
                ]
            },
            parkingLotTable: {
                left: [
                    {
                        lable: '所属社区',
                        prop: 'communityName'
                    },
                    {
                        lable: '车库区域',
                        prop: 'garageAreaName'
                    },
                    {
                        lable: '车位类型',
                        prop: 'parkingType',
                        typeArray: [
                            { type: 1, lable: '公共车位' },
                            { type: 2, lable: '私人车位' }
                        ]
                    }
                ],
                right: [
                    {
                        lable: '车库名称',
                        prop: 'garageName'
                    },
                    {
                        lable: '车位编号',
                        prop: 'parkingNumber'
                    },
                    {
                        lable: '车位面积',
                        prop: 'parkingArea'
                    }
                ]
            }
        };
    },
    created() {
        this.id = this.$route.query.id;
        this.getDetails();
        this.getParking();
        this.getHouse();
    },
    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('/sc-community/scResident/find/' + this.id)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        this.detailsData = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        getParking() {
            this.$http
                .get('/sc-community/assets/garage/parking/list/resident/parking', { residentId: this.id })
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        this.parkingData = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        getHouse() {
            this.$http
                .get('/sc-community/scResident/list/house', { residentId: this.id })
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        this.houseData = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        }
    }
};
</script>
<style lang='scss' scoped >
@import './style.scss';
.detailImg {
    width: 200px;
    height: 280px;
    background: #f8fcff;
    border-radius: 4px;
    border: 1px solid #e0e1e3;
    color: #424656;
    text-align: center;
    .clickUpText {
        position: inherit;
        img.bg-img {
            width: 100px;
        }
    }
}
</style>