@kyfe/ks-query-table 0.0.8 → 0.0.9

package/src/view/home/query-table/components/tooltip.js

@@ -0,0 +1,124 @@
+import tippy from 'tippy.js';
+function findParentWithClass(element, className, maxDepth = 10) {
+  if (!element || element === document.documentElement || maxDepth <= 0) {
+    return null
+  }
+
+  if (element.classList && element.classList.contains(className)) {
+    return element
+  }
+
+  return findParentWithClass(element.parentElement, className, maxDepth - 1)
+}
+
+const isShow = (val, vm) => {
+  const { event, column } = val
+  const { width } = column
+  // TODO 默认需要？
+  if (column.showPopover === false) return { show: false }
+  // 找到单元格
+  let cellDom = findParentWithClass(event.target, 'pe-table-cell')
+  if (!cellDom) {
+    return { 
+      show: false
+    }
+  }
+
+  let div = document.createElement('div')
+  div.innerText = cellDom.textContent
+  div.style.top = '-10000px'
+  div.style.position = 'absolute'
+  event.target.appendChild(div)
+  let realW = div.getBoundingClientRect().width
+  let columnW = width - 16
+
+  event.target.removeChild(div)
+  let offsets = getOffset(val, vm, cellDom)
+  return {
+    offsets,
+    show: realW >= columnW,
+    cellDom,
+    textContent: cellDom.textContent
+  }
+}
+
+const getOffset = (val, vm, cellDom) => {
+  const { width, fixed } = val.column
+  const fixedList = vm.onlineColumns.filter(col => col.fixed === 'left' || col.fixed)
+  const fixedWidth = fixedList.reduce((acc, col) => acc + col.width, 0) // 计算左边固定距离
+  const translateX = (cellDom && cellDom.style.transform.match(/translateX\(([^)]+)px\)/)?.[1]) || 0
+  const sortW = 40
+  let X = width + Math.ceil(translateX) - (fixedWidth + sortW)
+  if (X < width / 2 && !fixed) {
+    return {
+      left: fixedWidth + sortW + X / 2,
+      maxWidth: window.innerWidth - (fixedWidth + sortW) - X / 2 - 8,
+      offset: [0, -4]
+    } 
+  } else {
+    return {
+      maxWidth: window.innerWidth - 20,
+      offset: [0, -4]
+    } 
+  }
+}
+
+
+export const handleShowPopover = (val, vm) => {
+  const { show, offsets } = isShow(val, vm)
+  const { event } = val
+  const element = event.currentTarget;
+  if (show) {
+    tippy(element, {
+      content: element.innerText,
+      theme: 'light',
+      appendTo: document.body,
+      offset: offsets.offset,
+      maxWidth: offsets.maxWidth,
+      hideOnClick: true, // 点击任何地方都会关闭
+      interactive: true, // 允许与弹窗交互
+      trigger: 'manual', // 手动触发
+      onShow(instance) {
+        // 点击外部关闭的处理
+        const handleClickOutside = () => {
+
+          // if (!instance.popper.contains(e.target) && e.target !== element) {
+            instance.hide()
+          // }
+        }
+
+        const resizeHide = () => {
+          instance.hide()
+        }
+
+        document.addEventListener('pointerdown', handleClickOutside)
+        window.addEventListener('resize', resizeHide)
+
+        instance._clickOutsideHandler = handleClickOutside
+        instance._resizeHide = resizeHide
+        if (offsets.left) {
+          setTimeout(() => {
+            instance.popper.style.transform = instance.popper.style.transform.replace(/\(.*?px/, '(' + offsets.left + 'px')
+            instance.popper.querySelector('.tippy-arrow').style.transform = 'translate(4px, 0px)'
+          }, 10)
+        }
+        // 获取箭头元素
+      },
+      onHide(instance) {
+        // 移除事件监听
+        document.removeEventListener('pointerdown', instance._clickOutsideHandler)
+        window.removeEventListener('resize', instance._resizeHide)
+      },
+      onClickOutside(instance) {
+        instance.hide();
+      }
+    }).show();
+    return {
+      show: true,
+      rowIndex: val.rowIndex
+    }
+  }
+  return {
+    show: false
+  }
+}

package/src/view/home/query-table/hooks/use-cache-promise.js

@@ -0,0 +1,27 @@
+
+function removeCache(key) {
+  const {cache} = this
+  if(cache) {
+    delete cache[key]
+  }
+}
+
+export const useCachePromise = () => {
+  const cache = {};
+
+  // 外部处理好key相同的情况
+  const fn = function (key, promiseOrFunction) {
+    if (cache[key]) return cache[key]; // 如果有缓存，直接返回
+
+    const promise = typeof promiseOrFunction === 'function' ? promiseOrFunction() : promiseOrFunction;
+
+    cache[key] = promise.catch((err) => {
+      cache[key] = null; // 失败时清理缓存
+      throw err;
+    });
+
+    return cache[key];
+  };
+  fn.removeCache = removeCache.bind({cache})
+  return fn
+}

package/src/view/home/query-table/hooks/use-column-config.js

@@ -0,0 +1,190 @@
+import { commonGetGenericSearchById } from './use-generic-search'
+import { useCachePromise } from './use-cache-promise.js'
+import cloneDeep from 'lodash/cloneDeep'
+import intersection from 'lodash/intersection'
+import { addColumnParams, } from '../utils/column.js'
+import { setLocalStorageItem } from '../utils/localStorage'
+import { getGenericSearch } from '../api/index'
+import { createdId } from '../utils/config'
+
+const cacheGeneric = useCachePromise()
+
+async function _getColumns(searchCode, needCache) {
+  try {
+    // sessionStorage里有，无需重新加载
+    if (!(searchCode)) return
+    // 线上原始配置
+    let originArr = []
+    let snapshotObj = []
+    const userData = await getGeneric(searchCode)
+    // console.log('wwwwwwwwwwww',userData);
+    if (!userData) return
+    let genericId = userData.id
+    let userArr = JSON.parse(userData.fieldContent || [])
+    // 数组内的项 是 字符串，代表用户保存的数据  typeof userArr[0] === 'string'
+    const isUserData = !userArr || !userArr[0] || typeof userArr[0] === 'string' || userArr[0].child
+    if (isUserData) {
+      // 如果用户保存了自定义查询，需要获取自定义查询公共配置。对比后处理后设置给表格和个性设置
+      const promise = () => commonGetGenericSearchById({ id: userData.id })
+      let res = await (needCache ? cacheGeneric(genericId, promise) : promise())
+      // console.log('wwwwwwwwwwww',res);
+      // 线上的原始配置
+      originArr = JSON.parse(res.fieldContent)
+      // 新增字段，表示是否有上个版本的全字段配置
+      snapshotObj = JSON.parse(res.fieldSnapshot || '{}')
+    } else {
+      // 容错处理：没有返回正确的个性模板，则使用线上初始配置
+      // 调试代码，用与生成demo动图
+      // userArr.forEach((v, i) => {
+      //   v.label = '列' + (i + 1)
+      // })
+      originArr = userArr
+      const key = createdId(userData.id)
+      // 设置缓存为当前数据
+      await setLocalStorageItem(key, JSON.stringify(userData))
+    }
+    let data = {
+      originArr,
+      userArr,
+      snapshotObj,
+      isUserData,
+      genericId
+    }
+    return data
+  } catch (error) {
+    console.log(error, 'getColumns error');
+    return false
+  }
+}
+
+export class ColUtils {
+  constructor({ mergeColumn } = {}) {
+    this.mergeColumn = mergeColumn
+  }
+  async run(searchCode, needCache) {
+    const args = await _getColumns(searchCode, needCache)
+    if (!args) {
+      return
+    }
+    const {
+      originArr,
+      userArr,
+      snapshotObj,
+      isUserData,
+    } = args
+    if (isUserData) {
+      return this.setColumns(originArr, userArr, snapshotObj)
+    } else {
+      return this.setColumns(originArr)
+    }
+  }
+  setColumns(originArr, userArr, snapshotObj) {
+    if (originArr && originArr.length) {
+      // 是否用用户自定义数据
+      let isUserSave = !!userArr
+      // 用户自定义数据
+      let userKeys = []
+      let userChildKeys = {}
+      // 如果没有交集，则取公共模板
+      if (isUserSave) {
+        userKeys = userArr.map(item => {
+          if (typeof item === 'string') return item
+          if (item.child && item.child.length) userChildKeys[item.key] = item.child
+          return item.key || ''
+        })
+        let keys = originArr.map(v => v.key)
+        keys = intersection(keys, userKeys)
+        // 原始配置包含用户保存的配置
+        isUserSave = keys && keys.length > 0
+      }
+      let userSaveConfigLength = isUserSave ? userArr.length : 0
+      originArr.forEach(v => {
+        // 深拷贝，为了拿到原数据中一级头和二级头是否显示show的状态
+        const originCol = cloneDeep(v)
+        // 用户自定义的字段排序在前面
+        if (isUserSave) {
+          let index = userKeys.indexOf(v.key) + 1
+          v.index = index || ++userSaveConfigLength
+          v.show = index > 0
+        }
+        if (v.show && v.children && userChildKeys[v.key]) {
+          let childLength = isUserSave ? userChildKeys[v.key].length : 0
+          v.children.forEach(child => {
+            let childIndex = userChildKeys[v.key].indexOf(child.key) + 1
+            child.index = childIndex || ++childLength
+            child.show = childIndex > 0
+          })
+          v.children.sort((a, b) => a.index - b.index)
+        }
+        // 是否有用户数据，是否有上个版本数据
+        if (isUserSave && snapshotObj && Object.keys(snapshotObj).length) {
+          this.updateColumnStatus(originCol, v, snapshotObj, originArr)
+        }
+        // 处理用户传进来的cellRender
+        this.mergeColumn && this.mergeColumn(v)
+      })
+      if (isUserSave) {
+        originArr.sort((a, b) => a.index - b.index)
+      }
+      // 固定列排最前
+      originArr.sort((a, b) => {
+        let x = a.fixed ? 1 : 0
+        let y = b.fixed ? 1 : 0
+        return y - x
+      })
+      return addColumnParams(originArr)
+    }
+  }
+  // 2021-11-19 检查是当前一级头或二级头是否是新同步字段
+  updateColumnStatus(originCol, v, snapshotObj, originArr) {
+    const index = originArr.findIndex(item => item.key === v.key)
+    const isNewKey = !snapshotObj[v.key] && originCol.show
+    // 1、上个版本没有一级头字段，则表示该字段是新增字段
+    v.show = v.show || isNewKey
+    // 2、上个版本一级头字段，且没有二级头标识children，则表示二级头children都是新增字段
+    if (v.children && snapshotObj[v.key] && !snapshotObj[v.key].children) {
+      v.children.forEach((child) => {
+        const findObj = originCol.children.find(item => item.key === child.key)
+        child.show = findObj.show
+      })
+    }
+    // 3、如果新旧版本字段都有二级头，查找二级头children中是否有新增字段
+    if (v.show && v.children && snapshotObj[v.key] && snapshotObj[v.key].children) {
+      v.children.forEach((child) => {
+        const newFlag = !snapshotObj[v.key].children[child.key]
+        const findIndex = originCol.children.findIndex(item => item.key === child.key)
+        child.show = child.show || (newFlag && originCol.children[findIndex].show)
+        child.index = newFlag ? findIndex : child.index
+      })
+      v.children.sort((a, b) => a.index - b.index)
+    }
+    // 2022-12-04 4、新增字段按照原有顺序排序
+    if (isNewKey) {
+      // 字段排序是通过添加索引排序，起始为1
+      // sort方法相同大小排序，会导致先排序的字段会排在前面
+      v.index = index
+    }
+  }
+}
+
+
+export const getGeneric = async (searchCode) => {
+  let generic = window.KS_QUERY_TABLE_GERENIC_SEARCH_LIST_PROMISE ? await window.KS_QUERY_TABLE_GERENIC_SEARCH_LIST_PROMISE : await getGenericSearch()
+
+  let userData = generic.find(v => v.searchCode === searchCode)
+
+  if (!userData) {
+    // 如果缓存里没有当前列，需要重新调用
+    // let newMenuList = window.PE_NEW_GENERIC_PROMISE || getListByMenuIdAndCache()
+    let generic = await getGenericSearch()
+    // window.PE_NEW_GENERIC_PROMISE = newMenuList
+    // generic = await newMenuList
+    userData = generic.find(v => v.searchCode === searchCode)
+  }
+
+  if (!userData) {
+    console.error('[自定义列获取失败，请检查是否配置正确]')
+  }
+
+  return userData
+}

package/src/view/home/query-table/hooks/use-generic-search.js

@@ -0,0 +1,95 @@
+import { getGenericSearch, getGenericSearchById } from '../api/index'
+import { getLocalStorageItem, setLocalStorageItem } from '../utils/localStorage'
+import { createdId, menuCacheKey } from '../utils/config'
+
+// 延迟更新缓存的时间，防止应用初始化时接口过多，阻塞首屏性能
+const lazyTime = 5000
+
+// 初始化通用查询所有配置
+export const initGenericSearch = () => {
+  window.KS_QUERY_TABLE_GERENIC_SEARCH_LIST_PROMISE = new Promise((resolve, reject) => {
+    getGenericSearch().then(res => {
+      setLocalStorageItem(menuCacheKey(), JSON.stringify(res))
+      resolve(res)
+    }).catch(e => {
+      reject(e)
+    })
+  })
+}
+
+// 通过id获取自定列配置
+export const commonGetGenericSearchById = (params) => {
+  return new Promise(async resolve => {
+    try {
+      const { id } = params
+      const key = createdId(id)
+      // 获取原生缓存
+      const value = await getLocalStorageItem(key)
+      if (value) {
+        // 有缓存
+        resolve(JSON.parse(value))
+        upDateCatch(params, lazyTime)
+      } else {
+        // 调接口
+        if (!id) {
+          resolve(undefined)
+          return
+        }
+        // 调用接口获取
+        let res = await getGenericSearchById(params)
+        // 存缓存
+        resolve(res)
+        await setLocalStorageItem(key, JSON.stringify(res))
+      }
+    } catch (e) {
+      resolve(undefined)
+    }
+  })
+}
+
+export const upDateCatch = (params, time = 0) => {
+  // 覆盖缓存
+  const { id } = params
+  const key = createdId(id)
+  setTimeout(async () => {
+    let res = await getGenericSearchById(params)
+    await setLocalStorageItem(key, JSON.stringify(res))
+  }, time)
+}
+
+
+// 个性设置更新本地缓存，不依赖接口
+export const upDateLocalCache = async (params, type = 'update') => {
+  // 更新单条快照
+  const { genericId } = params
+  const key = createdId(genericId)
+  const value = await getLocalStorageItem(key)
+  const _value = JSON.parse(value)
+  if (type === 'update') {
+    // 只更新快照
+    _value.fieldSnapshot = params.fieldSnapshot
+  } else if (type === 'reset') {
+    // 清空快照
+    _value.fieldSnapshot = ''
+  }
+  await setLocalStorageItem(key, JSON.stringify(_value))
+  // 更新菜单配置下的fieldContent
+  const menuKey = menuCacheKey()
+  const menuValue = await getLocalStorageItem(menuKey)
+  const _menuValue = JSON.parse(menuValue)
+  _menuValue.some(v => {
+    if (v.id === params.genericId) {
+      v.fieldContent = params.fieldContent
+      return true
+    } else {
+      return false
+    }
+  })
+
+  // let promise = new Promise(async resolve => {
+  //   resolve(_menuValue)
+  // })
+  // store缓存也更新下
+  // store.commit('SET_GENERIC_DATA', promise)
+  await setLocalStorageItem(menuKey, JSON.stringify(_menuValue))
+}

package/src/view/home/query-table/index.js

@@ -0,0 +1,7 @@
+import Table from './components/query-table/index.vue'
+
+Table.install = function (Vue) {
+  Vue.component(Table.name, Table)
+}
+
+export default Table

package/src/view/home/query-table/styles/table.less

@@ -0,0 +1,24 @@
+.pe-table-wrappper {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  .table-box {
+    height: 100%;
+    overflow-y: auto;
+    .top-unfixed {
+      // background: green;
+    }
+    .fixed-box {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .top-fixed {
+        // background: pink;
+      }
+      .table {
+        flex: 1;
+      }
+    }
+  }
+}
+

package/src/view/home/query-table/utils/column.js

@@ -0,0 +1,36 @@
+
+// 拓展增加表头参数
+export const addColumnParams = (columns) => {
+  // 创建面板图标标识
+  const createCollapseFlag = (item, columns) => {
+    if (!item.collapseKeys || !item.collapseKeys.length) return false
+    const isSome = item.collapseKeys.some(key => {
+      const find = columns.find(find => find.key === key)
+      return !!find.show
+    })
+    return isSome
+  }
+
+  // 创建背景颜色
+  const colors = ['#FEF2EE', '#EBF7FF', '#FFF7EB', '#ECEFF7']
+  let colorIndex = 0
+  const createBackgroundColor = (item) => {
+    let backgroundColor = ''
+    if (item.children && item.children.length > 0) {
+      backgroundColor = colors[colorIndex % colors.length]
+      colorIndex++
+    }
+    return backgroundColor
+  }
+
+  return columns.map(item => {
+    return {
+      ...item,
+      children: addColumnParams(item.children || []),
+      // 增加 isShowCollapseIcon 辅助字段，用于动态根据 collapseKeys 判断是否显示折叠图标
+      isShowCollapseIcon: createCollapseFlag(item, columns),
+      // 如果每项的 children 属性存在，则添加 bg 属性，依次设置为 colors 数组
+      bg: createBackgroundColor(item)
+    }
+  })
+}

package/src/view/home/query-table/utils/config.js

@@ -0,0 +1,12 @@
+// todo 大写
+
+const baseKey = 'ks_query_table_'
+
+export const menuCacheKey = () => {
+  return baseKey + 'menu_config_' + ksui.menu.id
+}
+
+export const createdId = (id) => {
+  // 基础key + 菜单id + 数据id
+  return baseKey + ksui.menu.id + '_' + id
+}

package/src/view/home/query-table/utils/encryption.js

@@ -0,0 +1,32 @@
+const Vue = window.Vue // 在此项目中，Vue使用的是public下的运行时的vue.reuntime.min.js。所以此时需要保持一致
+import { http } from './http'
+
+
+const createUuid = () => {
+  return Math.random().toString(36).substr(3)
+}
+
+export const tableDecrypt = async (val) => {
+  const { column, rowData } = val
+  const { key, label } = column
+
+  if (rowData[key + 'Mask']) {
+    await vant.Dialog.confirm({ title: '温馨提示', message: `如非必要请勿查看，此操作会联动风控系统监控！` })
+    const { id } = rowData
+
+    let params = {
+      dataId: id || createUuid(),
+      moduleCode: 'pe_stock_h5',
+      fieldName: label,
+      fieldContent: rowData[key + 'Mask'],
+      fieldNameStr: '',
+      buttonName: label,
+    }
+    let res = await http('syslog.sensitiveFieldViewLog.save', '10124', params)
+    Vue.set(rowData, key, res)
+    Vue.delete(rowData, key + 'Mask')
+    return false
+  } else {
+    return true
+  }
+}

package/src/view/home/query-table/utils/http.js

@@ -0,0 +1 @@
+export const http = (ksui.default && ksui.default.http) || ksui.http

package/src/view/home/query-table/utils/localStorage.js

@@ -0,0 +1,35 @@
+// 设置本地缓存
+export const setLocalStorageItem = (key, value) => {
+  if (typeof value !== 'string') {
+    /** console.error('ios本地只能存字符串，非字符串类型强行转为字符串类型存储') */
+  }
+  // ios端只支持存字符串
+  value = typeof value === 'string' ? value : String(value)
+  return new Promise(async (resolve) => {
+    try {
+      await window.ks.callFunc({
+        method: "storageSetItem",
+        params: { key: key, value: value }
+      })
+      resolve()
+    } catch (e) {
+      window.localStorage.setItem(key, value)
+      resolve()
+    }
+  })
+}
+
+export const getLocalStorageItem = async (key) => {
+  return new Promise(async resolve => {
+    try {
+      const value = await window.ks.callFunc({
+        method: "storageGetItem",
+        params: { key: key }
+      })
+      resolve(value)
+    } catch (e) {
+      const value = window.localStorage.getItem(key)
+      resolve(value)
+    }
+  })
+}