@kyfe/ks-query-table 0.0.21 → 0.0.22

package/src/view/home/query-table/components/query-table/index.vue

@@ -0,0 +1,497 @@
+<script>
+import 'tippy.js/dist/tippy.css'
+import { initGenericSearch } from '../../hooks/use-generic-search'
+import PeTable from '../pe-table/index.vue'
+import { PE_TABLE_PROPS } from '../pe-table/props/index.js'
+import { tableDecrypt } from '../../utils/encryption.js'
+import { handleShowPopover } from '../tooltip'
+import { getLocalStorageItem, setLocalStorageItem } from '../../utils/localStorage'
+
+import columnMixin from './mixins/column-mixin.js' // 表头列配置
+import columnSettingMixin from './mixins/column-setting.js' // 表头列的变更
+import tableHorizontalMixin from './mixins/table-horizontal.js' // 表格横屏
+import tableFixedMixin from './mixins/table-fixed' // 吸顶
+import tableDataMixin from './mixins/data-mixin'
+import TablePagination from '../table-pagination.vue'
+import PaginationMixin from './mixins/pagination-mixin'
+
+import '../../styles/table.less'
+
+let TABLE_ID = 1
+
+export default {
+  mixins: [PaginationMixin, columnMixin, columnSettingMixin, tableFixedMixin, tableHorizontalMixin, tableDataMixin],
+  name: 'KsQueryTable',
+  props: {
+    ...PE_TABLE_PROPS,
+
+    searchCode: String,
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+
+    isSorbentColumm: {
+      type: Boolean,
+      default: false,
+    },
+    showSettingDialog: {
+      type: Boolean,
+      default: true,
+    },
+    // total: {
+    //   type: [Number, String],
+    //   default: 0,
+    // },
+    // hideColumms: {
+    //   type: Array,
+    //   default: () => [],
+    // },
+    innerTabVisible: {
+      type: Boolean,
+      default: true,
+    },
+    marginWidth: {
+      type: Number,
+      default: 0,
+    },
+    // 是否需要解密功能，需要配合render渲染***
+    decrypt: {
+      type: Boolean,
+      default: false,
+    },
+    tableTag: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      currentPage: 1,
+      totalPages: 5,
+      total: 0,
+
+      tableData: null,
+      // 是否隐藏底部bar
+      isHideBar: true,
+      isShowTotal: false,
+      onlineColumns: [],
+      resizeColumnMap: {},
+      tableWidth: this.width,
+      tableHeight: this.height,
+      // 竖屏-宽
+      spTableWidth: 0,
+      // 竖屏-高
+      spTableHeight: 0,
+      // 状态栏高度
+      statusHeight: window.__statusBarHeight__ || 0,
+      isCurTableEmit: false,
+      curTableId: TABLE_ID++,
+      tableColunms: [],
+      tableIsAbnormal: false,
+      isLoading: false,
+      loadMoreFinish: false,
+      // showPopover: true,
+      // containerPopover: '',
+      // popRowIndex: 0,
+    }
+  },
+  watch: {
+    width: {
+      handler(val) {
+        if (val) {
+          this.tableWidth = val
+        }
+      },
+    },
+    height: {
+      handler(val) {
+        if (val) {
+          this.tableHeight = val
+        }
+      },
+    },
+    columns: {
+      handler(val) {
+        if (val) {
+          this.setOnlineColumns(val)
+        }
+      },
+    },
+    resizeColumnMap: {
+      handler() {
+        this.onlineColumns.forEach(col => this.mergeColumn(col))
+      },
+    },
+    // 下掉没用
+    // 使用function
+    // 用refs调进来，不要watch
+    // hideColumms: {
+    //   async handler(val) {
+    //     if (val) {
+    //       // TODO 存xy, 重置回去？不使用
+    //       this.isUpdateOffset = false
+    //       await this.$nextTick()
+    //       this.isUpdateOffset = true
+    //       setTimeout(() => {
+    //         this.$refs.peTable.updateRender()
+    //       }, 0)
+    //     }
+    //   },
+    // },
+    // data: {
+    //   handler() {
+    //     // TODO 一定要干掉
+    //     if (!this.onlineColumns || !this.onlineColumns.length) {
+    //       this.getColumns()
+    //     }
+    //   },
+    // },
+  },
+  render() {
+    const slot = this.$slots.default ? this.$slots.default[0] : this.$scopedSlots
+    const $props = this.$props
+
+    // 表格
+    const createPeTable = () => {
+      const peTableAttrs = {
+        props: {
+          total: this.total,
+          columns: this.onlineColumns,
+          data: this.tableData || $props.data,
+          rowHeight: $props.rowHeight,
+          headerRowHeight: $props.headerRowHeight,
+          rowKey: $props.rowKey,
+          cellClassName: $props.cellClassName,
+          headerCellClassName: $props.headerCellClassName,
+          showIndex: $props.showIndex,
+          beforeSort: $props.beforeSort,
+          emptyText: $props.emptyText,
+          scrollY: $props.scrollY && this.fixedScrollY,
+          scrollX: $props.scrollX,
+          autoResetScrollTop: $props.autoResetScrollTop,
+          width: this.tableWidth,
+          height: this.tableHeight,
+          maxHeight: $props.maxHeight,
+          isShowHorizontal: this.isShowHorizontal,
+          isLoading: this.isLoading,
+          isAbnormal: this.tableIsAbnormal,
+          // isLoadFinished: $props.isLoadFinished, // TODO 外部转内部
+          isLoadFinished: this.loadMoreFinish,
+          enableLoadMore: $props.enableLoadMore,
+          defaultSort: $props.defaultSort,
+          delayLoading: $props.delayLoading || this.innterDelayLoading,
+          isOpenTwoHeaderBg: $props.isOpenTwoHeaderBg,
+          isSorbentColumm: $props.isSorbentColumm,
+          isUpdateOffset: this.isUpdateOffset,
+          indexFormat: $props.indexFormat,
+          noOneScreenNoShowMore: $props.noOneScreenNoShowMore,
+          isScrollShowTotal: $props.isScrollShowTotal,
+          overflow: $props.overflow,
+          pageForIndex: this.currentPage,
+          showPage: $props.showPage,
+          isLoadingMore: this.isLoadingMore,
+          totalOffset: $props.totalOffset,
+        },
+        on: {
+          'cell-click': this.cellClick,
+          'header-cell-click': this.headerCellClick,
+          'cell-resize': this.cellResize,
+          'sort-change': this.sortChange,
+          collapsed: this.collapedChange,
+          scroll: this.scroll,
+          scrollTouchend: this.handlerTouchend,
+          scrollTouchstar: this.handlerTouchstar,
+          'table-mounted': this.tableMounted,
+          abnormal: this.abnormal,
+          'cell-long': this.handleCellLong,
+          loadMore: this.loadMore,
+        },
+        ref: 'peTable',
+        scopedSlots: {
+          empty: slot['empty'],
+        },
+      }
+      return <PeTable {...peTableAttrs}></PeTable>
+    }
+
+    const createPagination = () => {
+      return this.showPage && !this.config.scrollLoad ? (
+        <TablePagination
+          total-pages={this.totalPages}
+          current-page={this.currentPage}
+          on={{
+            pageChanged: this.onPageChanged,
+          }}
+        />
+      ) : null
+    }
+    return (
+      <div ref="peTableWrappper" class="pe-table-wrappper">
+        {this.createTableSetting()}
+        {
+          <div ref="tableBoxRef" class="table-box">
+            {slot.topUnfixed && <div class="top-unfixed">{slot.topUnfixed()}</div>}
+            <div class="fixed-box">
+              {slot.topFixed && <div class="top-fixed">{slot.topFixed()}</div>}
+              <div class="table">
+                <div ref="mesosphereWrap" style="height: 100%; width: 100%">
+                  {createPeTable()}
+                </div>
+              </div>
+              {createPagination()}
+            </div>
+          </div>
+        }
+        {this.createHorizontal()}
+      </div>
+    )
+  },
+  methods: {
+    loadMore() {
+      this.loadMoreData()
+    },
+    // 单元格点击
+    async cellClick(...args) {
+      let cellClickNext = true
+      if (this.decrypt) {
+        // 解密
+        cellClickNext = await tableDecrypt(...args)
+      }
+      if (!cellClickNext) return
+      // 气泡
+      const { show } = await handleShowPopover(...args, this)
+      if (show) return
+      this.$emit('cell-click', ...args)
+    },
+    // 调整列宽
+    cellResize({ column, width }) {
+      this.resizeColumnMap[column.key] = width
+      this.saveResizeColumnMap(this.resizeColumnMap)
+    },
+    // 表头点击
+    headerCellClick(...args) {
+      this.$emit('header-cell-click', ...args)
+    },
+    // 单元格长按
+    handleCellLong(...args) {
+      this.$emit('cell-long', ...args)
+    },
+    // 自定义列初始化完成
+    initColumns(...args) {
+      this.$emit('init-columns', ...args)
+    },
+    // 排序
+    sortChange(...args) {
+      this.$emit('sort-change', ...args)
+      this.loadData(...args)
+    },
+    // 伸缩列
+    collapedChange(...args) {
+      this.$emit('collapsed', ...args)
+    },
+    // 滚动
+    scroll(...args) {
+      this.fixedTableScroll(...args)
+      this.$emit('scroll', ...args)
+    },
+    // 触摸结束
+    handlerTouchend(...args) {
+      this.tableScrollPullData(...args)
+      this.$emit('scrollTouchend', ...args)
+    },
+    // 触摸开始
+    handlerTouchstar(...args) {
+      this.$emit('scrollTouchstar', ...args)
+    },
+    // 表格加载完成
+    tableMounted() {
+      this.$emit('table-mounted')
+    },
+    // 点击重新加载
+    abnormal() {
+      this.loadData()
+      this.$emit('abnormal')
+    },
+    // 横向滚动到指定列
+    scrollToColumn(...args) {
+      this.$refs.peTable.scrollToColumn(...args)
+    },
+    // 滚动到指定行
+    scrollToRow(...args) {
+      this.$refs.peTable.scrollToRow(...args)
+    },
+    // Y轴滚动
+    scrollToTop(scrollTop) {
+      this.$refs.peTable.scrollToTop(scrollTop)
+    },
+    // X轴滚动
+    scrollToLeft(scrollLeft) {
+      this.$refs.peTable.scrollToLeft(scrollLeft)
+    },
+    // 重新渲染视口列
+    renderViewportCellsColumns() {
+      return this.$refs.peTable.renderViewportCellsColumns()
+    },
+    // todo 没用下掉
+    // delay(ms) {
+    //   return new Promise(resolve => setTimeout(resolve, ms))
+    // },
+    // todo 没用下掉
+    // 设置HTML文档字体 rem据此设置生效
+    // setHtmlFontSize() {
+    //   // 提前设置，所以用height
+    //   var clientWidth = document.documentElement.clientHeight
+    //   if (clientWidth) {
+    //     let px = clientWidth / 10
+    //     document.documentElement.style.fontSize = px + 'px'
+    //   }
+    // },
+    // 手动调用排序
+    sortChangeHand(column, order) {
+      this.$refs.peTable.sortChange(column, order)
+    },
+    // 清除排序状态
+    clearSortMap() {
+      this.$refs.peTable.clearSortMap()
+    },
+    resizeTable(params) {
+      const { width = 0, state = null } = params || {}
+      setTimeout(() => {
+        let clientWidth = width || this.$parent.$el.clientWidth
+        // 增加兜底，存在获取到的 clientWidth 为 0 的情况
+        console.log(width, clientWidth, 'clientWidth------------')
+        if (!clientWidth) {
+          clientWidth = this.$root.$el.clientWidth || window.webAppW
+        }
+        this.tableWidth = clientWidth
+        // state === 0 折叠
+        // state !== 0 展开
+        if (state === 2) {
+          requestAnimationFrame(() => this.$refs.peTable.scrollToLeft(this.$refs.peTable.offsetX || 0))
+        }
+      }, 0)
+    },
+    // 折叠屏状态变更
+    onFoldStateChanged(state) {
+      // 折叠屏不会触发横屏
+      if (window.PE_tableHorizontal) {
+        return
+      }
+      const isMutiScreen = state !== 0
+      console.log('onFoldStateChanged', isMutiScreen, this.isShowHorizontal, this.getCurrenWidth(Number(this.isShowHorizontal)))
+      if (this.isShowHorizontal && isMutiScreen) {
+        this.closeHorizontal()
+      }
+      this.resizeTable({
+        width: this.getCurrenWidth(Number(this.isShowHorizontal)),
+        state,
+      })
+    },
+    getCurrenWidth(status) {
+      // int 0竖屏(默认)、1横屏
+      const { innerWidth, innerHeight } = window
+      let width = innerWidth
+      if (status === 1) {
+        width = Math.max(innerWidth, innerHeight) - this.statusHeight
+      } else {
+        width = Math.min(innerWidth, innerHeight) - this.marginWidth
+      }
+      return width
+    },
+    screenChange(status) {
+      if (this.isCurTableEmit) {
+        this.isCurTableEmit = false
+        return
+      }
+      this.resizeTable({
+        width: this.getCurrenWidth(status),
+        status,
+      })
+    },
+    // todo下掉
+    // updateColumn(col) {
+    //   this.onlineColumns.some(v => {
+    //     if (v.key === col.key) {
+    //       Object.assign(v, col)
+    //       return true
+    //     } else {
+    //       return false
+    //     }
+    //   })
+    // },
+    // 更新自定义列
+    updateColumns(cols) {
+      cols.forEach(c => {
+        this.onlineColumns.some(v => {
+          if (c.key === v.key) {
+            Object.assign(v, c)
+            return true
+          } else {
+            return false
+          }
+        })
+      })
+    },
+
+    // 获取本地存储的列宽数据
+    async getResizeColumnMap(searchCode = this.searchCode) {
+      if (!searchCode) return {}
+      const res = await getLocalStorageItem(`pe_table_cell_resize-${ksui.menu.id}-${searchCode}`)
+      return res ? JSON.parse(res) : {}
+    },
+    // 保存列宽数据到本地（App 或 LocalStorage）
+    saveResizeColumnMap(columnMap = {}) {
+      if (!this.searchCode) return {}
+      setLocalStorageItem(`pe_table_cell_resize-${ksui.menu.id}-${this.searchCode}`, JSON.stringify(columnMap))
+      return columnMap
+    },
+    // 清空本地缓存的列宽数据
+    clearResizeColumnMap() {
+      return this.saveResizeColumnMap()
+    },
+    checkMenuId() {
+      if (!ksui?.menu?.id) {
+        console.log('%c[query-table-error] 组件内部未获取到menuId，请检查 ksui.menu.id', 'font-size: 15px; color: red;')
+      }
+    },
+  },
+  created() {
+    this.checkMenuId()
+    // 获取当前菜单下所有自定义列的配置
+    initGenericSearch()
+    this.getResizeColumnMap().then(map => {
+      this.resizeColumnMap = map
+    })
+  },
+  mounted() {
+    // this.autoResizeHeight()
+    // this.containerPopover = this.$refs.peTableWrappper
+    // 下掉 ref调用
+    // this.$bus.$on('onFoldStateChanged', this.onFoldStateChanged)
+    // this.$bus.$on('screenChange', this.screenChange)
+  },
+  // todo? 研究下 下掉
+  // activated() {
+  //   setTimeout(() => {
+  //     console.log('activated--this.$parent.$el.clientWidth', this.$parent.$el.clientWidth)
+  //     this.resizeTable()
+  //   }, 100)
+  // },
+  beforeDestroy() {
+    // this._resizeObserver = null
+    // this.$bus.$off('onFoldStateChanged', this.onFoldStateChanged)
+    // this.$bus.$off('screenChange', this.screenChange)
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.pe-table-wrappper {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/src/view/home/query-table/components/query-table/mixins/column-mixin.js

@@ -0,0 +1,102 @@
+// finish
+import { addColumnParams } from '../../../utils/column.js'
+import { ColUtils, getGeneric } from '../../../hooks/use-column-config.js'
+export default {
+  props: {
+    needCache: {
+      type: Boolean
+    },
+    // 自定义渲染单元格配置
+    rowCellRenderOptions: {
+      type: Object,
+      default: () => {
+        return {
+          // one2: (h, { rowData }) => {
+          //   return <span style={{ 'color': 'red' }}>{rowData.one2}</span>
+          // }
+        }
+      }
+    },
+    // 自定义渲染表头配置
+    headerCellRenderOptions: {
+      type: Object,
+      default: () => {
+        return {
+          // one2: (h, { rowData }) => {
+          //   return <span style={{ 'color': 'red' }}>{rowData.one2}</span>
+          // }
+        }
+      }
+    },
+    // 强制保存到线上
+    forceSaveSettings: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      genericId: ''
+    }
+  },
+  beforeDestroy() {
+    this.colUtils = null
+  },
+  created() {
+    this.colUtils = new ColUtils({ mergeColumn: this.mergeColumn })
+    if (this.columns && this.columns.length) {
+      this.setOnlineColumns(this.columns)
+    } else {
+      this.getColumns();
+    }
+  },
+  methods: {
+    setOnlineColumns(val) {
+      this.onlineColumns = addColumnParams(val)
+    },
+    setColumnsOk(res) {
+      if (res) {
+        this.setColsToStorage(res)
+        this.onlineColumns = res
+        this.$emit('init-columns', this.onlineColumns)
+      }
+    },
+    // 获取线上配置
+    async getColumns() {
+      this.setColumnsOk(await this.colUtils.run(this.searchCode, false))
+    },
+    mergeColumn(v) {
+      if (this.rowCellRenderOptions && this.rowCellRenderOptions[v.key]) {
+        v.rowCellRender = this.rowCellRenderOptions[v.key]
+      }
+      if (this.headerCellRenderOptions && this.headerCellRenderOptions[v.key]) {
+        v.headerCellRender = this.headerCellRenderOptions[v.key]
+      }
+      // 二级表头Formatter
+      if (v.children && Array.isArray(v.children)) {
+        v.children.forEach(child => {
+          if (this.rowCellRenderOptions && this.rowCellRenderOptions[child.key]) {
+            child.rowCellRender = this.rowCellRenderOptions[child.key]
+          }
+          if (this.headerCellRenderOptions && this.headerCellRenderOptions[child.key]) {
+            child.headerCellRender = this.headerCellRenderOptions[child.key]
+          }
+          // 二级头需根据一级头显示/隐藏
+          const show = v.show ? !!child.show : false
+          this.$set(child, 'show', show)
+        })
+      }
+
+      // 如果调整过单元格宽度，则读取本地存储的调整后的值
+      const width = this.resizeColumnMap[v.key]
+      if (width) {
+        v.width = width
+      }
+    },
+    async getGenericId() {
+      // 当前菜单的通用查询配置
+      let userData = await getGeneric(this.searchCode)
+      return userData && userData.id
+    },
+  },
+}