@kyfe/ks-query-table 0.0.21 → 0.0.22

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

@@ -0,0 +1,143 @@
+import { upDateLocalCache } from '../../../hooks/use-generic-search'
+import TableSettings from '../../table-settings/index.vue'
+import { setLocalStorageItem } from '../../../utils/localStorage'
+
+
+export default {
+    data() {
+        return {
+            showSetting: false,
+        }
+    },
+    methods: {
+        createTableSetting() {
+            const $props = this.$props
+            if (!$props.showSettingDialog) {
+                return null
+            }
+            const slot = this.$slots.default ? this.$slots.default[0] : this.$scopedSlots
+            const tableSettingAttrs = {
+                props: {
+                    value: this.showSetting,
+                    tableColumns: this.onlineColumns,
+                    innerTabVisible: this.$props.innerTabVisible,
+                    disabledAutoHideClose: this.$props.disabledAutoHideClose,
+                    isShowHorizontal: this.isShowHorizontal,
+                },
+                on: {
+                    input: val => (this.showSetting = val),
+                    confirm: this.settingsConfirm,
+                    initColumns: this.initColumns,
+                    cancel: this.settingsCancel,
+                    back: this.settingsBack,
+                    reset: this.settingsReset,
+                },
+                ref: 'tableSettings',
+                scopedSlots: {
+                    top: slot['setting-top'],
+                },
+            }
+            return <TableSettings {...tableSettingAttrs}></TableSettings>
+        },
+        // 打开个性设置弹窗
+        openSetting() {
+            this.showSetting = true
+        },
+        // 个性设置弹窗关闭确认
+        settingsConfirm(val) {
+            // 关闭动画和设置列头同时执行，在低端机器下阻塞进程。
+            setTimeout(async () => {
+                this.setOnlineColumns(val)
+                this.setColsToStorage(val)
+                await this.saveConfigToHttp(this.onlineColumns)
+                this.$emit('settingsConfirm', this.onlineColumns)
+            }, 0)
+        },
+        setColsToStorage(clos) {
+            if (!this.needCache) return
+            setLocalStorageItem('pe_stocks_quotes_table_fields-' + this.searchCode || '', JSON.stringify(clos))
+        },
+        // 个性设置取消
+        settingsCancel() {
+            this.$emit('settingsCancel')
+        },
+        // 个性设置返回
+        settingsBack() {
+            this.$emit('settingsBack')
+        },
+        // 个性设置重置
+        async settingsReset() {
+            this.resizeColumnMap = this.clearResizeColumnMap()
+            let val = await this.resetToHttp()
+            this.setOnlineColumns(val)
+            this.setColsToStorage(val)
+            this.$emit('settingsReset', this.onlineColumns)
+        },
+        /**
+         * 用户变更列显示/隐藏后，保存状态
+         * @param {*} columns
+         * @returns
+         */
+        async saveConfigToHttp(columns) {
+            if (this.columns.length && !this.forceSaveSettings) {
+                return
+            }
+            this.genericId = await this.getGenericId()
+            let fieldContent = this.formatFieldContent(columns)
+            let fieldSnapshot = this.formatFieldSnapshot(columns)
+            let params = {
+                genericId: this.genericId,
+                menuId: ksui.menu.id,
+                fieldContent: JSON.stringify(fieldContent),
+                fieldSnapshot: JSON.stringify(fieldSnapshot),
+            }
+            await this.$http('system.genericSearch.field.saveOrUpdate', 10124, params)
+            await upDateLocalCache(params, 'update')
+        },
+        /**
+         * 个性设置重置
+         * @returns
+         */
+        async resetToHttp() {
+            this.genericId = await this.getGenericId()
+            let params = {
+                genericId: this.genericId,
+                menuId: ksui.menu.id
+            }
+            let res = await this.$http('system.genericSearch.field.reset', 10124, params)
+            window.vant.Toast('重置成功')
+            let resetCols = JSON.parse(res.genericSearch)
+            resetCols.forEach(v => this.mergeColumn(v))
+            // upDateCatch({ id: params.genericId })
+            await upDateLocalCache({ ...params, fieldContent: res.genericSearch }, 'reset')
+            return resetCols
+        },
+        // 获取show的列
+        formatFieldContent(columns) {
+            return columns.filter(v => v.show).map(v => {
+                if (v.children) {
+                    return {
+                        key: v.key,
+                        child: (v.children || []).filter(c => c.show).map(c => c.key)
+                    }
+                } else {
+                    return v.key
+                }
+            })
+        },
+        // 获取快照
+        formatFieldSnapshot(columns) {
+            return columns.reduce((prev, cur) => {
+                let obj = { show: !!cur.show }
+                if (cur.children && cur.children.length) {
+                    obj.children = cur.children.reduce((p, c) => {
+                        p[c.key] = { show: !!c.show }
+                        return p
+                    }, {})
+                }
+                prev[cur.key] = obj
+                return prev
+            }, {})
+        },
+    }
+}

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

