工单管理部分接口联调

src/api/ems/ticket.js

@@ -1,11 +1,10 @@
 import request from '@/utils/request'
 
 // 查询工单主列表
-export function listTicket(query) {
+export function listTicket({pageNum, pageSize}) {
   return request({
-    url: '/ticket/list',
+    url: `/ticket/list?pageNum=${pageNum}&pageSize=${pageSize}`,
     method: 'get',
-    params: query
   })
 }
 
@@ -36,9 +35,10 @@ export function updateTicket(data) {
 }
 
 // 删除工单主
-export function delTicket(id) {
+export function delTicket(data) {
   return request({
-    url: '/ticket/' + id,
+    url: `/ticket/drop`,
-    method: 'delete'
+    method: 'post',
+    data
   })
 }

src/views/ems/ticket/index.vue

@@ -8,7 +8,8 @@
       max-height="500px"
       style="width: 100%;margin-top: 25px">
       <el-table-column
-        prop="gdh"
+        width="150"
+        prop="ticketNo"
         label="工单号">
       </el-table-column>
       <el-table-column
@@ -17,25 +18,26 @@
       >
       </el-table-column>
       <el-table-column
-        prop="question"
+        prop="content"
-        min-width="300"
         show-overflow-tooltip
+        min-width="120"
         label="问题描述">
       </el-table-column>
       <el-table-column
-        prop="handleStatus"
+        prop="status"
         label="处理状态">
       </el-table-column>
       <el-table-column
-        prop="submitName"
+        prop="createBy"
         label="提交人">
       </el-table-column>
       <el-table-column
-        prop="handleName"
+        prop="updateBy"
         label="处理人">
       </el-table-column>
       <el-table-column
-        prop="submitTime"
+        min-width="90"
+        prop="createtime"
         label="提交时间">
       </el-table-column>
       <el-table-column
@@ -58,12 +60,25 @@
         </template>
       </el-table-column>
     </el-table>
+    <el-pagination
+      v-show="tableData.length>0"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNum"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalSize"
+      style="margin-top:15px;text-align: center"
+    >
+    </el-pagination>
     <add-ticket ref="addTicket" :mode="mode"/>
   </div>
 </template>
 
 <script>
-// import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
+import {listTicket,delTicket} from '@/api/ems/ticket'
 import AddTicket from './AddTicket.vue'
 export default {
   name: "Ticket",
@@ -73,12 +88,34 @@ export default {
       mode:'',//新增、修改工单
       editTicketId:'',
       loading:false,
-      tableData:[
+      tableData:[],
-        {gdh:'0001',title:'工单一',question:'问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述',handleStatus:'处理完成',submitName:'张三',handleName:'李四',submitTime:'2025/06/20'}
+      pageSize:10,//分页栏当前每个数据总数
-      ]
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
     }
   },
   methods:{
+    getData(){
+      const {pageNum,pageSize} =this
+      this.loading=true;
+      listTicket({pageNum,pageSize}).then(response => {
+        this.tableData = JSON.parse(JSON.stringify(response?.rows || []))
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
     addTicket(){
       this.mode = 'add';
       this.$refs.addTicket.dialogTableVisible = true;
@@ -89,7 +126,6 @@ export default {
       this.$refs.addTicket.dialogTableVisible = true;
     },
     deleteTicket(row){
-      console.log('表格行数据',row)
       this.$confirm(`确认要废弃工单${row.title}吗?`, {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -99,13 +135,11 @@ export default {
         beforeClose: (action, instance, done) => {
           if (action === 'confirm') {
             instance.confirmButtonLoading = true;
-            setTimeout(() => {
+            delTicket({id:row.id}).then(response => {
-              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              response.code === 200 && done();
-              done();
+            }).finally(() => {
-              // setTimeout(() => {
               instance.confirmButtonLoading = false;
-              // }, 300);
+            })
-            }, 3000);
           } else {
             done();
           }
@@ -116,12 +150,16 @@ export default {
           type: 'success',
           message: '废弃成功!'
         });
+        this.getData()
         //调用接口 更新表格数据
       }).catch(() => {
         //取消关机
       });
     }
   },
+  mounted() {
+    this.getData()
+  }
 }
 </script>