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

<template>
  <div class="money-schedule" id="L-contacts-main">
    <div class="schedule-title" id="L-header-list">【项目清单】</div>
    <div class="schedule-timeline">
      <section>
        <el-table v-loading="loading" border class="tabTwo-table" :data="tableData" :row-class-name="tableRowClassName" :max-height="tabHeader">
          <el-table-column type="index" width="55" label="序号"/>
          <el-table-column label="年份" prop="projectYear" />
          <el-table-column label="项目名称" prop="projectName" />
          <el-table-column label="项目分类" prop="projectClassify">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jjh_project_type" :value="scope.row.projectClassify"/>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" class-name="table-status">
            <template slot-scope="scope">
              <p class="statusisZero" v-if="scope.row.status === 0">
                <span></span>
                <span>待填报</span>
              </p>
              <p class="statusisThree" v-if="scope.row.status === 1">
                <span></span>
                <span>初审中</span>
              </p>
              <p class="statusisThree" v-if="scope.row.status === 2">
                <span></span>
                <span>复审中</span>
              </p>
              <p class="statusisTwo" v-if="scope.row.status === 3">
                <span></span>
                <span>终审中</span>
              </p>
              <p class="statusisOne" v-if="scope.row.status === 5">
                <span></span>
                <span>评审通过</span>
              </p>
              <!-- <p class="statusisNine" v-if="scope.row.status === 6">
                <span></span>
                <span>上级评审不通过</span>
              </p> -->
              <p class="statusisNine" v-if="scope.row.status === 7">
                <span></span>
                <span>复审不通过</span>
              </p>
              <p class="statusisThree" v-if="scope.row.status === 8">
                <span></span>
                <span>初审不通过</span>
              </p>
              <p class="statusisNine" v-if="scope.row.status === 9">
                <span></span>
                <span>终审不通过</span>
              </p>
              <p class="statusisNine" v-if="scope.row.status === 10">
                <span></span>
                <span>初审驳回</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="userId" class-name="table-operation">
            <template slot-scope="scope">
              <span class="look-info" @click="goInfo(scope.row)">查看详情</span>
            </template>
          </el-table-column>
        </el-table>
        <my-pagination 
          id="L-pagination-list"
          :total="total"
          :page="pagination.current"
          :limit="pagination.size"
          @pagination="getPagination"
          :current-page.sync="pagination.current" 
        ></my-pagination>
      </section>
    </div>
  </div>
</template>
<script>
import myPagination from "@/views/components/Pagination/index.vue"
import { jProject } from "@/api/jin_ji_hu/project/index"
export default {
  components:{myPagination},
  name:"tabThree",
  dicts: ['jjh_project_type', 'bms_approval_status'],
  props:{
    creditCode:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tabHeader: null,
      total:0,
      pagination: {
        current:1,
        size:10,
        creditCode: this.creditCode || this.$store.state.user.name,
      },
    }
  },
  mounted() {
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
    this.getList()
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    // 列表获取
    getList(){
      this.loading = true;
      jProject(this.pagination).then(res=>{
        this.loading = false;
        this.total = res.data.total;
        this.tableData = res.data.records;
      })
    },
    // 页码更改
    getPagination(pages) {
      this.pagination.current = pages.page;
      this.pagination.size = pages.limit;
      this.getList();
    },
    goInfo(row){
      this.$router.push({
        name: 'projectInfo',
        query: { userId: row.id }
      })
    },
    // 修改table背景色
    tableRowClassName({row, rowIndex}){
      if (rowIndex % 2 !== 0) {
        return 'evenNumber-row';
      }
      return '';
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('L-contacts-main'); // 通过元素的 ID 获取元素
      const header = document.getElementById('L-header-list'); // 通过元素的 ID 获取元素
      const pagination = document.getElementById('L-pagination-list'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const headerHeight = header.offsetHeight;
      const paginationHeight = pagination.offsetHeight;
      this.tabHeader = elementHeight - headerHeight - paginationHeight - 100;
    }
  },
}
</script>