update

oem/zrwyt/config/appconfig.json

@@ -1,8 +1,8 @@
 {
   "appId": "com.muchinfo.zrwyt",
   "appName": "中融文遗通",
-  "version": "1.0.19",
-  "versionCode": "100019",
+  "version": "1.0.20",
+  "versionCode": "100020",
   "apiUrl": "http://192.168.31.134:8080/cfg?key=test_134",
   "tradeChannel": "ws",
   "modules": [

public/config/appconfig.json

@@ -3,7 +3,7 @@
   "appName": "多元世纪",
   "version": "1.0.5",
   "versionCode": "10005",
-  "apiUrl": "http://192.168.31.134:8080/cfg?key=test_134",
+  "apiUrl": "http://192.168.31.204:8080/cfg?key=test_204",
   "tradeChannel": "ws",
   "modules": [
     "register",

src/hooks/date-picker/index.ts

@@ -0,0 +1,50 @@
+import { ref } from 'vue'
+import moment from 'moment'
+
+/**
+ * 日期范围
+ * @param day 
+ * @returns 
+ */
+export function useDateRange(day = 7, format = 'YYYYMMDD') {
+    const endDate = moment(new Date())
+    const startDate = endDate.clone().subtract(day, 'days')
+    const dateValue = ref<string[]>([startDate.format(format), endDate.format(format)])
+    const selectedValue = ref<[Date, null | Date]>()
+    const valueformat = ref(format)
+
+    const visibleChange = (visibility: boolean) => {
+        const values = selectedValue.value
+        // 下拉列表消失时判断日期范围是否已选
+        if (!visibility && values) {
+            if (values.every((val) => val)) {
+                selectedValue.value = undefined
+            }
+        }
+    }
+
+    const calendarChange = (value: [Date, null | Date]) => {
+        selectedValue.value = value
+    }
+
+    const disabledDate = (data: Date) => {
+        const isExceed = data.getTime() > Date.now()
+        if (selectedValue.value) {
+            const firstValue = selectedValue.value[0].getTime()
+            const range = 3600 * 1000 * 24 * day
+            const min = firstValue - range
+            const max = firstValue + range
+            return data.getTime() < min || data.getTime() > max || isExceed
+        } else {
+            return isExceed
+        }
+    }
+
+    return {
+        dateValue,
+        valueformat,
+        visibleChange,
+        calendarChange,
+        disabledDate
+    }
+}

src/packages/pc/assets/themes/default/default.less

@@ -104,6 +104,7 @@
     --el-datepicker-inrange-bg-color: #5a6977;
     --el-datepicker-inrange-hover-bg-color: var(--el-datepicker-inrange-bg-color);
     --el-datepicker-active-color: var(--el-color-primary);
+    --el-fill-color-light:#343e47;
 }
 
 .el-form {

src/packages/pc/views/footer/capital/statement/index.vue

@@ -19,7 +19,7 @@ import { useRequest } from '@/hooks/request'
 import { queryAmountLog } from '@/services/api/bank'
 import AppTable from '@pc/components/base/table/index.vue'
 
-const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.AmountLogRsp>()
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.AmountLogRsp>(30)
 
 const { loading } = useRequest(queryAmountLog, {
     onSuccess: (res) => initTableData(res.data)

src/packages/pc/views/query/capital/history/index.vue

@@ -1,11 +1,12 @@
 <!-- 资金流水-历史记录 -->
 <template>
-    <app-table class="query-capital" :data="tableList" v-model:columns="tableColumns" :loading="loading">
+    <app-table class="query-capital" :data="dataList" v-model:columns="tableColumns" :loading="loading">
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期"
-                        value-format="YYYY-MM-DD" v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -26,32 +27,46 @@
             {{ formatDate(value) }}
         </template>
         <template #append>
-            <el-button size="small" plain @click="loadMore" v-if="showLoadMore">加载更多</el-button>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
         </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate } from '@/filters'
-import { useLocalPagination } from '@/hooks/pagination'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { useRequest } from '@/hooks/request'
 import { queryHisAmountLog } from '@/services/api/bank'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 import { getOperateTypeSearchList } from '@/constants/order'
 
-const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.HisAmountLogRsp>(80)
+
 const { filterOptons, getQueryParams } = useDataFilter<Model.HisAmountLogReq>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.HisAmountLogRsp[]>([])
+
+const startDate = computed(() => dateValue.value[0])
+const endDate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryHisAmountLog, {
-    manual: true,
-    onSuccess: (res) => initTableData(res.data)
+const { loading, run, pageIndex, pageCount } = useRequest(queryHisAmountLog, {
+    params: {
+        pagesize: 30,
+        pageflag: 1,
+        startDate: startDate.value,
+        endDate: endDate.value
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'accountid', label: '资金账号' },
     { prop: 'operatetypename', label: '资金类型' },
     { prop: 'amount', label: '金额' },
@@ -59,8 +74,22 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 ])
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
+    },
+    {
+        lable: '重置',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch(true)
+        }
+    }
 ]
 
 filterOptons.selectList = [
@@ -70,17 +99,6 @@ filterOptons.selectList = [
     }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
-    getQueryParams((qs) => {
-        qs.startDate = filterDate.value[0]
-        qs.endDate = filterDate.value[1]
-        run(qs)
-    }, clear)
-}
-
 // 手续费汇总
 const feeTotal = computed(() => dataList.value.reduce((pre, cur) => {
     if (cur.operatetype === 207) {
@@ -96,6 +114,19 @@ const plTotal = computed(() => dataList.value.reduce((pre, cur) => {
     }
     return pre
 }, 0))
+
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = (clear = false) => {
+    getQueryParams((qs) => {
+        qs.startDate = startDate.value
+        qs.endDate = endDate.value
+        run(qs)
+    }, clear)
+}
 </script>
 
 <style lang="less">

src/packages/pc/views/query/capital/list/index.vue

@@ -1,6 +1,6 @@
 <!-- 资金流水-当前记录 -->
 <template>
-    <app-table class="query-capital" :data="dataList" v-model:columns="tableColumns" :loading="loading">
+    <app-table class="query-capital" :data="tableList" v-model:columns="tableColumns" :loading="loading">
         <template #headerLeft>
             <app-filter :options="filterOptons" />
         </template>
@@ -20,12 +20,16 @@
         <template #createtime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="showLoadMore">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef, computed } from 'vue'
 import { formatDate } from '@/filters'
+import { useLocalPagination } from '@/hooks/pagination'
 import { useRequest } from '@/hooks/request'
 import { queryAmountLog } from '@/services/api/bank'
 import AppTable from '@pc/components/base/table/index.vue'
@@ -33,9 +37,13 @@ import AppFilter from '@pc/components/base/table-filter/index.vue'
 import { useDataFilter } from '@/hooks/datatable'
 import { getOperateTypeSearchList } from '@/constants/order'
 
-const { loading, dataList, run } = useRequest(queryAmountLog)
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.AmountLogRsp>(30)
 const { filterOptons, getQueryParams } = useDataFilter<Model.AmountLogReq>()
 
+const { loading, dataList, run } = useRequest(queryAmountLog, {
+    onSuccess: (res) => initTableData(res.data)
+})
+
 const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'accountid', label: '资金账号' },
     { prop: 'operatetypename', label: '资金类型' },

src/packages/pc/views/query/order/goods/history/index.vue

@@ -4,8 +4,9 @@
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
-                        v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -25,13 +26,17 @@
         <template #orderstatus="{ value }">
             {{ getWRTradeOrderStatusName(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate } from '@/filters'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { useRequest } from '@/hooks/request'
 import { queryHisTradeOrderDetail } from '@/services/api/order'
 import { getBuildTypeName, getWRTradeOrderStatusName, getBuyOrSellName, getWRTradeOrderStatusList } from '@/constants/order'
@@ -39,13 +44,27 @@ import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.HisTradeOrderDetailReq>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.HisTradeOrderDetailRsp[]>([])
+
+const startDate = computed(() => dateValue.value[0])
+const endDate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryHisTradeOrderDetail, {
+const { loading, run, pageIndex, pageCount } = useRequest(queryHisTradeOrderDetail, {
     params: {
-        tradeMode: '50,16'
+        pagesize: 30,
+        pageflag: 1,
+        tradeMode: '50,16',
+        orderStatus: '3',
+        startDate: startDate.value,
+        endDate: endDate.value
     },
-    manual: true
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
 filterOptons.selectList = [
@@ -57,7 +76,7 @@ filterOptons.selectList = [
     }
 ]
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'goodscode', label: '订单合约' },
     { prop: 'buyorsell', label: '方向' },
     { prop: 'buildtype', label: '类型' },
@@ -70,18 +89,26 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 ])
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
+    }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.startDate = filterDate.value[0]
-        qs.endDate = filterDate.value[1]
+        qs.startDate = startDate.value
+        qs.endDate = endDate.value
         run(qs)
-    }, clear)
+    })
 }
 </script>

