liu
2026-09-29 982c97ab82f3beb1b4febcf014562eda34b9fc05
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script lang="ts" setup>
import type { ArchiveBorrowApi } from '#/api/archive/borrow';
 
import { ref } from 'vue';
 
import { useVbenModal } from '@vben/common-ui';
 
import { message } from 'ant-design-vue';
 
import { useVbenForm } from '#/adapter/form';
import { returnBorrow } from '#/api/archive/borrow';
 
defineOptions({ name: 'ArchiveBorrowReturnForm' });
 
const emit = defineEmits(['success']);
 
/** 当前归还的借阅单 */
const current = ref<ArchiveBorrowApi.Borrow>();
 
const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  wrapperClass: 'grid-cols-1',
  layout: 'vertical',
  schema: [
    {
      fieldName: 'returnRemark',
      label: '归还备注',
      component: 'Textarea',
      componentProps: {
        rows: 3,
        placeholder: '如归还时档案完好、是否有缺页等',
      },
    },
  ],
  showDefaultActions: false,
});
 
const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const values = (await formApi.getValues()) as { returnRemark?: string };
    modalApi.lock();
    try {
      await returnBorrow({
        id: current.value!.id!,
        returnRemark: values.returnRemark,
      });
      await modalApi.close();
      emit('success');
      message.success('归还登记成功');
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      current.value = undefined;
      return;
    }
    current.value = modalApi.getData<ArchiveBorrowApi.Borrow>();
    await formApi.resetForm();
  },
});
</script>
 
<template>
  <Modal title="归还登记" class="w-1/2">
    <div class="mx-3 mb-3 text-sm text-gray-600">
      <p>
        借阅单号:{{ current?.no }} 档案:{{ current?.documentNo }}
        {{ current?.documentTitle }}
      </p>
      <p>
        借阅人:{{ current?.borrowerName }} 归还期限:{{ current?.returnDeadline }}
      </p>
    </div>
    <Form class="mx-3" />
  </Modal>
</template>