deploy

mock/controller/router.js

@@ -298,42 +298,6 @@ const data = [
         meta: { title: "上传", permissions: ["admin"] },
       },
       {
-        path: "excel",
-        component: "EmptyLayout",
-        redirect: "noRedirect",
-        name: "Excel",
-        meta: {
-          title: "Excel",
-          permissions: ["admin"],
-        },
-        children: [
-          {
-            path: "exportExcel",
-            component: "views/vab/excel/exportExcel",
-            name: "ExportExcel",
-            meta: { title: "导出Excel" },
-          },
-          {
-            path: "exportSelectedExcel",
-            component: "views/vab/excel/exportSelectExcel",
-            name: "ExportSelectedExcel",
-            meta: { title: "导出选中行" },
-          },
-          {
-            path: "exportMergeHeaderExcel",
-            component: "views/vab/excel/exportMergeHeaderExcel",
-            name: "ExportMergeHeaderExcel",
-            meta: { title: "导出合并" },
-          },
-          {
-            path: "uploadExcel",
-            component: "views/vab/excel/uploadExcel",
-            name: "UploadExcel",
-            meta: { title: "上传Excel" },
-          },
-        ],
-      },
-      {
         path: "sticky",
         name: "Sticky",
         component: "views/vab/sticky/index",

package.json

@@ -69,7 +69,6 @@
     "vue-router": "^3.3.4",
     "vuedraggable": "^2.24.0",
     "vuex": "^3.5.1",
-    "xlsx": "^0.16.3",
     "zx-comparison": "^1.0.3",
     "zx-count": "^0.3.7",
     "zx-icon": "^1.1.8",

src/components/UploadExcel/index.vue

@@ -1,160 +0,0 @@
-<template>
-  <div>
-    <input
-      ref="excel-upload-input"
-      class="excel-upload-input"
-      type="file"
-      accept=".xlsx, .xls"
-      @change="handleClick"
-    />
-    <div
-      class="drop"
-      @drop="handleDrop"
-      @dragover="handleDragover"
-      @dragenter="handleDragover"
-    >
-      将excel文件拖拽到此处或
-
-      <el-button
-        :loading="loading"
-        size="mini"
-        type="primary"
-        @click="handleUpload"
-      >
-        点击上传
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import XLSX from "xlsx";
-
-export default {
-  props: {
-    beforeUpload: {
-      type: Function,
-      default: () => {},
-    },
-    onSuccess: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      excelData: {
-        header: null,
-        results: null,
-      },
-    };
-  },
-  methods: {
-    generateData({ header, results }) {
-      this.excelData.header = header;
-      this.excelData.results = results;
-      this.onSuccess && this.onSuccess(this.excelData);
-    },
-    handleDrop(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      if (this.loading) return;
-      const files = e.dataTransfer.files;
-      if (files.length !== 1) {
-        this.$message.error("只支持上传一个文件！");
-        return;
-      }
-      const rawFile = files[0];
-
-      if (!this.isExcel(rawFile)) {
-        this.$message.error("仅支持上载.xlsx、.xls、.csv后缀文件！");
-        return false;
-      }
-      this.upload(rawFile);
-      e.stopPropagation();
-      e.preventDefault();
-    },
-    handleDragover(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "复制";
-    },
-    handleUpload() {
-      this.$refs["excel-upload-input"].click();
-    },
-    handleClick(e) {
-      const files = e.target.files;
-      const rawFile = files[0];
-      if (!rawFile) return;
-      this.upload(rawFile);
-    },
-    upload(rawFile) {
-      this.$refs["excel-upload-input"].value = null;
-
-      if (!this.beforeUpload) {
-        this.readerData(rawFile);
-        return;
-      }
-      const before = this.beforeUpload(rawFile);
-      if (before) {
-        this.readerData(rawFile);
-      }
-    },
-    readerData(rawFile) {
-      this.loading = true;
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          const data = e.target.result;
-          const workbook = XLSX.read(data, { type: "array" });
-          const firstSheetName = workbook.SheetNames[0];
-          const worksheet = workbook.Sheets[firstSheetName];
-          const header = this.getHeaderRow(worksheet);
-          const results = XLSX.utils.sheet_to_json(worksheet);
-          this.generateData({ header, results });
-          this.loading = false;
-          resolve();
-        };
-        reader.readAsArrayBuffer(rawFile);
-      });
-    },
-    getHeaderRow(sheet) {
-      const headers = [];
-      const range = XLSX.utils.decode_range(sheet["!ref"]);
-      let C;
-      const R = range.s.r;
-      for (C = range.s.c; C <= range.e.c; ++C) {
-        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
-        let hdr = "UNKNOWN " + C;
-        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
-        headers.push(hdr);
-      }
-      return headers;
-    },
-    isExcel(file) {
-      return /\.(xlsx|xls|csv)$/.test(file.name);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.excel-upload-input {
-  z-index: -9999;
-  display: none;
-}
-
-.drop {
-  position: relative;
-  width: 600px;
-  height: 160px;
-  margin: 0 auto;
-  font-size: 24px;
-  line-height: 160px;
-  color: #bbb;
-  text-align: center;
-  border: 2px dashed #bbb;
-  border-radius: 5px;
-}
-</style>

src/router/index.js

@@ -383,42 +383,6 @@ export const asyncRoutes = [
         meta: { title: "上传", permissions: ["admin"] },
       },
       {
-        path: "excel",
-        component: EmptyLayout,
-        redirect: "noRedirect",
-        name: "Excel",
-        meta: {
-          title: "Excel",
-          permissions: ["admin"],
-        },
-        children: [
-          {
-            path: "exportExcel",
-            component: () => import("@/views/vab/excel/exportExcel"),
-            name: "ExportExcel",
-            meta: { title: "导出Excel" },
-          },
-          {
-            path: "exportSelectedExcel",
-            component: () => import("@/views/vab/excel/exportSelectExcel"),
-            name: "ExportSelectedExcel",
-            meta: { title: "导出选中行" },
-          },
-          {
-            path: "exportMergeHeaderExcel",
-            component: () => import("@/views/vab/excel/exportMergeHeaderExcel"),
-            name: "ExportMergeHeaderExcel",
-            meta: { title: "导出合并" },
-          },
-          {
-            path: "uploadExcel",
-            component: () => import("@/views/vab/excel/uploadExcel"),
-            name: "UploadExcel",
-            meta: { title: "上传Excel" },
-          },
-        ],
-      },
-      {
         path: "sticky",
         name: "Sticky",
         component: () => import("@/views/vab/sticky/index"),

src/vendor/ExportExcel.js

@@ -1,216 +0,0 @@
-import { saveAs } from "file-saver";
-import XLSX from "xlsx";
-
-function generateArray(table) {
-  let out = [];
-  let rows = table.querySelectorAll("tr");
-  let ranges = [];
-  for (let R = 0; R < rows.length; ++R) {
-    let outRow = [];
-    let row = rows[R];
-    let columns = row.querySelectorAll("td");
-    for (let C = 0; C < columns.length; ++C) {
-      let cell = columns[C];
-      let colspan = cell.getAttribute("colspan");
-      let rowspan = cell.getAttribute("rowspan");
-      let cellValue = cell.innerText;
-      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
-
-      ranges.forEach(function (range) {
-        if (
-          R >= range.s.r &&
-          R <= range.e.r &&
-          outRow.length >= range.s.c &&
-          outRow.length <= range.e.c
-        ) {
-          for (let i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
-        }
-      });
-
-      if (rowspan || colspan) {
-        rowspan = rowspan || 1;
-        colspan = colspan || 1;
-        ranges.push({
-          s: {
-            r: R,
-            c: outRow.length,
-          },
-          e: {
-            r: R + rowspan - 1,
-            c: outRow.length + colspan - 1,
-          },
-        });
-      }
-
-      outRow.push(cellValue !== "" ? cellValue : null);
-
-      if (colspan) for (let k = 0; k < colspan - 1; ++k) outRow.push(null);
-    }
-    out.push(outRow);
-  }
-  return [out, ranges];
-}
-
-function datenum(v, date1904) {
-  if (date1904) v += 1462;
-  let epoch = Date.parse(v);
-  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
-}
-
-function sheet_from_array_of_arrays(data, opts) {
-  let ws = {};
-  let range = {
-    s: {
-      c: 10000000,
-      r: 10000000,
-    },
-    e: {
-      c: 0,
-      r: 0,
-    },
-  };
-  for (let R = 0; R != data.length; ++R) {
-    for (let C = 0; C != data[R].length; ++C) {
-      if (range.s.r > R) range.s.r = R;
-      if (range.s.c > C) range.s.c = C;
-      if (range.e.r < R) range.e.r = R;
-      if (range.e.c < C) range.e.c = C;
-      let cell = {
-        v: data[R][C],
-      };
-      if (cell.v == null) continue;
-      let cell_ref = XLSX.utils.encode_cell({
-        c: C,
-        r: R,
-      });
-
-      if (typeof cell.v === "number") cell.t = "n";
-      else if (typeof cell.v === "boolean") cell.t = "b";
-      else if (cell.v instanceof Date) {
-        cell.t = "n";
-        cell.z = XLSX.SSF._table[14];
-        cell.v = datenum(cell.v);
-      } else cell.t = "s";
-
-      ws[cell_ref] = cell;
-    }
-  }
-  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
-  return ws;
-}
-
-function Workbook() {
-  if (!(this instanceof Workbook)) return new Workbook();
-  this.SheetNames = [];
-  this.Sheets = {};
-}
-
-function s2ab(s) {
-  let buf = new ArrayBuffer(s.length);
-  let view = new Uint8Array(buf);
-  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
-  return buf;
-}
-
-export function export_table_to_excel(id) {
-  let theTable = document.getElementById(id);
-  let oo = generateArray(theTable);
-  let ranges = oo[1];
-
-  let data = oo[0];
-  let ws_name = "SheetJS";
-
-  let wb = new Workbook(),
-    ws = sheet_from_array_of_arrays(data);
-
-  ws["!merges"] = ranges;
-
-  wb.SheetNames.push(ws_name);
-  wb.Sheets[ws_name] = ws;
-
-  let wbout = XLSX.write(wb, {
-    bookType: "xlsx",
-    bookSST: false,
-    type: "binary",
-  });
-
-  saveAs(
-    new Blob([s2ab(wbout)], {
-      type: "application/octet-stream",
-    }),
-    "test.xlsx"
-  );
-}
-
-export function export_json_to_excel({
-  multiHeader = [],
-  header,
-  data,
-  filename,
-  merges = [],
-  autoWidth = true,
-  bookType = "xlsx",
-} = {}) {
-  filename = filename || "excel-list";
-  data = [...data];
-  data.unshift(header);
-
-  for (let i = multiHeader.length - 1; i > -1; i--) {
-    data.unshift(multiHeader[i]);
-  }
-
-  let ws_name = "SheetJS";
-  let wb = new Workbook(),
-    ws = sheet_from_array_of_arrays(data);
-
-  if (merges.length > 0) {
-    if (!ws["!merges"]) ws["!merges"] = [];
-    merges.forEach((item) => {
-      ws["!merges"].push(XLSX.utils.decode_range(item));
-    });
-  }
-
-  if (autoWidth) {
-    const colWidth = data.map((row) =>
-      row.map((val) => {
-        if (val == null) {
-          return {
-            wch: 10,
-          };
-        } else if (val.toString().charCodeAt(0) > 255) {
-          return {
-            wch: val.toString().length * 2,
-          };
-        } else {
-          return {
-            wch: val.toString().length,
-          };
-        }
-      })
-    );
-    let result = colWidth[0];
-    for (let i = 1; i < colWidth.length; i++) {
-      for (let j = 0; j < colWidth[i].length; j++) {
-        if (result[j]["wch"] < colWidth[i][j]["wch"]) {
-          result[j]["wch"] = colWidth[i][j]["wch"];
-        }
-      }
-    }
-    ws["!cols"] = result;
-  }
-
-  wb.SheetNames.push(ws_name);
-  wb.Sheets[ws_name] = ws;
-
-  let wbout = XLSX.write(wb, {
-    bookType: bookType,
-    bookSST: false,
-    type: "binary",
-  });
-  saveAs(
-    new Blob([s2ab(wbout)], {
-      type: "application/octet-stream",
-    }),
-    `${filename}.${bookType}`
-  );
-}

src/views/vab/excel/exportExcel.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="export-excel-container">
-    <vab-query-form>
-      <vab-query-form-left-panel :span="24">
-        <el-form :inline="true" @submit.native.prevent>
-          <el-form-item label="文件名">
-            <el-input v-model="filename" placeholder="请输出要导出文件的名称" />
-          </el-form-item>
-          <el-form-item label="文件类型">
-            <el-select v-model="bookType">
-              <el-option
-                v-for="item in options"
-                :key="item"
-                :label="item"
-                :value="item"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="自动列宽">
-            <el-radio-group v-model="autoWidth">
-              <el-radio :label="true">
-                是
-              </el-radio>
-              <el-radio :label="false">
-                否
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <el-form-item>
-            <el-button type="primary" @click="handleDownload">
-              导出 Excel
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </vab-query-form-left-panel>
-    </vab-query-form>
-
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      :element-loading-text="elementLoadingText"
-    >
-      <el-table-column show-overflow-tooltip label="序号" width="55">
-        <template slot-scope="scope">
-          {{ scope.$index + 1 }}
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="标题">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="作者">
-        <template slot-scope="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="访问量">
-        <template slot-scope="scope">
-          {{ scope.row.pageViews }}
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="时间">
-        <template slot-scope="scope">
-          <span>{{ scope.row.datetime }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { getList } from "@/api/table";
-
-export default {
-  name: "ExportExcel",
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      downloadLoading: false,
-      filename: "",
-      autoWidth: true,
-      bookType: "xlsx",
-      elementLoadingText: "正在加载...",
-      options: ["xlsx", "csv", "txt"],
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    async fetchData() {
-      this.listLoading = true;
-      const { data } = await getList();
-      this.list = data;
-      this.listLoading = false;
-    },
-    async handleDownload() {
-      this.downloadLoading = true;
-      const { export_json_to_excel } = await import("@/vendor/ExportExcel");
-      const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
-      const filterVal = ["id", "title", "author", "pageViews", "datetime"];
-      const list = this.list;
-      const data = this.formatJson(filterVal, list);
-      export_json_to_excel({
-        header: tHeader,
-        data,
-        filename: this.filename,
-        autoWidth: this.autoWidth,
-        bookType: this.bookType,
-      });
-      this.downloadLoading = false;
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map((v) =>
-        filterVal.map((j) => {
-          return v[j];
-        })
-      );
-    },
-  },
-};
-</script>

src/views/vab/excel/exportMergeHeaderExcel.vue

@@ -1,99 +0,0 @@
-<template>
-  <div class="export-merge-header-excel-container">
-    <vab-query-form>
-      <vab-query-form-left-panel :span="24">
-        <el-button
-          :loading="downloadLoading"
-          type="primary"
-          @click="handleDownload"
-          >导出
-        </el-button>
-      </vab-query-form-left-panel>
-    </vab-query-form>
-
-    <el-table ref="multipleTable" v-loading="listLoading" :data="list">
-      <el-table-column show-overflow-tooltip label="序号" width="55">
-        <template slot-scope="scope">
-          {{ scope.$index + 1 }}
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="Main Information">
-        <el-table-column show-overflow-tooltip label="Title">
-          <template slot-scope="scope">
-            {{ scope.row.title }}
-          </template>
-        </el-table-column>
-        <el-table-column show-overflow-tooltip label="Author">
-          <template slot-scope="scope">
-            <el-tag>{{ scope.row.author }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column show-overflow-tooltip label="Readings">
-          <template slot-scope="scope">
-            {{ scope.row.pageViews }}
-          </template>
-        </el-table-column>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="Date">
-        <template slot-scope="scope">
-          <span>{{ scope.row.datetime }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { getList } from "@/api/table";
-import { parseTime } from "@/utils";
-
-export default {
-  name: "MergeHeader",
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      downloadLoading: false,
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    async fetchData() {
-      this.listLoading = true;
-      const { data } = await getList(this.listQuery);
-      this.list = data;
-      this.listLoading = false;
-    },
-    async handleDownload() {
-      this.downloadLoading = true;
-      const { export_json_to_excel } = await import("@/vendor/ExportExcel");
-      const multiHeader = [["Id", "Main Information", "", "", "Date"]];
-      const header = ["", "Title", "Author", "Readings", ""];
-      const filterVal = ["id", "title", "author", "pageViews", "datetime"];
-      const list = this.list;
-      const data = this.formatJson(filterVal, list);
-      const merges = ["A1:A2", "B1:D1", "E1:E2"];
-      export_json_to_excel({
-        multiHeader,
-        header,
-        merges,
-        data,
-      });
-      this.downloadLoading = false;
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map((v) =>
-        filterVal.map((j) => {
-          if (j === "timestamp") {
-            return parseTime(v[j]);
-          } else {
-            return v[j];
-          }
-        })
-      );
-    },
-  },
-};
-</script>

src/views/vab/excel/exportSelectExcel.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="export-select-excel-container">
-    <vab-query-form>
-      <vab-query-form-left-panel>
-        <el-form :inline="true" @submit.native.prevent>
-          <el-form-item>
-            <el-input v-model="filename" placeholder="请输出要导出文件的名称" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="handleDownload">
-              导出选中行
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </vab-query-form-left-panel>
-    </vab-query-form>
-
-    <el-table
-      ref="multipleTable"
-      v-loading="listLoading"
-      :data="list"
-      :element-loading-text="elementLoadingText"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column show-overflow-tooltip type="selection" />
-      <el-table-column show-overflow-tooltip label="序号" width="55">
-        <template slot-scope="scope">
-          {{ scope.$index + 1 }}
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="标题">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="作者">
-        <template slot-scope="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="访问量" width="115">
-        <template slot-scope="scope">
-          {{ scope.row.pageViews }}
-        </template>
-      </el-table-column>
-      <el-table-column show-overflow-tooltip label="时间">
-        <template slot-scope="scope">
-          <span>{{ scope.row.datetime }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { getList } from "@/api/table";
-
-export default {
-  name: "SelectExcel",
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      multipleSelection: [],
-      downloadLoading: false,
-      filename: "",
-      elementLoadingText: "正在加载...",
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    async fetchData() {
-      this.listLoading = true;
-      const { data } = await getList(this.listQuery);
-      this.list = data;
-      this.listLoading = false;
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    async handleDownload() {
-      if (this.multipleSelection.length) {
-        this.downloadLoading = true;
-        const { export_json_to_excel } = await import("@/vendor/ExportExcel");
-        const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
-        const filterVal = ["id", "title", "author", "pageViews", "datetime"];
-        const list = this.multipleSelection;
-        const data = this.formatJson(filterVal, list);
-        export_json_to_excel({
-          header: tHeader,
-          data,
-          filename: this.filename,
-        });
-        this.$refs.multipleTable.clearSelection();
-        this.downloadLoading = false;
-      } else {
-        this.$baseMessage("请至少选择一行", "error");
-      }
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map((v) => filterVal.map((j) => v[j]));
-    },
-  },
-};
-</script>

src/views/vab/excel/uploadExcel.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="upload-excel-container">
-    <uploadExcel-component
-      :on-success="handleSuccess"
-      :before-upload="beforeUpload"
-    />
-    <el-table :data="tableData">
-      <el-table-column
-        v-for="item of tableHeader"
-        :key="item"
-        show-overflow-tooltip
-        :prop="item"
-        :label="item"
-      />
-    </el-table>
-  </div>
-</template>
-
-<script>
-import UploadExcelComponent from "@/components/UploadExcel/index.vue";
-
-export default {
-  name: "UploadExcel",
-  components: { UploadExcelComponent },
-  data() {
-    return {
-      tableData: [],
-      tableHeader: [],
-    };
-  },
-  methods: {
-    beforeUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-
-      if (isLt1M) {
-        return true;
-      }
-
-      this.$message({
-        message: "Please do not upload files larger than 1m in size.",
-        type: "warning",
-      });
-      return false;
-    },
-    handleSuccess({ results, header }) {
-      this.tableData = results;
-      this.tableHeader = header;
-    },
-  },
-};
-</script>