From a297deec555e6b4dac0a9bcf3396b809e8339893 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Thu, 16 Oct 2025 09:59:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/viewDialog.vue                 | 249 ++++++++++++++++++
 1 file changed, 249 insertions(+)
 create mode 100644 src/views/workorderMenu/abnormalWorkOrder/components/viewDialog.vue

diff --git a/src/views/workorderMenu/abnormalWorkOrder/components/viewDialog.vue b/src/views/workorderMenu/abnormalWorkOrder/components/viewDialog.vue
new file mode 100644
index 0000000..e517ad0
--- /dev/null
+++ b/src/views/workorderMenu/abnormalWorkOrder/components/viewDialog.vue
@@ -0,0 +1,249 @@
+<template>
+  <a-modal
+    :width="920"
+    :open="modal.open"
+    :title="modal.title"
+    :footer="null"
+    @cancel="handleCancel"
+    wrapClassName="order-detail-modal"
+  >
+    <!-- 服务轨迹 -->
+    <a-descriptions bordered size="small" :column="2" class="mb-6">
+      <template #title>
+        <a-divider orientation="left" class="!mt-0">服务轨迹</a-divider>
+      </template>
+
+      <a-descriptions-item label="签入时间">
+        {{ detail.checkInTime }}
+      </a-descriptions-item>
+      <a-descriptions-item label="签入距离">
+        {{ detail.checkInDistance }}
+      </a-descriptions-item>
+
+      <a-descriptions-item label="签入地址" :span="2">
+        {{ detail.checkInAddress }}
+      </a-descriptions-item>
+
+      <a-descriptions-item label="签入图片" :span="2">
+        <div class="image-preview-group">
+          <a-space>
+            <a-image
+              v-for="(img, index) in detail.checkInImages"
+              :key="'in-' + index"
+              :src="img"
+              :width="100"
+              :height="100"
+              :preview-src-list="detail.checkInImages"
+              :preview-visible="false"
+              class="rounded"
+            />
+          </a-space>
+          <span v-if="!detail.checkInImages?.length" class="text-gray-400">无</span>
+        </div>
+      </a-descriptions-item>
+
+      <a-descriptions-item label="签出时间">
+        {{ detail.checkOutTime }}
+      </a-descriptions-item>
+      <a-descriptions-item label="签出距离">
+        {{ detail.checkOutDistance }}
+      </a-descriptions-item>
+
+      <a-descriptions-item label="签出地址" :span="2">
+        {{ detail.checkOutAddress }}
+      </a-descriptions-item>
+
+      <a-descriptions-item label="签出图片" :span="2">
+        <div class="image-preview-group">
+          <a-space>
+            <a-image
+              v-for="(img, index) in detail.checkOutImages"
+              :key="'out-' + index"
+              :src="img"
+              :width="100"
+              :height="100"
+              :preview-src-list="detail.checkOutImages"
+              :preview-visible="false"
+              class="rounded"
+            />
+          </a-space>
+          <span v-if="!detail.checkOutImages?.length" class="text-gray-400">无</span>
+        </div>
+      </a-descriptions-item>
+
+      <a-descriptions-item label="签出备注" :span="2">
+        {{ detail.checkOutRemark || '无' }}
+      </a-descriptions-item>
+
+      <a-descriptions-item label="实际服务时长" :span="2">
+        {{ detail.serviceDuration }}
+      </a-descriptions-item>
+    </a-descriptions>
+
+    <!-- 用户信息 -->
+    <a-descriptions bordered size="small" :column="2" class="mb-6">
+      <template #title>
+        <a-divider orientation="left">用户信息</a-divider>
+      </template>
+      <a-descriptions-item label="工单号">{{ detail.orderNo }}</a-descriptions-item>
+      <a-descriptions-item label="姓名">{{ detail.userName }}</a-descriptions-item>
+      <a-descriptions-item label="性别">{{ detail.gender }}</a-descriptions-item>
+      <a-descriptions-item label="年龄">{{ detail.age }} 岁</a-descriptions-item>
+      <a-descriptions-item label="联系电话">{{ detail.phone }}</a-descriptions-item>
+      <a-descriptions-item label="身份证号">{{ detail.idCard }}</a-descriptions-item>
+      <a-descriptions-item label="评估等级" :span="2">
+        {{ detail.assessmentLevel || '未填写' }}
+      </a-descriptions-item>
+    </a-descriptions>
+
+    <!-- 任务信息 -->
+    <a-descriptions bordered size="small" :column="2" class="mb-6">
+      <template #title>
+        <a-divider orientation="left">任务信息</a-divider>
+      </template>
+      <a-descriptions-item label="护理员">{{ detail.caregiver }}</a-descriptions-item>
+      <a-descriptions-item label="护理等级">{{ detail.careLevel || '未填写' }}</a-descriptions-item>
+      <a-descriptions-item label="计划服务时间">{{ detail.plannedTime }}</a-descriptions-item>
+      <a-descriptions-item label="服务地址" :span="2">
+        {{ detail.serviceAddress }}
+      </a-descriptions-item>
+    </a-descriptions>
+
+    <!-- 服务项目 -->
+    <div class="mb-6">
+      <a-divider orientation="left">服务项目</a-divider>
+      <a-table
+        :dataSource="detail.serviceItems"
+        :columns="serviceColumns"
+        size="small"
+        :pagination="false"
+        bordered
+        class="compact-table"
+      />
+    </div>
+
+    <!-- 异常工单处理信息 -->
+    <a-descriptions bordered size="small" :column="2">
+      <template #title>
+        <a-divider orientation="left">异常工单处理信息</a-divider>
+      </template>
+      <a-descriptions-item label="处理状态">{{ detail.exceptionStatus }}</a-descriptions-item>
+      <a-descriptions-item label="处理原因">{{ detail.exceptionReason || '无' }}</a-descriptions-item>
+      <a-descriptions-item label="处理人">{{ detail.exceptionHandler || '无' }}</a-descriptions-item>
+      <a-descriptions-item label="处理时间">{{ detail.exceptionTime || '无' }}</a-descriptions-item>
+    </a-descriptions>
+  </a-modal>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { useModal } from '@/hooks'
+
+const { modal, hideModal } = useModal()
+
+// 模拟数据（实际应由父组件传入）
+const detail = reactive({
+  checkInTime: '2025-10-15 11:44:01',
+  checkInDistance: '14996 m',
+  checkInAddress: '江苏省南通市通州区十总镇南通市通州区十总镇五总居8-128西北775米',
+  checkInImages: [
+    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/6a4ddb23-8733-4ca4-a1f9-b0f061a4ca0a.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=bygou7kYVrQ6f9bDDWlpebs15Nc%3D',
+    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/11ce319c-705e-431a-a3a7-4a9bb8350fce.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=cOHYxAxsTP0RQDgT2bNv2jjkWco%3D'
+  ],
+  checkOutTime: '2025-10-15 12:44:43',
+  checkOutDistance: '14984 m',
+  checkOutAddress: '江苏省南通市通州区十总镇南通市通州区十总镇五总居8-128西北757米',
+  checkOutImages: [
+    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/3e7817e4-4d31-41d8-ba89-6532a5baea5d.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=efu9s%2BjgIXdxZPU6sEH5OR0ipdE%3D',
+    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/9902435e-fd61-423c-9681-7f11bcab7ee8.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=y204ac9D%2BiI%2BWtNOaOu9UylAezg%3D',
+    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/157a72f1-c081-4407-ab48-e38e25b38a24.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=wvjINjdpPlG3QhkuDYIAISc20sY%3D'
+  ],
+  checkOutRemark: '助洁理发，助餐剥花生',
+  serviceDuration: '60 分钟',
+  orderNo: '202510151043270345563994',
+  userName: '顾美田',
+  gender: '男',
+  age: '90',
+  phone: '18452439097',
+  idCard: '320624193507244576',
+  assessmentLevel: '',
+  caregiver: '于圣霞',
+  careLevel: '',
+  plannedTime: '2025-10-15 10:42:00',
+  serviceAddress: '江苏省南通市通州区十总镇五总社区居委会通州区五总居十七组3号',
+  serviceItems: [
+    { itemCategoryName: '助乐服务', itemName: '精神关爱', careDuration: '60' }
+  ],
+  exceptionStatus: '未处理',
+  exceptionReason: '',
+  exceptionHandler: '',
+  exceptionTime: ''
+})
+
+const serviceColumns = [
+  { title: '服务项目分类', dataIndex: 'itemCategoryName', width: '30%' },
+  { title: '服务项目名称', dataIndex: 'itemName', width: '40%' },
+  { title: '服务时长(分钟)', dataIndex: 'careDuration', width: '30%' }
+]
+
+function handleCancel() {
+  hideModal()
+}
+
+function handleView() {
+  modal.value.open = true
+  modal.value.title = '工单详情'
+}
+
+defineExpose({
+  handleView
+})
+</script>
+
+<style scoped>
+/* 全局调整 modal 内部样式 */
+.order-detail-modal :deep(.ant-descriptions-title) {
+  padding: 0;
+}
+
+.order-detail-modal :deep(.ant-descriptions-item-label) {
+  width: 120px;
+  font-weight: 600;
+}
+
+/* 图片预览区域 */
+.image-preview-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  min-height: 32px;
+}
+
+.image-preview-group .ant-image {
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.image-preview-group .text-gray-400 {
+  color: #8c8c8c;
+  font-style: italic;
+}
+
+/* 表格紧凑 */
+.compact-table :deep(.ant-table-tbody > tr > td),
+.compact-table :deep(.ant-table-thead > tr > th) {
+  padding: 8px 12px;
+}
+
+/* 区块间距 */
+.mb-6 {
+  margin-bottom: 24px;
+}
+
+/* 覆盖 divider margin */
+.order-detail-modal :deep(.ant-divider-horizontal) {
+  margin: 20px 0 16px;
+}
+</style>
\ No newline at end of file