From f21e399dd475dec0d390ed244f4d1e7589c21a35 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 28 Apr 2025 21:25:21 +0800
Subject: [PATCH] 图片显示样式调整
---
src/views/tickets/ticket.vue | 130 ++++++++++++++++++++++++++++---------------
1 files changed, 85 insertions(+), 45 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index c080f7c..bbc5b33 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -118,8 +118,8 @@
</el-button>
</avue-input-map>
<!-- <div v-if="form.location?.length >= 3">
- {{ form.location[2] || '获取地址中...' }}
-</div> -->
+ {{ form.location[2] || '获取地址中...' }}
+ </div> -->
</div>
</el-form-item>
</el-col>
@@ -167,9 +167,6 @@
<div class="custom-steps-container">
<!-- 标题行 -->
<div class="steps-titles">
- <div class="step-title active">
- {{ workType === 1 ? '发起工单' : '发起任务' }}
- </div>
<div v-for="(status, index) in stepStatusList" :key="index" :class="{
'step-title': true,
'active': index <= stepStatusList.indexOf(String(currentDetail.status))
@@ -179,22 +176,7 @@
</div>
<!-- Element Steps 组件 -->
- <el-steps :active="getActiveStep()" align-center class="custom-steps">
- <el-step>
- <template #description>
- <span class="step-description">
- {{ currentDetail.creator || '未知' }}
- </span>
- <div class="step-description">
- <template v-if="workType === 0">
- {{ currentDetail.job_create_time || currentDetail.startTime || '未知时间' }}
- </template>
- <template v-else>
- {{ currentDetail.startTime || '未知时间' }}
- </template>
- </div>
- </template>
- </el-step>
+ <el-steps :active="getActiveStep() - 1" align-center class="custom-steps">
<el-step v-for="(status, index) in stepStatusList" :key="index">
<template #description>
<span class="step-description">
@@ -550,17 +532,17 @@
page: true,
column: [
// { label: "序号", prop: "id", width: 70 },
- { label: "工单编号", prop: "orderNumber", width: 150 },
+ { label: "工单编号", prop: "orderNumber", width: 150, overHidden: true, tooltip: true },
{ label: "工单名称", prop: "orderName", width: 170, overHidden: true, tooltip: true },
- { label: "所属单位", prop: "department", width: 100 },
+ { label: "所属单位", prop: "department", width: 100, overHidden: true, tooltip: true },
{ label: "发起时间", prop: "startTime", width: 160 },
- { label: "关联算法", prop: "aiType", width: 160 },
- { label: "工单类型", prop: "type", width: 108 },
+ { label: "关联算法", prop: "aiType", width: 160, overHidden: true, tooltip: true },
+ { label: "工单类型", prop: "type", width: 120, overHidden: true, tooltip: true },
{
label: "工单内容",
prop: "content",
slot: true,
- width: 212,
+ width: 190,
overHidden: true
},
{ label: "创建人", prop: "creator", width: 100 },
@@ -603,7 +585,7 @@
callback()
}
},
- trigger: 'change'
+ trigger: 'blur'
}],
photos: [{
validator: (rule, value, callback) => {
@@ -998,7 +980,7 @@
startTime: item.create_time,
aiType: item.ai_types,
content: item.content, // 将后端返回的 content 映射为 content
- type: this.types.find(t => t.value === item.event_dict_key)?.label,
+ type: this.types.find(t => t.value === item.work_order_type_dict_key)?.label,
keyData: (!isNaN(longitude) && !isNaN(latitude))
? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`
: '未知位置',
@@ -1050,7 +1032,7 @@
return
}
- // 验证图片上传
+ // 修改图片验证逻辑
if (!this.form.photos || this.form.photos.length === 0) {
this.$message.warning('请上传工单图片')
return
@@ -1063,7 +1045,7 @@
longitude: String(this.form.location[0]),
latitude: String(this.form.location[1]),
address: this.form.address,
- eventDictKey: this.form.type,
+ workOrderTypeDictKey: this.form.type,
aiType: Array.isArray(this.form.algorithm) ? this.form.algorithm : [this.form.algorithm], // 传数组
updateUser: this.form.handler,
createDept: this.form.department,
@@ -1074,9 +1056,17 @@
submitData.id = this.form.id
}
- // 获取文件对象
- const file = this.form.photos[0].raw
- if (!file) {
+ // 修改获取文件的逻辑
+ let file = null
+ const photoInfo = this.form.photos[0]
+
+ if (photoInfo.raw) {
+ // 如果有新上传的文件，使用新文件
+ file = photoInfo.raw
+ } else if (photoInfo.existingUrl) {
+ // 如果是已存在的图片，将URL添加到提交数据中
+ submitData.photoUrl = photoInfo.existingUrl
+ } else {
this.$message.warning('图片文件无效，请重新上传')
return
}
@@ -1117,8 +1107,10 @@
longitude: this.form.location?.[0] ? String(this.form.location[0]) : undefined,
latitude: this.form.location?.[1] ? String(this.form.location[1]) : undefined,
address: this.form.address || undefined,
- eventDictKey: this.form.type || undefined,
- aiType: Array.isArray(this.form.algorithm) ? this.form.algorithm : [this.form.algorithm], // 传数组
+ workOrderTypeDictKey: this.form.type || undefined,
+ aiType: this.form.algorithm && this.form.algorithm.length > 0
+ ? this.form.algorithm
+ : undefined, // 传数组
updateUser: handlerValue,
createDept: this.form.department || undefined,
isDraft: 1
@@ -1158,6 +1150,7 @@
handleLocationChange (val) {
let locationValue = val.value
+ console.log('handleLocationChange', locationValue)
if (locationValue && locationValue.length >= 2) {
// 兼容第三项为地址
this.form.location = [
@@ -1479,7 +1472,7 @@
发起时间: item.create_time || '',
关联算法: item.ai_types || '',
工单内容: item.address || '',
- 工单类型: this.types.find(t => t.value === item.event_dict_key)?.label || '',
+ 工单类型: this.types.find(t => t.value === item.work_order_type_dict_key)?.label || '',
经纬度: (!isNaN(longitude) && !isNaN(latitude)) ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}` : '',
创建人: item.create_user || '',
处理人: item.update_user || '',
@@ -1526,8 +1519,12 @@
// 文件改变时的钩子
handleFileChange (file, fileList) {
- this.form.photos = fileList
- this.currentDetail.photos = fileList
+ // 保持最新的文件列表
+ this.form.photos = fileList.map(item => ({
+ ...item,
+ existingUrl: item.url && !item.raw ? item.url : null // 标记已存在的图片URL
+ }))
+ this.currentDetail.photos = this.form.photos
},
// 文件移除时的钩子
@@ -1821,7 +1818,7 @@
}
// 获取工单类型值 - 从types中找到匹配的值
- const typeValue = this.types.find(t => t.label === row.type)?.value || row.event_dict_key
+ const typeValue = this.types.find(t => t.label === row.type)?.value || row.work_order_type_dict_key
// 获取处理人ID - 使用userNameToIdMap映射
const handlerId = this.userNameToIdMap[row.handler] || row.handler
@@ -1835,19 +1832,39 @@
映射后类型值: typeValue
})
+ // 修改算法数组的处理逻辑
let algorithmArr = []
if (Array.isArray(row.aiType)) {
algorithmArr = row.aiType
} else if (typeof row.aiType === 'string' && row.aiType) {
- algorithmArr = row.aiType.split(',').map(i => i.trim())
+ // 首先尝试将字符串按照逗号或顿号分割
+ algorithmArr = row.aiType.split(/[,、]/).map(item => item.trim())
}
+
+ // 确保算法值与选项匹配
+ algorithmArr = algorithmArr.map(item => {
+ // 如果是字符串值，尝试找到对应的 dict_key
+ if (typeof item === 'string') {
+ const matchedAlgorithm = this.algorithms.find(
+ algo => algo.dict_value === item || algo.dict_key === item
+ )
+ return matchedAlgorithm ? matchedAlgorithm.dict_key : item
+ }
+ return item
+ }).filter(Boolean) // 过滤掉无效值
+
+ console.log('算法处理:', {
+ 原始值: row.aiType,
+ 分割后: algorithmArr,
+ })
+
this.form = {
id: row.id,
name: row.orderName,
type: typeValue,
department: deptId,
- handler: handlerId, // 使用映射后的处理人ID
- algorithm: algorithmArr, // 回显为数组
+ handler: handlerId,
+ algorithm: algorithmArr,
location: Array.isArray(row.location) && row.location.length >= 2
? [Number(row.location[0]), Number(row.location[1])]
: [],
@@ -1855,6 +1872,7 @@
content: row.content,
photos: [],
}
+
this.form.location = Array.isArray(row.location) && row.location.length >= 2
? [
Number(row.location[0]),
@@ -1871,14 +1889,36 @@
}
// 如果有图片，添加到表单中
if (row.photo_url) {
+ // 创建一个带有必要信息的文件对象
this.form.photos = [{
- name: 'existing-photo',
- url: row.photo_url
+ name: 'existing-photo.jpg', // 添加默认扩展名
+ url: row.photo_url, // 用于预览的URL
+ status: 'success', // 标记为已上传成功
+ raw: null, // 初始化为null
+ existingUrl: row.photo_url // 保存原始URL，用于区分是否为已存在的图片
}]
}
+ // 调试输出
+ console.log('编辑表单数据:', {
+ 原始算法值: row.aiType,
+ 处理后算法值: algorithmArr,
+ 表单数据: this.form
+ })
+
this.dialogVisible = true
},
+
+ // 添加数据监听以确保算法数据的响应性
+ watch: {
+ 'form.algorithm': {
+ handler (newVal) {
+ console.log('算法值变化:', newVal)
+ },
+ deep: true
+ }
+ },
+
// 添加删除方法
handleDelete (row) {
this.$confirm('确认删除该工单?', '提示', {
@@ -2519,8 +2559,8 @@
:deep(.el-image) {
width: 100% !important;
- max-height: 100%;
max-width: 100%;
+ max-height: 100%;
.el-image__inner {
width: 100%;
--
Gitblit v1.9.3