n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/NstcTable/NstcTable.vue

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