Project-Annex/operationSupport/src/views/assetManagement/shopManagement/details.vue

<template>
    <div class="main">
        <div class="top-title">
            <h1>房屋号：{{ detailsData.roomNumber }}<span class="titleType">商铺</span></h1>
            <el-button class="right" type="primary" @click="close()">返回</el-button>
            <div class="text">
                <span>所属社区： {{ detailsData.communityId | matchingVal($store.getters['getCommunityArray']) }}</span>
                <span>楼栋：{{ detailsData.communityName }}</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="widthFlex">
                    <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 === 1">
                <div class="formContent-item_title">基础信息</div>
                <div class="widthFlex">
                    <household-table :tableName="householdTable.left" :tabData="houseData"></household-table>
                    <household-table :tableName="householdTable.right" :tabData="houseData"></household-table>
                </div>
            </div>
            <div class="content-item" v-show="tabsIndex === 2">
                <zz-table :cols="cols" :data="memberData" :settings="{ stripe: true }">
                    <template slot="opt" slot-scope="scope">
                        <el-tooltip class="item" effect="light" placement="bottom" content="查看">
                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
                        </el-tooltip>
                    </template>
                </zz-table>
            </div>
            <div class="content-item" v-show="tabsIndex === 3">
                <zz-table :cols="cols1" :data="mixins_list" :pageset="mixins_pageset" :settings="{ stripe: true }"> </zz-table>
            </div>
        </div>
    </div>
</template>
<script>
import list from '@utils/list.js';
import householdTable from '../stepPage/householdTable.vue';
export default {
    components: { householdTable },
    mixins: [list],
    name: 'shopManagementDetails',
    data() {
        let _this = this;
        return {
            tabsIndex: 0,
            id: null,
            detailsData: {},
            memberData: [],
            houseData: [],
            tabs: [
                {
                    lable: '商铺信息'
                },
                {
                    lable: '单位信息'
                },
                {
                    lable: '成员信息'
                },
                {
                    lable: '合同信息'
                }
            ],
            houseTable: {
                left: [
                    {
                        lable: '所属社区',
                        prop: 'communityId'
                    },
                    {
                        lable: '单元',
                        prop: 'unitName'
                    },
                    {
                        lable: '商铺号',
                        prop: 'roomNumber'
                    },
                    {
                        lable: '建筑面积',
                        prop: 'buildingArea'
                    },
                    {
                        lable: '公摊面积',
                        prop: 'publicArea'
                    }
                    // {
                    //     lable: '装修性质',
                    //     prop: 'decorateProperties',
                    //     typeArray: [
                    //         { type: 1, lable: '毛胚' },
                    //         { type: 2, lable: '简单装修' },
                    //         { type: 3, lable: '中等装修' },
                    //         { type: 4, lable: '精装修' },
                    //         { type: 5, lable: '豪华装修' }
                    //     ]
                    // },
                    // {
                    //     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: 'assetNumber'
                    }
                    // {
                    //     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: '东北' }
                    //     ]
                    // },
                ]
            },
            householdTable: {
                left: [
                    {
                        lable: '姓名',
                        prop: 'name'
                    },
                    {
                        lable: '手机号',
                        prop: 'phone'
                    },
                    {
                        lable: '身份证号',
                        prop: 'idNumber'
                    },
                    {
                        lable: '出生日期',
                        prop: 'birthDate'
                    },
                    {
                        lable: '民族',
                        prop: 'nation'
                    }
                    // {
                    //     lable: '入住时间',
                    //     prop: 'checkInDate'
                    // }
                ],
                right: [
                    {
                        lable: '类型',
                        prop: 'householdType',
                        const: true,
                        format(val) {
                            return '业主';
                        }
                    },
                    {
                        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'
                    }
                ]
            },
            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'
                    }
                ]
            },
            cols: [
                {
                    label: '姓名',
                    prop: 'name'
                },
                {
                    label: '手机号',
                    prop: 'phone'
                },
                {
                    label: '身份证号',
                    prop: 'idNumber'
                },
                {
                    label: '关系',
                    prop: 'householdType',
                    format(val) {
                        switch (val) {
                            case 1:
                                return '业主';
                            case 2:
                                return '亲属';
                            case 3:
                                return '租客';
                        }
                    }
                },
                {
                    label: '操作',
                    slot: 'opt',
                    width: 150
                }
            ],
            cols1: [
                {
                    label: '合同名称',
                    prop: 'communityName'
                },
                {
                    label: '合同类型',
                    prop: 'buildingName'
                },
                {
                    label: '签订时间',
                    prop: 'buildingName'
                },
                {
                    label: '到期时间',
                    prop: 'buildingName'
                },
                {
                    label: '租赁方',
                    prop: 'buildingName'
                },
                {
                    label: '备注',
                    prop: 'buildingName'
                },
                {
                    label: '操作',
                    slot: 'opt',
                    width: 150
                }
            ]
        };
    },
    filters: {
        matchingVal(val, arr) {
            let v = '--';
            if (!!val) {
                arr.forEach((item) => {
                    if (!!item.code && item.code === val) {
                        v = item.name;
                    } else if (item.type === val) {
                        v = item.lable;
                    } else if (!!item.communityName && item.id === val) {
                        v = item.communityName;
                    }
                });
            }
            return v;
        }
    },
    created() {
        this.id = this.$route.query.id;
        this.getDetails();
        this.getMember();
    },
    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;
            //     }
            // });
            let tagsList = this.$store.getters['getTagsList'];
            let activeRout = this.$route;
            if (tagsList.length > 1) {
                tagsList.forEach((item, index) => {
                    if (item.title == activeRout.meta.title || item.path == activeRout.path) {
                        tagsList.splice(index, 1);
                        this.$router.push({
                            path: tagsList[index - 1].path
                        });
                    }
                });
            } else {
                this.$router.push({
                    path: '/'
                });
            }
        },
        getDetails() {
            this.$http
                .get('/sc-community/assets/house/find/house?houseId=' + this.id)
                .then((res) => {
                     if (!!res) {
                        this.detailsData = res;
                        if (!!res.residentId) {
                            this.getHouse(res.residentId);
                        }
                    } else {
                        this.$message.error('系统繁忙,请稍后重试');
                    }
                })
                .catch(() => {});
        },
        getMember() {
            this.$http
                .get('/sc-community/assets/house/list?id=' + this.id)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        this.memberData = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        getHouse(id) {
            this.$http
                .get('/sc-community/scResident/find/' + id)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        this.houseData = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        lookPage(row) {
            this.$store.dispatch('addPopup', {
                url: '/assetManagement/stepPage/houseDataPop.vue',
                width: '1044px',
                height: '600px',
                props: {
                    data: row
                },
                notip: true,
                showCancelButton: true,
                showConfirmButton: true,
                title: '成员信息'
            });
        }
    }
};
</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>