|
|
@@ -1,15 +1,14 @@
|
|
1
|
1
|
<script setup lang="ts">
|
|
2
|
2
|
import type { Flow } from '#/api/workflow/instance/model';
|
|
3
|
3
|
|
|
4
|
|
-import { computed, onMounted, ref } from 'vue';
|
|
|
4
|
+import { computed, ref } from 'vue';
|
|
5
|
5
|
|
|
6
|
6
|
import { VbenAvatar } from '@vben/common-ui';
|
|
7
|
7
|
import { DictEnum } from '@vben/constants';
|
|
8
|
8
|
import { cn } from '@vben/utils';
|
|
9
|
9
|
|
|
10
|
|
-import { Message, User } from '@element-plus/icons-vue';
|
|
11
|
|
-import { ElAvatar, ElTimelineItem } from 'element-plus';
|
|
12
|
|
-// import { ossInfo } from '#/api/system/oss';
|
|
|
10
|
+import { Message, User, Timer, Document } from '@element-plus/icons-vue';
|
|
|
11
|
+import { ElAvatar, ElTimelineItem, ElTag } from 'element-plus';
|
|
13
|
12
|
import { renderDict } from '#/utils/render';
|
|
14
|
13
|
|
|
15
|
14
|
defineOptions({
|
|
|
@@ -19,7 +18,6 @@ defineOptions({
|
|
19
|
18
|
const props = defineProps<{ item: Flow }>();
|
|
20
|
19
|
|
|
21
|
20
|
interface AttachmentInfo {
|
|
22
|
|
- ossId: string;
|
|
23
|
21
|
url: string;
|
|
24
|
22
|
name: string;
|
|
25
|
23
|
}
|
|
|
@@ -27,22 +25,43 @@ interface AttachmentInfo {
|
|
27
|
25
|
/**
|
|
28
|
26
|
* 处理附件信息
|
|
29
|
27
|
*/
|
|
30
|
|
-const attachmentInfo = ref<AttachmentInfo[]>([]);
|
|
31
|
|
-onMounted(async () => {
|
|
32
|
|
- if (!props.item.ext) {
|
|
33
|
|
- return null;
|
|
34
|
|
- }
|
|
35
|
|
- // const resp = await ossInfo(props.item.ext.split(','));
|
|
36
|
|
- // attachmentInfo.value = resp.map((item) => ({
|
|
37
|
|
- // ossId: item.ossId,
|
|
38
|
|
- // url: item.url,
|
|
39
|
|
- // name: item.originalName,
|
|
40
|
|
- // }));
|
|
|
28
|
+const processAttachments = computed(() => {
|
|
|
29
|
+ const records = props.item.workOrderProcessRecords?.[0];
|
|
|
30
|
+ if (!records?.attachments) return [];
|
|
|
31
|
+ const names = records.attachments.split(',');
|
|
|
32
|
+ const urls = records.attachmentsUrl || [];
|
|
|
33
|
+ return names.map((name, index) => ({
|
|
|
34
|
+ name,
|
|
|
35
|
+ url: urls[index] || ''
|
|
|
36
|
+ }));
|
|
|
37
|
+});
|
|
|
38
|
+
|
|
|
39
|
+const delayAttachments = computed(() => {
|
|
|
40
|
+ const delayData = props.item.workOrderDelay?.[0];
|
|
|
41
|
+ if (!delayData?.applyFile) return [];
|
|
|
42
|
+ const names = delayData.applyFile.split(',');
|
|
|
43
|
+ const urls = delayData.applyFileUrl || [];
|
|
|
44
|
+ return names.map((name, index) => ({
|
|
|
45
|
+ name,
|
|
|
46
|
+ url: urls[index] || ''
|
|
|
47
|
+ }));
|
|
41
|
48
|
});
|
|
42
|
49
|
|
|
43
|
50
|
const isMultiplePerson = computed(
|
|
44
|
51
|
() => props.item.operatorName?.split(',').length > 1,
|
|
45
|
52
|
);
|
|
|
53
|
+
|
|
|
54
|
+// 处理审批状态显示
|
|
|
55
|
+function renderApproveStatus(status: number) {
|
|
|
56
|
+ const statusMap = {
|
|
|
57
|
+ 0: { label: '未审批', type: 'info' },
|
|
|
58
|
+ 1: { label: '已同意', type: 'success' },
|
|
|
59
|
+ 2: { label: '已拒绝', type: 'danger' },
|
|
|
60
|
+ 3: { label: '已废除', type: 'warning' },
|
|
|
61
|
+ };
|
|
|
62
|
+
|
|
|
63
|
+ return statusMap[status] || { label: '未知状态', type: 'default' };
|
|
|
64
|
+}
|
|
46
|
65
|
</script>
|
|
47
|
66
|
|
|
48
|
67
|
<template>
|
|
|
@@ -77,7 +96,7 @@ const isMultiplePerson = computed(
|
|
77
|
96
|
<!-- 如果昵称中带, 这里的处理是不准确的 -->
|
|
78
|
97
|
<div
|
|
79
|
98
|
:class="cn('bg-foreground/5 flex items-center rounded-full', 'p-1')"
|
|
80
|
|
- v-for="(name, index) in item.approveName.split(',')"
|
|
|
99
|
+ v-for="(name, index) in props.item.approveName.split(',')"
|
|
81
|
100
|
:key="index">
|
|
82
|
101
|
<span class="px-1">{{ name }}</span>
|
|
83
|
102
|
</div>
|
|
|
@@ -85,29 +104,106 @@ const isMultiplePerson = computed(
|
|
85
|
104
|
<div>{{ props.item.operatorName }}</div>
|
|
86
|
105
|
|
|
87
|
106
|
<div>{{ props.item.operationTime }}</div>
|
|
|
107
|
+
|
|
|
108
|
+ <!-- 处理工单内容 -->
|
|
|
109
|
+ <div v-if="props.item.operationType === 'PROCESS' && (props.item.workOrderProcessRecords?.[0]?.processContent || processAttachments.length > 0)" class="mt-2 rounded-lg border p-3">
|
|
|
110
|
+ <div v-if="props.item.workOrderProcessRecords?.[0]?.processContent" class="flex flex-wrap gap-2">
|
|
|
111
|
+ <div class="flex items-center gap-1 font-medium">
|
|
|
112
|
+ <el-icon :size="16"><Message /></el-icon>
|
|
|
113
|
+ <span>处理内容:</span>
|
|
|
114
|
+ </div>
|
|
|
115
|
+ <div class="text-foreground/75 break-all flex-1">{{ props.item.workOrderProcessRecords[0].processContent }}</div>
|
|
|
116
|
+ </div>
|
|
|
117
|
+ <div v-if="processAttachments.length > 0" class="mt-2 flex flex-wrap gap-2">
|
|
|
118
|
+ <div class="font-medium">附件:</div>
|
|
|
119
|
+ <div class="flex flex-wrap gap-2">
|
|
|
120
|
+ <a
|
|
|
121
|
+ v-for="(attachment, index) in processAttachments"
|
|
|
122
|
+ :key="index"
|
|
|
123
|
+ :href="attachment.url"
|
|
|
124
|
+ class="text-primary"
|
|
|
125
|
+ target="_blank"
|
|
|
126
|
+ >
|
|
|
127
|
+ <div class="flex items-center gap-1">
|
|
|
128
|
+ <span class="icon-[mingcute--attachment-line] size-[14px]"></span>
|
|
|
129
|
+ <span>{{ attachment.name }}</span>
|
|
|
130
|
+ </div>
|
|
|
131
|
+ </a>
|
|
|
132
|
+ </div>
|
|
|
133
|
+ </div>
|
|
|
134
|
+ </div>
|
|
|
135
|
+
|
|
|
136
|
+ <!-- 申请延时内容 -->
|
|
|
137
|
+ <div v-else-if="props.item.operationType === 'APPLY_DELAY' && props.item.workOrderDelay?.[0] && (props.item.workOrderDelay[0].delayReason || props.item.workOrderDelay[0].delayDuration || delayAttachments.length > 0)" class="mt-2 rounded-lg border p-3">
|
|
|
138
|
+ <div v-if="props.item.workOrderDelay[0].delayReason" class="flex flex-wrap gap-2">
|
|
|
139
|
+ <div class="flex items-center gap-1 font-medium">
|
|
|
140
|
+ <el-icon :size="16"><Message /></el-icon>
|
|
|
141
|
+ <span>延时原因:</span>
|
|
|
142
|
+ </div>
|
|
|
143
|
+ <div class="text-foreground/75 break-all flex-1">{{ props.item.workOrderDelay[0].delayReason }}</div>
|
|
|
144
|
+ </div>
|
|
|
145
|
+ <div v-if="props.item.workOrderDelay[0].delayDuration" class="mt-2 flex flex-wrap gap-2">
|
|
|
146
|
+ <div class="flex items-center gap-1 font-medium">
|
|
|
147
|
+ <el-icon :size="16"><Timer /></el-icon>
|
|
|
148
|
+ <span>延时时长:</span>
|
|
|
149
|
+ </div>
|
|
|
150
|
+ <div class="text-foreground/75">{{ props.item.workOrderDelay[0].delayDuration }} 小时</div>
|
|
|
151
|
+ </div>
|
|
|
152
|
+ <div v-if="delayAttachments.length > 0" class="mt-2 flex flex-wrap gap-2">
|
|
|
153
|
+ <div class="font-medium">附件:</div>
|
|
|
154
|
+ <div class="flex flex-wrap gap-2">
|
|
|
155
|
+ <a
|
|
|
156
|
+ v-for="(attachment, index) in delayAttachments"
|
|
|
157
|
+ :key="index"
|
|
|
158
|
+ :href="attachment.url"
|
|
|
159
|
+ class="text-primary"
|
|
|
160
|
+ target="_blank"
|
|
|
161
|
+ >
|
|
|
162
|
+ <div class="flex items-center gap-1">
|
|
|
163
|
+ <span class="icon-[mingcute--attachment-line] size-[14px]"></span>
|
|
|
164
|
+ <span>{{ attachment.name }}</span>
|
|
|
165
|
+ </div>
|
|
|
166
|
+ </a>
|
|
|
167
|
+ </div>
|
|
|
168
|
+ </div>
|
|
|
169
|
+ </div>
|
|
|
170
|
+
|
|
|
171
|
+ <!-- 审核延时内容 -->
|
|
|
172
|
+ <div v-else-if="props.item.operationType === 'AUDIT_DELAY' && props.item.workOrderDelay?.[0] && (props.item.workOrderDelay[0].approveRemark || props.item.workOrderDelay[0].approveStatus !== undefined || props.item.workOrderDelay[0].approveTime)" class="mt-2 rounded-lg border p-3">
|
|
|
173
|
+ <div v-if="props.item.workOrderDelay[0].approveRemark" class="flex flex-wrap gap-2">
|
|
|
174
|
+ <div class="flex items-center gap-1 font-medium">
|
|
|
175
|
+ <el-icon :size="16"><Message /></el-icon>
|
|
|
176
|
+ <span>审批意见:</span>
|
|
|
177
|
+ </div>
|
|
|
178
|
+ <div class="text-foreground/75 break-all flex-1">{{ props.item.workOrderDelay[0].approveRemark }}</div>
|
|
|
179
|
+ </div>
|
|
|
180
|
+ <div v-if="props.item.workOrderDelay[0].approveStatus !== undefined" class="mt-2 flex flex-wrap gap-2">
|
|
|
181
|
+ <div class="flex items-center gap-1 font-medium">
|
|
|
182
|
+ <el-icon :size="16"><User /></el-icon>
|
|
|
183
|
+ <span>审核状态:</span>
|
|
|
184
|
+ </div>
|
|
|
185
|
+ <ElTag :type="renderApproveStatus(props.item.workOrderDelay[0].approveStatus).type">
|
|
|
186
|
+ {{ renderApproveStatus(props.item.workOrderDelay[0].approveStatus).label }}
|
|
|
187
|
+ </ElTag>
|
|
|
188
|
+ </div>
|
|
|
189
|
+ <div v-if="props.item.workOrderDelay[0].approveTime" class="mt-2 flex flex-wrap gap-2">
|
|
|
190
|
+ <div class="flex items-center gap-1 font-medium">
|
|
|
191
|
+ <el-icon :size="16"><Timer /></el-icon>
|
|
|
192
|
+ <span>新截止时间:</span>
|
|
|
193
|
+ </div>
|
|
|
194
|
+ <div class="text-foreground/75">{{ props.item.workOrderDelay[0].approveTime }}</div>
|
|
|
195
|
+ </div>
|
|
|
196
|
+ </div>
|
|
|
197
|
+
|
|
|
198
|
+ <!-- 原有消息内容 -->
|
|
88
|
199
|
<div
|
|
89
|
|
- v-if="props.item.message"
|
|
90
|
|
- class="rounded-lg border px-3 py-1"
|
|
|
200
|
+ v-if="props.item.message && !['PROCESS', 'APPLY_DELAY', 'AUDIT_DELAY'].includes(props.item.operationType)"
|
|
|
201
|
+ class="mt-2 rounded-lg border px-3 py-1"
|
|
91
|
202
|
:class="cn('flex gap-2')"
|
|
92
|
203
|
>
|
|
93
|
204
|
<Message />
|
|
94
|
205
|
<div class="text-foreground/75 break-all">{{ props.item.message }}</div>
|
|
95
|
206
|
</div>
|
|
96
|
|
- <div v-if="attachmentInfo.length > 0" class="flex flex-wrap gap-2">
|
|
97
|
|
- <!-- 这里下载的文件名不是原始文件名 -->
|
|
98
|
|
- <a
|
|
99
|
|
- v-for="attachment in attachmentInfo"
|
|
100
|
|
- :key="attachment.ossId"
|
|
101
|
|
- :href="attachment.url"
|
|
102
|
|
- class="text-primary"
|
|
103
|
|
- target="_blank"
|
|
104
|
|
- >
|
|
105
|
|
- <div class="flex items-center gap-1">
|
|
106
|
|
- <span class="icon-[mingcute--attachment-line] size-[18px]"></span>
|
|
107
|
|
- <span>{{ attachment.name }}</span>
|
|
108
|
|
- </div>
|
|
109
|
|
- </a>
|
|
110
|
|
- </div>
|
|
111
|
207
|
</div>
|
|
112
|
208
|
</ElTimelineItem>
|
|
113
|
209
|
</template>
|