|
|
@@ -1,187 +1,53 @@
|
|
|
<template>
|
|
|
- <!-- <CellGroup>
|
|
|
- <Field name="operateType" :label="$t('banksign.fundstype')" is-link>
|
|
|
- <template #input>
|
|
|
- <app-select v-model="operatetype" :placeholder="$t('banksign.pleasechoicefundstype')" :options="operateTypeSearchList" :optionProps="{ label: 'label', value: 'value' }" @confirm="onConfirm"/>
|
|
|
- </template>
|
|
|
- </Field>
|
|
|
- </CellGroup> -->
|
|
|
- <table cellspacing="0" cellpadding="0">
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <app-select v-model="dateType" :options="options" />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr v-if="dateType != 0">
|
|
|
- <td>
|
|
|
- <app-calendar :default-date="[currentDate]" @confirm="onCalendarConfirm" :title="$t('common.calendar')" :confirm-text="$t('operation.confirm')" />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- <app-pull-refresh v-if="dateType === 0" ref="pullRefreshRef" class="bank-statement" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
|
|
|
- :page-count="pageCount" @refresh="run">
|
|
|
- <app-list class="bank-statement__table" :columns="columns" :data-list="dataList">
|
|
|
- <template #createtime="{ value }">
|
|
|
- <span>{{ formatDate(value, 'YYYY-MM-DD') }}</span>
|
|
|
- <span>{{ formatDate(value, 'HH:mm:ss') }}</span>
|
|
|
- </template>
|
|
|
- <!-- 操作类型 -->
|
|
|
- <template #operatetypename="{ row }">
|
|
|
- {{ operatetypename(row) }}
|
|
|
- </template>
|
|
|
- </app-list>
|
|
|
- </app-pull-refresh>
|
|
|
- <app-pull-refresh v-else ref="pullRefreshRef" class="bank-statement" v-model:loading="hisLoading" v-model:error="error" v-model:pageIndex="hisPageIndex"
|
|
|
- :page-count="hisPageCount" @refresh="onRefresh">
|
|
|
- <app-list class="bank-statement__table" :columns="columns" :data-list="hisDataList">
|
|
|
- <template #createtime="{ value }">
|
|
|
- <span>{{ formatDate(value, 'YYYY-MM-DD') }}</span>
|
|
|
- <span>{{ formatDate(value, 'HH:mm:ss') }}</span>
|
|
|
- </template>
|
|
|
- <!-- 操作类型 -->
|
|
|
- <template #operatetypename="{ row }">
|
|
|
- {{ operatetypename(row) }}
|
|
|
- </template>
|
|
|
- </app-list>
|
|
|
- </app-pull-refresh>
|
|
|
+ <div class="g-detail-table">
|
|
|
+ <table cellspacing="0" cellpadding="0">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <Checkbox v-model="checked">历史</Checkbox>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <app-date-picker v-model="dateValue" @confirm="onRefresh()" v-if="checked" />
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <statement-history ref="historyRef" :params="historyParams" v-if="checked" />
|
|
|
+ <statement-list :params="listParams" v-else />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef } from 'vue'
|
|
|
-// import { CellGroup, Field } from 'vant'
|
|
|
-import { formatDate } from '@/filters'
|
|
|
-import { useRequest } from '@/hooks/request'
|
|
|
-import { queryAmountLog, queryHisAmountLog } from '@/services/api/bank'
|
|
|
-import { i18n } from '@/stores'
|
|
|
-import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
|
|
|
-import AppList from '@mobile/components/base/list/index.vue'
|
|
|
-import { getOperateTypeSearchList } from '@/constants/order'
|
|
|
-import AppSelect from '@mobile/components/base/select/index.vue'
|
|
|
-import AppCalendar from '@mobile/components/base/calendar/index.vue'
|
|
|
-
|
|
|
-const { global: { t } } = i18n
|
|
|
-const dataList = shallowRef<Model.AmountLogRsp[]>([])
|
|
|
-const hisDataList = shallowRef<Model.HisAmountLogRsp[]>([])
|
|
|
-const error = shallowRef(false)
|
|
|
-/// 资金类型
|
|
|
-// const operatetype = shallowRef(0)
|
|
|
-const pullRefreshRef = shallowRef()
|
|
|
-
|
|
|
-const dateType = shallowRef(0)
|
|
|
-const currentDate = shallowRef(new Date())
|
|
|
-const options = shallowRef([
|
|
|
- { label: '当前', value: 0 },
|
|
|
- { label: '历史', value: 1 }
|
|
|
-])
|
|
|
-
|
|
|
-/// 查询数据
|
|
|
-const operateTypeSearchList = [{
|
|
|
- label: t('common.all'),
|
|
|
- value: 0
|
|
|
-}].concat(getOperateTypeSearchList())
|
|
|
-
|
|
|
-const operatetypename = ((row: Model.AmountLogRsp) => {
|
|
|
- switch (i18n.global.locale) {
|
|
|
- case "zh-CN":
|
|
|
- return row.operatetypename
|
|
|
- case "zh-TW":
|
|
|
- return row.operatetypename_tw
|
|
|
- case "en-US":
|
|
|
- return row.operatetypenameen
|
|
|
- case "vi":
|
|
|
- return row.operatetypenamevi
|
|
|
- default:
|
|
|
- return row.operatetypenameth
|
|
|
- }
|
|
|
+import { shallowRef, reactive, defineAsyncComponent } from 'vue'
|
|
|
+import { Checkbox } from 'vant'
|
|
|
+import AppDatePicker from '@mobile/components/base/datepicker/index.vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ accountid: {
|
|
|
+ type: Number,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
})
|
|
|
|
|
|
-const columns: Model.TableColumn[] = [
|
|
|
- { field: 'createtime', label: t('banksign.capital.createtime') },
|
|
|
- { field: 'operatetypename', label: t('banksign.capital.operatetypename') },
|
|
|
- { field: 'amount', label: t('banksign.capital.amount') },
|
|
|
-]
|
|
|
+const StatementList = defineAsyncComponent(() => import('./list/index.vue')) // 当前
|
|
|
+const StatementHistory = defineAsyncComponent(() => import('./history/index.vue')) // 历史
|
|
|
|
|
|
-const { loading, pageIndex, pageCount, run } = useRequest(queryAmountLog, {
|
|
|
- defaultParams: {
|
|
|
- pagesize: 20,
|
|
|
- pageflag: 1,
|
|
|
- },
|
|
|
- onSuccess: (res) => {
|
|
|
- if (pageIndex.value === 1) {
|
|
|
- dataList.value = res.data
|
|
|
- return
|
|
|
- }
|
|
|
- dataList.value.push(...res.data)
|
|
|
- },
|
|
|
- onError: () => {
|
|
|
- error.value = true
|
|
|
- }
|
|
|
-})
|
|
|
+const historyRef = shallowRef()
|
|
|
+const checked = shallowRef(false)
|
|
|
+const dateValue = shallowRef([])
|
|
|
|
|
|
-const { loading: hisLoading, pageIndex: hisPageIndex, pageCount: hisPageCount, run: runHis } = useRequest(queryHisAmountLog, {
|
|
|
- defaultParams: {
|
|
|
- pagesize: 20,
|
|
|
- },
|
|
|
- onSuccess: (res) => {
|
|
|
- if (pageIndex.value === 1) {
|
|
|
- hisDataList.value = []
|
|
|
- }
|
|
|
- hisDataList.value.push(...res.data)
|
|
|
- },
|
|
|
- onError: () => {
|
|
|
- error.value = true
|
|
|
- }
|
|
|
+const listParams = reactive<Partial<Model.AmountLogReq>>({
|
|
|
+ accountID: props.accountid.toString()
|
|
|
})
|
|
|
|
|
|
-// 选中资金类型
|
|
|
-const onConfirm = (value: number) => {
|
|
|
- pageIndex.value = 1
|
|
|
- run({
|
|
|
- operateType: value === 0 ? undefined : value.toString()
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 选择日期
|
|
|
-const onCalendarConfirm = (value: Date) => {
|
|
|
- currentDate.value = value
|
|
|
- pageIndex.value = 1
|
|
|
- const dateString = currentDate.value.toISOString()
|
|
|
- const dateValue = formatDate(dateString, 'YYYYMMDD')
|
|
|
- runHis({
|
|
|
- startDate: dateValue,
|
|
|
- endDate: dateValue,
|
|
|
- })
|
|
|
-}
|
|
|
+const historyParams = reactive<Partial<Model.HisAmountLogReq>>({
|
|
|
+ accountID: props.accountid.toString()
|
|
|
+})
|
|
|
|
|
|
const onRefresh = () => {
|
|
|
- const dateString = currentDate.value.toISOString()
|
|
|
- const dateValue = formatDate(dateString, 'YYYYMMDD')
|
|
|
- runHis({
|
|
|
- startDate: dateValue,
|
|
|
- endDate: dateValue,
|
|
|
- })
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
-.bank-statement {
|
|
|
- padding-top: 10px;
|
|
|
-
|
|
|
- &__table {
|
|
|
- td.app-list__column {
|
|
|
- &:first-child {
|
|
|
- span:last-child {
|
|
|
- color: #999;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:not(:first-child) {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ const date = dateValue.value.join('')
|
|
|
+ historyParams.startDate = date
|
|
|
+ historyParams.endDate = date
|
|
|
+ historyRef.value?.refresh()
|
|
|
}
|
|
|
-</style>
|
|
|
+</script>
|