工单详情更改

src/api/work/order.js

@@ -14,3 +14,12 @@ export function info(id) {
     url: `/system/work/${id}`,
   });
 }
+
+// 保存工单处理信息
+export function modify(data) {
+  return request({
+    url: '/system/work',
+    method:'POST',
+    data
+  });
+}

src/views/workOrderManage/orderList/detail.vue

@@ -1,32 +1,98 @@
 <template>
   <section class="app-container">
-    <el-row>
-      <el-col :span="8">
-        <el-row>
-          <span>设备名称：{{info.deviceName }}</span>
-        </el-row>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <span>地区：{{info.proName + info.cityName + info.disName }}</span>
       </el-col>
-      <el-col :span="8">1</el-col>
-      <el-col :span="8">1</el-col>
+      <el-col :span="6"><span>工单编号：{{info.workCode }}</span></el-col>
+      <el-col :span="6">
+        <span>告警等级：{{info.warningLevel==='1'?'一级': info.warningLevel==='2'?'二级':'三级'}}</span>
+      </el-col>
+      <el-col :span="6"><span>告警名称：{{info.warningName }}</span></el-col>
     </el-row>
+    <el-row :gutter="20">
+      <el-col :span="6"><span>产品名称：{{info.productName }}</span></el-col>
+      <el-col :span="6"><span>所属客户：{{info.nickName }}</span></el-col>
+      <el-col :span="6"><span>设备SN：{{info.deviceSn }}</span></el-col>
+      <el-col :span="6"><span>告警状态：{{info.status }}</span></el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="6"><span>工单状态：{{info.workStatus==='1'?'待接单': info.workStatus==='2'?'待回单':'已回单' }}</span></el-col>
+      <el-col :span="6"><span>建单时间：{{info.createTime | formatDate }}</span></el-col>
+    </el-row>
+    <!-- 表格区域 -->
+        <el-table v-loading="loading" :data="info.workStepList" style="width: 100%">
+            <el-table-column prop="userName" align="center" label="操作人" min-width="150"></el-table-column>
+            <el-table-column align="center" label="接单时间" min-width="150">
+              <template slot-scope="scope">
+                {{ scope.row.workGetTime | formatDate }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="回单时间" min-width="150">
+              <template slot-scope="scope">
+                {{ scope.row.workBackTime | formatDate }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="warningDetails" align="center" label="故障原因" min-width="150"></el-table-column>
+            <el-table-column prop="workMethod" align="center" label="处理方法" min-width="150"></el-table-column>
+        </el-table>
+        <div class="submit-btn">
+          <el-button type="primary" plain v-if="info.workStatus==='1'" @click="openMeet">接单</el-button>
+          <el-button type="primary" plain v-else-if="info.workStatus==='2'" @click="getReturn">回单</el-button>
+        </div>
+        <!-- 回单的对话框 -->
+        <el-dialog
+          title="提示"
+          :visible.sync="dialogReturn"
+          width="30%">
+          <el-form :rules="rules" ref="ruleReturnForm" :model="query" label-width="80px">
+            <el-form-item label="操作人：">
+              {{info.workStepList?info.workStepList[0].userName:null}}
+            </el-form-item>
+            <el-form-item label="故障原因：" label-width="100px" prop="warningDetails">
+              <el-input type="textarea" v-model="query.warningDetails"></el-input>
+            </el-form-item>
+            <el-form-item label="处理方法：" label-width="100px" prop="workMethod">
+              <el-input type="textarea" v-model="query.workMethod"></el-input>
+            </el-form-item>
+          </el-form>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogReturn = false">取 消</el-button>
+            <el-button type="primary" @click="upReturn">确 定</el-button>
+          </span>
+        </el-dialog>
   </section>
 </template>
 
 <script>
-import { info } from '@/api/work/order';
+import { info,modify } from '@/api/work/order';
 import { getProvinceByCode } from "@/api/hardware/province";
 export default {
   name: "TicketDetail",
   data () {
     return {
+      loading:false,
       id: '',
       info: {},
+      dialogReturn:false, // 回单对话框
+      query: {
+        warningDetails:'', // 故障原因
+        workMethod:'', // 处理方法的消息
+      },
       signal: [],
       signalUpdateTime: '',
       deviceTypeList: [
         { 'label': '锐能设备', 'value': 'rn', },
         { 'label': '铁塔设备', 'value': 'tt', },
       ],
+      rules: {
+          warningDetails: [
+            { required: true, message: '请输入故障原因', trigger: 'blur' },
+          ],
+          workMethod: [
+            { required: true, message: '请输入处理方法', trigger: 'blur' },
+          ],
+        }
     };
   },
   created () {
@@ -58,6 +124,47 @@ export default {
         }
       })
     },
+    async openMeet() {
+        const boo = await this.$confirm(
+        '此操作将此工单接单, 是否继续?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(err => err)
+       if (boo !== 'confirm') {
+        return this.$message.info('您已取消接单操作')
+      }
+      // 接单事件
+      const {code,msg} = await modify({
+        userId: this.$store.getters.userId,
+        workId: this.info.id
+      })
+      if(code!==200) return this.$message.error('接单失败')
+        this.$message.success('接单成功')
+        this.getDetail()
+      },
+      // 回单事件
+      async getReturn(){
+        this.dialogReturn=true
+        console.log('点击回单了');
+      },
+      // 提交回单数据
+      upReturn(){
+        this.$refs.ruleReturnForm.validate(async valid=>{
+          if (!valid) return this.$message.error('请输入必填项信息')
+          const {code,msg} = await modify(Object.assign({
+          userId: this.$store.getters.userId,
+          workId: this.info.id,
+        }, this.query))
+        if(code!==200) return this.$message.error('回单失败')
+        this.$message.success('回单成功')
+        this.dialogReturn=false
+        this.getDetail()
+        })
+      }, 
     getProvinceByCode (code) {
       return new Promise((resolve, reject) => {
         getProvinceByCode(code).then(({ code, msg, data }) => {
@@ -77,5 +184,20 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.el-row {
+    margin-bottom: 20px;
+  }
+  .el-table{
+    margin-top: 50px;
+  }
+  .submit-btn{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    .el-button{
+      font-size: 20px;
+    }
+  }
 </style>