[Update] 修改工单详情组件

src/components/DetailCard/ItemValue.vue

@@ -3,7 +3,7 @@ export default {
   name: 'ItemValue',
   props: {
     value: {
-      type: [String, Function],
+      type: [String, Function, Array],
       default: ''
     },
     item: {

src/i18n/langs/cn/route.json

@@ -43,6 +43,7 @@
   "BatchCommand": "批量命令",
   "TaskMonitor": "任务监控",
   "Tickets": "工单管理",
+  "TicketDetail": "工单详情",
   "Audits": "日志审计",
   "LoginLog": "登录日志",
   "FtpLog": "FTP日志",

src/i18n/langs/cn/tickets.json

@@ -7,5 +7,7 @@
   "MyTickets": "我的工单",
   "AssignedMe": "待处理",
   "Assignees": "待处理人",
-  "Assignee": "处理人"
+  "Assignee": "处理人",
+  "Open": "开启",
+  "Closed": "关闭"
 }

src/utils/index.js

@@ -105,3 +105,8 @@ export function param2Obj(url) {
       '"}'
   )
 }
+
+// 将标准时间转换成时间戳
+export function getDateTimeStamp(dateStr) {
+  return Date.parse(dateStr.replace(/-/gi, '/'))
+}

src/views/tickets/TicketDetail/TicketDetail.vue

@@ -7,24 +7,24 @@
             <el-avatar :src="imageUrl" class="header-avatar" />
           </a>
           <div class="media-body ">
-            <strong>{{ object.user_display }}</strong> <small class="text-muted"> {{ object.date_created }}</small>
+            <strong>{{ object.user_display }}</strong> <small class="text-muted"> {{ formatTime(object.date_created) }}</small>
             <br>
-            <small class="text-muted">{{ object.date_created }} </small>
+            <small class="text-muted">{{ toSafeLocalDateStr(object.date_created) }} </small>
             <div style="padding-top: 10px">
               <span v-html="object.body" />
             </div>
           </div>
         </div>
-        <template v-if="object.status === 'closed'">
+        <template v-if="comments">
           <div v-for="item in comments" :key="item.user_display + item.body">
             <div class="feed-element">
               <a href="#" class="pull-left">
                 <el-avatar :src="imageUrl" class="header-avatar" />
               </a>
               <div class="media-body ">
-                <strong>{{ item.user_display }}</strong> <small class="text-muted">{{ item.date_created }}</small>
+                <strong>{{ item.user_display }}</strong> <small class="text-muted">{{ formatTime(item.date_created) }}</small>
                 <br>
-                <small class="text-muted">{{ item.date_created }}</small>
+                <small class="text-muted">{{ toSafeLocalDateStr(item.date_created) }}</small>
                 <div style="padding-top: 10px">
                   {{ item.body }}
                 </div>
@@ -32,13 +32,15 @@
             </div>
           </div>
         </template>
-        <el-form ref="comments" :model="form" label-width="80px" style="padding-top: 20px">
+        <el-form ref="comments" :model="form" label-width="45px" style="padding-top: 20px">
-          <el-form-item label="审批备注">
+          <el-form-item label="回复">
             <el-input v-model="form.comments" type="textarea" :autosize="{ minRows: 4 }" />
           </el-form-item>
           <el-form-item style="float: right">
-            <el-button type="primary" size="small" :disabled="object.status === 'closed'" @click="handleApprove"><i class="fa fa-check" />同意</el-button>
+            <template v-if="hasActionPerm">
-            <el-button type="warning" size="small" :disabled="object.status === 'closed'" @click="handleReject"><i class="fa fa-ban" />拒绝</el-button>
+              <el-button type="primary" size="small" :disabled="object.status === 'closed'" @click="handleApprove"><i class="fa fa-check" />同意</el-button>
+              <el-button type="warning" size="small" :disabled="object.status === 'closed'" @click="handleReject"><i class="fa fa-ban" />拒绝</el-button>
+            </template>
             <el-button type="danger" size="small" :disabled="object.status === 'closed'" @click="handleClosed"><i class="fa fa-times" />关闭</el-button>
             <el-button type="info" size="small" :disabled="object.status === 'closed'" @click="handleComment"><i class="fa fa-pencil" />备注</el-button>
           </el-form-item>
@@ -50,6 +52,8 @@
 
 <script>
 import { DetailCard } from '@/components'
+import { formatTime, getDateTimeStamp } from '@/utils/index'
+import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {
   name: 'TicketDetail',
@@ -64,12 +68,11 @@ export default {
   },
   data() {
     return {
-      title: '登录复核a-2(a-2)',
       imageUrl: require('@/assets/img/admin.png'),
       form: {
         comments: ''
       },
-      comments: []
+      comments: ''
     }
   },
   computed: {
@@ -88,7 +91,13 @@ export default {
         },
         {
           key: this.$t('tickets.status'),
-          value: this.object.status
+          value: this.object.status,
+          callback: function(row, data) {
+            if (data === 'open') {
+              return <el-button type='primary' size='mini'>开启</el-button>
+            }
+            return <el-button type='danger' size='mini'>关闭</el-button>
+          }
         },
         {
           key: this.$t('tickets.Assignees'),
@@ -96,13 +105,22 @@ export default {
         },
         {
           key: this.$t('tickets.Assignee'),
-          value: '需要处理'
+          value: this.comments,
+          callback: function(row, data) {
+            if (data.length !== 0) {
+              return <span>{data[0].user_display}</span>
+            }
+            return <span></span>
+          }
         },
         {
           key: this.$t('common.DateCreated'),
-          value: this.object.date_created
+          value: toSafeLocalDateStr(this.object.date_created)
         }
       ]
+    },
+    hasActionPerm() {
+      return this.object.assignees.indexOf(this.$store.state.user.user.id) !== -1
     }
   },
   mounted() {
@@ -112,17 +130,51 @@ export default {
     }).catch(err => this.$message.error(this.$t(err)))
   },
   methods: {
+    formatTime(dateStr) {
+      return formatTime(getDateTimeStamp(dateStr))
+    },
+    toSafeLocalDateStr(dataStr) {
+      return toSafeLocalDateStr(dataStr)
+    },
+    reloadPage() {
+      window.location.reload()
+    },
+    createComment(successCallback) {
+      const commentText = this.form.comments
+      const ticketId = this.object.id
+      const commentUrl = `/api/v1/tickets/tickets/${ticketId}/comments/`
+      if (!commentText) { return }
+      const body = {
+        body: commentText,
+        ticket: ticketId
+      }
+      this.$axios.post(commentUrl, body).then(res => {
+        if (successCallback) {
+          successCallback()
+        } else {
+          this.reloadPage()
+        }
+      })
+    },
     handleApprove() {
-      console.log('点击同意=====================')
+      this.createComment(function() {})
+      const url = `/api/v1/tickets/tickets/${this.object.id}/`
+      const data = { action: 'approve' }
+      this.$axios.patch(url, data).then(res => this.reloadPage()).catch(err => this.$message.error(err))
     },
     handleReject() {
-      console.log('点击拒绝=====================')
+      this.createComment(function() {})
+      const url = `/api/v1/tickets/tickets/${this.object.id}/`
+      const data = { action: 'reject' }
+      this.$axios.patch(url, data).then(res => this.reloadPage()).catch(err => this.$message.error(err))
     },
     handleClosed() {
-      console.log('点击关闭=====================')
+      const url = `/api/v1/tickets/tickets/${this.object.id}/`
+      const data = { status: 'closed' }
+      this.$axios.patch(url, data).then(res => this.reloadPage()).catch(err => this.$message.error(err))
     },
     handleComment() {
-      console.log('点击备注=====================')
+      this.createComment()
     }
   }
 }
