wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web工单处理

Browse Source
This commit is contained in:
wangys
2025-12-28 13:18:28 +08:00
parent 1148e3368d
commit 7de30b1b36
12 changed files with 1209 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
urbanLifelineServ/workcase/src/main/java/org/xyzh/workcase/service/WorkcaseServiceImpl.java
View File

@@ -380,6 +380,7 @@ public class WorkcaseServiceImpl implements WorkcaseService {
workcase.setStatus("cancelled");
workcaseMapper.updateWorkcase(workcase);
}
workcaseProcess.setCreator(LoginUtil.getCurrentUserId());
int rows = workcaseProcessMapper.insertWorkcaseProcess(workcaseProcess);
if (rows > 0) {

20
urbanLifelineWeb/packages/shared/src/api/file/file.ts
View File

@@ -48,6 +48,26 @@ export const fileAPI = {
return response.data;
},
/**
* 根据ID获取文件信息
* @param fileId 文件ID
* @returns Promise<ResultDomain<TbSysFileDTO>>
*/
async getFileById(fileId: string): Promise<ResultDomain<TbSysFileDTO>> {
const response = await api.get<TbSysFileDTO>(`${this.baseUrl}/${fileId}`);
return response.data;
},
/**
* 批量获取文件信息
* @param fileIds 文件ID列表
* @returns Promise<ResultDomain<TbSysFileDTO>>
*/
async getFilesByIds(fileIds: string[]): Promise<ResultDomain<TbSysFileDTO>> {
const response = await api.post<TbSysFileDTO>(`${this.baseUrl}/list`, { fileIds });
return response.data;
},
/**
* 下载文件
* @param fileId 文件ID

156
urbanLifelineWeb/packages/shared/src/components/file/fileupload/FileUpload.vue
View File

@@ -98,7 +98,8 @@
<!-- 内容模式 -->
<div v-else class="file-upload content">
<div class="container">
<div class="area" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
<!-- 上传区域 -->
<div v-if="!uploading && currentFileList.length < maxCount" class="area" :class="{ dragover: isDragover }" @click="triggerFileInput"
@drop.prevent="handleDrop" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave">
<div class="icon">
<div class="plus"></div>
@@ -109,38 +110,37 @@
<div class="tip">{{ getUploadTip() }}</div>
</div>
<!-- 上传中状态 -->
<div v-if="uploading" class="area disabled">
<div class="loading">
<div class="spinner">⟳</div>
<div>上传中...</div>
</div>
</div>
<input ref="fileInputRef" type="file" :accept="accept" :multiple="maxCount > 1" @change="handleFileSelect"
hidden />
<!-- 文件列表 -->
<div v-if="selectedFiles.length > 0" class="files">
<h4>待上传文件：</h4>
<div v-for="(file, index) in selectedFiles" :key="index" class="file">
<!-- 已上传文件列表 -->
<div v-if="currentFileList.length > 0" class="files">
<div v-for="(file, index) in currentFileList" :key="file.fileId || index" class="file">
<div class="preview">
<img v-if="isImageFile(file)" :src="getFilePreviewUrl(file)" class="thumb" />
<span v-else class="type-icon">{{ getFileTypeIcon(file) }}</span>
<img v-if="isUploadedImageFile(file)" :src="getUploadedFileUrl(file)" class="thumb" />
<span v-else class="type-icon">{{ getUploadedFileTypeIcon(file) }}</span>
</div>
<div class="info">
<div class="name">{{ file.name }}</div>
<div class="size">{{ formatFileSize(file.size) }}</div>
<div class="name">{{ file.name || file.fileName || '未知文件' }}</div>
<div class="size">{{ file.size ? formatFileSize(file.size) : '' }}</div>
</div>
<div class="actions">
<ElButton type="danger" size="small" @click="removeFile(index)" :disabled="uploading">
<ElButton type="danger" size="small" @click="removeUploadedFile(index)">
删除
</ElButton>
</div>
</div>
</div>
<!-- 上传按钮 -->
<div v-if="selectedFiles.length > 0" class="actions">
<ElButton type="primary" @click="uploadFiles" :loading="uploading"
:disabled="selectedFiles.length === 0">
{{ uploading ? '上传中...' : '确定上传' }}
</ElButton>
</div>
</div>
</div>
@@ -203,6 +203,12 @@ const selectedFiles = ref<File[]>([])
const isDragover = ref(false)
const coverImageClass = ref('')
// 内部文件列表（包含本地预览URL）
interface InternalFile extends TbSysFileDTO {
localPreviewUrl?: string // 本地预览URL，避免重新下载
}
const internalFileList = ref<InternalFile[]>([])
// 文件输入引用
const fileInputRef = ref<HTMLInputElement>()
@@ -212,6 +218,56 @@ const currentCoverImg = computed({
set: (value: string) => emit('update:coverImg', value)
})
// 当前文件列表（优先使用内部列表，否则使用props）
const currentFileList = computed(() => {
return internalFileList.value.length > 0 ? internalFileList.value : props.fileList
})
// 判断已上传文件是否为图片
const isUploadedImageFile = (file: InternalFile): boolean => {
if (file.localPreviewUrl) return true // 有本地预览说明是图片
const mimeType = file.mimeType || file.extension || ''
return mimeType.includes('image') || /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name || '')
}
// 获取已上传文件的显示URL（优先使用本地预览）
const getUploadedFileUrl = (file: InternalFile): string => {
if (file.localPreviewUrl) return file.localPreviewUrl
if (file.url) return file.url
if (file.fileId) return `${FILE_DOWNLOAD_URL}${file.fileId}`
return ''
}
// 获取已上传文件的类型图标
const getUploadedFileTypeIcon = (file: InternalFile): string => {
const ext = file.extension || file.name?.split('.').pop() || ''
const iconMap: Record<string, string> = {
pdf: '📄',
doc: '📝',
docx: '📝',
xls: '📊',
xlsx: '📊',
ppt: '📽️',
pptx: '📽️',
zip: '📦',
rar: '📦',
txt: '📃'
}
return iconMap[ext.toLowerCase()] || '📎'
}
// 删除已上传的文件
const removeUploadedFile = (index: number) => {
const newList = [...internalFileList.value]
const removed = newList.splice(index, 1)[0]
// 释放本地预览URL
if (removed?.localPreviewUrl) {
URL.revokeObjectURL(removed.localPreviewUrl)
}
internalFileList.value = newList
emit('update:fileList', newList)
}
// 触发文件输入
const triggerFileInput = () => {
fileInputRef.value?.click()
@@ -292,18 +348,23 @@ const addFiles = (files: File[]) => {
return
}
// 检查是否重复
// 检查是否重复（包括已上传的文件）
if (selectedFiles.value.some(f => f.name === file.name && f.size === file.size)) {
emit('upload-error', `文件 ${file.name} 已添加`)
return
}
if (internalFileList.value.some(f => f.name === file.name)) {
emit('upload-error', `文件 ${file.name} 已上传`)
return
}
// 如果不允许多选或封面模式，清空之前的文件
if (props.maxCount === 1 || props.mode === 'cover') {
selectedFiles.value = [file]
} else {
// 检查数量限制
if (selectedFiles.value.length >= props.maxCount) {
// 检查数量限制（已上传 + 待上传）
const totalCount = internalFileList.value.length + selectedFiles.value.length
if (totalCount >= props.maxCount) {
emit('upload-error', `最多只能上传 ${props.maxCount} 个文件`)
return
}
@@ -391,7 +452,15 @@ const uploadFiles = async () => {
// 默认上传逻辑
uploading.value = true
const uploadedFilesList: TbSysFileDTO[] = []
const uploadedFilesList: InternalFile[] = []
// 为图片文件创建本地预览URL的映射
const localPreviewMap = new Map<string, string>()
selectedFiles.value.forEach(file => {
if (file.type.startsWith('image/')) {
localPreviewMap.set(file.name, URL.createObjectURL(file))
}
})
try {
@@ -404,12 +473,19 @@ const uploadFiles = async () => {
})
if (result.success && result.data) {
uploadedFilesList.push(result.data)
// 添加本地预览URL
const uploadedFile: InternalFile = {
...result.data,
localPreviewUrl: localPreviewMap.get(file.name)
}
uploadedFilesList.push(uploadedFile)
if (props.mode === 'cover' && result.data.url) {
emit('update:coverImg', result.data.url)
}
} else {
// 释放预览URL
localPreviewMap.forEach(url => URL.revokeObjectURL(url))
emit('upload-error', result.message || '上传失败，请重试')
return
}
@@ -422,20 +498,33 @@ const uploadFiles = async () => {
if (result.success) {
const files = result.dataList || []
uploadedFilesList.push(...files)
// 为每个上传成功的文件添加本地预览URL
files.forEach(f => {
const uploadedFile: InternalFile = {
...f,
localPreviewUrl: localPreviewMap.get(f.name || '')
}
uploadedFilesList.push(uploadedFile)
})
} else {
// 释放预览URL
localPreviewMap.forEach(url => URL.revokeObjectURL(url))
emit('upload-error', result.message || '上传失败，请重试')
return
}
}
// 上传成功
// 上传成功 - 更新内部文件列表
if (uploadedFilesList.length > 0) {
// content模式：追加到内部列表
if (props.mode === 'content') {
internalFileList.value = [...internalFileList.value, ...uploadedFilesList]
}
emit('upload-success', uploadedFilesList)
emit('update:fileList', [...props.fileList, ...uploadedFilesList])
}
// 清空文件列表
// 清空待上传文件列表
selectedFiles.value = []
if (props.mode === 'dialog') {
closeDialog()
@@ -453,6 +542,8 @@ const uploadFiles = async () => {
defineExpose({
// 当前选中的文件列表
selectedFiles,
// 已上传的文件列表
internalFileList,
// 上传状态
uploading,
// 弹窗显示状态
@@ -463,8 +554,17 @@ defineExpose({
addFiles,
// 移除指定文件
removeFile,
// 清空所有文件
clearFiles: () => { selectedFiles.value = [] },
// 清空所有文件（包括已上传的）
clearFiles: () => {
// 释放本地预览URL
internalFileList.value.forEach(f => {
if (f.localPreviewUrl) {
URL.revokeObjectURL(f.localPreviewUrl)
}
})
selectedFiles.value = []
internalFileList.value = []
},
// 手动触发上传
uploadFiles,
// 关闭弹窗

1
urbanLifelineWeb/packages/workcase/src/components/index.ts
View File

@@ -0,0 +1 @@
export { default as WorkcaseAssign } from './workcase/WorkcaseAssign.vue'

245
urbanLifelineWeb/packages/workcase/src/components/workcase/WorkcaseAssign.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<ElDialog
v-model="visible"
:title="dialogTitle"
width="500px"
@close="handleClose"
>
<div class="assign-form">
<div class="form-item">
<label class="form-label">选择工程师 <span class="required">*</span></label>
<ElSelect
v-model="form.processor"
placeholder="请选择工程师"
style="width: 100%;"
filterable
:loading="loadingEngineers"
>
<ElOption
v-for="engineer in availableEngineers"
:key="engineer.userId"
:label="`${engineer.username} (${engineer.statusName || '未知状态'})`"
:value="engineer.userId"
>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>{{ engineer.username }}</span>
<span style="color: #999; font-size: 12px;">
{{ engineer.statusName }} | 当前{{ engineer.currentWorkload || 0 }}单
</span>
</div>
</ElOption>
</ElSelect>
</div>
<div class="form-item" style="margin-top: 16px;">
<label class="form-label">备注说明（可选）</label>
<ElInput
v-model="form.message"
type="textarea"
:rows="3"
placeholder="请输入指派/转派说明..."
maxlength="200"
/>
</div>
<div class="form-item" style="margin-top: 16px;">
<label class="form-label">附件（可选）</label>
<FileUpload
ref="fileUploadRef"
mode="content"
:max-count="5"
:max-size="10 * 1024 * 1024"
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx"
:auto-upload="false"
:custom-upload="handleFilesUpload"
@upload-error="handleUploadError"
/>
</div>
</div>
<template #footer>
<ElButton @click="handleClose">取消</ElButton>
<ElButton type="primary" @click="handleSubmit" :loading="submitting">确定</ElButton>
</template>
</ElDialog>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElDialog, ElButton, ElInput, ElSelect, ElOption, ElMessage } from 'element-plus'
import { FileUpload } from 'shared/components'
import { fileAPI } from 'shared/api'
import { workcaseAPI } from '@/api/workcase'
import { workcaseChatAPI } from '@/api/workcase/workcaseChat'
import type { TbWorkcaseProcessDTO } from '@/types/workcase/workcase'
import type { CustomerServiceVO } from '@/types/workcase/customer'
import type { TbSysFileDTO } from 'shared/types'
interface Props {
/** 是否显示弹窗 */
modelValue: boolean
/** 工单ID */
workcaseId: string
/** 当前处理人ID（转派时排除） */
currentProcessor?: string
/** 操作类型：assign-指派，redeploy-转派 */
action?: 'assign' | 'redeploy'
}
const props = withDefaults(defineProps<Props>(), {
currentProcessor: '',
action: 'assign'
})
const emit = defineEmits<{
'update:modelValue': [value: boolean]
'success': []
}>()
// 弹窗显示状态
const visible = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
// 弹窗标题
const dialogTitle = computed(() => {
return props.action === 'assign' ? '指派工程师' : '转派工程师'
})
// 表单数据
const form = ref({
processor: '',
message: '',
fileIds: [] as string[]
})
// 状态
const submitting = ref(false)
const loadingEngineers = ref(false)
const availableEngineers = ref<CustomerServiceVO[]>([])
const fileUploadRef = ref<InstanceType<typeof FileUpload>>()
// 监听弹窗打开，加载工程师列表
watch(visible, async (val) => {
if (val) {
// 重置表单
form.value = { processor: '', message: '', fileIds: [] }
if (fileUploadRef.value) {
fileUploadRef.value.clearFiles()
}
// 加载工程师列表
await loadAvailableEngineers()
}
})
// 加载可用工程师列表
const loadAvailableEngineers = async () => {
loadingEngineers.value = true
try {
const res = await workcaseChatAPI.getCustomerServicePage({
filter: {},
pageParam: { page: 1, pageSize: 100 }
})
if (res.success && res.dataList) {
// 排除当前处理人
availableEngineers.value = res.dataList.filter(
(engineer: CustomerServiceVO) => engineer.userId !== props.currentProcessor
)
}
} catch (error) {
console.error('加载工程师列表失败:', error)
ElMessage.error('加载工程师列表失败')
} finally {
loadingEngineers.value = false
}
}
// 自定义文件上传
const handleFilesUpload = async (files: File[]): Promise<TbSysFileDTO[]> => {
const uploadedFiles: TbSysFileDTO[] = []
for (const file of files) {
const result = await fileAPI.uploadFile({
file,
module: 'workcase',
optsn: props.workcaseId
})
if (result.success && result.data) {
uploadedFiles.push(result.data)
if (result.data.fileId) {
form.value.fileIds.push(result.data.fileId)
}
} else {
throw new Error(`文件 ${file.name} 上传失败`)
}
}
return uploadedFiles
}
// 上传错误处理
const handleUploadError = (error: string) => {
ElMessage.error(error)
}
// 提交
const handleSubmit = async () => {
if (!form.value.processor) {
ElMessage.warning('请选择工程师')
return
}
if (!props.workcaseId) {
ElMessage.error('工单ID不存在')
return
}
submitting.value = true
try {
// 如果有待上传的文件，先上传
if (fileUploadRef.value?.selectedFiles?.length > 0) {
await fileUploadRef.value.uploadFiles()
}
const params: TbWorkcaseProcessDTO = {
workcaseId: props.workcaseId,
action: props.action,
processor: form.value.processor,
message: form.value.message || (props.action === 'assign' ? '工单指派' : '工单转派'),
files: form.value.fileIds.length > 0 ? form.value.fileIds : undefined
}
const res = await workcaseAPI.createWorkcaseProcess(params)
if (res.success) {
ElMessage.success(props.action === 'assign' ? '指派成功' : '转派成功')
visible.value = false
emit('success')
} else {
ElMessage.error(res.message || '操作失败')
}
} catch (error) {
console.error('指派/转派失败:', error)
ElMessage.error('操作失败')
} finally {
submitting.value = false
}
}
// 关闭弹窗
const handleClose = () => {
visible.value = false
}
</script>
<style scoped lang="scss">
.assign-form {
.form-item {
.form-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #333;
.required {
color: #f56c6c;
}
}
}
}
</style>

