@kyfe/ks-query-table 0.0.9 → 0.0.11

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

@@ -1,496 +0,0 @@
-<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
-        },
-        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() {
-      if (!this.searchCode) return {}
-      const res = await getLocalStorageItem(`pe_table_cell_resize-${ksui.menu.id}-${this.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

@@ -1,102 +0,0 @@
-// 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
-    },
-  },
-}