emsfront/src/views/ems/ticket/index.vue

<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>