简柏林 / thingskit-front · Commits

Commit ebe87af65c605f87a992638a4ca68060ae5a8f32

Authored by xp.Huang
2 parents 7b156af3 a2194ff7

Merge branch 'local_dev_ft' into 'main' 

pref:优化企业定制所有上传图片样式；pref:移除视频管理视频流验证

See merge request yunteng/thingskit-front!487
Inline Side-by-side
Showing 8 changed files with 516 additions and 449 deletions
@@ -186,8 +186,9 @@ @@ -186,8 +186,9 @@
186 .round { 186 .round {
187 border-radius: 50%; 187 border-radius: 50%;
188 } 188 }
189 -  
190 - .personal-info-modal:global(.ant-upload.ant-upload-select-picture-card) { 189 +</style>
  190 +<style lang="less">
  191 + .personal-info-modal .ant-upload.ant-upload-select-picture-card {
191 border-radius: 50%; 192 border-radius: 50%;
192 width: 160px; 193 width: 160px;
193 height: 160px; 194 height: 160px;
1 -import { BasicColumn, FormSchema } from '/@/components/Table';  
2 -import { getOrganizationList } from '/@/api/system/system';  
3 -import { copyTransFun } from '/@/utils/fnUtils';  
4 -import type { FormSchema as QFormSchema } from '/@/components/Form/index';  
5 -  
6 -import { CameraVideoUrl, CameraMaxLength, MediaTypeValidate } from '/@/utils/rules';  
7 -import { h } from 'vue';  
8 -import SnHelpMessage from './SnHelpMessage.vue';  
9 -  
10 -export enum CameraPermission {  
11 - PREVIEW = 'api:yt:video:get',  
12 - CREATE = 'api:yt:video:post',  
13 - UPDATE = 'api:yt:video:update',  
14 - DELETE = 'api:yt:video:delete',  
15 -}  
16 -  
17 -export enum AccessMode {  
18 - ManuallyEnter = 0,  
19 - Streaming = 1,  
20 -}  
21 -  
22 -export enum PlayProtocol {  
23 - HTTP = 0,  
24 - HTTPS = 1,  
25 -}  
26 -  
27 -export enum StreamType {  
28 - MASTER = 0,  
29 - CHILD = 1,  
30 - THIRD = 2,  
31 -}  
32 -  
33 -export enum PageMode {  
34 - SPLIT_SCREEN_MODE = 'splitScreen',  
35 - LIST_MODE = 'listMode',  
36 - FULL_SCREEN_MODE = 'fullScreenMode',  
37 -}  
38 -  
39 -export enum MediaType {  
40 - MP4 = 'mp4',  
41 - M3U8 = 'm3u8',  
42 -}  
43 -  
44 -// 表格列数据  
45 -export const columns: BasicColumn[] = [  
46 - {  
47 - title: '封面',  
48 - dataIndex: 'avatar',  
49 - width: 80,  
50 - slots: { customRender: 'img' },  
51 - },  
52 - {  
53 - title: '名字',  
54 - dataIndex: 'name',  
55 - width: 120,  
56 - },  
57 - {  
58 - title: '摄像头编号/监控点编号',  
59 - dataIndex: 'sn',  
60 - width: 220,  
61 - },  
62 - {  
63 - title: '视频流',  
64 - dataIndex: 'videoUrl',  
65 - width: 120,  
66 - },  
67 - {  
68 - title: '所属组织',  
69 - dataIndex: 'organizationName',  
70 - width: 160,  
71 - },  
72 - {  
73 - title: '获取方式',  
74 - dataIndex: 'accessMode',  
75 - width: 100,  
76 - slots: { customRender: 'accessMode' },  
77 - },  
78 - {  
79 - title: '创建时间',  
80 - dataIndex: 'createTime',  
81 - width: 140,  
82 - },  
83 -];  
84 -  
85 -// 查询字段  
86 -export const searchFormSchema: FormSchema[] = [  
87 - {  
88 - field: 'name',  
89 - label: '摄像头名字',  
90 - component: 'Input',  
91 - colProps: { span: 8 },  
92 - componentProps: {  
93 - maxLength: 36,  
94 - placeholder: '请输入摄像头名字',  
95 - },  
96 - },  
97 -];  
98 -  
99 -// 弹框配置项  
100 -export const formSchema: QFormSchema[] = [  
101 - {  
102 - field: 'avatar',  
103 - label: '视频封面',  
104 - slot: 'iconSelect',  
105 - component: 'Input',  
106 - },  
107 - {  
108 - field: 'name',  
109 - label: '视频名字',  
110 - required: true,  
111 - component: 'Input',  
112 - componentProps: {  
113 - placeholder: '请输入视频名字',  
114 - maxLength: 30,  
115 - },  
116 - rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],  
117 - },  
118 - {  
119 - field: 'organizationId',  
120 - label: '所属组织',  
121 - required: true,  
122 - component: 'ApiTreeSelect',  
123 - componentProps: {  
124 - api: async () => {  
125 - const data = await getOrganizationList();  
126 - copyTransFun(data as any as any[]);  
127 - return data;  
128 - },  
129 - },  
130 - },  
131 - {  
132 - label: '视频流获取方式',  
133 - field: 'accessMode',  
134 - component: 'RadioGroup',  
135 - rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],  
136 - defaultValue: AccessMode.ManuallyEnter,  
137 - componentProps({ formActionType }) {  
138 - return {  
139 - defaultValue: AccessMode.ManuallyEnter,  
140 - placeholder: '请选择视频流获取方式',  
141 - options: [  
142 - { label: '手动输入', value: AccessMode.ManuallyEnter },  
143 - { label: '流媒体获取', value: AccessMode.Streaming },  
144 - ],  
145 - onChange() {  
146 - formActionType.setFieldsValue({  
147 - brand: null,  
148 - sn: null,  
149 - videoUrl: null,  
150 - videoPlatformId: null,  
151 - });  
152 - },  
153 - };  
154 - },  
155 - },  
156 - {  
157 - field: 'brand',  
158 - label: '视频厂家',  
159 - component: 'Input',  
160 - ifShow({ values }) {  
161 - return values.accessMode === AccessMode.ManuallyEnter;  
162 - },  
163 - componentProps: {  
164 - maxLength: 36,  
165 - placeholder: '请输入视频厂家',  
166 - },  
167 - },  
168 - {  
169 - field: 'sn',  
170 - label: '摄像头编号',  
171 - required: true,  
172 - component: 'Input',  
173 - rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],  
174 - ifShow({ values }) {  
175 - return values.accessMode === AccessMode.ManuallyEnter;  
176 - },  
177 - componentProps: {  
178 - maxLength: 36,  
179 - placeholder: '请输入摄像头编号',  
180 - },  
181 - },  
182 - {  
183 - field: 'videoUrl',  
184 - label: '视频流',  
185 - component: 'Input',  
186 - required: true,  
187 - ifShow({ values }) {  
188 - return values.accessMode === AccessMode.ManuallyEnter;  
189 - },  
190 - componentProps: {  
191 - placeholder: '请输入视频流',  
192 - maxLength: 255,  
193 - },  
194 - rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl, ...MediaTypeValidate],  
195 - },  
196 -  
197 - {  
198 - field: 'videoPlatformId',  
199 - label: '流媒体配置',  
200 - component: 'Select',  
201 - ifShow({ values }) {  
202 - return values.accessMode === AccessMode.Streaming;  
203 - },  
204 - slot: 'videoPlatformIdSlot',  
205 - componentProps: {  
206 - placeholder: '请选择流媒体配置',  
207 - },  
208 - },  
209 - {  
210 - field: 'streamType',  
211 - label: '码流',  
212 - component: 'RadioGroup',  
213 - defaultValue: StreamType.MASTER,  
214 - ifShow({ values }) {  
215 - return values.accessMode === AccessMode.Streaming;  
216 - },  
217 - componentProps: {  
218 - placeholder: '请选择码流',  
219 - defaultValue: StreamType.MASTER,  
220 - options: [  
221 - { label: '主码流', value: StreamType.MASTER },  
222 - { label: '子码流', value: StreamType.CHILD },  
223 - { label: '第三码流', value: StreamType.THIRD },  
224 - ],  
225 - },  
226 - },  
227 - {  
228 - field: 'playProtocol',  
229 - label: '播放协议',  
230 - component: 'RadioGroup',  
231 - defaultValue: PlayProtocol.HTTP,  
232 - ifShow({ values }) {  
233 - return values.accessMode === AccessMode.Streaming;  
234 - },  
235 - helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],  
236 - componentProps: {  
237 - placeholder: '请选择播放协议',  
238 - defaultValue: PlayProtocol.HTTP,  
239 - options: [  
240 - { label: 'http', value: PlayProtocol.HTTP },  
241 - { label: 'https', value: PlayProtocol.HTTPS },  
242 - ],  
243 - },  
244 - },  
245 - {  
246 - field: 'sn',  
247 - label: h(SnHelpMessage) as any,  
248 - component: 'Input',  
249 - rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],  
250 - ifShow({ values }) {  
251 - return values.accessMode === AccessMode.Streaming;  
252 - },  
253 - componentProps: {  
254 - placeholder: '请输入监控点编号',  
255 - },  
256 - },  
257 -]; 1 +import { BasicColumn, FormSchema } from '/@/components/Table';
  2 +import { getOrganizationList } from '/@/api/system/system';
  3 +import { copyTransFun } from '/@/utils/fnUtils';
  4 +import type { FormSchema as QFormSchema } from '/@/components/Form/index';
  5 +
  6 +import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
  7 +import { h } from 'vue';
  8 +import SnHelpMessage from './SnHelpMessage.vue';
  9 +
  10 +export enum CameraPermission {
  11 + PREVIEW = 'api:yt:video:get',
  12 + CREATE = 'api:yt:video:post',
  13 + UPDATE = 'api:yt:video:update',
  14 + DELETE = 'api:yt:video:delete',
  15 +}
  16 +
  17 +export enum AccessMode {
  18 + ManuallyEnter = 0,
  19 + Streaming = 1,
  20 +}
  21 +
  22 +export enum PlayProtocol {
  23 + HTTP = 0,
  24 + HTTPS = 1,
  25 +}
  26 +
  27 +export enum StreamType {
  28 + MASTER = 0,
  29 + CHILD = 1,
  30 + THIRD = 2,
  31 +}
  32 +
  33 +export enum PageMode {
  34 + SPLIT_SCREEN_MODE = 'splitScreen',
  35 + LIST_MODE = 'listMode',
  36 + FULL_SCREEN_MODE = 'fullScreenMode',
  37 +}
  38 +
  39 +export enum MediaType {
  40 + MP4 = 'mp4',
  41 + M3U8 = 'm3u8',
  42 +}
  43 +
  44 +// 表格列数据
  45 +export const columns: BasicColumn[] = [
  46 + {
  47 + title: '封面',
  48 + dataIndex: 'avatar',
  49 + width: 80,
  50 + slots: { customRender: 'img' },
  51 + },
  52 + {
  53 + title: '名字',
  54 + dataIndex: 'name',
  55 + width: 120,
  56 + },
  57 + {
  58 + title: '摄像头编号/监控点编号',
  59 + dataIndex: 'sn',
  60 + width: 220,
  61 + },
  62 + {
  63 + title: '视频流',
  64 + dataIndex: 'videoUrl',
  65 + width: 120,
  66 + },
  67 + {
  68 + title: '所属组织',
  69 + dataIndex: 'organizationName',
  70 + width: 160,
  71 + },
  72 + {
  73 + title: '获取方式',
  74 + dataIndex: 'accessMode',
  75 + width: 100,
  76 + slots: { customRender: 'accessMode' },
  77 + },
  78 + {
  79 + title: '创建时间',
  80 + dataIndex: 'createTime',
  81 + width: 140,
  82 + },
  83 +];
  84 +
  85 +// 查询字段
  86 +export const searchFormSchema: FormSchema[] = [
  87 + {
  88 + field: 'name',
  89 + label: '摄像头名字',
  90 + component: 'Input',
  91 + colProps: { span: 8 },
  92 + componentProps: {
  93 + maxLength: 36,
  94 + placeholder: '请输入摄像头名字',
  95 + },
  96 + },
  97 +];
  98 +
  99 +// 弹框配置项
  100 +export const formSchema: QFormSchema[] = [
  101 + {
  102 + field: 'avatar',
  103 + label: '视频封面',
  104 + slot: 'iconSelect',
  105 + component: 'Input',
  106 + },
  107 + {
  108 + field: 'name',
  109 + label: '视频名字',
  110 + required: true,
  111 + component: 'Input',
  112 + componentProps: {
  113 + placeholder: '请输入视频名字',
  114 + maxLength: 30,
  115 + },
  116 + rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
  117 + },
  118 + {
  119 + field: 'organizationId',
  120 + label: '所属组织',
  121 + required: true,
  122 + component: 'ApiTreeSelect',
  123 + componentProps: {
  124 + api: async () => {
  125 + const data = await getOrganizationList();
  126 + copyTransFun(data as any as any[]);
  127 + return data;
  128 + },
  129 + },
  130 + },
  131 + {
  132 + label: '视频流获取方式',
  133 + field: 'accessMode',
  134 + component: 'RadioGroup',
  135 + rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
  136 + defaultValue: AccessMode.ManuallyEnter,
  137 + componentProps({ formActionType }) {
  138 + return {
  139 + defaultValue: AccessMode.ManuallyEnter,
  140 + placeholder: '请选择视频流获取方式',
  141 + options: [
  142 + { label: '手动输入', value: AccessMode.ManuallyEnter },
  143 + { label: '流媒体获取', value: AccessMode.Streaming },
  144 + ],
  145 + onChange() {
  146 + formActionType.setFieldsValue({
  147 + brand: null,
  148 + sn: null,
  149 + videoUrl: null,
  150 + videoPlatformId: null,
  151 + });
  152 + },
  153 + };
  154 + },
  155 + },
  156 + {
  157 + field: 'brand',
  158 + label: '视频厂家',
  159 + component: 'Input',
  160 + ifShow({ values }) {
  161 + return values.accessMode === AccessMode.ManuallyEnter;
  162 + },
  163 + componentProps: {
  164 + maxLength: 36,
  165 + placeholder: '请输入视频厂家',
  166 + },
  167 + },
  168 + {
  169 + field: 'sn',
  170 + label: '摄像头编号',
  171 + required: true,
  172 + component: 'Input',
  173 + rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
  174 + ifShow({ values }) {
  175 + return values.accessMode === AccessMode.ManuallyEnter;
  176 + },
  177 + componentProps: {
  178 + maxLength: 36,
  179 + placeholder: '请输入摄像头编号',
  180 + },
  181 + },
  182 + {
  183 + field: 'videoUrl',
  184 + label: '视频流',
  185 + component: 'Input',
  186 + required: true,
  187 + ifShow({ values }) {
  188 + return values.accessMode === AccessMode.ManuallyEnter;
  189 + },
  190 + componentProps: {
  191 + placeholder: '请输入视频流',
  192 + maxLength: 255,
  193 + },
  194 + rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl],
  195 + },
  196 +
  197 + {
  198 + field: 'videoPlatformId',
  199 + label: '流媒体配置',
  200 + component: 'Select',
  201 + ifShow({ values }) {
  202 + return values.accessMode === AccessMode.Streaming;
  203 + },
  204 + slot: 'videoPlatformIdSlot',
  205 + componentProps: {
  206 + placeholder: '请选择流媒体配置',
  207 + },
  208 + },
  209 + {
  210 + field: 'streamType',
  211 + label: '码流',
  212 + component: 'RadioGroup',
  213 + defaultValue: StreamType.MASTER,
  214 + ifShow({ values }) {
  215 + return values.accessMode === AccessMode.Streaming;
  216 + },
  217 + componentProps: {
  218 + placeholder: '请选择码流',
  219 + defaultValue: StreamType.MASTER,
  220 + options: [
  221 + { label: '主码流', value: StreamType.MASTER },
  222 + { label: '子码流', value: StreamType.CHILD },
  223 + { label: '第三码流', value: StreamType.THIRD },
  224 + ],
  225 + },
  226 + },
  227 + {
  228 + field: 'playProtocol',
  229 + label: '播放协议',
  230 + component: 'RadioGroup',
  231 + defaultValue: PlayProtocol.HTTP,
  232 + ifShow({ values }) {
  233 + return values.accessMode === AccessMode.Streaming;
  234 + },
  235 + helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
  236 + componentProps: {
  237 + placeholder: '请选择播放协议',
  238 + defaultValue: PlayProtocol.HTTP,
  239 + options: [
  240 + { label: 'http', value: PlayProtocol.HTTP },
  241 + { label: 'https', value: PlayProtocol.HTTPS },
  242 + ],
  243 + },
  244 + },
  245 + {
  246 + field: 'sn',
  247 + label: h(SnHelpMessage) as any,
  248 + component: 'Input',
  249 + rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
  250 + ifShow({ values }) {
  251 + return values.accessMode === AccessMode.Streaming;
  252 + },
  253 + componentProps: {
  254 + placeholder: '请输入监控点编号',
  255 + },
  256 + },
  257 +];
