From 3ebcb2014152d48116f9317e11fcb7ee8a976cde Mon Sep 17 00:00:00 2001
From: zhangyouji <zhangyouji@sdxkhlw.cn>
Date: Wed, 7 Jun 2023 16:41:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/components/billOfLading.vue | 136 ++++++++------------
 1 file changed, 51 insertions(+), 85 deletions(-)

diff --git a/src/views/order/components/billOfLading.vue b/src/views/order/components/billOfLading.vue
index bf8d79c..138f11d 100644
--- a/src/views/order/components/billOfLading.vue
+++ b/src/views/order/components/billOfLading.vue
@@ -142,7 +142,7 @@
         订单确认
       </el-button>
     </div>
-    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="提货单信息" width="400px" :visible.sync="dialogBillAdd">
+    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="提货单信息确认" width="400px" :visible.sync="dialogBillAdd">
       <el-form v-if="dialogBillAdd" :model="billAddData" ref="form" :rules="rules">
         <el-form-item label="预约提货量" prop="preDeliveryQuantity"> <el-input v-model="billAddData.preDeliveryQuantity"></el-input>吨 </el-form-item>
         <el-form-item label="提货人" prop="driverName">
@@ -156,6 +156,7 @@
         </el-form-item>
         <el-form-item label="上传提货证明" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
           <el-upload
+            class="avatar-uploader"
             :action="uploadUrl"
             :data="{
               ossKey: 'xingyou',
@@ -163,19 +164,13 @@
               encrypt: 'PUBLIC',
               code: 'A003'
             }"
-            list-type="picture-card"
-            :on-preview="handlePictureCardPreview"
-            :on-remove="handleRemove"
+            :show-file-list="false"
             :on-success="handleSuccess"
             :before-upload="beforeHandle"
-            :limit="1"
-            :file-list="fileList"
           >
-            <i class="el-icon-plus"></i>
+            <img v-if="billAddData.createImage" :src="billAddData.createImage" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
-          <el-dialog :visible.sync="imgDialog" :modal="false">
-            <img width="100%" :src="billAddData.createImage" alt="" />
-          </el-dialog>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -201,6 +196,7 @@
       <el-form :model="billAddData" style="display: flex; justify-content: space-around">
         <el-form-item label="出库单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
           <el-upload
+            class="avatar-uploader"
             :action="uploadUrl"
             :data="{
               ossKey: 'xingyou',
@@ -208,22 +204,17 @@
               encrypt: 'PUBLIC',
               code: 'A003'
             }"
-            list-type="picture-card"
-            :on-preview="handlePictureCardPreviewOutboundImage"
-            :on-remove="handleRemoveOutboundImage"
+            :show-file-list="false"
             :on-success="handleSuccessOutboundImage"
             :before-upload="beforeHandle"
-            :limit="1"
-            :file-list="fileList"
           >
-            <i class="el-icon-plus"></i>
+            <img v-if="billAddData.outboundImage" :src="billAddData.outboundImage" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
-          <el-dialog :visible.sync="imgDialog" :modal="false">
-            <img width="100%" :src="billAddData.outboundImage" alt="" />
-          </el-dialog>
         </el-form-item>
         <el-form-item label="过磅单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
           <el-upload
+            class="avatar-uploader"
             :action="uploadUrl"
             :data="{
               ossKey: 'xingyou',
@@ -231,22 +222,17 @@
               encrypt: 'PUBLIC',
               code: 'A003'
             }"
-            list-type="picture-card"
-            :on-preview="handlePictureCardPreviewWeighImage"
-            :on-remove="handleRemoveWeighImage"
+            :show-file-list="false"
             :on-success="handleSuccessWeighImage"
             :before-upload="beforeHandle"
-            :limit="1"
-            :file-list="fileList"
           >
-            <i class="el-icon-plus"></i>
+            <img v-if="billAddData.weighImage" :src="billAddData.weighImage" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
-          <el-dialog :visible.sync="imgDialog" :modal="false">
-            <img width="100%" :src="billAddData.weighImage" alt="" />
-          </el-dialog>
         </el-form-item>
         <el-form-item label="客户确认单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
           <el-upload
