简柏林 / thingskit-front · Commits

Commit 1711bcdc7efbae800c589126a2a8aacf56f99691

Authored by fengwotao
1 parent 4c77769b

style:只是调整布局样式

Inline Side-by-side
Showing 4 changed files with 829 additions and 807 deletions
1 -<template>  
2 - <div class="card">  
3 - <Card :bordered="false" class="card">  
4 - <BasicForm @register="registerForm">  
5 - <template #logoUpload>  
6 - <Upload  
7 - name="avatar"  
8 - list-type="picture-card"  
9 - class="avatar-uploader"  
10 - :show-upload-list="false"  
11 - @preview="handlePreview"  
12 - :customRequest="customUploadLogoPic"  
13 - :before-upload="beforeUploadLogoPic"  
14 - >  
15 - <img v-if="logoPic" :src="logoPic" />  
16 - <div v-else>  
17 - <div style="margin-top: 1.875rem">  
18 - <LoadingOutlined v-if="loading" />  
19 - <PlusOutlined v-else style="font-size: 2.5rem" />  
20 - </div>  
21 - <div  
22 - class="ant-upload-text flex"  
23 - style="width: 180px; height: 100px; align-items: center; font-size: 0.5625rem"  
24 - >  
25 - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB</div  
26 - >  
27 - </div>  
28 - </Upload>  
29 - </template>  
30 - <template #bgUpload>  
31 - <Upload  
32 - name="avatar"  
33 - list-type="picture-card"  
34 - class="avatar-uploader"  
35 - :show-upload-list="false"  
36 - :customRequest="customUploadBgPic"  
37 - :before-upload="beforeUploadBgPic"  
38 - >  
39 - <img v-if="bgPic" :src="bgPic" alt="avatar" />  
40 - <div v-else>  
41 - <div style="margin-top: 1.875rem">  
42 - <LoadingOutlined v-if="loading1" />  
43 - <PlusOutlined v-else style="font-size: 2.5rem" />  
44 - </div>  
45 - <div  
46 - class="ant-upload-text flex"  
47 - style="width: 280px; height: 100px; align-items: center; font-size: 0.5625rem"  
48 - >  
49 - 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M</div  
50 - >  
51 - </div>  
52 - </Upload>  
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>  
59 -  
60 - <template #homeSwiper>  
61 - <Upload  
62 - v-model:file-list="fileList"  
63 - list-type="picture-card"  
64 - @preview="handlePreview"  
65 - :customRequest="customUploadHomeSwiper"  
66 - :before-upload="beforeUploadHomeSwiper"  
67 - @change="handleChange"  
68 - >  
69 - <div v-if="fileList.length < 5">  
70 - <div style="margin-top: 1.875rem">  
71 - <PlusOutlined style="font-size: 2.5rem" />  
72 - </div>  
73 - <div  
74 - class="ant-upload-text flex"  
75 - style="width: 150px; height: 70px; align-items: center; font-size: 0.5625rem"  
76 - >支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M</div  
77 - >  
78 - </div>  
79 - </Upload>  
80 - <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">  
81 - <img alt="example" style="width: 100%" :src="previewImage" />  
82 - </Modal>  
83 - </template>  
84 - </BasicForm>  
85 - </Card>  
86 - <Loading v-bind="compState" />  
87 - <Authority value="api:yt:appDesign:update:update">  
88 - <a-button @click="handleUpdateInfo" type="primary" class="mt-4">保存信息</a-button>  
89 - </Authority>  
90 - <Authority value="api:yt:appDesign:data_reset:reset">  
91 - <a-button @click="handleResetInfo" type="primary" class="ml-4">恢复默认设置</a-button>  
92 - </Authority>  
93 - </div>  
94 -</template>  
95 -  
96 -<script lang="ts">  
97 - import { defineComponent, ref, unref, onMounted } from 'vue';  
98 - import { BasicForm, useForm } from '/@/components/Form/index';  
99 - import { Loading } from '/@/components/Loading/index';  
100 - import { Card, Upload, Input, Modal } from 'ant-design-vue';  
101 - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';  
102 - import { schemas } from '../config/AppDraw.config';  
103 - import { FileItem, FileInfo } from '../types/index';  
104 - import { logoUpload, bgUpload, resetAppInfo } from '/@/api/oem/index';  
105 - import { useMessage } from '/@/hooks/web/useMessage';  
106 - import { getAppDesign, updateAppDesign } from '/@/api/oem/index';  
107 - import { Authority } from '/@/components/Authority';  
108 -  
109 - export default defineComponent({  
110 - components: {  
111 - Card,  
112 - BasicForm,  
113 - Upload,  
114 - Loading,  
115 - PlusOutlined,  
116 - Input,  
117 - Modal,  
118 - Authority,  
119 - LoadingOutlined,  
120 - },  
121 - setup() {  
122 - const loading = ref(false);  
123 - const loading1 = ref(false);  
124 - const compState = ref({  
125 - absolute: false,  
126 - loading: false,  
127 - tip: '拼命加载中...',  
128 - });  
129 - const { createMessage } = useMessage();  
130 - const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({  
131 - schemas,  
132 - showSubmitButton: false,  
133 - showResetButton: false,  
134 - labelWidth: 150,  
135 - wrapperCol: {  
136 - span: 10,  
137 - },  
138 - });  
139 - const previewVisible = ref<boolean>(false);  
140 - const previewImage = ref<string | undefined>('');  
141 - function getBase64(file: File) {  
142 - return new Promise((resolve, reject) => {  
143 - const reader = new FileReader();  
144 - reader.readAsDataURL(file);  
145 - reader.onload = () => resolve(reader.result);  
146 - reader.onerror = (error) => reject(error);  
147 - });  
148 - }  
149 - const handleCancel = () => {  
150 - previewVisible.value = false;  
151 - };  
152 - const handlePreview = async (file: FileItem) => {  
153 - if (!file.url && !file.preview) {  
154 - file.preview = (await getBase64(file.originFileObj)) as string;  
155 - }  
156 - previewImage.value = file.url || file.preview;  
157 - previewVisible.value = true;  
158 - };  
159 -  
160 - // logo图片上传  
161 - const logoPic = ref();  
162 - async function customUploadLogoPic({ file }) {  
163 - if (beforeUploadLogoPic(file)) {  
164 - logoPic.value = '';  
165 - loading.value = true;  
166 - const formData = new FormData();  
167 - formData.append('file', file);  
168 - const response = await logoUpload(formData);  
169 - if (response.fileStaticUri) {  
170 - logoPic.value = response.fileStaticUri;  
171 - loading.value = false;  
172 - }  
173 - }  
174 - }  
175 - const beforeUploadLogoPic = (file) => {  
176 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
177 - if (!isJpgOrPng) {  
178 - createMessage.error('只能上传图片文件!');  
179 - }  
180 - const isLt2M = (file.size as number) / 1024 < 500;  
181 - if (!isLt2M) {  
182 - createMessage.error('图片大小不能超过500KB!');  
183 - }  
184 - return isJpgOrPng && isLt2M;  
185 - };  
186 -  
187 - // 登录页背景上传  
188 - const bgPic = ref();  
189 - async function customUploadBgPic({ file }) {  
190 - if (beforeUploadBgPic(file)) {  
191 - bgPic.value = '';  
192 - loading1.value = true;  
193 - const formData = new FormData();  
194 - formData.append('file', file);  
195 - const response = await bgUpload(formData);  
196 - if (response.fileStaticUri) {  
197 - bgPic.value = response.fileStaticUri;  
198 - loading1.value = false;  
199 - }  
200 - }  
201 - }  
202 - const beforeUploadBgPic = (file) => {  
203 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
204 - if (!isJpgOrPng) {  
205 - createMessage.error('只能上传图片文件!');  
206 - }  
207 - const isLt2M = (file.size as number) / 1024 / 1024 < 2;  
208 - if (!isLt2M) {  
209 - createMessage.error('图片大小不能超过2MB!');  
210 - }  
211 - return isJpgOrPng && isLt2M;  
212 - };  
213 - // 首页轮播图  
214 - const fileList = ref<FileItem[]>([]);  
215 - async function customUploadHomeSwiper({ file }) {  
216 - if (beforeUploadHomeSwiper(file)) {  
217 - const formData = new FormData();  
218 - formData.append('file', file);  
219 - const response = await bgUpload(formData);  
220 - if (response.fileStaticUri) {  
221 - fileList.value.push({  
222 - uid: -Math.random() + '',  
223 - name: response.fileName,  
224 - status: 'done',  
225 - url: response.fileStaticUri,  
226 - });  
227 - const fileArr = fileList.value.filter((item) => {  
228 - return item.percent !== 0;  
229 - });  
230 - fileList.value = fileArr;  
231 - }  
232 - }  
233 - }  
234 -  
235 - const beforeUploadHomeSwiper = (file) => {  
236 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
237 - if (!isJpgOrPng) {  
238 - createMessage.error('只能上传图片文件!');  
239 - }  
240 - const isLt2M = (file.size as number) / 1024 / 1024 < 3;  
241 - if (!isLt2M) {  
242 - createMessage.error('图片大小不能超过3MB!');  
243 - }  
244 - return isJpgOrPng && isLt2M;  
245 - };  
246 - const handleChange = (info: FileInfo) => {  
247 - if (info.file.status !== 'uploading') {  
248 - fileList.value = info.fileList.filter((f: any) => !f.size);  
249 - }  
250 - };  
251 -  
252 - const handleUpdateInfo = async () => {  
253 - try {  
254 - const fieldValue = getFieldsValue();  
255 - // 做换字段  
256 - const homeSwiper = fileList.value.map((item) => item.url);  
257 - const rotation = homeSwiper.join(',');  
258 -  
259 - compState.value.loading = true;  
260 - await updateAppDesign({  
261 - ...fieldValue,  
262 - background: unref(bgPic),  
263 - icon: unref(bgPic),  
264 - logo: unref(logoPic),  
265 - rotation,  
266 - });  
267 - compState.value.loading = false;  
268 - createMessage.success('保存信息成功');  
269 - } catch (e) {  
270 - createMessage.error('保存信息失败');  
271 - }  
272 - };  
273 -  
274 - onMounted(async () => {  
275 - const res = await getAppDesign();  
276 - const rotation = res.rotation ? res.rotation.split(',') : [];  
277 - const arr: any[] = [];  
278 - for (let item of rotation) {  
279 - arr.push({  
280 - uid: -Math.random() + '',  
281 - name: '111',  
282 - url: item,  
283 - status: 'done',  
284 - });  
285 - }  
286 - setFieldsValue(res);  
287 - logoPic.value = res.logo;  
288 - bgPic.value = res.background;  
289 - if (arr[0]?.url === '') return;  
290 - fileList.value = arr;  
291 - });  
292 - const handleResetInfo = async () => {  
293 - try {  
294 - compState.value.loading = true;  
295 - await resetAppInfo();  
296 - compState.value.loading = false;  
297 - createMessage.success('恢复出厂设置成功');  
298 - resetFields();  
299 - const res = await getAppDesign();  
300 - const rotation = res.rotation ? res.rotation.split(',') : [];  
301 - const arr: any[] = [];  
302 - for (let item of rotation) {  
303 - arr.push({  
304 - uid: -Math.random() + '',  
305 - name: '111',  
306 - url: item,  
307 - status: 'done',  
308 - });  
309 - }  
310 - setFieldsValue(res);  
311 - logoPic.value = res.logo;  
312 - bgPic.value = res.background;  
313 - if (arr[0]?.url === '') return;  
314 - fileList.value = arr;  
315 - } catch (e) {  
316 - compState.value.loading = false;  
317 - createMessage.error('恢复出厂设置失败');  
318 - }  
319 - };  
320 - return {  
321 - compState,  
322 - fileList,  
323 - registerForm,  
324 - handleUpdateInfo,  
325 - handleCancel,  
326 - handlePreview,  
327 - customUploadLogoPic,  
328 - beforeUploadLogoPic,  
329 - customUploadBgPic,  
330 - beforeUploadBgPic,  
331 - customUploadHomeSwiper,  
332 - beforeUploadHomeSwiper,  
333 - handleChange,  
334 - logoPic,  
335 - bgPic,  
336 - previewVisible,  
337 - previewImage,  
338 - loading,  
339 - loading1,  
340 - handleResetInfo,  
341 - };  
342 - },  
343 - });  
344 -</script>  
345 -  
346 -<style lang="less" scoped>  
347 - .ant-upload-select-picture-card i {  
348 - font-size: 32px;  
349 - color: #999;  
350 - }  
351 -  
352 - .ant-upload-select-picture-card .ant-upload-text {  
353 - margin-top: 8px;  
354 - color: #666;  
355 - }  
356 -</style> 1 +<template>
  2 + <div 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>
  59 +
  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>
  88 + </Card>
  89 + <Loading v-bind="compState" />
  90 + <Authority value="api:yt:appDesign:update:update">
  91 + <a-button @click="handleUpdateInfo" type="primary" class="mt-4">保存信息</a-button>
  92 + </Authority>
  93 + <Authority value="api:yt:appDesign:data_reset:reset">
  94 + <a-button @click="handleResetInfo" type="primary" class="ml-4">恢复默认设置</a-button>
  95 + </Authority>
  96 + </div>
  97 +</template>
  98 +
  99 +<script lang="ts">
  100 + import { defineComponent, ref, unref, onMounted } from 'vue';
  101 + import { BasicForm, useForm } from '/@/components/Form/index';
  102 + import { Loading } from '/@/components/Loading/index';
  103 + import { Card, Upload, Input, Modal } from 'ant-design-vue';
  104 + import { PlusOutlined } from '@ant-design/icons-vue';
  105 + import { schemas } from '../config/AppDraw.config';
  106 + import { FileItem, FileInfo } from '../types/index';
  107 + import { logoUpload, bgUpload, resetAppInfo } from '/@/api/oem/index';
  108 + import { useMessage } from '/@/hooks/web/useMessage';
  109 + import { getAppDesign, updateAppDesign } from '/@/api/oem/index';
  110 + import { Authority } from '/@/components/Authority';
  111 + import ContentUploadText from './ContentUploadText.vue';
  112 +
  113 + export default defineComponent({
  114 + components: {
  115 + Card,
  116 + BasicForm,
  117 + Upload,
  118 + Loading,
  119 + PlusOutlined,
  120 + Input,
  121 + Modal,
  122 + Authority,
  123 + ContentUploadText,
  124 + },
  125 + setup() {
  126 + const loading = ref(false);
  127 + const loading1 = ref(false);
  128 + const compState = ref({
  129 + absolute: false,
  130 + loading: false,
  131 + tip: '拼命加载中...',
  132 + });
  133 + const { createMessage } = useMessage();
  134 + const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
  135 + schemas,
  136 + showSubmitButton: false,
  137 + showResetButton: false,
  138 + labelWidth: 150,
  139 + wrapperCol: {
  140 + span: 10,
  141 + },
  142 + });
  143 + const previewVisible = ref<boolean>(false);
  144 + const previewImage = ref<string | undefined>('');
  145 + function getBase64(file: File) {
  146 + return new Promise((resolve, reject) => {
  147 + const reader = new FileReader();
  148 + reader.readAsDataURL(file);
  149 + reader.onload = () => resolve(reader.result);
  150 + reader.onerror = (error) => reject(error);
  151 + });
  152 + }
  153 + const handleCancel = () => {
  154 + previewVisible.value = false;
  155 + };
  156 + const handlePreview = async (file: FileItem) => {
  157 + if (!file.url && !file.preview) {
  158 + file.preview = (await getBase64(file.originFileObj)) as string;
  159 + }
  160 + previewImage.value = file.url || file.preview;
  161 + previewVisible.value = true;
  162 + };
  163 +
  164 + // logo图片上传
  165 + const logoPic = ref();
  166 + async function customUploadLogoPic({ file }) {
  167 + if (beforeUploadLogoPic(file)) {
  168 + logoPic.value = '';
  169 + loading.value = true;
  170 + const formData = new FormData();
  171 + formData.append('file', file);
  172 + const response = await logoUpload(formData);
  173 + if (response.fileStaticUri) {
  174 + logoPic.value = response.fileStaticUri;
  175 + loading.value = false;
  176 + }
  177 + }
  178 + }
  179 + const beforeUploadLogoPic = (file) => {
  180 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  181 + if (!isJpgOrPng) {
  182 + createMessage.error('只能上传图片文件!');
  183 + }
  184 + const isLt2M = (file.size as number) / 1024 < 500;
  185 + if (!isLt2M) {
  186 + createMessage.error('图片大小不能超过500KB!');
  187 + }
  188 + return isJpgOrPng && isLt2M;
  189 + };
  190 +
  191 + // 登录页背景上传
  192 + const bgPic = ref();
  193 + async function customUploadBgPic({ file }) {
  194 + if (beforeUploadBgPic(file)) {
  195 + bgPic.value = '';
  196 + loading1.value = true;
  197 + const formData = new FormData();
  198 + formData.append('file', file);
  199 + const response = await bgUpload(formData);
  200 + if (response.fileStaticUri) {
  201 + bgPic.value = response.fileStaticUri;
  202 + loading1.value = false;
  203 + }
  204 + }
  205 + }
  206 + const beforeUploadBgPic = (file) => {
  207 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  208 + if (!isJpgOrPng) {
  209 + createMessage.error('只能上传图片文件!');
  210 + }
  211 + const isLt2M = (file.size as number) / 1024 / 1024 < 2;
  212 + if (!isLt2M) {
  213 + createMessage.error('图片大小不能超过2MB!');
  214 + }
  215 + return isJpgOrPng && isLt2M;
  216 + };
  217 + // 首页轮播图
  218 + const fileList = ref<FileItem[]>([]);
  219 + async function customUploadHomeSwiper({ file }) {
  220 + if (beforeUploadHomeSwiper(file)) {
  221 + const formData = new FormData();
  222 + formData.append('file', file);
  223 + const response = await bgUpload(formData);
  224 + if (response.fileStaticUri) {
  225 + fileList.value.push({
  226 + uid: -Math.random() + '',
  227 + name: response.fileName,
  228 + status: 'done',
  229 + url: response.fileStaticUri,
  230 + });
  231 + const fileArr = fileList.value.filter((item) => {
  232 + return item.percent !== 0;
  233 + });
  234 + fileList.value = fileArr;
  235 + }
  236 + }
  237 + }
  238 +
  239 + const beforeUploadHomeSwiper = (file) => {
  240 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  241 + if (!isJpgOrPng) {
  242 + createMessage.error('只能上传图片文件!');
  243 + }
  244 + const isLt2M = (file.size as number) / 1024 / 1024 < 3;
  245 + if (!isLt2M) {
  246 + createMessage.error('图片大小不能超过3MB!');
  247 + }
  248 + return isJpgOrPng && isLt2M;
  249 + };
  250 + const handleChange = (info: FileInfo) => {
  251 + if (info.file.status !== 'uploading') {
  252 + fileList.value = info.fileList.filter((f: any) => !f.size);
  253 + }
  254 + };
  255 +
  256 + const handleUpdateInfo = async () => {
  257 + try {
  258 + const fieldValue = getFieldsValue();
  259 + // 做换字段
  260 + const homeSwiper = fileList.value.map((item) => item.url);
  261 + const rotation = homeSwiper.join(',');
  262 +
  263 + compState.value.loading = true;
  264 + await updateAppDesign({
  265 + ...fieldValue,
  266 + background: unref(bgPic),
  267 + icon: unref(bgPic),
  268 + logo: unref(logoPic),
  269 + rotation,
  270 + });
  271 + compState.value.loading = false;
  272 + createMessage.success('保存信息成功');
  273 + } catch (e) {
  274 + createMessage.error('保存信息失败');
  275 + }
  276 + };
  277 +
  278 + onMounted(async () => {
  279 + const res = await getAppDesign();
  280 + const rotation = res.rotation ? res.rotation.split(',') : [];
  281 + const arr: any[] = [];
  282 + for (let item of rotation) {
  283 + arr.push({
  284 + uid: -Math.random() + '',
  285 + name: '111',
  286 + url: item,
  287 + status: 'done',
  288 + });
  289 + }
  290 + setFieldsValue(res);
  291 + logoPic.value = res.logo;
  292 + bgPic.value = res.background;
  293 + if (arr[0]?.url === '') return;
  294 + fileList.value = arr;
  295 + });
  296 + const handleResetInfo = async () => {
  297 + try {
  298 + compState.value.loading = true;
  299 + await resetAppInfo();
  300 + compState.value.loading = false;
  301 + createMessage.success('恢复出厂设置成功');
  302 + resetFields();
  303 + const res = await getAppDesign();
  304 + const rotation = res.rotation ? res.rotation.split(',') : [];
  305 + const arr: any[] = [];
  306 + for (let item of rotation) {
  307 + arr.push({
  308 + uid: -Math.random() + '',
  309 + name: '111',
  310 + url: item,
  311 + status: 'done',
  312 + });
  313 + }
  314 + setFieldsValue(res);
  315 + logoPic.value = res.logo;
  316 + bgPic.value = res.background;
  317 + if (arr[0]?.url === '') return;
  318 + fileList.value = arr;
  319 + } catch (e) {
  320 + compState.value.loading = false;
  321 + createMessage.error('恢复出厂设置失败');
  322 + }
  323 + };
  324 + return {
  325 + compState,
  326 + fileList,
  327 + registerForm,
  328 + handleUpdateInfo,
  329 + handleCancel,
  330 + handlePreview,
  331 + customUploadLogoPic,
  332 + beforeUploadLogoPic,
  333 + customUploadBgPic,
  334 + beforeUploadBgPic,
  335 + customUploadHomeSwiper,
  336 + beforeUploadHomeSwiper,
  337 + handleChange,
  338 + logoPic,
  339 + bgPic,
  340 + previewVisible,
  341 + previewImage,
  342 + loading,
  343 + loading1,
  344 + handleResetInfo,
  345 + };
  346 + },
  347 + });
  348 +</script>
  349 +
  350 +<style lang="less" scoped>
  351 + .ant-upload-select-picture-card i {
  352 + font-size: 32px;
  353 + color: #999;
  354 + }
  355 +
  356 + .ant-upload-select-picture-card .ant-upload-text {
  357 + margin-top: 8px;
  358 + color: #666;
  359 + }
  360 +</style>