src/packages/pc/views/query/order/goods/list/index.vue

@@ -1,8 +1,8 @@
 <!-- 委托记录-商品合约-当前记录 -->
 <template>
-    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
-         <!-- 方向 -->
-         <template #buyorsell="{ value }">
+    <app-table :data="tableList" v-model:columns="tableColumns" :loading="loading">
+        <!-- 方向 -->
+        <template #buyorsell="{ value }">
             {{ getBuyOrSellName(value) }}
         </template>
         <!-- 类型 -->
@@ -17,21 +17,28 @@
         <template #orderstatus="{ value }">
             {{ getWRTradeOrderStatusName(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="showLoadMore">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
 import { formatDate } from '@/filters'
+import { useLocalPagination } from '@/hooks/pagination'
 import { useRequest } from '@/hooks/request'
 import { queryTradeOrderDetail } from '@/services/api/order'
 import { getBuildTypeName, getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
 import AppTable from '@pc/components/base/table/index.vue'
 
-const { loading, dataList } = useRequest(queryTradeOrderDetail, {
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.TradeOrderDetailRsp>()
+
+const { loading } = useRequest(queryTradeOrderDetail, {
     params: {
         tradeMode: '50,16'
     },
+    onSuccess: (res) => initTableData(res.data)
 })
 
 const tableColumns = shallowRef<Model.TableColumn[]>([

src/packages/pc/views/query/order/presell/history/index.vue

@@ -4,8 +4,9 @@
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
-                        v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -15,7 +16,7 @@
         </template>
         <!-- 认购金额 -->
         <template #orderamount="{ row }">
-            {{ (row.orderprice*row.orderqty).toFixed(2) }}
+            {{ (row.orderprice * row.orderqty).toFixed(2) }}
         </template>
         <!-- 定金方式 -->
         <template #presaledepositalgorithm="{ value }">
@@ -29,20 +30,24 @@
         <template #starttime="{ value }">
             {{ formatDate(value, 'YYYY-MM-DD') }}
         </template>
-         <!-- 结束日期 -->
-         <template #endtime="{ value }">
+        <!-- 结束日期 -->
+        <template #endtime="{ value }">
             {{ formatDate(value, 'YYYY-MM-DD') }}
         </template>
-         <!-- 委托状态 -->
-         <template #orderstatus="{ value }">
+        <!-- 委托状态 -->
+        <template #orderstatus="{ value }">
             {{ getOrderStatusName(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { ref, computed } from 'vue'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { formatDate, parsePercent } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { queryMineTradeOrderDetails } from '@/services/api/presale'
@@ -51,16 +56,28 @@ import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.MineTradeOrderDetailsReq>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.MineTradeOrderDetailsRsp[]>([])
+
+const begindate = computed(() => dateValue.value[0])
+const enddate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryMineTradeOrderDetails, {
+const { loading, run, pageIndex, pageCount } = useRequest(queryMineTradeOrderDetails, {
     params: {
+        pagesize: 30,
         ishis: true,
+        begindate: begindate.value,
+        enddate: enddate.value
     },
-    manual: true
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'goodsname', label: '商品代码/名称' },
     { prop: 'orderqty', label: '认购数量' },
     { prop: 'orderprice', label: '认购价' },
@@ -78,20 +95,27 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'orderid', label: '委托单号' }
 ])
 
-
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
+    }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.begindate = filterDate.value[0]
-        qs.enddate = filterDate.value[1]
+        qs.begindate = begindate.value
+        qs.enddate = enddate.value
         run(qs)
-    }, clear)
+    })
 }
 </script>

src/packages/pc/views/query/order/presell/transferhistory/index.vue

@@ -4,8 +4,9 @@
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
-                        v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -21,13 +22,17 @@
         <template #ordertime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate } from '@/filters'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { useRequest } from '@/hooks/request'
 import { queryMineTradeOrders } from '@/services/api/transfer'
 import { getOrderStatusName } from '@/constants/order'
@@ -35,16 +40,28 @@ import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.MineTradeOrdersReq>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.MineTradeOrdersRsp[]>([])
+
+const begindate = computed(() => dateValue.value[0])
+const enddate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryMineTradeOrders, {
+const { loading, run, pageIndex, pageCount } = useRequest(queryMineTradeOrders, {
     params: {
+        pagesize: 30,
         ishis: true,
+        begindate: begindate.value,
+        enddate: enddate.value
     },
-    manual: true
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'goodsname', label: '商品代码/名称' },
     { prop: 'orderqty', label: '转让数量' },
     { prop: 'orderprice', label: '转让价' },
@@ -56,18 +73,26 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 ])
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
+    }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.begindate = filterDate.value[0]
-        qs.enddate = filterDate.value[1]
+        qs.begindate = begindate.value
+        qs.enddate = enddate.value
         run(qs)
-    }, clear)
+    })
 }
 </script>

