MTP20_WEB_GLOBAL/src/packages/pc/views/account/holddeposit/index.vue

<!-- 账户管理-入金代扣申请流水 -->
<template>
    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey"
        :expand-row-keys="expandKeys" @row-click="rowClick">
        <template #headerLeft>
            <app-filter :options="filterOptons">
                <template #after>
                    <el-date-picker type="daterange" effect="dark" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD"
                        v-model="filterDate" />
                </template>
            </app-filter>
        </template>
        <template #headerRight>
            <el-button v-if="signStatus=== SignStatus.Signed" type="primary" size="small" 
                       @click="openComponent('deposit')">入金代扣申请</el-button>
        </template>
    </app-table>
    <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
        v-if="componentId" />
</template>

<script lang="ts" setup>
import { shallowRef, defineAsyncComponent } from 'vue'
import { useDataFilter } from '@/hooks/datatable'
import { useComponent } from '@/hooks/component'
import { useComposeTable } from '@pc/components/base/table'
import { useRequest } from '@/hooks/request'
import { queryGtwithholddepositapply, queryGetGtwithholdsigninfo } from '@/services/api/bank'
import { SignStatus } from '@/constants/bank'
import AppTable from '@pc/components/base/table/index.vue'
import AppFilter from '@pc/components/base/table-filter/index.vue'

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

const { filterOptons, getQueryParams } = useDataFilter<Model.GTWithHoldDepositApplyReq>()
const filterDate = shallowRef<string[]>([])

filterOptons.buttonList = [
    { lable: '重置', className: 'el-button--info', onClick: () => onSearch(true) },
    { lable: '查询', className: 'el-button--info', onClick: () => onSearch() }
]

filterOptons.selectList = [
    {
        key: 'billresult',
        selectedValue: undefined,
        options: [
            { label: '扣费成功', value: 0 },
            { label: '扣费失败', value: 1 },
        ]
    }
]

const signStatus = shallowRef(SignStatus.Unsigned)
const { rowKey, expandKeys, rowClick, selectedRow } = useComposeTable<Model.GTWithHoldDepositApplyRsp>({ rowKey: 'billingsnum' })
const { loading, dataList, run } = useRequest(queryGtwithholddepositapply)

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

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

const tableColumns = shallowRef<Model.TableColumn[]>([
    { prop: 'billamount', label: '入金代扣金额' },
    { prop: 'dgjfhm', label: '扣费账号' },
    { prop: 'billingsnum', label: '流水号' },
    { prop: 'trantime', label: '申请时间' },
    { prop: 'message', label: '备注' },
    { prop: 'billresult', label: '状态' }
])

const onSearch = (clear = false) => {
    if (clear) {
        filterDate.value = []
    }
    getQueryParams((qs) => {
        qs.begindate = filterDate.value[0]
        qs.enddate = filterDate.value[1]
        run(qs)
    }, clear)
}

</script>