@@ -3,81 +3,82 @@ @@ -3,81 +3,82 @@
3 <Card :bordered="false" class="card"> 3 <Card :bordered="false" class="card">
4 <BasicForm @register="registerForm"> 4 <BasicForm @register="registerForm">
5 <template #logoUpload> 5 <template #logoUpload>
6 - <Upload  
7 - name="avatar"  
8 - list-type="picture-card"  
9 - class="avatar-uploader"  
10 - :show-upload-list="false"  
11 - :customRequest="customUploadLogoPic"  
12 - :before-upload="beforeUploadLogoPic"  
13 - >  
14 - <img v-if="logoPic" :src="logoPic" />  
15 - <div v-else>  
16 - <div style="margin-top: 1.875rem">  
17 - <LoadingOutlined v-if="loading" />  
18 - <PlusOutlined v-else style="font-size: 2.5rem" />  
19 - </div>  
20 - <div  
21 - class="ant-upload-text flex"  
22 - style="width: 180px; height: 100px; align-items: center; font-size: 0.5625rem"  
23 - >  
24 - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB</div 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"
25 > 15 >
26 - </div>  
27 - </Upload> 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> 28 </template>
29 <template #iconUpload> 29 <template #iconUpload>
30 - <Upload  
31 - name="avatar"  
32 - list-type="picture-card"  
33 - class="avatar-uploader"  
34 - :show-upload-list="false"  
35 - :customRequest="customUploadIconPic"  
36 - :before-upload="beforeUploadIconPic"  
37 - >  
38 - <div v-if="iconPic">  
39 - <img :src="iconPic" class="m-auto" />  
40 - <div style="background-color: #ccc; margin-top: 20px">重新上传</div>  
41 - </div>  
42 - <div v-else>  
43 - <div style="margin-top: 20px">  
44 - <LoadingOutlined v-if="loading1" />  
45 - <PlusOutlined v-else style="font-size: 30px" />  
46 - </div>  
47 - <div  
48 - class="ant-upload-text flex"  
49 - style="width: 130px; height: 70px; align-items: center; font-size: 0.5625rem"  
50 - >  
51 - 支持.ICON格式，建议尺寸为16*16px</div 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"
52 > 39 >
53 - </div>  
54 - </Upload> 40 + <div v-if="iconPic">
  41 + <img :src="iconPic" class="m-auto" />
  42 + <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
  43 + </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> 55 </template>
