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 | }); | ... | ... |