feat: 新增银行管理功能，包括创建和编辑银行的组件及相关逻辑

2026-01-08 20:25:15 +07:00
parent c18dfae0ae
commit af4c55952e
3 changed files with 270 additions and 9 deletions
--- a/src/views/bank/components/edit.vue
+++ 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>