@kyfe/ks-query-table 0.0.9 → 0.0.11

package/src/router.js

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

@@ -1,101 +0,0 @@
-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

@@ -1,223 +0,0 @@
-<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

@@ -1,124 +0,0 @@
-<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

@@ -1,51 +0,0 @@
-<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

@@ -1,139 +0,0 @@
-<template>
-  <!-- 上拉加载更多 -->
-  <div class="container">
-    <div class="tab">
-      顶部固定区域
-    </div>
-    <div class="table">
-      <QueryTable ref="table"
-                  :showIndex="true"
-                  :decrypt="true"
-                  :overflow="true"
-                  :isScrollShowTotal="false"
-                  :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>
-