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="danger" size="small" @click="openComponent('')">添加签约账户</el-button>
        </template>
        <!-- 证件类型 -->
        <template #cardtype="{ value }">
            {{ getCertificateTypeCodeName(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="showComponent('cancel', row)">解约</el-button>
                <el-button v-if="[SignStatus.Unsigned, SignStatus.Refuse, SignStatus.Signed].includes(row.signstatus)" type="danger" size="small" @click="showComponent('cancel', 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 } from 'vue'
import { useComponent } from '@/hooks/component'
import { useComposeTable } from '@pc/components/base/table'
import { useRequest } from '@/hooks/request'
import AppTable from '@pc/components/base/table/index.vue'
import { queryBankAccountSign } from '@/services/api/bank'
import { getSignStatusName, SignStatus } from '@/constants/bank'
import { getCertificateTypeCodeName } from '@/constants/account'

const { rowKey, expandKeys, rowClick, selectedRow } = useComposeTable<Model.BankAccountSignRsp>({ rowKey: 'applyexchticket' })

defineProps({
    code: String
})

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

const { loading, dataList, run } = useRequest(queryBankAccountSign, {})

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: '状态' },
])

const showComponent = (componentName: string, row: Model.BankAccountSignRsp) => {
    selectedRow.value = row
    openComponent(componentName)
}
</script>