Merge pull request #1780 from jumpserver/pr@dev@refactor_tickiets

perf: 工单重构
2026-01-15 14:24:39 +00:00 · 2022-06-23 14:38:44 +08:00
parent cc94eb6d4e 57e5452220
commit 3d41215a63
23 changed files with 526 additions and 320 deletions
--- a/src/components/ListTable/TableAction/LeftSide.vue
+++ b/src/components/ListTable/TableAction/LeftSide.vue
@@ -27,7 +27,7 @@ export default {
    createRoute: {
      type: [String, Object, Function],
      default: function() {
-        return this.$route.name.replace('List', 'Create')
+        return this.$route.name?.replace('List', 'Create')
      }
    },
    createInNewPage: {
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -693,6 +693,8 @@
    "AssetAccount": "资产账号",
    "ApplicationAccount": "应用账号",
    "Ticket":"工单",
+    "MyTickets": "我的申请",
+    "AssignedTicketList": "待我审批",
    "SessionDetail": "会话详情",
    "CommandConfirm": "命令复核",
    "AdminUserCreate": "创建管理用户",
@@ -1135,8 +1137,8 @@
    "Assignee": "处理人",
    "Assignees": "待处理人",
    "Close": "关闭",
-    "OpenStatus":"开启",
-    "CloseStatus":"关闭",
+    "OpenStatus":"审批中",
+    "CloseStatus":"已完成",
    "Comment": "备注",
    "MyTickets": "我发起的",
    "RequestPerm":"授权申请",
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -89,7 +89,7 @@ export default {
    createSuccessNextRoute: {
      type: Object,
      default: function() {
-        const routeName = this.$route.name.replace('Create', 'List')
+        const routeName = this.$route.name?.replace('Create', 'List')
        return { name: routeName }
      }
    },
@@ -97,15 +97,14 @@ export default {
    updateSuccessNextRoute: {
      type: Object,
      default: function() {
-        const routeName = this.$route.name.replace('Update', 'List')
+        const routeName = this.$route.name?.replace('Update', 'List')
        return { name: routeName }
      }
    },
    objectDetailRoute: {
      type: Object,
      default: function() {
-        const routeName = this.$route.name
-          .replace('Update', 'Detail')
+        const routeName = this.$route.name?.replace('Update', 'Detail')
          .replace('Create', 'Detail')
        return { name: routeName }
      }
--- a/src/router/tickets/index.js
+++ b/src/router/tickets/index.js
@@ -4,7 +4,7 @@ import i18n from '@/i18n/i18n'

 export default {
  path: '/tickets',
-  redirect: '/tickets/tickets',
+  redirect: '/tickets/my-tickets',
  component: Layout,
  meta: {
    title: i18n.t('route.Tickets'),
@@ -17,26 +17,40 @@ export default {
    permissions: ['tickets.view_ticket']
  },
  children: [
+    {
+      path: '/tickets/my-tickets',
+      name: 'MyTicketList',
+      component: () => import('@/views/tickets/MyTicketList'),
+      meta: {
+        title: i18n.t('route.MyTickets'),
+        icon: 'file-text-o',
+        showOrganization: false,
+        permissions: []
+      }
+    },
+    {
+
+      path: '/tickets/assigned-tickets',
+      name: 'AssignedTicketList',
+      component: () => import('@/views/tickets/AssignedTicketList'),
+      meta: {
+        title: i18n.t('route.AssignedTicketList'),
+        icon: 'check-square-o',
+        showOrganization: false,
+        permissions: []
+      }
+    },
    {
      path: '/tickets/tickets',
      redirect: '',
      component: empty,
+      hidden: true,
      meta: {
        title: i18n.t('route.Tickets'),
        icon: 'file-text-o',
        showOrganization: false
      },
      children: [
-        {
-          path: '',
-          name: 'TicketList',
-          component: () => import('@/views/tickets'),
-          meta: {
-            title: i18n.t('route.Tickets'),
-            icon: 'file-text-o',
-            permissions: ['tickets.view_ticket']
-          }
-        },
        {
          path: 'request-asset-perm/create',
          name: 'RequestAssetPermTicketCreateUpdate',
@@ -67,6 +81,16 @@ export default {
          },
          hidden: true
        },
+        {
+          path: 'login-confirm/:id',
+          name: 'LoginTicketDetail',
+          component: () => import('@/views/tickets/LoginConfirm/Detail'),
+          meta: {
+            title: i18n.t('route.TicketDetail'),
+            permissions: ['tickets.view_ticket']
+          },
+          hidden: true
+        },
        {
          path: 'request-application-perm/create',
          name: 'RequestApplicationPermTicketCreateUpdate',
--- a/src/views/tickets/AssignedTicketList.vue
+++ b/src/views/tickets/AssignedTicketList.vue
@@ -1,14 +1,14 @@
 <template>
-  <TicketListTable :url="url" />
+  <BaseTicketList :url="url" />
 </template>

 <script>
-import TicketListTable from './TicketListTable'
+import BaseTicketList from './BaseTicketList'
 import { mapGetters } from 'vuex'
 export default {
  name: 'AssignedTicketList',
  components: {
-    TicketListTable
+    BaseTicketList
  },
  computed: {
    url() {
--- a/src/views/tickets/TicketListTable.vue
+++ b/src/views/tickets/TicketListTable.vue
@@ -1,15 +1,20 @@
 <template>
-  <ListTable :table-config="ticketTableConfig" :header-actions="ticketActions" />
+  <GenericListPage
+    v-loading="loading"
+    :table-config="ticketTableConfig"
+    :header-actions="ticketActions"
+  />
 </template>
+
 <script type="text/jsx">
-import ListTable from '@/components/ListTable'
+import { GenericListPage } from '@/layout/components'
 import { DetailFormatter } from '@/components/TableFormatters'
 import { toSafeLocalDateStr } from '@/utils/common'
-import { APPROVE, REJECT, CLOSED } from './const'
+import { APPROVE, REJECT } from './const'
 export default {
  name: 'TicketListTable',
  components: {
-    ListTable
+    GenericListPage
  },
  props: {
    url: {
@@ -23,6 +28,7 @@ export default {
  },
  data() {
    return {
+      loading: true,
      ticketTableConfig: {
        url: this.url,
        columns: [
@@ -42,8 +48,10 @@ export default {
                  return 'AssetsTicketDetail'
                } else if (row.type === 'apply_application') {
                  return 'AppsTicketDetail'
-                } else if (row.type === 'login_asset_confirm' || row.type === 'login_confirm') {
+                } else if (row.type === 'login_asset_confirm') {
                  return 'LoginAssetTicketDetail'
+                } else if (row.type === 'login_confirm') {
+                  return 'LoginTicketDetail'
                } else if (row.type === 'command_confirm') {
                  return 'CommandConfirmDetail'
                } else {
@@ -53,9 +61,12 @@ export default {
            }
          },
          {
-            prop: 'applicant_display',
+            prop: 'applicant',
            label: this.$t('tickets.user'),
-            sortable: 'custom'
+            sortable: 'custom',
+            formatter: row => {
+              return row.rel_snapshot.applicant
+            }
          },
          {
            prop: 'type_display',
@@ -70,9 +81,9 @@ export default {
            sortable: 'custom',
            formatter: row => {
              if (row.status === 'open') {
-                return <el-tag type='primary' size='mini'style='align-items:center; display: flex; justify-content:center;'> { this.$t('tickets.OpenStatus') }</el-tag>
+                return <el-tag type='primary' size='mini'> { this.$t('tickets.OpenStatus') }</el-tag>
              } else {
-                return <el-tag type='danger' size='mini'style='align-items:center; display: flex; justify-content:center;'> { this.$t('tickets.CloseStatus') }</el-tag>
+                return <el-tag type='danger' size='mini'>  { this.$t('tickets.CloseStatus') }</el-tag>
              }
            }
          },
@@ -84,15 +95,26 @@ export default {
            sortable: 'custom',
            formatter: row => {
              if (row.status === 'open') {
-                return <el-tag type='success' size='mini'style='align-items:center; display: flex; justify-content:center;'> { this.$t('tickets.Pending') }</el-tag>
+                return <el-tag
+                  type='success'
+                  size='mini'
+                >
+                  { this.$t('tickets.Pending') }
+                </el-tag>
              }
              switch (row.state) {
                case 'approved':
-                  return <el-tag type='primary' size='mini' style='align-items:center; display: flex; justify-content:center;'> { this.$t('tickets.Approved') }</el-tag>
+                  return <el-tag type='primary' size='mini'>
+                    { this.$t('tickets.Approved') }
+                  </el-tag>
                case 'rejected':
-                  return <el-tag type='danger' size='mini' style='align-items:center; display: flex; justify-content:center;'> { this.$t('tickets.Rejected') }</el-tag>
+                  return <el-tag type='danger' size='mini'>
+                    { this.$t('tickets.Rejected') }
+                  </el-tag>
                default :
-                  return <el-tag type='info' size='mini' style='align-items:center; display: flex; justify-content:center;'> { this.$t('tickets.Closed') }</el-tag>
+                  return <el-tag type='info' size='mini'>
+                    { this.$t('tickets.Closed') }
+                  </el-tag>
              }
            }
          },
@@ -115,7 +137,7 @@ export default {
            state: {
              key: 'state',
              label: this.$t('tickets.action'),
-              value: 'open',
+              value: 'pending',
              valueLabel: this.$t('tickets.Pending')
            }
          },
@@ -128,7 +150,7 @@ export default {
              children: [
                {
                  default: true,
-                  value: 'open',
+                  value: 'pending',
                  label: this.$t('tickets.Pending')
                },
                {
@@ -138,10 +160,6 @@ export default {
                {
                  value: REJECT,
                  label: this.$t('tickets.Rejected')
-                },
-                {
-                  value: CLOSED,
-                  label: this.$t('tickets.Closed')
                }
              ]
            }
@@ -154,18 +172,27 @@ export default {
            {
              name: 'RequestAssetPerm',
              title: this.$t('tickets.RequestAssetPerm'),
-              callback: () => this.$router.push({ name: 'RequestAssetPermTicketCreateUpdate' })
+              callback: () => this.$router.push({
+                name: 'RequestAssetPermTicketCreateUpdate'
+              })
            },
            {
              name: 'RequestApplicationPerm',
              title: this.$t('tickets.RequestApplicationPerm'),
-              callback: () => this.$router.push({ name: 'RequestApplicationPermTicketCreateUpdate' })
+              callback: () => this.$router.push({
+                name: 'RequestApplicationPermTicketCreateUpdate'
+              })
            }
          ]
        }
      }
    }
  },
+  mounted() {
+    setTimeout(() => {
+      this.loading = false
+    }, 500)
+  },
  methods: {
  }
 }
--- a/src/views/tickets/CommandConfirm/Detail/TicketDetail.vue
+++ b/src/views/tickets/CommandConfirm/Detail/TicketDetail.vue
@@ -20,7 +20,7 @@ export default {
  },
  data() {
    return {
-      statusMap: this.object.status === 'open' ? STATUS_MAP['notified'] : STATUS_MAP[this.object.state],
+      statusMap: this.object.status === 'open' ? STATUS_MAP['pending'] : STATUS_MAP[this.object.state],
      imageUrl: require('@/assets/img/admin.png'),
      form: {
        comments: ''
@@ -30,74 +30,75 @@ export default {
  },
  computed: {
    detailCardItems() {
+      const { object } = this
      return [
        {
          key: this.$t('tickets.Applicant'),
-          value: this.object.applicant_display
+          value: object.rel_snapshot.applicant
        },
        {
          key: this.$t('tickets.type'),
-          value: this.object.type_display
+          value: object.type_display
        },
        {
          key: this.$t('tickets.status'),
-          value: this.object.status,
+          value: object.status,
          formatter: (item, val) => {
            return <el-tag type={this.statusMap.type} size='mini'> { this.statusMap.title }</el-tag>
          }
        },
        {
          key: this.$t('common.dateCreated'),
-          value: toSafeLocalDateStr(this.object.date_created)
+          value: toSafeLocalDateStr(object.date_created)
        }
      ]
    },
    specialCardItems() {
-      const vm = this
+      const { object } = this
      return [
        {
          key: this.$t('tickets.ApplyRunUser'),
-          value: this.object.meta.apply_run_user
+          value: object.rel_snapshot.apply_run_user
        },
        {
          key: this.$t('tickets.ApplyRunAsset'),
-          value: this.object.meta.apply_run_asset
+          value: object.rel_snapshot.apply_run_asset
        },
        {
          key: this.$t('tickets.ApplyRunSystemUser'),
-          value: this.object.meta.apply_run_system_user
+          value: object.rel_snapshot.apply_run_system_user
        },
        {
          key: this.$t('tickets.ApplyRunCommand'),
-          value: this.object.meta.apply_run_command
+          value: object.apply_run_command
        },
        {
          key: this.$t('tickets.ApplyFromSession'),
-          value: this.object.meta.apply_from_session_id,
+          value: object.apply_from_session,
          formatter: function(item, value) {
-            const to = { name: 'SessionDetail', params: { id: value }, query: { oid: vm.object.org_id }}
-            if (!vm.$hasPerm('terminal.view_session')) {
-              return <span>{vm.$t('sessions.session')}</span>
+            const to = { name: 'SessionDetail', params: { id: value }, query: { oid: object.org_id }}
+            if (!this.$hasPerm('terminal.view_session')) {
+              return <span>{this.$t('sessions.session')}</span>
            }
-            return <router-link to={to}>{vm.$t('sessions.session')}</router-link>
+            return <router-link to={to}>{this.$t('sessions.session')}</router-link>
          }
        },
        {
          key: this.$t('tickets.ApplyFromCMDFilterRule'),
          value: {
-            cmdFilterRuleId: this.object.meta.apply_from_cmd_filter_rule_id,
-            cmdFilterId: this.object.meta.apply_from_cmd_filter_id
+            cmdFilterRuleId: object.apply_from_cmd_filter_rule,
+            cmdFilterId: object.apply_from_cmd_filter
          },
          formatter: function(item, value) {
            const to = {
              name: 'CommandFilterRulesUpdate',
              params: { id: value.cmdFilterRuleId },
-              query: { filter: value.cmdFilterId, oid: vm.object.org_id }
+              query: { filter: value.cmdFilterId, oid: object.org_id }
            }
-            if (!vm.$hasPerm('assets.change_commandfilterrule')) {
-              return <span>{vm.$t('assets.CommandFilterRules')}</span>
+            if (!this.$hasPerm('assets.change_commandfilterrule')) {
+              return <span>{this.$t('assets.CommandFilterRules')}</span>
            }
-            return <router-link to={to}>{vm.$t('assets.CommandFilterRules')}</router-link>
+            return <router-link to={to}>{this.$t('assets.CommandFilterRules')}</router-link>
          }
        }
      ]
--- a/src/views/tickets/CommandConfirm/Detail/index.vue
+++ b/src/views/tickets/CommandConfirm/Detail/index.vue
@@ -27,7 +27,7 @@ export default {
          }
        ],
        actions: {
-          detailApiUrl: `/api/v1/tickets/tickets/${this.$route.params.id}/`
+          detailApiUrl: `/api/v1/tickets/apply-command-tickets/${this.$route.params.id}/`
        },
        getObjectName: this.getObjectName,
        hasRightSide: false
--- a/src/views/tickets/LoginAssetConfirm/Detail/TicketDetail.vue
+++ b/src/views/tickets/LoginAssetConfirm/Detail/TicketDetail.vue
@@ -20,7 +20,7 @@ export default {
  },
  data() {
    return {
-      statusMap: this.object.status === 'open' ? STATUS_MAP['notified'] : STATUS_MAP[this.object.state],
+      statusMap: this.object.status === 'open' ? STATUS_MAP['pending'] : STATUS_MAP[this.object.state],
      imageUrl: require('@/assets/img/admin.png'),
      form: {
        comments: ''
@@ -30,44 +30,43 @@ export default {
  },
  computed: {
    detailCardItems() {
+      const { object } = this
      return [
        {
          key: this.$t('tickets.Applicant'),
-          value: this.object['applicant_display']
+          value: object.rel_snapshot.applicant
        },
        {
          key: this.$t('tickets.type'),
-          value: this.object.type_display
+          value: object.type_display
        },
        {
          key: this.$t('tickets.status'),
-          value: this.object.status,
+          value: object.status,
          formatter: (item, val) => {
            return <el-tag type={this.statusMap.type} size='mini'> { this.statusMap.title }</el-tag>
          }
        },
        {
          key: this.$t('common.dateCreated'),
-          value: toSafeLocalDateStr(this.object.date_created)
+          value: toSafeLocalDateStr(object.date_created)
        }
      ]
    },
    specialCardItems() {
-      return this.object.type === 'login_confirm' ? [] : [
-        // apply_login_asset: "114.118.2.76(114.118.2.76)"
-        // apply_login_system_user: "root()"
-        // apply_login_user: "Administrator(admin)"
+      const { object } = this
+      return object.type === 'login_confirm' ? [] : [
        {
          key: this.$t('acl.apply_login_asset'),
-          value: this.object.meta['apply_login_asset']
+          value: object.rel_snapshot.apply_login_asset
        },
        {
          key: this.$t('acl.apply_login_system_user'),
-          value: this.object.meta['apply_login_system_user']
+          value: object.rel_snapshot.apply_login_system_user
        },
        {
          key: this.$t('acl.apply_login_user'),
-          value: this.object.meta['apply_login_user']
+          value: object.rel_snapshot.apply_login_user
        }
      ]
    }
--- a/src/views/tickets/LoginAssetConfirm/Detail/index.vue
+++ b/src/views/tickets/LoginAssetConfirm/Detail/index.vue
@@ -27,7 +27,7 @@ export default {
          }
        ],
        actions: {
-          detailApiUrl: `/api/v1/tickets/tickets/${this.$route.params.id}/`
+          detailApiUrl: `/api/v1/tickets/apply-login-asset-tickets/${this.$route.params.id}/`
        },
        getObjectName: this.getObjectName,
        hasRightSide: false
--- a/src/views/tickets/LoginConfirm/Detail/TicketDetail.vue
+++ b/src/views/tickets/LoginConfirm/Detail/TicketDetail.vue
@@ -0,0 +1,86 @@
+<template>
+  <GenericTicketDetail :object="object" :detail-card-items="detailCardItems" :special-card-items="specialCardItems" />
+</template>
+
+<script>
+import { STATUS_MAP } from '../../const'
+import { formatTime, getDateTimeStamp } from '@/utils/index'
+import { toSafeLocalDateStr } from '@/utils/common'
+import GenericTicketDetail from '@/views/tickets/components/GenericTicketDetail'
+export default {
+  name: 'AssetTicketDetail',
+  components: {
+    GenericTicketDetail
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      statusMap: this.object.status === 'open' ? STATUS_MAP['pending'] : STATUS_MAP[this.object.state],
+      imageUrl: require('@/assets/img/admin.png'),
+      form: {
+        comments: ''
+      },
+      comments: ''
+    }
+  },
+  computed: {
+    detailCardItems() {
+      const { object } = this
+      return [
+        {
+          key: this.$t('tickets.Applicant'),
+          value: object.rel_snapshot.applicant
+        },
+        {
+          key: this.$t('tickets.type'),
+          value: object.type_display
+        },
+        {
+          key: this.$t('tickets.status'),
+          value: object.status,
+          formatter: (item, val) => {
+            return <el-tag type={this.statusMap.type} size='mini'> { this.statusMap.title }</el-tag>
+          }
+        },
+        {
+          key: this.$t('common.dateCreated'),
+          value: toSafeLocalDateStr(object.date_created)
+        }
+      ]
+    },
+    specialCardItems() {
+      const { object } = this
+      return object.type === 'login_confirm' ? [] : [
+        {
+          key: this.$t('acl.apply_login_asset'),
+          value: object.rel_snapshot.apply_login_asset
+        },
+        {
+          key: this.$t('acl.apply_login_system_user'),
+          value: object.rel_snapshot.apply_login_system_user
+        },
+        {
+          key: this.$t('acl.apply_login_user'),
+          value: object.rel_snapshot.apply_login_user
+        }
+      ]
+    }
+  },
+  methods: {
+    formatTime(dateStr) {
+      return formatTime(getDateTimeStamp(dateStr))
+    },
+    toSafeLocalDateStr(dataStr) {
+      return toSafeLocalDateStr(dataStr)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/views/tickets/LoginConfirm/Detail/index.vue
+++ b/src/views/tickets/LoginConfirm/Detail/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <GenericDetailPage :object.sync="ticket" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+    <component :is="config.activeMenu" :object="ticket" />
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage, TabPage } from '@/layout/components'
+import TicketDetail from './TicketDetail'
+
+export default {
+  components: {
+    GenericDetailPage,
+    TicketDetail,
+    TabPage
+  },
+  data() {
+    return {
+      ticket: { title: '', user_display: '', type_display: '', status: '', assignees_display: '', date_created: '' },
+      config: {
+        activeMenu: 'TicketDetail',
+        url: '',
+        submenu: [
+          {
+            title: this.$t('route.TicketDetail'),
+            name: 'TicketDetail'
+          }
+        ],
+        actions: {
+          detailApiUrl: `/api/v1/tickets/apply-login-tickets/${this.$route.params.id}/`
+        },
+        getObjectName: this.getObjectName,
+        hasRightSide: false
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    getObjectName() {
+      return this.ticket.title
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/tickets/MyTicketList.vue
+++ b/src/views/tickets/MyTicketList.vue
@@ -1,18 +1,17 @@
 <template>
-  <TicketListTable :url="url" :has-more-actions="true" />
+  <BaseTicketList :url="url" :has-more-actions="true" />
 </template>

 <script>
-import TicketListTable from './TicketListTable'
+import BaseTicketList from './BaseTicketList'
 import { mapGetters } from 'vuex'
 export default {
  name: 'MyTicketList',
  components: {
-    TicketListTable
+    BaseTicketList
  },
  data() {
    return {
-
    }
  },
  computed: {
--- a/src/views/tickets/RequestApplicationPerm/CreateUpdate.vue
+++ b/src/views/tickets/RequestApplicationPerm/CreateUpdate.vue
@@ -33,18 +33,18 @@ export default {
      loading: true,
      initial: {
        ips_or_not: true,
-        meta: {
-          apply_date_expired: date_expired,
-          apply_date_start: date_start,
-          apply_actions: ['all', 'connect', 'updownload', 'upload_file', 'download_file']
-        },
+        apply_date_expired: date_expired,
+        apply_date_start: date_start,
        org_id: '',
        type: 'apply_application'

      },
      fields: [
        [this.$t('common.Basic'), ['title', 'type', 'org_id', 'comment']],
-        [this.$t('tickets.RequestPerm'), ['meta']]
+        [this.$t('tickets.RequestPerm'), [
+          'apply_category_type', 'apply_applications', 'apply_system_users',
+          'apply_date_start', 'apply_date_expired'
+        ]]
      ],
      fieldsMeta: {
        type: {
@@ -53,79 +53,78 @@ export default {
            disabled: true
          }
        },
-        meta: {
-          fields: [
-            'apply_category_type', 'apply_applications', 'apply_system_users',
-            'apply_date_start', 'apply_date_expired'],
-          fieldsMeta: {
-            apply_date_start: {
-              label: this.$t('common.DateStart'),
-              type: 'date-picker',
-              el: {
-                type: 'datetime'
-              }
-            },
-            apply_applications: {
-              type: 'assetSelect',
-              component: Select2,
-              label: this.$t('applications.App'),
-              el: {
-                value: [],
-                ajax: {
-                  url: '',
-                  transformOption: (item) => {
-                    return { label: item.name, value: item.id }
-                  }
-                }
-              }
-            },
-            apply_system_users: {
-              type: 'systemUserSelect',
-              component: Select2,
-              label: this.$t('assets.SystemUser'),
-              el: {
-                value: [],
-                ajax: {
-                  url: '',
-                  transformOption: (item) => {
-                    if (this.$route.query.type === 'k8s') {
-                      return { label: item.name, value: item.id }
-                    }
-                    const username = item.username || '*'
-                    return { label: item.name + '(' + username + ')', value: item.id }
-                  }
-                }
-              }
-            },
-            apply_date_expired: {
-              label: this.$t('common.DateEnd'),
-              type: 'date-picker',
-              el: {
-                type: 'datetime'
-              }
-            },
-            apply_category_type: {
-              type: 'cascader',
-              label: this.$t('applications.appType'),
-              rules: [Required],
-              el: {
-                multiple: false,
-                options: ApplicationCascader
-              },
-              on: {
-                change: ([event], updateForm) => {
-                  this.apply_category_type = event
-                  updateForm({
-                    apply_applications: [],
-                    apply_system_users: []
-                  })
-                  this.fieldsMeta.meta.fieldsMeta.apply_applications.el.ajax.url = `/api/v1/applications/applications/suggestion/?oid=${vm.org_id}&category=${event[0]}&type=${event[1]}`
-                  this.fieldsMeta.meta.fieldsMeta.apply_system_users.el.ajax.url = event[0] === 'remote_app' ? `/api/v1/assets/system-users/suggestion/?oid=${vm.org_id}&protocol=rdp` : `/api/v1/assets/system-users/suggestion/?oid=${vm.org_id}&protocol=${event[1]}`
-                }
+        apply_applications: {
+          type: 'assetSelect',
+          component: Select2,
+          rules: [
+            { required: true }
+          ],
+          label: this.$t('applications.App'),
+          el: {
+            value: [],
+            ajax: {
+              url: '',
+              transformOption: (item) => {
+                return { label: item.name, value: item.id }
              }
            }
          }
        },
+        apply_system_users: {
+          type: 'systemUserSelect',
+          component: Select2,
+          rules: [
+            { required: true }
+          ],
+          label: this.$t('assets.SystemUser'),
+          el: {
+            value: [],
+            ajax: {
+              url: '',
+              transformOption: (item) => {
+                if (this.$route.query.type === 'k8s') {
+                  return { label: item.name, value: item.id }
+                }
+                const username = item.username || '*'
+                return { label: item.name + '(' + username + ')', value: item.id }
+              }
+            }
+          }
+        },
+        apply_category_type: {
+          type: 'cascader',
+          label: this.$t('applications.appType'),
+          rules: [Required],
+          el: {
+            multiple: false,
+            options: ApplicationCascader
+          },
+          on: {
+            change: ([event], updateForm) => {
+              this.apply_category_type = event
+              updateForm({
+                apply_applications: [],
+                apply_system_users: []
+              })
+              this.fieldsMeta.apply_applications.el.ajax.url = `/api/v1/applications/applications/suggestion/?oid=${vm.org_id}&category=${event[0]}&type=${event[1]}`
+              this.fieldsMeta.apply_system_users.el.ajax.url = event[0] === 'remote_app' ? `/api/v1/assets/system-users/suggestion/?oid=${vm.org_id}&protocol=rdp` : `/api/v1/assets/system-users/suggestion/?oid=${vm.org_id}&protocol=${event[1]}`
+            }
+          }
+        },
+        apply_date_start: {
+          label: this.$t('common.DateStart'),
+          type: 'date-picker',
+          el: {
+            type: 'datetime'
+          }
+        },
+        apply_date_expired: {
+          label: this.$t('common.DateEnd'),
+          type: 'date-picker',
+          el: {
+            type: 'datetime'
+          }
+        },
        org_id: {
          component: Select2,
          el: {
@@ -137,7 +136,7 @@ export default {
          hidden: (form) => {
            this.org_id = form['org_id']
            apply_category_type = this.apply_category_type
-            const fieldsMeta = this.fieldsMeta.meta.fieldsMeta
+            const fieldsMeta = this.fieldsMeta
            if (apply_category_type) {
              fieldsMeta.apply_applications.el.ajax.url = `/api/v1/applications/applications/suggestions/?oid=${vm.org_id}&category=${apply_category_type[0]}&type=${apply_category_type[1]}`
              fieldsMeta.apply_system_users.el.ajax.url = apply_category_type[0] === 'remote_app' ? `/api/v1/assets/system-users/suggestions/?oid=${vm.org_id}&protocol=rdp` : `/api/v1/assets/system-users/suggestions/?oid=${vm.org_id}&protocol=${apply_category_type[1]}`
@@ -145,18 +144,18 @@ export default {
          }
        }
      },
-      url: '/api/v1/tickets/tickets/?type=apply_application&action=open',
+      url: '/api/v1/tickets/apply-app-tickets/?state=pending',
      createSuccessNextRoute: {
-        name: 'TicketList'
+        name: 'MyTicketList'
      },
      cleanFormValue(value) {
-        const applications = value.meta.apply_applications
-        const systemUsers = value.meta.apply_system_users
+        const applications = value.apply_applications
+        const systemUsers = value.apply_system_users
        if (applications && Array.isArray(applications) && applications.length < 1) {
-          delete value.meta.apply_applications
+          delete value.apply_applications
        }
        if (systemUsers && Array.isArray(systemUsers) && systemUsers.length < 1) {
-          delete value.meta.apply_system_users
+          delete value.apply_system_users
        }
        return value
      }
@@ -177,15 +176,14 @@ export default {
  },
  methods: {
    performSubmit(validValues) {
-      const validMeta = validValues.meta
-      const applyCategoryType = validMeta.apply_category_type
+      const applyCategoryType = validValues.apply_category_type
      const filter = (len, field) => {
-        return applyCategoryType && applyCategoryType.length > 0 ? applyCategoryType[len] : validMeta[field]
+        return applyCategoryType && applyCategoryType.length > 0 ? applyCategoryType[len] : validValues[field]
      }
-      validMeta.apply_category = filter(0, 'apply_category')
-      validMeta.apply_type = filter(1, 'apply_type')
-      delete validMeta['apply_category_type']
-      return this.$axios['post'](`/api/v1/tickets/tickets/open/?type=apply_application`, validValues)
+      validValues.apply_category = filter(0, 'apply_category')
+      validValues.apply_type = filter(1, 'apply_type')
+      delete validValues['apply_category_type']
+      return this.$axios['post'](`/api/v1/tickets/apply-app-tickets/open/`, validValues)
    }
  }
 }
--- a/src/views/tickets/RequestApplicationPerm/Detail/TicketDetail.vue
+++ b/src/views/tickets/RequestApplicationPerm/Detail/TicketDetail.vue
@@ -26,13 +26,12 @@ export default {
  },
  data() {
    return {
-      statusMap: this.object.status === 'open' ? STATUS_MAP['notified'] : STATUS_MAP[this.object.state],
+      statusMap: this.object.status === 'open' ? STATUS_MAP['pending'] : STATUS_MAP[this.object.state],
      requestForm: {
-        name: this.object.meta.approve_permission_name,
-        application: this.object.meta['apply_applications'],
-        systemuser: this.object.meta['apply_system_users'],
-        apply_date_expired: this.object.meta.apply_date_expired,
-        apply_date_start: this.object.meta.apply_date_start
+        application: this.object.apply_applications,
+        systemuser: this.object.apply_system_users,
+        apply_date_expired: this.object.apply_date_expired,
+        apply_date_start: this.object.apply_date_start
      },
      comments: '',
      assets: []
@@ -40,76 +39,78 @@ export default {
  },
  computed: {
    detailCardItems() {
-      const obj = this.object || {}
+      const { object } = this
      return [
        {
          key: this.$t('common.Number'),
-          value: obj.serial_num
+          value: object.serial_num
        },
        {
          key: this.$t('tickets.status'),
-          value: obj.status,
+          value: object.status,
          formatter: (item, val) => {
            return <el-tag type={this.statusMap.type} size='mini'> { this.statusMap.title }</el-tag>
          }
        },
        {
          key: this.$t('tickets.type'),
-          value: obj.type_display
+          value: object.type_display
        },
        {
          key: this.$t('tickets.user'),
-          value: obj['applicant_display']
+          value: object.rel_snapshot.applicant
        },
        {
          key: this.$t('tickets.OrgName'),
-          value: obj['org_name']
+          value: object.org_name
        },
        {
          key: this.$t('common.dateCreated'),
-          value: toSafeLocalDateStr(obj.date_created)
+          value: toSafeLocalDateStr(object.date_created)
        },
        {
          key: this.$t('common.Comment'),
-          value: obj.comment
+          value: object.comment
        }
      ]
    },
    specialCardItems() {
-      const meta = this.object.meta || {}
+      const { object } = this
+      const rel_snapshot = object.rel_snapshot
      return [
        {
          key: this.$t('applications.appType'),
-          value: `${meta['apply_category_display']} / ${meta['apply_type_display']} `
+          value: `${object.apply_category} / ${object.apply_type} `
        },
        {
          key: this.$t('applications.appName'),
-          value: meta?.apply_applications_display?.join(', ') || ''
+          value: rel_snapshot.apply_applications.join(', ')
        },
        {
          key: this.$t('tickets.SystemUser'),
-          value: meta?.apply_system_users_display?.join(', ') || ''
+          value: rel_snapshot.apply_system_users.join(', ')
        },
        {
          key: this.$t('common.dateStart'),
-          value: toSafeLocalDateStr(meta.apply_date_start)
+          value: toSafeLocalDateStr(object.apply_date_start)
        },
        {
          key: this.$t('common.dateExpired'),
-          value: toSafeLocalDateStr(meta.apply_date_expired)
+          value: toSafeLocalDateStr(object.apply_date_expired)
        }
      ]
    },
    assignedCardItems() {
      const vm = this
-      const meta = this.object.meta || {}
+      const { object } = this
+      const rel_snapshot = object.rel_snapshot
      return [
        {
          key: this.$t('tickets.PermissionName'),
-          value: meta.apply_permission_name,
+          value: vm.object.apply_permission_name,
          formatter: function(item, value) {
-            const to = { name: 'ApplicationPermissionDetail', params: { id: vm.object.id }, query: { oid: vm.object.org_id }}
-            if (vm.$hasPerm('perms.view_applicationpermission') && vm.object.status === 'closed' && vm.object.state === 'approved') {
+            const to = { name: 'ApplicationPermissionDetail', params: { id: object.id }, query: { oid: object.org_id }}
+            if (vm.$hasPerm('perms.view_applicationpermission') && object.status === 'closed' && object.state === 'approved') {
              return <router-link to={to}>{ value }</router-link>
            } else {
              return <span>{ value }</span>
@@ -118,19 +119,19 @@ export default {
        },
        {
          key: this.$t('applications.appName'),
-          value: meta?.apply_applications_display?.join(', ') || ''
+          value: rel_snapshot.apply_applications.join(', ')
        },
        {
          key: this.$t('tickets.SystemUser'),
-          value: meta?.apply_system_users_display?.join(', ') || ''
+          value: rel_snapshot.apply_system_users.join(', ')
        },
        {
          key: this.$t('common.dateStart'),
-          value: toSafeLocalDateStr(meta.apply_date_start)
+          value: toSafeLocalDateStr(object.apply_date_start)
        },
        {
          key: this.$t('common.dateExpired'),
-          value: toSafeLocalDateStr(meta.apply_date_expired)
+          value: toSafeLocalDateStr(object.apply_date_expired)
        }
      ]
    },
@@ -152,7 +153,7 @@ export default {
      if (this.requestForm.application.length === 0 || this.requestForm.systemuser.length === 0) {
        return this.$message.error(this.$tc('common.NeedAssetsAndSystemUserErrMsg'))
      } else {
-        this.$axios.put(`/api/v1/tickets/tickets/${this.object.id}/approve/`, {
+        this.$axios.put(`/api/v1/tickets/apply-app-tickets/${this.object.id}/approve/`, {
          meta: {}
        }).then(
          () => {
@@ -165,11 +166,11 @@ export default {
      }
    },
    handleClose() {
-      const url = `/api/v1/tickets/tickets/${this.object.id}/close/`
+      const url = `/api/v1/tickets/apply-app-tickets/${this.object.id}/close/`
      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
    },
    handleReject() {
-      const url = `/api/v1/tickets/tickets/${this.object.id}/reject/`
+      const url = `/api/v1/tickets/apply-app-tickets/${this.object.id}/reject/`
      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
    }
  }
--- a/src/views/tickets/RequestApplicationPerm/Detail/index.vue
+++ b/src/views/tickets/RequestApplicationPerm/Detail/index.vue
@@ -27,7 +27,7 @@ export default {
          }
        ],
        actions: {
-          detailApiUrl: `/api/v1/tickets/tickets/${this.$route.params.id}/`
+          detailApiUrl: `/api/v1/tickets/apply-app-tickets/${this.$route.params.id}/`
        },
        getObjectName: this.getObjectName,
        hasRightSide: false
--- a/src/views/tickets/RequestAssetPerm/CreateUpdate.vue
+++ b/src/views/tickets/RequestAssetPerm/CreateUpdate.vue
@@ -22,18 +22,19 @@ export default {
      loading: true,
      initial: {
        ips_or_not: true,
-        meta: {
-          apply_date_expired: date_expired,
-          apply_date_start: date_start,
-          apply_actions: ['all', 'connect', 'updownload', 'upload_file', 'download_file'],
-          apply_assets: []
-        },
+        apply_date_expired: date_expired,
+        apply_date_start: date_start,
+        apply_actions: ['all', 'connect', 'updownload', 'upload_file', 'download_file'],
+        apply_assets: [],
        org_id: '',
        type: 'apply_asset'
      },
      fields: [
        [this.$t('common.Basic'), ['title', 'type', 'org_id', 'comment']],
-        [this.$t('tickets.RequestPerm'), ['meta']]
+        [this.$t('tickets.RequestPerm'), [
+          'apply_nodes', 'apply_assets', 'apply_system_users',
+          'apply_actions', 'apply_date_start', 'apply_date_expired'
+        ]]
      ],
      fieldsMeta: {
        type: {
@@ -42,57 +43,52 @@ export default {
            disabled: true
          }
        },
-        meta: {
-          fields: [
-            'apply_nodes', 'apply_assets', 'apply_system_users', 'apply_actions',
-            'apply_date_start', 'apply_date_expired'
+        apply_actions: {
+          label: this.$t('perms.Actions'),
+          component: PermissionFormActionField,
+          helpText: this.$t('common.actionsTips')
+        },
+        apply_nodes: {
+          component: Select2,
+          el: {
+            value: [],
+            ajax: {
+              url: '',
+              transformOption: (item) => {
+                return { label: `${item.full_value}`, value: item.id }
+              }
+            },
+            clearable: true
+          }
+        },
+        apply_assets: {
+          type: 'assetSelect',
+          label: this.$t('perms.Asset'),
+          component: Select2,
+          el: {
+            value: [],
+            ajax: {
+              url: '',
+              transformOption: (item) => {
+                return { label: item.hostname + '(' + item.protocols + ')', value: item.id }
+              }
+            }
+          }
+        },
+        apply_system_users: {
+          type: 'systemUserSelect',
+          component: Select2,
+          rules: [
+            { required: true }
          ],
-          fieldsMeta: {
-            apply_actions: {
-              label: this.$t('perms.Actions'),
-              component: PermissionFormActionField,
-              helpText: this.$t('common.actionsTips')
-            },
-            apply_nodes: {
-              component: Select2,
-              el: {
-                value: [],
-                ajax: {
-                  url: '',
-                  transformOption: (item) => {
-                    return { label: `${item.full_value}`, value: item.id }
-                  }
-                },
-                clearable: true
-              }
-            },
-            apply_assets: {
-              type: 'assetSelect',
-              label: this.$t('perms.Asset'),
-              component: Select2,
-              el: {
-                value: [],
-                ajax: {
-                  url: '',
-                  transformOption: (item) => {
-                    return { label: item.hostname + '(' + item.protocols + ')', value: item.id }
-                  }
-                }
-              }
-            },
-            apply_system_users: {
-              type: 'systemUserSelect',
-              component: Select2,
-              label: this.$t('assets.SystemUser'),
-              el: {
-                value: [],
-                ajax: {
-                  url: '',
-                  transformOption: (item) => {
-                    const username = item.username || '*'
-                    return { label: item.name + '(' + username + ')', value: item.id }
-                  }
-                }
+          label: this.$t('assets.SystemUser'),
+          el: {
+            value: [],
+            ajax: {
+              url: '',
+              transformOption: (item) => {
+                const username = item.username || '*'
+                return { label: item.name + '(' + username + ')', value: item.id }
              }
            }
          }
@@ -106,7 +102,7 @@ export default {
            })
          },
          hidden: (form) => {
-            const fieldsMeta = this.fieldsMeta.meta.fieldsMeta
+            const fieldsMeta = this.fieldsMeta
            fieldsMeta.apply_system_users.el.ajax.url = `/api/v1/assets/system-users/suggestions/?oid=${form['org_id']}&protocol__in=rdp,ssh,vnc,telnet`
            fieldsMeta.apply_assets.el.ajax.url = `/api/v1/assets/assets/suggestions/?oid=${form['org_id']}`
            fieldsMeta.apply_nodes.el.ajax.url = `/api/v1/assets/nodes/suggestions/?oid=${form['org_id']}`
@@ -114,18 +110,18 @@ export default {
        }
      },
      cleanFormValue(value) {
-        Object.keys(value.meta).forEach((item, index, arr) => {
-          if (['apply_system_users'].includes(item)) {
-            if (value.meta[item].length < 1) {
-              delete value.meta[item]
+        Object.keys(value).forEach((item, index, arr) => {
+          if (['apply_system_users', 'apply_assets', 'apply_nodes'].includes(item)) {
+            if (value[item].length < 1) {
+              delete value[item]
            }
          }
        })
        return value
      },
-      url: '/api/v1/tickets/tickets/?type=apply_asset&action=open',
+      url: '/api/v1/tickets/apply-asset-tickets/?state=pending',
      createSuccessNextRoute: {
-        name: 'TicketList'
+        name: 'MyTicketList'
      }
    }
  },
@@ -144,7 +140,7 @@ export default {
  },
  methods: {
    performSubmit(validValues) {
-      return this.$axios['post'](`/api/v1/tickets/tickets/open/?type=apply_asset`, validValues)
+      return this.$axios['post'](`/api/v1/tickets/apply-asset-tickets/open/`, validValues)
    }
  }
 }
--- a/src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue
+++ b/src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue
@@ -26,11 +26,13 @@ export default {
  },
  data() {
    return {
-      statusMap: this.object.status === 'open' ? STATUS_MAP['notified'] : STATUS_MAP[this.object.state],
+      statusMap: this.object.status === 'open' ? STATUS_MAP['pending'] : STATUS_MAP[this.object.state],
      requestForm: {
-        node: this.object.meta.apply_nodes,
-        asset: this.object.meta.apply_assets,
-        systemuser: this.object.meta.apply_system_users
+        nodes: this.object.apply_nodes,
+        assets: this.object.apply_assets,
+        systemusers: this.object.apply_system_users,
+        apply_date_expired: this.object.apply_date_expired,
+        apply_date_start: this.object.apply_date_start
      },
      comments: '',
      assets: []
@@ -38,80 +40,82 @@ export default {
  },
  computed: {
    detailCardItems() {
-      const obj = this.object || {}
+      const { object } = this
      return [
        {
          key: this.$t('common.Number'),
-          value: obj.serial_num
+          value: object.serial_num
        },
        {
          key: this.$t('tickets.status'),
-          value: obj.state,
+          value: object.state,
          formatter: (item, val) => {
            return <el-tag type={this.statusMap.type} size='mini'> { this.statusMap.title }</el-tag>
          }
        },
        {
          key: this.$t('tickets.type'),
-          value: obj.type_display
+          value: object.type_display
        },
        {
          key: this.$t('tickets.user'),
-          value: obj['applicant_display']
+          value: object.rel_snapshot.applicant
        },
        {
          key: this.$t('tickets.OrgName'),
-          value: obj.org_name
+          value: object.org_name
        },
        {
          key: this.$t('common.dateCreated'),
-          value: toSafeLocalDateStr(obj.date_created)
+          value: toSafeLocalDateStr(object.date_created)
        },
        {
          key: this.$t('common.Comment'),
-          value: obj.comment
+          value: object.comment
        }
      ]
    },
    specialCardItems() {
-      const meta = this.object.meta || {}
+      const { object } = this
+      const rel_snapshot = object.rel_snapshot
      return [
        {
          key: this.$t('perms.Node'),
-          value: meta?.apply_nodes_display?.join(', ') || ''
+          value: rel_snapshot.apply_nodes.join(', ')
        },
        {
          key: this.$t('tickets.Asset'),
-          value: meta?.apply_assets_display?.join(', ') || ''
+          value: rel_snapshot.apply_assets.join(', ')
        },
        {
          key: this.$t('tickets.SystemUser'),
-          value: meta?.apply_system_users_display?.join(', ') || ''
+          value: rel_snapshot.apply_system_users.join(', ')
        },
        {
          key: this.$t('assets.Action'),
-          value: forMatAction(this, meta['apply_actions_display'])
+          value: forMatAction(this, object.apply_actions_display)
        },
        {
          key: this.$t('common.dateStart'),
-          value: toSafeLocalDateStr(meta.apply_date_start)
+          value: toSafeLocalDateStr(object.apply_date_start)
        },
        {
          key: this.$t('common.dateExpired'),
-          value: toSafeLocalDateStr(meta.apply_date_expired)
+          value: toSafeLocalDateStr(object.apply_date_expired)
        }
      ]
    },
    assignedCardItems() {
      const vm = this
-      const meta = this.object.meta || {}
+      const { object } = this
+      const rel_snapshot = object.rel_snapshot
      return [
        {
          key: this.$t('tickets.PermissionName'),
-          value: this.object.meta.apply_permission_name,
+          value: object.apply_permission_name,
          formatter: function(item, value) {
-            const to = { name: 'AssetPermissionDetail', params: { id: vm.object.id }, query: { oid: vm.object.org_id }}
-            if (vm.$hasPerm('perms.view_assetpermission') && vm.object.status === 'closed' && vm.object.state === 'approved') {
+            const to = { name: 'AssetPermissionDetail', params: { id: object.id }, query: { oid: object.org_id }}
+            if (vm.$hasPerm('perms.view_assetpermission') && object.status === 'closed' && object.state === 'approved') {
              return <router-link to={to}>{ value }</router-link>
            } else {
              return <span>{ value }</span>
@@ -120,32 +124,29 @@ export default {
        },
        {
          key: this.$t('perms.Node'),
-          value: meta?.apply_nodes_display?.join(', ') || ''
+          value: rel_snapshot.apply_nodes.join(', ')
        },
        {
          key: this.$t('assets.Asset'),
-          value: meta?.apply_assets_display?.join(', ') || ''
+          value: rel_snapshot.apply_assets.join(', ')
        },
        {
          key: this.$t('tickets.SystemUser'),
-          value: meta?.apply_system_users_display?.join(', ') || ''
+          value: rel_snapshot.apply_system_users.join(', ')
        },
        {
          key: this.$t('assets.Action'),
-          value: forMatAction(this, meta['apply_actions_display'])
+          value: forMatAction(this, object.apply_actions_display)
        },
        {
          key: this.$t('common.dateStart'),
-          value: toSafeLocalDateStr(meta?.apply_date_start)
+          value: toSafeLocalDateStr(object.apply_date_start)
        },
        {
          key: this.$t('common.dateExpired'),
-          value: toSafeLocalDateStr(meta?.apply_date_expired)
+          value: toSafeLocalDateStr(object.apply_date_expired)
        }
      ]
-    },
-    hasActionPerm() {
-      return this.object.assignees.indexOf(this.$store.state.users.profile.id) !== -1
    }
  },
  methods: {
@@ -159,14 +160,14 @@ export default {
      window.location.reload()
    },
    handleApprove() {
-      const assetLength = this.requestForm.asset.length
-      const nodeLength = this.requestForm.node.length
+      const assetLength = this.requestForm.assets.length
+      const nodeLength = this.requestForm.nodes.length
      if (assetLength === 0 && nodeLength === 0) {
        return this.$message.error(this.$tc('common.SelectAtLeastOneAssetOrNodeErrMsg'))
-      } else if (this.requestForm.systemuser.length === 0) {
+      } else if (this.requestForm.systemusers.length === 0) {
        return this.$message.error(this.$tc('common.RequiredSystemUserErrMsg'))
      } else {
-        this.$axios.put(`/api/v1/tickets/tickets/${this.object.id}/approve/`, {
+        this.$axios.put(`/api/v1/tickets/apply-asset-tickets/${this.object.id}/approve/`, {
          meta: {}
        }).then(() => {
          this.$message.success(this.$tc('common.updateSuccessMsg'))
@@ -177,11 +178,11 @@ export default {
      }
    },
    handleClose() {
-      const url = `/api/v1/tickets/tickets/${this.object.id}/close/`
+      const url = `/api/v1/tickets/apply-asset-tickets/${this.object.id}/close/`
      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
    },
    handleReject() {
-      const url = `/api/v1/tickets/tickets/${this.object.id}/reject/`
+      const url = `/api/v1/tickets/apply-asset-tickets/${this.object.id}/reject/`
      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
    }
  }
--- a/src/views/tickets/RequestAssetPerm/Detail/index.vue
+++ b/src/views/tickets/RequestAssetPerm/Detail/index.vue
@@ -27,7 +27,7 @@ export default {
          }
        ],
        actions: {
-          detailApiUrl: `/api/v1/tickets/tickets/${this.$route.params.id}/`
+          detailApiUrl: `/api/v1/tickets/apply-asset-tickets/${this.$route.params.id}/`
        },
        getObjectName: this.getObjectName,
        hasRightSide: false
--- a/src/views/tickets/TicketDetail/TicketDetail.vue
+++ b/src/views/tickets/TicketDetail/TicketDetail.vue
@@ -30,33 +30,34 @@ export default {
  },
  computed: {
    detailCardItems() {
+      const { object } = this
      return [
        {
          key: this.$t('tickets.Applicant'),
-          value: this.object.applicant_display
+          value: object.rel_snapshot.applicant
        },
        {
          key: this.$t('tickets.type'),
-          value: this.object.type_display
+          value: object.type_display
        },
        {
          key: this.$t('tickets.status'),
-          value: this.object.status,
+          value: object.status,
          formatter: (item, val) => {
            return <el-tag type={this.statusMap.type} size='mini'> { this.statusMap.title }</el-tag>
          }
        },
        {
          key: this.$t('tickets.Assignees'),
-          value: this.object.process_map[this.object.approval_step - 1].assignees_display.join(',')
+          value: object.process_map[object.approval_step - 1].assignees_display.join(',')
        },
        {
          key: this.$t('tickets.Assignee'),
-          value: this.object.process_map[this.object.approval_step - 1].processor_display
+          value: object.process_map[object.approval_step - 1].processor_display
        },
        {
          key: this.$t('common.dateCreated'),
-          value: toSafeLocalDateStr(this.object.date_created)
+          value: toSafeLocalDateStr(object.date_created)
        }
      ]
    }
--- a/src/views/tickets/components/Comments.vue
+++ b/src/views/tickets/components/Comments.vue
@@ -94,6 +94,7 @@ export default {
  data() {
    return {
      comments: '',
+      type_api: '',
      imageUrl: require('@/assets/img/admin.png'),
      form: {
        comments: ''
@@ -110,6 +111,25 @@ export default {
    }
  },
  mounted() {
+    switch (this.object.type) {
+      case 'login_confirm':
+        this.type_api = 'apply-login-tickets'
+        break
+      case 'apply_asset':
+        this.type_api = 'apply-asset-tickets'
+        break
+      case 'apply_application':
+        this.type_api = 'apply-app-tickets'
+        break
+      case 'login_asset_confirm':
+        this.type_api = 'apply-login-asset-tickets'
+        break
+      case 'command_confirm':
+        this.type_api = 'apply-command-tickets'
+        break
+      default:
+        this.type_api = 'tickets'
+    }
    this.getComment()
  },
  methods: {
@@ -134,16 +154,16 @@ export default {
    defaultApprove() {
      this.createComment(function() {
      })
-      const url = `/api/v1/tickets/tickets/${this.object.id}/approve/`
+      const url = `/api/v1/tickets/${this.type_api}/${this.object.id}/approve/`
      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
    },
    defaultReject() {
      this.createComment(function() {})
-      const url = `/api/v1/tickets/tickets/${this.object.id}/reject/`
+      const url = `/api/v1/tickets/${this.type_api}/${this.object.id}/reject/`
      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
    },
    defaultClose() {
-      const url = `/api/v1/tickets/tickets/${this.object.id}/close/`
+      const url = `/api/v1/tickets/${this.type_api}/${this.object.id}/close/`
      this.$axios.put(url).then(res => this.reloadPage()).catch(err => this.$message.error(err))
    },
    createComment(successCallback) {
--- a/src/views/tickets/components/Steps.vue
+++ b/src/views/tickets/components/Steps.vue
@@ -4,10 +4,10 @@
      <el-steps direction="vertical" :active="ticketSteps">
        <el-step
          :title="`${this.$t('tickets.OpenTicket')}：${object.type_display}`"
-          :description="`${this.$t('tickets.Applicant')}：${object.user_display}`"
+          :description="`${this.$t('tickets.Applicant')}：${object.rel_snapshot.applicant}`"
        >
          <div slot="description">
-            <div>{{ `${this.$t('tickets.Applicant')}：${object.applicant_display}` }}</div>
+            <div>{{ `${this.$t('tickets.Applicant')}：${object.rel_snapshot.applicant}` }}</div>
            <div>{{ `${this.$t('common.dateCreated')}:  ${toSafeLocalDateStr(object.date_created)}` }}</div>
          </div>
        </el-step>
@@ -21,10 +21,10 @@
          </div>
          <div slot="description"><el-button type="text" style="color: blue" @click="lookOver(item.assignees_display)">点击查看 受理人</el-button></div>
          <div v-if="item.state==='closed'" slot="description">
-            <div>{{ `${thisCopy.$t('tickets.Assignee')}：${object.applicant_display}` }}</div>
+            <div>{{ `${thisCopy.$t('tickets.Assignee')}：${object.rel_snapshot.applicant}` }}</div>
            <div>{{ `${thisCopy.$t('common.dateFinished')}:  ${toSafeLocalDateStr(item.approval_date)}` }}</div>
          </div>
-          <div v-if="item.state!=='notified' && item.state!=='closed'" slot="description">
+          <div v-if="item.state!=='pending' && item.state!=='closed'" slot="description">
            <div>{{ `${thisCopy.$t('tickets.Assignee')}：${item.processor_display}` }}</div>
            <div>{{ `${thisCopy.$t('common.dateFinished')}:  ${toSafeLocalDateStr(item.approval_date)}` }}</div>
          </div>
@@ -68,6 +68,8 @@ export default {
    ticketSteps() {
      // eslint-disable-next-line no-unused-vars
      var countApprove = 0
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.process.sort((a, b) => a.approval_level - b.approval_level)
      this.process.forEach(item => {
        // eslint-disable-next-line space-before-blocks
        if (item.state === 'approved'){
--- a/src/views/tickets/const.js
+++ b/src/views/tickets/const.js
@@ -1,6 +1,6 @@
 import i18n from '@/i18n/i18n'

-export const OPEN = 'notified'
+export const OPEN = 'pending'
 export const APPROVE = 'approved'
 export const REJECT = 'rejected'
 export const CLOSED = 'closed'