1
urbanLifelineWeb/packages/workcase/src/config/index.ts
View File

@@ -212,6 +212,7 @@ console.log('[配置] 当前配置', config);
// 单独导出常用配置项
export const API_BASE_URL = config.api.baseUrl;
export const FILE_DOWNLOAD_URL = config.file.downloadUrl;
export const FILE_UPLOAD_URL = config.file.uploadUrl;
export const PUBLIC_IMG_PATH = config.publicImgPath;
export const PUBLIC_WEB_PATH = config.publicWebPath;

2
urbanLifelineWeb/packages/workcase/src/types/shared.d.ts vendored
View File

@@ -61,8 +61,6 @@ declare module 'shared/api' {
export const api: ApiInstance
export const TokenManager: any
export const authAPI: any
export const fileAPI: any
}
declare module 'shared/api/auth' {

48
urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue
View File

@@ -158,6 +158,15 @@
@cancel="showDetailDialog = false"
/>
</el-dialog>
<!-- 指派工单弹窗 -->
<WorkcaseAssign
v-model="showAssignDialog"
:workcase-id="assignWorkcaseId"
:current-processor="assignCurrentProcessor"
action="assign"
@success="handleAssignSuccess"
/>
</AdminLayout>
</template>
@@ -168,6 +177,7 @@ import { Plus, Search } from 'lucide-vue-next'
import { ElMessage, ElMessageBox } from 'element-plus'
import { workcaseAPI } from '@/api/workcase'
import WorkcaseDetail from '@/views/public/workcase/WorkcaseDetail/WorkcaseDetail.vue'
import { WorkcaseAssign } from '@/components'
import type { TbWorkcaseDTO, TbWorkcaseProcessDTO } from '@/types/workcase'
import type { PageRequest, PageParam } from 'shared/types'
@@ -183,6 +193,11 @@ const showDetailDialog = ref(false)
const currentWorkcase = ref<TbWorkcaseDTO>({})
const loading = ref(false)
// 指派弹窗相关
const showAssignDialog = ref(false)
const assignWorkcaseId = ref('')
const assignCurrentProcessor = ref('')
const formData = ref<TbWorkcaseDTO>({
username: '',
phone: '',
@@ -254,30 +269,19 @@ const createWorkcaseAPI = async () => {
}
/**
* 指派工单 - API调用
* 指派工单 - 打开指派弹窗
*/
const assignWorkcaseAPI = async (workcase: TbWorkcaseDTO) => {
const { value: processor } = await ElMessageBox.prompt('请输入处理人ID', '指派工单', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).catch(() => ({ value: '' }))
if (!processor) return
const process: TbWorkcaseProcessDTO = {
workcaseId: workcase.workcaseId,
action: 'assign',
processor: processor,
message: '工单指派'
}
const res = await workcaseAPI.createWorkcaseProcess(process)
if (res.success) {
ElMessage.success('指派成功')
loadWorkcases()
} else {
ElMessage.error(res.message || '指派失败')
}
assignWorkcaseId.value = workcase.workcaseId || ''
assignCurrentProcessor.value = workcase.processor || ''
showAssignDialog.value = true
}
/**
* 指派成功回调
*/
const handleAssignSuccess = () => {
loadWorkcases()
}
/**

54
urbanLifelineWeb/packages/workcase/src/views/public/workcase/WorkcaseDetail/WorkcaseDetail.scss
View File

@@ -170,11 +170,17 @@
.section-title {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
margin-bottom: 16px;
color: #111827;
font-weight: 700;
font-size: 16px;
.title-left {
display: flex;
align-items: center;
gap: 8px;
}
}
.title-icon {
@@ -303,6 +309,52 @@
margin-bottom: 4px;
}
.timeline-files {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed #e5e7eb;
.files-label {
font-size: 12px;
color: #9ca3af;
margin-bottom: 4px;
}
.files-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.file-link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: #f3f4f6;
border-radius: 4px;
font-size: 12px;
color: #4b87ff;
text-decoration: none;
transition: background 0.2s;
&:hover {
background: #e5e7eb;
}
.file-icon {
font-size: 14px;
}
.file-name {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.timeline-time {
font-size: 12px;
color: #9ca3af;

315
urbanLifelineWeb/packages/workcase/src/views/public/workcase/WorkcaseDetail/WorkcaseDetail.vue
View File

@@ -145,8 +145,14 @@
<!-- 处理记录 (仅查看模式) -->
<div class="timeline-section" v-if="mode === 'view' && processList.length > 0">
<div class="section-title">
<div class="title-bar"></div>
处理记录
<div class="title-left">
<div class="title-bar"></div>
处理记录
</div>
<!-- 工单处理人记录工单过程-->
<ElButton v-if="isProcessor" type="primary" size="small" @click="showAddProcessDialog = true">
添加处理记录
</ElButton>
</div>
<div class="timeline-content">
<div v-for="(item, index) in processList" :key="index" class="timeline-item">
@@ -161,6 +167,22 @@
<span class="timeline-action">{{ getActionText(item.action) }}:</span>
<span class="timeline-desc">{{ item.message }}</span>
</div>
<!-- 附件列表 -->
<div v-if="item.files && item.files.length > 0" class="timeline-files">
<div class="files-label">附件：</div>
<div class="files-list">
<a
v-for="fileId in item.files"
:key="fileId"
:href="getFileDownloadUrl(fileId)"
target="_blank"
class="file-link"
>
<span class="file-icon">{{ getFileIcon(fileId) }}</span>
<span class="file-name">{{ getFileName(fileId) }}</span>
</a>
</div>
</div>
</div>
</div>
</div>
@@ -171,25 +193,100 @@
<footer class="detail-footer">
<ElButton @click="handleCancel">{{ mode === 'view' ? '关闭' : '取消' }}</ElButton>
<ElButton v-if="mode === 'create'" type="primary" @click="handleSubmit">创建工单</ElButton>
<ElButton v-if="mode === 'edit'" type="primary" @click="handleSubmit">保存修改</ElButton>
<ElButton v-if="mode === 'view' && formData.status === 'pending'" type="warning" @click="handleAssign">指派工程师</ElButton>
<ElButton v-if="mode === 'view' && formData.status === 'processing'" type="success" @click="handleComplete">完成工单</ElButton>
<!-- 来客视角：只能撤销自己创建的工单 -->
<ElButton
v-if="mode === 'view' && isCreator && formData.status !== 'done'"
type="danger"
>
撤销工单
</ElButton>
<!-- 员工视角：可以指派、转派、完成工单 -->
<ElButton
v-if="mode === 'view' && !isCreator && formData.status === 'pending'"
type="warning"
@click="handleAssign"
>
指派工程师
</ElButton>
<ElButton
v-if="mode === 'view' && !isCreator && formData.status === 'processing'"
type="warning"
@click="handleRedeploy"
>
转派工程师
</ElButton>
<ElButton
v-if="mode === 'view' && !isCreator && formData.status === 'processing'"
type="success"
@click="handleComplete"
>
完成工单
</ElButton>
</footer>
<!-- ChatMessage Dialog -->
<ElDialog v-model="showChatMessage" title="对话详情" width="800px" class="chat-dialog">
<ChatMessage v-if="showChatMessage" :room-id="currentRoomId" />
</ElDialog>
<!-- Add Process Record Dialog -->
<ElDialog v-model="showAddProcessDialog" title="添加处理记录" width="600px">
<div class="add-process-form">
<div class="form-item">
<label class="form-label">处理内容</label>
<ElInput
v-model="processForm.message"
type="textarea"
:rows="4"
placeholder="请详细描述处理过程、发现的问题或解决方案..."
maxlength="500"
show-word-limit
/>
</div>
<div class="form-item" style="margin-top: 16px;">
<label class="form-label">附件（可选）</label>
<FileUpload
ref="processFileUploadRef"
mode="content"
:max-count="5"
:max-size="10 * 1024 * 1024"
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx"
v-model:file-list="processUploadedFiles"
@upload-success="handleProcessUploadSuccess"
@upload-error="handleProcessUploadError"
/>
</div>
</div>
<template #footer>
<ElButton @click="handleCloseProcessDialog">取消</ElButton>
<ElButton type="primary" @click="submitProcessRecord" :loading="submittingProcess">提交</ElButton>
</template>
</ElDialog>
<!-- Assign/Redeploy Dialog -->
<WorkcaseAssign
v-model="showAssignDialog"
:workcase-id="formData.workcaseId || ''"
:current-processor="formData.processor || ''"
:action="assignAction"
@success="handleAssignSuccess"
/>
</div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { ref, watch, onMounted, computed } from 'vue'
import { ChatMessage } from '@/views/public/ChatRoom/'
import { ElButton, ElInput, ElSelect, ElOption, ElDialog, ElMessage, ElLoading } from 'element-plus'
import { MessageSquare, ImageIcon as ImageIcon, Plus } from 'lucide-vue-next'
import type { TbWorkcaseDTO, TbWorkcaseProcessDTO } from '@/types/workcase/workcase'
import type { TbSysFileDTO } from 'shared/types'
import { workcaseAPI } from '@/api/workcase'
import { fileAPI } from 'shared/api/file'
import { FileUpload } from 'shared/components'
import { WorkcaseAssign } from '@/components'
import { FILE_DOWNLOAD_URL } from '@/config'
interface Props {
@@ -226,6 +323,35 @@ const showChatMessage = ref(false)
const currentRoomId = ref<string>('')
const processList = ref<TbWorkcaseProcessDTO[]>([])
// 文件信息缓存 (fileId -> TbSysFileDTO)
const fileInfoCache = ref<Map<string, TbSysFileDTO>>(new Map())
// 当前登录用户ID
const userId = ref<string>('')
// 判断是否是处理人
const isProcessor = computed(() => {
return formData.value.processor === userId.value
})
// 判断是否是创建人
const isCreator = computed(() => {
return formData.value.creator === userId.value
})
// 添加处理记录相关
const showAddProcessDialog = ref(false)
const submittingProcess = ref(false)
const processForm = ref({
message: '',
fileIds: [] as string[]
})
// 已上传的文件列表（用于显示）
const processUploadedFiles = ref<TbSysFileDTO[]>([])
// 指派/转派相关
const showAssignDialog = ref(false)
const assignAction = ref<'assign' | 'redeploy'>('assign')
// 加载工单详情
const loadWorkcaseDetail = async (workcaseId: string) => {
if (!workcaseId) return
@@ -255,12 +381,54 @@ const loadProcessList = async (workcaseId: string) => {
const res = await workcaseAPI.getWorkcaseProcessList({ workcaseId })
if (res.success && res.dataList) {
processList.value = res.dataList
// 加载所有文件信息
await loadFilesInfo(res.dataList)
}
} catch (error) {
console.error('加载处理记录失败:', error)
}
}
// 加载处理记录中的文件信息
const loadFilesInfo = async (processes: TbWorkcaseProcessDTO[]) => {
// 收集所有文件ID
const fileIds: string[] = []
processes.forEach(p => {
if (p.files) {
// 处理 files 可能是字符串或数组的情况
const filesArray = Array.isArray(p.files) ? p.files : [p.files]
filesArray.forEach(id => {
if (id && !fileInfoCache.value.has(id)) {
fileIds.push(id)
}
})
}
})
console.log('需要查询的文件ID:', fileIds)
if (fileIds.length === 0) return
// 逐个查询文件信息
for (const fileId of fileIds) {
try {
console.log('查询文件信息:', fileId)
const res = await fileAPI.getFileById(fileId)
console.log('文件信息结果:', res)
if (res.success && res.data) {
fileInfoCache.value.set(fileId, res.data)
}
} catch (error) {
console.error(`加载文件信息失败: ${fileId}`, error)
}
}
}
// 获取文件信息
const getFileInfo = (fileId: string): TbSysFileDTO | undefined => {
return fileInfoCache.value.get(fileId)
}
// 获取时间线圆点样式类
const getTimelineDotClass = (action?: string): string => {
switch (action) {
@@ -312,8 +480,50 @@ function getImageUrl(fileId: string): string {
return `${FILE_DOWNLOAD_URL}${fileId}`
}
// 获取文件下载URL
function getFileDownloadUrl(fileId: string): string {
if (!fileId) return ''
return `${FILE_DOWNLOAD_URL}${fileId}`
}
// 获取文件名
function getFileName(fileId: string): string {
const fileInfo = fileInfoCache.value.get(fileId)
return fileInfo?.name || fileId.substring(0, 8) + '...'
}
// 获取文件图标
function getFileIcon(fileId: string): string {
const fileInfo = fileInfoCache.value.get(fileId)
if (!fileInfo) return '📎'
const ext = (fileInfo.extension || fileInfo.name?.split('.').pop() || '').toLowerCase()
const iconMap: Record<string, string> = {
jpg: '🖼️',
jpeg: '🖼️',
png: '🖼️',
gif: '🖼️',
webp: '🖼️',
pdf: '📄',
doc: '📝',
docx: '📝',
xls: '📊',
xlsx: '📊',
ppt: '📽️',
pptx: '📽️',
zip: '📦',
rar: '📦',
txt: '📃'
}
return iconMap[ext] || '📎'
}
// 初始化
onMounted(() => {
// 获取当前登录用户ID
const loginDomain = JSON.parse(localStorage.getItem('loginDomain') || '{}')
userId.value = loginDomain?.userInfo?.userId || ''
if (props.mode === 'view' || props.mode === 'edit') {
// 查看/编辑模式：通过 workcaseId 加载数据
if (props.workcaseId) {
@@ -328,12 +538,11 @@ onMounted(() => {
}
} else if (props.mode === 'create') {
// 创建模式：初始化空表单，设置 roomId
const loginDomain = JSON.parse(localStorage.getItem('loginDomain') || '{}')
formData.value = {
roomId: props.roomId,
username: loginDomain?.userInfo?.username || '',
phone: loginDomain?.user?.phone || '',
userId: loginDomain?.user?.userId || '',
userId: userId.value,
emergency: 'normal',
imgs: []
}
@@ -455,12 +664,100 @@ const handleSubmit = async () => {
}
const handleAssign = () => {
emit('assign', formData.value.workcaseId!)
assignAction.value = 'assign'
showAssignDialog.value = true
}
const handleComplete = () => {
emit('complete', formData.value.workcaseId!)
}
// 处理转派
const handleRedeploy = () => {
assignAction.value = 'redeploy'
showAssignDialog.value = true
}
// 指派/转派成功回调
const handleAssignSuccess = async () => {
// 重新加载工单详情
if (formData.value.workcaseId) {
await loadWorkcaseDetail(formData.value.workcaseId)
}
// 触发事件通知父组件
if (assignAction.value === 'assign') {
emit('assign', formData.value.workcaseId!)
}
}
// 处理记录文件上传组件引用
const processFileUploadRef = ref<InstanceType<typeof FileUpload>>()
// 处理记录上传成功回调
const handleProcessUploadSuccess = (files: TbSysFileDTO[]) => {
console.log('文件上传成功:', files)
}
// 处理记录上传失败回调
const handleProcessUploadError = (error: string) => {
ElMessage.error(error)
}
// 关闭处理记录弹窗
const handleCloseProcessDialog = () => {
showAddProcessDialog.value = false
processForm.value = { message: '', fileIds: [] }
processUploadedFiles.value = []
if (processFileUploadRef.value) {
processFileUploadRef.value.clearFiles()
}
}
// 提交处理记录
const submitProcessRecord = async () => {
if (!processForm.value.message.trim()) {
ElMessage.warning('请输入处理内容')
return
}
if (!formData.value.workcaseId) {
ElMessage.error('工单ID不存在')
return
}
submittingProcess.value = true
try {
// 从已上传文件列表获取文件ID
const fileIds = processUploadedFiles.value
.map(f => f.fileId)
.filter((id): id is string => !!id)
// 提交处理记录
const params: TbWorkcaseProcessDTO = {
workcaseId: formData.value.workcaseId,
action: 'info',
message: processForm.value.message,
files: fileIds.length > 0 ? fileIds : undefined
}
const res = await workcaseAPI.createWorkcaseProcess(params)
if (res.success) {
ElMessage.success('处理记录添加成功')
handleCloseProcessDialog()
// 重新加载处理记录
if (formData.value.workcaseId) {
await loadProcessList(formData.value.workcaseId)
}
} else {
ElMessage.error(res.message || '添加失败')
}
} catch (error) {
console.error('添加处理记录失败:', error)
ElMessage.error('添加处理记录失败')
} finally {
submittingProcess.value = false
}
}
</script>
<style scoped lang="scss">

428
urbanLifelineWeb/packages/workcase_wechat/pages/workcase/workcaseDetail/workcaseDetail.uvue
View File

@@ -164,6 +164,12 @@
<view class="title-bar"></view>
<text class="title-text">处理记录</text>
</view>
<!-- 处理人记录处理过程 -->
<view v-if="isProcessor" class="add-process-section">
<button class="add-process-btn" type="primary" size="mini" @tap="navigateToAddProcess">
添加处理记录
</button>
</view>
<view class="timeline">
<view class="timeline-item" v-for="(item, index) in processList" :key="index">
<view class="timeline-dot" :class="getTimelineDotClass(item.status)"></view>
@@ -198,13 +204,139 @@
<view class="action-button primary" v-if="mode === 'create'" @tap="submitWorkcase">
<text class="button-text">提交工单</text>
</view>
<view class="action-button primary" v-if="mode === 'view' && workcase.status === 'pending'" @tap="handleAssign">
<!-- 来客视角：只能撤销自己创建的工单 -->
<view
class="action-button danger"
v-if="mode !== 'create' && isCreator && workcase.status !== 'done'"
@tap="handleRevoke"
>
<text class="button-text">撤销工单</text>
</view>
<!-- 员工视角：可以指派、转派、完成工单 -->
<view
class="action-button warning"
v-if="mode !== 'create' && !isCreator && workcase.status === 'pending'"
@tap="handleAssign"
>
<text class="button-text">指派工程师</text>
</view>
<view class="action-button success" v-if="mode === 'view' && workcase.status === 'processing'" @tap="handleComplete">
<view
class="action-button warning"
v-if="mode !== 'create' && !isCreator && workcase.status === 'processing'"
@tap="handleRedeployBtn"
>
<text class="button-text">转派工程师</text>
</view>
<view
class="action-button success"
v-if="mode !== 'create' && !isCreator && workcase.status === 'processing'"
@tap="handleComplete"
>
<text class="button-text">完成工单</text>
</view>
</view>
<!-- 添加处理记录弹窗（使用 v-if 控制显示） -->
<view v-if="showAddProcessDialog" class="process-modal-overlay" @tap="closeAddProcessDialog">
<view class="process-modal" @tap.stop>
<view class="modal-header">
<text class="modal-title">添加处理记录</text>
<view class="modal-close" @tap="closeAddProcessDialog">
<text>×</text>
</view>
</view>
<view class="modal-body">
<view class="form-item">
<text class="form-label">处理内容</text>
<textarea
class="form-textarea"
v-model="processForm.message"
placeholder="请详细描述处理过程、发现的问题或解决方案..."
maxlength="500"
/>
<text class="char-count">{{ processForm.message.length }}/500</text>
</view>
<view class="form-item">
<text class="form-label">附件（可选）</text>
<view class="file-upload-section">
<view class="file-list">
<view class="file-item" v-for="(file, index) in processForm.files" :key="index">
<text class="file-name">{{ file.name }}</text>
<view class="file-delete" @tap="deleteProcessFile(index)">
<text>×</text>
</view>
</view>
</view>
<button
class="upload-btn"
size="mini"
@tap="chooseProcessFile"
v-if="processForm.files.length < 5"
>
选择文件
</button>
<text class="upload-tip">最多上传5个文件</text>
</view>
</view>
</view>
<view class="modal-footer">
<button class="modal-btn" @tap="closeAddProcessDialog">取消</button>
<button class="modal-btn primary" type="primary" @tap="submitProcessRecord" :loading="submittingProcess">
提交
</button>
</view>
</view>
</view>
<!-- 指派/转派工程师弹窗 -->
<view v-if="showAssignDialog" class="process-modal-overlay" @tap="closeAssignDialog">
<view class="process-modal" @tap.stop>
<view class="modal-header">
<text class="modal-title">{{ assignDialogTitle }}</text>
<view class="modal-close" @tap="closeAssignDialog">
<text>×</text>
</view>
</view>
<view class="modal-body">
<view class="form-item">
<text class="form-label">选择工程师</text>
<picker
class="form-picker"
:value="selectedEngineerIndex"
:range="availableEngineers"
range-key="username"
@change="onEngineerChange"
>
<view class="picker-content">
<text class="picker-text" v-if="assignForm.processorName">{{ assignForm.processorName }}</text>
<text class="picker-text placeholder" v-else>请选择工程师</text>
<text class="picker-arrow">></text>
</view>
</picker>
<view v-if="loadingEngineers" class="loading-tip">
<text>加载中...</text>
</view>
</view>
<view class="form-item">
<text class="form-label">备注说明（可选）</text>
<textarea
class="form-textarea"
v-model="assignForm.message"
placeholder="请输入指派/转派说明..."
maxlength="200"
/>
</view>
</view>
<view class="modal-footer">
<button class="modal-btn" @tap="closeAssignDialog">取消</button>
<button class="modal-btn primary" type="primary" @tap="submitAssign" :loading="submittingAssign">
确定
</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
@@ -212,10 +344,11 @@
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ref, onMounted, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { TbWorkcaseDTO, TbWorkcaseProcessDTO } from '@/types/workcase'
import { workcaseAPI, fileAPI } from '@/api'
import type { CustomerServiceVO } from '@/types/workcase/chatRoom'
import { workcaseAPI, fileAPI, workcaseChatAPI } from '@/api'
// 响应式数据
const headerPaddingTop = ref<number>(44)
@@ -228,6 +361,7 @@ const faultTypes = ref<string[]>(['电气系统故障', '机械故障', '控制
const typeIndex = ref<number>(0)
const emergencies = ref<string[]>(['普通', '紧急'])
const emergencyIndex = ref<number>(0)
const userId = JSON.parse(uni.getStorageSync('loginDomain')).userInfo.userId
// 工单数据
const workcase = reactive<TbWorkcaseDTO>({})
@@ -235,6 +369,38 @@ const workcase = reactive<TbWorkcaseDTO>({})
// 处理记录
const processList = reactive<TbWorkcaseProcessDTO[]>([])
// 判断是否是处理人
const isProcessor = computed(() => {
return workcase.processor === userId
})
// 判断是否是创建人
const isCreator = computed(() => {
return workcase.creator === userId
})
// 添加处理记录相关
const showAddProcessDialog = ref(false)
const submittingProcess = ref(false)
const processForm = reactive({
message: '',
files: [] as Array<{ name: string; fileId: string }>
})
// 指派/转派相关
const showAssignDialog = ref(false)
const assignDialogTitle = ref('指派工程师')
const assignAction = ref<'assign' | 'redeploy'>('assign')
const submittingAssign = ref(false)
const loadingEngineers = ref(false)
const availableEngineers = ref<CustomerServiceVO[]>([])
const selectedEngineerIndex = ref(-1)
const assignForm = reactive({
processor: '',
processorName: '',
message: ''
})
// 获取图片 URL（通过 fileId）
function getImageUrl(fileId: string): string {
// 如果已经是完整 URL，直接返回
@@ -431,11 +597,9 @@ function handleViewChat() {
// 指派工程师
function handleAssign() {
uni.showToast({
title: '指派工程师',
icon: 'none'
})
// TODO: 实现指派逻辑
assignAction.value = 'assign'
assignDialogTitle.value = '指派工程师'
openAssignDialog()
}
// 完成工单
@@ -443,18 +607,131 @@ function handleComplete() {
uni.showModal({
title: '完成确认',
content: '确认完成该工单？',
success: (res) => {
success: async (res) => {
if (res.confirm) {
// TODO: 调用 API 完成工单
uni.showToast({
title: '工单已完成',
icon: 'success'
})
try {
const params: TbWorkcaseProcessDTO = {
workcaseId: workcase.workcaseId,
action: 'finish',
message: '工单完成'
}
const result = await workcaseAPI.createWorkcaseProcess(params)
if (result.success) {
uni.showToast({ title: '工单已完成', icon: 'success' })
// 重新加载工单详情
if (workcase.workcaseId) {
await loadWorkcaseDetail(workcase.workcaseId)
}
} else {
uni.showToast({ title: result.message || '操作失败', icon: 'none' })
}
} catch (error) {
console.error('完成工单失败:', error)
uni.showToast({ title: '操作失败', icon: 'none' })
}
}
}
})
}
// 转派工程师
function handleRedeploy() {
assignAction.value = 'redeploy'
assignDialogTitle.value = '转派工程师'
openAssignDialog()
}
// 打开指派/转派弹窗
async function openAssignDialog() {
assignForm.processor = ''
assignForm.processorName = ''
assignForm.message = ''
selectedEngineerIndex.value = -1
showAssignDialog.value = true
await loadAvailableEngineers()
}
// 关闭指派/转派弹窗
function closeAssignDialog() {
showAssignDialog.value = false
}
// 加载可用工程师列表（排除当前处理人）
async function loadAvailableEngineers() {
loadingEngineers.value = true
try {
const res = await workcaseChatAPI.getCustomerServicePage({
filter: {},
pageParam: { page: 1, pageSize: 100 }
})
if (res.success && res.dataList) {
// 排除当前处理人
availableEngineers.value = res.dataList.filter(
(engineer: CustomerServiceVO) => engineer.userId !== workcase.processor
)
}
} catch (error) {
console.error('加载工程师列表失败:', error)
uni.showToast({ title: '加载工程师列表失败', icon: 'none' })
} finally {
loadingEngineers.value = false
}
}
// 选择工程师
function onEngineerChange(e: any) {
const index = e.detail.value
selectedEngineerIndex.value = index
if (index >= 0 && index < availableEngineers.value.length) {
const engineer = availableEngineers.value[index]
assignForm.processor = engineer.userId || ''
assignForm.processorName = engineer.username || ''
}
}
// 提交指派/转派
async function submitAssign() {
if (!assignForm.processor) {
uni.showToast({ title: '请选择工程师', icon: 'none' })
return
}
if (!workcase.workcaseId) {
uni.showToast({ title: '工单ID不存在', icon: 'none' })
return
}
submittingAssign.value = true
try {
const params: TbWorkcaseProcessDTO = {
workcaseId: workcase.workcaseId,
action: assignAction.value,
processor: assignForm.processor,
message: assignForm.message || (assignAction.value === 'assign' ? '工单指派' : '工单转派')
}
const res = await workcaseAPI.createWorkcaseProcess(params)
if (res.success) {
uni.showToast({
title: assignAction.value === 'assign' ? '指派成功' : '转派成功',
icon: 'success'
})
closeAssignDialog()
// 重新加载工单详情
if (workcase.workcaseId) {
await loadWorkcaseDetail(workcase.workcaseId)
}
} else {
uni.showToast({ title: res.message || '操作失败', icon: 'none' })
}
} catch (error) {
console.error('指派/转派失败:', error)
uni.showToast({ title: '操作失败', icon: 'none' })
} finally {
submittingAssign.value = false
}
}
// 表单选择器事件
function onTypeChange(e: any) {
typeIndex.value = e.detail.value
@@ -649,6 +926,127 @@ async function submitWorkcase() {
}
}
// 撤销工单
function handleRevoke() {
uni.showModal({
title: '撤销确认',
content: '确认撤销该工单？撤销后无法恢复',
success: (res) => {
if (res.confirm) {
// TODO: 调用 API 撤销工单
uni.showToast({
title: '工单已撤销',
icon: 'success'
})
}
}
})
}
// 转派工程师
function handleRedeployBtn() {
handleRedeploy()
}
// 导航到添加处理记录（或直接显示弹窗）
function navigateToAddProcess() {
showAddProcessDialog.value = true
}
// 关闭添加处理记录弹窗
function closeAddProcessDialog() {
showAddProcessDialog.value = false
}
// 选择处理记录附件
async function chooseProcessFile() {
uni.chooseFile({
count: 5 - processForm.files.length,
extension: ['.jpg', '.jpeg', '.png', '.pdf', '.doc', '.docx', '.xls', '.xlsx'],
success: async (res) => {
uni.showLoading({ title: '上传中...' })
try {
const uploadPromises = res.tempFiles.map(async (file) => {
const result = await fileAPI.uploadFile(file.path, {
module: 'workcase',
optsn: workcase.workcaseId || 'temp'
})
if (result.success && result.data?.fileId) {
return {
name: file.name,
fileId: result.data.fileId
}
}
return null
})
const results = await Promise.all(uploadPromises)
results.forEach(result => {
if (result) {
processForm.files.push(result)
}
})
uni.hideLoading()
uni.showToast({ title: '上传成功', icon: 'success' })
} catch (error) {
uni.hideLoading()
console.error('上传文件失败:', error)
uni.showToast({ title: '上传失败', icon: 'none' })
}
}
})
}
// 删除处理记录附件
function deleteProcessFile(index: number) {
processForm.files.splice(index, 1)
}
// 提交处理记录
async function submitProcessRecord() {
if (!processForm.message.trim()) {
uni.showToast({ title: '请输入处理内容', icon: 'none' })
return
}
if (!workcase.workcaseId) {
uni.showToast({ title: '工单ID不存在', icon: 'none' })
return
}
submittingProcess.value = true
try {
const fileIds = processForm.files.map(f => f.fileId).join(',')
const params: TbWorkcaseProcessDTO = {
workcaseId: workcase.workcaseId,
action: 'info',
message: processForm.message,
files: fileIds || undefined
}
const res = await workcaseAPI.addWorkcaseProcess(params)
if (res.success) {
uni.showToast({ title: '处理记录添加成功', icon: 'success' })
closeAddProcessDialog()
// 重置表单
processForm.message = ''
processForm.files = []
// 重新加载处理记录
if (workcase.workcaseId) {
await loadProcessList(workcase.workcaseId)
}
} else {
uni.showToast({ title: res.message || '添加失败', icon: 'none' })
}
} catch (error) {
console.error('添加处理记录失败:', error)
uni.showToast({ title: '添加失败', icon: 'none' })
} finally {
submittingProcess.value = false
}
}
// 返回上一页
function goBack() {
uni.navigateBack()

33
urbanLifelineWeb/packages/workcase_wechat/types/workcase/chatRoom.ts
View File

@@ -320,16 +320,15 @@ export interface MarkReadParam {
*/
export interface TbCustomerServiceDTO extends BaseDTO {
userId?: string
userName?: string
username?: string
userCode?: string
status?: string
maxConcurrentChats?: number
currentChatCount?: number
totalServedCount?: number
skillTags?: string[]
maxConcurrent?: number
currentWorkload?: number
totalServed?: number
avgResponseTime?: number
avgRating?: number
skills?: string[]
priority?: number
lastOnlineTime?: string
satisfactionScore?: number
}
/**
@@ -337,19 +336,17 @@ export interface TbCustomerServiceDTO extends BaseDTO {
*/
export interface CustomerServiceVO extends BaseVO {
userId?: string
userName?: string
userAvatar?: string
username?: string
userCode?: string
avatar?: string
status?: string
statusName?: string
maxConcurrentChats?: number
currentChatCount?: number
totalServedCount?: number
skillTags?: string[]
maxConcurrent?: number
currentWorkload?: number
totalServed?: number
avgResponseTime?: number
avgResponseTimeFormatted?: string
avgRating?: number
skills?: string[]
skillNames?: string[]
priority?: number
lastOnlineTime?: string
satisfactionScore?: number
isAvailable?: boolean
}