@@ -62,13 +62,13 @@ export const configColumns: BasicColumn[] = [ @@ -62,13 +62,13 @@ export const configColumns: BasicColumn[] = [
62 dataIndex: 'response111', 62 dataIndex: 'response111',
63 slots: { customRender: 'responseContent' }, 63 slots: { customRender: 'responseContent' },
64 }, 64 },
65 - {  
66 - title: '响应失败内容',  
67 - dataIndex: 'response.error',  
68 - format: (_, record) => {  
69 - return record?.response === null ? '无' : record?.response?.error;  
70 - },  
71 - }, 65 + // {
  66 + // title: '响应失败内容',
  67 + // dataIndex: 'response.error',
  68 + // format: (_, record) => {
  69 + // return record?.response === null ? '无' : record?.response?.error;
  70 + // },
  71 + // },
72 { 72 {
73 title: '命令内容', 73 title: '命令内容',
74 dataIndex: 'request.body', 74 dataIndex: 'request.body',
@@ -5,11 +5,12 @@ @@ -5,11 +5,12 @@
5 <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button> 5 <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button>
6 </template> 6 </template>
7 <template #responseContent="{ record }"> 7 <template #responseContent="{ record }">
8 - <Tag  
9 - v-if="!record.request?.oneway"  
10 - :color="record.request?.response?.status === 'SUCCESS' ? 'green' : 'red'"  
11 - >{{ record.request?.response?.status === 'SUCCESS' ? '成功' : '失败' }}</Tag  
12 - > 8 + <div v-if="!record.request?.oneway">
  9 + <a-button v-if="record?.response === null" type="text" class="ml-2"> 无 </a-button>
  10 + <a-button v-else type="link" class="ml-2" @click="handleRecordResponseContent(record)">
  11 + 查看
  12 + </a-button>
  13 + </div>
13 </template> 14 </template>
14 </BasicTable> 15 </BasicTable>
15 </div> 16 </div>
@@ -19,7 +20,7 @@ @@ -19,7 +20,7 @@
19 import { configColumns } from './config'; 20 import { configColumns } from './config';
20 import { deviceCommandRecordGetQuery } from '/@/api/device/deviceConfigApi'; 21 import { deviceCommandRecordGetQuery } from '/@/api/device/deviceConfigApi';
21 import { BasicTable, useTable } from '/@/components/Table'; 22 import { BasicTable, useTable } from '/@/components/Table';
22 - import { Modal, Tag } from 'ant-design-vue'; 23 + import { Modal } from 'ant-design-vue';
23 import { JsonPreview } from '/@/components/CodeEditor'; 24 import { JsonPreview } from '/@/components/CodeEditor';
24 25
25 const props = defineProps({ 26 const props = defineProps({
@@ -54,4 +55,8 @@ @@ -54,4 +55,8 @@
54 const jsonParams = JSON.parse(record?.request?.body?.params); 55 const jsonParams = JSON.parse(record?.request?.body?.params);
55 commonModalInfo('命令下发内容', jsonParams?.params ? jsonParams?.params : jsonParams); 56 commonModalInfo('命令下发内容', jsonParams?.params ? jsonParams?.params : jsonParams);
56 }; 57 };
  58 + const handleRecordResponseContent = (record) => {
  59 + const jsonParams = record?.response;
  60 + commonModalInfo('响应结果', jsonParams);
  61 + };
57 </script> 62 </script>
1 <template> 1 <template>
2 <div class="card"> 2 <div class="card">
3 <Card :bordered="false" class="card"> 3 <Card :bordered="false" class="card">
4 - <BasicForm @register="registerForm">  
5 - <template #logoUpload>  
6 - <ContentUploadText>  
7 - <template #uploadImg>  
8 - <Upload  
9 - name="avatar"  
10 - list-type="picture-card"  
11 - class="avatar-uploader"  
12 - :show-upload-list="false"  
13 - @preview="handlePreview"  
14 - :customRequest="customUploadLogoPic"  
15 - :before-upload="beforeUploadLogoPic"  
16 - >  
17 - <img v-if="logoPic" :src="logoPic" alt="avatar" />  
18 - <div v-else>  
19 - <Spin v-if="loading" tip="正在上传中..." />  
20 - <PlusOutlined v-else style="font-size: 2.5rem" /> </div  
21 - ></Upload>  
22 - </template>  
23 - <template #uploadText>  
24 - <div class="flex justify-center items-center">  
25 - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB  
26 - </div>  
27 - </template>  
28 - </ContentUploadText>  
29 - </template>  
30 - <template #bgUpload>  
31 - <ContentUploadText>  
32 - <template #uploadImg>  
33 - <Upload  
34 - name="avatar"  
35 - list-type="picture-card"  
36 - class="avatar-uploader"  
37 - :show-upload-list="false"  
38 - :customRequest="customUploadBgPic"  
39 - :before-upload="beforeUploadBgPic"  
40 - >  
41 - <img v-if="bgPic" :src="bgPic" alt="avatar" />  
42 - <div v-else>  
43 - <Spin v-if="loading1" tip="正在上传中..." />  
44 - <PlusOutlined v-else style="font-size: 2.5rem" /> </div  
45 - ></Upload>  
46 - </template>  
47 - <template #uploadText>  
48 - <div class="flex justify-center items-center">  
49 - 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M  
50 - </div>  
51 - </template>  
52 - </ContentUploadText>  
53 - </template>  
54 - <template #colorInput="{ model, field }"  
55 - ><Input disabled v-model:value="model[field]">  
56 - <template #prefix> <input type="color" v-model="model[field]" /> </template  
57 - ></Input>  
58 - </template> 4 + <div style="margin-left: -40px">
  5 + <BasicForm @register="registerForm">
  6 + <template #logoUpload>
  7 + <ContentUploadText>
  8 + <template #uploadImg>
  9 + <Upload
  10 + name="avatar"
  11 + list-type="picture-card"
  12 + class="avatar-uploader"
  13 + :show-upload-list="false"
  14 + @preview="handlePreview"
  15 + :customRequest="customUploadLogoPic"
  16 + :before-upload="beforeUploadLogoPic"
  17 + >
  18 + <img v-if="logoPic" class="fill-img" :src="logoPic" alt="avatar" />
  19 + <div v-else>
  20 + <Spin v-if="loading" tip="正在上传中..." />
  21 + <PlusOutlined v-else />
  22 + <div class="ant-upload-text">上传</div>
  23 + </div>
  24 + </Upload>
  25 + </template>
  26 + <template #uploadText>
  27 + <div class="box-outline">
  28 + 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
  29 + </div>
  30 + </template>
  31 + </ContentUploadText>
  32 + </template>
  33 + <template #bgUpload>
  34 + <ContentUploadText>
  35 + <template #uploadImg>
  36 + <Upload
  37 + name="avatar"
  38 + list-type="picture-card"
  39 + class="avatar-uploader"
  40 + :show-upload-list="false"
  41 + :customRequest="customUploadBgPic"
  42 + :before-upload="beforeUploadBgPic"
  43 + >
  44 + <img v-if="bgPic" class="fill-img" :src="bgPic" alt="avatar" />
  45 + <div v-else>
  46 + <Spin v-if="loading1" tip="正在上传中..." />
  47 + <PlusOutlined v-else />
  48 + <div class="ant-upload-text">上传</div>
  49 + </div>
  50 + </Upload>
  51 + </template>
  52 + <template #uploadText>
  53 + <div class="box-outline">
  54 + 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M
  55 + </div>
  56 + </template>
  57 + </ContentUploadText>
  58 + </template>
  59 + <template #colorInput="{ model, field }"
  60 + ><Input disabled v-model:value="model[field]">
  61 + <template #prefix> <input type="color" v-model="model[field]" /> </template
  62 + ></Input>
  63 + </template>
59 64
60 - <template #homeSwiper>  
61 - <ContentUploadText>  
62 - <template #uploadImg>  
63 - <Upload  
64 - v-model:file-list="fileList"  
65 - list-type="picture-card"  
66 - @preview="handlePreview"  
67 - :customRequest="customUploadHomeSwiper"  
68 - :before-upload="beforeUploadHomeSwiper"  
69 - @change="handleChange"  
70 - >  
71 - <div v-if="fileList.length < 5">  
72 - <div>  
73 - <PlusOutlined style="font-size: 2.5rem" />  
74 - </div> </div  
75 - ></Upload>  
76 - </template>  
77 - <template #uploadText>  
78 - <div class="flex justify-center items-center">  
79 - 支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M  
80 - </div>  
81 - </template>  
82 - </ContentUploadText>  
83 - <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">  
84 - <img alt="example" style="width: 100%" :src="previewImage" />  
85 - </Modal>  
86 - </template>  
87 - </BasicForm> 65 + <template #homeSwiper>
  66 + <ContentUploadText>
  67 + <template #uploadImg>
  68 + <Upload
  69 + v-model:file-list="fileList"
  70 + list-type="picture-card"
  71 + @preview="handlePreview"
  72 + :customRequest="customUploadHomeSwiper"
  73 + :before-upload="beforeUploadHomeSwiper"
  74 + @change="handleChange"
  75 + >
  76 + <div v-if="fileList.length < 5">
  77 + <div>
  78 + <PlusOutlined />
  79 + <div class="ant-upload-text">上传</div>
  80 + </div>
  81 + </div></Upload
  82 + >
  83 + </template>
  84 + <template #uploadText>
  85 + <div class="box-outline">
  86 + 支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M
  87 + </div>
  88 + </template>
  89 + </ContentUploadText>
  90 + <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
  91 + <img alt="example" style="width: 100%" :src="previewImage" />
  92 + </Modal>
  93 + </template>
  94 + </BasicForm>
  95 + </div>
88 </Card> 96 </Card>
89 <Loading v-bind="compState" /> 97 <Loading v-bind="compState" />
90 <Authority value="api:yt:appDesign:update:update"> 98 <Authority value="api:yt:appDesign:update:update">
@@ -358,4 +366,14 @@ @@ -358,4 +366,14 @@
358 margin-top: 8px; 366 margin-top: 8px;
359 color: #666; 367 color: #666;
360 } 368 }
  369 +
  370 + .box-outline {
  371 + border: 1px dashed #d9d9d9;
  372 + text-align: left;
  373 + }
  374 +
  375 + .fill-img {
  376 + width: 100%;
  377 + height: 100%;
  378 + }
361 </style> 379 </style>
1 <template> 1 <template>
2 <div class="card"> 2 <div class="card">
3 <Card :bordered="false" class="card"> 3 <Card :bordered="false" class="card">
4 - <BasicForm @register="registerForm">  
5 - <template #logoUpload>  
6 - <ContentUploadText>  
7 - <template #uploadImg>  
8 - <Upload  
9 - name="avatar"  
10 - list-type="picture-card"  
11 - class="avatar-uploader"  
12 - :show-upload-list="false"  
13 - :customRequest="customUploadLogoPic"  
14 - :before-upload="beforeUploadLogoPic"  
15 - >  
16 - <img v-if="logoPic" :src="logoPic" alt="avatar" />  
17 - <div v-else>  
18 - <Spin v-if="loading" tip="正在上传中..." />  
19 - <PlusOutlined v-else style="font-size: 2.5rem" /> </div  
20 - ></Upload>  
21 - </template>  
22 - <template #uploadText>  
23 - <div class="flex justify-center items-center">  
24 - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB  
25 - </div>  
26 - </template>  
27 - </ContentUploadText>  
28 - </template>  
29 - <template #iconUpload>  
30 - <ContentUploadText>  
31 - <template #uploadImg>  
32 - <Upload  
33 - name="avatar"  
34 - list-type="picture-card"  
35 - class="avatar-uploader"  
36 - :show-upload-list="false"  
37 - :customRequest="customUploadIconPic"  
38 - :before-upload="beforeUploadIconPic"  
39 - >  
40 - <div v-if="iconPic">  
41 - <img :src="iconPic" class="m-auto" />  
42 - <div style="background-color: #ccc; margin-top: 20px">重新上传</div> 4 + <div style="margin-left: -40px">
  5 + <BasicForm @register="registerForm">
  6 + <template #logoUpload>
  7 + <ContentUploadText>
  8 + <template #uploadImg>
  9 + <Upload
  10 + name="avatar"
  11 + list-type="picture-card"
  12 + class="avatar-uploader"
  13 + :show-upload-list="false"
  14 + :customRequest="customUploadLogoPic"
  15 + :before-upload="beforeUploadLogoPic"
  16 + >
  17 + <img class="fill-img" v-if="logoPic" :src="logoPic" alt="avatar" />
  18 + <div v-else>
  19 + <Spin v-if="loading" tip="正在上传中..." />
  20 + <PlusOutlined v-else />
  21 + <div class="ant-upload-text">上传</div>
  22 + </div>
  23 + </Upload>
  24 + </template>
  25 + <template #uploadText>
  26 + <div class="box-outline">
  27 + 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
43 </div> 28 </div>
44 - <div v-else>  
45 - <div>  
46 - <Spin v-if="loading1" tip="正在上传中..." />  
47 - <PlusOutlined v-else style="font-size: 2.5rem" />  
48 - </div> </div  
49 - ></Upload>  
50 - </template>  
51 - <template #uploadText>  
52 - <div class="flex justify-center items-center"> 支持.ICON格式，建议尺寸为16*16px </div>  
53 - </template>  
54 - </ContentUploadText>  
55 - </template>  
56 - <template #bgUpload>  
57 - <ContentUploadText>  
58 - <template #uploadImg>  
59 - <Upload  
60 - name="avatar"  
61 - list-type="picture-card"  
62 - class="avatar-uploader"  
63 - :show-upload-list="false"  
64 - :customRequest="customUploadBgPic"  
65 - :before-upload="beforeUploadBgPic"  
66 - >  
67 - <img v-if="bgPic" :src="bgPic" alt="avatar" />  
68 - <div v-else>  
69 - <div>  
70 - <Spin v-if="loading2" tip="正在上传中..." />  
71 - <PlusOutlined v-else style="font-size: 2.5rem" />  
72 - </div> </div  
73 - ></Upload>  
74 - </template>  
75 - <template #uploadText>  
76 - <div class="flex justify-center items-center">  
77 - 支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M  
78 - </div>  
79 - </template>  
80 - </ContentUploadText>  
81 - </template>  
82 - <template #colorInput="{ model, field }"  
83 - ><Input disabled v-model:value="model[field]">  
84 - <template #prefix> <input type="color" v-model="model[field]" /> </template  
85 - ></Input>  
86 - </template>  
87 - </BasicForm> 29 + </template>
  30 + </ContentUploadText>
  31 + </template>
  32 + <template #iconUpload>
  33 + <ContentUploadText>
  34 + <template #uploadImg>
  35 + <Upload
  36 + name="avatar"
  37 + list-type="picture-card"
  38 + class="avatar-uploader"
  39 + :show-upload-list="false"
  40 + :customRequest="customUploadIconPic"
  41 + :before-upload="beforeUploadIconPic"
  42 + >
  43 + <div v-if="iconPic">
  44 + <img :src="iconPic" class="m-auto fill-img" />
  45 + <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
  46 + </div>
  47 + <div v-else>
  48 + <div>
  49 + <Spin v-if="loading1" tip="正在上传中..." />
  50 + <PlusOutlined v-else />
  51 + <div class="ant-upload-text">上传</div>
  52 + </div>
  53 + </div></Upload
  54 + >
  55 + </template>
  56 + <template #uploadText>
  57 + <div class="box-outline"> 支持.ICON格式，建议尺寸为16*16px </div>
  58 + </template>
  59 + </ContentUploadText>
  60 + </template>
  61 + <template #bgUpload>
  62 + <ContentUploadText>
  63 + <template #uploadImg>
  64 + <Upload
  65 + name="avatar"
  66 + list-type="picture-card"
  67 + class="avatar-uploader"
  68 + :show-upload-list="false"
  69 + :customRequest="customUploadBgPic"
  70 + :before-upload="beforeUploadBgPic"
  71 + >
  72 + <img class="fill-img" v-if="bgPic" :src="bgPic" alt="avatar" />
  73 + <div v-else>
  74 + <div>
  75 + <Spin v-if="loading2" tip="正在上传中..." />
  76 + <PlusOutlined v-else />
  77 + <div class="ant-upload-text">上传</div>
  78 + </div>
  79 + </div></Upload
  80 + >
  81 + </template>
  82 + <template #uploadText>
  83 + <div class="box-outline">
  84 + 支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M
  85 + </div>
  86 + </template>
  87 + </ContentUploadText>
  88 + </template>
  89 + <template #colorInput="{ model, field }"
  90 + ><Input disabled v-model:value="model[field]">
  91 + <template #prefix> <input type="color" v-model="model[field]" /> </template
  92 + ></Input>
  93 + </template>
  94 + </BasicForm>
  95 + </div>
88 </Card> 96 </Card>
89 <Loading v-bind="compState" /> 97 <Loading v-bind="compState" />
90 <Authority value="api:yt:platform:update:update"> 98 <Authority value="api:yt:platform:update:update">
@@ -305,4 +313,23 @@ @@ -305,4 +313,23 @@
305 }); 313 });
306 </script> 314 </script>
307 315
308 -<style lang="less" scoped></style> 316 +<style lang="less" scoped>
  317 + .ant-upload-select-picture-card i {
  318 + font-size: 32px;
  319 + color: #999;
  320 + }
  321 +
  322 + .ant-upload-select-picture-card .ant-upload-text {
  323 + margin-top: 8px;
  324 + color: #666;
  325 + }
  326 +
  327 + .box-outline {
  328 + border: 1px dashed #d9d9d9;
  329 + }
  330 +
  331 + .fill-img {
  332 + width: 100%;
  333 + height: 100%;
  334 + }
  335 +</style>
