github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2025-07-16 16:21:21 +00:00
Code Issues Projects Releases Wiki Activity

[Update] 修改工单详情组件

Browse Source
This commit is contained in:
jym503558564 2020-05-13 14:51:09 +08:00
parent 6699082f9a
commit 6d476230e2
7 changed files with 91 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DetailCard/ItemValue.vue
View File

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

1
src/i18n/langs/cn/route.json
View File

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

4
src/i18n/langs/cn/tickets.json
View File

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

5
src/utils/index.js
View File

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

109
src/views/tickets/TicketDetail/TicketDetail.vue
View File

@ -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-item label="审批备注">
<el-form ref="comments" :model="form" label-width="45px" style="padding-top: 20px">
<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>
<el-button type="warning" size="small" :disabled="object.status === 'closed'" @click="handleReject"><i class="fa fa-ban" />拒绝</el-button>
<template v-if="hasActionPerm">
<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;
}

10
src/views/tickets/TicketDetail/index.vue
View File

@ -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>

2
src/views/tickets/index.js
View File

@ -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
}
]