src/packages/pc/views/query/order/spot/history/index.vue

@@ -4,8 +4,9 @@
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
-                        v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -25,13 +26,17 @@
         <template #wrtradeorderstatus="{ value }">
             {{ getWRTradeOrderStatusName(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, reactive } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate } from '@/filters'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { useRequest } from '@/hooks/request'
 import { queryWrOrderDetail } from '@/services/api/order'
 import { getWrTradeTypeName, getWrPriceTypeName, getWRTradeOrderStatusName } from '@/constants/order'
@@ -39,22 +44,30 @@ import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.WrOrderDetailRsp>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.WrOrderDetailRsp[]>([])
 
-const formData = reactive<Model.WrOrderDetailReq>({
-    wrtradetype: 1,
-    marketid: 17201,
-    haswr: 1,
-})
+const begindate = computed(() => dateValue.value[0])
+const enddate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryWrOrderDetail, {
+const { loading, run, pageIndex, pageCount } = useRequest(queryWrOrderDetail, {
     params: {
-        ...formData
+        pagesize: 30,
+        wrtradetype: 1,
+        marketid: 17201,
+        haswr: 1,
+        begindate: begindate.value,
+        enddate: enddate.value
     },
-    manual: true
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'wrtradeorderid', label: '挂牌单号' },
     { prop: 'wrtradetype', label: '挂牌类型' },
     { prop: 'deliverygoodsname', label: '品种' },
@@ -82,19 +95,26 @@ filterOptons.selectList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
+    }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.begindate = filterDate.value[0]
-        qs.enddate = filterDate.value[1]
+        qs.begindate = begindate.value
+        qs.enddate = enddate.value
         run(qs)
-    }, clear)
+    })
 }
