middleground_code_v2/src/views/systemReports/U8result/baseNewTable2/index.vue

<template>
  <div class="wrapTable">
    <div class="RightBtnList">
      <el-tooltip
          class="item"
          effect="dark"
          :content="item.title"
          placement="top"
          v-for="(item, index) in fixedButtonList"
          :key="index"
          trigger="hover"
      >
        <span>
          <el-button
              size="mini"
              :icon="item.icon"
              @click.stop="
              fixedClick(
                item,
                '#mainTable',
                '机台排产表',
                mainTableData,
                mainTableColumn
              )
            "
              style="margin: 0"
          ></el-button>
        </span>
      </el-tooltip>
    </div>
    <div class="table">
      <base-table
          v-loading="tableLoading"
          :showIndex="true"
          :tableData="tableData"
          :tableColumn="tableColumn"
          :tableDataMergeList="tableDataMergeList"
          id="mainTable"
      >
        <template #push_status="{row}">
          <div>
            <div>
              <div v-if="row.push_status==='Y'" style="width: 70px;background: yellowgreen;color: #fff">
                成功
              </div>
              <div v-else style="width: 70px;background: red;color: #fff">
                失败
              </div>
            </div>
          </div>
        </template>
        <template #initiate="{row}">
          <div>
            {{ row.initiate === 'D' ? '钉钉' : 'u8c' }}
          </div>
        </template>
        <template #approve="{row}">
          <div>
            <div v-if="row.approve==='Y'" style="width: 70px;background: yellowgreen;color: #fff">
              审核
            </div>
            <div v-else style="width: 70px;background: red;color: #fff">
              拒绝
            </div>
          </div>
        </template>
        <template #operation="{row}">
          <div style="color: blue;cursor: pointer" @click="clickHandle(row)">
            补推
          </div>
        </template>
      </base-table>
    </div>
    <div class="page" v-if="pageShow">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageModel.pageNum"
          :page-sizes="[10, 20, 40, 100]"
          :page-size="pageModel.pageSize"
          layout="total, prev, pager, next,sizes, jumper"
          :total="pageModel.pageTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import baseTable from './baseTable/index.vue'
//导出excel使用
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
//打印
import { basePrintJS } from '@/utils/util'

export default {
  name: 'baseNewTable',
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableColumn: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableLoading: { type: Boolean, default: false },
    exportEventName: { type: String, default: '导出文件名' },
    tableDataMergeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    pageShow: {
      type: Boolean,
      default: true
    },
    pageModel: {
      type: Object,
      default: () => {
        return {
          page: 1,
          limit: 10,
          pageTotal: 99
        }
      }
    }
  },
  data() {
    return {
      fixedButtonList: [
        {
          icon: 'el-icon-printer',
          title: '打印'
        },
        {
          icon: 'el-icon-folder',
          title: '导出'
        }
      ]
    }
  },
  methods: {
    clickHandle(row) {
      this.$emit('clickHandle', row)
    },
    /*
     * 导出、打印功能
     * item:当前按钮信息
     * boxId:打印表单id(仅导出）
     * name:导出后文件名（仅导出）
     * tableData:传打印表格当前tableData（仅打印）
     * tableColumn:传打印表格当前tableColumn（仅打印）
     * */
    fixedClick(item, boxId, name) {
      if (item.title == '导出') {
        this.exportEvent(name, boxId)
      } else if (item.title == '打印') {
        this.duplicate()
      }
    },
    //导出功能
    exportEvent(excelName, boxId) {
      let gatherData = {
        raw: true
      }
      let grid = XLSX.utils.table_to_book(
          document.querySelector(boxId),
          gatherData
      )
      let workbook = XLSX.write(grid, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
            new Blob([workbook], {
              type: 'application/octet-stream'
            }),
            this.exportEventName + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, workbook)
      }
      return workbook
    },
    //打印
    duplicate() {
      basePrintJS(this.tableData, this.tableColumn)
    },
    //页码size改变
    handleSizeChange(val) {
      console.log(val)
      this.$emit('pageSizeChange', val)
    },
    //页码改变
    handleCurrentChange(val) {
      this.$emit('pageChange', val)
    }
  },
  components: {
    baseTable
  }
}
</script>

<style scoped lang="scss">
.wrapTable {
  > .RightBtnList {
    display: flex;
    justify-content: flex-end;
  }

  > .table {
    margin-top: 10px;
  }

  > .page {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>