1 <template> 1 <template>
2 - <a-row type="flex" align="middle" justify="start">  
3 - <a-col :span="12"> 2 + <a-row align="bottom" :gutter="16">
  3 + <a-col :span="1">
4 <slot name="uploadImg"></slot> 4 <slot name="uploadImg"></slot>
5 </a-col> 5 </a-col>
6 - <a-col :span="12"> 6 + <a-col :span="5" />
  7 + <a-col :span="18" class="padd-top">
7 <slot name="uploadText"></slot> 8 <slot name="uploadText"></slot>
8 </a-col> 9 </a-col>
9 </a-row> 10 </a-row>
@@ -11,4 +12,8 @@ @@ -11,4 +12,8 @@
11 12
12 <script lang="ts" setup></script> 13 <script lang="ts" setup></script>
13 14
14 -<style lang="less" scoped></style> 15 +<style lang="less" scoped>
  16 + .padd-top {
  17 + margin-bottom: 15px;
  18 + }
  19 +</style>
@@ -13,16 +13,16 @@ @@ -13,16 +13,16 @@
13 :customRequest="customUploadqrcodePic" 13 :customRequest="customUploadqrcodePic"
14 :before-upload="beforeUploadqrcodePic" 14 :before-upload="beforeUploadqrcodePic"
15 > 15 >
16 - <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" /> 16 + <img class="fill-img" v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
17 <div v-else> 17 <div v-else>
18 <Spin v-if="loading" tip="正在上传中..." /> 18 <Spin v-if="loading" tip="正在上传中..." />
19 - <PlusOutlined v-else style="font-size: 2.5rem" /> </div  
20 - ></Upload> 19 + <PlusOutlined v-else />
  20 + <div class="ant-upload-text">上传</div>
  21 + </div></Upload
  22 + >
21 </template> 23 </template>
22 <template #uploadText> 24 <template #uploadText>
23 - <div class="flex justify-center items-center">  
24 - 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M  
25 - </div> 25 + <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M </div>
26 </template> 26 </template>
27 </ContentUploadText> 27 </ContentUploadText>
28 </template> 28 </template>
@@ -381,3 +381,14 @@ @@ -381,3 +381,14 @@
381 }, 381 },
382 }); 382 });
383 </script> 383 </script>
  384 +
  385 +<style lang="less" scoped>
  386 + .box-outline {
  387 + border: 1px dashed #d9d9d9;
  388 + }
  389 +
  390 + .fill-img {
  391 + width: 100%;
  392 + height: 100%;
  393 + }
  394 +</style>