-
 </script>

src/packages/pc/views/query/order/swap/history/index.vue

@@ -4,13 +4,14 @@
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
-                        v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
-         <!-- 方向 -->
-         <template #buyorsell="{ value }">
+        <!-- 方向 -->
+        <template #buyorsell="{ value }">
             {{ getBuyOrSellName(value) }}
         </template>
         <!-- 类型 -->
@@ -29,13 +30,17 @@
         <template #ordertime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, reactive } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate } from '@/filters'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { useRequest } from '@/hooks/request'
 import { queryHisTradeOrderDetail } from '@/services/api/order'
 import { getBuyOrSellName, getWRTradeOrderStatusName, getWRTradeOrderStatusList } from '@/constants/order'
@@ -43,29 +48,30 @@ import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.HisTradeOrderDetailReq>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.HisTradeOrderDetailRsp[]>([])
 
-filterOptons.selectList = [
-    {
-        key: 'orderStatus',
-        selectedValue: 3,
-        options: getWRTradeOrderStatusList().filter(e => { return [1, 2, 3, 4, 6, 7, 8, 9, 10, 11].includes(e.value)}),
-        locked: true,
-    }
-]
-
-const formData = reactive<Model.HisTradeOrderDetailReq>({
-    tradeMode: '46',
-})
+const startDate = computed(() => dateValue.value[0])
+const endDate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryHisTradeOrderDetail, {
+const { loading, run, pageIndex, pageCount } = useRequest(queryHisTradeOrderDetail, {
     params: {
-        ...formData
+        pagesize: 30,
+        pageflag: 1,
+        tradeMode: '46',
+        orderStatus: '3',
+        startDate: startDate.value,
+        endDate: endDate.value
     },
-    manual: true
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'orderid', label: '委托单号' },
     { prop: 'goodsname', label: '商品代码/名称' },
     { prop: 'buyorsell', label: '方向' },
@@ -77,20 +83,36 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'ordertime', label: '委托时间' },
 ])
 
-filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+filterOptons.selectList = [
+    {
+        key: 'orderStatus',
+        selectedValue: 3,
+        options: getWRTradeOrderStatusList().filter(e => { return [1, 2, 3, 4, 6, 7, 8, 9, 10, 11].includes(e.value) }),
+        locked: true,
+    }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
+filterOptons.buttonList = [
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
     }
+]
+
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.startDate = filterDate.value[0]
-        qs.endDate = filterDate.value[1]
+        qs.startDate = startDate.value
+        qs.endDate = endDate.value
         run(qs)
-    }, clear)
+    })
 }
-
 </script>

src/packages/pc/views/query/trade/goods/history/index.vue

@@ -4,8 +4,9 @@
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期"
-                        value-format="YYYYMMDD" v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -32,9 +33,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate, tmMatchAccountID } from '@/filters'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { useRequest } from '@/hooks/request'
 import { queryHisTradeDetail } from '@/services/api/order'
 import { getBuildTypeName, getBuyOrSellName } from '@/constants/order'
@@ -42,16 +44,21 @@ import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.HisTradeDetailReq>()
-const filterDate = ref<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
 const dataList = ref<Model.HisTradeDetailRsp[]>([])
 
+const startDate = computed(() => dateValue.value[0])
+const endDate = computed(() => dateValue.value[1])
+
 const { loading, run, pageIndex, pageCount } = useRequest(queryHisTradeDetail, {
     params: {
         pagesize: 30,
         pageflag: 1,
-        tradeMode: '50,16'
+        tradeMode: '50,16',
+        buildType: 1,
+        startDate: startDate.value,
+        endDate: endDate.value
     },
-    manual: true,
     onSuccess: (res) => {
         if (pageIndex.value === 1) {
             dataList.value = []
@@ -93,14 +100,6 @@ filterOptons.buttonList = [
             pageIndex.value = 1
             onSearch()
         }
-    },
-    {
-        lable: '重置',
-        className: 'el-button--info',
-        onClick: () => {
-            pageIndex.value = 1
-            onSearch(true)
-        }
     }
 ]
 
@@ -109,14 +108,11 @@ const loadMore = () => {
     onSearch()
 }
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.startDate = filterDate.value[0]
-        qs.endDate = filterDate.value[1]
+        qs.startDate = startDate.value
+        qs.endDate = endDate.value
         run(qs)
-    }, clear)
+    })
 }
 </script>

