Showing
1 changed file
with
14 additions
and
5 deletions
... | ... | @@ -19,7 +19,8 @@ |
19 | 19 | > |
20 | 20 | <img v-if="tenantLogo" :src="tenantLogo" alt="avatar" /> |
21 | 21 | <div v-else> |
22 | - <plus-outlined /> | |
22 | + <loading-outlined v-if="loading"></loading-outlined> | |
23 | + <plus-outlined v-else /> | |
23 | 24 | <div class="ant-upload-text">上传</div> |
24 | 25 | </div> |
25 | 26 | </Upload> |
... | ... | @@ -35,15 +36,17 @@ |
35 | 36 | import { createOrEditCameraManage } from '/@/api/camera/cameraManager'; |
36 | 37 | import { message, Upload } from 'ant-design-vue'; |
37 | 38 | import { useMessage } from '/@/hooks/web/useMessage'; |
38 | - import { PlusOutlined } from '@ant-design/icons-vue'; | |
39 | + import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'; | |
39 | 40 | import { upload } from '/@/api/oss/ossFileUploader'; |
40 | 41 | import { FileItem } from '/@/components/Upload/src/typing'; |
41 | 42 | |
42 | 43 | export default defineComponent({ |
43 | 44 | name: 'ContactDrawer', |
44 | - components: { BasicDrawer, BasicForm, Upload, PlusOutlined }, | |
45 | + components: { BasicDrawer, BasicForm, Upload, PlusOutlined, LoadingOutlined }, | |
45 | 46 | emits: ['success', 'register'], |
46 | 47 | setup(_, { emit }) { |
48 | + const loading = ref(false); | |
49 | + | |
47 | 50 | const isUpdate = ref(true); |
48 | 51 | const editId = ref(''); |
49 | 52 | const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ |
... | ... | @@ -70,11 +73,14 @@ |
70 | 73 | |
71 | 74 | async function customUpload({ file }) { |
72 | 75 | if (beforeUpload(file)) { |
76 | + loading.value = true; | |
77 | + | |
73 | 78 | const formData = new FormData(); |
74 | 79 | formData.append('file', file); |
75 | 80 | const response = await upload(formData); |
76 | 81 | if (response.fileStaticUri) { |
77 | 82 | tenantLogo.value = response.fileStaticUri; |
83 | + loading.value = true; | |
78 | 84 | } |
79 | 85 | } |
80 | 86 | } |
... | ... | @@ -94,6 +100,7 @@ |
94 | 100 | const getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置')); |
95 | 101 | |
96 | 102 | async function handleSubmit() { |
103 | + setDrawerProps({ confirmLoading: true }); | |
97 | 104 | try { |
98 | 105 | const { createMessage } = useMessage(); |
99 | 106 | const values = await validate(); |
... | ... | @@ -105,7 +112,6 @@ |
105 | 112 | } else { |
106 | 113 | delete values.id; |
107 | 114 | } |
108 | - setDrawerProps({ confirmLoading: true }); | |
109 | 115 | let saveMessage = '添加成功'; |
110 | 116 | let updateMessage = '修改成功'; |
111 | 117 | await createOrEditCameraManage(values); |
... | ... | @@ -113,7 +119,9 @@ |
113 | 119 | emit('success'); |
114 | 120 | createMessage.success(unref(isUpdate) ? updateMessage : saveMessage); |
115 | 121 | } finally { |
116 | - setDrawerProps({ confirmLoading: false }); | |
122 | + setTimeout(() => { | |
123 | + setDrawerProps({ confirmLoading: false }); | |
124 | + }, 300); | |
117 | 125 | } |
118 | 126 | } |
119 | 127 | |
... | ... | @@ -125,6 +133,7 @@ |
125 | 133 | customUpload, |
126 | 134 | beforeUpload, |
127 | 135 | tenantLogo, |
136 | + loading, | |
128 | 137 | }; |
129 | 138 | }, |
130 | 139 | }); | ... | ... |