update

src/hooks/pagination/index.ts

@@ -0,0 +1,36 @@
+import { ref, computed, UnwrapRef } from 'vue'
+import { useDataTable } from '@/hooks/datatable'
+
+export function useLocalPagination<T>(pageSize = 20) {
+    const tableList = ref<T[]>([])
+
+    // 显示加载更多
+    const showLoadMore = computed(() => tableList.value.length < total.value)
+
+    // 本地分页
+    const { dataList, total, pageIndex } = useDataTable<T>({
+        localPagination: true,
+        pageSize
+    })
+
+    // 加载更多
+    const loadMore = () => {
+        pageIndex.value += 1
+        tableList.value.push(...dataList.value)
+    }
+
+    // 初始化数据
+    const initTableData = (data: UnwrapRef<T[]>) => {
+        total.value = data.length
+        pageIndex.value = 1
+        dataList.value = data
+        tableList.value = [...dataList.value]
+    }
+
+    return {
+        tableList,
+        showLoadMore,
+        loadMore,
+        initTableData
+    }
+}

src/packages/pc/components/base/table/index.less

@@ -87,6 +87,28 @@
                 margin-left: auto;
             }
         }
+
+        &__append-wrapper {
+            overflow: visible;
+            padding: 10px 0;
+
+            .el-button {
+                position: sticky;
+                right: 5px;
+                display: table;
+                margin-left: auto;
+
+                &.is-plain {
+                    --el-button-border-color: #31363b;
+                    --el-button-text-color: #8b9195;
+                    --el-button-bg-color: transparent;
+                    --el-button-hover-border-color: #4b5259;
+                    --el-button-hover-text-color: var(--el-button-text-color);
+                    --el-button-hover-bg-color: transparent;
+                    --el-button-active-border-color: var(--el-button-border-color);
+                }
+            }
+        }
     }
 
     .el-table {

src/packages/pc/components/base/table/index.vue

@@ -39,6 +39,9 @@
             </template>
           </el-table-column>
         </template>
+        <template #append v-if="$slots.append">
+          <slot name="append"></slot>
+        </template>
       </el-table>
     </div>
     <div class="app-table__footer">

src/packages/pc/views/footer/goods/detail/index.vue

@@ -1,6 +1,6 @@
 <!-- 商品订单-持仓明细 -->
 <template>
-    <app-table :data="dataList" v-model:columns="tableColumns">
+    <app-table :data="tableList" v-model:columns="tableColumns">
         <!-- 方向 -->
         <template #buyorsell="{ value }">
             {{ getBuyOrSellName(value) }}
@@ -11,6 +11,9 @@
                 <el-button type="danger" size="small" @click="showComponent('transfer', row)">转让</el-button>
             </div>
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="showLoadMore">加载更多</el-button>
+        </template>
         <template #footer>
             <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
                 @closed="closeComponent" v-if="componentId" />
@@ -23,21 +26,24 @@ import { shallowRef, onUnmounted, defineAsyncComponent } from 'vue'
 import { getBuyOrSellName } from '@/constants/order'
 import { useRequest } from '@/hooks/request'
 import { useComponent } from '@/hooks/component'
-import { useDataTable } from '@/hooks/datatable'
+import { useLocalPagination } from '@/hooks/pagination'
 import { queryTradeHolderDetail } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import eventBus from '@/services/bus'
 
-const { dataList, run } = useRequest(queryTradeHolderDetail, {
-    params: {
-        trademodes: '50,16'
-    }
-})
-
 const componentMap = new Map<string, unknown>([
     ['transfer', defineAsyncComponent(() => import('./components/transfer/index.vue'))],
 ])
 
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.TradeHolderDetailRsp>()
+
+const { run } = useRequest(queryTradeHolderDetail, {
+    params: {
+        trademodes: '50,16'
+    },
+    onSuccess: (res) => initTableData(res.data)
+})
+
 const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
     run()
 })

src/packages/pc/views/footer/goods/order/index.vue

@@ -1,6 +1,6 @@
 <!-- 商品订单- 委托 -->
 <template>
-    <app-table :data="dataList" selection-type="multiple" v-model:columns="tableColumns" :loading="loading"
+    <app-table :data="tableList" selection-type="multiple" v-model:columns="tableColumns" :loading="loading"
         @selection-change="onTableSelect">
         <template #headerRight>
             <div class="buttonbar">
@@ -21,6 +21,9 @@
         <template #ordertime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <template #append>
+            <el-button size="small" plain @click="loadMore" v-if="showLoadMore">加载更多</el-button>
+        </template>
         <template #footer>
             <component ref="componentRef" v-bind="{ dataList, selectedRows }" :is="componentMap.get(componentId)"
                 @closed="closeComponent" v-if="componentId" />
