shijiplus-web-plugin 0.1.34 → 0.1.36

package/src/components/plus-comp/plus-table-v2/plus-table-v2.vue

@@ -0,0 +1,584 @@
+/* eslint-disable */
+<template>
+  <div
+    ref="plusTableInnerRef"
+    :class="['plus-table-wrap', fixedHeader ? 'fixed-header' : '']"
+  >
+    <div
+      ref="searchAreaRef"
+      :class="[inlineForm && 'i-flex-wrap nowrap inline-wrap', 'p-search-area']"
+      v-if="showSearchArea"
+    >
+      <div :class="[inlineForm && 'f-grow']">
+        <PlusForm>
+          <Form :inline="inlineForm" :label-width="parseFloat(formLabelWidth)">
+            <slot name="searchArea"></slot>
+            <div
+              v-if="showButtonArea"
+              class="btn-area f-no-shrink i-flex-wrap f-grow"
+            >
+              <Button v-if="showSeachButton" type="primary" @click="onSearch">
+                搜索
+              </Button>
+              <Button v-if="showResetButton" type="default" @click="onReset">
+                重置
+              </Button>
+              <div class="operation-area f-grow f-row justify-end">
+                <slot name="operation"> </slot>
+              </div>
+            </div>
+          </Form>
+        </PlusForm>
+      </div>
+    </div>
+    <slot name="table">
+      <Table
+        :style="tableStyle"
+        :columns="showColumns"
+        :data="pageData"
+        :loading="loading"
+        :size="sizeType"
+        :height="height"
+        :noDataText="noDataText"
+        @on-selection-change="triggerSelectionChange"
+        @on-select-all="triggerSelectAll"
+        @on-sort-change="onSortChange"
+        @on-filter-change="onFilterChange"
+      >
+        <template
+          v-for="item in showColumns"
+          :slot="item.slot"
+          slot-scope="{ row, column, index }"
+        >
+          <slot
+            v-if="item.slot"
+            :name="item.slot"
+            :index="localPaging ? beginIndex + index : index"
+            :column="column"
+            :row="row"
+          >
+            {{ slotValue(item, row) }}
+          </slot>
+          <slot v-else-if="!item.render && !item.key">
+            {{ item.title }}-未设置渲染方式
+          </slot>
+        </template>
+      </Table>
+    </slot>
+    <div ref="footerRef">
+      <slot name="footer"></slot>
+      <div v-if="showPageArea" class="i-flex-wrap">
+        <Page
+          style="margin: 16px 0 0 auto"
+          :total="totalCount"
+          :current="currentPage"
+          @on-change="onPageChanged"
+          :page-size="pageSize"
+          :page-size-opts="[10, 20, 30, 50, 100]"
+          :show-total="showPageTotal"
+          :show-sizer="showPageSizer"
+          show-elevator
+          @on-page-size-change="onPageSizeChanged"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import exportMixin from './export-mixin'
+import { exportTableExcel } from '../../../libs/util'
+/**
+ * 统一了一些基础方法的写法
+ * 提供了refresh方法, 需要刷新当前页面时通过 $refs 调用
+ * 需要传递的参数 参考props
+ *
+ * 通过响应 'on-load-data' 事件加载数据, 事件参数包含 3 个属性
+ * currentPage: 读取数据的页码
+ * pageSize: 单页数据条数
+ * clearCondition: 是否需要清空搜索条件
+ */
+export default {
+  name: 'PlusTable',
+  mixins: [exportMixin],
+  props: {
+    fixedHeader: {
+      type: Boolean,
+      default: false
+    },
+    formLabelWidth: {
+      type: [Number, String],
+      default: 100
+    },
+    inlineForm: {
+      type: Boolean,
+      default: false
+    },
+    // 表格列定义
+    columns: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    localPaging: {
+      type: Boolean,
+      default: false
+    },
+    // 列表数据, 传入res.data即可
+    data: {
+      type: [Object, Array],
+      default() {
+        return {}
+      }
+    },
+    // 表格加载状态, 默认false
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    noDataText: {
+      type: String,
+      default: '暂无数据'
+    },
+    // 显示页码按钮
+    showPageArea: {
+      type: Boolean,
+      default: true
+    },
+    // 显示搜索按钮
+    showSeachButton: {
+      type: Boolean,
+      default: true
+    },
+    // 显示重置按钮
+    showResetButton: {
+      type: Boolean,
+      default: true
+    },
+    // 显示按钮区域
+    showButtonArea: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示搜索区, 默认显示
+    showSearchArea: {
+      type: Boolean,
+      default: true
+    },
+    // 每页条数
+    defaultPageSize: {
+      type: Number,
+      default: 10
+    },
+    sizeType: {
+      type: String,
+      default: 'default'
+    },
+    showPageSizer: {
+      type: Boolean,
+      default: true
+    },
+    showPageTotal: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    fixedHeader: {
+      handler(val) {
+        this.$nextTick(() => {
+          let tHeight = this.$refs.plusTableInnerRef.clientHeight
+          let tableWidth = this.$refs.plusTableInnerRef.clientWidth
+
+          // 获取元素的所有计算样式
+          var styles = window.getComputedStyle(this.$refs.plusTableInnerRef)
+
+          var styleHeight = parseFloat(styles.getPropertyValue('height'))
+          // 如果您只想获取特定方向的padding值，例如padding-top
+          var paddingLeft = parseFloat(styles.getPropertyValue('padding-left'))
+          var paddingRight = parseFloat(
+            styles.getPropertyValue('padding-right')
+          )
+          var paddingTop = parseFloat(styles.getPropertyValue('padding-top'))
+          var paddingBottom = parseFloat(
+            styles.getPropertyValue('padding-bottom')
+          )
+          if (paddingLeft) {
+            tableWidth -= paddingLeft
+          }
+          if (paddingRight) {
+            tableWidth -= paddingRight
+          }
+          if (paddingTop) {
+            tHeight -= paddingTop
+          }
+          if (paddingBottom) {
+            tHeight -= paddingBottom
+          }
+          this.tableWidth = tableWidth
+          if (this.$refs.searchAreaRef) {
+            tHeight -= this.$refs.searchAreaRef.clientHeight
+          }
+          if (this.$refs.footerRef) {
+            tHeight -= this.$refs.footerRef.clientHeight
+          }
+          if (val) {
+            this.height = tHeight
+          } else {
+            let tableWrap =
+              this.$refs.plusTableInnerRef.getElementsByClassName(
+                'ivu-table-wrapper'
+              )[0]
+            if (tableWrap) {
+              if (!this.data.data || !this.data.data.length) {
+                tableWrap.style.minHeight = tHeight + 'px'
+              }
+            }
+          }
+        })
+      },
+      deep: true,
+      immediate: true
+    },
+    defaultPageSize: {
+      handler(val) {
+        if (val > 0) {
+          this.pageSize = val
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    data: {
+      handler(val) {
+        if (val) {
+          console.log('-----data--------', val)
+          let dataArray = []
+          if (val instanceof Array) {
+            dataArray = val
+            this.totalCount = val.length
+          } else {
+            dataArray = val.data || []
+            this.totalCount = 0
+            if (val.meta || val.totalCount) {
+              this.totalCount = val.totalCount || val.meta.totalCount
+            }
+            if (this.totalCount < dataArray.length) {
+              this.totalCount = dataArray.length
+            }
+          }
+          // if (this.localPaging) {
+          //   const sortColumn = this.columns.filter((item) => {
+          //     return item.sortable
+          //   })[0]
+          //   if (sortColumn) {
+          //     dataArray = dataArray
+          //       .map((item) => {
+          //         return item
+          //       })
+          //       .sort((a, b) => {
+          //         if (a[sortColumn.key] && b[sortColumn.key]) {
+          //           if (sortColumn.sortType == 'desc') {
+          //             return b[sortColumn.key] - a[sortColumn.key]
+          //           }
+          //           return a[sortColumn.key] - b[sortColumn.key]
+          //         }
+          //         return 0
+          //       })
+          //   }
+          // }
+
+          this.dataList = dataArray
+        } else {
+          this.dataList = []
+          this.totalCount = 0
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    beginIndex() {
+      if (this.localPaging) {
+        return (this.currentPage - 1) * this.pageSize
+      }
+      return 0
+    },
+    pageData() {
+      if (this.localPaging) {
+        return this.dataList.slice(
+          this.beginIndex,
+          this.beginIndex + this.pageSize
+        )
+      }
+      return this.dataList
+    },
+    tableStyle() {
+      if (this.tableWidth) {
+        return { width: this.tableWidth + 'px' }
+      }
+      return {}
+    },
+    showColumns() {
+      return this.columns
+        .map((item) => {
+          if (!item.render && !item.slot) {
+            item.slot = `slot` + item.title
+          }
+          return item
+        })
+        .filter((item) => {
+          if (item.render) {
+            const oldRender = item.render
+            item.render = (h, params) => {
+              if (this.localPaging) {
+                params.index = this.beginIndex + params.index
+              }
+              return oldRender(h, params)
+            }
+          } else {
+            let realValue = ''
+            if (typeof item.defaultValue == 'function') {
+              realValue = item.defaultValue()
+            } else if (typeof item.defaultValue == 'number') {
+              realValue = `${item.defaultValue}`
+            } else {
+              realValue = item.defaultValue
+            }
+            if (realValue) {
+              item.render = (h, params) => {
+                if (!params.row[item.key]) {
+                  return h('span', realValue)
+                }
+                return h('span', params.row[item.key])
+              }
+            }
+          }
+          if (item.filters) {
+            if (typeof item.filterMultiple != 'boolean') {
+              item.filterMultiple = false
+            }
+            if (!item.filterKey) {
+              item.filterKey = item.key
+            }
+            if (!item.filterRemote) {
+              item.filterRemote = (value, key, column) => {}
+            }
+          }
+          return !item.hide
+        })
+    }
+  },
+  data() {
+    return {
+      tableWidth: 0,
+      height: '',
+      dataList: [],
+      totalCount: 0,
+      currentPage: 1,
+      pageSize: 10
+    }
+  },
+  methods: {
+    slotValue(col, row) {
+      return (col.computeValue && col.computeValue(row)) || row[col.key]
+    },
+    onReset() {
+      this.currentPage = 1
+      this.triggerLoadEvent(true)
+    },
+    onSearch() {
+      this.currentPage = 1
+      this.triggerLoadEvent(false)
+    },
+    triggerSelectionChange(selection) {
+      this.$emit('on-selection-change', selection)
+    },
+    triggerSelectAll() {
+      this.$emit('on-select-all')
+    },
+    onSortChange(e) {
+      this.$emit('on-sort-change', e)
+    },
+    onFilterChange(e) {
+      this.$emit('on-filter-change', { ...e, value: e._filterChecked })
+    },
+    onPageSizeChanged(size) {
+      this.pageSize = size
+      this.triggerLoadEvent(false)
+    },
+    onPageChanged(idx) {
+      this.currentPage = idx
+      this.triggerLoadEvent(false)
+    },
+    refresh() {
+      this.triggerLoadEvent(false)
+    },
+    triggerLoadEvent(clearCondition) {
+      let e = {
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        clearCondition: clearCondition
+      }
+      this.$emit('on-load-data', e)
+    },
+    tableToExcel(p = { params: {}, apiFun: null, fileName: '' }) {
+      return new Promise((resolve, reject) => {
+        const { params, apiFun, fileName } = Object.assign({}, p)
+        if (!apiFun) {
+          // 防止被 外部 destory
+          setTimeout(() => {
+            this.$Message.error({
+              content: '需要指定导出的API'
+            })
+          }, 100)
+          resolve()
+          return
+        }
+        this.invokeExportExcel(
+          {
+            ...params
+          },
+          apiFun
+        )
+          .then((data) => {
+            if (data) {
+              return exportTableExcel(data, this.columns, fileName)
+            }
+          })
+          .finally(() => {
+            resolve()
+          })
+      })
+    }
+  },
+  mounted() {
+    this.onSearch()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.plus-table-wrap {
+  --sibling-nodes-height: 0px;
+  --table-th-bg-color: #f8f8f9;
+  background-color: #ffffff;
+  padding: 0px;
+  box-sizing: border-box;
+  &.fixed-header {
+    height: calc(~'100% - var(--sibling-nodes-height)');
+  }
+  .p-search-area {
+    position: relative;
+    padding-bottom: 16px;
+    &.inline-wrap {
+      padding-bottom: 0px;
+    }
+    /deep/.plus-form-wrap {
+      .ivu-form-item {
+        margin-bottom: 16px;
+        margin-right: 44px;
+      }
+    }
+  }
+  .btn-area {
+    // margin-top: auto;
+    button {
+      margin-left: 8px;
+      height: 32px;
+      &:first-child {
+        margin-left: 0px;
+      }
+    }
+  }
+  .operation-area {
+    & > * {
+      &:first-child {
+        margin-left: 48px !important;
+      }
+    }
+  }
+  .ivu-table-wrapper {
+    border: none;
+    /deep/.ivu-table {
+      &::before {
+        background-color: transparent;
+      }
+
+      &::after {
+        background-color: transparent;
+      }
+      th {
+        height: 54px;
+        border-bottom: none;
+        background-color: var(--table-th-bg-color);
+        .ivu-table-cell {
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 14px;
+          color: #515a6e;
+          letter-spacing: 0.7px;
+        }
+      }
+      // td {
+      //   height: 64px;
+      // }
+      .ivu-table-tip {
+        height: ~'calc(100% - 54px)'; // 54 header的高
+        table {
+          height: 100%;
+        }
+      }
+      .ivu-table-tbody {
+        .ivu-table-cell {
+          padding-top: 16px;
+          padding-bottom: 16px;
+          line-height: 1.4;
+        }
+      }
+    }
+    /deep/.ivu-table-cell {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+    /deep/.ivu-table-row {
+      .ivu-table-cell {
+        font-weight: 400;
+        font-size: 14px;
+        color: #515a6e;
+        letter-spacing: 0.7px;
+        .ivu-btn {
+          margin-right: 4px;
+          margin-bottom: 2px;
+          margin-top: 2px;
+          &:last-child {
+            margin-right: 0;
+            &:first-child {
+              margin-bottom: 0;
+              margin-top: 0px;
+            }
+          }
+        }
+      }
+    }
+  }
+  /deep/.ivu-page {
+    .ivu-page-options-sizer {
+      margin-right: 0px;
+    }
+  }
+}
+.ivu-form-item-error .plus-table-wrap {
+  border: #ff0000 1px solid;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  /deep/.ivu-select-selection {
+    border-color: var(--border-color) !important;
+    .ivu-select-arrow {
+      color: var(--subsidiary-color);
+    }
+  }
+}
+</style>