|
|
@@ -21,7 +21,7 @@
|
|
|
<div class="step-info">
|
|
|
<div class="step-title">{{ step.title }}</div>
|
|
|
<div class="step-desc">{{ step.desc }}</div>
|
|
|
- <div class="step-time">{{ step.time }}</div>
|
|
|
+ <div v-if="index <= currentStep" class="step-time">{{ step.time }}</div>
|
|
|
</div>
|
|
|
<div v-if="index < progressSteps.length - 1" class="step-line" :class="{ active: index < currentStep }"></div>
|
|
|
</div>
|
|
|
@@ -126,24 +126,119 @@
|
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
-import { ArrowLeft, Document, Search, CircleCheck, Picture } from '@element-plus/icons-vue';
|
|
|
-import { getOrderInfo, getOrderProducts } from '@/api/pc/enterprise/order';
|
|
|
+import { ArrowLeft, Document, User, CircleCheck, Picture } from '@element-plus/icons-vue';
|
|
|
+import { getOrderInfo, getOrderProducts, getOrderFlowNodes } from '@/api/pc/enterprise/order';
|
|
|
import { getAddressInfo } from '@/api/pc/enterprise/address';
|
|
|
import { getInvoiceList } from '@/api/pc/enterprise/invoice';
|
|
|
+import { getContactInfo } from '@/api/pc/organization/index';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
+import type { OrderCustomerFlowNodeLink } from '@/api/pc/enterprise/orderTypes';
|
|
|
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
+
|
|
|
+// 格式化时间为 "2026/3/17 上午10:49" 格式
|
|
|
+const formatTime = (timeStr: string): string => {
|
|
|
+ if (!timeStr) return '';
|
|
|
+ const date = new Date(timeStr);
|
|
|
+ if (isNaN(date.getTime())) return timeStr;
|
|
|
+ return date.toLocaleString('zh-CN', {
|
|
|
+ year: 'numeric',
|
|
|
+ month: 'numeric',
|
|
|
+ day: 'numeric',
|
|
|
+ hour: 'numeric',
|
|
|
+ minute: '2-digit',
|
|
|
+ hour12: true
|
|
|
+ });
|
|
|
+};
|
|
|
const orderId = ref<any>(0);
|
|
|
const currentStep = ref(1);
|
|
|
const loading = ref(false);
|
|
|
|
|
|
-const progressSteps = ref([
|
|
|
- { title: '提交审核', icon: Document, desc: '采购一部提交订单审核', time: '2025/02/10 15:51:21' },
|
|
|
- { title: '审核中', icon: Search, desc: '采购一部提交订单审批', time: '2025/02/10 15:51:21' },
|
|
|
- { title: '审核完成', icon: CircleCheck, desc: '交易完成', time: '2025/02/10 15:51:21' }
|
|
|
+const progressSteps = ref<{ title: string; icon: any; desc: string; time: string; reviewStatus?: number }[]>([
|
|
|
+ { title: '提交订单', icon: Document, desc: '订单已提交', time: '', reviewStatus: 2 },
|
|
|
+ { title: '完成', icon: CircleCheck, desc: '交易完成', time: '', reviewStatus: 0 }
|
|
|
]);
|
|
|
|
|
|
+// 订单时间信息(用于流程节点时间显示)
|
|
|
+const orderTimeInfo = reactive({
|
|
|
+ createTime: '', // 订单创建时间(提交订单节点)
|
|
|
+ updateTime: '' // 订单更新时间(完成节点)
|
|
|
+});
|
|
|
+
|
|
|
+// 根据 handlerId(逗号分隔的多个ID)解析审批人名称
|
|
|
+// 单人:返回姓名;多人:返回"xx或xx审核"
|
|
|
+const resolveHandlerName = async (handlerId: string): Promise<string> => {
|
|
|
+ if (!handlerId) return '';
|
|
|
+ const ids = handlerId.split(',').map((s) => s.trim()).filter(Boolean);
|
|
|
+ if (ids.length === 0) return '';
|
|
|
+ try {
|
|
|
+ const results = await Promise.all(
|
|
|
+ ids.map((id) => getContactInfo(String(id)).catch(() => null))
|
|
|
+ );
|
|
|
+ const names = results
|
|
|
+ .map((res: any) => res?.data?.contactName || '')
|
|
|
+ .filter(Boolean);
|
|
|
+ if (names.length === 0) return '';
|
|
|
+ if (names.length === 1) return names[0];
|
|
|
+ return names.join('或') + '审核';
|
|
|
+ } catch {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+// 加载审批流程节点
|
|
|
+const loadFlowNodes = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getOrderFlowNodes(orderId.value) as any;
|
|
|
+ if (res.code === 200) {
|
|
|
+ const apiNodes: OrderCustomerFlowNodeLink[] = res.data || [];
|
|
|
+
|
|
|
+ // 提交订单节点:显示订单的 createTime
|
|
|
+ const steps: { title: string; icon: any; desc: string; time: string; reviewStatus?: number }[] = [
|
|
|
+ { title: '提交订单', icon: Document, desc: '订单已提交', time: formatTime(orderTimeInfo.createTime), reviewStatus: 2 }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 并行解析所有节点的审批人名称
|
|
|
+ const handlerNames = await Promise.all(
|
|
|
+ apiNodes.map((node) => resolveHandlerName(node.handlerId || node.handlerName || ''))
|
|
|
+ );
|
|
|
+
|
|
|
+ apiNodes.forEach((node, idx) => {
|
|
|
+ steps.push({
|
|
|
+ title: node.nodeName || '审批',
|
|
|
+ icon: User,
|
|
|
+ desc: handlerNames[idx] || '',
|
|
|
+ time: formatTime(node.updateTime || ''),
|
|
|
+ reviewStatus: node.reviewStatus ?? 0
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 完成节点:显示订单的 updateTime
|
|
|
+ steps.push({ title: '完成', icon: CircleCheck, desc: '交易完成', time: formatTime(orderTimeInfo.updateTime), reviewStatus: 0 });
|
|
|
+
|
|
|
+ progressSteps.value = steps;
|
|
|
+
|
|
|
+ // 计算当前步骤:找最后一个已处理节点的索引(reviewStatus > 0)
|
|
|
+ let lastActiveIndex = 0;
|
|
|
+ steps.forEach((step, idx) => {
|
|
|
+ if (step.reviewStatus && step.reviewStatus > 0) {
|
|
|
+ lastActiveIndex = idx;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 若所有中间节点均已完成(reviewStatus === 2),则激活结束节点
|
|
|
+ const middleNodes = steps.slice(1, steps.length - 1);
|
|
|
+ if (middleNodes.length > 0 && middleNodes.every((s) => s.reviewStatus === 2)) {
|
|
|
+ lastActiveIndex = steps.length - 1;
|
|
|
+ }
|
|
|
+ currentStep.value = lastActiveIndex;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载流程节点失败', error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
const productList = ref<any[]>([]);
|
|
|
|
|
|
const orderInfo = reactive({
|
|
|
@@ -182,6 +277,9 @@ const loadOrderDetail = async () => {
|
|
|
orderInfo.purchaseReason = order.purchaseReason || '';
|
|
|
orderInfo.remark = order.remark || '';
|
|
|
|
|
|
+ // 保存订单时间信息(用于流程节点时间显示)
|
|
|
+ orderTimeInfo.createTime = order.createTime || '';
|
|
|
+ orderTimeInfo.updateTime = order.updateTime || '';
|
|
|
// 获取商品信息
|
|
|
const productsRes = await getOrderProducts([orderId.value]);
|
|
|
if (productsRes.code === 200 && productsRes.rows) {
|
|
|
@@ -227,12 +325,14 @@ const loadOrderDetail = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+onMounted(async () => {
|
|
|
const paramId = route.query.orderId;
|
|
|
// 直接使用字符串,不转换为数字,避免精度丢失
|
|
|
orderId.value = paramId as string;
|
|
|
if (orderId.value) {
|
|
|
- loadOrderDetail();
|
|
|
+ // 先加载订单详情(获取 createTime/updateTime),再加载流程节点
|
|
|
+ await loadOrderDetail();
|
|
|
+ loadFlowNodes();
|
|
|
} else {
|
|
|
console.error('订单ID无效,无法加载订单详情');
|
|
|
}
|