@@ -31,6 +34,7 @@
 <script lang="ts" setup>
 import { ref, defineAsyncComponent, onUnmounted } from 'vue'
 import { useRequest } from '@/hooks/request'
+import { useLocalPagination } from '@/hooks/pagination'
 import { getBuyOrSellName, getOrderStatusName } from '@/constants/order'
 import { queryTradeOrderDetail } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
@@ -43,17 +47,15 @@ const componentMap = new Map<string, unknown>([
     ['clear', defineAsyncComponent(() => import('./clear/index.vue'))], // 快撤
 ])
 
-const dataList = ref<Model.TradeOrderDetailRsp[]>([])
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.TradeOrderDetailRsp>()
 const selectedRows = ref<Model.TradeOrderDetailRsp[]>([])
 
-const { loading, run, runAsync } = useRequest(queryTradeOrderDetail, {
+const { dataList, loading, run, runAsync } = useRequest(queryTradeOrderDetail, {
     params: {
         tradeMode: '50,16',
         orderStatus: '3,7,12',
     },
-    onSuccess: (res) => {
-        dataList.value = res.data
-    }
+    onSuccess: (res) => initTableData(res.data)
 })
 
 const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
@@ -84,11 +86,11 @@ const posChangedNtf = eventBus.$on('OrderDealedNtf', () => {
 
 // 接收委托回应通知
 const orderRspNotify = eventBus.$on(['OrderRsp',], () => {
-    const [firstItem] = dataList.value
+    const [firstItem] = tableList.value
     runAsync({
         incOrderID: firstItem?.orderid
     }).then((res) => {
-        dataList.value.unshift(...res.data)
+        tableList.value.unshift(...res.data)
     })
 })
 

src/packages/pc/views/footer/goods/trade/index.vue

@@ -1,6 +1,6 @@
 <!-- 商品订单 - 成交 -->
 <template>
-    <app-table class="goods-trade" :data="dataList" v-model:columns="tableColumns" :loading="loading">
+    <app-table class="goods-trade" :data="tableList" v-model:columns="tableColumns" :loading="loading">
         <template #headerRight>
             <ul class="goods-trade-total">
                 <li>
@@ -29,27 +29,29 @@
         <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 { ref, onUnmounted, computed } from 'vue'
 import { useRequest } from '@/hooks/request'
+import { useLocalPagination } from '@/hooks/pagination'
 import { getBuyOrSellName, getBuildTypeName } from '@/constants/order'
 import { queryTradeDetail } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import { formatDate } from '@/filters'
 import eventBus from '@/services/bus'
 
-const dataList = ref<Model.TradeDetailRsp[]>([])
+const { tableList, showLoadMore, initTableData, loadMore } = useLocalPagination<Model.TradeDetailRsp>()
 
-const { loading, runAsync } = useRequest(queryTradeDetail, {
+const { dataList, loading, runAsync } = useRequest(queryTradeDetail, {
     params: {
         tradeMode: '50,16'
     },
-    onSuccess: (res) => {
-        dataList.value = res.data
-    }
+    onSuccess: (res) => initTableData(res.data)
 })
 
 const tableColumns = ref<Model.TableColumn[]>([
@@ -76,11 +78,11 @@ const plTotal = computed(() => dataList.value.reduce((pre, cur) => pre += cur.cl
 
 // 接收成交通知
 const orderDealedNtf = eventBus.$on('OrderDealedNtf', () => {
-    const [firstItem] = dataList.value
+    const [firstItem] = tableList.value
     runAsync({
         incTradeID: firstItem?.tradeid
     }).then((res) => {
-        dataList.value.unshift(...res.data)
+        tableList.value.unshift(...res.data)
     })
 })
 

src/packages/qdhs/router/index.ts

@@ -164,7 +164,7 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'wallet',
         name: 'bank-wallet',
-        component: () => import('../views/bank/wallet/Index.vue'),
+        component: () => import('@mobile/views/bank/wallet/Index.vue'),
       },
       {
         path: 'sign',

src/packages/qdhs/views/bank/wallet/Index.vue

@@ -1,12 +0,0 @@
-<template>
-    <app-view>
-        <template #header>
-            <app-navbar title="出金" />
-        </template>
-        <app-withdraw />
-    </app-view>
-</template>
-
-<script lang="ts" setup>
-import AppWithdraw from '@mobile/views/bank/wallet/components/withdraw/Index.vue'
-</script>

src/packages/qdhs/views/bank/wallet/components/deposit/Index.vue

@@ -1,144 +0,0 @@
-<template>
-    <app-view class="g-form bank-wallet-deposit">
-        <Form ref="formRef" v-if="cusBank.caninamount === 1" class="g-form__container" @submit="formSubmit">
-            <CellGroup inset>
-                <Field type="number" v-model="formData.Amount" label="充值金额" placeholder="请填写充值金额"
-                    :rules="formRules.Amount" />
-                <Field label="凭证" :rules="formRules.filePath">
-                    <template #input>
-                        <app-uploader @success="onUploadSuccess" />
-                    </template>
-                </Field>
-                <template v-for="(item, index) in configs" :key="index">
-                    <Field v-if="item.usabletype === 1 || item.usabletype === userStore.userInfo?.userinfotype"
-                        :name="item.fieldcode" :label="item.fieldname" v-model="item.value"
-                        :placeholder="`请输入${item.fieldname}`" />
-                </template>
-            </CellGroup>
-        </Form>
-        <div class="g-form__bank" v-if="cusBank.caninamount === 0">
-            <span>{{ msg }}</span>
-        </div>
-        <div class="g-form__time">
-            <label>充值提现时间：{{ start }}-{{ end }}</label>
-        </div>
-        <div class="g-form__bank" v-if="false">
-            <table cellspacing="10" cellpadding="0">
-                <tr>
-                    <td>
-                        <span>企业名称:</span>
-                        <span>上海徽行供应链有限公司</span>
-                    </td>
-                    <td>
-                        <button type="button" data-clipboard-text="上海徽行供应链有限公司" v-copy="onCopy">复制</button>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <span>开户银行:</span>
-                        <span>中信银行上海虹口支行</span>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span>银行账户:</span>
-                        <span>8110201012101533442</span>
-                    </td>
-                    <td>
-                        <button ref="copy2" type="button" data-clipboard-text="8110201012101533442"
-                            v-copy="onCopy">复制</button>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <span>(汇款备注:预付货款或合同转让款)</span>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <span>电话: 021-63138889， 13681901188</span>
-                    </td>
-                </tr>
-            </table>
-        </div>
-        <template #footer>
-            <div class="g-form__footer inset">
-                <Button round block type="danger" @click="formRef?.submit()">确定</Button>
-            </div>
-        </template>
-    </app-view>
-</template>
-
-<script lang="ts" setup>
-import { shallowRef, ref } from 'vue'
-import { Form, Field, CellGroup, Button, FieldRule, FormInstance, showFailToast, showSuccessToast } from 'vant'
-import { useDoDeposit, useDoCusBankExtendConfigs, useQueryCusBankSignBank } from '@/business/bank'
-import { fullloading, dialog } from '@/utils/vant'
-import { useNavigation } from '@mobile/router/navigation'
-import { useUserStore } from '@/stores'
-import AppUploader from '@mobile/components/base/uploader/index.vue'
-
-const formRef = shallowRef<FormInstance>()
-const { formData, onSubmit } = useDoDeposit()
-const { router } = useNavigation()
-const { getSystemParamValue } = useUserStore()
-const start = getSystemParamValue('012')
-const end = getSystemParamValue('013')
-const msg = getSystemParamValue('302')
-const { configs } = useDoCusBankExtendConfigs(2)
-const certificate_photo_url = ref('')
-const userStore = useUserStore()
-/// 查询托管银行信息
-const { cusBank } = useQueryCusBankSignBank()
-
-// 表单验证规则
-const formRules: { [key in keyof Proto.t2bBankDepositReq | 'filePath']?: FieldRule[] } = {
-    Amount: [{
-        required: true,
-        message: '请填写充值金额',
-    }],
-    filePath: [{
-        message: '请上传转账凭证',
-        validator: () => {
-            return !!certificate_photo_url.value
-        }
-    }]
-}
-
-const onCopy = (status: boolean) => {
-    if (status) {
-        showSuccessToast('复制成功')
-    } else {
-        showFailToast('复制失败')
-    }
-}
-
-const onUploadSuccess = (filePath: string) => {
-    certificate_photo_url.value = filePath
-}
-
-const formSubmit = () => {
-    fullloading((hideLoading) => {
-        const obj: { [key: string]: unknown } = Object.create({})
-        configs.value.forEach((e) => {
-            if (e.value) {
-                obj[e.fieldcode] = e.value
-            }
-        })
-        obj['certificate_photo_url'] = certificate_photo_url.value
-        formData.extend_info = JSON.stringify(obj)
-        onSubmit().then(() => {
-            hideLoading()
-            dialog('充值申请提交成功，请等待审核。').then(() => {
-                router.back()
-            })
-        }).catch(() => {
-            hideLoading('充值失败', 'fail')
-        })
-    })
-}
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>

src/packages/qdhs/views/bank/wallet/components/deposit/index.less

@@ -1,35 +0,0 @@
-.bank-wallet-deposit {
-    .g-form__time {
-        color: #999;
-        padding-left: 15px;
-    }
-
-    .g-form__bank {
-        padding: 16px;
-
-        table {
-            width: 100%;
-            font-size: .24rem;
-            border: 1px dashed #ddd;
-            border-radius: .1rem;
-
-            td {
-                &:not(:first-child) {
-                    text-align: right;
-                }
-
-                span {
-                    &:first-child {
-                        color: #999;
-                    }
-                }
-
-                button {
-                    background-color: #e1e1e1;
-                    border-radius: .1rem;
-                    padding: .04rem .2rem;
-                }
-            }
-        }
-    }
-}

src/packages/qdhs/views/bank/wallet/components/withdraw/Index.vue

@@ -1,106 +0,0 @@
-<template>
-    <app-view class="g-form bank-wallet-withdraw">
-        <Form ref="formRef" v-if="cusBank.canoutamount === 1" class="g-form__container" @submit="formSubmit">
-            <CellGroup inset>
-                <Field class="form-field" type="number" label="提现金额" v-model="formData.Amount" :rules="formRules.Amount">
-                    <template #input>
-                        <input v-model="formData.Amount" placeholder="请填写提现金额" />
-                        <span class="form-field__tips">可出金额：{{ fund.AvailableOutMoney }}</span>
-                    </template>
-                </Field>
-                <Field label="开户银行">
-                    <template #input>
-                        {{ sign.bankname }}
-                    </template>
-                </Field>
-                <Field label="银行卡号">
-                    <template #input>
-                        {{ sign.bankaccountno }}
-                    </template>
-                </Field>
-                <Field label="姓名">
-                    <template #input>
-                        {{ sign.bankaccountname }}
-                    </template>
-                </Field>
-                <template v-for="(item, index) in configs" :key="index">
-                    <Field v-if="item.usabletype === 1 || item.usabletype === userStore.userInfo?.userinfotype"
-                        :name="item.fieldcode" :label="item.fieldname" v-model="item.value"
-                        :placeholder="`请输入${item.fieldname}`" />
-                </template>
-            </CellGroup>
-        </Form>
-        <div class="g-form__bank" v-if="cusBank.canoutamount === 0">
-            <span>{{ msg }}</span>
-        </div>
-        <div class="g-form__time">
-            <label>充值提现时间：{{ start }}-{{ end }}</label>
-        </div>
-        <template #footer>
-            <div class="g-form__footer inset">
-                <Button round block type="danger" @click="formRef?.submit()">确定</Button>
-            </div>
-        </template>
-    </app-view>
-</template>
-
-<script lang="ts" setup>
-import { useDoWithdraw, useAccountFundInfo, useDoCusBankExtendConfigs, useQueryCusBankSignBank } from '@/business/bank';
-import { Form, Field, CellGroup, FormInstance, Button, FieldRule } from 'vant'
-import { shallowRef } from 'vue'
-import { fullloading, dialog } from '@/utils/vant'
-import { useNavigation } from '@mobile/router/navigation'
-import { useUserStore } from '@/stores'
-
-const { formData, onSubmit, sign } = useDoWithdraw()
-const { configs } = useDoCusBankExtendConfigs(3)
-/// 资金账户信息
-const { fund } = useAccountFundInfo()
-const { router } = useNavigation()
-const formRef = shallowRef<FormInstance>()
-const { getSystemParamValue } = useUserStore()
-const start = getSystemParamValue('012')
-const end = getSystemParamValue('013')
-const msg = getSystemParamValue('302')
-const userStore = useUserStore()
-/// 查询托管银行信息
-const { cusBank } = useQueryCusBankSignBank()
-
-// 表单验证规则
-const formRules: { [key in keyof Proto.t2bBankWithdrawReq]?: FieldRule[] } = {
-    Amount: [{
-        required: true,
-        message: '请输入出金金额',
-        validator: (val) => {
-            if (val <= (fund.value.AvailableOutMoney ?? 0.0)) {
-                return true
-            }
-            return '超过可出金额'
-        }
-    }]
-}
-
-const formSubmit = () => {
-    const obj: { [key: string]: unknown } = Object.create({})
-    configs.value.forEach((e) => {
-        if (e.value) {
-            obj[e.fieldcode] = e.value
-        }
-    })
-    formData.extend_info = JSON.stringify(obj)
-    fullloading((hideLoading) => {
-        onSubmit().then(() => {
-            hideLoading()
-            dialog('出金提交申请成功，请耐心等待审核。').then(() => {
-                router.back()
-            })
-        }).catch(() => {
-            hideLoading('出金失败', 'fail')
-        })
-    })
-}
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>

src/packages/qdhs/views/bank/wallet/components/withdraw/index.less

@@ -1,22 +0,0 @@
-.bank-wallet-withdraw {
-    .form-field {
-        .van-field__control {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-        }
-
-        &__tips {
-            font-size: .24rem;
-        }
-    }
-
-    .g-form__bank {
-        padding: 16px;
-    }
-
-    .g-form__time {
-        color: #999;
-        padding-left: 15px;
-    }
-}