+            class="avatar-uploader"
             :action="uploadUrl"
             :data="{
               ossKey: 'xingyou',
@@ -254,19 +240,13 @@
               encrypt: 'PUBLIC',
               code: 'A003'
             }"
-            list-type="picture-card"
-            :on-preview="handlePictureCardPreviewCustomImage"
-            :on-remove="handleRemoveCustomImage"
+            :show-file-list="false"
             :on-success="handleSuccessCustomImage"
             :before-upload="beforeHandle"
-            :limit="1"
-            :file-list="fileList"
           >
-            <i class="el-icon-plus"></i>
+            <img v-if="billAddData.customImage" :src="billAddData.customImage" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
-          <el-dialog :visible.sync="imgDialog" :modal="false">
-            <img width="100%" :src="billAddData.customImage" alt="" />
-          </el-dialog>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -323,7 +303,9 @@ export default {
       form: {
         actAmount: 0
       },
-      billAddData: {},
+      billAddData: {
+        createImage: ''
+      },
       dialogBillAdd: false,
       productNameList: [],
       refineryList: [],
@@ -579,76 +561,36 @@ export default {
       return true
     },
 
-    // img大图
-    handlePictureCardPreview(file) {
-      this.billAddData.createImage = file.url
-      this.imgDialog = true
-    },
-    // img remove
-    handleRemove(file, fileList) {
-      this.billAddData.createImage = ''
-    },
     // 上传成功
-    handleSuccess(response, file, fileList) {
+    handleSuccess(response, file) {
       if (response.code !== 20000) {
         this.$message.error(response.msg)
-        this.fileList = []
         return
       }
-      this.billAddData.createImage = response.data.publicUrl
-    },
-    // OutboundImage   img大图
-    handlePictureCardPreviewOutboundImage(file) {
-      this.billAddData.outboundImage = file.url
-      this.imgDialog = true
-    },
-    // img remove
-    handleRemoveOutboundImage(file, fileList) {
-      this.billAddData.outboundImage = ''
+      // this.billAddData.createImage = response.data.publicUrl
+      this.$set(this.billAddData, 'createImage', response.data.publicUrl)
     },
+
     // 上传成功
-    handleSuccessOutboundImage(response, file, fileList) {
+    handleSuccessOutboundImage(response, file) {
       if (response.code !== 20000) {
         this.$message.error(response.msg)
-        this.fileList = []
         return
       }
       this.billAddData.outboundImage = response.data.publicUrl
     },
-
-    // WeighImage  img大图
-    handlePictureCardPreviewWeighImage(file) {
-      this.billAddData.weighImage = file.url
-      this.imgDialog = true
-    },
-    // img remove
-    handleRemoveWeighImage(file, fileList) {
-      this.billAddData.weighImage = ''
-    },
     // 上传成功
-    handleSuccessWeighImage(response, file, fileList) {
+    handleSuccessWeighImage(response, file) {
       if (response.code !== 20000) {
         this.$message.error(response.msg)
-        this.fileList = []
         return
       }
       this.billAddData.weighImage = response.data.publicUrl
     },
-
-    // customImage  img大图
-    handlePictureCardPreviewCustomImage(file) {
-      this.billAddData.customImage = file.url
-      this.imgDialog = true
-    },
-    // img remove
-    handleRemoveCustomImage(file, fileList) {
-      this.billAddData.customImage = ''
-    },
     // 上传成功
-    handleSuccessCustomImage(response, file, fileList) {
+    handleSuccessCustomImage(response, file) {
       if (response.code !== 20000) {
         this.$message.error(response.msg)
-        this.fileList = []
         return
       }
       this.billAddData.customImage = response.data.publicUrl
@@ -738,4 +680,28 @@ export default {
 ::v-deep .billBottom .el-form-item__content {
   line-height: 20px;
 }
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  border: 1px dashed #c0ccda;
+  text-align: center;
+}
+.avatar {
+  width: 148px;
+  height: 148px;
+  display: block;
+}
 </style>