feat: 新增银行管理功能，包括创建和编辑银行的组件及相关逻辑
This commit is contained in:
120
src/views/bank/components/add.vue
Normal file
120
src/views/bank/components/add.vue
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, useTemplateRef } from 'vue';
|
||||||
|
import type { FormInst, FormRules } from 'naive-ui';
|
||||||
|
import { client, safeClient } from '@/service/api';
|
||||||
|
|
||||||
|
defineOptions({ name: 'AddBank' });
|
||||||
|
|
||||||
|
type Body = CommonType.TreatyBody<typeof client.api.admin.bank_account.banks.post>;
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'close'): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const formRef = useTemplateRef<FormInst | null>('formRef');
|
||||||
|
|
||||||
|
const form = ref<Body>({
|
||||||
|
bankCode: '',
|
||||||
|
nameCn: '',
|
||||||
|
isActive: true,
|
||||||
|
sortOrder: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
bankCode: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入银行代码',
|
||||||
|
trigger: ['blur', 'input']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^[A-Z0-9_]+$/,
|
||||||
|
message: '银行代码只能包含大写字母、数字和下划线',
|
||||||
|
trigger: ['blur', 'input']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
nameCn: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入银行中文名称',
|
||||||
|
trigger: ['blur', 'input']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
min: 2,
|
||||||
|
max: 100,
|
||||||
|
message: '银行名称长度应在2-100个字符之间',
|
||||||
|
trigger: ['blur', 'input']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
sortOrder: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
type: 'number',
|
||||||
|
message: '请输入排序顺序',
|
||||||
|
trigger: ['blur', 'change']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
async function handleSubmit() {
|
||||||
|
formRef.value?.validate(async errors => {
|
||||||
|
if (!errors) {
|
||||||
|
const { data } = await safeClient(() =>
|
||||||
|
client.api.admin.bank_account.banks.post({
|
||||||
|
...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="bankCode">
|
||||||
|
<NInput
|
||||||
|
v-model:value="form.bankCode"
|
||||||
|
placeholder="请输入银行代码（如：ICBC）"
|
||||||
|
maxlength="50"
|
||||||
|
:input-props="{ style: 'text-transform: uppercase' }"
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NFormItem label="银行名称" path="nameCn">
|
||||||
|
<NInput v-model:value="form.nameCn" placeholder="请输入银行中文名称" maxlength="100" show-count />
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NFormItem label="排序顺序" path="sortOrder">
|
||||||
|
<NInputNumber v-model:value="form.sortOrder" :min="0" :step="1" placeholder="请输入排序顺序" class="w-full">
|
||||||
|
<template #suffix>
|
||||||
|
<span class="text-12px text-gray-400">数字越小越靠前</span>
|
||||||
|
</template>
|
||||||
|
</NInputNumber>
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NFormItem label="是否启用" path="isActive">
|
||||||
|
<NSwitch v-model:value="form.isActive">
|
||||||
|
<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>
|
||||||
108
src/views/bank/components/edit.vue
Normal file
108
src/views/bank/components/edit.vue
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<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: 'EditBank' });
|
||||||
|
|
||||||
|
type Data = Treaty.Data<typeof client.api.admin.bank_account.banks.get>['data'][number];
|
||||||
|
type Body = CommonType.TreatyBody<typeof client.api.admin.bank_account.banks>;
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
data: Data;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'close'): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const formRef = useTemplateRef<FormInst | null>('formRef');
|
||||||
|
|
||||||
|
const form = ref<Body>({
|
||||||
|
nameCn: props.data.nameCn,
|
||||||
|
isActive: props.data.isActive,
|
||||||
|
sortOrder: props.data.sortOrder
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
nameCn: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入银行中文名称',
|
||||||
|
trigger: ['blur', 'input']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
min: 2,
|
||||||
|
max: 100,
|
||||||
|
message: '银行名称长度应在2-100个字符之间',
|
||||||
|
trigger: ['blur', 'input']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
sortOrder: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
type: 'number',
|
||||||
|
message: '请输入排序顺序',
|
||||||
|
trigger: ['blur', 'change']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
async function handleSubmit() {
|
||||||
|
formRef.value?.validate(async errors => {
|
||||||
|
if (!errors) {
|
||||||
|
const { data } = await safeClient(() =>
|
||||||
|
client.api.admin.bank_account.banks({ 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="银行代码">
|
||||||
|
<NInput :value="data.bankCode" disabled placeholder="银行代码不可修改" />
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NFormItem label="银行名称" path="nameCn">
|
||||||
|
<NInput v-model:value="form.nameCn" placeholder="请输入银行中文名称" maxlength="100" show-count />
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NFormItem label="排序顺序" path="sortOrder">
|
||||||
|
<NInputNumber v-model:value="form.sortOrder" :min="0" :step="1" placeholder="请输入排序顺序" class="w-full">
|
||||||
|
<template #suffix>
|
||||||
|
<span class="text-12px text-gray-400">数字越小越靠前</span>
|
||||||
|
</template>
|
||||||
|
</NInputNumber>
|
||||||
|
</NFormItem>
|
||||||
|
|
||||||
|
<NFormItem label="是否启用" path="isActive">
|
||||||
|
<NSwitch v-model:value="form.isActive">
|
||||||
|
<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>
|
||||||
@@ -1,9 +1,11 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useTemplateRef } from 'vue';
|
import { h, useTemplateRef } from 'vue';
|
||||||
import { useDateFormat } from '@vueuse/core';
|
import { useDateFormat } from '@vueuse/core';
|
||||||
import { useDialog, useMessage } from 'naive-ui';
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
import { client, safeClient } from '@/service/api';
|
import { client, safeClient } from '@/service/api';
|
||||||
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
||||||
|
import Add from './components/add.vue';
|
||||||
|
import Edit from './components/edit.vue';
|
||||||
|
|
||||||
const dialog = useDialog();
|
const dialog = useDialog();
|
||||||
const message = useMessage();
|
const message = useMessage();
|
||||||
@@ -32,10 +34,16 @@ const columns: TableBaseColumns = [
|
|||||||
{
|
{
|
||||||
title: '是否启用',
|
title: '是否启用',
|
||||||
key: 'isActive',
|
key: 'isActive',
|
||||||
|
width: 100,
|
||||||
render(row: any) {
|
render(row: any) {
|
||||||
return row.isActive ? '是' : '否';
|
return row.isActive ? '是' : '否';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '排序',
|
||||||
|
key: 'sortOrder',
|
||||||
|
width: 80
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
key: 'createdAt',
|
key: 'createdAt',
|
||||||
@@ -52,9 +60,10 @@ const columns: TableBaseColumns = [
|
|||||||
{
|
{
|
||||||
contentText: '编辑',
|
contentText: '编辑',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
|
ghost: true,
|
||||||
size: 'small',
|
size: 'small',
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
tableInst.value?.reload();
|
handleEdit(row);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -69,13 +78,9 @@ const columns: TableBaseColumns = [
|
|||||||
negativeText: '否',
|
negativeText: '否',
|
||||||
content: '确认删除该银行信息？',
|
content: '确认删除该银行信息？',
|
||||||
onPositiveClick: async () => {
|
onPositiveClick: async () => {
|
||||||
safeClient(() =>
|
safeClient(() => client.api.admin.bank_account.banks({ id: row.id }).delete());
|
||||||
client.api.admin.deposit.reject({ orderId: row.id as string }).post({
|
|
||||||
reviewNote: '管理员拒绝充值'
|
|
||||||
})
|
|
||||||
);
|
|
||||||
// tableInst.value?.reload();
|
|
||||||
message.success('删除成功');
|
message.success('删除成功');
|
||||||
|
tableInst.value?.reload();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -95,7 +100,35 @@ const filterColumns: TableFilterColumns = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
function handleAdd() {}
|
function handleAdd() {
|
||||||
|
const dialogInstance = dialog.create({
|
||||||
|
title: '创建银行',
|
||||||
|
content: () =>
|
||||||
|
h(Add, {
|
||||||
|
onClose: () => {
|
||||||
|
dialogInstance.destroy();
|
||||||
|
tableInst.value?.reload();
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
style: { width: '600px' },
|
||||||
|
showIcon: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function handleEdit(row) {
|
||||||
|
const dialogInstance = dialog.create({
|
||||||
|
title: '编辑银行',
|
||||||
|
content: () =>
|
||||||
|
h(Edit, {
|
||||||
|
data: row,
|
||||||
|
onClose: () => {
|
||||||
|
dialogInstance.destroy();
|
||||||
|
tableInst.value?.reload();
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
style: { width: '600px' },
|
||||||
|
showIcon: false
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
Reference in New Issue
Block a user