CZC/operationSupport/src/views/assetManagement/housingManagement/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 class="formContent-item_title">人脸信息</div>
        <div class="detailImg">
          <div class="clickUpText">
            <img
              class="dataImg"
              v-if="!!houseData.facePictureUrl"
              :src="houseData.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 === 2"
      >
        <zz-table
          :cols="cols"
          :data="memberData"
          :settings="{ stripe: true, hideFoot: 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>
  </div>
</template>
<script>
import list from '@utils/list.js';
import householdTable from '../stepPage/householdTable.vue';
export default {
  components: { householdTable },
  mixins: [list],
  name: 'housingManagementDetails',
  data () {
    let _this = this;
    return {
      tabsIndex: 0,
      id: null,
      detailsData: {},
      memberData: [],
      houseData: {
        // name: '',
        // phone: '',
        // idNumber: '',
        // birthDate: '',
        // nation: '',
        // householdType: '',
        // personnelNumber: '',
        // sex: '',
        // nationality: '',
        // permanentAddress: '',
        // facePictureUrl:null,
      },
      tabs: [
        {
          lable: '房屋信息'
        },
        {
          lable: '业主信息'
        },
        {
          lable: '成员信息'
        }
      ],
      houseTable: {
        left: [
          {
            lable: '所属社区',
            prop: 'communityName'
          },
          {
            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: '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: 'remarks'
          }
        ]
      },
      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) {
              debugger
              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'
          }
        ]
      },
      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
        }
      ],
      mixins_pageset: {
        total: 0,
        pageNum: 1,
        pageSize: 15,
        sortColumn: null, // 当前列的字段
        sortOrder: null // 排序方式 顺序：ASC  倒序：DESC
      }
    };
  },
  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 tagsList = this.$store.getters['getTagsList'];
      let activeRout = this.$route;
      if (tagsList.length > 1) {
        tagsList.forEach((item, index) => {
          if (item.title == "房屋管理" || item.name == 'assetManagement/housingManagement/index') {
            this.$router.push({
              path: item.path
            })
          }
          // 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('/czc-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('/czc-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('/czc-community/scResident/find/' + id)
        .then(({ data, status, msg }) => {
          if (0 === status) {
            if (data !== null) {
              debugger
              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>