ApproveReason.vue
2.58 KB
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
<template>
<BasicModal
v-bind="$attrs"
destroyOnClose
@register="register"
title="申请原因"
:helpMessage="['请填写申请理由']"
:bodyStyle="{ height: '200px' }"
@ok="handleOk"
:z-index="9999"
>
<a-textarea
:value="input"
@input="handleInput"
:rows="7"
placeholder="请输入申请理由"
/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { defHttp } from '/@/utils/http/axios';
import { message } from 'ant-design-vue';
const emit = defineEmits(['success']);
const input = ref('');
const requestData = ref();
const [register, { closeModal }] = useModalInner(async (data) => {
requestData.value = data;
});
// 手动处理输入事件
const handleInput = (e: Event) => {
const target = e.target as HTMLTextAreaElement;
input.value = target.value;
};
async function handleOk() {
if (!input.value.trim()) {
message.warning('请输入申请理由');
return;
}
try {
// 构建请求参数
const params = {
...requestData.value.fieldValues,
applyRemark: input.value,
dateTime: requestData.value.dateTime,
userId: requestData.value.userId
};
// 使用动态的 API URL，如果没有提供则使用默认的考勤申请接口
const apiUrl = requestData.value.apiUrl || '/order/erp/users/oldAttendance/applyEditFields';
// 发送申请请求
await defHttp.post({
url: apiUrl,
data: params
});
message.success('申请提交成功');
emit('success');
// 清空输入框
input.value = '';
setTimeout(() => {
closeModal();
}, 50);
} catch (error) {
console.error('申请提交失败:', error);
// 关闭弹框，让用户能看到错误信息
closeModal();
// 延迟显示错误信息，确保弹框已关闭
setTimeout(() => {
if (error?.response?.data?.message) {
message.error(error.response.data.message);
} else {
message.error('申请提交失败，请稍后重试');
}
}, 100);
}
}
</script>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'ApproveReason'
});
</script>