business_tms_program 0.0.0

package/src/pages/afterSale/orderDetail.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getOrderDetail, handleOrder } from '@/api/afterSale'
+import { orderStatus, workNodeEnum,
+    SERVICETYPE,
+    WORKORDER_PROBLEM_CLASSIFICATION,
+    workFormMap,
+    isSolveOnceMap,
+    isOverdueMap
+ } from '@/dict/afterSale'
+import { UPLOAD_HOST } from '@/config/app'
+import { formatDateTime } from '@/utils/index'
+import RippleBtn from '@/components/RippleBtn.vue';
+import Timeline from '@/components/Timeline.vue';
+import { useSystemStoreHook } from "@/stores/modules/system";
+import DeviceInfo from './DeviceInfo.vue';
+defineOptions({
+    name: "orderDetail"
+});
+interface TimelineItem {
+  content: string;
+  type: workNodeEnum;
+  time?: string; // 可选属性
+}
+const receiveItem = { content: '售后接单', type: workNodeEnum.AFTER_SALES_RECEIVE }
+const finishItem = { content: '工单完结', type: workNodeEnum.FINISH }
+const returnItem = { content: '客户回访', type: workNodeEnum.RETURN_VISIT }
+const state = reactive({
+    id: '',
+    info: {
+        imageList: [] as any[],
+        orderStatus: undefined,
+        executionMemberList: [],
+        workNodeStatus: undefined,
+        statusDescription: '',
+        responsiblePersonInfo: {
+            nickname: ''
+        }
+    },
+    orderNodeVO: {} as any,
+    finishNodeVO: {} as any,
+    returnNodeVO: {} as any,
+    itemData: [] as TimelineItem[],
+})
+const dict = ref(useSystemStoreHook()?.dict);
+const submitText = computed(() => {
+    if (state.info.orderStatus === orderStatus.unStart) {
+        return '接单'
+    }
+    return '新增工作记录'
+})
+const executionMemberLabel = computed(() => {
+    return state.info?.executionMemberList?.map((item: any) => {
+        return item.nickname;
+    }).join(', ') || '';
+})
+const formatDictLabel = (value: any, key: any) => {
+    const item = dict.value[key]?.find((i: any) => i.dictLabelValue === value);
+    return item ? item.dictLabelName : ''; 
+}
+const formatAryDictLabel = (value: any[], key: any) => {
+    return value?.map((item: any) => formatDictLabel(item, key)).join(', ')
+}
+const fetchData = async (id: string) => {
+    const res = await getOrderDetail({ id })
+    const { imageList, orderNodeVO, finishNodeVO, returnNodeVO, ...other } = res;
+    state.info = {
+        ...other,
+        imageList: (imageList || [])?.map((item: any) => {
+            return `${UPLOAD_HOST}${item.attachmentUrl}`;
+        }),
+    }
+    if (orderNodeVO && orderNodeVO !== null) {
+        state.orderNodeVO = {
+            ...orderNodeVO,
+            acceptDate: formatDateTime(orderNodeVO?.acceptDate)
+        }
+        state.itemData.unshift(receiveItem)
+    }
+    if (finishNodeVO && finishNodeVO!== null) {
+         state.finishNodeVO = {
+           ...finishNodeVO,
+            workForm: workFormMap[finishNodeVO.workForm],
+            arrivalTime: formatDateTime(finishNodeVO?.arrivalTime),
+            completionTime: formatDateTime(finishNodeVO?.completionTime),
+            materialImageUrlVO: (finishNodeVO.materialImageUrlVO || [])?.map((item: any) => {
+                return `${UPLOAD_HOST}${item.attachmentUrl}`; 
+            }),
+            arrivalWatermarkPhotoVO: (finishNodeVO.arrivalWatermarkPhotoVO || [])?.map((item: any) => {
+                return `${UPLOAD_HOST}${item.attachmentUrl}`; 
+            }),
+            completionWatermarkPhotoVO: (finishNodeVO.completionWatermarkPhotoVO || [])?.map((item: any) => {
+                return `${UPLOAD_HOST}${item.attachmentUrl}`; 
+            })
+        }
+        state.itemData.unshift(finishItem)
+    }
+    if (returnNodeVO && returnNodeVO !== null) {
+        state.returnNodeVO = {
+            ...returnNodeVO,
+            imageListVO: (returnNodeVO?.imageListVO || [])?.map((item: any) => {
+                return `${UPLOAD_HOST}${item.attachmentUrl}`;
+            }),
+            isResolveText: isSolveOnceMap[returnNodeVO?.isResolve],
+            isSatisfiedText: isSolveOnceMap[returnNodeVO?.isSatisfied],
+            isOverdueText: isOverdueMap[returnNodeVO?.isOverdue],
+        }
+        state.itemData.unshift(returnItem)
+    }
+}
+onLoad((event: any) => {
+    const { orderId } = event;
+    if (orderId) {
+        state.id = orderId;
+        fetchData(orderId)
+        uni.$on('orderDetail-updated', () => {
+            fetchData(orderId); // 刷新数据
+        });
+    }
+    useSystemStoreHook().getDictList(SERVICETYPE);
+    useSystemStoreHook().getDictList(WORKORDER_PROBLEM_CLASSIFICATION);
+});
+const toHandleOrder = () => {
+    const { orderStatus: status, workNodeStatus } = state.info;
+    if (status === orderStatus.unStart) {
+        handleOrder({ id: state.id }).then((res: boolean) => {
+            if (res) {
+                uni.showToast({ title: '接单成功' })
+                fetchData(state.id)
+            }
+        })
+        return;
+    }
+    if (workNodeStatus === workNodeEnum.AFTER_SALES_RECEIVE) {
+        uni.redirectTo({ url: `/pages/afterSale/orderFinish?orderId=${state.id}&workNodeStatus=${workNodeStatus + 1}` })
+    }
+    if (workNodeStatus === workNodeEnum.FINISH) {
+        uni.redirectTo({ url: `/pages/afterSale/returnVisit?orderId=${state.id}&workNodeStatus=${workNodeStatus + 1}` }) 
+    }
+}
+const handlePreview = (list: [], index: number) => {
+  if (!list || list.length === 0) {
+    return;
+  }
+  uni.previewImage({
+    current: index, // 当前显示图片的索引
+    urls: list, // 需要预览的图片链接列表
+    indicator: 'number', // 显示页码指示器
+    loop: false // 不循环预览
+  })
+}
+</script>
+
+<template>
+    <view class="content">
+        <view class="info-box">
+            <DeviceInfo :data="state.info" />
+            <view class="des">现状描述：{{ state.info?.statusDescription }}</view>
+            <view class="text">故障图片：</view>
+            <view class="img-box">
+                <img v-for="(item, index) in state.info.imageList" :key="item" class="img" :src="item" 
+                    @click="handlePreview(state.info.imageList, index)"/>
+            </view>
+            <view class="label">执行负责人：{{ state.info?.responsiblePersonInfo?.nickname }}</view>
+            <view class="label">执行成员：{{ executionMemberLabel }}</view>
+        </view>
+        <view class="record-box" v-if="state.itemData?.length > 0">
+            <Timeline :items="state.itemData">
+                <template #content="{ item, index }">
+                    <view class="title">{{ item.content }}</view>
+                    <view v-if="item.type === workNodeEnum.FINISH" class="finish-box">
+                        <view class="text">服务类型：{{ formatDictLabel(state.finishNodeVO?.serviceType, SERVICETYPE) }}</view>
+                        <view class="text">工作形式：{{ state.finishNodeVO?.workForm }}</view>
+                        <view class="text">到场时间：{{ state.finishNodeVO?.arrivalTime }}</view>
+                        <view class="text">故障问题分析：{{ state.finishNodeVO?.problemsAnalysis }}</view>
+                        <view class="text">工单问题归类：
+                            {{ formatAryDictLabel(state.finishNodeVO?.workOrderProblemClassification, WORKORDER_PROBLEM_CLASSIFICATION) }}</view>
+                        <view class="text">领用物料：</view>
+                        <view class="img-box" v-if="state.finishNodeVO?.materialImageUrlVO">
+                            <img v-for="(img, index) in state.finishNodeVO.materialImageUrlVO"
+                                :key="img"
+                                class="img" :src="img"
+                                @click="handlePreview(state.finishNodeVO.materialImageUrlVO?.map(i => ({attachmentUrl: i})), index)"
+                            />
+                        </view>
+                        <view class="text">领用物料备注：{{ state.finishNodeVO?.materialsReceived }}</view>
+                        <view class="text">处理完结时间：{{ state.finishNodeVO?.completionTime }}</view>
+                        <view class="text">一次性解决：{{ isSolveOnceMap[state.finishNodeVO?.isSolveOnce] }}</view>
+                        <view class="text">到场水印照片：</view>
+                        <view class="img-box" v-if="state.finishNodeVO?.arrivalWatermarkPhotoVO">
+                            <img v-for="(img, index) in state.finishNodeVO.arrivalWatermarkPhotoVO"
+                                :key="img" class="img" :src="img"
+                                @click="handlePreview(state.finishNodeVO.arrivalWatermarkPhotoVO, index)"
+                            />
+                        </view>
+                        <view class="text">处理完结水印照片：</view>
+                        <view class="img-box" v-if="state.finishNodeVO?.completionWatermarkPhotoVO">
+                            <img v-for="(img, index) in state.finishNodeVO.completionWatermarkPhotoVO"
+                                :key="img" class="img" :src="img"
+                                @click="handlePreview(state.finishNodeVO.completionWatermarkPhotoVO, index)"
+                            />
+                        </view>
+                        <view class="text">提交时间：{{ state.finishNodeVO?.createTime }}</view>
+                    </view>
+                    <view v-if="item.type === workNodeEnum.RETURN_VISIT" class="finish-box">
+                        <view class="text">问题解决：{{ state.returnNodeVO?.isResolveText }}</view>
+                        <view class="text">客户满意：{{ state.returnNodeVO?.isSatisfiedText }}</view>
+                        <view class="text">是否超期：{{ state.returnNodeVO?.isOverdueText }}</view>
+                        <view class="text">备注：{{ state.returnNodeVO?.remark }}</view>
+                        <view class="text">附件图片：</view>
+                        <view class="img-box" v-if="state.returnNodeVO?.imageListVO">
+                            <img v-for="(img, index) in state.returnNodeVO?.imageListVO"
+                                :key="img" class="img" :src="img"
+                                @click="handlePreview(state.returnNodeVO?.imageListVO, index)"
+                            />
+                        </view>
+                        <view class="text">提交时间：{{ state.returnNodeVO?.createTime }}</view>
+                    </view>
+                    <view v-if="item.type === workNodeEnum.AFTER_SALES_RECEIVE" class="finish-box">
+                        <view class="text">时间：{{ state.orderNodeVO?.acceptDate }}</view>
+                    </view>
+                </template>
+            </Timeline>
+        </view>
+        <view class="footer" v-if="state.info.workNodeStatus !== workNodeEnum.RETURN_VISIT">
+            <RippleBtn @click="toHandleOrder" :customStyle="'padding-bottom: 10rpx'">
+                <view class="submit-btn">{{submitText}}</view>
+            </RippleBtn>
+        </view>
+    </view>
+</template>
+<style scoped lang="less">
+.content {
+    padding-bottom: 120rpx;
+    background-color: #F5F5F5;
+    min-height: 100vh;
+
+    .info-box {
+        margin-bottom: 32rpx;
+        padding: 48rpx;
+        background-color: #fff;
+    }
+
+    .des {
+        margin-top: 48rpx;
+        margin-bottom: 16rpx;
+        font-size: 28rpx;
+        line-height: 40rpx;
+    }
+
+    .label {
+        margin-top: 16rpx;
+        font-size: 28rpx;
+        line-height: 40rpx;
+    }
+
+    .img-box {
+        display: flex;
+        flex-wrap: wrap;
+        padding-left: 48rpx;
+        padding-bottom: 16rpx;
+        .img {
+            margin-right: 16rpx;
+            margin-bottom: 16rpx;
+            width: 176rpx;
+            height: 176rpx;
+            background: #f1f1f1;
+            border-radius: 8rpx;
+        }
+    }
+    .title {
+        margin-bottom: 16rpx;
+        font-weight: bold;
+        font-size: 28rpx;
+        color: #000000;
+        line-height: 40rpx;
+    }
+    .text {
+        margin-bottom: 16rpx;
+        font-size: 28rpx;
+        color: #000000;
+        line-height: 40rpx;
+    }
+
+    .time-desc {
+        margin-top: 16rpx;
+        margin-left: 36rpx;
+        font-size: 28rpx;
+        color: rgba(0, 0, 0, 0.4);
+        line-height: 40rpx;
+    }
+    .record-box {
+        padding: 48rpx;
+        background-color: #fff;
+    }
+}
+
+.ripple {
+    margin-top: 10rpx;
+    margin-right: 16rpx;
+    width: 20rpx;
+    height: 20rpx;
+    background: #1D6FE9;
+    opacity: 0.9;
+    border-radius: 50%;
+}
+
+.footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 334rpx;
+}
+
+.submit-btn {
+    box-sizing: border-box;
+    width: 686rpx;
+    padding: 24rpx 0 26rpx 0;
+    line-height: 58rpx;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 600;
+    font-size: 40rpx;
+    color: rgba(255, 255, 255, 0.9);
+    background: linear-gradient(270deg, #1D9DE9 0%, #1D6FE9 100%);
+    box-shadow: 0px 16rpx 16rpx 2rpx rgba(29, 157, 233, 0.1);
+    border-radius: 52rpx;
+}
+</style>