|
|
@@ -2,10 +2,14 @@
|
|
|
<app-modal direction="right" height="100%" v-model:show="showModal">
|
|
|
<app-view class="bank-hisstatement">
|
|
|
<template #header>
|
|
|
- <app-navbar title="历史资金流水" @back="closed" />
|
|
|
+ <app-navbar title="历史资金流水" @back="closed">
|
|
|
+ <template #footer>
|
|
|
+ <Cell title="查询日期" :value="dateRange.join('-')" @click="showCalendar = true" is-link />
|
|
|
+ </template>
|
|
|
+ </app-navbar>
|
|
|
</template>
|
|
|
- <app-pull-refresh v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
|
|
|
- :page-count="pageCount" @refresh="run">
|
|
|
+ <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
|
|
|
+ :page-count="pageCount" @refresh="onRefresh">
|
|
|
<app-list class="bank-hisstatement__table" :columns="columns" :data-list="dataList">
|
|
|
<template #createtime="{ value }">
|
|
|
<span>{{ formatDate(value, 'YYYY-MM-DD') }}</span>
|
|
|
@@ -13,22 +17,35 @@
|
|
|
</template>
|
|
|
</app-list>
|
|
|
</app-pull-refresh>
|
|
|
+ <Calendar v-model:show="showCalendar" type="range" :max-date="new Date()" :min-date="moment().subtract(1, 'years').toDate()" @confirm="onConfirm" />
|
|
|
+ <component ref="componentRef" :is="componentMap.get(componentId)" @closed="closeComponent" v-if="componentId" />
|
|
|
</app-view>
|
|
|
</app-modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef } from 'vue'
|
|
|
+import { shallowRef, ref } from 'vue'
|
|
|
import { formatDate } from '@/filters'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { queryHisAmountLog } from '@/services/api/bank'
|
|
|
import AppModal from '@/components/base/modal/index.vue'
|
|
|
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
|
|
|
import AppList from '@mobile/components/base/list/index.vue'
|
|
|
+import moment from 'moment'
|
|
|
+import { Calendar, Cell } from 'vant'
|
|
|
+import { useComponent } from '@/hooks/component'
|
|
|
+
|
|
|
+const { componentRef, componentId, closeComponent } = useComponent(() => {
|
|
|
+ pullRefreshRef.value?.refresh()
|
|
|
+})
|
|
|
|
|
|
+const componentMap = new Map<string, unknown>([])
|
|
|
const showModal = shallowRef(true)
|
|
|
const dataList = shallowRef<Model.HisAmountLogRsp[]>([])
|
|
|
const error = shallowRef(false)
|
|
|
+const showCalendar = shallowRef(false) // 是否显示日期选择器
|
|
|
+const dateRange = ref<string[]>([]) // 日期范围
|
|
|
+const pullRefreshRef = shallowRef()
|
|
|
|
|
|
const columns: Model.TableColumn[] = [
|
|
|
{ prop: 'createtime', label: '时间' },
|
|
|
@@ -38,10 +55,6 @@ const columns: Model.TableColumn[] = [
|
|
|
|
|
|
const { loading, pageIndex, pageCount, run } = useRequest(queryHisAmountLog, {
|
|
|
manual: true,
|
|
|
- params: {
|
|
|
- pagesize: 20,
|
|
|
- pageflag: 1,
|
|
|
- },
|
|
|
onSuccess: (res) => {
|
|
|
if (pageIndex.value === 1) {
|
|
|
dataList.value = []
|
|
|
@@ -53,6 +66,22 @@ const { loading, pageIndex, pageCount, run } = useRequest(queryHisAmountLog, {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+// 选择日期
|
|
|
+const onConfirm = ([start, end]: Date[]) => {
|
|
|
+ showCalendar.value = false
|
|
|
+ dateRange.value = [formatDate(start.toISOString(), 'YYYY-MM-DD'), formatDate(end.toISOString(), 'YYYY-MM-DD')]
|
|
|
+ pageIndex.value = 1
|
|
|
+ pullRefreshRef.value?.refresh()
|
|
|
+}
|
|
|
+
|
|
|
+const onRefresh = () => {
|
|
|
+ const [begindate, enddate] = dateRange.value
|
|
|
+ run({
|
|
|
+ startDate: begindate,
|
|
|
+ endDate: enddate,
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
// 关闭弹窗
|
|
|
const closed = () => {
|
|
|
showModal.value = false
|