liu
13 小时以前 611dd8268e40caa4d97e8954b85b5adaaef99afa
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<script lang="ts" setup>
import type { FormType } from '../data';
import type { HrmTransferApi } from '#/api/hrm/transfer';
 
import { computed, ref } from 'vue';
 
import { useVbenModal } from '#/packages/effects/common-ui/src';
 
import { message } from 'ant-design-vue';
 
import { useVbenForm } from '#/adapter/form';
import { createTransfer, getTransfer, updateTransfer } from '#/api/hrm/transfer';
import { getEmployeeSimpleList } from '#/api/hrm/employee';
import { $t } from '#/locales';
 
import { useFormSchema } from '../data';
 
const emit = defineEmits(['success']);
const formType = ref<FormType>('create');
/** 员工精简列表缓存(选人时用于带出原部门 / 原岗位) */
let employeeCache: any[] = [];
 
const isDetail = computed(() => formType.value === 'detail');
const getTitle = computed(() => {
  if (formType.value === 'detail') {
    return '查看调岗申请';
  }
  return formType.value === 'update' ? '修改调岗申请' : '新增调岗申请';
});
 
/**
 * 根据选中的员工,自动带出原部门 / 原岗位(含 ID,便于后端落库)
 */
async function fillCurrentPosition(employeeId?: number) {
  if (!employeeId) {
    await formApi.setValues({
      currentDeptId: undefined,
      currentDeptName: undefined,
      currentPostId: undefined,
      currentPostName: undefined,
    });
    return;
  }
  if (employeeCache.length === 0) {
    employeeCache = (await getEmployeeSimpleList()) || [];
  }
  const emp = employeeCache.find((item) => item.id === employeeId);
  if (!emp) {
    return;
  }
  await formApi.setValues({
    currentDeptId: emp.deptId,
    currentDeptName: emp.deptName,
    currentPostId: emp.postIds?.[0],
    currentPostName: emp.postName,
  });
}
 
const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    formItemClass: 'col-span-1',
    labelWidth: 100,
  },
  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: [],
  showDefaultActions: false,
  // 选择「调岗人」后,自动带出其当前部门 / 岗位
  async handleValuesChange(values: any, changedFields: string[]) {
    if (changedFields?.includes('userId')) {
      await fillCurrentPosition(values?.userId);
    }
  },
});
 
const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    if (isDetail.value) {
      await modalApi.close();
      return;
    }
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    const data = (await formApi.getValues()) as HrmTransferApi.Transfer;
    try {
      if (data.id) {
        await updateTransfer(data);
      } else {
        await createTransfer(data);
      }
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      return;
    }
    employeeCache = [];
    const data = modalApi.getData<{ formType: FormType; id?: number }>();
    formType.value = data.formType;
    formApi.setState({ schema: useFormSchema(data.formType) });
    formApi.setDisabled(data.formType === 'detail');
    modalApi.setState({ showConfirmButton: data.formType !== 'detail' });
    if (!data?.id) {
      // 新增:清空表单,由用户选择调岗人
      await formApi.setValues({
        userId: undefined,
        currentDeptId: undefined,
        currentDeptName: undefined,
        currentPostId: undefined,
        currentPostName: undefined,
      });
      return;
    }
    modalApi.lock();
    try {
      const transfer = await getTransfer(data.id);
      await formApi.setValues(transfer);
      // 历史数据可能没有原部门/岗位,按调岗人补齐
      if (transfer.userId && !transfer.currentDeptId) {
        await fillCurrentPosition(transfer.userId);
      }
      if (transfer.attachmentList?.length) {
        await formApi.setFieldValue('blobIds', transfer.attachmentList.map(item => ({
          uid: String(item.id),
          name: item.name || '',
          url: item.url || '',
          status: 'done',
          id: item.id,
        })));
      }
    } finally {
      modalApi.unlock();
    }
  },
});
</script>
 
<template>
  <Modal :title="getTitle" class="w-[700px]">
    <Form class="mx-4" />
  </Modal>
</template>