接口联调

src/views/ems/ticket/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
+    <el-button type="primary" @click="addTicket" native-type="button">新增</el-button>
+    <el-table
+      class="common-table"
+      :data="tableData"
+      stripe
+      max-height="500px"
+      style="width: 100%;margin-top: 25px">
+      <el-table-column
+        prop="gdh"
+        label="工单号">
+      </el-table-column>
+      <el-table-column
+        prop="title"
+        label="工单标题"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="question"
+        min-width="300"
+        show-overflow-tooltip
+        label="问题描述">
+      </el-table-column>
+      <el-table-column
+        prop="handleStatus"
+        label="处理状态">
+      </el-table-column>
+      <el-table-column
+        prop="submitName"
+        label="提交人">
+      </el-table-column>
+      <el-table-column
+        prop="handleName"
+        label="处理人">
+      </el-table-column>
+      <el-table-column
+        prop="submitTime"
+        label="提交时间">
+      </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="150">
+        <template slot-scope="scope">
+          <el-button
+            @click="editTicket(scope.row.gdh)"
+            type="warning"
+            size="mini">
+            编辑
+          </el-button>
+          <el-button
+            @click="deleteTicket(scope.row)"
+            type="danger"
+            size="small">
+            废弃
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <add-ticket ref="addTicket" :mode="mode"/>
+  </div>
+</template>
+
+<script>
+// import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
+import AddTicket from './AddTicket.vue'
+export default {
+  name: "Ticket",
+  components: {AddTicket},
+  data() {
+    return {
+      mode:'',//新增、修改工单
+      editTicketId:'',
+      loading:false,
+      tableData:[
+        {gdh:'0001',title:'工单一',question:'问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述',handleStatus:'处理完成',submitName:'张三',handleName:'李四',submitTime:'2025/06/20'}
+      ]
+    }
+  },
+  methods:{
+    addTicket(){
+      this.mode = 'add';
+      this.$refs.addTicket.dialogTableVisible = true;
+    },
+    editTicket(id){
+      this.mode = 'add';
+      this.editTicketId = id
+      this.$refs.addTicket.dialogTableVisible = true;
+    },
+    deleteTicket(row){
+      console.log('表格行数据',row)
+      this.$confirm(`确认要废弃工单${row.title}吗?`, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在废弃成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '废弃成功!'
+        });
+        //调用接口 更新表格数据
+      }).catch(() => {
+        //取消关机
+      });
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.ems-content-container{
+  display: flex;
+  padding:24px;
+  padding-right: 0;
+  .map-container{
+    flex:auto;
+  }
+  .zd-msg-container{
+    width: 500px;
+    padding: 24px;
+    .single-zd-name{
+      font-weight: 500;
+      line-height: 23px;
+      color: #FFBD00;
+      font-size: 16px;
+      margin-bottom: 24px;
+    }
+    .single-square-box-container{
+      height: 78px;
+      box-sizing: border-box;
+      margin-bottom: 10px;
+    }
+    .single-zd-info-container{
+      font-size: 12px;
+      margin-top: 10px;
+      color:#666666;
+    }
+  }
+}
+</style>