vue2-client 1.4.37 → 1.4.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<!-- 图片 -->
|
|
4
|
-
<span v-for="img in images" :key="img.id" class="picture-card">
|
|
4
|
+
<span v-for="img in images" :key="img.id" class="picture-card" :style="{ width: cardSize, height: cardSize }">
|
|
5
5
|
<img :src="img.url" :alt="img.name" />
|
|
6
|
-
<span class="picture-action">
|
|
6
|
+
<span class="picture-action" :style="{ width: actionSize, height: actionSize }">
|
|
7
7
|
<a-icon type="eye" class="picture-preview-icon" @click="preview(img.url)" />
|
|
8
8
|
</span>
|
|
9
9
|
</span>
|
|
@@ -17,6 +17,18 @@ export default {
|
|
|
17
17
|
images: {
|
|
18
18
|
type: Array,
|
|
19
19
|
required: true
|
|
20
|
+
},
|
|
21
|
+
width: {
|
|
22
|
+
type: Number,
|
|
23
|
+
default: 150
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
computed: {
|
|
27
|
+
cardSize: function () {
|
|
28
|
+
return this.width + 'px'
|
|
29
|
+
},
|
|
30
|
+
actionSize: function () {
|
|
31
|
+
return this.width - 22 + 'px'
|
|
20
32
|
}
|
|
21
33
|
},
|
|
22
34
|
methods: {
|
|
@@ -31,8 +43,6 @@ export default {
|
|
|
31
43
|
.picture-card {
|
|
32
44
|
position: relative;
|
|
33
45
|
display: inline-block;
|
|
34
|
-
width: 150px;
|
|
35
|
-
height: 150px;
|
|
36
46
|
border: 1px solid #d9d9d9;
|
|
37
47
|
border-radius: 6px;
|
|
38
48
|
padding: 10px;
|
|
@@ -49,8 +59,6 @@ export default {
|
|
|
49
59
|
display: flex;
|
|
50
60
|
justify-content: center;
|
|
51
61
|
align-items: center;
|
|
52
|
-
width: 128px;
|
|
53
|
-
height: 128px;
|
|
54
62
|
background: #000;
|
|
55
63
|
opacity: 0;
|
|
56
64
|
transition: opacity 0.3s;
|
|
@@ -44,6 +44,23 @@
|
|
|
44
44
|
</a-steps>
|
|
45
45
|
</div>
|
|
46
46
|
</result>
|
|
47
|
+
<div class="ticket-detail">
|
|
48
|
+
<a-row class="item">
|
|
49
|
+
<a-col :span="3"><span class="title">问题描述</span></a-col>
|
|
50
|
+
<a-col :span="17"><span>{{ details.description }}</span></a-col>
|
|
51
|
+
</a-row>
|
|
52
|
+
<a-row class="item">
|
|
53
|
+
<a-col :span="3"><span class="title">问题截图</span></a-col>
|
|
54
|
+
<a-col :span="21"><image-item :images="details.images" :width="120" @preview="handleFilePreview" /></a-col>
|
|
55
|
+
</a-row>
|
|
56
|
+
<a-row v-if="details.files.length" class="item">
|
|
57
|
+
<a-col :span="3"><span class="title">附件</span></a-col>
|
|
58
|
+
<a-col :span="21"><file-item :files="details.files" :downloadable="false" @preview="handleFilePreview" /></a-col>
|
|
59
|
+
</a-row>
|
|
60
|
+
</div>
|
|
61
|
+
<a-modal v-model="filePreviewVisible" :footer="null" :dialog-style="{ top: '30px' }" width="80%" :z-index="1001">
|
|
62
|
+
<file-preview :path="filePath" />
|
|
63
|
+
</a-modal>
|
|
47
64
|
</a-card>
|
|
48
65
|
</template>
|
|
49
66
|
|
|
@@ -53,13 +70,15 @@ import DetailList from '@vue2-client/components/tool/DetailList'
|
|
|
53
70
|
import AStepItem from '@vue2-client/components/tool/AStepItem'
|
|
54
71
|
import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
|
|
55
72
|
import { formatDate } from '@vue2-client/utils/util'
|
|
73
|
+
import { FileItem, ImageItem } from '@vue2-client/components/FileImageItem'
|
|
74
|
+
import FilePreview from '@vue2-client/components/FilePreview'
|
|
56
75
|
|
|
57
76
|
const AStepItemGroup = AStepItem.Group
|
|
58
77
|
const DetailListItem = DetailList.Item
|
|
59
78
|
|
|
60
79
|
export default {
|
|
61
80
|
name: 'submitTicketSuccess',
|
|
62
|
-
components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result },
|
|
81
|
+
components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result, FileItem, ImageItem, FilePreview },
|
|
63
82
|
props: {
|
|
64
83
|
// 工单序列号
|
|
65
84
|
serialNumber: {
|
|
@@ -80,7 +99,10 @@ export default {
|
|
|
80
99
|
phone: '',
|
|
81
100
|
createdTime: '',
|
|
82
101
|
confirmTime: '',
|
|
83
|
-
finishedTime: ''
|
|
102
|
+
finishedTime: '',
|
|
103
|
+
description: '',
|
|
104
|
+
files: [],
|
|
105
|
+
images: []
|
|
84
106
|
},
|
|
85
107
|
// 控制加急按钮
|
|
86
108
|
urgentAccess: true,
|
|
@@ -91,7 +113,10 @@ export default {
|
|
|
91
113
|
// 取消工单确认框可见性
|
|
92
114
|
closeVisible: false,
|
|
93
115
|
// 控制页面大图标
|
|
94
|
-
icon: true
|
|
116
|
+
icon: true,
|
|
117
|
+
// 文件预览
|
|
118
|
+
filePreviewVisible: false,
|
|
119
|
+
filePath: ''
|
|
95
120
|
}
|
|
96
121
|
},
|
|
97
122
|
mounted () {
|
|
@@ -175,10 +200,17 @@ export default {
|
|
|
175
200
|
this.details.createdTime = this.format(res.createdtime, 'yyyy-MM-dd hh:mm:ss')
|
|
176
201
|
this.details.status = res.status
|
|
177
202
|
this.details.phone = res.phone
|
|
203
|
+
this.details.description = res.description
|
|
204
|
+
this.details.files = res.files
|
|
205
|
+
this.details.images = res.images
|
|
178
206
|
}, err => {
|
|
179
207
|
console.log(err)
|
|
180
208
|
})
|
|
181
209
|
},
|
|
210
|
+
handleFilePreview (path) {
|
|
211
|
+
this.filePath = path
|
|
212
|
+
this.filePreviewVisible = true
|
|
213
|
+
}
|
|
182
214
|
},
|
|
183
215
|
computed: {
|
|
184
216
|
// 用于进度条，进度显示控制
|
|
@@ -205,4 +237,15 @@ export default {
|
|
|
205
237
|
margin-bottom: 20px;
|
|
206
238
|
}
|
|
207
239
|
}
|
|
240
|
+
.ticket-detail {
|
|
241
|
+
width: 72%;
|
|
242
|
+
margin: 0 auto;
|
|
243
|
+
.item {
|
|
244
|
+
margin-bottom: 14px;
|
|
245
|
+
}
|
|
246
|
+
.title {
|
|
247
|
+
font-size: 14px;
|
|
248
|
+
font-weight: 600;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
208
251
|
</style>
|