vue2-client 1.4.35 → 1.4.37
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 +10 -0
- package/package.json +1 -1
- package/src/components/FileImageItem/FileItem.vue +60 -0
- package/src/components/FileImageItem/ImageItem.vue +70 -0
- package/src/components/FileImageItem/index.js +4 -0
- package/src/components/FilePreview/FilePreview.vue +110 -0
- package/src/components/FilePreview/index.js +3 -0
- package/src/services/api/cas.js +2 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
> 所有关于本项目的变化都在该文档里。
|
|
3
3
|
|
|
4
|
+
**1.4.37 -2022-10-18 @苗艳强**
|
|
5
|
+
- 功能修改：
|
|
6
|
+
- 新增文件列表展示组件
|
|
7
|
+
- 新增图片列表展示组件
|
|
8
|
+
- 新增文件预览组件
|
|
9
|
+
|
|
10
|
+
**1.4.36 -2022-10-18 @江超**
|
|
11
|
+
- 功能修改：
|
|
12
|
+
- 修改单页面相关逻辑
|
|
13
|
+
|
|
4
14
|
**1.4.35 -2022-10-17 @苗艳强**
|
|
5
15
|
- 功能修改：
|
|
6
16
|
- XFormTable的刷新方法可指定是否回到第一页
|
package/package.json
CHANGED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<!-- 文件 -->
|
|
4
|
+
<div v-for="file in files" :key="file.id">
|
|
5
|
+
<a class="file-item">
|
|
6
|
+
<span class="file-action" @click="preview(file.url)">
|
|
7
|
+
<a-icon type="link" />{{ file.name }}
|
|
8
|
+
</span>
|
|
9
|
+
<span class="file-action" @click="preview(file.url)">
|
|
10
|
+
<a-icon type="eye" />预览
|
|
11
|
+
</span>
|
|
12
|
+
<a v-if="downloadable" class="file-action" @click="download(file)"><a-icon type="download" />下载</a>
|
|
13
|
+
</a>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
name: 'FileImageItem',
|
|
21
|
+
props: {
|
|
22
|
+
files: {
|
|
23
|
+
type: Array,
|
|
24
|
+
required: true
|
|
25
|
+
},
|
|
26
|
+
downloadable: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
required: false,
|
|
29
|
+
default: true
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
methods: {
|
|
33
|
+
preview (path) {
|
|
34
|
+
this.$emit('preview', path)
|
|
35
|
+
},
|
|
36
|
+
// 文件下载
|
|
37
|
+
download (file) {
|
|
38
|
+
const a = document.createElement('a')
|
|
39
|
+
a.href = file.url
|
|
40
|
+
a.download = file.name
|
|
41
|
+
a.click()
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<style lang="less" scoped>
|
|
48
|
+
.file-item {
|
|
49
|
+
.file-action {
|
|
50
|
+
padding: 3px 4px;
|
|
51
|
+
color: #1890ff;
|
|
52
|
+
&:hover {
|
|
53
|
+
background: #e6f7ff;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
.anticon {
|
|
57
|
+
margin-right: 3px;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
</style>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<!-- 图片 -->
|
|
4
|
+
<span v-for="img in images" :key="img.id" class="picture-card">
|
|
5
|
+
<img :src="img.url" :alt="img.name" />
|
|
6
|
+
<span class="picture-action">
|
|
7
|
+
<a-icon type="eye" class="picture-preview-icon" @click="preview(img.url)" />
|
|
8
|
+
</span>
|
|
9
|
+
</span>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
export default {
|
|
15
|
+
name: 'ImageItem',
|
|
16
|
+
props: {
|
|
17
|
+
images: {
|
|
18
|
+
type: Array,
|
|
19
|
+
required: true
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
methods: {
|
|
23
|
+
preview (path) {
|
|
24
|
+
this.$emit('preview', path)
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<style lang="less" scoped>
|
|
31
|
+
.picture-card {
|
|
32
|
+
position: relative;
|
|
33
|
+
display: inline-block;
|
|
34
|
+
width: 150px;
|
|
35
|
+
height: 150px;
|
|
36
|
+
border: 1px solid #d9d9d9;
|
|
37
|
+
border-radius: 6px;
|
|
38
|
+
padding: 10px;
|
|
39
|
+
margin: 0 10px 10px 0;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
img {
|
|
42
|
+
width: 100%;
|
|
43
|
+
height: 100%;
|
|
44
|
+
}
|
|
45
|
+
.picture-action {
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 10px;
|
|
48
|
+
left: 10px;
|
|
49
|
+
display: flex;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
align-items: center;
|
|
52
|
+
width: 128px;
|
|
53
|
+
height: 128px;
|
|
54
|
+
background: #000;
|
|
55
|
+
opacity: 0;
|
|
56
|
+
transition: opacity 0.3s;
|
|
57
|
+
&:hover {
|
|
58
|
+
opacity: 0.4;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
.picture-preview-icon {
|
|
62
|
+
font-size: 22px;
|
|
63
|
+
color: #ccc;
|
|
64
|
+
transition: color 0.3s;
|
|
65
|
+
&:hover {
|
|
66
|
+
color: #fff;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div v-if="!pathError">
|
|
3
|
+
<!-- 文件 -->
|
|
4
|
+
<div v-if="!showImagePreview" class="preview-doc-container">
|
|
5
|
+
<a-spin size="large" :spinning="previewDocLoading" />
|
|
6
|
+
<iframe
|
|
7
|
+
v-show="!previewDocLoading"
|
|
8
|
+
:src="previewDocUrl"
|
|
9
|
+
width="100%"
|
|
10
|
+
height="100%"
|
|
11
|
+
frameborder="0"
|
|
12
|
+
@load="previewDocLoading = false" />
|
|
13
|
+
</div>
|
|
14
|
+
<!-- 图片 -->
|
|
15
|
+
<div v-else style="text-align: center">
|
|
16
|
+
<img :src="previewImageSrc" alt="image" class="preview-image">
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<a-empty v-else description="文件路径为空" />
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
import { Base64 } from 'js-base64'
|
|
24
|
+
|
|
25
|
+
export default {
|
|
26
|
+
name: 'FilePreview',
|
|
27
|
+
props: {
|
|
28
|
+
path: {
|
|
29
|
+
type: String,
|
|
30
|
+
required: true
|
|
31
|
+
},
|
|
32
|
+
// 文件服务器
|
|
33
|
+
fileServer: {
|
|
34
|
+
type: String,
|
|
35
|
+
default: 'http://123.60.214.109:8406'
|
|
36
|
+
},
|
|
37
|
+
// 文档预览服务 API
|
|
38
|
+
previewDocService: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: 'http://123.60.214.109:8012/onlinePreview?url='
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
data () {
|
|
44
|
+
return {
|
|
45
|
+
// 文档预览
|
|
46
|
+
previewDocLoading: true,
|
|
47
|
+
previewDocUrl: '',
|
|
48
|
+
// 图片预览
|
|
49
|
+
showImagePreview: false,
|
|
50
|
+
previewImageSrc: '',
|
|
51
|
+
// 路径是否为空
|
|
52
|
+
pathError: false
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
watch: {
|
|
56
|
+
// 路径改变时刷新预览
|
|
57
|
+
path: function () {
|
|
58
|
+
this.preview()
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
mounted () {
|
|
62
|
+
this.preview()
|
|
63
|
+
},
|
|
64
|
+
methods: {
|
|
65
|
+
preview () {
|
|
66
|
+
if (!this.path) {
|
|
67
|
+
this.pathError = true
|
|
68
|
+
return
|
|
69
|
+
}
|
|
70
|
+
this.pathError = false
|
|
71
|
+
if (this.isImage()) {
|
|
72
|
+
this.previewImageSrc = this.path
|
|
73
|
+
this.showImagePreview = true
|
|
74
|
+
} else {
|
|
75
|
+
const previewDocUrl = this.previewDocService + encodeURIComponent(Base64.encode(this.fileServer + this.path))
|
|
76
|
+
if (this.previewDocUrl !== previewDocUrl) {
|
|
77
|
+
this.previewDocLoading = true
|
|
78
|
+
this.previewDocUrl = previewDocUrl
|
|
79
|
+
}
|
|
80
|
+
this.showImagePreview = false
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
// 判断是否为图片
|
|
84
|
+
isImage () {
|
|
85
|
+
const index = this.path.lastIndexOf('.')
|
|
86
|
+
if (index === -1) {
|
|
87
|
+
return false
|
|
88
|
+
}
|
|
89
|
+
const suffix = this.path.substr(index + 1)
|
|
90
|
+
if (!suffix || !IMAGE_SUFFIX_ARRAY.includes(suffix)) {
|
|
91
|
+
return false
|
|
92
|
+
}
|
|
93
|
+
return true
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
// 图片后缀
|
|
98
|
+
const IMAGE_SUFFIX_ARRAY = ['xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif', 'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif']
|
|
99
|
+
</script>
|
|
100
|
+
|
|
101
|
+
<style>
|
|
102
|
+
.preview-doc-container {
|
|
103
|
+
height: calc(100vh - 60px);
|
|
104
|
+
padding-top: 20px;
|
|
105
|
+
}
|
|
106
|
+
.preview-image {
|
|
107
|
+
max-width: 100%;
|
|
108
|
+
max-height: 100vh;
|
|
109
|
+
}
|
|
110
|
+
</style>
|
package/src/services/api/cas.js
CHANGED
|
@@ -40,7 +40,7 @@ export function CASLoginByAuth (serviceKey) {
|
|
|
40
40
|
export function CASLogin (serviceKey, inner) {
|
|
41
41
|
// 从第三方跳转登录
|
|
42
42
|
const tgc = getTGTCookie()
|
|
43
|
-
if (tgc) {
|
|
43
|
+
if (tgc && !inner) {
|
|
44
44
|
return new Promise((resolve, reject) => {
|
|
45
45
|
post(casApi.createSTByTGC, {
|
|
46
46
|
serviceKey: serviceKey,
|
|
@@ -56,11 +56,7 @@ export function CASLogin (serviceKey, inner) {
|
|
|
56
56
|
})
|
|
57
57
|
logout().then(() => {
|
|
58
58
|
setTimeout(() => {
|
|
59
|
-
|
|
60
|
-
window.location.href = '/login'
|
|
61
|
-
} else {
|
|
62
|
-
window.location.href = '/login?serviceKey=' + serviceKey
|
|
63
|
-
}
|
|
59
|
+
window.location.href = '/login?serviceKey=' + serviceKey
|
|
64
60
|
}, 1500)
|
|
65
61
|
})
|
|
66
62
|
} else {
|