From af4c55952e2952eea8aad55ee7136aac89c7c375 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Thu, 8 Jan 2026 20:25:15 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=93=B6=E8=A1=8C?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8C=85=E6=8B=AC?=
 =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=92=8C=E7=BC=96=E8=BE=91=E9=93=B6=E8=A1=8C?=
 =?UTF-8?q?=E7=9A=84=E7=BB=84=E4=BB=B6=E5=8F=8A=E7=9B=B8=E5=85=B3=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bank/components/add.vue  | 120 +++++++++++++++++++++++++++++
 src/views/bank/components/edit.vue | 108 ++++++++++++++++++++++++++
 src/views/bank/index.vue           |  51 +++++++++---
 3 files changed, 270 insertions(+), 9 deletions(-)
 create mode 100644 src/views/bank/components/add.vue
 create mode 100644 src/views/bank/components/edit.vue
diff --git a/src/views/bank/components/add.vue b/src/views/bank/components/add.vue
new file mode 100644
index 0000000..e36293d
--- /dev/null
+++ b/src/views/bank/components/add.vue
@@ -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>
diff --git a/src/views/bank/components/edit.vue b/src/views/bank/components/edit.vue
new file mode 100644
index 0000000..952235d
--- /dev/null
+++ b/src/views/bank/components/edit.vue
@@ -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>
diff --git a/src/views/bank/index.vue b/src/views/bank/index.vue
index eb4191e..d81179c 100644
--- a/src/views/bank/index.vue
+++ b/src/views/bank/index.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { useTemplateRef } from 'vue';
+import { h, useTemplateRef } from 'vue';
 import { useDateFormat } from '@vueuse/core';
 import { useDialog, useMessage } from 'naive-ui';
 import { client, safeClient } from '@/service/api';
 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 message = useMessage();
@@ -32,10 +34,16 @@ const columns: TableBaseColumns = [
   {
     title: '是否启用',
     key: 'isActive',
+    width: 100,
     render(row: any) {
       return row.isActive ? '是' : '否';
     }
   },
+  {
+    title: '排序',
+    key: 'sortOrder',
+    width: 80
+  },
   {
     title: '创建时间',
     key: 'createdAt',
@@ -52,9 +60,10 @@ const columns: TableBaseColumns = [
       {
         contentText: '编辑',
         type: 'primary',
+        ghost: true,
         size: 'small',
         onClick: () => {
-          tableInst.value?.reload();
+          handleEdit(row);
         }
       },
       {
@@ -69,13 +78,9 @@ const columns: TableBaseColumns = [
             negativeText: '否',
             content: '确认删除该银行信息？',
             onPositiveClick: async () => {
-              safeClient(() =>
-                client.api.admin.deposit.reject({ orderId: row.id as string }).post({
-                  reviewNote: '管理员拒绝充值'
-                })
-              );
-              // tableInst.value?.reload();
+              safeClient(() => client.api.admin.bank_account.banks({ id: row.id }).delete());
               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>
 
 <template>
