n20-common-lib 1.3.5 → 1.3.8

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

@@ -1,460 +0,0 @@
-<!--
-  功能：    自定义表格
-  作者：    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>
-