MTP20_WEB_GLOBAL/src/packages/gstj/views/holdbank/holddeposit/Index.vue

<template>
    <app-view class="bank-sign g-form">
        <template #header>
            <app-navbar title="代扣申请查询" >
                <template #right>
                    <div class="button-more" @click="showComponent('apply')">
                        <span>新增</span>
                    </div>
                </template>
            </app-navbar>
            <Cell title="查询日期" :value="dateRange.join('-')" @click="showCalendar = true" is-link />
        </template>
        <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" 
            v-model:pageIndex="pageIndex" :page-count="pageCount" @refresh="onRefresh">
            <div class="g-order-list">
                <div class="g-order-list__box" v-for="(item, index) in dataList" :key="index">
                    <div class="g-order-list__titlebar">
                        <div class="left">
                            <h5>{{ formatDecimal(item.billamount) }}</h5>
                        </div>
                        <div class="right">
                            <span>{{ getBillResultName(Number(item.billresult)) }}</span>
                        </div>
                    </div>
                    <div class="g-order-list__content">
                        <ul>
                            <li>
                                <span>申请时间</span>
                                <span>{{ formatDate(item.createtime, 'YYYYMMDD HH:mm') }}</span>
                            </li>
                            <li>
                                <span>备注</span>
                                <span>{{ handleNoneValue(item.billresultremark) }}</span>
                            </li>
                            <li>
                                <span>扣费账号</span>
                                <span>{{ handleNoneValue(item.dgjfhm) }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </app-pull-refresh>
        <Calendar v-model:show="showCalendar" type="range" :allow-same-day="true" :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>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, shallowRef, ref } from 'vue'
import { formatDate, formatDecimal, handleNoneValue } from '@/filters'
import { useComponent } from '@/hooks/component'
import { useRequest } from '@/hooks/request'
import { SignStatus } from '@/constants/bank'
import { Calendar, Cell } from 'vant'
import { queryGtwithholddepositapply, queryGetGtwithholdsigninfo } from '@/services/api/bank'
import { getBillResultName } from '@/constants/order'
import { dialog } from '@/utils/vant'
import moment from 'moment'
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'

const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
    run()
})

const componentMap = new Map<string, unknown>([
    ['apply', defineAsyncComponent(() => import('./components/apply/Index.vue'))],
])

const error = shallowRef(false)
const pullRefreshRef = shallowRef()
const signStatus = shallowRef(SignStatus.Unsigned)
// 是否显示日期选择器
const showCalendar = shallowRef(false) 
// 日期范围
const dateRange = ref<string[]>([]) 

// 查询已经入金代扣申请签约
useRequest(queryGetGtwithholdsigninfo, {
    onSuccess: (res) => {
        /// 签约状态
        if (res.data.length != 0) {
            signStatus.value = res.data[0].accountsignstatus
        }
    }
})

const showComponent = (componentName: string) => {
    if (signStatus.value != SignStatus.Signed) {
        dialog('未进行入金代扣签约')
        return
    }
    openComponent(componentName)
}

const { loading, pageIndex, pageCount, run, dataList } = useRequest(queryGtwithholddepositapply)

// 选择日期
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 = () => {
    if (dateRange.value.length != 0) {
        const [begindate, enddate] = dateRange.value
        run({
            begindate: formatDate(begindate, 'YYYYMMDD'),
            enddate: formatDate(enddate, 'YYYYMMDD')
        })
    } else {
        run()
    }
}
</script>

<style lang="less">
@import './index.less';
</style>