src/packages/pc/views/query/trade/goods/list/index.vue

@@ -1,6 +1,6 @@
 <!-- 成交记录-商品合约-当前记录 -->
 <template>
-    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+    <app-table :data="tableList" v-model:columns="tableColumns" :loading="loading">
         <!-- 类型 -->
         <template #buyorsell="{ value }">
             {{ getBuyOrSellName(value) }}
@@ -17,21 +17,28 @@
         <template #tradetime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="showLoadMore">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
 import { formatDate, tmMatchAccountID } from '@/filters'
+import { useLocalPagination } from '@/hooks/pagination'
 import { useRequest } from '@/hooks/request'
 import { queryTradeDetail } from '@/services/api/order'
 import { getBuildTypeName, getBuyOrSellName } from '@/constants/order'
 import AppTable from '@pc/components/base/table/index.vue'
 
-const { loading, dataList } = useRequest(queryTradeDetail, {
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.TradeDetailRsp>()
+
+const { loading } = useRequest(queryTradeDetail, {
     params: {
         tradeMode: '50,16'
     },
+    onSuccess: (res) => initTableData(res.data)
 })
 
 const tableColumns = shallowRef<Model.TableColumn[]>([

src/packages/pc/views/query/trade/presell/history/index.vue

@@ -1,11 +1,12 @@
-<!-- 成交记录-商品合约-历史记录 -->
+<!-- 成交记录-预售转让-历史记录 -->
 <template>
     <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
-                        v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -21,13 +22,17 @@
         <template #tradedate="{ value }">
             {{ formatDate(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate } from '@/filters'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { useRequest } from '@/hooks/request'
 import { queryMineTradeTradeDetails } from '@/services/api/transfer'
 import { getBuyOrSellName } from '@/constants/order'
@@ -35,16 +40,28 @@ import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.MineTradeTradeDetailsReq>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.MineTradeTradeDetailsRsp[]>([])
+
+const begindate = computed(() => dateValue.value[0])
+const enddate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryMineTradeTradeDetails, {
+const { loading, run, pageIndex, pageCount } = useRequest(queryMineTradeTradeDetails, {
     params: {
+        pagesize: 30,
         ishis: true,
+        begindate: begindate.value,
+        enddate: enddate.value
     },
-    manual: true
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'goodsname', label: '商品代码/名称' },
     { prop: 'buyorsell', label: '方向' },
     { prop: 'tradeqty', label: '转让数量' },
@@ -57,18 +74,26 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 ])
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
+    }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.begindate = filterDate.value[0]
-        qs.enddate = filterDate.value[1]
+        qs.begindate = begindate.value
+        qs.enddate = enddate.value
         run(qs)
-    }, clear)
+    })
 }
 </script>

src/packages/pc/views/query/trade/spot/history/index.vue

@@ -4,8 +4,9 @@
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
-                        v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -17,35 +18,47 @@
         <template #ordertime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, reactive } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { queryWrTradeDetail } from '@/services/api/order'
 import { getBuildTypeName } from '@/constants/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.WrTradeDetailRsp>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.WrTradeDetailRsp[]>([])
 
-const formData = reactive<Model.WrTradeDetailReq>({
-    marketid: 17201,
-    haswr: 1,
-})
+const begindate = computed(() => dateValue.value[0])
+const enddate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryWrTradeDetail, {
+const { loading, run, pageIndex, pageCount } = useRequest(queryWrTradeDetail, {
     params: {
-        ...formData
+        pagesize: 30,
+        marketid: 17201,
+        haswr: 1,
+        begindate: begindate.value,
+        enddate: enddate.value
     },
-    manual: true
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'wrtradedetailid', label: '成交单号' },
     { prop: 'buyorsell', label: '类型' },
     { prop: 'deliverygoodsname', label: '品种' },
@@ -59,18 +72,26 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 ])
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
+    }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.begindate = filterDate.value[0]
-        qs.enddate = filterDate.value[1]
+        qs.begindate = begindate.value
+        qs.enddate = enddate.value
         run(qs)
