|
|
1
|
+<template>
|
|
|
2
|
+ <collapse-item name="属性" :expanded="true">
|
|
|
3
|
+ <setting-item-box name="上传图片" :alone="true">
|
|
|
4
|
+ <setting-item>
|
|
|
5
|
+ <n-card class="upload-box">
|
|
|
6
|
+ <n-upload
|
|
|
7
|
+ :show-file-list="false"
|
|
|
8
|
+ v-model:file-list="uploadFileListRef"
|
|
|
9
|
+ :customRequest="customRequest"
|
|
|
10
|
+ :onBeforeUpload="beforeUploadHandle"
|
|
|
11
|
+ >
|
|
|
12
|
+ <n-upload-dragger>
|
|
|
13
|
+ <img v-if="optionData.dataset" class="upload-show" :src="optionData.dataset" alt="背景" />
|
|
|
14
|
+ <div class="upload-img" v-show="!optionData.dataset">
|
|
|
15
|
+ <img src="@/assets/images/canvas/noImage.png" />
|
|
|
16
|
+ <n-text class="upload-desc" depth="3">
|
|
|
17
|
+ 背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
|
|
|
18
|
+ </n-text>
|
|
|
19
|
+ </div>
|
|
|
20
|
+ </n-upload-dragger>
|
|
|
21
|
+ </n-upload>
|
|
|
22
|
+ </n-card>
|
|
|
23
|
+ </setting-item>
|
|
|
24
|
+ </setting-item-box>
|
|
|
25
|
+ <setting-item-box name="样式">
|
|
|
26
|
+ <setting-item name="类型">
|
|
|
27
|
+ <n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
|
|
|
28
|
+ </setting-item>
|
|
|
29
|
+ <setting-item name="圆角">
|
|
|
30
|
+ <n-input-number
|
|
|
31
|
+ v-model:value="optionData.borderRadius"
|
|
|
32
|
+ size="small"
|
|
|
33
|
+ :min="0"
|
|
|
34
|
+ placeholder="圆角"
|
|
|
35
|
+ ></n-input-number>
|
|
|
36
|
+ </setting-item>
|
|
|
37
|
+ </setting-item-box>
|
|
|
38
|
+ </collapse-item>
|
|
|
39
|
+</template>
|
|
|
40
|
+
|
|
|
41
|
+<script setup lang="ts">
|
|
|
42
|
+import { PropType, ref, nextTick } from 'vue'
|
|
|
43
|
+import { option } from './config'
|
|
|
44
|
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
|
|
45
|
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
|
|
|
46
|
+import { uploadFile } from '@/api/external/contentSave/content'
|
|
|
47
|
+import { UploadCustomRequestOptions } from 'naive-ui'
|
|
|
48
|
+import { backgroundImageSize } from '@/settings/designSetting'
|
|
|
49
|
+import { fetchRouteParamsLocation } from '@/utils'
|
|
|
50
|
+
|
|
|
51
|
+const props = defineProps({
|
|
|
52
|
+ optionData: {
|
|
|
53
|
+ type: Object as PropType<typeof option>,
|
|
|
54
|
+ required: true
|
|
|
55
|
+ }
|
|
|
56
|
+})
|
|
|
57
|
+
|
|
|
58
|
+const uploadFileListRef = ref()
|
|
|
59
|
+
|
|
|
60
|
+// 上传图片前置处理
|
|
|
61
|
+//@ts-ignore
|
|
|
62
|
+const beforeUploadHandle = async ({ file }) => {
|
|
|
63
|
+ uploadFileListRef.value = []
|
|
|
64
|
+ const type = file.file.type
|
|
|
65
|
+ const size = file.file.size
|
|
|
66
|
+
|
|
|
67
|
+ if (size > 1024 * 1024 * backgroundImageSize) {
|
|
|
68
|
+ window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
|
|
|
69
|
+ return false
|
|
|
70
|
+ }
|
|
|
71
|
+ if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
|
|
|
72
|
+ window['$message'].warning('文件格式不符合，请重新上传！')
|
|
|
73
|
+ return false
|
|
|
74
|
+ }
|
|
|
75
|
+ return true
|
|
|
76
|
+}
|
|
|
77
|
+
|
|
|
78
|
+// 自定义上传操作
|
|
|
79
|
+const customRequest = (options: UploadCustomRequestOptions) => {
|
|
|
80
|
+ const { file } = options
|
|
|
81
|
+ nextTick(async () => {
|
|
|
82
|
+ if (file.file) {
|
|
|
83
|
+ // 修改名称
|
|
|
84
|
+ const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
|
|
|
85
|
+ type: file.file.type
|
|
|
86
|
+ })
|
|
|
87
|
+ let uploadParams = new FormData()
|
|
|
88
|
+ uploadParams.append('file', newNameFile)
|
|
|
89
|
+ const uploadRes = await uploadFile(uploadParams)
|
|
|
90
|
+ if (uploadRes) {
|
|
|
91
|
+ props.optionData.dataset = uploadRes?.fileStaticUri
|
|
|
92
|
+ window['$message'].success('添加图片成功！')
|
|
|
93
|
+ }
|
|
|
94
|
+ } else {
|
|
|
95
|
+ window['$message'].error('添加图片失败，请稍后重试！')
|
|
|
96
|
+ }
|
|
|
97
|
+ })
|
|
|
98
|
+}
|
|
|
99
|
+
|
|
|
100
|
+// 适应类型
|
|
|
101
|
+const fitList = [
|
|
|
102
|
+ {
|
|
|
103
|
+ value: 'fill',
|
|
|
104
|
+ label: 'fill'
|
|
|
105
|
+ },
|
|
|
106
|
+ {
|
|
|
107
|
+ value: 'contain',
|
|
|
108
|
+ label: 'contain'
|
|
|
109
|
+ },
|
|
|
110
|
+ {
|
|
|
111
|
+ value: 'cover',
|
|
|
112
|
+ label: 'cover'
|
|
|
113
|
+ },
|
|
|
114
|
+ {
|
|
|
115
|
+ value: 'scale-down',
|
|
|
116
|
+ label: 'scale-down'
|
|
|
117
|
+ },
|
|
|
118
|
+ {
|
|
|
119
|
+ value: 'none',
|
|
|
120
|
+ label: 'none'
|
|
|
121
|
+ }
|
|
|
122
|
+]
|
|
|
123
|
+</script>
|
|
|
124
|
+<style lang="scss" scoped>
|
|
|
125
|
+$uploadHeight: 193px;
|
|
|
126
|
+.upload-box {
|
|
|
127
|
+ cursor: pointer;
|
|
|
128
|
+ margin-bottom: 20px;
|
|
|
129
|
+ @include deep() {
|
|
|
130
|
+ .n-card__content {
|
|
|
131
|
+ padding: 0;
|
|
|
132
|
+ overflow: hidden;
|
|
|
133
|
+ }
|
|
|
134
|
+ .n-upload-dragger {
|
|
|
135
|
+ padding: 5px;
|
|
|
136
|
+ }
|
|
|
137
|
+ }
|
|
|
138
|
+ .upload-show {
|
|
|
139
|
+ width: -webkit-fill-available;
|
|
|
140
|
+ height: $uploadHeight;
|
|
|
141
|
+ border-radius: 5px;
|
|
|
142
|
+ }
|
|
|
143
|
+ .upload-img {
|
|
|
144
|
+ display: flex;
|
|
|
145
|
+ flex-direction: column;
|
|
|
146
|
+ align-items: center;
|
|
|
147
|
+ img {
|
|
|
148
|
+ height: 150px;
|
|
|
149
|
+ }
|
|
|
150
|
+ .upload-desc {
|
|
|
151
|
+ padding: 10px 0;
|
|
|
152
|
+ }
|
|
|
153
|
+ }
|
|
|
154
|
+}
|
|
|
155
|
+</style> |
...
|
...
|
|
