diff --git a/.eslintrc.js b/.eslintrc.js
index 1bb0c823a..de7f19773 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -16,17 +16,12 @@ module.exports = {
   },
   settings: {
     'vue-i18n': {
-      localeDir: './src/i18n/langs/*/*.json' // extention is glob formatting!
+      localeDir: './src/i18n/langs/*.json' // extention is glob formatting!
     }
   },
   // add your custom rules here
   // it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    // Optional.
-    'vue-i18n/no-dynamic-keys': 'error',
-    'vue-i18n/no-unused-keys': ['error', {
-      extensions: ['.js', '.vue']
-    }],
     'vue/max-attributes-per-line': [2, {
       'singleline': 10,
       'multiline': {
diff --git a/package.json b/package.json
index c34b19709..4641327a3 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,6 @@
   ],
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
diff --git a/src/components/DetailCard/ItemValue.vue b/src/components/DetailCard/ItemValue.vue
index 3cd965844..f11b50ab9 100644
--- a/src/components/DetailCard/ItemValue.vue
+++ b/src/components/DetailCard/ItemValue.vue
@@ -3,7 +3,7 @@ export default {
   name: 'ItemValue',
   props: {
     value: {
-      type: [String, Function],
+      type: [String, Function, Array],
       default: ''
     },
     item: {
@@ -11,7 +11,8 @@ export default {
       default: () => ({})
     },
     callback: {
-      type: Function
+      type: Function,
+      default: () => ({})
     }
 
   },
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 3e3431bf5..9d4eb83a2 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -147,6 +147,7 @@
     "show": "显示",
     "QuickUpdate": "快速更新",
     "Activate": "激活",
+    "DateCreate": "创建日期",
     "actions": {
       "exportRange": "导出范围",
       "exportAll": "导出全部",
@@ -186,7 +187,10 @@
     "Command filter": "命令过滤器",
     "confirm": "确认",
     "import": "导入",
-    "IsValid": "合法"
+    "IsValid": "合法",
+    "Open": "打开",
+    "Close": "关闭",
+    "DateCreated": "创建日期"
   },
   "applications": {
     "applications": "应用管理",
@@ -663,7 +667,11 @@
     "MyTickets": "我的工单",
     "AssignedMe": "待处理",
     "Assignees": "待处理人",
-    "Assignee": "处理人"
+    "Assignee": "处理人",
+    "Accept": "接受",
+    "Reject": "拒绝",
+    "Close": "关闭",
+    "Comment": "备注"
   },
   "users": {
     "Account": "账户",
@@ -757,4 +765,4 @@
   "settings": {
     "setting": ""
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 698860f8f..7eeb08d09 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -69,10 +69,10 @@
     "SystemUserCreate": "创建系统用户",
     "SystemUserUpdate": "更新系统用户",
     "": "",
-    "DatabaseApp": "",
-    "DatabaseAppDetail": "",
-    "RemoteApp": "",
-    "RemoteAppDetail": ""
+    "DatabaseApp": "Database apps",
+    "DatabaseAppDetail": "Database app detail",
+    "RemoteApp": "Remote apps",
+    "RemoteAppDetail": "Remote app detail"
   },
   "common": {
     "Other": "Other",
@@ -105,6 +105,7 @@
     "BasicInfo": "Basic info",
     "quickUpdate": "Quick update",
     "MoreActions": "Actions",
+    "DateCreated": "Date created",
     "nav": {
       "Help": "Help",
       "Docs": "Docs",
@@ -144,12 +145,14 @@
       "cancel": ""
     },
     "Auth": "",
-    "Command filter": "",
+    "Command filter": "Command filter",
     "Others": "",
     "updateFailedMsg": "",
-    "confirm": "",
-    "import": "",
-    "IsValid": ""
+    "confirm": "Confirm",
+    "import": "Import",
+    "IsValid": "Is valid",
+    "Open": "Open",
+    "Close": "Close"
   },
   "applications": {
     "applications": "Applications",
@@ -737,6 +740,10 @@
     "MyTickets": "",
     "AssignedMe": "",
     "title": "",
-    "date": ""
+    "date": "",
+    "Accept": "",
+    "Reject": "",
+    "Close": "",
+    "Comment": ""
   }
-}
\ No newline at end of file
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 7e3fc1ab0..ad4b79983 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -105,3 +105,8 @@ export function param2Obj(url) {
       '"}'
   )
 }
+
+// 将标准时间转换成时间戳
+export function getDateTimeStamp(dateStr) {
+  return Date.parse(dateStr.replace(/-/gi, '/'))
+}
diff --git a/src/views/tickets/TicketDetail/TicketDetail.vue b/src/views/tickets/TicketDetail/TicketDetail.vue
index e05b0ab5b..89df7ee8f 100644
--- a/src/views/tickets/TicketDetail/TicketDetail.vue
+++ b/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,15 +32,17 @@
             </div>
           </div>
         </template>
-        <el-form ref="comments" :model="form" label-width="80px" style="padding-top: 20px">
-          <el-form-item label="审批备注">
-            <el-input v-model="form.comments" type="textarea" :autosize="{ minRows: 4 }" />
+        <el-form ref="comments" :model="form" label-width="45px" style="padding-top: 20px">
+          <el-form-item label="回复">
+            <el-input v-model="form.comments" :autosize="{ minRows: 4 }" type="textarea" />
           </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>
-            <el-button type="warning" size="small" :disabled="object.status === 'closed'" @click="handleReject"><i class="fa fa-ban" />拒绝</el-button>
-            <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>
+            <template v-if="hasActionPerm">
+              <el-button :disabled="object.status === 'closed'" @click="handleApprove" type="primary" size="small"><i class="fa fa-check" />{{ $t('tickets.Accept') }}</el-button>
+              <el-button :disabled="object.status === 'closed'" @click="handleReject" type="warning" size="small"><i class="fa fa-ban" />{{ $t('tickets.Reject') }}</el-button>
+            </template>
+            <el-button :disabled="object.status === 'closed'" @click="handleClosed" type="danger" size="small"><i class="fa fa-times" />{{ $t('tickets.Close') }}</el-button>
+            <el-button :disabled="object.status === 'closed'" @click="handleComment" type="info" size="small"><i class="fa fa-pencil" />{{ $t('tickets.Comment') }}</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -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: {
@@ -77,6 +80,7 @@ export default {
       return this.object.title
     },
     detailCardItems() {
+      const vm = this
       return [
         {
           key: this.$t('tickets.user'),
@@ -88,7 +92,15 @@ export default {
         },
         {
           key: this.$t('tickets.status'),
-          value: this.object.status
+          value: this.object.status,
+          callback: function(row, data) {
+            const open = vm.$t('common.Open')
+            const close = vm.$t('common.Close')
+            if (data === 'open') {
+              return <el-button type='primary' size='mini'>{open}</el-button>
+            }
+            return <el-button type='danger' size='mini'>{close}</el-button>
+          }
         },
         {
           key: this.$t('tickets.Assignees'),
@@ -96,33 +108,78 @@ 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
+          key: this.$t('common.DateCreated'),
+          value: toSafeLocalDateStr(this.object.date_created)
         }
       ]
+    },
+    hasActionPerm() {
+      return this.object.assignees.indexOf(this.$store.state.users.profile.id) !== -1
     }
   },
   mounted() {
     const url = `/api/v1/tickets/tickets/${this.object.id}/comments/`
     this.$axios.get(url).then(res => {
       this.comments = res
-    }).catch(err => this.$message.error(this.$t(err)))
+    }).catch(err => {
+      this.$message.error(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 +188,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 +200,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 +212,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;
   }
diff --git a/src/views/tickets/TicketDetail/index.vue b/src/views/tickets/TicketDetail/index.vue
index eb5dab932..080d09725 100644
--- a/src/views/tickets/TicketDetail/index.vue
+++ b/src/views/tickets/TicketDetail/index.vue
@@ -1,6 +1,6 @@
 <template>
   <GenericDetailPage :object.sync="ticket" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
-    <component :is="config.activeMenu" :object="ticket" />
+    <component v-bind:is="config.activeMenu" :object="ticket" />
   </GenericDetailPage>
 </template>
 
@@ -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>
diff --git a/src/views/tickets/index.js b/src/views/tickets/index.js
index 0de4c85b6..e215e68b8 100644
--- a/src/views/tickets/index.js
+++ b/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
   }
 ]
diff --git a/src/views/users/groups/UserGroupDetail/index.vue b/src/views/users/groups/UserGroupDetail/index.vue
index 2322da014..4e6d638d5 100644
--- a/src/views/users/groups/UserGroupDetail/index.vue
+++ b/src/views/users/groups/UserGroupDetail/index.vue
@@ -1,22 +1,23 @@
 <template>
   <GenericDetailPage :object.sync="group" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
     <keep-alive>
-      <component :is="config.activeMenu" :object="group" />
+      <component v-bind:is="config.activeMenu" :object="group" />
     </keep-alive>
   </GenericDetailPage>
 </template>
 
 <script>
-import { GenericDetailPage, TabPage } from '@/layout/components'
+import { GenericDetailPage } from '@/layout/components'
 import GroupGrantedAssets from './GroupGrantedAssets'
 import GroupInfo from './GroupInfo'
 
 export default {
   components: {
     GenericDetailPage,
+    // eslint-disable-next-line vue/no-unused-components
     GroupGrantedAssets,
-    GroupInfo,
-    TabPage
+    // eslint-disable-next-line vue/no-unused-components
+    GroupInfo
   },
   data() {
     return {
diff --git a/src/views/users/users/UserDetail/UserInfo.vue b/src/views/users/users/UserDetail/UserInfo.vue
index cb0c89c07..d778a573d 100644
--- a/src/views/users/users/UserDetail/UserInfo.vue
+++ b/src/views/users/users/UserDetail/UserInfo.vue
@@ -4,8 +4,8 @@
       <DetailCard :items="detailItems" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
-      <RelationCard type="info" style="margin-top: 15px" v-bind="relationConfig" />
+      <QuickActions :actions="quickActions" type="primary" />
+      <RelationCard v-bind="relationConfig" type="info" style="margin-top: 15px" />
     </el-col>
   </el-row>
 </template>
@@ -245,6 +245,9 @@ export default {
       this.relationConfig.hasObjectsId = iNew.users
     }
   },
+  mounted() {
+    console.log(this.object)
+  },
   methods: {
   }
 }
diff --git a/src/views/users/users/UserDetail/index.vue b/src/views/users/users/UserDetail/index.vue
index 12d87ed5f..2aa233bfa 100644
--- a/src/views/users/users/UserDetail/index.vue
+++ b/src/views/users/users/UserDetail/index.vue
@@ -1,13 +1,13 @@
 <template>
   <GenericDetailPage :object.sync="user" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
     <keep-alive>
-      <component :is="config.activeMenu" :object="user" />
+      <component v-bind:is="config.activeMenu" :object="user" />
     </keep-alive>
   </GenericDetailPage>
 </template>
 
 <script>
-import { GenericDetailPage, TabPage } from '@/layout/components'
+import { GenericDetailPage } from '@/layout/components'
 import UserAssetPermissionRules from './UserAssetPermissionRules'
 import UserGrantedAssets from './UserGrantedAssets'
 import UserGrantedRemoteApps from './UserGrantedRemoteApps'
@@ -25,8 +25,7 @@ export default {
     UserGrantedRemoteApps,
     UserRemoteAppPermissionRules,
     UserGrantedDatabases,
-    UserDatabasePermissionRules,
-    TabPage
+    UserDatabasePermissionRules
   },
   data() {
     return {