-    }, clear)
+    })
 }
 </script>

src/packages/pc/views/query/trade/swap/history/index.vue

@@ -4,8 +4,9 @@
         <template #headerLeft>
             <app-filter :options="filterOptons">
                 <template #before>
-                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
-                        v-model="filterDate" />
+                    <el-date-picker type="daterange" effect="dark" :editable="false" :clearable="false"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueformat" v-model="dateValue"
+                        @visible-change="visibleChange" @calendar-change="calendarChange" :disabled-date="disabledDate" />
                 </template>
             </app-filter>
         </template>
@@ -13,12 +14,12 @@
         <template #buildtype="{ value }">
             {{ getBuildTypeName(value) }}
         </template>
-         <!-- 方向 -->
-         <template #buyorsell="{ value }">
+        <!-- 方向 -->
+        <template #buyorsell="{ value }">
             {{ getBuyOrSellName(value) }}
         </template>
-         <!-- 成交对手 -->
-         <template #matchaccountid="{ value }">
+        <!-- 成交对手 -->
+        <template #matchaccountid="{ value }">
             {{ tmMatchAccountID(value) }}
         </template>
         <!-- 商品合约 -->
@@ -27,37 +28,51 @@
         </template>
         <!-- 成交金额 -->
         <template #tradeamount="{ row }">
-            {{ formatDecimal(row.tradeqty*row.tradeprice) }}
+            {{ formatDecimal(row.tradeqty * row.tradeprice) }}
         </template>
         <!-- 时间 -->
         <template #tradetime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="pageIndex < pageCount">加载更多</el-button>
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, reactive } from 'vue'
+import { ref, computed } from 'vue'
 import { formatDate, formatDecimal, tmMatchAccountID } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { useDataFilter } from '@/hooks/datatable'
+import { useDateRange } from '@/hooks/date-picker'
 import { queryHisTradeDetail, } from '@/services/api/order'
 import { getBuildTypeName, getBuyOrSellName, getBuildTypeList } from '@/constants/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const { filterOptons, getQueryParams } = useDataFilter<Model.HisTradeDetailReq>()
-const filterDate = shallowRef<string[]>([])
+const { dateValue, valueformat, visibleChange, calendarChange, disabledDate } = useDateRange()
+const dataList = ref<Model.HisTradeDetailRsp[]>([])
 
-const formData = reactive<Model.HisTradeDetailReq>({
-    tradeMode: '46'
-})
+const startDate = computed(() => dateValue.value[0])
+const endDate = computed(() => dateValue.value[1])
 
-const { loading, dataList, run } = useRequest(queryHisTradeDetail, {
+const { loading, run, pageIndex, pageCount } = useRequest(queryHisTradeDetail, {
     params: {
-        ...formData
+        pagesize: 30,
+        pageflag: 1,
+        tradeMode: '46',
+        buildType: 1,
+        startDate: startDate.value,
+        endDate: endDate.value
     },
-    manual: true
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    }
 })
 
 
@@ -70,7 +85,7 @@ filterOptons.selectList = [
     }
 ]
 
-const tableColumns = shallowRef<Model.TableColumn[]>([
+const tableColumns = ref<Model.TableColumn[]>([
     { prop: 'tradeid', label: '成交单号' },
     { prop: 'goodsname', label: '商品代码/名称' },
     { prop: 'buildtype', label: '类型' },
@@ -85,18 +100,26 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 ])
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) }
+    {
+        lable: '查询',
+        className: 'el-button--info',
+        onClick: () => {
+            pageIndex.value = 1
+            onSearch()
+        }
+    }
 ]
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        filterDate.value = []
-    }
+const loadMore = () => {
+    pageIndex.value++
+    onSearch()
+}
+
+const onSearch = () => {
     getQueryParams((qs) => {
-        qs.startDate = filterDate.value[0]
-        qs.endDate = filterDate.value[1]
+        qs.startDate = startDate.value
+        qs.endDate = endDate.value
         run(qs)
-    }, clear)
+    })
 }
 </script>