jin_ji_hu/src/views/enterpriselibrary/enterInfo/components/tabTwo/index.vue

<template>
  <div class="L-unitInfo" id="L-contacts-main">
    <div id="L-header-list" class="project-info-title">【联络人列表】</div>
    <section>
      <el-table v-loading="loading" class="tabTwo-table" border :data="tableData" :row-class-name="tableRowClassName" >  <!-- :max-height="tabHeader" -->
        <el-table-column label="联络人姓名" prop="llrxm" />
        <el-table-column label="联络人职务" prop="llrzw" />
        <el-table-column label="电子邮箱" prop="dzyx" />
        <el-table-column label="移动电话" prop="yddh" />
        <el-table-column label="固定电话" prop="gddh" />
        <el-table-column label="联络人编号" prop="llrbh" />
        <el-table-column label="入库时间" prop="dwTimestamp" />
        <el-table-column label="来源机构" prop="dwLyjg" />
      </el-table>
    </section>
    <div id="L-header-list" class="project-info-title" style="margin-top: 20px;">【常用联系人列表】</div>
    <section>
      <el-table v-loading="loadingTwo" class="tabTwo-table" border :data="tableTwoData" :row-class-name="tableRowClassName" >  <!-- :max-height="tabHeader" -->
        <el-table-column label="联络人姓名" prop="contactName" />
        <el-table-column label="联络人职务" prop="contactOffice" />
        <el-table-column label="手机号码" prop="contactPhone" />
        <el-table-column label="邮箱" prop="contactEmail" />
      </el-table>
    </section>
  </div>
</template>
<script>
import { getjContacts } from "@/api/jin_ji_hu/enterList"
import { getJEnterpriseContact } from "@/api/jin_ji_hu/infoMaintain"
export default {
  name:"tabTwo",
  data() {
    return {
      tableData:[],
      tableTwoData:[],
      loading:false,
      loadingTwo:false,
      tabHeader: null,
    }
  },
  props:{
    creditCode:{
      type:String,
      default:""
    }
  },
  mounted() {
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
    this.getList()
    this.getTwoList()
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    // 修改table背景色
    tableRowClassName({row, rowIndex}){
      if (rowIndex % 2 !== 0) {
        return 'evenNumber-row';
      }
      return '';
    },
    // 查询联络人列表
    getList(){
      this.loading = true;
      getjContacts({tyshxydm: this.creditCode || this.$store.state.user.name}).then(res=>{
        this.tableData = res.data
        this.loading = false;
      })
    },
    getTwoList(){
      this.loadingTwo = true;
      getJEnterpriseContact({enterpriseCode: this.creditCode || this.$store.state.user.name, current: 1, size: 10}).then(res=>{
        this.tableTwoData = res.data.records;
        this.loadingTwo = false;
      })
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('L-contacts-main'); // 通过元素的 ID 获取元素
      const header = document.getElementById('L-header-list'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const headerHeight = header.offsetHeight;
      this.tabHeader = elementHeight - headerHeight;
    }
  },
}
</script>