middleground_code_v2/src/views/systemReports/passiveTable/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"
        tableHeight="calc(100vh - 280px)"
        id="mainTable"
      >
        <template #newstate="{row}">
          <div v-if="row.newstate==='成功'" style="color: green">
            {{ row.newstate }}
          </div>
          <div v-if="row.newstate==='失败'" style="color: red">
            {{ row.newstate }}
          </div>
        </template>
        <template #newstate2="{row}">
          <div v-if="row.newstate2==='成功'" style="color: green">
            {{ row.newstate2 }}
          </div>
          <div v-if="row.newstate2==='失败'" style="color: red">
            {{ row.newstate2 }}
          </div>
        </template>
        <template #newstate3="{row}">
          <div v-if="row.newstate3==='成功'" style="color: green">
            {{ row.newstate3 }}
          </div>
          <div v-if="row.newstate3==='失败'" style="color: red">
            {{ row.newstate3 }}
          </div>
        </template>
        <template #newstate4="{row}">
          <div v-if="row.newstate4==='成功'" style="color: green">
            {{ row.newstate4 }}
          </div>
          <div v-if="row.newstate4==='失败'" style="color: red">
            {{ row.newstate4 }}
          </div>
        </template>
      </base-table>
    </div>
    <div class="page">
      <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 [];
      },
    },
    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: {
    /*
     * 导出、打印功能
     * 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>