From 22e5a6b2be5fc91dfa9db53753f79b2c93440073 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Sun, 28 Sep 2025 14:46:55 +0800
Subject: [PATCH] feat：搜索内容向左
---
src/views/tickets/ticket.vue | 465 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 267 insertions(+), 198 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index d5006cf..b6bba07 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -9,133 +9,163 @@
>
<basic-main-content>
<!-- 查询条件筛选栏 -->
- <div class="filter-bar">
- <el-input
- v-model="filters.keyword"
- placeholder="请输入关键字"
- class="filter-item"
- clearable
- @clear="handleKeyWords"
- @keyup.enter="handleSearch"
- />
- <!-- <el-select
- v-model="filters.department"
- placeholder="请选择所属部门"
- class="filter-item"
- 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"
- clearable
- @change="handleSearch"
- >
- <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"
- class="filter-item"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :default-value="datePickerDefaultVal"
- >
- </el-date-picker>
- <el-select
- v-model="filters.status"
- placeholder="请选择状态"
- class="filter-item"
- clearable
- @change="handleSearch"
- >
- <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"
- clearable
- @change="handleSearch"
- >
- <el-option
- v-for="item in algorithms"
- :key="item.dict_key"
- :label="item.dict_value"
- :value="item.dict_key"
- />
- </el-select> -->
- <!-- <el-tree-select
- popper-class="custom-tree-select"
- :style="{ width: pxToRem(186) }"
- placeholder="请选择关联算法"
- v-model="dictKey"
- :data="dataList"
- :default-expanded-keys="[dictKey]"
- check-strictly
- node-key="id"
- :props="treePropsSF"
- @node-click="handleSFNodeClick"
- clearable
- @clear="handleClear"
- /> -->
- <el-tree-select
- style="z-index: 1000"
- :teleported="false"
- class="custom-tree-select"
- :style="{ width: pxToRem(186) }"
- v-model="dictKey"
- :data="dataList"
- :default-expanded-keys="[dictKey]"
- :props="treePropsSF"
- :render-after-expand="false"
- :default-checked-keys="checkedKeys"
- node-key="id"
- multiple
- show-checkbox
- collapse-tags
- collapse-tags-tooltip
- clearable
- @check="handleCheck"
- @node-click="handleSFNodeClick"
- @clear="handleClear"
- />
- <el-select
- v-model="filters.isReview"
- placeholder="请选择复核状态"
- class="filter-item"
- clearable
- @change="handleSearch"
- >
- <el-option
- v-for="item in reviewStatuses"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
- <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button>
- </div>
+ <!-- 查询条件筛选栏 -->
+ <div class="ztzf-form-search">
+ <el-form :model="filters" inline>
+ <el-row :gutter="24">
+ <el-col :span="4">
+ <el-form-item label="关键字:">
+ <el-input
+ v-model="filters.keyword"
+ placeholder="请输入关键字"
+ class="filter-item"
+ clearable
+ @clear="handleKeyWords"
+ @keyup.enter="handleSearch"
+ />
+ </el-form-item>
+ </el-col>
+ <!-- <el-select
+ v-model="filters.department"
+ placeholder="请选择所属部门"
+ class="filter-item"
+ 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"
+ clearable
+ @change="handleSearch"
+ >
+ <el-option
+ v-for="item in types"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select> -->
+ <el-col :span="5">
+ <el-form-item label="选择日期:">
+ <el-date-picker
+ v-model="filters.dateRange"
+ type="daterange"
+ class="filter-item"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ :default-value="datePickerDefaultVal"
+ >
+ </el-date-picker>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="选择状态:">
+ <el-select
+ v-model="filters.status"
+ placeholder="请选择状态"
+ class="filter-item"
+ clearable
+ @change="handleSearch"
+ >
+ <el-option
+ v-for="item in statuses"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+
+ <!-- <el-select
+ v-model="filters.algorithm"
+ placeholder="请选择关联算法"
+ class="filter-item"
+ clearable
+ @change="handleSearch"
+ >
+ <el-option
+ v-for="item in algorithms"
+ :key="item.dict_key"
+ :label="item.dict_value"
+ :value="item.dict_key"
+ />
+ </el-select> -->
+ <!-- <el-tree-select
+ popper-class="custom-tree-select"
+ :style="{ width: pxToRem(186) }"
+ placeholder="请选择关联算法"
+ v-model="dictKey"
+ :data="dataList"
+ :default-expanded-keys="[dictKey]"
+ check-strictly
+ node-key="id"
+ :props="treePropsSF"
+ @node-click="handleSFNodeClick"
+ clearable
+ @clear="handleClear"
+ /> -->
+ <el-col :span="4">
+ <el-form-item label="选择算法:">
+ <el-tree-select
+ style="z-index: 1000"
+ :teleported="false"
+ class="custom-tree-select"
+ :style="{ width: pxToRem(186) }"
+ v-model="dictKey"
+ :data="dataList"
+ :default-expanded-keys="[dictKey]"
+ :props="treePropsSF"
+ :render-after-expand="false"
+ :default-checked-keys="checkedKeys"
+ node-key="id"
+ multiple
+ show-checkbox
+ collapse-tags
+ collapse-tags-tooltip
+ clearable
+ @check="handleCheck"
+ @node-click="handleSFNodeClick"
+ @clear="handleClear"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="复核状态:">
+ <el-select
+ v-model="filters.isReview"
+ placeholder="请选择复核状态"
+ class="filter-item"
+ clearable
+ @change="handleSearch"
+ >
+ <el-option
+ v-for="item in reviewStatuses"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="3">
+ <el-button type="primary" icon="el-icon-search" @click="handleSearch"
+ >搜索</el-button
+ >
+ <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button>
+ </el-col>
+ </el-row>
+ </el-form>
+ </div>
<!-- 表格部分 -->
<avue-crud
class="ztzf-public-general-avue-crud"
@@ -168,23 +198,23 @@
type="primary"
icon="el-icon-plus"
@click="handleAdd"
- >新建工单</el-button
- >
+ >新建工单
+ </el-button>
<el-button
v-if="activeTab === 'pending' && permissionList.reviewBtn"
type="success"
icon="el-icon-check"
@click="openReviewDialog"
- >批量审核</el-button
- >
+ >批量审核
+ </el-button>
<el-button
v-if="permissionList.exportBtn"
type="success"
plain
icon="el-icon-download"
@click="exportData"
- >导出</el-button
- >
+ >导出
+ </el-button>
</template>
<template #menu="{ row }">
<template v-if="row.status === -1">
@@ -194,14 +224,14 @@
icon="el-icon-delete"
class="danger-button"
@click="handleDelete(row)"
- >删除</el-button
- >
+ >删除
+ </el-button>
</template>
<template v-else>
<el-button type="text" icon="el-icon-view" @click="handleViewDetail(row)"
- >详情</el-button
- >
+ >详情
+ </el-button>
</template>
<template v-if="permission.tickets_repeat_review">
@@ -210,8 +240,8 @@
type="text"
icon="el-icon-check"
@click="reCheck(row)"
- >复核</el-button
- >
+ >复核
+ </el-button>
</template>
</template>
<template #status="{ row }">
@@ -415,10 +445,21 @@
</el-form>
<template #footer>
<div class="dialog-footer-new">
- <el-button type="danger" :loading="submitLoading" @click="submitForm" icon="el-icon-position">发布</el-button>
- <el-button type="infoprimary" plain :loading="draftLoading" @click="saveDraft" icon="el-icon-document-add"
- >存草稿</el-button
- >
+ <el-button
+ type="danger"
+ :loading="submitLoading"
+ @click="submitForm"
+ icon="el-icon-position"
+ >发布
+ </el-button>
+ <el-button
+ type="infoprimary"
+ plain
+ :loading="draftLoading"
+ @click="saveDraft"
+ icon="el-icon-document-add"
+ >存草稿
+ </el-button>
<el-button @click="handleCancel" icon="el-icon-circle-close">取 消</el-button>
</div>
@@ -577,7 +618,7 @@
<span class="required-star">*</span>事件处理详情
</span>
</template>
- <template v-else> 事件处理详情 </template>
+ <template v-else> 事件处理详情</template>
</div>
<!-- 处理中状态显示输入框 -->
<template v-if="currentDetail.status === 3 && hasProcessedAndOverBtnPermission()">
@@ -604,7 +645,7 @@
<template v-if="currentDetail.status === 3">
<span class="required-label"> <span class="required-star">*</span>上传图片 </span>
</template>
- <template v-else> 上传图片 </template>
+ <template v-else> 上传图片</template>
</div>
<el-upload
v-if="hasProcessedAndOverBtnPermission()"
@@ -695,21 +736,30 @@
<template v-else>
<div class="media-title">
地图标记事件点
- <el-popover v-if="currentDetail.status === 3 || currentDetail.status === 0"
- popper-class="custom-qrcode-popover"
- :width="120"
- :visible="currentDetail.showQR && detailVisible"
- placement="top"
- title=""
- trigger="click"
-
+ <el-popover
+ v-if="currentDetail.status === 3 || currentDetail.status === 0"
+ popper-class="custom-qrcode-popover"
+ :width="120"
+ :visible="currentDetail.showQR && detailVisible"
+ placement="top"
+ title=""
+ trigger="click"
>
<template #reference>
- <img @click.stop="handleQRCode(currentDetail)" class="QRCodeImg" src="@/assets/images/dataCenter/qrCode.svg" alt="" title="事件导航" />
+ <img
+ @click.stop="handleQRCode(currentDetail)"
+ class="QRCodeImg"
+ src="@/assets/images/dataCenter/qrCode.svg"
+ alt=""
+ title="事件导航"
+ />
</template>
<div class="qrcode-content">
- <div class="close-btn" @click.stop="currentDetail.showQR = false">×</div>
- <CreateQRcode v-if="currentDetail.showQR && detailVisible" :latAndLon="currentDetail.location"></CreateQRcode>
+ <div class="close-btn" @click.stop="currentDetail.showQR = false">×</div>
+ <CreateQRcode
+ v-if="currentDetail.showQR && detailVisible"
+ :latAndLon="currentDetail.location"
+ ></CreateQRcode>
</div>
</el-popover>
</div>
@@ -737,16 +787,16 @@
:loading="approveLoading"
@click="approveTicket"
icon="el-icon-check"
- >通过</el-button
- >
+ >通过
+ </el-button>
<el-button
v-if="hasReviewBtnPermission()"
type="danger"
:loading="rejectLoading"
@click="rejectTicket"
icon="el-icon-close"
- >不通过</el-button
- >
+ >不通过
+ </el-button>
<el-button @click="detailVisible = false" icon="el-icon-circle-close">取消</el-button>
</template>
<template v-else-if="currentDetail.status === 0">
@@ -756,16 +806,16 @@
:loading="dispatchLoading"
@click="approveAndDispatch"
icon="el-icon-check"
- >受理</el-button
- >
+ >受理
+ </el-button>
<el-button
v-if="hasProcessingBtnPermission()"
type="danger"
:loading="rejectLoading"
@click="rejectTicket"
icon="el-icon-close"
- >不受理</el-button
- >
+ >不受理
+ </el-button>
<el-button @click="detailVisible = false" icon="el-icon-circle-close">取消</el-button>
</template>
<template v-if="currentDetail.status === 3">
@@ -776,8 +826,8 @@
:loading="completeLoading"
@click="completeTicket"
icon="el-icon-circle-check"
- >完成工单</el-button
- >
+ >完成工单
+ </el-button>
<el-button @click="detailVisible = false" icon="el-icon-circle-close">取消</el-button>
</template>
<template v-else-if="currentDetail.status === 4">
@@ -837,10 +887,12 @@
</el-form-item>
</el-form>
<template #footer>
- <el-button @click="dispatchDialogVisible = false" icon="el-icon-circle-close">取消</el-button>
+ <el-button @click="dispatchDialogVisible = false" icon="el-icon-circle-close"
+ >取消
+ </el-button>
<el-button type="primary" :loading="dispatchLoading" @click="submitDispatch"
- >确认派发</el-button
- >
+ >确认派发
+ </el-button>
</template>
</el-dialog>
@@ -914,8 +966,12 @@
<template #footer>
<div class="dialog-footer">
- <el-button type="primary" @click="handleBatchApprove" icon="el-icon-check">通过</el-button>
- <el-button type="danger" @click="handleBatchReject" icon="el-icon-close">不通过</el-button>
+ <el-button type="primary" @click="handleBatchApprove" icon="el-icon-check"
+ >通过
+ </el-button>
+ <el-button type="danger" @click="handleBatchReject" icon="el-icon-close"
+ >不通过
+ </el-button>
<el-button @click="cancleBatchReject" icon="el-icon-circle-close">取消</el-button>
</div>
</template>
@@ -940,7 +996,7 @@
</template>
<script>
-import { pxToRem, pxToRemNum } from '@/utils/rem'
+import { pxToRem, pxToRemNum } from '@/utils/rem';
import { getSmallImg, getShowImg } from '@/utils/util';
import { ElMessageBox, ElLoading } from 'element-plus';
import { calculateDefaultRange } from '@/utils/util';
@@ -965,7 +1021,9 @@
import getBaseConfig from '@/buildConfig/config';
import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue';
import { CircleClose } from '@element-plus/icons-vue';
+
const { envName } = getBaseConfig();
+
function regExp(label, name) {
var reg = new RegExp(label + '=([^&]*)(&|$)', 'g');
return name.match(reg)[0].split('=')[1];
@@ -1068,8 +1126,8 @@
width: 152,
overHidden: true,
},
- { label: '创建人', prop: 'creator', width: 120, overHidden: true, },
- { label: '处理人', prop: 'handler', width: 120, overHidden: true, },
+ { label: '创建人', prop: 'creator', width: 120, overHidden: true },
+ { label: '处理人', prop: 'handler', width: 120, overHidden: true },
{
slot: true,
hide: envName === 'jiangwu' ? true : false,
@@ -1185,7 +1243,6 @@
this.loadAMapScripts();
this.fetchDropdownData();
-
},
mounted() {
@@ -1240,16 +1297,16 @@
find && (find.query = {});
});
}
- if (tab) {
- const isTabValid = this.filteredTabs.some(t => t.name === tab);
- if (isTabValid) {
- this.activeTab = tab;
- this.handleTabChangeAfterJump();
- isTabProcessed = true;
- const find = this.$store.state.tags.bsTagList.find(i => i.path === '/tickets/ticket');
+ if (tab) {
+ const isTabValid = this.filteredTabs.some(t => t.name === tab);
+ if (isTabValid) {
+ this.activeTab = tab;
+ this.handleTabChangeAfterJump();
+ isTabProcessed = true;
+ const find = this.$store.state.tags.bsTagList.find(i => i.path === '/tickets/ticket');
find && (find.query = {});
+ }
}
- }
}
this.fetchTabCounts(); // 新增：初始化时获取 tab 数据
@@ -1257,7 +1314,7 @@
},
computed: {
CircleClose() {
- return CircleClose
+ return CircleClose;
},
firstRowData() {
return this.tableData.length > 0 ? this.tableData[0] : null;
@@ -1366,7 +1423,7 @@
// 修改这里：使用 types 数组查找对应的 label
value:
this.types.find(t => t.value === this.currentDetail.type)?.label ||
- this.currentDetail.type
+ this.currentDetail.type,
},
{ label: '关联任务', value: this.currentDetail.job_name || '/' },
{ label: '工单创建人', value: this.currentDetail.creator },
@@ -1376,7 +1433,7 @@
label: '关联算法',
value:
this.algorithms.find(t => t.value === this.currentDetail.aiType)?.label ||
- this.currentDetail.aiType
+ this.currentDetail.aiType,
},
{ label: '发起单位', value: this.currentDetail.department },
{ label: '发起任务时间', value: this.currentDetail.startTime },
@@ -2060,14 +2117,14 @@
this.fetchTabCounts(); // 切换 tab 时重新获取数据
},
//新增 跳转后触发的Tab切换
-handleTabChangeAfterJump() {
- const isReview = this.findObject(this.option.column, 'isReview');
- isReview.hide = !['all', 'completed', 'myTickets'].includes(this.activeTab);
- this.handleReset();
- this.page.currentPage = 1;
- this.fetchTableData();
- this.fetchTabCounts();
- },
+ handleTabChangeAfterJump() {
+ const isReview = this.findObject(this.option.column, 'isReview');
+ isReview.hide = !['all', 'completed', 'myTickets'].includes(this.activeTab);
+ this.handleReset();
+ this.page.currentPage = 1;
+ this.fetchTableData();
+ this.fetchTabCounts();
+ },
handleSearch() {
this.page.currentPage = 1;
this.fetchTableData();
@@ -3120,17 +3177,20 @@
<style lang="scss">
.custom-dialog {
max-height: 96vh;
- .el-dialog__body {
+ .el-dialog__body {
border-top: 0.1rem solid #f0f0f0;
}
}
+
.custom-qrcode-popover {
min-width: 160px !important;
min-height: 140px !important;
position: relative;
- .qrcode-content{
-margin-top: 8px;
+
+ .qrcode-content {
+ margin-top: 8px;
+
.close-btn {
position: absolute;
top: 2px;
@@ -3143,8 +3203,6 @@
color: #999;
font-size: 16px;
z-index: 10;
-
-
}
}
}
@@ -3352,9 +3410,11 @@
width: 100%;
}
}
+
:deep(.el-dialog__body) {
border-top: 0.1rem solid #f0f0f0;
}
+
.dialog-footer-new {
text-align: right;
padding-top: 16px;
@@ -3372,6 +3432,7 @@
}
}
}
+
.dialog-footer1-new {
position: sticky;
bottom: 28px;
@@ -3384,12 +3445,15 @@
display: flex;
justify-content: space-between;
align-items: center;
+
.el-button + .el-button {
margin-left: 12px;
}
+
.btngroups {
margin-left: 12px;
}
+
.el-button {
padding: 9px 20px;
@@ -3399,6 +3463,7 @@
}
}
}
+
.map-container {
width: 100%;
height: 400px;
@@ -3577,11 +3642,13 @@
pointer-events: none;
opacity: 0.3 !important;
}
+
.PopUpTableScrolls {
max-height: 600px;
overflow-y: scroll;
overflow-x: hidden;
}
+
.media-box {
width: 100%;
border: 1px solid #dcdfe6;
@@ -3595,6 +3662,7 @@
margin-bottom: 5px;
display: flex;
align-items: center;
+
.QRCodeImg {
width: 18px;
height: 18px;
@@ -3674,6 +3742,7 @@
display: block;
text-align: left;
margin-bottom: 5px;
+
&:first-child {
font-weight: bold;
margin-bottom: 4px;
--
Gitblit v1.9.3