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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2024-05-29 14:05:08
 * @LastEditors: JC9527
 * @LastEditTime: 2024-06-03 09:47:49
-->
<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="contactName" />
        <el-table-column label="公司职务" prop="firmOffice" />
        <el-table-column label="手机号码" prop="phone" />
        <el-table-column label="邮箱" prop="email" />
      </el-table>
    </section>
  </div>
</template>
<script>
import { getjContacts } from "@/api/jin_ji_hu/enterList"
export default {
  name:"tabTwo",
  data() {
    return {
      tableData:[],
      loading:false,
      tabHeader: null,
    }
  },
  props:{
    creditCode:{
      type:String,
      default:""
    }
  },
  mounted() {
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
    this.getList()
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    // 修改table背景色
    tableRowClassName({row, rowIndex}){
      if (rowIndex % 2 !== 0) {
        return 'evenNumber-row';
      }
      return '';
    },
    // 查询联络人列表
    getList(){
      this.loading = true;
      getjContacts({creditCode: this.creditCode || this.$store.state.user.name}).then(res=>{
        this.tableData = res.data
        this.loading = 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 - 100;
    }
  },
}
</script>