工单管理

src/api/ems/ticket.js

@@ -42,3 +42,11 @@ export function delTicket(data) {
     data
   })
 }
+
+//查询所有的用户列表
+export function getAllUser() {
+  return request({
+    url: `/system/user/getAllUser`,
+    method: 'get',
+  })
+}

src/store/modules/ems.js

@@ -11,6 +11,7 @@ const ems = {
     alarmLevelOptions:{'A':'提示','B':'一般','C':'严重','D':'紧急'},//告警等级
     alarmStatusOptions:{'0':'待处理','1':'已处理','2':'处理中'},//告警状态
     deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
+    ticketStatusOptions:{0:'待处理', 1:'已处理', 2:'处理中'}//工单处理状态
   },
   mutations: {
     SET_ZD_LIST(state, list) {

src/views/ems/ticket/AddTicket.vue

@@ -1,33 +1,35 @@
 <template>
-    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑todo 工单名称` " :close-on-click-modal="false" :show-close="false">
+    <el-dialog v-loading="loading>0" :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增工单':`编辑工单` " :close-on-click-modal="false" :show-close="false">
       <el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
-        <el-form-item label="工单号" prop="gdh">
+        <el-form-item label="工单号" prop="ticketNo" v-if="mode !== 'add'">
-          <el-input :disabled="mode !=='add'" v-model="formData.gdh" placeholder="请输入" clearable :style="{width: '100%'}">
+          <el-input disabled v-model="formData.ticketNo" clearable :style="{width: '100%'}">
           </el-input>
         </el-form-item>
-        <el-form-item label="工单标题" prop="title" required>
+        <el-form-item label="工单标题" prop="title">
           <el-input v-model="formData.title" placeholder="请输入" clearable :style="{width: '100%'}">
           </el-input>
         </el-form-item>
-        <el-form-item label="问题描述" prop="question" required>
+        <el-form-item label="问题描述" prop="content">
-          <el-input v-model="formData.question" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
+          <el-input v-model="formData.content" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
           </el-input>
         </el-form-item>
-        <el-form-item label="处理状态" prop="handleStatus">
+        <el-form-item label="处理状态" prop="status">
-          <el-select v-model="formData.handleStatus" placeholder="请选择">
+          <el-select v-model="formData.status" placeholder="请选择" :style="{width: '100%'}">
-            <el-option :label="value" :value="key" v-for="(value,key) in handleStatusOptions" :key="key+'handleStatusOptions'"></el-option>
+            <el-option :label="value" :value="parseInt(key)" v-for="(value,key) in ticketStatusOptions" :key="key+'ticketStatusOptions'"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="提交人" prop="submitName" required>
+        <el-form-item label="提交人" prop="userId">
-          <el-input v-model="formData.submitName" placeholder="请输入" clearable :style="{width: '100%'}">
+          <el-select v-model="formData.userId" placeholder="请选择" :style="{width: '100%'}">
-          </el-input>
+            <el-option :label="item.userName" :value="item.userId" v-for="(item,index) in userList" :key="index+'createUserList'"></el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="处理人" prop="handleName" required>
+        <el-form-item label="处理人" prop="workUserId">
-          <el-input v-model="formData.handleName" placeholder="请输入" clearable :style="{width: '100%'}">
+          <el-select v-model="formData.workUserId" placeholder="请选择" :style="{width: '100%'}">
-          </el-input>
+            <el-option :label="item.userName" :value="item.userId" v-for="(item,index) in userList" :key="index+'updateUserList'"></el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="提交时间" prop="submitTime" required>
+        <el-form-item label="提交时间" prop="createTime" v-if="mode !== 'add'">
-          <el-input v-model="formData.submitTime" placeholder="请输入" clearable :style="{width: '100%'}">
+          <el-input v-model="formData.createTime"  disabled :style="{width: '100%'}">
           </el-input>
         </el-form-item>
       </el-form>
@@ -38,57 +40,142 @@
     </el-dialog>
 </template>
 <script>
+import {mapState} from "vuex";
+import {getTicket,getAllUser,addTicket,updateTicket} from'@/api/ems/ticket'
 export default {
   props:{
     mode:{
       type:String,
       default:"add"
     },
-//todo 修改数据时，从接口获取工单详情还是从列表中返回？
+    id:{
+      type:String,
+      required:false
+    }
   },
   data() {
+    const validateContent=(rule, value, callback) =>{
+      if (value === '') {
+        callback(new Error(`请输入${rule.field === 'title' ?'工单标题' :'问题描述'}`));
+      } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5!@#$%^&*-]+$/.test(value)) {
+        callback(new Error('只能输入中文、数字和特殊字符!'));
+      } else {
+        callback();
+      }
+    }
     return {
+      loading:0,
       dialogTableVisible:false,
-      handleStatusOptions:{'0':'处理完成','1':'处理中','2':'未处理'},
+      userList:[],
       formData: {
-        gdh: '',//工单号
+        id:'',
+        ticketNo:'',//工单号
         title: '',//工单标题
-        question: '',
+        content: '',
-        handleStatus:'',
+        status:'',
-        submitName:'',
+        createBy:'',//提交人
-        handleName: '',
+        userId:'',//提交人id
-        submitTime: '',
+        updateBy: '',//处理人
+        workUserId:'',//处理人id
+        createTime: '',//提交时间
       },
       rules: {
-        gdh: [{
+        title:[
-          required: true,
+          { validator: validateContent, trigger: 'blur' }
-          message: '请输入',
+        ],
-          trigger: 'blur'
+        content:[
-        }],
+          { validator: validateContent, trigger: 'blur' }
+        ],
+        status:[
+          { required: true, message: '请选择工单状态', trigger: ['blur', 'change']}
+        ],
+        userId:[
+          { required: true, message: '请选择提交人', trigger: ['blur', 'change'] }
+        ],
+        workUserId:[
+          { required: true, message: '请选择处理人', trigger: ['blur', 'change'] }
+        ]
       },
     }
   },
-  computed: {},
+  computed: {
-  created() {},
+    ...mapState({
-  mounted() {},
+      ticketStatusOptions: state => state?.ems?.ticketStatusOptions || {},
+    })
+  },
+  watch:{
+    dialogTableVisible:{
+      handler(newVal){
+        newVal && this.getUserList()
+      },
+      immediate: true,
+    },
+    id:{
+      handler(newVal){
+        if(newVal && this.mode !== 'add'){
+          //获取详情
+          this.loading+=1
+          getTicket(newVal).then(response => {
+            this.formData = JSON.parse(JSON.stringify(response?.data || {}));
+          }).finally(() => {this.loading-=1})
+        }
+      },
+      immediate: true,
+    }
+  },
   methods: {
+    getUserList(){
+      this.loading= this.loading+1
+      getAllUser().then(response => {
+        this.userList = JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {
+        this.loading=this.loading -1
+      })
+    },
     saveDialog() {
       this.$refs.addTempForm.validate(valid => {
         if (!valid) return
+        this.loading+=1
+        const {title='',content='',status='',userId='',workUserId='',id=''} = this.formData;
+        if(this.mode === 'add'){
+          addTicket({title,content,status,userId,workUserId}).then(response => {
+            if(response.code === 200){
+              //新增成功
+              // 关闭弹窗 更新表格
+              this.$emit('update')
               this.closeDialog()
+            }
+          }).finally(() => {
+            this.loading-=1
+          })
+        }else{
+          updateTicket({title,content,status,userId,workUserId,id}).then(response => {
+            if(response.code === 200){
+              //新增成功
+              // 关闭弹窗 更新表格
+              this.$emit('update')
+              this.closeDialog()
+            }
+          }).finally(() => {
+            this.loading-=1
+          })
+        }
+
       })
     },
     closeDialog(){
       // 清空所有数据
       this.$refs.addTempForm.resetFields()
       this.formData={
-        gdh: '',//工单号
         title: '',//工单标题
-        question: '',
+        content: '',
-        handleStatus:'',
+        status:'',
-        submitName:'',
+        createBy:'',//提交人
-        handleName: '',
+        userId:'',//提交人id
-        submitTime: '',
+        updateBy: '',//处理人
+        workUserId:'',//处理人id
+        completeTime: '',//提交时间
+        ticketNo:'',//工单号
       }
       this.dialogTableVisible=false
     }
@@ -101,10 +188,5 @@ export default {
   .el-dialog{
     max-width: 700px;
   }
-  .add-time-form{
-    .el-input{
-      width: 220px;
-    }
-  }
 }
 </style>

src/views/ems/ticket/index.vue

@@ -26,18 +26,21 @@
       <el-table-column
         prop="status"
         label="处理状态">
+        <template slot-scope="scope">
+          {{ticketStatusOptions[scope.row.status]}}
+        </template>
       </el-table-column>
       <el-table-column
-        prop="createBy"
+        prop="userName"
         label="提交人">
       </el-table-column>
       <el-table-column
-        prop="updateBy"
+        prop="workName"
         label="处理人">
       </el-table-column>
       <el-table-column
         min-width="90"
-        prop="createtime"
+        prop="createTime"
         label="提交时间">
       </el-table-column>
       <el-table-column
@@ -46,7 +49,7 @@
         width="150">
         <template slot-scope="scope">
           <el-button
-            @click="editTicket(scope.row.gdh)"
+            @click="editTicket(scope.row)"
             type="warning"
             size="mini">
             编辑
@@ -73,16 +76,22 @@
       style="margin-top:15px;text-align: center"
     >
     </el-pagination>
-    <add-ticket ref="addTicket" :mode="mode"/>
+    <add-ticket ref="addTicket" :mode="mode" :id="editTicketId" @update="resetTick()"/>
   </div>
 </template>
 
 <script>
 import {listTicket,delTicket} from '@/api/ems/ticket'
 import AddTicket from './AddTicket.vue'
+import {mapState} from "vuex";
 export default {
   name: "Ticket",
   components: {AddTicket},
+  computed: {
+    ...mapState({
+      ticketStatusOptions: state => state?.ems?.ticketStatusOptions || {},
+    })
+  },
   data() {
     return {
       mode:'',//新增、修改工单
@@ -120,9 +129,9 @@ export default {
       this.mode = 'add';
       this.$refs.addTicket.dialogTableVisible = true;
     },
-    editTicket(id){
+    editTicket(row){
-      this.mode = 'add';
+      this.mode = 'edit';
-      this.editTicketId = id
+      this.editTicketId = row.id
       this.$refs.addTicket.dialogTableVisible = true;
     },
     deleteTicket(row){
@@ -155,6 +164,11 @@ export default {
       }).catch(() => {
         //取消关机
       });
+    },
+    resetTick(){
+      this.mode = '';
+      this.editTicketId=''
+      this.getData()
     }
   },
   mounted() {