56 <template #bgUpload> 56 <template #bgUpload>
57 - <Upload  
58 - name="avatar"  
59 - list-type="picture-card"  
60 - class="avatar-uploader"  
61 - :show-upload-list="false"  
62 - :customRequest="customUploadBgPic"  
63 - :before-upload="beforeUploadBgPic"  
64 - >  
65 - <img v-if="bgPic" :src="bgPic" alt="avatar" />  
66 - <div v-else>  
67 - <div style="margin-top: 1.875rem">  
68 - <LoadingOutlined v-if="loading2" />  
69 - <PlusOutlined v-else style="font-size: 2.5rem" />  
70 - </div>  
71 - <div  
72 - class="ant-upload-text flex"  
73 - style="width: 280px; height: 130px; align-items: center; font-size: 0.5625rem"  
74 - >  
75 - 支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M</div 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"
76 > 66 >
77 - </div>  
78 - </Upload> 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>
79 </template> 81 </template>
80 -  
81 <template #colorInput="{ model, field }" 82 <template #colorInput="{ model, field }"
82 ><Input disabled v-model:value="model[field]"> 83 ><Input disabled v-model:value="model[field]">
83 <template #prefix> <input type="color" v-model="model[field]" /> </template 84 <template #prefix> <input type="color" v-model="model[field]" /> </template
@@ -97,7 +98,7 @@ @@ -97,7 +98,7 @@
97 98
98 <script lang="ts"> 99 <script lang="ts">
99 import { defineComponent, ref, onMounted, unref } from 'vue'; 100 import { defineComponent, ref, onMounted, unref } from 'vue';
100 - import { Card, Upload, Input } from 'ant-design-vue'; 101 + import { Card, Upload, Input, Spin } from 'ant-design-vue';
101 import { BasicForm, useForm } from '/@/components/Form/index'; 102 import { BasicForm, useForm } from '/@/components/Form/index';
102 import { schemas } from '../config/CVIDraw.config'; 103 import { schemas } from '../config/CVIDraw.config';
103 import { Loading } from '/@/components/Loading/index'; 104 import { Loading } from '/@/components/Loading/index';
@@ -111,10 +112,11 @@ @@ -111,10 +112,11 @@
111 updatePlatForm, 112 updatePlatForm,
112 resetPlateInfo, 113 resetPlateInfo,
113 } from '/@/api/oem/index'; 114 } from '/@/api/oem/index';
114 - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'; 115 + import { PlusOutlined } from '@ant-design/icons-vue';
115 import { useUserStore } from '/@/store/modules/user'; 116 import { useUserStore } from '/@/store/modules/user';
116 import { createLocalStorage } from '/@/utils/cache/index'; 117 import { createLocalStorage } from '/@/utils/cache/index';
117 import { Authority } from '/@/components/Authority'; 118 import { Authority } from '/@/components/Authority';
  119 + import ContentUploadText from './ContentUploadText.vue';
