1、完善项目

2、完善合同
3、完善费用项
4、司机管理对接OCR
5、完善运输计划
6、完善临时额度

src/components/image-upload-field/main.vue

@@ -4,11 +4,13 @@
       :class="[`${classPrefix}-uploader`, { [`${classPrefix}-uploader--large`]: large }]"
       action="/api/blade-resource/oss/endpoint/put-file"
       name="file"
-      :headers="headers"
+      :headers="uploadHeaders"
       :show-file-list="false"
       :disabled="readonly"
       :before-upload="beforeUpload"
+      :on-progress="handleProgress"
       :on-success="handleSuccess"
+      :on-error="handleError"
     >
       <img v-if="value" :src="value" :class="`${classPrefix}-uploader__image`" />
       <div v-else :class="`${classPrefix}-uploader__empty`">{{ emptyText }}</div>
@@ -24,11 +26,13 @@
         :class="`${classPrefix}-upload-card__uploader`"
         action="/api/blade-resource/oss/endpoint/put-file"
         name="file"
-        :headers="headers"
+        :headers="uploadHeaders"
         :show-file-list="false"
         :disabled="readonly"
         :before-upload="beforeUpload"
+        :on-progress="handleProgress"
         :on-success="handleSuccess"
+        :on-error="handleError"
       >
         <img v-if="value" :src="value" :class="`${classPrefix}-upload-card__image`" />
         <div v-else :class="`${classPrefix}-upload-card__empty`">{{ emptyText }}</div>
@@ -38,6 +42,9 @@
 </template>
 
 <script>
+import { ElLoading } from 'element-plus';
+import { getUploadHeaders } from '@/utils/upload';
+
 export default {
   name: 'ImageUploadField',
   props: {
@@ -64,15 +71,54 @@ export default {
       default: '点击上传',
     },
   },
+  computed: {
+    uploadHeaders() {
+      return getUploadHeaders(this.headers || {});
+    },
+  },
   emits: ['success'],
+  data() {
+    return {
+      uploadLoading: null,
+    };
+  },
+  beforeUnmount() {
+    this.closeUploadLoading();
+  },
   methods: {
+    showUploadLoading() {
+      if (this.uploadLoading) {
+        return;
+      }
+      this.uploadLoading = ElLoading.service({
+        lock: true,
+        text: '上传中',
+        background: 'rgba(255, 255, 255, 0.7)',
+      });
+    },
+    closeUploadLoading() {
+      if (!this.uploadLoading) {
+        return;
+      }
+      this.uploadLoading.close();
+      this.uploadLoading = null;
+    },
+    handleProgress() {
+      this.showUploadLoading();
+    },
     handleSuccess(res) {
+      this.closeUploadLoading();
       if (res.code === 200 && res.data) {
-        this.$emit('success', res.data.link || res.data.url || res.data.domain || '');
+        this.$message.success('上传完成');
+        this.$emit('success', res.data.link || res.data.url || res.data.domain || '', res.data);
       } else {
         this.$message.error(res.msg || '上传失败');
       }
     },
+    handleError() {
+      this.closeUploadLoading();
+      this.$message.error('上传失败');
+    },
     beforeUpload(file) {
       const validType = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp'].includes(file.type);
       const validSize = file.size / 1024 / 1024 < 5;
@@ -82,7 +128,11 @@ export default {
       if (!validSize) {
         this.$message.error('图片大小不能超过 5MB');
       }
-      return validType && validSize;
+      const valid = validType && validSize;
+      if (valid) {
+        this.showUploadLoading();
+      }
+      return valid;
     },
   },
 };