@kyfe/ks-query-table 0.0.21 → 0.0.22

package/src/router.js

@@ -0,0 +1,52 @@
+// import { trackPageView } from '@/sentryApm'
+const VueRouter = window.VueRouter
+
+import Demo1 from '@/view/home/demo1.vue'
+import demo2 from '@/view/home/demo2.vue'
+import Demo3 from '@/view/home/demo3.vue'
+import Demo4 from '@/view/home/demo4.vue'
+
+
+const router = new VueRouter({
+  routes: [
+    {
+      path: '11',
+      component: demo2,
+      meta: {
+        keepAlive: true
+      }
+    },
+    {
+      path: '/',
+      component: Demo1,
+      meta: {
+        keepAlive: true
+      }
+    },
+    {
+      path: '/456',
+      component: Demo4,
+      meta: {
+        keepAlive: true
+      }
+    }
+  ],
+
+
+
+  scrollBehavior(to, from, scroll) {
+    if (scroll) return scroll
+    return { x: 0, y: 0 }
+  },
+})
+router.beforeEach((to, from, next) => {
+
+  next()
+
+})
+// 页面跳转后埋点上报
+router.afterEach((to, from) => {
+  console.log('router.afterEach', to, from)
+  // trackPageView(to, from)
+})
+export default router

package/src/view/home/config.js

@@ -0,0 +1,101 @@
+export const mockParams = {
+  page: 1,
+  pageSize: 200,
+  elasticsearchFlag: 'N',
+  ERPSearchCacheFlag: true,
+  forceCache: true,
+  menuId: '156439900739872047',
+  genericSearchCode: 'pe_stock_pool_resource_generic',
+  _querySearchCode: 'pe_stock_pool_objects_define',
+  _columnSearchCode: 'pe_stock_pool_objects_field_0116',
+  searchMode: 0,
+  generic: {
+    vos: [],
+  },
+  groupGeneric: {
+    calculateFields: {
+      vos: [
+        {
+          propertyName: 'isStFlag',
+          columnName: 'is_st_flag',
+          customMark: 8,
+          frontBrackets: '((',
+          postBrackets: ')',
+          conditionOperation: 'and',
+          operation: 'not_contain',
+          type: 'enum',
+          values: ['10'],
+        },
+        {
+          propertyName: 'suspendFlag',
+          columnName: 'suspend_flag',
+          customMark: 8,
+          frontBrackets: '(',
+          postBrackets: '))',
+          conditionOperation: 'and',
+          operation: 'not_contain',
+          type: 'enum',
+          values: ['1'],
+        },
+        {
+          propertyName: 'recFlag',
+          columnName: 'rec_flag',
+          frontBrackets: '(',
+          postBrackets: ')',
+          conditionOperation: '',
+          operation: 'equal',
+          type: 'enum',
+          values: ['10'],
+        },
+      ],
+    },
+  },
+  params: {
+    startDate: '2025-05-20 00:00:00',
+    endDate: '2025-05-20 23:59:59',
+    selectedGroupId: '',
+    strategyUserId: '150989883296096927',
+  },
+  orderByClauses: [
+    {
+      field: 'recDate',
+      orderByMode: 1,
+    },
+  ],
+  pe_timestamp: '1747409717210',
+}
+
+export const mockSorollParams = {
+  page: 1,
+  pageSize: 200,
+  elasticsearchFlag: 'N',
+  ERPSearchCacheFlag: true,
+  forceCache: true,
+  menuId: '156439900739872047',
+  genericSearchCode: 'pe_stock_pool_resource_generic',
+  _querySearchCode: 'pe_stock_pool_objects_define',
+  _columnSearchCode: 'pe_stock_pool_objects_field_0116',
+  searchMode: 0,
+  generic: {
+    vos: [],
+  },
+  groupGeneric: {
+    calculateFields: {
+      vos: [
+      ],
+    },
+  },
+  params: {
+    startDate: '2025-05-20 00:00:00',
+    endDate: '2025-05-20 23:59:59',
+    strategyUserId: '150989883296096927',
+    selectedGroupId: '',
+  },
+  orderByClauses: [
+    {
+      field: 'recDate',
+      orderByMode: 1,
+    },
+  ],
+  pe_timestamp: '1747709867406',
+}

package/src/view/home/demo1.vue

