n20-common-lib 1.3.9 → 1.3.12

package/nstc-g6/components/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"
+      border
+      @row-click="rowClick"
+      v-on="$listeners"
+    >
+      <!--   前部   -->
+      <slot name="before"></slot>
+
+      <!--   主体   -->
+      <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>
+            <slot :row="scope.row" name="handlers"></slot>
+          </div>
+        </template>
+      </el-table-column>
+      <!--  尾部    -->
+      <slot name="after"></slot>
+    </el-table>
+    <slot name="sum"></slot>
+
+    <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>
+