MTP20_WEB_GLOBAL/src/packages/pc/views/account/holdsign/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>
            <el-button type="primary" size="small"
                v-if="[SignStatus.Unsigned, SignStatus.Rescinded].includes(signStatus)"
                @click="showComponent('sign')">代扣签约申请</el-button>
        </template>
        <!-- 状态 -->
        <template #accountsignstatus="{ value }">
            {{ getSignStatusName(value) }}
        </template>
        <!-- 扣款时间单位 -->
        <template #kksjdw="{ value }">
            {{  getGt_kksjdwName(value) }}
        </template>
        <!-- 展开行 -->
        <template #expand="{ row }">
            <div class="buttonbar">
                <el-button v-if="row.accountsignstatus === SignStatus.Signed" type="danger"
                    size="small" @click="openComponent('cancel')">解约</el-button>
            </div>
        </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, ref } from 'vue'
import { useComponent } from '@/hooks/component'
import { useComposeTable } from '@pc/components/base/table'
import { useRequest } from '@/hooks/request'
import { queryGetGtwithholdsigninfo, queryBankAccountSign } from '@/services/api/bank'
import { getGt_kksjdwName, getSignStatusName, SignStatus } from '@/constants/bank'
import { ElMessage } from 'element-plus'
import AppTable from '@pc/components/base/table/index.vue'

const componentMap = new Map<string, unknown>([
    ['cancel', defineAsyncComponent(() => import('./components/cancel/index.vue'))],
    ['sign', defineAsyncComponent(() => import('./components/sign/index.vue'))],
])
const signStatus = shallowRef(SignStatus.Unsigned)
/// 判断是否能签约
const canBankSign = ref(false)

const { rowKey, expandKeys, rowClick, selectedRow } = useComposeTable<Model.GTWithHoldSignInfoRsp>({ rowKey: 'accountid' })
const { loading, dataList, run } = useRequest(queryGetGtwithholdsigninfo, {
    onSuccess: (res) => {
        /// 签约状态
        if (res.data.length != 0) {
            signStatus.value = res.data[0].accountsignstatus
        }
    }
})

/// 查询托管银行信息
useRequest(queryBankAccountSign, {
    onSuccess: (res) => {
        /// 签约状态
        if (res.data.length != 0) {
            canBankSign.value = res.data[0].signstatus === 4
        }
    }
})

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

const showComponent = ((componentName: string) => {
    /// 认证请求中 不能操作
    if (!canBankSign.value) {
        ElMessage.error('请先进行银行签约')
        return
    }
    openComponent(componentName)
})

const tableColumns = shallowRef<Model.TableColumn[]>([
    { prop: 'jfhm', label: ' 用户编号' },
    { prop: 'accountsignstatus', label: '账户签约状态' },
    // { prop: 'yckfxe', label: '一次扣费限额' },
    { prop: 'xyqsrq', label: '协议签署日期' },
    { prop: 'xysxrq', label: '协议生效日期' },
    { prop: 'xydqrq', label: '协议到期日期' },
    { prop: 'kksjdw', label: '扣款单位时间' },
    { prop: 'kksjbc', label: '扣款时间步长' },
    // { prop: 'kkzqnkfxe', label: '扣款周期内扣费限额' },
    // { prop: 'kkzqnxzbs', label: '扣费周期内限制笔数' },
])

</script>