zmProjectManagement/src/components/projectCom/table/index.vue

<template>
  <!-- 本组件用于table台账的显示 -->
  <div class="tableDiv">
    <el-table
      ref="table1"
      class="tableCom"
      :cell-class-name="this.startCellClass ? setCellClass : ''"
      :row-class-name="tableRowClassName"
      :data="dataList"
      style="width: 100%"
      height="calc(100% - 66px)"
      stripe
      highlight-current-row
      @row-dblclick="rowDblclick"
      @row-click="rowClick"
      @select="selectRow"
      @select-all="selectRow"
    >
      <template slot="empty">
        <img src="@/assets/icon/null.png" alt="" />
        <p class="empty-p">暂无数据</p>
      </template>
      <el-table-column v-if="config.check" align="center" type="selection" width="55" />
      <el-table-column v-if="config.index" align="center" type="index" width="50" label="序号" />
      <template v-for="(item, index) in config.fieldList">
        <el-table-column
          :key="currentDate + 'header_' + index"
          align="center"
          :prop="item.field"
          :width="item.width ? item.width : ''"
          :min-width="item.minWidth"
          :formatter="formatter"
          sortable
          :label="item.label"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ formatter(scope.row[item.field]) }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="config.actionList" fixed="right" align="center" label="操作" width="150">
        <template slot-scope="scope">
          <template v-for="(item, index) in config.actionList">
            <el-button
              :key="currentDate + 'scope_' + index"
              type="text"
              :class="item.class"
              size="small"
              @click="item.method(scope.row)"
              >{{ item.label }}</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="paginationDiv">
      <el-pagination
        small
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 50, 100, 1000]"
        :page-size="size"
        :current-page="current"
        :total="total"
        @size-change="changeSize"
        @current-change="changecurrent"
      />
    </el-row>
  </div>
</template>

