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
<script lang="ts" setup>
  import type { SystemApprovalConfigApi } from '#/api/system/approval-config';
 
  import { ref } from 'vue';
 
  import { useVbenModal } from '@vben/common-ui';
 
  import { message } from 'ant-design-vue';
 
  import { useVbenForm } from '#/adapter/form';
  import { saveApprovalConfig } from '#/api/system/approval-config';
 
  import { useConfigFormSchema } from '../data';
 
  const emit = defineEmits(['success']);
 
  const currentRow = ref<SystemApprovalConfigApi.ApprovalConfig>();
 
  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
        class: 'w-full',
      },
      formItemClass: 'col-span-1',
      labelWidth: 100,
    },
    wrapperClass: 'grid-cols-1',
    layout: 'horizontal',
    schema: useConfigFormSchema(),
    showDefaultActions: false,
  });
 
  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      const values = await formApi.getValues();
      try {
        await saveApprovalConfig({
          id: currentRow.value?.id,
          bizType: values.bizType,
          bizName: values.bizName,
          approvalEnabled: values.approvalEnabled,
          userIds: values.userIds ?? [],
          remark: values.remark,
        });
        await modalApi.close();
        emit('success');
        message.success('保存成功');
      } finally {
        modalApi.unlock();
      }
    },
    async onOpenChange(isOpen: boolean) {
      if (!isOpen) {
        currentRow.value = undefined;
        return;
      }
      const data = modalApi.getData<SystemApprovalConfigApi.ApprovalConfig>();
      currentRow.value = data;
      await formApi.setValues({
        bizName: data.bizName,
        bizType: data.bizType,
        approvalEnabled: data.approvalEnabled ?? false,
        userIds: data.userIds ?? [],
        remark: data.remark,
      });
    },
  });
</script>
 
<template>
  <Modal title="审批配置" class="w-2/5">
    <Form class="mx-4" />
  </Modal>
</template>