From 653bbaceb72e454e4725036eb92593694b817f00 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 20 Nov 2025 15:44:48 +0800
Subject: [PATCH] feat:11
---
src/views/tickets/ticket.vue | 268 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 182 insertions(+), 86 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index 644cb20..a890bc5 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -24,8 +24,6 @@
/>
</el-form-item>
</el-col>
-
-
<el-col :span="5">
<el-form-item label="选择日期:">
<el-date-picker
@@ -112,45 +110,24 @@
</el-form>
</div>
<!-- 表格部分 -->
- <avue-crud
- class="ztzf-public-general-avue-crud"
- ref="avueCrud"
- v-model="tableData"
- :option="option"
- :data="tableData"
- v-model:page="page"
- @size-change="sizeChange"
- @current-change="handleCurrentChange"
- @refresh-change="refreshChange"
- :table-loading="loading"
- @selection-change="handleSelectionChange"
- :permission="permissionList"
- v-if="activeTab === tab.name"
- >
- <template #orderNumber="{ row }">
- <el-tooltip-copy :content="row.orderNumber" :showCopyText="true" textAlign="left">
- {{ row.orderNumber }}
- </el-tooltip-copy>
- </template>
- <template #orderName="{ row }">
- <el-tooltip-copy :content="row.orderName" :showCopyText="true" textAlign="left">
- {{ row.orderName }}
- </el-tooltip-copy>
- </template>
- <template #menu-left>
+ <!-- 表格操作按钮 -->
+ <div class="table-operations">
+ <div class="left-operations">
<el-button
v-if="(activeTab === 'all' || activeTab === 'myTickets') && permissionList.addBtn"
type="primary"
icon="el-icon-plus"
@click="handleAdd"
- >新建工单
+ >
+ 新建工单
</el-button>
<el-button
v-if="activeTab === 'pending' && permissionList.reviewBtn"
type="success"
icon="el-icon-check"
@click="openReviewDialog"
- >批量审核
+ >
+ 批量审核
</el-button>
<el-button
@@ -159,57 +136,126 @@
plain
icon="el-icon-download"
@click="exportData"
- >导出
+ >
+ 导出
</el-button>
+ </div>
+ </div>
+ <div class="dataTable">
+ <el-table
+ class="ztzf-public-general-el-table custom-header"
+ ref="elTable"
+ :data="tableData"
+ v-loading="loading"
+
+ @selection-change="handleSelectionChange"
+ border
+ style="width: 100%"
+ v-if="activeTab === tab.name"
+ >
+ <el-table-column type="selection" width="55" v-if="permissionList.reviewBtn || permissionList.exportBtn" />
+ <el-table-column type="index" label="序号" width="60" />
+ <el-table-column prop="orderNumber" label="工单编号" width="170">
+ <template #default="{ row }">
+ <el-tooltip-copy :content="row.orderNumber" :showCopyText="true" textAlign="left">
+ {{ row.orderNumber }}
+ </el-tooltip-copy>
+
</template>
- <template #menu="{ row }">
+ </el-table-column>
+
+ <el-table-column prop="orderName" label="工单名称" width="150" show-overflow-tooltip>
+ <template #default="{ row }">
+ <el-tooltip-copy :content="row.orderName" :showCopyText="true" textAlign="left">
+ {{ row.orderName }}
+ </el-tooltip-copy>
+ </template>
+ </el-table-column>
+
+ <el-table-column prop="department" label="所属部门" show-overflow-tooltip />
+
+ <el-table-column prop="startTime" label="发起任务时间" width="160" show-overflow-tooltip />
+
+ <el-table-column prop="aiType" label="关联算法" show-overflow-tooltip />
+
+ <el-table-column prop="type" label="工单类型" width="110" show-overflow-tooltip>
+ <template #default="{ row }">
+ {{ getTypeLabel(row.type) }}
+ </template>
+ </el-table-column>
+
+ <el-table-column prop="content" label="工单内容" width="152" show-overflow-tooltip>
+ <template #default="{ row }">
+ {{ row.address || row.content }}
+ </template>
+ </el-table-column>
+
+ <el-table-column prop="creator" label="创建人" width="120" show-overflow-tooltip />
+
+ <el-table-column prop="handler" label="处理人" width="120" show-overflow-tooltip />
+
+ <el-table-column
+ v-if="['all', 'completed', 'myTickets'].includes(activeTab)"
+ label="复核状态"
+ prop="isReview"
+ width="90"
+ >
+ <template #default="{ row }">
+ <span>{{ showIsReviewText(row) }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column label="工单状态" prop="status" width="90">
+ <template #default="{ row }">
+ <span :style="getStatusTagType(row.status) ? 'color:' + getStatusTagType(row.status) : ''">
+ {{ mapStatus(row.status) }}
+ </span>
+ </template>
+ </el-table-column>
+
+ <!-- 操作列 -->
+ <el-table-column label="操作" width="150" fixed="right">
+ <template #default="{ 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 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>
+ <el-button type="text" icon="el-icon-view" @click="handleViewDetail(row)">详情</el-button>
</template>
-
- <template v-if="row.status === 4 && activeTab === 'completed'">
- <el-button type="text" icon="el-icon-download" @click="exportTheTick(row)"
- >导出
- </el-button>
+
+ <template v-if="row.status === 4 && activeTab === 'completed'">
+ <el-button type="text" icon="el-icon-download" @click="exportTheTick(row)">导出</el-button>
</template>
+
<template v-if="permission.tickets_repeat_review">
<el-button
v-if="row.status === 4 && row.isReview !== 1"
type="text"
icon="el-icon-check"
@click="reCheck(row)"
- >复核
+ >
+ 复核
</el-button>
</template>
</template>
- <template #status="{ row }">
- <span
- :style="getStatusTagType(row.status) ? 'color:' + getStatusTagType(row.status) : ''"
- >
- {{ mapStatus(row.status) }}
- </span>
- </template>
- <template #keyData="{ row }">
- <span>{{ row.address }}</span>
- </template>
-
- <template #isReview="{ row }">
- <span>{{ showIsReviewText(row) }}</span>
- </template>
- </avue-crud>
+ </el-table-column>
+ </el-table>
+ </div>
+ <el-pagination
+ class="table-pagination"
+ v-model:current-page="page.currentPage"
+ v-model:page-size="page.pageSize"
+ :page-sizes="[10, 20, 30, 40]"
+ :total="page.total"
+ background
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="sizeChange"
+ @current-change="handleCurrentChange"
+ />
</basic-main-content>
</el-tab-pane>
</el-tabs>
@@ -339,7 +385,6 @@
</div>
</template>
</el-dialog>
-
<!-- 复核弹出层 -->
<recheck-dialog
v-model="reCheckDialog"
@@ -358,7 +403,6 @@
import _ from 'lodash';
import {
getList,
- createTicket,
getTicketInfo,
flowEvent,
getstatusCount,
@@ -401,7 +445,7 @@
{ label: '待处理', name: 'processing', value: 0, count: 0 },
{ label: '处理中', name: 'inProgress', value: 3, count: 0 },
{ label: '已完成', name: 'completed', value: 4, count: 0 },
- // { label: "已完结", name: "closed", value: 5, count: 0 },
+ ,
{ label: '我的工单', name: 'myTickets', value: null, count: 0 },
],
filters: {
@@ -699,6 +743,11 @@
},
methods: {
+ // 获取工单类型标签
+ getTypeLabel(typeValue) {
+ const typeObj = this.types.find(item => item.value === typeValue);
+ return typeObj ? typeObj.label : typeValue;
+ },
handleCheck(data, { checkedKeys, checkedNodes }) {
this.checkedKeys = checkedKeys;
// 获取所有选中节点的 dictKey
@@ -1112,21 +1161,19 @@
handleKeyWords() {
this.$router.replace({}); //清除url参数
},
+// 分页
+ async handleCurrentChange(val) {
+ this.page.currentPage = val;
+ await this.$nextTick();
+ await this.fetchTableData();
+ },
- async handleCurrentChange(val) {
- // 先更新页码
- this.page.currentPage = val;
- // 等待 DOM 更新后再请求数据
- await this.$nextTick();
- await this.fetchTableData();
- },
-
- async sizeChange(val) {
- this.page.pageSize = val;
- this.page.currentPage = 1; // 重置到第一页
- await this.$nextTick();
- await this.fetchTableData();
- },
+ async sizeChange(val) {
+ this.page.pageSize = val;
+ this.page.currentPage = 1;
+ await this.$nextTick();
+ await this.fetchTableData();
+ },
handleAdd() {
this.editFormData = null; // 设置为 null 表示新建模式
@@ -1228,10 +1275,10 @@
},
- refreshChange() {
- if (this.isFetching) return;
- this.fetchTableData();
- },
+ refreshChange() {
+ if (this.isFetching) return;
+ this.fetchTableData();
+ },
onLoad() {
if (this.isFetching) return;
@@ -1426,8 +1473,8 @@
// 清空选择
clearSelection() {
- this.$refs.avueCrud.clearSelection();
- },
+ this.$refs.elTable.clearSelection();
+ },
// 打开审核对话框
openReviewDialog() {
@@ -1711,6 +1758,7 @@
};
</script>
<style lang="scss">
+
.custom-qrcode-popover {
min-width: 160px !important;
min-height: 140px !important;
@@ -1736,6 +1784,54 @@
}
</style>
<style lang="scss" scoped>
+.dataTable {
+height: 565px;
+overflow: auto;
+}
+:deep(.custom-header th.el-table__cell) {
+ color: rgba(0, 0, 0, 0.85);
+ background: #fafafa;
+ height: 55px !important;
+}
+/* 表格操作区域样式 */
+.table-operations {
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.left-operations {
+ display: flex;
+ gap: 8px;
+}
+
+/* 表格样式 */
+.ztzf-public-general-el-table {
+ margin-bottom: 16px;
+}
+
+/* 分页样式 */
+.table-pagination {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 10px;
+}
+.ztzf-public-general-el-table {
+ :deep(.el-table__header-wrapper) {
+ background-color: #f5f7fa;
+ }
+
+ :deep(.el-table th) {
+ background-color: #f5f7fa;
+ color: #606266;
+ font-weight: 600;
+ }
+
+ :deep(.el-table--border) {
+ border: 1px solid #ebeef5;
+ }
+}
::v-deep(.el-tabs) {
height: 100%;
display: flex;
--
Gitblit v1.9.3