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 #headerLeft>
            <el-button type="primary" size="small"
                v-if="[AuthStatus.Certified, AuthStatus.Submitted].includes(authStatus) && ![SignStatus.Audit, SignStatus.Signing, SignStatus.Signed].includes(signStatus)"
                @click="showComponent('sign')">添加签约账户</el-button>
            <!-- <el-button type="warning" size="small" v-if="authStatus === AuthStatus.Uncertified"
                @click="openComponent('certification')">实名认证</el-button> -->
            <el-button type="warning" size="small" v-if="authStatus === AuthStatus.Uncertified"
                @click="openComponent('certification-aq')">实名认证</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 && cusBank?.canrelease === 1" type="danger"
                    size="small" @click="openComponent('cancel')">解约</el-button>
                <el-button
                    v-if="[SignStatus.Unsigned, SignStatus.Refuse, SignStatus.Rescinded].includes(row.signstatus) || (row.signstatus === SignStatus.Signed && cusBank?.canmodifysigninfo === 1)"
                    type="primary" size="small" @click="beforeShowComponent(row)">修改</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 { ElMessageBox } from 'element-plus'
import { useComponent } from '@/hooks/component'
import { useComposeTable } from '@pc/components/base/table'
import { useRequest } from '@/hooks/request'
import { queryBankAccountSign, queryCusBankSignBank } 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 { useUserStore } from '@/stores'
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'))],
    ['certification', defineAsyncComponent(() => import('./components/certification/index.vue'))], // 实名认证,
    ['certification-aq', defineAsyncComponent(() => import('./components/certification-aq/index.vue'))], // 实名认证
])

const useStore = useUserStore()
const authStatus = shallowRef(AuthStatus.Certified) // 实名认证状态
const signStatus = shallowRef(SignStatus.Unsigned)
const cusBank = shallowRef<Model.CusBankSignBankRsp>()

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

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

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

const showComponent = ((componentName: string) => {
    /// 认证请求中 不能操作
    if (authStatus.value === AuthStatus.Submitted) {
        ElMessage.error('实名认证正在审核中，暂不能进行签约请求操作！')
        return
    }
    openComponent(componentName)
})

const beforeShowComponent = (row: Model.BankAccountSignRsp) => {
    if (row.cusbankid === 'jdjs') {
        ElMessageBox.alert('请先发函到结算中心修改信息后再修改，否则将会影响入金、出金。').finally(() => {
            showComponent('sign')
        })
    } else {
        showComponent('sign')
    }
}

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: '状态' },
    { prop: 'remark', label: '备注' },
])

onMounted(() => {
    useStore.getUserData()
    // 获取用户账号信息----------------待处理，直接用useStore
    queryUserAccount().then((res) => {
        authStatus.value = res.data.hasauth
    })
})

</script>