@@ -0,0 +1,223 @@
+<template>
+  <!-- 无限滚动 -->
+  <div class="container">
+    <div class="tab">
+      顶部固定区域
+    </div>
+    <div class="table">
+      <QueryTable ref="table"
+                  :isLoading="false"
+                  :showIndex="true"
+                  :isLoadFinished="true"
+                  :enableLoadMore="true"
+                  :rowCellRenderOptions="rowCellRenderOptions"
+                  searchCode="pe_im_stocks-selection_index_field"
+                  :config="configs">
+        <template slot="topUnfixed">
+          <div class="top-Unfixed">
+            可滚动区域
+          </div>
+        </template>
+        <template slot="topFixed">
+          <div class="top-Fixed">
+            <div>吸顶区域</div>
+            <div class="btn-bar">
+              <div @click="$refs.table.openSetting()">打开个性设置</div>
+              <div @click="$refs.table.loadData()">刷新</div>
+              <div @click="$refs.table.openHorizontal()">横屏</div>
+            </div>
+          </div>
+        </template>
+      </QueryTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import QueryTable from './query-table/index.js'
+import { mockParams, mockSorollParams } from './config.js'
+
+export default {
+  mixins: [],
+  components: {
+    QueryTable,
+  },
+  data() {
+    return {
+      rowCellRenderOptions: {
+        name: (h, { rowData, column }) => {
+          if (!rowData.name) {
+            return '-'
+          }
+          return <span key={rowData.id} style="color:red;">{rowData.name}</span>
+        },
+        currPrice: (h, { rowData, column }) => {
+          if (!rowData.currPrice) {
+            return '-'
+          }
+          return <span key={rowData.id}>{rowData.currPrice}</span>
+        },
+         pctChg: (h, { rowData, column }) => {
+          if (!rowData.pctChg) {
+            return '-'
+          }
+          return <span key={rowData.id}>{rowData.pctChg}</span>
+        },
+         tradeAmount: (h, { rowData, column }) => {
+          if (!rowData.tradeAmount) {
+            return '-'
+          }
+          return <span key={rowData.id}>{rowData.tradeAmount}</span>
+        },
+      },
+      configs: {
+        // apiCode
+        url: 'pe.stock.app.resource.search.v1',
+        // appkey
+        appkey: '61189',
+        // 请求前，可用于处理入参
+        beforeHttp({ params, appkey }) {
+          params.pageSize = 200
+          params.vos = []
+          params = { ...mockParams }
+           params.groupGeneric = {}
+          return { params, appkey }
+        },
+        // 请求后，可用于处理出参
+        afterHttp(res) {
+          res.rows.forEach((v, i) => {
+            v.name = '名称' + i
+            v.pctChgMask = 'd31b6ca48a214457d6d438e0cee3cbf9'
+            v.pctChg = '***'
+          })
+          console.log(res)
+          res.rows[0].tradeAmount = '很长很长很长很长很长很长很长很长很长'
+          return res
+        },
+        // 无限滚动配置
+        scrollLoad: {
+          // 获取全量id调用的接口，用于生成全量表格
+          getIdsUrl: 'pe.stock.app.resource.getCodes.v1',
+          // 获取全量id对应的key
+          idsKey: 'code',
+          // 全量id请求前，可用于处理入参
+          idsBeforeHttp({ params, appkey }) {
+            // 增加header
+            params.pageSize = 10000
+            params = { ...mockParams }
+            params.groupGeneric = {}
+
+            return { params, appkey }
+          },
+          // 全量id请求后，可用于处理出参
+          idsAfterHttp(res) {
+            return res.codes
+          },
+          // 滚动过程中加载数据请求前，可用于处理入参，保证滚动过程中请求数据准确，请求完成后会将数据补充到表格
+          scrollBeforeHttp({ params, appkey }, scrollOptions) {
+            params = { ...mockSorollParams }
+            params.groupGeneric = {
+              calculateFields: {
+                vos: [
+                  {
+                    propertyName: 'code',
+                    columnName: 'code',
+                    customMark: 8,
+                    frontBrackets: '(',
+                    postBrackets: ')',
+                    conditionOperation: '',
+                    operation: 'contain',
+                    type: 'enum',
+                    values: scrollOptions.code,
+                  },
+                ],
+              },
+            }
+            params.pageSize = scrollOptions.code.length
+            return { params, appkey }
+          },
+          // 滚动过程中加载数据请求后，可用于处理出参
+          scrollAfterHttp(res) {
+            res.rows.forEach((v, i) => {
+              v.name = '名称' + i
+              v.pctChgMask = 'd31b6ca48a214457d6d438e0cee3cbf9'
+              v.pctChg = '***'
+            })
+            return res
+          },
+        },
+      },
+    }
+  },
+  methods: {},
+  mounted() {
+    setTimeout(() => {
+      // alert(document.body.clientHeight)
+      // alert(document.body.clientWidth)
+      // alert(window.innerHeight)
+      // alert(this.$el.querySelector('.tab').clientHeight)
+    }, 3000);
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  height: calc(100vh);
+  width: 100vw;
+  .tab {
+    height: 100px;
+    width: 100vw;
+    background: rgba(121, 114, 254, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #666;
+  }
+  .table {
+    height: calc(100vh - 100px);
+    width: 100vw;
+    .top-Unfixed {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      height: 100px;
+      background: rgba(0, 197, 141, 0.2);
+      color: #666;
+    }
+    .top-Fixed {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      height: 100px;
+      background: rgba(255, 112, 108, 0.3);
+      color: #666;
+      .btn-bar {
+        width: 90%;
+        color: #666;
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 30px;
+        margin-top: 20px;
+        > div {
+          font-size: 14px;
+          border: 1px solid #666;
+          margin-left: 20px;
+        }
+      }
+    }
+    // /deep/.pe-table-wrap {
+    //   .pe-table-container {
+    //   overflow-y: hidden;
+
+    //   }
+    //   overflow-y: hidden;
+    // }
+  }
+}
+</style>
+

package/src/view/home/demo2.vue

@@ -0,0 +1,124 @@
+<template>
+  <!-- 分页 -->
+  <div class="container2">
+    <div class="tab">
+      顶部固定区域
+    </div>
+    <div class="table">
+      <QueryTable ref="table"
+                  :showPage="true"
+                  :showIndex="true"
+                  :isScrollShowTotal="false"
+                  searchCode="pe_im_stocks-selection_index_field"
+                  :config="configs">
+        <template slot="topUnfixed">
+          <div class="top-Unfixed">
+            可滚动区域
+          </div>
+        </template>
+        <template slot="topFixed">
+          <div class="top-Fixed">
+            <div>吸顶区域</div>
+            <div class="btn-bar">
+              <div @click="$refs.table.openSetting()">打开个性设置</div>
+              <div @click="$refs.table.loadData()">刷新</div>
+              <div @click="$refs.table.openHorizontal()">横屏</div>
+            </div>
+          </div>
+        </template>
+      </QueryTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import QueryTable from './query-table/index.js'
+import { mockParams, mockSorollParams } from './config.js'
+
+export default {
+  mixins: [],
+  components: {
+    QueryTable,
+  },
+  data() {
+    return {
+      configs: {
+        // apiCode
+        url: 'pe.stock.app.resource.search.v1',
+        // appkey
+        appkey: '61189',
+        // 请求前，可用于处理入参
+        beforeHttp({ params, appkey }) {
+          params.pageSize = 200
+          params.vos = []
+          params = { ...mockParams }
+          params.groupGeneric = {}
+          return { params, appkey }
+        },
+        // 请求后，可用于处理出参
+        afterHttp(res) {
+            res.rows.forEach((v, i) => {
+            v.name = '名称' + i
+            v.pctChgMask = 'd31b6ca48a214457d6d438e0cee3cbf9'
+            v.pctChg = '***'
+          })
+          return res
+        },
+      },
+    }
+  },
+  methods: {},
+}
+</script>
+
+<style lang="less" scoped>
+.container2 {
+  height: calc(100vh);
+  width: 100vw;
+  .tab {
+    height: 100px;
+    background: rgba(121, 114, 254, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #666;
+  }
+  .table {
+    height: calc(100vh - 100px);
+    .top-Unfixed {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      height: 100px;
+      background: rgba(0, 197, 141, 0.2);
+      color: #666;
+    }
+    .top-Fixed {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      height: 100px;
+      background: rgba(255, 112, 108, 0.3);
+      color: #666;
+      .btn-bar {
+        width: 90%;
+        color: #666;
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 30px;
+        margin-top: 20px;
+        > div {
+          font-size: 14px;
+          border: 1px solid #666;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
+

package/src/view/home/demo3.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="container3">
+    <QueryTable ref="table"
+                :showIndex="true"
+                searchCode="pe_im_stocks-selection_index_field"
+                :config="configs">
+      <template slot="topFixed">
+        <div @click="$refs.table.openSetting()">打开个性设置</div>
+        <div @click="$refs.table.loadData()">刷新</div>
+        <div @click="$refs.table.openHorizontal()">横屏</div>
+      </template>
+    </QueryTable>
+  </div>
+</template>
+
+<script>
+import QueryTable from './query-table/index.js'
+export default {
+  components: {
+    QueryTable,
+  },
+  data() {
+    return {
+      configs: {
+        // apiCode
+        // apiCode
+        url: 'pe.stock.app.resource.search.v1',
+        // appkey
+        appkey: '61189',
+        // 请求前，可用于处理入参
+        beforeHttp({ params, appkey }) {
+          params.vos = []
+          return { params, appkey }
+        },
+        // 请求后，可用于处理出参
+        afterHttp(res) {
+          res.rows[0].key1= 'test'
+          return res
+        },
+      },
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container3 {
+  width: 100vw;
+  height: 500px;
+}
+</style>

package/src/view/home/demo4.vue

@@ -0,0 +1,140 @@
+<template>
+  <!-- 上拉加载更多 -->
+  <div class="container">
+    <div class="tab">
+      顶部固定区域
+    </div>
+    <div class="table">
+      <QueryTable ref="table"
+                  :showIndex="true"
+                  :decrypt="true"
+                  :overflow="true"
+                  :totalOffset="1"
+                  :isScrollShowTotal="true"
+                  :enableLoadMore="true"
+                  :rowCellRenderOptions="rowCellRenderOptions"
+                  searchCode="pe_im_stocks-selection_index_field"
+                  :config="configs">
+        <template slot="topUnfixed">
+          <div class="top-Unfixed">
+            可滚动区域
+          </div>
+        </template>
+        <template slot="topFixed">
+          <div class="top-Fixed">
+            <div>吸顶区域</div>
+            <div class="btn-bar">
+              <div @click="$refs.table.openSetting()">打开个性设置</div>
+              <div @click="$refs.table.loadData()">刷新</div>
+              <div @click="$refs.table.openHorizontal()">横屏</div>
+            </div>
+          </div>
+        </template>
+      </QueryTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import QueryTable from './query-table/index.js'
+import { mockParams, mockSorollParams } from './config.js'
+
+export default {
+  mixins: [],
+  components: {
+    QueryTable,
+  },
+  data() {
+    return {
+      rowCellRenderOptions: {
+        nae: (h, { rowData, column }) => {
+          return <span style="color:red;">{rowData.currPrice}</span>
+        },
+        pctChg: (h, { rowData, column }) => {
+          return <span style="color:#7972fe;">{rowData.pctChg}</span>
+        },
+      },
+      configs: {
+        // apiCode
+        url: 'pe.stock.app.resource.search.v1',
+        // appkey
+        appkey: '61189',
+        pageSize: 100,
+        // 请求前，可用于处理入参
+        beforeHttp({ params, appkey }) {
+         
+          params = { ...mockParams }
+           params.pageSize = 100
+          return { params, appkey }
+        },
+        // 请求后，可用于处理出参
+        afterHttp(res) {
+          res.rows.forEach((v, i) => {
+            v.name = '名称' + i
+            v.pctChgMask = 'd31b6ca48a214457d6d438e0cee3cbf9'
+            v.pctChg = '***'
+          })
+          console.log(res)
+          res.rows[0].tradeAmount = '很长很长很长很长很长很长很长很长很长'
+          return res
+        },
+      },
+    }
+  },
+  methods: {},
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  height: calc(100vh);
+  width: 100vw;
+  .tab {
+    height: 100px;
+    width: 100vw;
+    background: rgba(121, 114, 254, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #666;
+  }
+  .table {
+    height: calc(100vh - 100px);
+    width: 100vw;
+    .top-Unfixed {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      height: 100px;
+      background: rgba(0, 197, 141, 0.2);
+      color: #666;
+    }
+    .top-Fixed {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      height: 100px;
+      background: rgba(255, 112, 108, 0.3);
+      color: #666;
+      .btn-bar {
+        width: 90%;
+        color: #666;
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 30px;
+        margin-top: 20px;
+        > div {
+          font-size: 14px;
+          border: 1px solid #666;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
+