xxxx

src/packages/pc/views/account/sign/components/cancel/index.vue

@@ -0,0 +1,44 @@
+<!-- 账户管理-签约账号管理-解约 -->
+<template>
+    <app-drawer title="提示" v-model:show="show" :loading="loading" :refresh="refresh">
+        <div>确认要解约吗？</div>
+        <template #footer>
+            <el-button type="primary" @click="onCancelSumit()">提交</el-button>
+            <el-button @click="onCancel(false)" plain>取消</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, PropType } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useDoCancelBankSign } from '@/business/bank'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.BankAccountSignRsp>,
+        required: true
+    }
+})
+
+const { cancelSubmit, loading } = useDoCancelBankSign()
+
+const show = ref(true)
+const refresh = ref(false)
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onCancelSumit = () => {
+    /// 提交
+    cancelSubmit().then(() => {
+        ElMessage.success('提交成功')
+        onCancel(true)
+    }).catch((err) => {
+        ElMessage.error('提交失败:' + err)
+    })
+}
+</script>

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

@@ -1,12 +1,69 @@
 <!-- 签约账号管理 -->
 <template>
-    <app-table :data="[]" v-model:columns="tableColumns" />
+    <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 } from 'vue'
+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>