@@ -131,6 +183,7 @@ export default {
 <style scoped>
   .feed-activity-list {
     padding-top: 20px;
+    line-height: 1.5;
   }
   .feed-activity-list .feed-element {
     border-bottom: 1px solid #e7eaec;
@@ -142,10 +195,7 @@ export default {
     padding-top: 15px;
     padding-bottom: 15px;
   }
-  .feed-element,
+
-  .feed-element .media {
-    margin-top: 15px;
-  }
   .feed-element,
   .media-body {
     overflow: hidden;
@@ -157,21 +207,6 @@ export default {
     width: 38px;
     height: 38px;
   }
-  .feed-element .well {
-    border: 1px solid #e7eaec;
-    box-shadow: none;
-    margin-top: 10px;
-    margin-bottom: 5px;
-    padding: 10px 20px;
-    font-size: 11px;
-    line-height: 16px;
-  }
-  .feed-element .actions {
-    margin-top: 10px;
-  }
-  .feed-element .photos {
-    margin: 10px 0;
-  }
   .text-muted {
     color: #888888;
   }

src/views/tickets/TicketDetail/index.vue

@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      ticket: {},
+      ticket: { title: '', user_display: '', type_display: '', status: '', assignees_display: '', date_created: '' },
       config: {
         activeMenu: 'TicketDetail',
         submenu: [
@@ -24,9 +24,15 @@ export default {
             title: '工单详情',
             name: 'TicketDetail'
           }
-        ]
+        ],
+        getObjectName: this.getObjectName
       }
     }
+  },
+  methods: {
+    getObjectName() {
+      return this.ticket.user_display
+    }
   }
 }
 </script>

src/views/tickets/index.js

@@ -9,7 +9,7 @@ export default [
     path: 'tickets/:id',
     name: 'TicketDetail',
     component: () => import('@/views/tickets/TicketDetail/index'),
-    meta: { title: 'TicketDetail' },
+    meta: { title: 'TicketDetail', activeMenu: '/tickets/tickets' },
     hidden: true
   }
 ]