工单详情修改
This commit is contained in:
@@ -499,7 +499,22 @@
|
||||
gap: 12rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.timeline-time {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #173294;
|
||||
}
|
||||
.timeline-date {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
.timeline-info{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.timeline-actor {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
@@ -514,15 +529,9 @@
|
||||
.timeline-desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
color: #111827;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.timeline-time {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
// 底部占位
|
||||
|
||||
@@ -169,12 +169,18 @@
|
||||
<view class="timeline-dot" :class="getTimelineDotClass(item.status)"></view>
|
||||
<view class="timeline-line" v-if="index < processList.length - 1"></view>
|
||||
<view class="timeline-body">
|
||||
|
||||
<view class="timeline-header">
|
||||
<text class="timeline-actor">{{ item.actor }}</text>
|
||||
<text class="timeline-action">{{ item.action }}</text>
|
||||
<text class="timeline-time">{{ getTime(item.createTime) }}</text>
|
||||
<text class="timeline-date">{{ getDate(item.createTime) }}</text>
|
||||
</view>
|
||||
<view class="timeline-info">
|
||||
<text class="timeline-action" >{{ getActionText(item.action) }}:</text>
|
||||
<text class="timeline-desc">{{ item.message }}</text>
|
||||
</view>
|
||||
<view class="timeline-files">
|
||||
|
||||
</view>
|
||||
<text class="timeline-desc" v-if="item.desc">{{ item.desc }}</text>
|
||||
<text class="timeline-time">{{ item.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -206,20 +212,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import type { TbWorkcaseDTO, TbWorkcaseProcessDTO } from '@/types/workcase'
|
||||
import { workcaseAPI, fileAPI } from '@/api'
|
||||
|
||||
// 接口定义
|
||||
interface ProcessItem {
|
||||
status: 'system' | 'manager' | 'engineer'
|
||||
actor: string
|
||||
action: string
|
||||
desc?: string
|
||||
time: string
|
||||
}
|
||||
|
||||
// 响应式数据
|
||||
const headerPaddingTop = ref<number>(44)
|
||||
const headerTotalHeight = ref<number>(88)
|
||||
@@ -233,10 +230,10 @@ const emergencies = ref<string[]>(['普通', '紧急'])
|
||||
const emergencyIndex = ref<number>(0)
|
||||
|
||||
// 工单数据
|
||||
const workcase = ref<TbWorkcaseDTO>({})
|
||||
const workcase = reactive<TbWorkcaseDTO>({})
|
||||
|
||||
// 处理记录
|
||||
const processList = ref<ProcessItem[]>([])
|
||||
const processList = reactive<TbWorkcaseProcessDTO[]>([])
|
||||
|
||||
// 获取图片 URL(通过 fileId)
|
||||
function getImageUrl(fileId: string): string {
|
||||
@@ -278,7 +275,8 @@ onLoad((options: any) => {
|
||||
console.error('读取loginDomain失败:', e)
|
||||
}
|
||||
|
||||
workcase.value = {
|
||||
// 使用 Object.assign 更新 reactive 对象
|
||||
Object.assign(workcase, {
|
||||
username,
|
||||
phone,
|
||||
userId,
|
||||
@@ -289,7 +287,7 @@ onLoad((options: any) => {
|
||||
description: '',
|
||||
emergency: 'normal',
|
||||
imgs: []
|
||||
}
|
||||
})
|
||||
} else if (options.workcaseId) {
|
||||
// 查看模式
|
||||
workcaseId.value = options.workcaseId
|
||||
@@ -319,44 +317,49 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
// 加载工单详情
|
||||
async function loadWorkcaseDetail(id: string) {
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
try {
|
||||
const res = await workcaseAPI.getWorkcaseById(id)
|
||||
if (res.success && res.data) {
|
||||
workcase.value = res.data
|
||||
// 加载处理记录
|
||||
await loadProcessList(id)
|
||||
} else {
|
||||
uni.showToast({ title: res.message || '加载失败', icon: 'none' })
|
||||
async function loadWorkcaseDetail(workcaseId : string) {
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
try {
|
||||
const res = await workcaseAPI.getWorkcaseById(workcaseId)
|
||||
if (res.success && res.data) {
|
||||
// 使用 Object.assign 更新 reactive 对象
|
||||
Object.assign(workcase, res.data)
|
||||
console.log('工单详情:', workcase)
|
||||
// 加载处理记录
|
||||
await loadProcessList(workcaseId)
|
||||
} else {
|
||||
uni.showToast({ title: res.message || '加载失败', icon: 'none' })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载工单详情失败:', error)
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载工单详情失败:', error)
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
// 加载处理记录
|
||||
async function loadProcessList(id: string) {
|
||||
async function loadProcessList(workcaseId: string) {
|
||||
try {
|
||||
const res = await workcaseAPI.getWorkcaseProcessList({ workcaseId: id })
|
||||
const res = await workcaseAPI.getWorkcaseProcessList({ workcaseId: workcaseId })
|
||||
if (res.success && res.dataList) {
|
||||
// 转换为界面需要的格式
|
||||
processList.value = res.dataList.map((item: TbWorkcaseProcessDTO) => ({
|
||||
status: item.processorType === 'system' ? 'system' : item.processorType === 'manager' ? 'manager' : 'engineer',
|
||||
actor: item.processorName || '未知',
|
||||
action: item.action || '',
|
||||
desc: item.description || '',
|
||||
time: item.createTime || ''
|
||||
}))
|
||||
// 清空并重新填充 reactive 数组
|
||||
processList.length = 0
|
||||
processList.push(...res.dataList)
|
||||
console.log('处理记录:', processList)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载处理记录失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function getTime(datetime: string): string{
|
||||
return datetime.split(" ")[1]
|
||||
}
|
||||
function getDate(datetime: string): string{
|
||||
return datetime.split(" ")[0]
|
||||
}
|
||||
|
||||
// 获取状态样式类
|
||||
function getStatusClass(status?: string): string {
|
||||
switch (status) {
|
||||
@@ -378,23 +381,51 @@ function getStatusText(status?: string): string {
|
||||
}
|
||||
|
||||
// 获取时间线圆点样式类
|
||||
function getTimelineDotClass(status: string): string {
|
||||
switch (status) {
|
||||
case 'system': return 'dot-system'
|
||||
case 'manager': return 'dot-manager'
|
||||
case 'engineer': return 'dot-engineer'
|
||||
default: return 'dot-system'
|
||||
function getTimelineDotClass(action?: string): string {
|
||||
switch (action) {
|
||||
case 'create':
|
||||
case 'info':
|
||||
return 'dot-system'
|
||||
case 'assign':
|
||||
case 'redeploy':
|
||||
return 'dot-manager'
|
||||
case 'finish':
|
||||
return 'dot-engineer'
|
||||
case 'repeal':
|
||||
return 'dot-cancel'
|
||||
default:
|
||||
return 'dot-system'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取动作文本
|
||||
function getActionText(action?: string): string {
|
||||
switch (action) {
|
||||
case 'create':
|
||||
return '工单创建'
|
||||
case 'info':
|
||||
return '记录信息'
|
||||
case 'assign':
|
||||
return '指派工程师'
|
||||
case 'redeploy':
|
||||
return '转派工程师'
|
||||
case 'repeal':
|
||||
return '撤销工单'
|
||||
case 'finish':
|
||||
return '完成工单'
|
||||
default:
|
||||
return '未知操作'
|
||||
}
|
||||
}
|
||||
|
||||
// 查看对话
|
||||
function handleViewChat() {
|
||||
if (!workcase.value.roomId) {
|
||||
if (!workcase.roomId) {
|
||||
uni.showToast({ title: '未关联聊天室', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${workcase.value.roomId}`
|
||||
url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${workcase.roomId}`
|
||||
})
|
||||
}
|
||||
|
||||
@@ -427,45 +458,45 @@ function handleComplete() {
|
||||
// 表单选择器事件
|
||||
function onTypeChange(e: any) {
|
||||
typeIndex.value = e.detail.value
|
||||
workcase.value.type = faultTypes.value[e.detail.value]
|
||||
workcase.type = faultTypes.value[e.detail.value]
|
||||
}
|
||||
|
||||
function onEmergencyChange(e: any) {
|
||||
emergencyIndex.value = e.detail.value
|
||||
workcase.value.emergency = emergencyIndex.value === 0 ? 'normal' : 'emergency'
|
||||
workcase.emergency = emergencyIndex.value === 0 ? 'normal' : 'emergency'
|
||||
}
|
||||
|
||||
// 选择故障图片
|
||||
async function chooseFaultImages() {
|
||||
uni.chooseImage({
|
||||
count: 9 - (workcase.value.imgs?.length || 0),
|
||||
count: 9 - (workcase.imgs?.length || 0),
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['camera', 'album'],
|
||||
success: async (res) => {
|
||||
if (!workcase.value.imgs) {
|
||||
workcase.value.imgs = []
|
||||
if (!workcase.imgs) {
|
||||
workcase.imgs = []
|
||||
}
|
||||
|
||||
|
||||
// 上传图片到服务器
|
||||
uni.showLoading({ title: '上传中...' })
|
||||
try {
|
||||
const uploadPromises = res.tempFilePaths.map(filePath =>
|
||||
const uploadPromises = res.tempFilePaths.map(filePath =>
|
||||
fileAPI.uploadFile(filePath, {
|
||||
module: 'workcase',
|
||||
optsn: workcase.value.workcaseId || 'temp'
|
||||
optsn: workcase.workcaseId || 'temp'
|
||||
})
|
||||
)
|
||||
|
||||
|
||||
const results = await Promise.all(uploadPromises)
|
||||
|
||||
|
||||
// 使用 fileId 添加图片
|
||||
results.forEach(result => {
|
||||
if (result.success && result.data?.fileId) {
|
||||
// 存储 fileId,用于提交时使用
|
||||
workcase.value.imgs!.push(result.data.fileId)
|
||||
workcase.imgs!.push(result.data.fileId)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '上传成功', icon: 'success' })
|
||||
} catch (error) {
|
||||
@@ -482,8 +513,8 @@ async function chooseFaultImages() {
|
||||
|
||||
// 删除故障图片
|
||||
function deleteFaultImage(index: number) {
|
||||
if (workcase.value.imgs) {
|
||||
workcase.value.imgs.splice(index, 1)
|
||||
if (workcase.imgs) {
|
||||
workcase.imgs.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -499,11 +530,11 @@ async function chooseNameplateImage() {
|
||||
try {
|
||||
const result = await fileAPI.uploadFile(res.tempFilePaths[0], {
|
||||
module: 'workcase',
|
||||
optsn: workcase.value.workcaseId || 'temp'
|
||||
optsn: workcase.workcaseId || 'temp'
|
||||
})
|
||||
|
||||
|
||||
if (result.success && result.data?.fileId) {
|
||||
workcase.value.deviceNamePlateImg = result.data.fileId
|
||||
workcase.deviceNamePlateImg = result.data.fileId
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '上传成功', icon: 'success' })
|
||||
} else {
|
||||
@@ -524,13 +555,13 @@ async function chooseNameplateImage() {
|
||||
|
||||
// 删除铭牌照片
|
||||
function deleteNameplateImage() {
|
||||
workcase.value.deviceNamePlateImg = ''
|
||||
workcase.deviceNamePlateImg = ''
|
||||
}
|
||||
|
||||
// 预览铭牌照片
|
||||
function previewNameplateImage() {
|
||||
if (!workcase.value.deviceNamePlateImg) return
|
||||
const imageUrl = getImageUrl(workcase.value.deviceNamePlateImg)
|
||||
if (!workcase.deviceNamePlateImg) return
|
||||
const imageUrl = getImageUrl(workcase.deviceNamePlateImg)
|
||||
uni.previewImage({
|
||||
urls: [imageUrl],
|
||||
current: 0
|
||||
@@ -539,9 +570,9 @@ function previewNameplateImage() {
|
||||
|
||||
// 预览故障图片
|
||||
function previewFaultImages(index: number) {
|
||||
if (!workcase.value.imgs || workcase.value.imgs.length === 0) return
|
||||
if (!workcase.imgs || workcase.imgs.length === 0) return
|
||||
// 将 fileId 数组转换为 URL 数组
|
||||
const imageUrls = workcase.value.imgs.map(fileId => getImageUrl(fileId))
|
||||
const imageUrls = workcase.imgs.map(fileId => getImageUrl(fileId))
|
||||
uni.previewImage({
|
||||
urls: imageUrls,
|
||||
current: index
|
||||
@@ -551,35 +582,35 @@ function previewFaultImages(index: number) {
|
||||
// 提交工单
|
||||
async function submitWorkcase() {
|
||||
// 校验必填项
|
||||
if (!workcase.value.username) {
|
||||
if (!workcase.username) {
|
||||
uni.showToast({ title: '请输入客户姓名', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!workcase.value.phone) {
|
||||
if (!workcase.phone) {
|
||||
uni.showToast({ title: '请输入联系电话', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!workcase.value.device) {
|
||||
if (!workcase.device) {
|
||||
uni.showToast({ title: '请输入设备名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!workcase.value.type) {
|
||||
if (!workcase.type) {
|
||||
uni.showToast({ title: '请选择故障类型', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!workcase.value.address) {
|
||||
if (!workcase.address) {
|
||||
uni.showToast({ title: '请输入现场地址', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!workcase.value.description) {
|
||||
if (!workcase.description) {
|
||||
uni.showToast({ title: '请输入故障描述', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!workcase.value.deviceNamePlateImg) {
|
||||
if (!workcase.deviceNamePlateImg) {
|
||||
uni.showToast({ title: '请上传设备铭牌照片', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!workcase.value.imgs || workcase.value.imgs.length === 0) {
|
||||
if (!workcase.imgs || workcase.imgs.length === 0) {
|
||||
uni.showToast({ title: '请至少上传一张故障图片', icon: 'none' })
|
||||
return
|
||||
}
|
||||
@@ -588,9 +619,9 @@ async function submitWorkcase() {
|
||||
|
||||
try {
|
||||
// 调用 API 提交工单
|
||||
const res = await workcaseAPI.createWorkcase(workcase.value)
|
||||
const res = await workcaseAPI.createWorkcase(workcase)
|
||||
uni.hideLoading()
|
||||
|
||||
|
||||
if (res.success && res.data) {
|
||||
uni.showToast({
|
||||
title: '工单创建成功',
|
||||
@@ -599,7 +630,7 @@ async function submitWorkcase() {
|
||||
// 创建成功后直接回到该聊天室(闭环)
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${workcase.value.roomId}&workcaseId=${res.data.workcaseId || ''}`
|
||||
url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${workcase.roomId}&workcaseId=${res.data.workcaseId || ''}`
|
||||
})
|
||||
}, 600)
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user