generated from Leo_Ding/web-template
代码修改
This commit is contained in:
qiuyuan
parent
590a0958e7
commit
a297deec55
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user