@@ -0,0 +1,519 @@
+import cloneDeep from 'lodash/cloneDeep'
+import debounce from 'lodash/debounce'
+// 无限滚动数据的更新时间，防止用户长时间停留，滑动后数据不更新
+const UPDATE_INTERVAL = 5 * 60 * 1000
+// 获取全量id的数量
+const idsPageSize = 10000
+// 每次更新数据的数量
+const upLength = Math.ceil(window.screen.width / 44) + 2
+// 无限滚动需要多加载的行数
+const addRowLength = 500
+
+export default {
+  props: {
+    // mounted后直接加载数据
+    autoLoadData: {
+      type: Boolean,
+      default: true
+    },
+    // 禁用loading
+    disabledLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 禁用表格请求
+    disabledHttp: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 本次滚动前的开始行
+      beforeStartRow: 0,
+      // 本次滚动前的结束行
+      beforeEndRow: 0,
+      // 全量的ids
+      tableScrollIds: [],
+      // 所有的数据映射map
+      tableMap: {},
+      lastReqTime: null, // TODO 需要保证code与数据一致，且是最后一次的请求
+      // 缓存的排序参数
+      orderByClauses: null,
+      // querytable 默认300
+      innterDelayLoading: 300,
+      dataFinish_timeStamp: null, // 数据返回时间
+      idsFinish_timeStamp: null, // ids最后返回时间
+      isLoadingMore: false // 加载更多加载中状态
+    }
+  },
+  computed: {
+    // 无限滚动用来加载视口数据的key
+    idsKey() {
+      // 非无限滚动也需要生成map映射
+      return this.config?.idsKey || this.config?.scrollLoad?.idsKey || 'code'
+    }
+  },
+  created() {
+    this.initDefaultData()
+  },
+  mounted() {
+    if (!this.autoLoadData) {
+      return
+    }
+    this.loadData()
+  },
+  methods: {
+    async loadMoreData() {
+      // 防止重复加载及无数据时触发
+      if (this.isLoadingMore || this.isLoading || !this.tableData || this.tableData.length === 0) return
+      this.isLoadingMore = true
+      this.loadData({ page: this.currentPage + 1, loadMore: true })
+    },
+    initDefaultData() {
+      // 不需要响应式
+      this.loadIdsMap = {}
+      // 需要更新进表格的数据
+      this.willUpdateDataArr = []
+    },
+    // 处理分页参数
+    formatPageParams(params, options) {
+      const { page } = options || {}
+      params.page = page ? page : 1
+      return params
+    },
+    // 处理当前页总数
+    formatRowTotal(res) {
+      const { scrollLoad } = this.config
+      if (!scrollLoad) {
+        // 非无限滚动，需要设置为出参表格行数
+        res.rowTotal = res.rows.length
+      }
+      return res
+    },
+    // 处理排序参数
+    formatSortParams(params, options) {
+      const { reqProp, order } = options || {}
+      if (!(reqProp || this.orderByClauses)) return params
+      if (reqProp) {
+        // 优先使用传入的排序参数，并保存
+        let _orderByClauses = [{ field: reqProp, orderByMode: order === 'ascending' ? 0 : 1 }]
+        params.orderByClauses = _orderByClauses
+        this.orderByClauses = _orderByClauses
+      } else if (this.orderByClauses) {
+        // 翻页或其他场景，使用缓存好的排序参数
+        params.orderByClauses = this.orderByClauses
+      }
+      return params
+    },
+    // 请求数据
+    async loadData(options) {
+      if (this.disabledHttp) return
+      return new Promise(async (resolve, reject) => {
+        try {
+          if (!this.disabledLoading && !(options && options.loadMore)) {
+            // 底部加载更多时无需表格全局loading
+            this.isLoading = true
+          }
+          const { url, appkey, beforeHttp, afterHttp, scrollLoad, afterSetData, firstScreenDataCompleted } = this.config
+          const now = new Date().valueOf()
+          this.lastReqTime = now
+
+          // 需要无限滚动，加载全量id
+          scrollLoad && this.loadTableScrollIds(now, options)
+
+          let params = {
+            // 默认页码200
+            pageSize: this.config.pageSize || 200
+          }
+          // 请求前，外部可处理入参
+          let beforeParams = { url, appkey, params }
+          // 合并外部return的参数
+          let $params = typeof beforeHttp === 'function' ? { ...beforeParams, ...await beforeHttp(beforeParams) } : beforeParams
+
+          let { url: _url, appkey: _appkey, params: _params } = $params
+
+          // 每次请求，记录时间戳
+          let serach_time_stamp = now
+
+          // 处理分页参数
+          _params = this.formatPageParams(_params, options)
+          // 处理排序参数
+          _params = this.formatSortParams(_params, options)
+          let res = await this.$http(_url, _appkey, _params)
+          // 非无限滚动，重复请求，不赋值
+          if (!scrollLoad && serach_time_stamp < this.lastReqTime) {
+            return
+          }
+
+          // 只赋值最后一次的请求
+          if (serach_time_stamp && this.lastReqTime && serach_time_stamp < this.lastReqTime) return
+
+          // 请求后，外部可处理出参
+          res = typeof afterHttp === 'function' ? await afterHttp(res) : res
+          res = this.formatRowTotal(res)
+
+          const { rowTotal, rows } = res
+
+          this.setTableData({ rowTotal, rows }, now, options)
+
+          // TODO 首屏数据设置完成
+          typeof afterSetData === 'function' && afterSetData()
+          typeof firstScreenDataCompleted === 'function' && firstScreenDataCompleted({ rowTotal, rows })
+          // this.tableData = res.rows
+          // TODO 取出参配置有问题
+          !scrollLoad && this.setPage({ page: _params.page, pageTotal: res.pageTotal })
+          if (options && options.loadMore && _params.page >= res.pageTotal || !!scrollLoad) {
+            // 当前页码等于最大页码时 或者 无限滚动
+            this.loadMoreFinish = true
+          }
+          this.isLoading = false
+          resolve(res)
+        } catch (error) {
+          this.checkNetType(error)
+          // TODO 错误是否需要清空数据
+          console.error('[query-table-search-error]', error)
+          reject(error)
+        }
+      })
+    },
+    // TODO, 暂时处理单元格数据 key都不存在的情况。此方法影响性能，后续要去除
+    createBaseData() {
+      // return Object.keys(val).reduce((base, v) => {
+      //   base[v] = '-'
+      //   return base
+      // }, {})
+      return {}
+    },
+    // 获取无限滚动需要的全量id
+    async loadTableScrollIds(now, options) {
+      try {
+        const { scrollLoad, appkey } = this.config
+        if (!scrollLoad) return
+
+        const { getIdsUrl, idsBeforeHttp, idsAfterHttp } = scrollLoad
+
+        let params = {}
+
+        // 请求前，外部可处理入参
+        let idsBeforeParams = { url: getIdsUrl, appkey, params }
+        // 合并外部return的参数
+        let $params = typeof idsBeforeHttp === 'function' ? { ...idsBeforeParams, ...await idsBeforeHttp(idsBeforeParams) } : idsBeforeParams
+
+        let { url: _url, appkey: _appkey, params: _params } = $params
+        // 无限滚动，首页数据需要设置唯一时间戳，用于校验是否为最后一次请求，与首页数据时间戳一致
+        let serach_time_stamp = now
+
+        // 处理排序参数
+        _params = this.formatSortParams(_params, options)
+        // id写死最大请求数量
+        let res = await this.$http(_url, _appkey, { ..._params, pageSize: idsPageSize })
+
+        // 只赋值最后一次的请求
+        if (serach_time_stamp && this.lastReqTime && serach_time_stamp < this.lastReqTime) return
+
+        // 请求后，外部可处理出参
+        res = typeof idsAfterHttp === 'function' ? await idsAfterHttp(res) : res
+
+        // res 需要处理成字符串数组['id1', 'id2]
+        this.tableScrollIds = res
+
+        this.idsFinish_timeStamp = now
+
+        this.setTableScrollIds()
+      } catch (error) {
+        console.error('[query-table-search-ids]', error)
+      }
+    },
+    // 无限滚动过程中加载数据
+    async scrollLoadData(scrollOptions) {
+      try {
+        const { scrollLoad, appkey, url } = this.config
+        if (!scrollLoad) return
+
+        const { scrollBeforeHttp, scrollAfterHttp } = scrollLoad
+        let params = {}
+
+        // 请求前，外部可处理入参
+        let scrollBeforeParams = { url, appkey, params }
+
+        let $params = typeof scrollBeforeHttp === 'function' ? { ...scrollBeforeParams, ...await scrollBeforeHttp(scrollBeforeParams, scrollOptions) } : scrollBeforeParams
+
+        let { url: _url, appkey: _appkey, params: _params } = $params
+
+        let res = await this.$http(_url, _appkey, _params)
+
+        // 请求后，外部可处理出参
+        res = typeof scrollAfterHttp === 'function' ? await scrollAfterHttp(res) : res
+
+        this.updateTableData(res.rows, 'api')
+      } catch (error) {
+        console.error('[query-table-scrollLoadData]', error)
+      }
+      // 清空本次请求加载中的ids
+      this.clearLoadIds(scrollOptions.code)
+    },
+    // 清空加载中的ids
+    clearLoadIds(codes) {
+      for (let index = 0; index < codes.length; index++) {
+        delete this.loadIdsMap[codes[index]]
+      }
+    },
+    async setTableData(val, now, loadOptions) {
+      let { rowTotal, rows, options: scrollData } = val
+      const nowDateStr = +new Date()
+      if (!scrollData) {
+       
+        let tableData = []
+        let item = null
+        // 设置第一页数据，全部双向绑定
+        for (let index = 0; index < rows.length; index++) {
+          item = rows[index]
+          tableData.push({ ...item, id: 'pe_' + Math.random().toString(), __updateTime: nowDateStr })
+        }
+        // 根据总条数设置空行，用于一次展示所有数据，后续滚动过程中请求后合并空数据
+        for (let index = rows.length; index < rowTotal; index++) {
+          tableData.push({ ...this.createBaseData(rows[0]), id: 'pe_' + Math.random().toString(), name: '-', selectedFlag: null })
+        }
+
+        if (loadOptions && loadOptions.loadMore) {
+          rows.forEach(v => this.tableData.push(v))
+        } else {
+          this.tableData = tableData
+        }
+        this.isLoadingMore = false
+        this.dataFinish_timeStamp = now
+        // 第一页数据，非滚动
+        this.total = Math.max(rowTotal, this.tableData.length)
+        this.setTableScrollIds()
+
+        // 第一页数据，让表格回到顶部
+        if (!(loadOptions && loadOptions.loadMore)) {
+          this.$refs.peTable && this.$refs.peTable.scrollToTop()
+          // 如果有数据,异步存入到map内
+          setTimeout(() => {
+            this.tableData.forEach(item => {
+              if (item.__updateTime) {
+                this.tableMap[item[this.idsKey]] = item
+              }
+            })
+          }, 0)
+        }
+      } else {
+        // 滚动加载的数据
+        this.updateTableData(rows, 'api')
+      }
+    },
+    // 表格滑动拉取数据
+    tableScrollPullData: debounce(async function (e) {
+      const { scrollLoad } = this.config
+      if (!scrollLoad) return
+      let { startRow, endRow, action, rowsPerViewport } = e
+
+      // code还没请求回来
+      if (!this.tableScrollIds.length) {
+        // 保存数据用于code取回来后立即执行
+        this.beforeStartRow = startRow
+        this.beforeEndRow = endRow
+        return
+      }
+
+      if (action === 'reload') {
+        // 立即请求
+        startRow = this.beforeStartRow
+        endRow = this.beforeEndRow
+      } else {
+        // 未产生行数变更时，不调用接口
+        if (this.beforeStartRow === startRow && this.beforeEndRow === endRow) {
+          return
+        } else {
+          this.beforeStartRow = startRow
+          this.beforeEndRow = endRow
+        }
+      }
+
+
+      //  TODO ? 业务逻辑
+      // if (startRow !== undefined && endRow !== undefined && isPullKLine) {
+      //   // 暂时隐藏，后续需要根据调用状态判断是否需要原生方法
+      //   const curCodes = this.tableScrollIds.slice(startRow, endRow)
+      //   try {
+      //     window.ks.callFunc({ method: "preLoadStockKlineToFile", params: { ids: uniq(curCodes) } })
+      //   } catch (error) {
+      //     console.log(error)
+      //   }
+      // }
+
+      // 优化处理,不重复请求已有数据
+      let codes = []
+      // 预加载多一屏数据
+
+      // 是否需要预加载
+      // 校验下一屏是否是空的
+      const checkNextViewData = () => {
+        const nowDateStr = +new Date()
+        let checkStartRow = startRow
+        let checkEndRow = endRow + rowsPerViewport
+        let id = null
+        let item = null
+        let load = false
+        while (checkStartRow <= checkEndRow) {
+          id = this.tableScrollIds[checkStartRow]
+          item = this.tableMap[id]
+          const noItem = id && !item
+          const oldItem = item && (!item.__updateTime || nowDateStr > UPDATE_INTERVAL + item.__updateTime)
+          if (id && (noItem || oldItem)) {
+            load = true
+            break
+          }
+          checkStartRow++
+        }
+        return load
+      }
+
+      if (!checkNextViewData()) {
+        return
+      }
+
+      let preloadEndRow = Math.min(endRow + addRowLength, this.tableScrollIds.length)
+      if (preloadEndRow > 0) {
+        let i = startRow
+        const nowDateStr = +new Date()
+        let id = null
+        let item = null
+        while (i <= preloadEndRow) {
+          // 如果已经有数据,不需要再请求获取
+          // 加入更新时间,如果超过指定时间需要重新获取
+          id = this.tableScrollIds[i] || ''
+          item = this.tableMap[id]
+
+          const noItem = id && !item
+          const oldItem = item && (!item.__updateTime || nowDateStr > UPDATE_INTERVAL + item.__updateTime)
+          const idLoad = this.loadIdsMap[id] // 加载中的数据
+
+          if (id && (noItem || oldItem) && !idLoad) {
+            codes.push(id)
+            this.loadIdsMap[id] = true
+          }
+          i++
+        }
+      }
+
+      if (!codes.length) return
+
+      let options = {
+        code: codes,
+        startRow,
+        endRow,
+      }
+      this.scrollLoadData(options)
+
+    }, 100),
+    /**
+ * 基于ID过滤并合并两个大型数组，保持原始顺序
+ * @param {Array} arr1 第一个数组（将被过滤）
+ * @param {Array} arr2 第二个数组（将完整保留）
+ * @returns {Array} 合并后的新数组
+ */
+    filterAndMergeArrays(arr1, arr2) {
+      // 创建第二个数组的ID集合用于快速查找
+      const arr2IdSet = new Set()
+      for (const item of arr2) {
+        if (item[this.idsKey]) {
+          arr2IdSet.add(item[this.idsKey])
+        }
+      }
+
+      // 过滤第一个数组中存在于第二个数组的项
+      const filteredArr1 = []
+      for (const item of arr1) {
+        if (item[this.idsKey] && !arr2IdSet.has(item[this.idsKey])) {
+          filteredArr1.push(item)
+        }
+      }
+
+      // 合并数组（保持顺序）
+      return [...filteredArr1, ...arr2]
+    },
+    // 更新数据
+    updateTableData(arr, type, callback) {
+      // 去除已在队列中的的重复数据，以新的为准，减少更新操作，提升性能
+      this.willUpdateDataArr = this.filterAndMergeArrays([...this.willUpdateDataArr], arr)
+      const nowDateStr = +new Date()
+      const step = () => {
+        if (this.willUpdateDataArr.length === 0) return
+        // 每次只更新设置好的行数
+        let upList = this.willUpdateDataArr.splice(0, upLength)
+        for (let index = 0; index < upList.length; index++) {
+          const item = upList[index]
+          const id = item[this.idsKey]
+          // 后端返回的直接赋值，实时数据需要该行不为空
+          if (this.tableMap[id] && (type === 'api' || this.tableMap[id].__updateTime)) {
+            const oldItem = cloneDeep(this.tableMap[id])
+            Object.assign(this.tableMap[id], item, { __updateTime: nowDateStr })
+            callback && callback(this.tableMap[id], oldItem)
+          }
+        }
+        // 每次设置完数据，主动更新
+        this.$refs?.peTable?.renderViewportRows()
+        requestAnimationFrame(step)
+      }
+      requestAnimationFrame(step)
+    },
+    resetTableData(i) {
+      // 重置下总数
+      this.total = i
+      if (this.tableData.length !== i) {
+        this.tableData = this.tableData.slice(0, i)
+      }
+    },
+    checkSetIds() {
+      // 数据返回是最新的，并且ids返回是最新的
+      return this.dataFinish_timeStamp === this.lastReqTime && this.idsFinish_timeStamp === this.lastReqTime
+    },
+    // 给每一行数据设置数据需要的id
+    setTableScrollIds() {
+      if (!this.config.scrollLoad) return
+      // 需要首页search 和 ids 是同一轮
+      if (!this.checkSetIds()) return
+      let i = Math.min(this.tableData.length, this.tableScrollIds.length)
+      // 兜底，ids与rowTotal 长度不一致时，用短的
+      this.resetTableData(i)
+      let id = null
+      let item = null
+      while (i--) {
+        item = this.tableData[i]
+        if (item[this.idsKey] === '-' || !item[this.idsKey]) {
+          id = this.tableScrollIds[i]
+          item[this.idsKey] = id
+          this.tableMap[id] = item
+          this.tableMap[id].__index = i
+        }
+      }
+      const { scrollLoad } = this.config
+      const { setScrollIdsAfter } = scrollLoad
+      typeof setScrollIdsAfter === 'function' && setScrollIdsAfter()
+    },
+    // 校验网络状态
+    async checkNetType(e) {
+      this.isLoading = false
+      // 后端超时
+      if (e.data && [27057].includes(e.data.code)) {
+        this.tableData = []
+        this.tableIsAbnormal = true
+        return
+      }
+      // 前端取消
+      if (e.message === (window.networkTimeoutMessage || '请求超时，服务器未响应')) {
+        this.tableData = []
+        this.tableIsAbnormal = true
+        return
+      }
+      if (window.ks) {
+        const netStatus = await window.ks.callFunc({ method: 'getNetType', params: {} })
+        this.tableData = netStatus === 1 ? [] : this.tableData
+        this.tableIsAbnormal = netStatus === 1
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+
+export default {
+  props: {
+    showPage: Boolean
+  },
+  data() {
+    return {
+      currentPage: 1,
+      totalPages: 1
+    }
+  },
+  methods: {
+    setPage(res) {
+      // TODO 需要缓存页码
+      // if (!this.showPage ) {
+      //   return
+      // }
+      this.currentPage = res.page
+      this.totalPages = res.pageTotal
+    },
+    onPageChanged(newPage) {
+      this.currentPage = newPage
+      this.loadData({ page: newPage })
+    },
+  }
+}