From df42fa7e97c4a93caa17b2aed5aecdc768d8bbd7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 15 Apr 2025 21:57:46 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/drone-web-manage
---
src/views/tickets/ticket.vue | 1618 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 1,135 insertions(+), 483 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index 3b7228e..673180f 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -5,87 +5,44 @@
<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 ref="avueCrud" v-model="tableData" :option="option" :data="tableData" v-model:page="page"
+ @size-change="sizeChange" @current-change="handleCurrentChange" :table-loading="loading"
+ @selection-change="handleSelectionChange">
<template #menu-left>
- <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建工单</el-button>
+ <el-button v-if="activeTab === 'all' || activeTab === 'myTickets'" type="primary" icon="el-icon-plus"
+ @click="handleAdd">新建工单</el-button>
+ <el-button v-if="activeTab === 'pending'" type="success" icon="el-icon-check"
+ @click="openReviewDialog">批量审核</el-button>
<el-button type="success" plain icon="el-icon-download" @click="exportData">导出</el-button>
</template>
<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>
@@ -104,11 +61,9 @@
<!-- 新建工单对话框 -->
<el-dialog v-model="dialogVisible" title="新建工单" width="70%" :close-on-click-modal="false" @close="resetForm">
- <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="create-ticket-form">
- <!-- 基本信息 -->
+ <el-form :model="form" :rules="rules" ref="form" label-width="90px" class="create-ticket-form">
<div class="form-section">
- <div class="section-title">基本信息</div>
- <el-row :gutter="12">
+ <el-row :gutter="16">
<el-col :span="12">
<el-form-item label="工单名称" prop="name">
<el-input v-model="form.name" placeholder="请输入工单名称"></el-input>
@@ -122,7 +77,8 @@
</el-form-item>
</el-col>
</el-row>
- <el-row :gutter="12">
+
+ <el-row :gutter="16">
<el-col :span="12">
<el-form-item label="所属部门" prop="department">
<el-select v-model="form.department" placeholder="请选择所属部门" @change="handleDepartmentChange"
@@ -133,13 +89,15 @@
</el-col>
<el-col :span="12">
<el-form-item label="处理人员" prop="handler">
- <el-select v-model="form.handler" placeholder="请选择处理人员" :disabled="!form.department" class="full-width">
+ <el-select v-model="form.handler" placeholder="请先选择所属部门" :disabled="!form.department"
+ class="full-width">
<el-option v-for="user in availableHandlers" :key="user.id" :label="user.name" :value="user.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
- <el-row :gutter="12">
+
+ <el-row :gutter="16">
<el-col :span="12">
<el-form-item label="关联算法" prop="algorithm">
<el-select v-model="form.algorithm" placeholder="请选择关联算法" class="full-width">
@@ -147,69 +105,45 @@
</el-select>
</el-form-item>
</el-col>
- </el-row>
- </div>
-
- <!-- 修改位置信息部分 -->
- <div class="form-section">
- <div class="section-title">位置信息</div>
- <el-row :gutter="12">
- <el-col :span="24">
- <el-form-item label="地图选址" prop="location">
- <div class="map-select">
- <!-- 替换地图为按钮 -->
- <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-col :span="12">
+ <el-form-item label="选择位置" prop="location" required>
+ <div class="location-wrapper">
+ <avue-input-map v-model="form.location" :params="mapParams" @change="handleLocationChange"
+ type="button">
+ <el-button type="primary" plain class="map-button">
+ <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>
- <p>详细地址: {{ form.address || '获取中...' }}</p>
- </div>
+ <div v-if="form.location?.length >= 2" class="location-text">{{ form.address || '获取地址中...' }}</div>
</div>
</el-form-item>
</el-col>
</el-row>
- </div>
- <!-- 工单内容 -->
- <div class="form-section">
- <div class="section-title">工单内容</div>
- <el-form-item label="工单描述" prop="content">
- <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/*"
- >
- <i class="el-icon-plus"></i>
- </el-upload>
- <div class="el-upload__tip">支持jpg/png格式图片，最多1张，单张不超过5MB</div>
- </el-form-item>
+ <el-row :gutter="16">
+ <el-col :span="12">
+ <el-form-item label="工单内容" prop="content">
+ <el-input type="textarea" v-model="form.content" :rows="4" placeholder="请输入工单内容描述"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="附件图片" prop="photos" required class="upload-wrapper">
+ <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/*" class="uploader">
+ <i class="el-icon-plus"></i>
+ </el-upload>
+ <div class="upload-tip">支持jpg/png格式图片，单张不超过5MB</div>
+ </el-form-item>
+ </el-col>
+ </el-row>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
- <el-button size="small" @click="dialogVisible = false">取 消</el-button>
- <el-button size="small" type="info" @click="saveDraft">存草稿</el-button>
- <el-button size="small" type="primary" @click="submitForm">提 交</el-button>
+ <el-button type="danger" @click="submitForm">发布</el-button>
+ <el-button type="infoprimary" plain @click="saveDraft">存草稿</el-button>
+ <el-button @click="dialogVisible = false">取 消</el-button>
</div>
</template>
</el-dialog>
@@ -218,20 +152,50 @@
<el-dialog v-model="detailVisible" title="工单详情" width="80%" append-to-body>
<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 || '未分配'"
- />
+ <div class="custom-steps-container">
+ <!-- 标题行 -->
+ <div class="steps-titles">
+ <div class="step-title" :class="{ active: true }">
+ 发起任务
+ </div>
+ <div v-for="(status, index) in dynamicFixedStatuses" :key="index"
+ :class="{ active: Number(currentDetail.status) >= Number(status) }" class="step-title">
+ {{ mapStatus(status) }}
+ </div>
+ </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">
+ {{ currentDetail.startTime || '未知时间' }}
+ </div>
+ </template>
+ </el-step>
+ <el-step v-for="(status, index) in dynamicFixedStatuses" :key="index">
+ <template #description>
+ <span class="step-description">
+ {{ getStepHandler(status) }}
+ </span>
+ <div class="step-description" v-if="getStepTime(status)">
+ <span style=" position: absolute;
+ right: 80%;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 100px;
+ margin-left: 4px;
+ color: #666;
+ font-size: 12px;">耗时:{{ getStepTime(status) }}</span>
+ </div>
+ <div class="step-description">
+ {{ getStepCreateTime(status) }}
+ </div>
+ </template>
+ </el-step>
</el-steps>
</div>
@@ -258,7 +222,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 +233,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 +247,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 +261,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 +276,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 +301,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>
@@ -381,7 +324,7 @@
<div class="media-title">地图标记事件点</div>
<div class="media-content">
<div id="map-container" style="width: 100%; height: 300px; background: #f5f5f5;">
- <map-container v-if='detailVisible' :rowDetails="currentDetail"></map-container>
+ <map-container v-if='detailVisible' ref="MapContainer"></map-container>
</div>
</div>
</template>
@@ -441,11 +384,56 @@
<el-button type="primary" @click="submitDispatch">确认派发</el-button>
</template>
</el-dialog>
+
+ <!-- 添加在其他 dialog 组件之后 -->
+ <el-dialog v-model="reviewDialogVisible" title="批量审核" width="70%" append-to-body custom-class="review-dialog">
+ <div class="review-container">
+ <div class="review-image-wrapper">
+ <!-- 修改左右箭头的显示条件 -->
+ <div v-if="selections.length > 1 && currentReviewImage" class="arrow-button left" @click="handlePrevImage">
+ <i class="el-icon-arrow-left"></i>
+ </div>
+
+ <div class="review-image-container">
+ <el-image v-if="currentReviewImage" :src="currentReviewImage" fit="cover" :preview-src-list="getImageList()"
+ :initial-index="currentImageIndex - 1" class="preview-image">
+ <template #error>
+ <div class="image-error">
+ <i class="el-icon-picture-outline"></i>
+ <span>图片加载失败</span>
+ </div>
+ </template>
+ </el-image>
+ <div v-else class="no-image">暂无图片</div>
+ </div>
+
+ <!-- 修改右箭头的显示条件 -->
+ <div v-if="selections.length > 1 && currentReviewImage" class="arrow-button right" @click="handleNextImage">
+ <i class="el-icon-arrow-right"></i>
+ </div>
+ </div>
+
+ <!-- 修改分页器的显示条件 -->
+ <div class="review-pagination" v-if="selections.length > 1 && currentReviewImage">
+ <el-pagination small layout="prev, pager, next" hide-on-single-page :total="selections.length"
+ :current-page="currentImageIndex" :page-size="1" @current-change="handleImagePageChange">
+ </el-pagination>
+ </div>
+ </div>
+
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="handleBatchApprove">通过</el-button>
+ <el-button type="danger" @click="handleBatchReject">不通过</el-button>
+ <el-button @click="cancleBatchReject">取消</el-button>
+ </div>
+ </template>
+ </el-dialog>
</basic-container>
</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'
@@ -492,27 +480,30 @@
option: {
border: true,
stripe: true,
+ selection: true, // 添加多选功能
+ index: true, // 保留序号功能
+ indexLabel: '序号',
menuWidth: 150,
searchMenuSpan: 6,
viewBtn: false,
editBtn: false,
delBtn: false,
- addBtn:false,
+ addBtn: false,
menu: true,
page: true,
column: [
- { label: "序号", prop: "id", width: 70 },
+ // { label: "序号", prop: "id", width: 70 },
{ label: "工单编号", prop: "orderNumber", width: 150 },
{ label: "工单名称", prop: "orderName", width: 150 },
{ label: "所属单位", prop: "department", width: 100 },
{ label: "发起时间", prop: "startTime", width: 160 },
- { label: "关联算法", prop: "content", width: 165 },
+ { label: "关联算法", prop: "aiType", width: 160 },
{ label: "工单类型", prop: "type", width: 108 },
{
label: "工单内容",
- prop: "remarkContent",
+ prop: "content",
slot: true,
- width: 250,
+ width: 233,
overHidden: true
},
{ label: "创建人", prop: "creator", width: 100 },
@@ -524,7 +515,7 @@
total: 0,
currentPage: 1,
pageSize: 10,
- pageSizes: [10, 20, 30 ]
+ pageSizes: [10, 20, 30]
},
dialogVisible: false,
detailVisible: false,
@@ -539,7 +530,7 @@
address: '',
content: '',
photos: [],
- remarkContent: '', // 新增字段，用于存储后端返回的 content
+ content: '', // 新增字段，用于存储后端返回的 content
},
rules: {
name: [{ required: true, message: '请输入工单名称', trigger: 'blur' }],
@@ -547,6 +538,27 @@
department: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
handler: [{ required: true, message: '请选择处理人员', trigger: 'change' }],
content: [{ required: true, message: '请输入工单内容', trigger: 'blur' }],
+ algorithm: [{ required: true, message: '请选择关联算法', trigger: 'change' }],
+ location: [{
+ validator: (rule, value, callback) => {
+ if (!value || value.length < 2) {
+ callback(new Error('请选择位置信息'));
+ } else {
+ callback();
+ }
+ },
+ trigger: 'change'
+ }],
+ photos: [{
+ validator: (rule, value, callback) => {
+ if (!this.form.photos || this.form.photos.length === 0) {
+ callback(new Error('请上传工单图片'));
+ } else {
+ callback();
+ }
+ },
+ trigger: 'change'
+ }],
},
departmentUsers: {},
loading: false,
@@ -568,11 +580,20 @@
department: [{ required: true, message: '请选择部门', trigger: 'change' }],
handler: [{ required: true, message: '请选择处理人', trigger: 'change' }],
}, // 新增：派发表单验证规则
+ stepInfos: [], // 新增：存储步骤信息
+ fixedStatuses: ["2", "0", "3", "4", "5"], // 固定的五个状态
+ userNameToIdMap: {}, // 新增用户名到ID的映射
+ workType: 0, // 新增：当前工单work_type
+ selections: [], // 添加选中行数据数组
+ reviewDialogVisible: false, // 新增：审核对话框可见性
+ currentReviewImage: '', // 新增：当前审核图片
+ currentImageIndex: 1, // 新增：当前图片索引
};
},
created() {
this.loadAMapScripts();
this.fetchDropdownData();
+ this.fetchTabCounts(); // 新增：初始化时获取 tab 数据
},
mounted() {
this.fetchTableData();
@@ -621,7 +642,7 @@
},
{
label: "关联算法",
- value: this.currentDetail.content,
+ value: this.currentDetail.aiType,
editable: false,
},
{
@@ -636,7 +657,7 @@
},
{
label: "工单内容",
- value: this.currentDetail.remarkContent,
+ value: this.currentDetail.content,
editable: this.currentDetail.status === 0,
type: "textarea",
},
@@ -650,10 +671,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 +685,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 },
];
// 将字段分成两列
@@ -682,6 +703,13 @@
}
return formattedFields;
},
+ dynamicFixedStatuses() {
+ // 根据当前工单work_type动态返回流程
+ if (this.workType === 1) {
+ return ["3", "4", "5"]; // 人工工单：处理中-已完成-已完结
+ }
+ return this.fixedStatuses; // 默认流程
+ },
...mapGetters(['userInfo']),
},
methods: {
@@ -690,17 +718,13 @@
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);
} else {
// 如果找不到中心点，尝试使用 bbox 的中心点
const bbox = adcodeObj?.payload?.bbox;
@@ -708,20 +732,75 @@
const centerX = (bbox[0] + bbox[2]) / 2;
const centerY = (bbox[1] + bbox[3]) / 2;
this.mapParams.center = [centerX, centerY];
- console.log('使用 bbox 计算的中心点:', this.mapParams.center);
} else {
- console.warn('无法获取有效的中心点坐标，使用默认值');
this.mapParams.center = [115.861365, 28.621311];
}
}
this.mapLoaded = true;
} catch (error) {
- console.error('地图脚本加载失败:', error);
this.$message.error('地图加载失败，请检查网络或API Key配置');
}
},
+ async handleBatchApprove() {
+ try {
+ if (this.selections.length === 0) {
+ this.$message.warning('没有选中的工单');
+ return;
+ }
+ const currentItem = this.selections[this.currentImageIndex - 1];
+ if (!currentItem) {
+ this.$message.warning('当前工单数据无效');
+ return;
+ }
+
+ await this.$confirm('确认审核通过当前工单?', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ });
+
+ const data = {
+ id: currentItem.id,
+ status: currentItem.status,
+ isPass: 0,
+ eventNum: currentItem.orderNumber,
+ eventName: currentItem.orderName,
+ eventType: currentItem.type,
+ };
+
+ const response = await flowEvent(data);
+ if (response.data.code === 0) {
+ this.$message.success('工单审核通过');
+
+ // 创建新的数组而不是修改原数组
+ const newSelections = [...this.selections];
+ newSelections.splice(this.currentImageIndex - 1, 1);
+ this.selections = newSelections;
+
+ // 修正索引并更新图片
+ if (this.selections.length > 0) {
+ if (this.currentImageIndex > this.selections.length) {
+ this.currentImageIndex = this.selections.length;
+ }
+ this.updateCurrentReviewImage();
+ } else {
+ this.reviewDialogVisible = false;
+ this.currentImageIndex = 1;
+ this.currentReviewImage = '';
+ }
+
+ // 刷新表格数据
+ this.fetchTableData();
+ } else {
+ throw new Error(response.data.msg || '审核失败');
+ }
+ } catch (error) {
+ if (error === 'cancel') return;
+ this.$message.error(error.message || '审核失败，请稍后重试');
+ }
+ },
async fetchDropdownData() {
try {
const response = await getTicketInfo();
@@ -747,8 +826,15 @@
label: item.dict_value, // 修改为 label
value: item.dict_key, // 修改为 value
}));
+
+ // 构建用户ID和名称的映射关系
+ this.userNameToIdMap = {};
+ dept_data.forEach(dept => {
+ (dept.user_data || []).forEach(user => {
+ this.userNameToIdMap[user.name] = user.id;
+ });
+ });
} catch (error) {
- console.error('获取下拉框数据失败:', error);
this.$message.error('加载下拉框数据失败');
}
},
@@ -761,9 +847,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,
@@ -771,8 +857,10 @@
current: Number(this.page.currentPage), // 使用当前页码
size: Number(this.page.pageSize), // 使用每页条数
ai_type: this.filters.algorithm || undefined, // 添加算法参数
+ // 添加 is_draft 参数，仅在"我发起的"标签页时设置为1
+ is_draft: currentTab?.name === 'myTickets' ? 1 : undefined
};
-
+
const response = await getList(params);
if (!response?.data?.data?.records) {
throw new Error('接口返回数据格式不正确');
@@ -780,10 +868,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,18 +881,18 @@
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),
// 保存原始字段
@@ -813,7 +901,7 @@
location: (!isNaN(longitude) && !isNaN(latitude)) ? [longitude, latitude] : null,
processing_details: item.processing_details || '', // 添加处理详情字段
update_photo_url: item.update_photo_url || '', // 添加处理图片字段
-
+ work_type: item.work_type !== undefined ? Number(item.work_type) : 0, // 保留work_type字段并转为数字
};
});
@@ -824,18 +912,8 @@
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 || "获取数据失败");
this.tableData = [];
this.page.total = 0;
@@ -846,53 +924,62 @@
},
async submitForm() {
- this.$refs.form.validate(async (valid) => {
- if (valid) {
- if (!this.form.location || this.form.location.length < 2) {
- this.$message.warning('请在地图上选择位置');
- return;
- }
+ try {
+ // 提交时需要完整验证
+ await this.$refs.form.validate();
- try {
- const submitData = {
- eventName: this.form.name,
- content: this.form.content, // 传递工单内容
- workType: "1",
- longitude: String(this.form.location[0]),
- latitude: String(this.form.location[1]),
- address: this.form.address,
- eventDictKey: this.form.type,
- aiType: this.form.algorithm,
- updateUser: this.form.handler,
- createDept: this.form.department,
- isDraft: 0
- };
-
- // 如果是编辑状态，添加 id
- if (this.form.id) {
- submitData.id = this.form.id;
- }
-
- // 获取文件对象
- let file = null;
- if (this.form.photos && this.form.photos.length > 0) {
- file = this.form.photos[0].raw;
- }
-
- const response = await createTicket(submitData, file);
- if (response.data.code === 0) {
- this.$message.success('工单创建成功');
- this.dialogVisible = false;
- this.fetchTableData();
- } else {
- throw new Error(response.data.msg || '创建失败');
- }
- } catch (error) {
- console.error('提交失败:', error);
- this.$message.error(error.message || '工单创建失败，请稍后重试');
- }
+ // 验证位置信息
+ if (!this.form.location || this.form.location.length < 2) {
+ this.$message.warning('请在地图上选择位置');
+ return;
}
- });
+
+ // 验证图片上传
+ if (!this.form.photos || this.form.photos.length === 0) {
+ this.$message.warning('请上传工单图片');
+ return;
+ }
+
+ const submitData = {
+ eventName: this.form.name,
+ content: this.form.content,
+ workType: "1",
+ longitude: String(this.form.location[0]),
+ latitude: String(this.form.location[1]),
+ address: this.form.address,
+ eventDictKey: this.form.type,
+ aiType: this.form.algorithm,
+ updateUser: this.form.handler,
+ createDept: this.form.department,
+ isDraft: 0
+ };
+
+ if (this.form.id) {
+ submitData.id = this.form.id;
+ }
+
+ // 获取文件对象
+ const file = this.form.photos[0].raw;
+ if (!file) {
+ this.$message.warning('图片文件无效，请重新上传');
+ return;
+ }
+
+ const response = await createTicket(submitData, file);
+ if (response.data.code === 0) {
+ this.$message.success('工单创建成功');
+ this.dialogVisible = false;
+ this.fetchTableData();
+ } else {
+ throw new Error(response.data.msg || '创建失败');
+ }
+ } catch (error) {
+ if (error.message.includes('验证未通过')) {
+ this.$message.warning('请填写完整的工单信息');
+ } else {
+ this.$message.error(error.message || '工单创建失败，请稍后重试');
+ }
+ }
},
async saveDraft() {
@@ -900,7 +987,7 @@
const submitData = {
id: this.form.id,
eventName: this.form.name || undefined,
- content: this.form.content || undefined, // 传递工单内容
+ content: this.form.content || undefined,
workType: "1",
longitude: this.form.location?.[0] ? String(this.form.location[0]) : undefined,
latitude: this.form.location?.[1] ? String(this.form.location[1]) : undefined,
@@ -912,28 +999,23 @@
isDraft: 1
};
- // 确保即使为空字符串也会传入 content
- if (this.form.content !== undefined) {
- submitData.content = this.form.content;
- }
-
- // 如果是编辑状态，添加 id
- if (this.form.id) {
- submitData.id = this.form.id;
+ // 草稿时也至少需要工单名称
+ if (!submitData.eventName) {
+ this.$message.warning('请至少输入工单名称');
+ return;
}
// 过滤掉所有 undefined 的字段
- Object.keys(submitData).forEach(key =>
+ Object.keys(submitData).forEach(key =>
submitData[key] === undefined && delete submitData[key]
);
- // 获取文件对象
let file = null;
if (this.form.photos && this.form.photos.length > 0) {
file = this.form.photos[0].raw;
}
- const response = await createTicket(submitData, file); // 使用 createTicket 而不是 flowEvent
+ const response = await createTicket(submitData, file);
if (response.data.code === 0) {
this.$message.success('草稿保存成功');
this.dialogVisible = false;
@@ -942,28 +1024,20 @@
throw new Error(response.data.msg || '保存失败');
}
} catch (error) {
- console.error('保存草稿失败:', error);
this.$message.error(error.message || '保存草稿失败，请稍后重试');
}
},
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],
- 地址: this.form.address
- });
} else {
- console.warn('无效的位置数据');
this.form.location = [];
this.form.address = '';
}
@@ -999,11 +1073,30 @@
return statusMap[status] || "info";
},
+ async fetchTabCounts() {
+ try {
+ const response = await getstatusCount();
+ const { statusCount, totalCount, userCount } = response.data.data;
+ 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; // 根据状态值映射
+ }
+ });
+ } catch (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() {
@@ -1025,7 +1118,6 @@
},
async handleCurrentChange(val) {
- console.log('当前页变更:', val);
// 先更新页码
this.page.currentPage = val;
// 等待 DOM 更新后再请求数据
@@ -1034,48 +1126,10 @@
},
async sizeChange(val) {
- console.log('每页条数变更:', val);
this.page.pageSize = val;
this.page.currentPage = 1; // 重置到第一页
await this.$nextTick();
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() {
@@ -1093,7 +1147,7 @@
address: '',
content: '',
photos: [],
- remarkContent: '', // 新增字段，用于存储后端返回的 content
+ content: '', // 新增字段，用于存储后端返回的 content
};
if (this.$refs.form) {
this.$refs.form.resetFields();
@@ -1107,19 +1161,14 @@
return `${location[0].toFixed(6)}, ${location[1].toFixed(6)}`;
},
- handleViewDetail(row) {
- console.log('查看详情数据:', row);
- // 重要：重置上传组件的文件列表
+ async handleViewDetail(row) {
+ // 先设置workType，直接从row读取
+ this.workType = row.work_type !== undefined ? Number(row.work_type) : 0;
+
+ // 重置上传组件的文件列表
this.$nextTick(() => {
- if (this.$refs.upload) {
- // 如果是多个上传组件，需要处理数组情况
- if (Array.isArray(this.$refs.upload)) {
- this.$refs.upload.forEach(upload => {
- upload.clearFiles();
- });
- } else {
- this.$refs.upload.clearFiles();
- }
+ if (this.$refs.MapContainer && this.$refs.MapContainer.initAddEntity) {
+ this.$refs.MapContainer.initAddEntity('point', this.currentDetail.location);
}
});
@@ -1128,45 +1177,74 @@
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);
- }
-
- 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;
- }
+ const stepResponse = await getStepInfo(row.orderNumber);
+ // 不再从stepResponse获取work_type
+
+ // 兼容原有步骤数据
+ const steps = Array.isArray(stepResponse.data.data)
+ ? stepResponse.data.data
+ : stepResponse.data.data?.steps || [];
+
+ // 根据流程类型动态生成步骤
+ const statusArr = this.workType === 1 ? ["3", "4", "5"] : this.fixedStatuses;
+ this.stepInfos = statusArr.map(status => {
+ const step = steps.find(s => String(s.status) === String(status));
+ return {
+ status,
+ name: step ? step.name : '',
+ time: step ? step.time : null,
+ create_time: step ? step.create_time : null,
+ };
+ });
+
+ this.currentDetail.status = row.status; // 使用行数据中的状态
} catch (error) {
- console.error('获取处理详情失败:', error);
+ const statusArr = this.workType === 1 ? ["3", "4", "5"] : this.fixedStatuses;
+ this.stepInfos = statusArr.map(status => ({
+ status,
+ name: status === row.status ? row.handler || '未分配' : '未处理',
+ time: status === row.status ? row.startTime || '未知时间' : null,
+ }));
}
+
+ this.currentDetail = detailData;
+ this.detailVisible = true;
+ this.$nextTick(() => {
+ if (this.$refs.MapContainer && this.$refs.MapContainer.initAddEntity) {
+ this.$refs.MapContainer.initAddEntity('point', this.currentDetail.location);
+ }
+ });
},
- openMap () {
+ getStepHandler(status) {
+ const step = this.stepInfos.find(step => step.status === status);
+ return step ? step.name : '';
+ },
+
+ getStepTime(status) {
+ const step = this.stepInfos.find(step => step.status === status);
+ // 如果 step 不存在或 step.time 为 0，返回 false
+ return step && step.time && step.time !== '0' ? step.time : false;
+ },
+ getStepCreateTime(status) {
+ const step = this.stepInfos.find(step => step.status === status);
+ return step ? step.create_time : null;
+ },
+ getActiveStep() {
+ // 动态流程下，步骤索引需适配
+ const arr = this.dynamicFixedStatuses;
+ const index = arr.indexOf(String(this.currentDetail.status));
+ return index !== -1 ? index + 1 : 1;
+ },
+
+ 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,
- 级别: adcodeObj?.level,
- 名称: adcodeObj?.name,
- 代码: adcodeObj?.adcode,
- 中心点: adcodeObj?.center,
- 边界: adcodeObj?.polyline,
- });
-
+ getAdcodeObj(geoJson, 'adcode', subAreaCode);
this.$message.info("地图选址功能暂未实现");
},
@@ -1189,56 +1267,77 @@
},
async exportData() {
+ // 修改导出方法，添加选中数据的处理
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的状态值
- keyword: this.filters.keyword || undefined,
- dept_id: this.filters.department || undefined,
- start_date: this.filters.dateRange?.[0] ? this.formatDate(this.filters.dateRange[0]) : undefined,
- end_date: this.filters.dateRange?.[1] ? this.formatDate(this.filters.dateRange[1]) : undefined,
- current: 1,
- size: 10
- };
- const response = await getList(params);
- if (!response?.data?.data?.records) {
- throw new Error('接口返回数据格式不正确');
- }
-
- const { records } = response.data.data;
-
- // 使用与查询列表相同的过滤逻辑
- let filteredRecords = records;
- if (currentTab?.name === 'myTickets') {
- filteredRecords = records.filter(item =>
- String(item.create_user_id) === String(item.user_id)
- );
- }
-
- const exportData = filteredRecords.map(item => {
- const longitude = Number(item.longitude) || 0;
- const latitude = Number(item.latitude) || 0;
- return {
- 工单编号: item.event_num || '',
- 工单名称: item.event_name || '',
- 所属单位: item.dept_name || '',
- 发起时间: item.create_time || '',
- 关联算法: item.ai_types || '',
+ // 如果有选中的数据，则只导出选中的数据
+ let exportData = [];
+ if (this.selections.length > 0) {
+ exportData = this.selections.map(item => ({
+ 工单编号: item.orderNumber || '',
+ 工单名称: item.orderName || '',
+ 所属单位: item.department || '',
+ 发起时间: item.startTime || '',
+ 关联算法: item.aiType || '',
工单内容: item.address || '',
- 工单类型: this.types.find(t => t.value === item.event_dict_key)?.label || '',
- 经纬度: (!isNaN(longitude) && !isNaN(latitude)) ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}` : '',
- 创建人: item.create_user || '',
- 处理人: item.update_user || '',
- 工单状态: this.mapStatus(Number(item.status || 0))
+ 工单类型: item.type || '',
+ 经纬度: item.location ? `${item.location[0].toFixed(6)}, ${item.location[1].toFixed(6)}` : '',
+ 创建人: item.creator || '',
+ 处理人: item.handler || '',
+ 工单状态: this.mapStatus(item.status)
+ }));
+ } else {
+ // 原有的导出全部数据的逻辑
+ 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的状态值
+ keyword: this.filters.keyword || undefined,
+ dept_id: this.filters.department || undefined,
+ start_date: this.filters.dateRange?.[0] ? this.formatDate(this.filters.dateRange[0]) : undefined,
+ end_date: this.filters.dateRange?.[1] ? this.formatDate(this.filters.dateRange[1]) : undefined,
+ current: 1,
+ size: 10
};
- });
+
+ const response = await getList(params);
+ if (!response?.data?.data?.records) {
+ throw new Error('接口返回数据格式不正确');
+ }
+
+ const { records } = response.data.data;
+
+ // 使用与查询列表相同的过滤逻辑
+ let filteredRecords = records;
+ if (currentTab?.name === 'myTickets') {
+ filteredRecords = records.filter(item =>
+ String(item.create_user_id) === String(item.user_id)
+ );
+ }
+
+ exportData = filteredRecords.map(item => {
+ const longitude = Number(item.longitude) || 0;
+ const latitude = Number(item.latitude) || 0;
+ return {
+ 工单编号: item.event_num || '',
+ 工单名称: item.event_name || '',
+ 所属单位: item.dept_name || '',
+ 发起时间: item.create_time || '',
+ 关联算法: item.ai_types || '',
+ 工单内容: item.address || '',
+ 工单类型: this.types.find(t => t.value === item.event_dict_key)?.label || '',
+ 经纬度: (!isNaN(longitude) && !isNaN(latitude)) ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}` : '',
+ 创建人: item.create_user || '',
+ 处理人: item.update_user || '',
+ 工单状态: this.mapStatus(Number(item.status || 0))
+ };
+ });
+ }
if (exportData.length === 0) {
this.$message.warning('没有数据可供导出');
@@ -1247,7 +1346,7 @@
const headers = [
'工单编号',
- '工单名称',
+ '工单名称',
'所属单位',
'发起时间',
'关联算法',
@@ -1262,7 +1361,6 @@
export_json_to_excel(headers, exportData, '工单数据');
this.$message.success('数据导出成功');
} catch (error) {
- console.error('导出失败:', error);
this.$message.error(error.message || '导出失败，请稍后重试');
} finally {
this.loading = false;
@@ -1311,9 +1409,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
};
@@ -1329,7 +1427,6 @@
throw new Error(response.data.msg || '操作失败');
}
} catch (error) {
- console.error('通过操作失败:', error);
this.$message.error(error.message || '操作失败，请稍后重试');
}
},
@@ -1350,7 +1447,6 @@
throw new Error(response.data.msg || '操作失败');
}
} catch (error) {
- console.error('不通过操作失败:', error);
this.$message.error(error.message || '操作失败，请稍后重试');
}
},
@@ -1358,6 +1454,7 @@
if (this.currentDetail.status !== 3) {
this.$message.warning('只有处理中状态的工单可以提交处理详情');
return;
+
}
try {
@@ -1396,14 +1493,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 +1526,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 +1561,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;
@@ -1484,22 +1584,51 @@
// 添加编辑方法
handleEdit(row) {
- // 从原始数据中获取 id 和 dept_id
- const originalDeptId = row.department?.value || row.dept_id;
-
+ console.log('编辑原始数据:', row);
+
+ // 尝试从row.dept_id或通过部门名称查找对应的部门ID
+ let deptId = row.dept_id; // 优先使用原始数据中的dept_id
+
+ // 如果没有dept_id，则通过部门名称查找
+ if (!deptId) {
+ // 输出所有可用的部门数据用于调试
+ console.log('可用部门列表:', this.departments);
+ console.log('当前部门名称:', row.department);
+
+ const deptInfo = this.departments.find(dept =>
+ dept.label && dept.label.trim() === row.department.trim()
+ );
+ deptId = deptInfo?.value;
+ }
+
+ // 获取工单类型值 - 从types中找到匹配的值
+ const typeValue = this.types.find(t => t.label === row.type)?.value || row.event_dict_key;
+
+ // 获取处理人ID - 使用userNameToIdMap映射
+ const handlerId = this.userNameToIdMap[row.handler] || row.handler;
+
+ console.log('数据映射:', {
+ 部门名称: row.department,
+ 找到的部门ID: deptId,
+ 原始处理人: row.handler,
+ 处理人ID: handlerId,
+ 原始工单类型: row.type,
+ 映射后类型值: typeValue
+ });
+
this.form = {
- id: row.id, // 保存原始 id
+ id: row.id,
name: row.orderName,
- type: row.event_dict_key, // 使用原始 key 值
- department: originalDeptId,
- handler: row.handler,
- algorithm: row.content,
+ type: typeValue,
+ department: deptId,
+ handler: handlerId, // 使用映射后的处理人ID
+ algorithm: row.aiType,
location: row.location,
address: row.address,
- content: row.remarkContent,
+ content: row.content,
photos: [],
- remarkContent: row.remarkContent,
};
+
// 如果有图片，添加到表单中
if (row.photo_url) {
this.form.photos = [{
@@ -1507,9 +1636,9 @@
url: row.photo_url
}];
}
+
this.dialogVisible = true;
},
-
// 添加删除方法
handleDelete(row) {
this.$confirm('确认删除该工单?', '提示', {
@@ -1523,7 +1652,7 @@
status: 0,
isDelete: 1
});
-
+
if (response.data.code === 0) {
this.$message.success('删除成功');
this.fetchTableData();
@@ -1534,17 +1663,239 @@
console.error('删除失败:', error);
this.$message.error(error.message || '删除失败，请稍后重试');
}
- }).catch(() => {});
+ }).catch(() => { });
+ },
+
+ // 添加选择变化处理方法
+ handleSelectionChange(selection) {
+ this.selections = selection;
+ console.log('已选择的行：', selection);
+ },
+
+ // 添加全选方法
+ handleSelectAll(val) {
+ this.$refs.avueCrud.toggleSelection(val);
+ },
+
+ // 添加单行选择方法
+ handleSelect(selection, row) {
+ console.log('选中行变化：', selection, row);
+ },
+
+ // 如果需要手动选中某些行
+ setSelection(rows) {
+ this.$nextTick(() => {
+ rows.forEach(row => {
+ this.$refs.avueCrud.toggleSelection(row, true);
+ });
+ });
+ },
+
+ // 清空选择
+ clearSelection() {
+ this.$refs.avueCrud.clearSelection();
+ },
+
+ // 打开审核对话框
+ openReviewDialog() {
+ if (this.selections.length === 0) {
+ this.$message.warning('请先选择要审核的工单');
+ return;
+ }
+ this.currentImageIndex = 1;
+ this.updateCurrentReviewImage();
+ this.reviewDialogVisible = true;
+ },
+
+ // 更新当前审核图片
+ updateCurrentReviewImage() {
+ // 修正索引范围
+ if (!this.selections || this.selections.length === 0) {
+ this.currentReviewImage = '';
+ this.currentImageIndex = 1;
+ return;
+ }
+ // 如果当前索引超出范围，自动回退到最后一张
+ if (this.currentImageIndex > this.selections.length) {
+ this.currentImageIndex = this.selections.length;
+ }
+ if (this.currentImageIndex < 1) {
+ this.currentImageIndex = 1;
+ }
+ const index = this.currentImageIndex - 1;
+ if (index >= 0 && index < this.selections.length) {
+ const currentItem = this.selections[index];
+ this.currentReviewImage = currentItem.photo_url || '';
+ } else {
+ this.currentReviewImage = '';
+ }
+ },
+
+ // 处理图片分页变化
+ handleImagePageChange(page) {
+ if (page > 0 && page <= this.selections.length) {
+ this.currentImageIndex = page;
+ this.updateCurrentReviewImage();
+ }
+ },
+
+ // 批量审核通过
+ async handleBatchApprove() {
+ try {
+ if (this.selections.length === 0) {
+ this.$message.warning('没有选中的工单');
+ return;
+ }
+
+ const currentItem = this.selections[this.currentImageIndex - 1];
+ if (!currentItem) {
+ this.$message.warning('当前工单数据无效');
+ return;
+ }
+
+ await this.$confirm('确认审核通过当前工单?', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ });
+
+ const data = {
+ id: currentItem.id,
+ status: currentItem.status,
+ isPass: 0,
+ eventNum: currentItem.orderNumber,
+ eventName: currentItem.orderName,
+ eventType: currentItem.type,
+ };
+ console.log('删除前：', this.selections)
+ const response = await flowEvent(data);
+ if (response.data.code === 0) {
+ this.$message.success('工单审核通过');
+
+ // 创建新的数组而不是修改原数组
+ const newSelections = [...this.selections];
+ newSelections.splice(this.currentImageIndex - 1, 1);
+
+ // 修正索引并更新图片
+ if (newSelections.length > 0) {
+ if (this.currentImageIndex > this.selections.length) {
+ this.currentImageIndex = this.selections.length;
+ }
+ this.updateCurrentReviewImage();
+ } else {
+ this.reviewDialogVisible = false;
+ this.currentImageIndex = 1;
+ this.currentReviewImage = '';
+ this.fetchTableData();
+ }
+
+ // 刷新表格数据
+ // this.fetchTableData();
+ this.selections = newSelections;
+
+ } else {
+ throw new Error(response.data.msg || '审核失败');
+ }
+ } catch (error) {
+ if (error === 'cancel') return;
+ this.$message.error(error.message || '审核失败，请稍后重试');
+ }
+ },
+
+ cancleBatchReject(){
+ reviewDialogVisible = false;
+ this.fetchTableData();
+ },
+ // 批量审核不通过
+ async handleBatchReject() {
+ try {
+ if (this.selections.length === 0) {
+ this.$message.warning('没有选中的工单');
+ return;
+ }
+
+ const currentItem = this.selections[this.currentImageIndex - 1];
+ if (!currentItem) {
+ this.$message.warning('当前工单数据无效');
+ return;
+ }
+
+ await this.$confirm('确认驳回当前工单?', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ });
+
+ const data = {
+ id: currentItem.id,
+ status: currentItem.status,
+ isPass: 1,
+ eventNum: currentItem.orderNumber,
+ eventName: currentItem.orderName,
+ eventType: currentItem.type,
+ };
+
+ const response = await flowEvent(data);
+ if (response.data.code === 0) {
+ this.$message.success('工单已驊回');
+
+ // 创建新的数组而不是修改原数组
+ const newSelections = [...this.selections];
+ newSelections.splice(this.currentImageIndex - 1, 1);
+ this.selections = newSelections;
+
+ // 修正索引并更新图片
+ if (this.selections.length > 0) {
+ if (this.currentImageIndex > this.selections.length) {
+ this.currentImageIndex = this.selections.length;
+ }
+ this.updateCurrentReviewImage();
+ } else {
+ this.reviewDialogVisible = false;
+ this.currentImageIndex = 1;
+ this.currentReviewImage = '';
+ this.fetchTableData();
+ }
+
+ // 刷新表格数据
+ // this.fetchTableData();
+ } else {
+ throw new Error(response.data.msg || '驳回失败');
+ }
+ } catch (error) {
+ if (error === 'cancel') return;
+ this.$message.error(error.message || '驳回失败，请稍后重试');
+ }
+ },
+
+ // 获取所有图片列表用于预览
+ getImageList() {
+ return this.selections
+ .map(item => item.photo_url)
+ .filter(url => url); // 过滤掉空值
+ },
+
+ // 处理图片点击
+ handleImageClick() {
+ // 图片点击事件由 el-image 的预览功能处理
+ },
+
+ // 处理上一张图片
+ handlePrevImage() {
+ if (this.currentImageIndex > 1) {
+ this.currentImageIndex--;
+ this.updateCurrentReviewImage();
+ }
+ },
+
+ // 处理下一张图片
+ handleNextImage() {
+ if (this.currentImageIndex < this.selections.length) {
+ this.currentImageIndex++;
+ this.updateCurrentReviewImage();
+ }
},
},
- watch: {
- tableData: {
- handler() {
- this.updateTabCounts();
- },
- deep: true
- },
- }
};
</script>
@@ -1629,69 +1980,119 @@
}
.create-ticket-form {
- padding: 10px;
+ padding: 20px 10px;
.form-section {
- margin-bottom: 15px;
- background: #f8f9fa;
+ background-color: #fff;
border-radius: 4px;
- padding: 12px;
- .section-title {
- font-size: 14px;
- font-weight: 500;
- color: #303133;
- margin-bottom: 12px;
- padding-left: 8px;
- border-left: 3px solid #409EFF;
- }
+ .el-row {
+ margin-bottom: 16px;
- .el-form-item {
- margin-bottom: 12px;
+ &:last-child {
+ margin-bottom: 0;
+ }
}
}
- .map-select {
- display: flex;
- align-items: center;
- gap: 10px;
+ .location-wrapper {
+ width: 100%; // 修改为100%以适应父容器
+ height: auto; // 修改为auto以自适应内容
+
+ .map-button {
+ width: 100%; // 让按钮填满容器宽度
+ height: 36px; // 与其他输入框保持一致的高度
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ i {
+ margin-right: 4px;
+ }
+ }
.location-text {
+ margin-top: 8px;
+ padding: 8px 12px;
+ background-color: #f5f7fa;
+ border-radius: 4px;
color: #606266;
font-size: 13px;
+ line-height: 1.4;
}
}
- .upload-item {
- margin-bottom: 0;
- }
+ .upload-wrapper {
+ .uploader {
+ :deep(.el-upload--picture-card) {
+ width: 120px;
+ height: 100px;
+ line-height: 128px;
+ }
- .ticket-upload {
- :deep(.el-upload--picture-card) {
- width: 100px;
- height: 100px;
- line-height: 100px;
- margin: 0 8px 8px 0;
+ :deep(.el-upload-list__item) {
+ width: 120px;
+ height: 120px;
+ }
}
- :deep(.el-upload-list--picture-card .el-upload-list__item) {
- width: 100px;
- height: 100px;
- margin: 0 8px 8px 0;
+ .upload-tip {
+ font-size: 12px;
+ color: #909399;
+ line-height: 1.4;
+ margin-top: 8px;
}
}
- .el-upload__tip {
- font-size: 12px;
- color: #909399;
- line-height: 1.2;
- margin-top: 5px;
+ .el-form-item {
+ margin-bottom: 18px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ :deep(.el-form-item__label) {
+ font-weight: 500;
+ color: #606266;
+ }
+
+ :deep(.el-input__inner) {
+ height: 36px;
+ line-height: 36px;
+ }
+
+ :deep(.el-textarea__inner) {
+ padding: 8px 12px;
+ }
+
+ :deep(.el-input__inner),
+ :deep(.el-select),
+ :deep(.el-select .el-input) {
+ width: 100%; // 确保所有输入框和选择框宽度一致
+ }
+
+ .full-width {
+ width: 100%;
}
}
.dialog-footer {
text-align: right;
- padding-top: 10px;
+ padding-top: 16px;
+ border-top: 1px solid #ebeef5;
+
+ .el-button+.el-button {
+ margin-left: 12px;
+ }
+
+ .el-button {
+ padding: 9px 20px;
+
+ &:last-child {
+ margin-left: 12px;
+ }
+ }
}
.map-container {
@@ -1730,7 +2131,7 @@
padding: 5px 10px;
background-color: #f5f7fa;
border-radius: 4px;
-
+
p {
margin: 5px 0;
color: #606266;
@@ -1756,7 +2157,7 @@
color: #909399;
background-color: #f5f7fa;
border-radius: 4px;
-
+
i {
font-size: 32px;
margin-bottom: 8px;
@@ -1773,6 +2174,62 @@
.status-flow {
margin-bottom: 20px;
+
+ .custom-steps {
+ .el-step__description {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ }
+
+ // 添加发起任务步骤的特殊样式
+ .init-step-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 130px;
+
+ .creator-name {
+ font-size: 14px;
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 4px;
+ }
+
+ .create-time {
+ font-size: 10px;
+ color: #909399;
+ }
+ }
+
+ // 保持其他步骤的原有样式
+ .step-info {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ justify-content: space-between;
+ align-items: center;
+ width: 200px;
+
+ .process-time {
+ font-size: 10px;
+ color: #909399;
+ text-align: left;
+ margin-left: -50%;
+ padding-left: 0%;
+ flex: 1;
+ }
+
+ .handler-name {
+ font-size: 14px;
+ font-weight: bold;
+ color: #303133;
+ text-align: left;
+ flex: 1;
+ }
+ }
+ }
}
.basic-info {
@@ -1846,13 +2303,208 @@
min-height: 40px;
color: #606266;
line-height: 1.5;
+ display: block;
+ text-align: left;
+
+ &:first-child {
+ font-weight: bold;
+ margin-bottom: 4px;
+ }
}
// 添加删除按钮样式
.danger-button {
color: #F56C6C;
}
+
.danger-button:hover {
color: #f78989;
}
+
+.custom-steps-container {
+ width: 100%;
+ margin: 20px 0;
+}
+
+.steps-titles {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 16px;
+ position: relative;
+}
+
+.step-title {
+ text-align: center;
+ flex: 1;
+ font-size: 16px;
+ color: #999;
+ position: relative;
+ padding-bottom: 10px;
+}
+
+.step-title.active {
+ color: #409eff;
+ font-weight: bold;
+}
+
+.custom-steps {
+ margin-top: -20px;
+
+ :deep(.el-step__description) {
+ margin-top: 8px;
+ padding: 0 20px;
+ }
+}
+
+.step-description {
+ font-size: 14px;
+ color: #666;
+ line-height: 1.5;
+ display: block;
+ text-align: center;
+
+ &:first-child {
+ font-weight: bold;
+ margin-bottom: 4px;
+ }
+}
+
+// 覆盖其他相关样式
+.status-flow {
+ .custom-steps {
+ .el-step__description {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ }
+
+ // 移除之前的样式
+ .init-step-info,
+ .step-info {
+ display: block;
+ width: auto;
+ text-align: center;
+ }
+ }
+}
+
+// 添加新的样式
+.review-dialog {
+ :deep(.el-dialog__body) {
+ padding: 0;
+ background-color: #f5f7fa;
+ }
+}
+
+.review-container {
+ position: relative;
+
+ .review-image-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 600px;
+ background-color: #f5f7fa;
+ }
+
+ .review-image-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ :deep(.el-image) {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .el-image__inner {
+ max-height: 100%;
+ max-width: 100%;
+ object-fit: contain;
+ }
+ }
+ }
+
+ .arrow-button {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 44px;
+ height: 44px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s;
+ z-index: 100;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.6);
+ }
+
+ i {
+ color: #fff;
+ font-size: 24px;
+ }
+
+ &.left {
+ left: 20px;
+ }
+
+ &.right {
+ right: 20px;
+ }
+ }
+
+ .preview-image {
+ max-width: 100%;
+ max-height: 100%;
+ }
+
+ .review-pagination {
+ padding: 16px 0;
+ display: flex;
+ justify-content: center;
+ background-color: #fff;
+
+ :deep(.el-pagination) {
+
+ .btn-prev,
+ .btn-next {
+ display: none;
+ }
+
+ .el-pager {
+ .number {
+ margin: 0 4px;
+ }
+ }
+ }
+ }
+
+ .image-error {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #909399;
+
+ i {
+ font-size: 48px;
+ margin-bottom: 16px;
+ }
+
+ span {
+ font-size: 16px;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3