123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451 |
- <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>
|