feat: 更新银行卡信息编辑组件,优化用户体验,调整路由配置

This commit is contained in:
2026-01-13 22:26:47 +07:00
parent e3720742f7
commit 0adb734f84
5 changed files with 174 additions and 17 deletions

View File

@@ -238,7 +238,7 @@ const local: App.I18n.Schema = {
user_list: '用户列表',
user_bankcard: '用户银行卡',
bank: '银行管理',
transfer: '转账管理',
transfer: '转账记录',
asset: '资产管理',
'tokenization_trading-pairs': '交易对管理',
tokenization: '代币化管理',

View File

@@ -164,15 +164,15 @@ export const generatedRoutes: GeneratedRoute[] = [
i18nKey: 'route.rwa_producttype'
}
},
{
name: 'rwa_subscribe',
path: '/rwa/subscribe',
component: 'view.rwa_subscribe',
meta: {
title: 'rwa_subscribe',
i18nKey: 'route.rwa_subscribe'
}
}
// {
// name: 'rwa_subscribe',
// path: '/rwa/subscribe',
// component: 'view.rwa_subscribe',
// meta: {
// title: 'rwa_subscribe',
// i18nKey: 'route.rwa_subscribe'
// }
// }
]
},
{

View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { loginModuleRecord } from '@/constants/app';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
@@ -20,8 +19,8 @@ interface FormModel {
}
const model: FormModel = reactive({
userName: 'superadmin',
password: 'admin123'
userName: '',
password: ''
});
const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
@@ -97,7 +96,8 @@ async function handleAccountLogin(account: Account) {
<NButton type="primary" size="large" round block :loading="authStore.loginLoading" @click="handleSubmit">
{{ $t('common.confirm') }}
</NButton>
<div class="flex-y-center justify-between gap-12px">
<!--
<div class="flex-y-center justify-between gap-12px">
<NButton class="flex-1" block @click="toggleLoginModule('code-login')">
{{ $t(loginModuleRecord['code-login']) }}
</NButton>
@@ -110,7 +110,8 @@ async function handleAccountLogin(account: Account) {
<NButton v-for="item in accounts" :key="item.key" type="primary" @click="handleAccountLogin(item)">
{{ item.label }}
</NButton>
</div>
</div>
-->
</NSpace>
</NForm>
</template>

View File

@@ -0,0 +1,134 @@
<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import type { Treaty } from '@elysiajs/eden';
import { client, safeClient } from '@/service/api';
defineOptions({ name: 'EditBankCard' });
type Data = Treaty.Data<typeof client.api.admin.bank_account.get>['data'][number];
const props = defineProps<{
data: Data;
}>();
const emit = defineEmits<{
(e: 'close'): void;
}>();
const formRef = useTemplateRef<FormInst | null>('formRef');
const form = ref({
accountName: props.data.accountName,
bankName: props.data.bankName,
bankCode: props.data.bankCode,
riskStatus: props.data.riskStatus,
isVerified: props.data.isVerified || false
});
const riskStatusOptions = [
{ label: '低风险', value: 'low' },
{ label: '中风险', value: 'medium' },
{ label: '高风险', value: 'high' }
];
const rules: FormRules = {
accountName: [
{
required: true,
message: '请输入持卡人姓名',
trigger: ['blur', 'input']
},
{
min: 2,
max: 50,
message: '姓名长度应在2-50个字符之间',
trigger: ['blur', 'input']
}
],
bankName: [
{
required: true,
message: '请输入银行名称',
trigger: ['blur', 'input']
},
{
min: 2,
max: 100,
message: '银行名称长度应在2-100个字符之间',
trigger: ['blur', 'input']
}
],
bankCode: [
{
required: true,
message: '请输入银行编号',
trigger: ['blur', 'input']
}
],
riskStatus: [
{
required: true,
message: '请选择风险等级',
trigger: 'change'
}
]
};
async function handleSubmit() {
formRef.value?.validate(async errors => {
if (!errors) {
const { data } = await safeClient(() =>
client.api.admin.bank_account({ id: props.data.id }).patch({
...form.value
})
);
if (data) {
window.$message?.success('银行卡信息更新成功');
emit('close');
}
}
});
}
</script>
<template>
<NForm
ref="formRef"
:model="form"
:rules="rules"
label-width="100px"
label-placement="left"
require-mark-placement="left"
>
<NFormItem label="持卡人姓名" path="accountName">
<NInput v-model:value="form.accountName" placeholder="请输入持卡人姓名" maxlength="50" show-count />
</NFormItem>
<NFormItem label="银行名称" path="bankName">
<NInput v-model:value="form.bankName" placeholder="请输入银行名称" maxlength="100" show-count />
</NFormItem>
<NFormItem label="银行编号" path="bankCode">
<NInput v-model:value="form.bankCode" placeholder="请输入银行编号" maxlength="50" show-count />
</NFormItem>
<NFormItem label="风险等级" path="riskStatus">
<NSelect v-model:value="form.riskStatus" :options="riskStatusOptions" placeholder="请选择风险等级" />
</NFormItem>
<NFormItem label="是否认证" path="isVerified">
<NSwitch v-model:value="form.isVerified">
<template #checked>已认证</template>
<template #unchecked>未认证</template>
</NSwitch>
</NFormItem>
<NSpace justify="end" class="mt-4">
<NButton @click="$emit('close')">取消</NButton>
<NButton type="primary" @click="handleSubmit">更新银行卡信息</NButton>
</NSpace>
</NForm>
</template>
<style lang="css" scoped></style>

View File

@@ -1,8 +1,9 @@
<script lang="ts" setup>
import { useTemplateRef } from 'vue';
import { h, useTemplateRef } from 'vue';
import { useDialog, useMessage } from 'naive-ui';
import { client, safeClient } from '@/service/api';
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
import Edit from './components/edit.vue';
const dialog = useDialog();
const message = useMessage();
@@ -56,7 +57,7 @@ const columns: TableBaseColumns = [
ghost: true,
size: 'small',
onClick: () => {
tableInst.value?.reload();
handleEdit(row);
}
},
{
@@ -96,6 +97,22 @@ const filterColumns: TableFilterColumns = [
key: 'bankCode'
}
];
function handleEdit(row: any) {
const dialogInstance = dialog.create({
title: '编辑银行卡信息',
content: () =>
h(Edit, {
data: row,
onClose: () => {
dialogInstance.destroy();
tableInst.value?.reload();
}
}),
style: { width: '800px' },
showIcon: false
});
}
</script>
<template>
@@ -106,6 +123,11 @@ const filterColumns: TableFilterColumns = [
:filter-columns="filterColumns"
:fetch-data="fetchData"
:scroll-x="800"
:header-operations="{
add: false,
refresh: true,
columns: true
}"
/>
</template>