drp-ui/src/views/material/basicFile/list.vue

<!-- 物料基础信息——列表 -->

<template>
  <el-card class="material-list">
    <el-table v-loading="loading" :data="taskList" @cell-dblclick="handledbClick"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column v-for="h in  tableHeader" v-if="h.show" :label="h.name" align="center" :prop="h.prop"
        show-overflow-tooltip />
    </el-table>

    <!-- v-show="total > 0" -->
    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getMaterialList" />
  </el-card>
</template>

<script>
import materialApi from '@/api/material/basic';

export default {
  name: 'material-list',

  data() {
    return {
      // 物料基本信息数据
      taskList: [],
      // 总条数
      total: 1,

      loading: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null
      },
      // 表头
      tableHeader: [],
      // 多选数组
      checkedList: [],
    }
  },
  methods: {
    // 双击行
    handledbClick(e) {
      let bar = {
        address: 'materiaDetails',
        id: e.id,
        list: this.checkedList
      }
      this.$emit("actionBar", JSON.stringify(bar))
    },
    // 选中数据改变
    handleSelectionChange(list) {
      this.checkedList = list;
      this.$emit('headerOption', JSON.stringify({ checkedList: [...list] }))
    },
    // 获取物料列表信息
    getMaterialList(templateCode) {
      this.loading = true;
      materialApi.materialList({ templateCode }).then((res) => {
        this.loading = false;
        console.log(res, '获取物料列表信息以及表头字段');
        let { code, data } = res;
        if (code == 200) {
          this.taskList = data.tableBody.rows;
          this.total = data.tableBody.total;

        }
      })
    },
    // 获取物料列表表头
    getTagList(templateCode) {
      materialApi.tagList({ templateCode }).then(res => {
        console.log(res, '获取物料列表表头');
        if (res.code == 200) {
          this.tableHeader = res.data;
        }
      })
    },
  },
  created() {

    this.getMaterialList('material');
    this.getTagList('material');
  }
}
</script>

<style>
.material-list>>>.el-table__body-wrapper {
  height: 100%;
}
</style>