<script>
import commonMe from '@/utils/common.js'
export default {
  props: {
    config: {
      type: Object,
      default: () => ({
        check: true, // 是否展示选中框
        index: true, // 是否展示序号
        // dataList:[],//同步数据
        testData: false, // 是否使用测试数据
        fieldList: [
          {
            label: '公司', // 表头显示
            field: 'company', // 对应的字段
            setCellClassMethod: (e) => {}, // 通过设置cell的类名来改变cell的显示
            actionMethod: (e) => {} // 点击时的事件
          },
          {
            label: '部门', // 表头显示
            field: 'department', // 对应的字段
            setCellClassMethod: (e) => {}, // 通过设置cell的类名来改变cell的显示
            actionMethod: (e) => {} // 点击时的事件
          },
          {
            label: '姓名', // 表头显示
            field: 'user', // 对应的字段
            setCellClassMethod: (e) => {}, // 通过设置cell的类名来改变cell的显示
            actionMethod: (e) => {} // 点击时的事件
          }
        ], // 对应的字段列表
        actionList: [
          {
            label: '处理', // 展示标签
            method: (e) => {} // 触发的方法
          }
        ], // 每列的一些操作
        searchDate: {}, // 查询条件（除开翻页以外的其它查询条件）
        method: (e) => {}, // 获取数据的方法
        click: (e) => {}, // 单击事件
        dbClick: (e) => {}, // 双击方法
        selectClick: (e) => {} // 选中事件
      })
    }
  },
  data() {
    return {
      testDataList: [], // 存储的测试数据
      dataList: [], // 展示的数据列表
      total: 0, // 总共的数据
      currentDate: '', // 当前的时间点
      current: 1, // 当前页
      size: 30, // 当前一页多少数据
      formatter: commonMe.formatter, // 表格数据的过滤
      checkRow: [], // 选择的行数
      currentRow: null, // 当前所在的行数
      startCellClass: false, // 是否开启cell类设置方法
      cellClassList: [] // 保存cell设设置的相关方法
    }
  },
  created() {
    this.currentDate = commonMe.getCurrentDateToMS() + ''
  },
  mounted() {
    this.startCellClassMethod()
    if (this.config.testData) {
      this.getTestData()
    } else {
      this.getTableData()
    }
    this.setTableInfo()
  },
  methods: {
    // 翻页改变
    changecurrent(data) {
      this.current = data
      if (this.config.testData) {
        this.getCurrentTestData()
      } else {
        this.getTableData()
      }
    },
    // 页数
    changeSize(data) {
      this.size = data
      if (this.config.testData) {
        this.getCurrentTestData()
      } else {
        this.getTableDataByOne()
      }
    },

    /**
     * 重第一页开始获取表格数据
     * @param data 是否将页面重置为1
     */
    getTableDataByOne() {
      if (this.config) this.getTableData(true)
    },

    /**
     * 获取表格数据
     * @param data 是否将页面重置为1
     */
    getTableData(data) {
      console.log('更新数据')
      if (data) {
        this.current = 1
      }
      if (this.config.method) {
        const searchData = {
          size: this.size,
          current: this.current
        }
        this.config
          .method(commonMe.notJsonCopy(searchData))
          .then((res) => {
            this.dataList = res.records || []
            this.total = Number(res.total) || 0
            this.reSetTableInfo()
          })
          .catch((err) => {
            this.dataList = []
            this.total = 0
            this.reSetTableInfo()
            console.log(err)
          })
      }
    },
    /**
     * 更新表格数据
     * @param params 界面查询参数
     */
    update(params = {}) {
      if (this.config.method) {
        const pageAndSize = { size: this.size, current: 1 }
        this.config
          .method(commonMe.notJsonCopy({ ...params, ...pageAndSize }))
          .then((res) => {
            this.dataList = res.records || []
            this.total = Number(res.total) || 0
            this.reSetTableInfo()
          })
          .catch((err) => {
            this.dataList = []
            this.total = 0
            this.reSetTableInfo()
            console.log(err)
          })
      }
    },

    /**
     * 通过check选择的数据
     */
    selectRow(data) {
      console.log('选择的信息')
      this.checkRow = data
      this.setTableInfo()
      this.$nextTick((e) => {
        if (this.config.selectClick) {
          this.config.selectClick(data)
        }
      })
    },

    /**
     * 单击选中的行
     * */
    rowClick(data) {
      this.currentRow = data
      this.setTableInfo()
      this.$nextTick((e) => {
        if (this.config.click) {
          this.config.click(data)
        }
      })
    },

    /**
     * 双击选中的行
     * */
    rowDblclick(data) {
      this.currentRow = data
      this.setTableInfo()
      this.$nextTick((e) => {
        if (this.config.dbClick) {
          this.config.dbClick(data)
        }
      })
    },

    /**
     * 重置table的值
     * */
    reSetTableInfo() {
      this.currentRow = []
      this.checkRow = null
      this.setTableInfo()
      this.$refs['table1'].doLayout()
    },

    /**
     * 更新table返回的值
     * */
    setTableInfo() {
      const tableData = commonMe.notJsonCopy(this.dataList)
      const config = {
        currentRow: commonMe.notJsonCopy(this.currentRow),
        checkRow: commonMe.notJsonCopy(this.checkRow),
        size: commonMe.notJsonCopy(this.size),
        current: commonMe.notJsonCopy(this.current),
        tableData
      }
      this.$emit('input', config)
    },

    /**
     * 是否开启cellClass设置函数
     * @param  data 渲染的cell元素
     */
    startCellClassMethod() {
      this.cellClassList = []
      this.config.fieldList.forEach((item) => {
        if (item.setCellClassMethod) {
          this.startCellClass = true
          this.cellClassList[item.field] = item.setCellClassMethod
        }
      })
    },

    /**
     * 根据不同数据设置cell的类名，通过类名控制其颜色展示
     * @param  data 渲染的cell元素
     */
    setCellClass(data) {
      const field = data.column.property || ''
      if (this.cellClassList[field]) {
        return this.cellClassList[field](data)
      }
    },

    /**
     * 奇偶行却分
     * */
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'rowEven'
      } else {
        return 'rowOdd'
      }
    },

    /**
     * 生成测试数据
     */
    getTestData() {
      const testData = []
      for (let i = 0; i < 100; i++) {
        const testItem = {}
        this.config.fieldLit.forEach((item) => {
          testItem[item.field] = item.label + '' + i
        })
        ;('')
        tetData.push(testItem)
      }
      this.testDataList = testData
      this.total = this.testDataLit.length
      this.getCurrentTestData()
    },

    /**
     * 获取当前测试数据
     */
    getCurrentTestData() {
      this.dataList = this.testDataList.slice((this.current - 1) * this.size, this.size)
    }
  }
}
</script>
<style lang="scss" scoped>
@import './src/assets/default';
/deep/.tableCom {
  @include queryTableRowStyle;
  .rowEven {
    background: $queryTableRowEvenBckgroundColor;
  }
  .rowOdd {
    background: $queryTableRowOddBckgroundColor;
  }
  .current-row {
    background: $queryTableRowSelectBckgroundColor !important;
    td {
      background: rgba(0, 0, 0, 0) !important;
    }
  }
  .el-table__body tr.current-row > td.el-table__cell {
    background-color: #ecf5ff !important;
    transform: none;
  }
}
.tableDiv {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.paginationDiv {
  margin-top: 20px;
  width: 100%;
  text-align: right;
}
.overtime span {
  //超时
  color: #fa541c !important;
}
.notOvertime span {
  //未超时
  color: #67c23a !important;
}
.notCom span {
  //未提交
  color: #fa541c !important;
  border: 1px solid #ffbb96;
  background: #fff2e8;
}
.wait span {
  //待发起的样式
  color: #f65252 !important;
  border: 1px solid #ffa39e;
  background: #fef0ef;
}
.inHand span {
  //处理中
  color: #2d74e7 !important;
  border: 1px solid #91d5ff;
  background: #e6f7ff;
}
.finished span {
  //已完成
  color: #67c23a !important;
  border: 1px solid #b7eb8f;
  background: #f6ffed;
}

/deep/.deleteInfo,
/deep/.updateInfo,
/deep/.lookInfo {
  span {
    color: #2d74e7 !important;
  }
}
</style>