@kyfe/ks-query-table 0.0.2 → 0.0.3

package/components/query-table/mixins/column-setting.js

@@ -1,143 +0,0 @@
-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/components/query-table/mixins/data-mixin.js

@@ -1,502 +0,0 @@
-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: {
-    autoLoadData: {
-      type: Boolean,
-      default: true
-    },
-    disabledLoading: {
-      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最后返回时间
-    }
-  },
-  computed: {
-    // 无限滚动用来加载视口数据的key
-    idsKey() {
-      // 非无限滚动也需要生成map映射
-      return this.config.idsKey || this.config.scrollLoad?.idsKey || 'code'
-    }
-  },
-  created() {
-    this.initDefaultData()
-  },
-  mounted() {
-    if (!this.autoLoadData) {
-      return
-    }
-    this.loadData()
-    // setTimeout(() => {
-    //   this.loadData()
-    // }, 50);
-    // setTimeout(() => {
-    //   this.loadData()
-    // }, 100);
-    // setTimeout(() => {
-    //   this.loadData()
-    // }, 110);
-    // setTimeout(() => {
-    //   this.loadData()
-    // }, 140);
-  },
-  methods: {
-    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) {
-      return new Promise(async (resolve, reject) => {
-        try {
-          if (!this.disabledLoading) {
-            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 = {}
-
-          // 请求前，外部可处理入参
-          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)
-
-          // 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 })
-          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) {
-      let { rowTotal, rows, options: scrollData } = val
-      const nowDateStr = +new Date()
-      if (!scrollData) {
-        // 第一页数据，非滚动
-        this.total = rowTotal
-        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 })
-        }
-        this.tableData = tableData
-
-        this.dataFinish_timeStamp = now
-
-        this.setTableScrollIds()
-
-        // 第一页数据，让表格回到顶部
-        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/components/query-table/mixins/pagination-mixin.js

@@ -1,25 +0,0 @@
-
-export default {
-  props: {
-    showPage: Boolean
-  },
-  data() {
-    return {
-      currentPage: 1,
-      totalPages: 1
-    }
-  },
-  methods: {
-    setPage(res) {
-      if (!this.showPage) {
-        return
-      }
-      this.currentPage = res.page
-      this.totalPages = res.pageTotal
-    },
-    onPageChanged(newPage) {
-      this.currentPage = newPage
-      this.loadData({ page: newPage })
-    },
-  }
-}