Commit 9386a4a15f2eb29c669ed821717c2c959360c1be

Authored by fengtao
1 parent 8c740edc

fix:修改设备和设备配置上传图片加loading

@@ -5,15 +5,16 @@ @@ -5,15 +5,16 @@
5 <template #iconSelect> 5 <template #iconSelect>
6 <Upload 6 <Upload
7 name="avatar" 7 name="avatar"
  8 + :show-upload-list="false"
8 list-type="picture-card" 9 list-type="picture-card"
9 class="avatar-uploader" 10 class="avatar-uploader"
10 - :show-upload-list="false"  
11 :customRequest="customUpload" 11 :customRequest="customUpload"
12 :before-upload="beforeUpload" 12 :before-upload="beforeUpload"
13 > 13 >
14 <img v-if="devicePic" :src="devicePic" alt="avatar" /> 14 <img v-if="devicePic" :src="devicePic" alt="avatar" />
15 <div v-else> 15 <div v-else>
16 - <PlusOutlined /> 16 + <loading-outlined v-if="loading"></loading-outlined>
  17 + <PlusOutlined v-else />
17 <div class="ant-upload-text">图片上传</div> 18 <div class="ant-upload-text">图片上传</div>
18 </div> 19 </div>
19 </Upload> 20 </Upload>
@@ -85,7 +86,7 @@ @@ -85,7 +86,7 @@
85 import { step1Schemas } from '../../config/data'; 86 import { step1Schemas } from '../../config/data';
86 import { useScript } from '/@/hooks/web/useScript'; 87 import { useScript } from '/@/hooks/web/useScript';
87 import { Input, Upload, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue'; 88 import { Input, Upload, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue';
88 - import { EnvironmentTwoTone, PlusOutlined } from '@ant-design/icons-vue'; 89 + import { EnvironmentTwoTone, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
89 import { upload } from '/@/api/oss/ossFileUploader'; 90 import { upload } from '/@/api/oss/ossFileUploader';
90 import { FileItem } from '/@/components/Upload/src/typing'; 91 import { FileItem } from '/@/components/Upload/src/typing';
91 import { BAI_DU_MAP_URL } from '/@/utils/fnUtils'; 92 import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
@@ -105,6 +106,7 @@ @@ -105,6 +106,7 @@
105 FormItem: Form.Item, 106 FormItem: Form.Item,
106 Row, 107 Row,
107 Col, 108 Col,
  109 + LoadingOutlined,
108 }, 110 },
109 props: { 111 props: {
110 isUpdate: { 112 isUpdate: {
@@ -114,6 +116,7 @@ @@ -114,6 +116,7 @@
114 emits: ['next'], 116 emits: ['next'],
115 setup(props, { emit }) { 117 setup(props, { emit }) {
116 const devicePic = ref(''); 118 const devicePic = ref('');
  119 + const loading = ref(false);
117 120
118 const [register, { validate, resetFields, setFieldsValue, getFieldsValue, updateSchema }] = 121 const [register, { validate, resetFields, setFieldsValue, getFieldsValue, updateSchema }] =
119 useForm({ 122 useForm({
@@ -140,11 +143,13 @@ @@ -140,11 +143,13 @@
140 // 图片上传 143 // 图片上传
141 async function customUpload({ file }) { 144 async function customUpload({ file }) {
142 if (beforeUpload(file)) { 145 if (beforeUpload(file)) {
  146 + loading.value = true;
143 const formData = new FormData(); 147 const formData = new FormData();
144 formData.append('file', file); 148 formData.append('file', file);
145 const response = await upload(formData); 149 const response = await upload(formData);
146 if (response.fileStaticUri) { 150 if (response.fileStaticUri) {
147 devicePic.value = response.fileStaticUri; 151 devicePic.value = response.fileStaticUri;
  152 + loading.value = false;
148 } 153 }
149 } 154 }
150 } 155 }
@@ -371,6 +376,7 @@ @@ -371,6 +376,7 @@
371 dataSource, 376 dataSource,
372 debounceSearch, 377 debounceSearch,
373 generateSN, 378 generateSN,
  379 + loading,
374 }; 380 };
375 }, 381 },
376 }); 382 });
@@ -20,7 +20,8 @@ @@ -20,7 +20,8 @@
20 style="width: 6.25rem; height: 6.25rem" 20 style="width: 6.25rem; height: 6.25rem"
21 /> 21 />
22 <div v-else> 22 <div v-else>
23 - <PlusOutlined /> 23 + <loading-outlined v-if="loading"></loading-outlined>
  24 + <PlusOutlined v-else />
24 <div class="ant-upload-text">图片上传</div> 25 <div class="ant-upload-text">图片上传</div>
25 </div> 26 </div>
26 </Upload> 27 </Upload>
@@ -37,7 +38,7 @@ @@ -37,7 +38,7 @@
37 import { Select, Input, Divider } from 'ant-design-vue'; 38 import { Select, Input, Divider } from 'ant-design-vue';
38 import { uploadApi } from '/@/api/personal/index'; 39 import { uploadApi } from '/@/api/personal/index';
39 import { Upload } from 'ant-design-vue'; 40 import { Upload } from 'ant-design-vue';
40 - import { PlusOutlined } from '@ant-design/icons-vue'; 41 + import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
41 import { useMessage } from '/@/hooks/web/useMessage'; 42 import { useMessage } from '/@/hooks/web/useMessage';
42 import type { FileItem } from '/@/components/Upload/src/typing'; 43 import type { FileItem } from '/@/components/Upload/src/typing';
43 44
@@ -50,9 +51,12 @@ @@ -50,9 +51,12 @@
50 [Divider.name]: Divider, 51 [Divider.name]: Divider,
51 Upload, 52 Upload,
52 PlusOutlined, 53 PlusOutlined,
  54 + LoadingOutlined,
53 }, 55 },
54 emits: ['next', 'resetFunc', 'register'], 56 emits: ['next', 'resetFunc', 'register'],
55 setup(_, { emit }) { 57 setup(_, { emit }) {
  58 + const loading = ref(false);
  59 +
56 const { createMessage } = useMessage(); 60 const { createMessage } = useMessage();
57 const peresonalPic = ref(''); 61 const peresonalPic = ref('');
58 62
@@ -75,11 +79,14 @@ @@ -75,11 +79,14 @@
75 }; 79 };
76 const customUploadqrcodePic = async ({ file }) => { 80 const customUploadqrcodePic = async ({ file }) => {
77 if (beforeUploadqrcodePic(file)) { 81 if (beforeUploadqrcodePic(file)) {
  82 + loading.value = true;
  83 +
78 const formData = new FormData(); 84 const formData = new FormData();
79 formData.append('file', file); 85 formData.append('file', file);
80 const response = await uploadApi(formData); 86 const response = await uploadApi(formData);
81 if (response.fileStaticUri) { 87 if (response.fileStaticUri) {
82 peresonalPic.value = response.fileStaticUri; 88 peresonalPic.value = response.fileStaticUri;
  89 + loading.value = false;
83 } 90 }
84 } 91 }
85 }; 92 };
@@ -122,6 +129,7 @@ @@ -122,6 +129,7 @@
122 beforeUploadqrcodePic, 129 beforeUploadqrcodePic,
123 customUploadqrcodePic, 130 customUploadqrcodePic,
124 getStep1Func, 131 getStep1Func,
  132 + loading,
125 }; 133 };
126 }, 134 },
127 }); 135 });