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

<!-- 签约账号管理 -->
<template>
    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey"
        :expand-row-keys="expandKeys" @row-click="rowClick">
        <template #header>
            <el-button type="primary" v-if="authStatus === AuthStatus.Certified"
                @click="openComponent('sign')">添加签约账户</el-button>
            <el-button type="warning" v-else @click="openComponent('certification')">实名认证</el-button>
        </template>
        <!-- 证件类型 -->
        <template #cardtype="{ value }">
            {{ getCertificateTypeCodeName(Number(value)) }}
        </template>
        <!-- 状态 -->
        <template #signstatus="{ value }">
            {{ getSignStatusName(value) }}
        </template>
        <!-- 展开行 -->
        <template #expand="{ row }">
            <div class="buttonbar">
                <el-button v-if="row.signstatus === SignStatus.Signed" type="danger" size="small"
                    @click="openComponent('cancel')">解约</el-button>
                <el-button v-if="[SignStatus.Unsigned, SignStatus.Refuse, SignStatus.Signed].includes(row.signstatus)"
                    type="primary" size="small" @click="openComponent('sign')">修改</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, onMounted } from 'vue'
import { useComponent } from '@/hooks/component'
import { useComposeTable } from '@pc/components/base/table'
import { useRequest } from '@/hooks/request'
import { queryBankAccountSign } from '@/services/api/bank'
import { getSignStatusName, SignStatus } from '@/constants/bank'
import { getCertificateTypeCodeName } from '@/constants/account'
import { queryUserAccount } from '@/services/api/account'
import { AuthStatus } from '@/constants/account'
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'))],
    ['certification', defineAsyncComponent(() => import('./components/certification/index.vue'))], // 实名认证
])

const { rowKey, expandKeys, rowClick, selectedRow } = useComposeTable<Model.BankAccountSignRsp>({ rowKey: 'applyexchticket' })
const { loading, dataList, run } = useRequest(queryBankAccountSign, {})
const authStatus = shallowRef(AuthStatus.Uncertified) // 实名认证状态

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

const tableColumns = shallowRef<Model.TableColumn[]>([
    { prop: 'accountcode', label: '资金账号' },
    { prop: 'accountname', label: '账号名' },
    { prop: 'cardtype', label: '证件类型' },
    { prop: 'cardno', label: '证件号码' },
    { prop: 'cusbankname', label: '托管银行' },
    { prop: 'bankname', label: '签约银行' },
    { prop: 'bankaccountno', label: '签约银行账号' },
    { prop: 'currency', label: '币种' },
    { prop: 'signstatus', label: '状态' },
])

onMounted(() => {
    if (authStatus.value !== AuthStatus.Certified) {
        // 获取用户账号信息
        queryUserAccount().then((res) => {
            authStatus.value = res.data.hasauth
        })
    }
})

</script>