118 120
119 export default defineComponent({ 121 export default defineComponent({
120 components: { 122 components: {
@@ -125,7 +127,8 @@ @@ -125,7 +127,8 @@
125 Input, 127 Input,
126 PlusOutlined, 128 PlusOutlined,
127 Authority, 129 Authority,
128 - LoadingOutlined, 130 + ContentUploadText,
  131 + Spin,
129 }, 132 },
130 setup() { 133 setup() {
131 const loading = ref(false); 134 const loading = ref(false);
  1 +<template>
  2 + <a-row type="flex" align="middle" justify="start">
  3 + <a-col :span="12">
  4 + <slot name="uploadImg"></slot>
  5 + </a-col>
  6 + <a-col :span="12">
  7 + <slot name="uploadText"></slot>
  8 + </a-col>
  9 + </a-row>
  10 +</template>
  11 +
  12 +<script lang="ts" setup></script>
  13 +
  14 +<style lang="less" scoped></style>
1 -<template>  
2 - <div class="card">  
3 - <Card :bordered="false" class="card">  
4 - <BasicForm @register="registerForm">  
5 - <template #qrcode>  
6 - <Upload  
7 - name="avatar"  
8 - list-type="picture-card"  
9 - class="avatar-uploader"  
10 - :show-upload-list="false"  
11 - :customRequest="customUploadqrcodePic"  
12 - :before-upload="beforeUploadqrcodePic"  
13 - >  
14 - <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" />  
15 - <div v-else>  
16 - <div style="margin-top: 1.875rem">  
17 - <LoadingOutlined v-if="loading" />  
18 - <PlusOutlined v-else style="font-size: 2.5rem" />  
19 - </div>  
20 - <div  
21 - class="ant-upload-text flex"  
22 - style="width: 180px; height: 100px; align-items: center; font-size: 0.5625rem"  
23 - >  
24 - 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M</div  
25 - >  
26 - </div>  
27 - </Upload>  
28 - </template>  
29 - <template #customProv>  
30 - <BasicForm @register="registerCustomForm" />  
31 - </template>  
32 - </BasicForm>  
33 - </Card>  
34 - <Loading v-bind="compState" />  
35 - <Authority value="api:yt:enterprise:update:update">  
36 - <a-button  
37 - v-if="isWhereAdmin !== 'CUSTOMER_USER'"  
38 - @click="handleUpdateInfo"  
39 - type="primary"  
40 - class="mt-4"  
41 - >更新基本信息</a-button  
42 - >  
43 - </Authority>  
44 - </div>  
45 -</template>  
46 -  
47 -<script lang="ts">  
48 - import { defineComponent, onMounted, ref, computed } from 'vue';  
49 - import { Card, Upload } from 'ant-design-vue';  
50 - import { BasicForm, useForm } from '/@/components/Form/index';  
51 - import { schemas, provSchemas } from '../config/enterPriseInfo.config';  
52 - import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';  
53 - import { Loading } from '/@/components/Loading';  
54 - import { useMessage } from '/@/hooks/web/useMessage';  
55 - import { useUserStore } from '/@/store/modules/user';  
56 - import { createLocalStorage } from '/@/utils/cache';  
57 - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';  
58 - import { qrcodeUpload } from '/@/api/oem/index';  
59 - import type { FileItem } from '/@/components/Upload/src/typing';  
60 - import type { CityItem, Code } from '../types';  
61 - import { Authority } from '/@/components/Authority';  
62 - import { USER_INFO_KEY } from '/@/enums/cacheEnum';  
63 - import { getAuthCache } from '/@/utils/auth';  
64 -  
65 - export default defineComponent({  
66 - components: {  
67 - Card,  
68 - BasicForm,  
69 - Loading,  
70 - Upload,  
71 - PlusOutlined,  
72 - Authority,  
73 - LoadingOutlined,  
74 - },  
75 - setup() {  
76 - const userInfo: any = getAuthCache(USER_INFO_KEY);  
77 - const isWhereAdmin: any = computed(() => {  
78 - if (userInfo.roles.includes('TENANT_ADMIN')) {  
79 - return 'TENANT_ADMIN';  
80 - } else if (userInfo.roles.includes('CUSTOMER_USER')) {  
81 - return 'CUSTOMER_USER';  
82 - } else {  
83 - return 'SYS_ADMIN';  
84 - }  
85 - });  
86 -  
87 - const loading = ref(false);  
88 - const compState = ref({  
89 - absolute: false,  
90 - loading: false,  
91 - tip: '拼命加载中...',  
92 - });  
93 - const [registerForm, { getFieldsValue, setFieldsValue, validate, clearValidate }] = useForm({  
94 - labelWidth: 80,  
95 - schemas,  
96 - showResetButton: false,  
97 - showSubmitButton: false,  
98 - wrapperCol: {  
99 - span: 12,  
100 - },  
101 - });  
102 -  
103 - const [  
104 - registerCustomForm,  
105 - { getFieldsValue: getNameTown, updateSchema, setFieldsValue: setNameTown },  
106 - ] = useForm({  
107 - labelWidth: 80,  
108 - schemas: provSchemas,  
109 - showResetButton: false,  
110 - showSubmitButton: false,  
111 - compact: true,  
112 - actionColOptions: {  
113 - span: 0,  
114 - },  
115 - });  
116 -  
117 - const { createMessage } = useMessage();  
118 -  
119 - const qrcodePic = ref();  
120 - const customUploadqrcodePic = async ({ file }) => {  
121 - clearValidate('qrcode');  
122 - if (beforeUploadqrcodePic(file)) {  
123 - qrcodePic.value = '';  
124 - loading.value = true;  
125 - const formData = new FormData();  
126 - formData.append('file', file);  
127 - const response = await qrcodeUpload(formData);  
128 - if (response.fileStaticUri) {  
129 - qrcodePic.value = response.fileStaticUri;  
130 - loading.value = false;  
131 - }  
132 - }  
133 - };  
134 - const beforeUploadqrcodePic = (file: FileItem) => {  
135 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
136 - if (!isJpgOrPng) {  
137 - createMessage.error('只能上传图片文件!');  
138 - }  
139 - const isLt2M = (file.size as number) / 1024 / 1024 < 5;  
140 - if (!isLt2M) {  
141 - createMessage.error('图片大小不能超过5MB!');  
142 - }  
143 - return isJpgOrPng && isLt2M;  
144 - };  
145 - // 更新  
146 - const handleUpdateInfo = async () => {  
147 - try {  
148 - const fieldsValue = getFieldsValue();  
149 - const { nameTown } = getNameTown();  
150 - const newFieldValue: any = {  
151 - ...fieldsValue,  
152 - codeTown: nameTown,  
153 - qrCode: qrcodePic.value,  
154 - };  
155 - delete newFieldValue.nameProv;  
156 - delete newFieldValue.nameCity;  
157 - delete newFieldValue.nameCoun;  
158 - delete newFieldValue.nameTown;  
159 - // 表单校验  
160 - let validateArray = [  
161 - 'name',  
162 - 'abbreviation',  
163 - 'officialWebsite',  
164 - 'email',  
165 - 'synopsis',  
166 - 'nameCountry',  
167 - 'address',  
168 - 'contacts',  
169 - 'tel',  
170 - 'id',  
171 - ];  
172 - if (newFieldValue.qrCode == undefined || newFieldValue.qrCode == '') {  
173 - validateArray.push('qrcode');  
174 - } else {  
175 - const findExistIndex = validateArray.findIndex((o) => o == 'qrcode');  
176 - if (findExistIndex !== -1) {  
177 - validateArray.splice(findExistIndex, 1);  
178 - }  
179 - }  
180 - if (newFieldValue.codeTown == undefined) {  
181 - validateArray.push('prov');  
182 - console.log(validateArray);  
183 - } else {  
184 - const findExistIndex1 = validateArray.findIndex((o) => o == 'prov');  
185 - if (findExistIndex1 !== -1) {  
186 - validateArray.splice(findExistIndex1, 1);  
187 - }  
188 - clearValidate('prov');  
189 - }  
190 - const values = await validate(validateArray);  
191 - if (!values) return;  
192 - compState.value.loading = true;  
193 - await updateEnterPriseDetail(newFieldValue);  
194 - createMessage.success('更新信息成功');  
195 - setEnterPriseInfo(newFieldValue);  
196 - } finally {  
197 - compState.value.loading = false;  
198 - }  
199 - };  
200 -  
201 - const userStore = useUserStore();  
202 - const storage = createLocalStorage();  
203 -  
204 - // 设置企业信息  
205 - function setEnterPriseInfo(newFieldValue) {  
206 - // 保存store  
207 - userStore.setEnterPriseInfo(newFieldValue);  
208 - // 保存本地缓存  
209 - storage.set('enterpriseInfo', newFieldValue);  
210 - }  
211 -  
212 - // 地区显示回显和数据联动  
213 - async function updateCityData(  
214 - cities: CityItem[],  
215 - couns: CityItem[],  
216 - towns: CityItem[],  
217 - code: Code  
218 - ) {  
219 - // 加工后端返回字段  
220 -  
221 - cities.forEach((item) => {  
222 - item.label = item.name;  
223 - item.value = item.code;  
224 - });  
225 -  
226 - couns.forEach((item) => {  
227 - item.label = item.name;  
228 - item.value = item.code;  
229 - });  
230 - towns.forEach((item) => {  
231 - item.label = item.name;  
232 - item.value = item.code;  
233 - });  
234 - const { codeProv, codeCity, codeCoun, codeTown } = code;  
235 - updateSchema([  
236 - {  
237 - field: 'nameCity',  
238 - componentProps: ({ formModel }) => {  
239 - return {  
240 - options: cities,  
241 - async onChange(value) {  
242 - if (value === undefined) {  
243 - formModel.nameCoun = undefined; // reset city value  
244 - formModel.nameTown = undefined;  
245 - updateSchema([  
246 - {  
247 - field: 'nameCoun',  
248 - componentProps: {  
249 - options: [],  
250 - },  
251 - },  
252 - {  
253 - field: 'nameTown',  
254 - componentProps: {  
255 - options: [],  
256 - },  
257 - },  
258 - ]);  
259 - } else {  
260 - let couns: CityItem[] = await getAreaList({ parentId: value });  
261 - couns.forEach((item) => {  
262 - item.label = item.name;  
263 - item.value = item.code;  
264 - });  
265 - formModel.nameCoun = undefined; // reset city value  
266 - formModel.nameTown = undefined;  
267 - updateSchema({  
268 - field: 'nameCoun',  
269 - componentProps: {  
270 - // 请选择区  
271 - options: couns,  
272 - async onChange(value) {  
273 - if (value === undefined) {  
274 - formModel.nameTown = undefined;  
275 - } else {  
276 - let towns: CityItem[] = await getAreaList({ parentId: value });  
277 - towns.forEach((item) => {  
278 - item.label = item.name;  
279 - item.value = item.code;  
280 - });  
281 - formModel.nameTown = undefined;  
282 - updateSchema({  
283 - field: 'nameTown',  
284 - componentProps: {  
285 - placeholder: '城镇/街道',  
286 - options: towns,  
287 - },  
288 - });  
289 - }  
290 - },  
291 - },  
292 - });  
293 - }  
294 - },  
295 - };  
296 - },  
297 - },  
298 - {  
299 - field: 'nameCoun',  
300 - componentProps: {  
301 - options: couns,  
302 - async onChange(value) {  
303 - if (value === undefined) {  
304 - setNameTown({  
305 - nameTown: undefined,  
306 - });  
307 - updateSchema({  
308 - field: 'nameTown',  
309 - componentProps: {  
310 - placeholder: '城镇/街道',  
311 - options: [],  
312 - },  
313 - });  
314 - } else {  
315 - let towns = await getAreaList({ parentId: value });  
316 - towns.forEach((item) => {  
317 - item.label = item.name;  
318 - item.value = item.code;  
319 - });  
320 - setNameTown({  
321 - nameTown: undefined,  
322 - });  
323 - updateSchema({  
324 - field: 'nameTown',  
325 - componentProps: {  
326 - placeholder: '城镇/街道',  
327 - options: towns,  
328 - },  
329 - });  
330 - }  
331 - },  
332 - },  
333 - },  
334 - {  
335 - field: 'nameTown',  
336 - componentProps: {  
337 - options: towns,  
338 - },  
339 - },  
340 - ]);  
341 - setNameTown({  
342 - nameProv: codeProv,  
343 - nameCity: codeCity,  
344 - nameCoun: codeCoun,  
345 - nameTown: codeTown,  
346 - });  
347 - }  
348 -  
349 - onMounted(async () => {  
350 - const res = await getEnterPriseDetail();  
351 - if (res.sysTown) {  
352 - const { cities, couns, towns, codeCountry, codeProv, codeCity, codeCoun, codeTown } =  
353 - res.sysTown;  
354 - const code = {  
355 - codeCountry,  
356 - codeProv,  
357 - codeCity,  
358 - codeCoun,  
359 - codeTown,  
360 - };  
361 - updateCityData(cities, couns, towns, code);  
362 - setFieldsValue({ nameCountry: codeCountry });  
363 - }  
364 - setFieldsValue(res);  
365 - qrcodePic.value = res.qrCode;  
366 - });  
367 -  
368 - return {  
369 - registerForm,  
370 - compState,  
371 - qrcodePic,  
372 - handleUpdateInfo,  
373 - customUploadqrcodePic,  
374 - beforeUploadqrcodePic,  
375 - registerCustomForm,  
376 - loading,  
377 - isWhereAdmin,  
378 - };  
379 - },  
380 - });  
381 -</script> 1 +<template>
  2 + <div class="card">
  3 + <Card :bordered="false" class="card">
  4 + <BasicForm @register="registerForm">
  5 + <template #qrcode>
  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="customUploadqrcodePic"
  14 + :before-upload="beforeUploadqrcodePic"
  15 + >
  16 + <img v-if="qrcodePic" :src="qrcodePic" 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格式，建议尺寸为300*300px，大小不超过5M
  25 + </div>
  26 + </template>
  27 + </ContentUploadText>
  28 + </template>
  29 + <template #customProv>
  30 + <BasicForm @register="registerCustomForm" />
  31 + </template>
  32 + </BasicForm>
  33 + </Card>
  34 + <Loading v-bind="compState" />
  35 + <Authority value="api:yt:enterprise:update:update">
  36 + <a-button
  37 + v-if="isWhereAdmin !== 'CUSTOMER_USER'"
  38 + @click="handleUpdateInfo"
  39 + type="primary"
  40 + class="mt-4"
  41 + >更新基本信息</a-button
  42 + >
  43 + </Authority>
  44 + </div>
  45 +</template>
  46 +
  47 +<script lang="ts">
  48 + import { defineComponent, onMounted, ref, computed } from 'vue';
  49 + import { Card, Upload } from 'ant-design-vue';
  50 + import { BasicForm, useForm } from '/@/components/Form/index';
  51 + import { schemas, provSchemas } from '../config/enterPriseInfo.config';
  52 + import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';
  53 + import { Loading } from '/@/components/Loading';
  54 + import { useMessage } from '/@/hooks/web/useMessage';
  55 + import { useUserStore } from '/@/store/modules/user';
  56 + import { createLocalStorage } from '/@/utils/cache';
  57 + import { PlusOutlined } from '@ant-design/icons-vue';
  58 + import { qrcodeUpload } from '/@/api/oem/index';
  59 + import type { FileItem } from '/@/components/Upload/src/typing';
  60 + import type { CityItem, Code } from '../types';
  61 + import { Authority } from '/@/components/Authority';
  62 + import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  63 + import { getAuthCache } from '/@/utils/auth';
  64 + import ContentUploadText from './ContentUploadText.vue';
  65 +
  66 + export default defineComponent({
  67 + components: {
  68 + Card,
  69 + BasicForm,
  70 + Loading,
  71 + Upload,
  72 + PlusOutlined,
  73 + Authority,
  74 + ContentUploadText,
  75 + },
  76 + setup() {
  77 + const userInfo: any = getAuthCache(USER_INFO_KEY);
  78 + const isWhereAdmin: any = computed(() => {
  79 + if (userInfo.roles.includes('TENANT_ADMIN')) {
  80 + return 'TENANT_ADMIN';
  81 + } else if (userInfo.roles.includes('CUSTOMER_USER')) {
  82 + return 'CUSTOMER_USER';
  83 + } else {
  84 + return 'SYS_ADMIN';
  85 + }
  86 + });
  87 +
  88 + const loading = ref(false);
  89 + const compState = ref({
  90 + absolute: false,
  91 + loading: false,
  92 + tip: '拼命加载中...',
  93 + });
  94 + const [registerForm, { getFieldsValue, setFieldsValue, validate, clearValidate }] = useForm({
  95 + labelWidth: 80,
  96 + schemas,
  97 + showResetButton: false,
  98 + showSubmitButton: false,
  99 + wrapperCol: {
  100 + span: 12,
  101 + },
  102 + });
  103 +
  104 + const [
  105 + registerCustomForm,
  106 + { getFieldsValue: getNameTown, updateSchema, setFieldsValue: setNameTown },
  107 + ] = useForm({
  108 + labelWidth: 80,
  109 + schemas: provSchemas,
  110 + showResetButton: false,
  111 + showSubmitButton: false,
  112 + compact: true,
  113 + actionColOptions: {
  114 + span: 0,
  115 + },
  116 + });
  117 +
  118 + const { createMessage } = useMessage();
  119 +
  120 + const qrcodePic = ref();
  121 + const customUploadqrcodePic = async ({ file }) => {
  122 + clearValidate('qrcode');
  123 + if (beforeUploadqrcodePic(file)) {
  124 + qrcodePic.value = '';
  125 + loading.value = true;
  126 + const formData = new FormData();
  127 + formData.append('file', file);
  128 + const response = await qrcodeUpload(formData);
  129 + if (response.fileStaticUri) {
  130 + qrcodePic.value = response.fileStaticUri;
  131 + loading.value = false;
  132 + }
  133 + }
  134 + };
  135 + const beforeUploadqrcodePic = (file: FileItem) => {
  136 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  137 + if (!isJpgOrPng) {
  138 + createMessage.error('只能上传图片文件!');
  139 + }
  140 + const isLt2M = (file.size as number) / 1024 / 1024 < 5;
  141 + if (!isLt2M) {
  142 + createMessage.error('图片大小不能超过5MB!');
  143 + }
  144 + return isJpgOrPng && isLt2M;
  145 + };
  146 + // 更新
  147 + const handleUpdateInfo = async () => {
  148 + try {
  149 + const fieldsValue = getFieldsValue();
  150 + const { nameTown } = getNameTown();
  151 + const newFieldValue: any = {
  152 + ...fieldsValue,
  153 + codeTown: nameTown,
  154 + qrCode: qrcodePic.value,
  155 + };
  156 + delete newFieldValue.nameProv;
  157 + delete newFieldValue.nameCity;
  158 + delete newFieldValue.nameCoun;
  159 + delete newFieldValue.nameTown;
  160 + // 表单校验
  161 + let validateArray = [
  162 + 'name',
  163 + 'abbreviation',
  164 + 'officialWebsite',
  165 + 'email',
  166 + 'synopsis',
  167 + 'nameCountry',
  168 + 'address',
  169 + 'contacts',
  170 + 'tel',
  171 + 'id',
  172 + ];
  173 + if (newFieldValue.qrCode == undefined || newFieldValue.qrCode == '') {
  174 + validateArray.push('qrcode');
  175 + } else {
  176 + const findExistIndex = validateArray.findIndex((o) => o == 'qrcode');
  177 + if (findExistIndex !== -1) {
  178 + validateArray.splice(findExistIndex, 1);
  179 + }
  180 + }
  181 + if (newFieldValue.codeTown == undefined) {
  182 + validateArray.push('prov');
  183 + console.log(validateArray);
  184 + } else {
  185 + const findExistIndex1 = validateArray.findIndex((o) => o == 'prov');
  186 + if (findExistIndex1 !== -1) {
  187 + validateArray.splice(findExistIndex1, 1);
  188 + }
  189 + clearValidate('prov');
  190 + }
  191 + const values = await validate(validateArray);
  192 + if (!values) return;
  193 + compState.value.loading = true;
  194 + await updateEnterPriseDetail(newFieldValue);
  195 + createMessage.success('更新信息成功');
  196 + setEnterPriseInfo(newFieldValue);
  197 + } finally {
  198 + compState.value.loading = false;
  199 + }
  200 + };
  201 +
  202 + const userStore = useUserStore();
  203 + const storage = createLocalStorage();
  204 +
  205 + // 设置企业信息
  206 + function setEnterPriseInfo(newFieldValue) {
  207 + // 保存store
  208 + userStore.setEnterPriseInfo(newFieldValue);
  209 + // 保存本地缓存
  210 + storage.set('enterpriseInfo', newFieldValue);
  211 + }
  212 +
  213 + // 地区显示回显和数据联动
  214 + async function updateCityData(
  215 + cities: CityItem[],
  216 + couns: CityItem[],
  217 + towns: CityItem[],
  218 + code: Code
  219 + ) {
  220 + // 加工后端返回字段
  221 +
  222 + cities.forEach((item) => {
  223 + item.label = item.name;
  224 + item.value = item.code;
  225 + });
  226 +
  227 + couns.forEach((item) => {
  228 + item.label = item.name;
  229 + item.value = item.code;
  230 + });
  231 + towns.forEach((item) => {
  232 + item.label = item.name;
  233 + item.value = item.code;
  234 + });
  235 + const { codeProv, codeCity, codeCoun, codeTown } = code;
  236 + updateSchema([
  237 + {
  238 + field: 'nameCity',
  239 + componentProps: ({ formModel }) => {
  240 + return {
  241 + options: cities,
  242 + async onChange(value) {
  243 + if (value === undefined) {
  244 + formModel.nameCoun = undefined; // reset city value
  245 + formModel.nameTown = undefined;
  246 + updateSchema([
  247 + {
  248 + field: 'nameCoun',
  249 + componentProps: {
  250 + options: [],
  251 + },
  252 + },
  253 + {
  254 + field: 'nameTown',
  255 + componentProps: {
  256 + options: [],
  257 + },
  258 + },
  259 + ]);
  260 + } else {
  261 + let couns: CityItem[] = await getAreaList({ parentId: value });
  262 + couns.forEach((item) => {
  263 + item.label = item.name;
  264 + item.value = item.code;
  265 + });
  266 + formModel.nameCoun = undefined; // reset city value
  267 + formModel.nameTown = undefined;
  268 + updateSchema({
  269 + field: 'nameCoun',
  270 + componentProps: {
  271 + // 请选择区
  272 + options: couns,
  273 + async onChange(value) {
  274 + if (value === undefined) {
  275 + formModel.nameTown = undefined;
  276 + } else {
  277 + let towns: CityItem[] = await getAreaList({ parentId: value });
  278 + towns.forEach((item) => {
  279 + item.label = item.name;
  280 + item.value = item.code;
  281 + });
  282 + formModel.nameTown = undefined;
  283 + updateSchema({
  284 + field: 'nameTown',
  285 + componentProps: {
  286 + placeholder: '城镇/街道',
  287 + options: towns,
  288 + },
  289 + });
  290 + }
  291 + },
  292 + },
  293 + });
  294 + }
  295 + },
  296 + };
  297 + },
  298 + },
  299 + {
  300 + field: 'nameCoun',
  301 + componentProps: {
  302 + options: couns,
  303 + async onChange(value) {
  304 + if (value === undefined) {
  305 + setNameTown({
  306 + nameTown: undefined,
  307 + });
  308 + updateSchema({
  309 + field: 'nameTown',
  310 + componentProps: {
  311 + placeholder: '城镇/街道',
  312 + options: [],
  313 + },
  314 + });
  315 + } else {
  316 + let towns = await getAreaList({ parentId: value });
  317 + towns.forEach((item) => {
  318 + item.label = item.name;
  319 + item.value = item.code;
  320 + });
  321 + setNameTown({
  322 + nameTown: undefined,
  323 + });
  324 + updateSchema({
  325 + field: 'nameTown',
  326 + componentProps: {
  327 + placeholder: '城镇/街道',
  328 + options: towns,
  329 + },
  330 + });
  331 + }
  332 + },
  333 + },
  334 + },
  335 + {
  336 + field: 'nameTown',
  337 + componentProps: {
  338 + options: towns,
  339 + },
  340 + },
  341 + ]);
  342 + setNameTown({
  343 + nameProv: codeProv,
  344 + nameCity: codeCity,
  345 + nameCoun: codeCoun,
  346 + nameTown: codeTown,
  347 + });
  348 + }
  349 +
  350 + onMounted(async () => {
  351 + const res = await getEnterPriseDetail();
  352 + if (res.sysTown) {
  353 + const { cities, couns, towns, codeCountry, codeProv, codeCity, codeCoun, codeTown } =
  354 + res.sysTown;
  355 + const code = {
  356 + codeCountry,
  357 + codeProv,
  358 + codeCity,
  359 + codeCoun,
  360 + codeTown,
  361 + };
  362 + updateCityData(cities, couns, towns, code);
  363 + setFieldsValue({ nameCountry: codeCountry });
  364 + }
  365 + setFieldsValue(res);
  366 + qrcodePic.value = res.qrCode;
  367 + });
  368 +
  369 + return {
  370 + registerForm,
  371 + compState,
  372 + qrcodePic,
  373 + handleUpdateInfo,
  374 + customUploadqrcodePic,
  375 + beforeUploadqrcodePic,
  376 + registerCustomForm,
  377 + loading,
  378 + isWhereAdmin,
  379 + };
  380 + },
  381 + });
  382 +</script>