From 999afe35bdb3a456400c715ee13f9eef1e2aa2a0 Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Mon, 14 Apr 2025 09:52:34 +0800
Subject: [PATCH] 工单系统页面优化
---
src/views/tickets/ticket.vue | 476 ++++++++++++++++++++++++----------------------------
src/api/tickets/ticket.js | 16 +
2 files changed, 234 insertions(+), 258 deletions(-)
diff --git a/src/api/tickets/ticket.js b/src/api/tickets/ticket.js
index 2ed3753..5661674 100644
--- a/src/api/tickets/ticket.js
+++ b/src/api/tickets/ticket.js
@@ -71,3 +71,19 @@
},
});
};
+
+// 新增接口：获取状态统计数据
+export const getstatusCount = () => {
+ return request({
+ url: '/drone-device-core/jobEvent/getstatusCount',
+ method: 'get',
+ });
+};
+
+export const getStepInfo = (eventNum) => {
+ return request({
+ url: '/drone-device-core/jobEvent/getStepInfo',
+ method: 'get',
+ params: { eventNum }
+ });
+};
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index 3b7228e..aa45fa6 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -5,79 +5,31 @@
<div class="tab-content">
<!-- 查询条件筛选栏 -->
<div class="filter-bar">
- <el-input
- v-model="filters.keyword"
- placeholder="请输入关键字"
- class="filter-item"
- size="small"
- clearable
- @keyup.enter="handleSearch"
- />
- <el-select
- v-model="filters.department"
- placeholder="请选择所属单位"
- class="filter-item"
- size="small"
- clearable
- >
+ <el-input v-model="filters.keyword" placeholder="请输入关键字" class="filter-item" size="small" clearable
+ @keyup.enter="handleSearch" />
+ <el-select v-model="filters.department" placeholder="请选择所属单位" class="filter-item" size="small" clearable>
<el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
- <el-select
- v-model="filters.type"
- placeholder="请选择工单类型"
- class="filter-item"
- size="small"
- clearable
- >
+ <el-select v-model="filters.type" placeholder="请选择工单类型" class="filter-item" size="small" clearable>
<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
- <el-date-picker
- v-model="filters.dateRange"
- type="daterange"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- class="date-picker"
- size="small"
- value-format="yyyy-MM-dd"
- />
- <el-select
- v-model="filters.status"
- placeholder="请选择状态"
- class="filter-item"
- size="small"
- clearable
- >
+ <el-date-picker v-model="filters.dateRange" type="daterange" class="filter-item" size="small"
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+ </el-date-picker>
+ <el-select v-model="filters.status" placeholder="请选择状态" class="filter-item" size="small" clearable>
<el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
- <el-select
- v-model="filters.algorithm"
- placeholder="请选择关联算法"
- class="filter-item"
- size="small"
- clearable
- >
- <el-option
- v-for="item in algorithms"
- :key="item.dict_key"
- :label="item.dict_value"
- :value="item.dict_key"
- />
+ <el-select v-model="filters.algorithm" placeholder="请选择关联算法" class="filter-item" size="small" clearable>
+ <el-option v-for="item in algorithms" :key="item.dict_key" :label="item.dict_value"
+ :value="item.dict_key" />
</el-select>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">查询</el-button>
<el-button icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
</div>
<!-- 表格部分 -->
- <avue-crud
- v-model="tableData"
- :option="option"
- :data="tableData"
- v-model:page="page"
- @size-change="sizeChange"
- @current-change="handleCurrentChange"
- :table-loading="loading"
- >
+ <avue-crud v-model="tableData" :option="option" :data="tableData" v-model:page="page"
+ @size-change="sizeChange" @current-change="handleCurrentChange" :table-loading="loading">
<template #menu-left>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建工单</el-button>
<el-button type="success" plain icon="el-icon-download" @click="exportData">导出</el-button>
@@ -85,7 +37,8 @@
<template #menu="{ row }">
<template v-if="row.status === -1">
<el-button type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
- <el-button type="text" icon="el-icon-delete" class="danger-button" @click="handleDelete(row)">删除</el-button>
+ <el-button type="text" icon="el-icon-delete" class="danger-button"
+ @click="handleDelete(row)">删除</el-button>
</template>
<template v-else>
<el-button type="text" icon="el-icon-view" @click="handleViewDetail(row)">详情</el-button>
@@ -158,17 +111,13 @@
<el-form-item label="地图选址" prop="location">
<div class="map-select">
<!-- 替换地图为按钮 -->
- <avue-input-map
- v-model="form.location"
- :params="mapParams"
- @change="handleLocationChange"
- type="button"
- >
+ <avue-input-map v-model="form.location" :params="mapParams" @change="handleLocationChange"
+ type="button">
<el-button type="primary" plain>
<i class="el-icon-map-location"></i> 选择位置
</el-button>
</avue-input-map>
-
+
<!-- 添加位置信息显示 -->
<div v-if="form.location && form.location.length >= 2" class="selected-location">
<p>已选位置: {{ formatLocation(form.location) }}</p>
@@ -187,18 +136,9 @@
<el-input type="textarea" v-model="form.content" rows="3" placeholder="请输入工单内容描述" resize="none"></el-input>
</el-form-item>
<el-form-item label="附件图片" class="upload-item">
- <el-upload
- ref="upload"
- :action="'#'"
- :auto-upload="false"
- list-type="picture-card"
- :on-change="handleFileChange"
- :on-remove="handleUploadRemove"
- :before-upload="beforeUpload"
- :file-list="form.photos"
- :limit="1"
- accept="image/*"
- >
+ <el-upload ref="upload" :action="'#'" :auto-upload="false" list-type="picture-card"
+ :on-change="handleFileChange" :on-remove="handleUploadRemove" :before-upload="beforeUpload"
+ :file-list="form.photos" :limit="1" accept="image/*">
<i class="el-icon-plus"></i>
</el-upload>
<div class="el-upload__tip">支持jpg/png格式图片，最多1张，单张不超过5MB</div>
@@ -219,19 +159,19 @@
<div class="detail-container">
<!-- 工单状态流程 -->
<div class="status-flow">
- <el-steps :active="currentDetail.status" align-center finish-status="success">
- <el-step
- title="发起任务"
- :description="currentDetail.creator || '未知创建人'"
- />
- <el-step title="待审核" />
- <el-step title="待处理" />
- <el-step title="处理中" />
- <el-step title="已完成" />
- <el-step
- title="已完结"
- :description="currentDetail.handler || '未分配'"
- />
+ <el-steps :active="getActiveStep()" align-center finish-status="success" process-status="success" class="custom-steps">
+ <el-step v-for="(status, index) in fixedStatuses" :key="index" :title="mapStatus(status)">
+ <template #description>
+ <div class="step-info">
+ <div class="process-time" v-if="getStepTime(status)">
+ 耗时:{{ getStepTime(status) }}
+ </div>
+ <div class="handler-name">
+ {{ getStepHandler(status) }}
+ </div>
+ </div>
+ </template>
+ </el-step>
</el-steps>
</div>
@@ -258,7 +198,7 @@
<template #default="{ row }">
<!-- 修复工单内容可编辑 -->
<template v-if="currentDetail.status === 0 && row.label2 === '工单内容'">
- <el-input type="textarea" v-model="currentDetail.remarkContent" placeholder="请输入工单内容" />
+ <el-input type="textarea" v-model="currentDetail.content" placeholder="请输入工单内容" />
</template>
<!-- 修复工单类型为下拉框 -->
<template v-else-if="currentDetail.status === 0 && row.label2 === '工单类型'">
@@ -269,7 +209,8 @@
<!-- 修复任务处理人为下拉框 -->
<template v-else-if="currentDetail.status === 0 && row.label2 === '任务处理人'">
<el-select v-model="currentDetail.handler" placeholder="请选择任务处理人" @change="handleHandlerChange">
- <el-option v-for="user in departmentUsers[currentDetail.department] || []" :key="user.id" :label="user.name" :value="user.id" />
+ <el-option v-for="user in departmentUsers[currentDetail.department] || []" :key="user.id"
+ :label="user.name" :value="user.id" />
</el-select>
</template>
<template v-else>{{ row.value2 }}</template>
@@ -282,13 +223,8 @@
<div class="section-title">事件处理详情</div>
<!-- 处理中状态显示输入框 -->
<template v-if="currentDetail.status === 3">
- <el-input
- type="textarea"
- v-model="currentDetail.processingDetail"
- placeholder="请输入事件处理详情"
- :rows="4"
- style="width: 100%; margin-bottom: 10px;"
- />
+ <el-input type="textarea" v-model="currentDetail.processingDetail" placeholder="请输入事件处理详情" :rows="4"
+ style="width: 100%; margin-bottom: 10px;" />
</template>
<!-- 已完成和已完结状态显示只读文本 -->
<template v-else>
@@ -301,17 +237,9 @@
<!-- 上传图片 -->
<div v-if="[3, 4].includes(currentDetail.status)" class="form-section">
<div class="section-title">上传图片</div>
- <el-upload
- ref="upload"
- :action="'#'"
- :auto-upload="false"
- list-type="picture-card"
- :on-change="handleFileChange"
- :on-remove="handleUploadRemove"
- :before-upload="beforeUpload"
- :file-list="[]"
- accept="image/*"
- >
+ <el-upload ref="upload" :action="'#'" :auto-upload="false" list-type="picture-card"
+ :on-change="handleFileChange" :on-remove="handleUploadRemove" :before-upload="beforeUpload" :file-list="[]"
+ accept="image/*">
<i class="el-icon-plus"></i>
</el-upload>
<div class="el-upload__tip">支持 jpg/png 格式图片，最多 5 张，单张不超过 5MB</div>
@@ -324,13 +252,8 @@
<div class="media-box">
<div class="media-title">事件图片/事件视频</div>
<div class="media-content">
- <el-image
- v-if="currentDetail.mediaUrl"
- :src="currentDetail.mediaUrl"
- :preview-src-list="[currentDetail.mediaUrl]"
- fit="cover"
- style="width: 100%; height: 300px;"
- >
+ <el-image v-if="currentDetail.mediaUrl" :src="currentDetail.mediaUrl"
+ :preview-src-list="[currentDetail.mediaUrl]" fit="cover" style="width: 100%; height: 300px;">
<template #placeholder>
<div class="image-placeholder">
<i class="el-icon-picture-outline"></i>
@@ -354,13 +277,9 @@
<template v-if="currentDetail.status === 5">
<div class="media-title">工单处理图片</div>
<div class="media-content">
- <el-image
- v-if="currentDetail.updatePhotoUrl"
- :src="currentDetail.updatePhotoUrl"
- :preview-src-list="[currentDetail.updatePhotoUrl]"
- fit="cover"
- style="width: 100%; height: 300px;"
- >
+ <el-image v-if="currentDetail.updatePhotoUrl" :src="currentDetail.updatePhotoUrl"
+ :preview-src-list="[currentDetail.updatePhotoUrl]" fit="cover"
+ style="width: 100%; height: 300px;">
<template #placeholder>
<div class="image-placeholder">
<i class="el-icon-picture-outline"></i>
@@ -445,7 +364,7 @@
</template>
<script>
-import { getList, createTicket, getTicketInfo, flowEvent } from '@/api/tickets/ticket';
+import { getList, createTicket, getTicketInfo, flowEvent, getstatusCount, getStepInfo } from '@/api/tickets/ticket';
import { export_json_to_excel } from '@/utils/exportExcel';
import geoJson from '@/assets/geoJson.json'
@@ -497,7 +416,7 @@
viewBtn: false,
editBtn: false,
delBtn: false,
- addBtn:false,
+ addBtn: false,
menu: true,
page: true,
column: [
@@ -506,11 +425,11 @@
{ label: "工单名称", prop: "orderName", width: 150 },
{ label: "所属单位", prop: "department", width: 100 },
{ label: "发起时间", prop: "startTime", width: 160 },
- { label: "关联算法", prop: "content", width: 165 },
+ { label: "关联算法", prop: "aiType", width: 165 },
{ label: "工单类型", prop: "type", width: 108 },
{
label: "工单内容",
- prop: "remarkContent",
+ prop: "content",
slot: true,
width: 250,
overHidden: true
@@ -524,7 +443,7 @@
total: 0,
currentPage: 1,
pageSize: 10,
- pageSizes: [10, 20, 30 ]
+ pageSizes: [10, 20, 30]
},
dialogVisible: false,
detailVisible: false,
@@ -539,7 +458,7 @@
address: '',
content: '',
photos: [],
- remarkContent: '', // 新增字段，用于存储后端返回的 content
+ content: '', // 新增字段，用于存储后端返回的 content
},
rules: {
name: [{ required: true, message: '请输入工单名称', trigger: 'blur' }],
@@ -568,11 +487,14 @@
department: [{ required: true, message: '请选择部门', trigger: 'change' }],
handler: [{ required: true, message: '请选择处理人', trigger: 'change' }],
}, // 新增：派发表单验证规则
+ stepInfos: [], // 新增：存储步骤信息
+ fixedStatuses: ["2", "0", "3", "4", "5"], // 固定的五个状态
};
},
created() {
this.loadAMapScripts();
this.fetchDropdownData();
+ this.fetchTabCounts(); // 新增：初始化时获取 tab 数据
},
mounted() {
this.fetchTableData();
@@ -621,7 +543,7 @@
},
{
label: "关联算法",
- value: this.currentDetail.content,
+ value: this.currentDetail.aiType,
editable: false,
},
{
@@ -636,7 +558,7 @@
},
{
label: "工单内容",
- value: this.currentDetail.remarkContent,
+ value: this.currentDetail.content,
editable: this.currentDetail.status === 0,
type: "textarea",
},
@@ -650,10 +572,10 @@
{ label: "当前状态", value: this.mapStatus(this.currentDetail.status), editable: false },
{ label: "事件地址", value: this.currentDetail.address, editable: false },
{ label: "工单类型", value: this.currentDetail.type, editable: this.currentDetail.status === 0, type: "select", options: this.types },
- { label: "关联算法", value: this.currentDetail.content, editable: false },
+ { label: "关联算法", value: this.currentDetail.aiType, editable: false },
{ label: "任务接收单位", value: this.currentDetail.department, editable: false },
{ label: "发起任务时间", value: this.currentDetail.startTime, editable: false },
- { label: "工单内容", value: this.currentDetail.remarkContent, editable: this.currentDetail.status === 0, type: "textarea" },
+ { label: "工单内容", value: this.currentDetail.content, editable: this.currentDetail.status === 0, type: "textarea" },
];
},
formattedDetailFields() {
@@ -664,10 +586,10 @@
{ label: "任务发起人", value: this.currentDetail.creator },
{ label: "当前状态", value: this.mapStatus(this.currentDetail.status) },
{ label: "事件地址", value: this.currentDetail.address }, // 包含经纬度信息
- { label: "关联算法", value: this.currentDetail.content },
+ { label: "关联算法", value: this.currentDetail.aiType },
{ label: "任务接收单位", value: this.currentDetail.department },
{ label: "发起任务时间", value: this.currentDetail.startTime },
- { label: "工单内容", value: this.currentDetail.remarkContent },
+ { label: "工单内容", value: this.currentDetail.content },
];
// 将字段分成两列
@@ -690,14 +612,14 @@
const areaCode = this.userInfo.detail.areaCode;
const subAreaCode = areaCode ? areaCode.substring(0, 6) : '';
const adcodeObj = getAdcodeObj(geoJson, 'adcode', subAreaCode);
-
+
console.log('区域代码:', subAreaCode);
-
+
// 直接从返回对象中获取正确的路径
const center = adcodeObj?.payload?.objects?.collection?.geometries?.[0]?.properties?.center;
-
+
console.log('获取到的中心点:', center);
-
+
if (Array.isArray(center) && center.length === 2) {
this.mapParams.center = center;
console.log('成功设置地图中心点:', center);
@@ -761,9 +683,9 @@
const currentTab = this.tabs.find(tab => tab.name === this.activeTab);
const params = {
word_order_type: this.filters.type || undefined,
- status: currentTab?.name === 'myTickets' ? undefined :
- this.filters.status !== "" ? Number(this.filters.status) :
- currentTab?.value,
+ status: currentTab?.name === 'myTickets' ? undefined :
+ this.filters.status !== "" ? Number(this.filters.status) :
+ currentTab?.value,
event_name: this.filters.keyword || undefined,
dept_id: this.filters.department || undefined,
start_date: this.filters.dateRange?.[0] ? this.formatDate(this.filters.dateRange[0]) : undefined,
@@ -772,7 +694,7 @@
size: Number(this.page.pageSize), // 使用每页条数
ai_type: this.filters.algorithm || undefined, // 添加算法参数
};
-
+
const response = await getList(params);
if (!response?.data?.data?.records) {
throw new Error('接口返回数据格式不正确');
@@ -780,10 +702,10 @@
const { total, records } = response.data.data;
let filteredRecords = records;
-
+
// 如果是"我发起的"tab，过滤数据
if (currentTab?.name === 'myTickets') {
- filteredRecords = records.filter(item =>
+ filteredRecords = records.filter(item =>
String(item.create_user_id) === String(item.user_id)
);
}
@@ -793,22 +715,25 @@
const latitude = Number(item.latitude) || 0;
return {
id: item.id,
- orderNumber: item.event_num , // 修改这里：优先使用 event_num
+ orderNumber: item.event_num, // 修改这里：优先使用 event_num
orderName: item.event_name,
department: this.departments.find(d => d.value === item.dept_id)?.label || item.dept_name,
startTime: item.create_time,
- content: item.ai_types,
- remarkContent: item.content, // 将后端返回的 content 映射为 remarkContent
+ aiType: item.ai_types,
+ content: item.content, // 将后端返回的 content 映射为 content
type: this.types.find(t => t.value === item.event_dict_key)?.label,
keyData: (!isNaN(longitude) && !isNaN(latitude))
? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`
: '未知位置',
- address: item.address ,
- creator: item.create_user ,
+ address: item.address,
+ creator: item.create_user,
handler: item.update_user || '未分配',
status: Number(item.status || 0),
// 保存原始字段
photo_url: item.photo_url || '', // 保存原始 photo_url
+ video_url: item.video_url || '', // 保存原始 video_url
+ location: (!isNaN(longitude) && !isNaN(latitude)) ? [longitude, latitude] : null,
+ processing_details: item.processing_details || '', // 添加处理详情字段
video_url: item.video_url || '', // 保存原始 video_url
location: (!isNaN(longitude) && !isNaN(latitude)) ? [longitude, latitude] : null,
processing_details: item.processing_details || '', // 添加处理详情字段
@@ -824,16 +749,7 @@
this.page.total = total || 0;
}
- if (this.activeTab === 'all') {
- // 计算"我发起的"工单数量
- const myTicketsCount = records.filter(item =>
- String(item.create_user_id) === String(item.user_id)
- ).length;
-
- // 更新全局计数，包括"我发起的"数量
- this.updateGlobalCounts(records, total, myTicketsCount);
- }
- this.updateTabCounts();
+ await this.fetchTabCounts();
} catch (error) {
console.error("获取数据失败:", error);
this.$message.error(error.message || "获取数据失败");
@@ -923,7 +839,7 @@
}
// 过滤掉所有 undefined 的字段
- Object.keys(submitData).forEach(key =>
+ Object.keys(submitData).forEach(key =>
submitData[key] === undefined && delete submitData[key]
);
@@ -949,14 +865,14 @@
async handleLocationChange(val) {
console.log('地图选址返回值:', val);
-
+
// 处理 Proxy 对象的值
let locationValue = val.value;
if (locationValue && locationValue.length >= 3) {
// 确保我们获取到实际的数组值
this.form.location = [locationValue[0], locationValue[1]];
this.form.address = locationValue[2] || '';
-
+
console.log('解析后的位置信息:', {
经度: this.form.location[0],
纬度: this.form.location[1],
@@ -999,11 +915,36 @@
return statusMap[status] || "info";
},
+ async fetchTabCounts() {
+ try {
+ const response = await getstatusCount();
+ const { statusCount, totalCount, userCount } = response.data.data;
+
+ console.log('接口返回的状态统计数据:', { statusCount, totalCount, userCount });
+
+ this.tabs.forEach(tab => {
+ if (tab.name === 'all') {
+ tab.count = totalCount || 0; // 总工单数
+ } else if (tab.name === 'myTickets') {
+ tab.count = userCount || 0; // 我发起的工单数
+ } else {
+ tab.count = statusCount[String(tab.value)] || 0; // 根据状态值映射
+ }
+ });
+
+ console.log('更新后的 tabs 数据:', this.tabs);
+ } catch (error) {
+ console.error('获取 tab 数据失败:', error);
+ this.$message.error('获取 tab 数据失败');
+ }
+ },
+
handleTabChange(tab) {
this.activeTab = tab.props?.name || tab.name;
- this.filters.status = "";
+ this.handleReset();
this.page.currentPage = 1;
this.fetchTableData();
+ this.fetchTabCounts(); // 切换 tab 时重新获取数据
},
handleSearch() {
@@ -1041,43 +982,6 @@
await this.fetchTableData();
},
- updateGlobalCounts(records, total, myTicketsCount) {
- const counts = {
- all: total,
- pending: 0,
- processing: 0,
- inProgress: 0,
- completed: 0,
- closed: 0,
- myTickets: myTicketsCount || 0 // 添加"我发起的"计数
- };
-
- records.forEach(item => {
- const tab = this.tabs.find(t => t.value === Number(item.status));
- if (tab) {
- counts[tab.name] = (counts[tab.name] || 0) + 1;
- }
- });
-
- this.globalCounts = counts;
- },
-
- updateTabCounts() {
- if (this.activeTab === 'all') {
- this.tabs.forEach(tab => {
- tab.count = this.globalCounts[tab.name] || 0;
- });
- } else {
- this.tabs.forEach(tab => {
- if (tab.name === this.activeTab) {
- tab.count = this.tableData.length;
- } else {
- tab.count = this.globalCounts[tab.name] || 0;
- }
- });
- }
- },
-
handleAdd() {
this.dialogVisible = true;
},
@@ -1093,7 +997,7 @@
address: '',
content: '',
photos: [],
- remarkContent: '', // 新增字段，用于存储后端返回的 content
+ content: '', // 新增字段，用于存储后端返回的 content
};
if (this.$refs.form) {
this.$refs.form.resetFields();
@@ -1107,16 +1011,13 @@
return `${location[0].toFixed(6)}, ${location[1].toFixed(6)}`;
},
- handleViewDetail(row) {
+ async handleViewDetail(row) {
console.log('查看详情数据:', row);
- // 重要：重置上传组件的文件列表
+ // 重置上传组件的文件列表
this.$nextTick(() => {
if (this.$refs.upload) {
- // 如果是多个上传组件，需要处理数组情况
if (Array.isArray(this.$refs.upload)) {
- this.$refs.upload.forEach(upload => {
- upload.clearFiles();
- });
+ this.$refs.upload.forEach(upload => upload.clearFiles());
} else {
this.$refs.upload.clearFiles();
}
@@ -1128,35 +1029,64 @@
processingDetail: row.processing_details || '',
mediaUrl: row.photo_url || row.video_url || '',
updatePhotoUrl: row.update_photo_url || '',
- photos: [], // 重置photos数组
+ photos: [],
};
-
- if ([4, 5].includes(row.status) && !detailData.processingDetail) {
- this.fetchProcessingDetails(row.id);
+
+ try {
+ const stepResponse = await getStepInfo(row.orderNumber);
+ console.log('接口返回的步骤信息:', stepResponse.data.data);
+
+ const steps = stepResponse.data.data || [];
+
+ // 根据接口返回的步骤信息补充处理人和时间
+ this.stepInfos = this.fixedStatuses.map(status => {
+ const step = steps.find(s => String(s.status) === String(status));
+ return {
+ status,
+ name: step ? step.name : '',
+ time: step ? step.time : null,
+ };
+ });
+
+ console.log('处理后的步骤信息:', this.stepInfos);
+
+ this.currentDetail.status = row.status; // 使用行数据中的状态
+ } catch (error) {
+ console.error('获取步骤信息失败:', error);
+ // 如果接口调用失败，使用默认的固定状态
+ this.stepInfos = this.fixedStatuses.map(status => ({
+ status,
+ name: status === row.status ? row.handler || '未分配' : '未处理',
+ time: status === row.status ? row.startTime || '未知时间' : null,
+ }));
}
-
+
this.currentDetail = detailData;
console.log('当前详情数据:', this.currentDetail);
this.detailVisible = true;
},
- // 新增：获取处理详情的方法
- async fetchProcessingDetails(id) {
- try {
- const response = await getTicketInfo(id); // 假设有这个API
- if (response?.data?.data?.processing_details) {
- this.currentDetail.processingDetail = response.data.data.processing_details;
- }
- } catch (error) {
- console.error('获取处理详情失败:', error);
- }
+ getStepHandler(status) {
+ const step = this.stepInfos.find(step => step.status === status);
+ return step ? step.name : '';
},
- openMap () {
+ getStepTime(status) {
+ const step = this.stepInfos.find(step => step.status === status);
+ return step ? step.time : null;
+ },
+
+ getActiveStep() {
+ // 根据当前工单状态，返回对应的步骤索引
+ const index = this.fixedStatuses.indexOf(String(this.currentDetail.status));
+ return index !== -1 ? index : 0;
+ },
+
+ openMap() {
const areaCode = this.userInfo.detail.areaCode;
const subAreaCode = areaCode ? areaCode.substring(0, 6) : '';
const adcodeObj = getAdcodeObj(geoJson, 'adcode', subAreaCode);
-
+
console.log('区域代码:', subAreaCode);
console.log('getAdcodeObj返回值:', {
完整对象: adcodeObj,
@@ -1192,13 +1122,13 @@
try {
this.loading = true;
const currentTab = this.tabs.find(tab => tab.name === this.activeTab);
-
+
// 使用与查询列表相同的参数构造逻辑
const params = {
word_order_type: this.filters.type || undefined,
- status: currentTab?.name === 'myTickets' ? undefined :
- this.filters.status !== "" ? Number(this.filters.status) :
- currentTab?.value, // 使用当前tab的状态值
+ status: currentTab?.name === 'myTickets' ? undefined :
+ this.filters.status !== "" ? Number(this.filters.status) :
+ currentTab?.value, // 使用当前tab的状态值
keyword: this.filters.keyword || undefined,
dept_id: this.filters.department || undefined,
start_date: this.filters.dateRange?.[0] ? this.formatDate(this.filters.dateRange[0]) : undefined,
@@ -1213,11 +1143,11 @@
}
const { records } = response.data.data;
-
+
// 使用与查询列表相同的过滤逻辑
let filteredRecords = records;
if (currentTab?.name === 'myTickets') {
- filteredRecords = records.filter(item =>
+ filteredRecords = records.filter(item =>
String(item.create_user_id) === String(item.user_id)
);
}
@@ -1247,7 +1177,7 @@
const headers = [
'工单编号',
- '工单名称',
+ '工单名称',
'所属单位',
'发起时间',
'关联算法',
@@ -1311,9 +1241,9 @@
id: this.currentDetail.id,
status: this.currentDetail.status,
isPass: 0, // 0 表示通过
+ eventNum: this.currentDetail.orderNumber,
eventName: this.currentDetail.orderName, // 工单名称
eventType: this.currentDetail.type, // 工单类型
- processingDetails: this.currentDetail.remarkContent, // 使用 remarkContent 替代原来的 remark
departmentId: this.dispatchForm.department, // 派发部门 ID
handlerId: this.dispatchForm.handler, // 处理人 ID
};
@@ -1396,14 +1326,15 @@
const data = {
id: this.currentDetail.id,
status: this.currentDetail.status,
- processingDetails: this.currentDetail.processingDetail
+ processingDetails: this.currentDetail.processingDetail,
+ eventNum: this.currentDetail.orderNumber
};
// 如果有上传的图片，添加到请求中
const file = this.currentDetail.photos?.[0]?.raw || null;
const response = await flowEvent(data, file);
-
+
if (response.data.code === 0) {
this.$message.success('工单已完成');
this.detailVisible = false;
@@ -1428,8 +1359,9 @@
status: this.currentDetail.status,
isPass: 0, // 0 表示通过
eventName: this.currentDetail.orderName, // 工单名称
+ eventNum: this.currentDetail.orderNumber,
eventType: this.currentDetail.type, // 工单类型
- processingDetails: this.currentDetail.remarkContent, // 使用 remarkContent 替代原来的 remark
+ content: this.currentDetail.content, // 使用 content 替代原来的 remark
createDept: this.dispatchForm.department, // 派发部门 ID
updateUser: this.dispatchForm.handler, // 处理人 ID
};
@@ -1462,13 +1394,14 @@
const data = {
id: this.currentDetail.id,
- status: this.currentDetail.status
+ status: this.currentDetail.status,
+ eventNum: this.currentDetail.orderNumber,
};
const file = this.currentDetail.photos[0].raw;
const response = await flowEvent(data, file);
-
+
if (response.data.code === 0) {
this.$message.success('工单已完结');
this.detailVisible = false;
@@ -1486,7 +1419,7 @@
handleEdit(row) {
// 从原始数据中获取 id 和 dept_id
const originalDeptId = row.department?.value || row.dept_id;
-
+
this.form = {
id: row.id, // 保存原始 id
name: row.orderName,
@@ -1496,9 +1429,9 @@
algorithm: row.content,
location: row.location,
address: row.address,
- content: row.remarkContent,
+ content: row.content,
photos: [],
- remarkContent: row.remarkContent,
+ content: row.content,
};
// 如果有图片，添加到表单中
if (row.photo_url) {
@@ -1523,7 +1456,7 @@
status: 0,
isDelete: 1
});
-
+
if (response.data.code === 0) {
this.$message.success('删除成功');
this.fetchTableData();
@@ -1534,17 +1467,9 @@
console.error('删除失败:', error);
this.$message.error(error.message || '删除失败，请稍后重试');
}
- }).catch(() => {});
+ }).catch(() => { });
},
},
- watch: {
- tableData: {
- handler() {
- this.updateTabCounts();
- },
- deep: true
- },
- }
};
</script>
@@ -1730,7 +1655,7 @@
padding: 5px 10px;
background-color: #f5f7fa;
border-radius: 4px;
-
+
p {
margin: 5px 0;
color: #606266;
@@ -1756,7 +1681,7 @@
color: #909399;
background-color: #f5f7fa;
border-radius: 4px;
-
+
i {
font-size: 32px;
margin-bottom: 8px;
@@ -1773,6 +1698,40 @@
.status-flow {
margin-bottom: 20px;
+
+ .custom-steps {
+ .el-step__description {
+ position: relative;
+ margin: 0; /* 取消所有外边距 */
+ padding: 0; /* 取消所有内边距 */
+ }
+
+ .step-info {
+ display: flex;
+ margin: 0; /* 取消所有外边距 */
+ padding: 0; /* 取消所有内边距 */
+ justify-content: space-between;
+ align-items: center;
+ width: 130px;
+}
+
+ .process-time {
+ font-size: 10px;
+ color: #909399;
+ text-align: left;
+ margin-left: 0%;
+ padding-left: 0%;
+ flex: 1; /* 左对齐时间 */
+ }
+
+ .handler-name {
+ font-size: 14px;
+ font-weight: bold;
+ color: #303133;
+ text-align: left;
+ flex: 1; /* 右对齐名字 */
+ }
+ }
}
.basic-info {
@@ -1852,6 +1811,7 @@
.danger-button {
color: #F56C6C;
}
+
.danger-button:hover {
color: #f78989;
}
--
Gitblit v1.9.3