n20-common-lib 1.2.41 → 1.3.0

package/src/components/NstcG6Components/NstcTable/NstcTable.vue

@@ -0,0 +1,460 @@
+<!--
+  功能：    自定义表格
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+<template>
+  <div
+      :class="[
+      'element-table-custom',
+      { 'vertical-header-el-table': isVerticalHeader },
+    ]"
+  >
+    <el-table
+        ref="elTable"
+        v-bind="$attrs"
+        :data="data"
+        :show-summary="!!summaryProps.length"
+        :summary-method="summaryMethod"
+        :span-method="objectSpanMethod"
+        :row-class-name="getRowClass"
+        style="width: 100%"
+        :max-height="maxHeight || null"
+        @row-click="rowClick"
+        border
+        v-on="$listeners"
+    >
+      <!--   前部   -->
+      <slot name="before"/>
+
+      <!--   主体   -->
+      <template v-for="(column, index) in columns">
+        <ElTableColumnCustom
+            ref="columnRef"
+            :key="index"
+            :show-overflow-tooltip="true"
+            :column="column"
+            :break-num="column.breakNum || 2"
+            @sortPropChange="handleSortPropChange"
+        />
+      </template>
+
+      <!--  操作    -->
+      <el-table-column
+          v-if="showHandlers"
+          :width="handlersWidth"
+          fixed="right"
+          :label="handlersLabel"
+          header-align="center"
+      >
+        <template slot-scope="scope">
+          <div class="element-table-custom-handlers">
+            <slot :row="scope.row" :index="scope.$index"/>
+            <slot :row="scope.row" name="handlers"/>
+          </div>
+        </template>
+      </el-table-column>
+      <!--  尾部    -->
+      <slot name="after"/>
+    </el-table>
+    <slot name="sum"/>
+
+    <NstcPagination
+        v-if="showPagination && !isVerticalHeader"
+        v-model="pagination"
+        :page="pagination.page"
+        :page-size="pagination.limit"
+        :total="pagination.total"
+        :is-inter-face="isInterFace"
+        @pagination-change="paginationChange"
+    />
+  </div>
+</template>
+
+<script>
+import ElTableColumnCustom from "./ElTableColumnCustom/index";
+import Sortable from "sortablejs";
+import NstcPagination from "../NstcPagination/NstcPagination";
+import axios from "@/utils/axios";
+
+export default {
+  name: "NstcTable",
+
+  components: {
+    ElTableColumnCustom,
+    NstcPagination,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    maxHeight: {
+      type: Number,
+      default: 0,
+    },
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    nodata: {
+      default: false,
+      type: Boolean,
+    },
+
+    canDoLayout: {
+      default: true,
+      type: Boolean,
+    },
+
+    canDragRow: {
+      default: false,
+      type: Boolean,
+    },
+
+    dragRowMethod: {
+      default: undefined,
+      type: Function,
+    },
+
+    columns: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+
+    data: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+
+    sortProp: {
+      default: "",
+      type: String,
+    },
+
+    sortCustom: {
+      default: false,
+      type: Boolean,
+    },
+
+    handlersWidth: {
+      default: "auto",
+      type: String,
+    },
+
+    handlersLabel: {
+      type: String,
+      default: function () {
+        return "操作";
+      },
+    },
+
+    isVerticalHeader: {
+      default: false,
+      type: Boolean,
+    },
+
+    summaryProps: {
+      type: Array,
+      default: () => [],
+    },
+
+    // 分页器是否展示
+    showPagination: {
+      default: true,
+      type: Boolean,
+    },
+
+    pagination: {
+      type: Object,
+      default: () => {
+        return {
+          page: 1,
+          limit: 20,
+          total: 100,
+        };
+      },
+    },
+
+    sumText: {
+      type: String,
+      default: function () {
+        return "本页合计";
+      },
+    },
+
+    /**
+     * 表格合并 分别对应合并项
+     */
+    mergeSpan: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 更具行内数据更改样式
+    rowClass: {
+      type: Object,
+      default: () => {
+        return {
+          key: "",
+          list: [],
+        };
+      },
+    },
+    // 分页是否固定在页面底部
+    isFixed: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否是主界面
+    isInterFace: {
+      type: Boolean,
+      default: false,
+    },
+    rowClick: {
+      type: [Object, Function],
+      default: () => ({}),
+    }
+  },
+
+  data() {
+    return {
+      noDataTop: 0,
+
+      sortable: null, // 拖拽表格库实例
+      // 表格合并
+      mergeSpanCol: [],
+      mergeSpanRow: [],
+    };
+  },
+
+  computed: {
+    showHandlers() {
+      return this.$scopedSlots.default || this.$scopedSlots.handlers;
+    },
+  },
+
+  watch: {},
+
+  mounted() {
+    this.init();
+  },
+
+  beforeDestroy() {
+    if (this.sortable) {
+      this.sortable.destroy();
+      this.sortable = null;
+    }
+  },
+
+  methods: {
+    down() {
+      const url = "/api/nstc-ers/1.0/elecBill/file/download";
+      axios({
+        url: url,
+        method: "get",
+        responseType: "blob",
+      }).then((res) => {
+        console.log(res);
+        const content = res;
+        const blob = new Blob([content]);
+        if ("download" in document.createElement("a")) {
+          const link = document.createElement("a");
+          link.download = "1.txt";
+          link.style.display = "none";
+          link.href = URL.createObjectURL(blob);
+          document.body.appendChild(link);
+          link.click();
+          URL.revokeObjectURL(link.href);
+          document.body.removeChild(link);
+        } else {
+          navigator.msSaveBlob(blob, "1.txt");
+        }
+      });
+    },
+    paginationChange(data) {
+      // this._pagination = { ...data }
+      console.log(data);
+
+      this.$emit("pagination-change", data);
+    },
+    doLayout() {
+      this.$refs.table.doLayout();
+    },
+
+    handleSortPropChange(prop) {
+      this.$emit("update:sortProp", prop);
+      this.$emit("sortPropChange", prop);
+
+      this.eleSort();
+    },
+
+    eleSort() {
+      !this.sortCustom &&
+      this.sortProp &&
+      this.$refs.table.sort(this.sortProp, "descending");
+    },
+
+    // 合计
+    summaryMethod({columns, data}) {
+      return columns.reduce((sums, {property}, index) => {
+        if (this.summaryProps.includes(property)) {
+          const sum = data.reduce((prev, curr) => {
+            const value = Number(curr[property]);
+
+            return isNaN(value) ? prev : prev + value;
+          }, 0);
+
+          return [...sums, sum];
+        }
+        return [...sums, index === 0 ? this.sumText : "-"];
+      }, []);
+    },
+    // 根据行中某个字段，显示添加不同的样式
+    getRowClass(row) {
+      if (!this.rowClass.key) {
+        return "";
+      } else {
+        for (let i = 0; i < this.rowClass.list.length; i++) {
+          if (row.row[this.rowClass.key] === this.rowClass.list[i]["value"]) {
+            return this.rowClass.list[i]["name"];
+          }
+        }
+      }
+    },
+
+    /**
+     * 表格合并
+     * @param row
+     * @param column
+     * @param rowIndex
+     * @param columnIndex
+     * @returns {*|{colspan: number, rowspan: number}}
+     */
+    // eslint-disable-next-line no-unused-vars
+    objectSpanMethod({row, column, rowIndex, columnIndex}) {
+      if (this.mergeSpan.length === 0) {
+        return {
+          rowspan: 1,
+          colspan: 1,
+        };
+      } else {
+        // 格式化数据
+        if (this.mergeSpanCol.length === 0) {
+          for (let i = 0; i < this.mergeSpan.length; i++) {
+            this.mergeSpanCol.push(this.mergeSpan[i][`col`]);
+            this.mergeSpanRow.push(this.mergeSpan[i][`row`]);
+          }
+        }
+        if (
+            this.mergeSpanCol.includes(columnIndex) &&
+            this.mergeSpanRow.includes(rowIndex)
+        ) {
+          const temp = this.mergeSpan.filter((i) => {
+            return i.col === columnIndex && i.row === rowIndex;
+          });
+          if (temp.length === 1) {
+            return temp[0][`span`];
+          } else {
+            return {
+              rowspan: 1,
+              colspan: 1,
+            };
+          }
+        }
+      }
+    },
+
+    setDrag() {
+      const $tbody = this.$refs.elTable.$el.querySelectorAll(
+          ".el-table__body-wrapper > table > tbody"
+      )[0];
+
+      this.sortable = Sortable.create($tbody, {
+        ghostClass: "sortable-ghost", // Class name for the drop placeholder,
+        setData: function (dataTransfer) {
+          // to avoid Firefox bug
+          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+          dataTransfer.setData("Text", "");
+        },
+        onEnd: (evt) => {
+          // this.dragRowMethod && this.dragRowMethod(evt)
+          const targetRow = this.data.splice(evt.oldIndex, 1)[0];
+          this.$nextTick(() => {
+            this.$nextTick(() => {
+              this.data.splice(evt.newIndex, 0, targetRow);
+            });
+          });
+        },
+      });
+    },
+
+    init() {
+      this.$nextTick(() => {
+        this.canDragRow && this.setDrag();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.element-table-custom {
+  position: relative;
+  height: 100%;
+
+  &-no-data {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  &-handlers {
+    /*text-align: center;*/
+  }
+
+  .el-link {
+    display: inline-block;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .explain-txt {
+    padding: 8px 10px 0 0;
+    background-color: transparent;
+    color: inherit;
+    border: none;
+    font-size: inherit;
+    font-weight: inherit;
+    min-width: 100%;
+    position: relative;
+    white-space: normal;
+    cursor: unset;
+
+    span {
+      position: relative;
+
+      i {
+        color: #d0920b;
+        position: absolute;
+        right: -15px;
+        top: -5px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .sortable-ghost {
+    opacity: 0.8;
+    color: #fff !important;
+    background: #42b983 !important;
+  }
+}
+</style>
+