图片

src/views/order/components/billOfLading.vue

@@ -77,6 +77,33 @@
                   </el-form-item>
                 </div>
               </div>
+              <div class="billBottom-body-middle">
+                <div style="display: flex; justify-content: space-between">
+                  <el-image
+                    v-if="item.createImage"
+                    style="width: 100px; height: 100px"
+                    :src="item.createImage"
+                    :preview-src-list="[item.createImage]"
+                  >
+                  </el-image>
+                  <el-image
+                    v-if="item.outboundImage"
+                    style="width: 100px; height: 100px"
+                    :src="item.outboundImage"
+                    :preview-src-list="[item.outboundImage]"
+                  >
+                  </el-image>
+                  <el-image v-if="item.weighImage" style="width: 100px; height: 100px" :src="item.weighImage" :preview-src-list="[item.weighImage]">
+                  </el-image>
+                  <el-image
+                    v-if="item.customImage"
+                    style="width: 100px; height: 100px"
+                    :src="item.customImage"
+                    :preview-src-list="[item.customImage]"
+                  >
+                  </el-image>
+                </div>
+              </div>
               <div v-show="item.deliveryStatus == 'SUBMITED'" style="text-align: right; color: #409eff" @click="billAdd(item, index)">
                 我来修改/锁定
               </div>
@@ -112,9 +139,9 @@
     </div>
     <div class="buttons">
       <el-button @click="closeWindow()">取消 </el-button>
-      <el-button v-show="billData.orderInfo && billData.orderInfo.orderStatus && billData.orderInfo.orderStatus == 'DELIVERING'" @click="submit"
+      <el-button v-show="billData.orderInfo && billData.orderInfo.orderStatus && billData.orderInfo.orderStatus == 'DELIVERING'" @click="submit">
-        >订单确认</el-button
+        订单确认
-      >
+      </el-button>
     </div>
     <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">
@@ -128,6 +155,29 @@
         <el-form-item label="提货车牌号码" prop="plateNumber">
           <el-input v-model="billAddData.plateNumber"></el-input>
         </el-form-item>
+        <el-form-item label="上传提货证明" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
+          <el-upload
+            :action="uploadUrl"
+            :data="{
+              ossKey: 'xingyou',
+              pathKey: 'other',
+              encrypt: 'PUBLIC',
+              code: 'A003'
+            }"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            :on-success="handleSuccess"
+            :before-upload="beforeHandle"
+            :limit="1"
+            :file-list="fileList"
+          >
+            <i class="el-icon-plus"></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">
         <el-button type="info" @click="dialogBillAdd = false">取 消</el-button>
@@ -147,6 +197,83 @@
         <el-button type="primary" @click="billdelivery()">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="提货单信息" width="800px" :visible.sync="imageAdd">
+      <el-form :model="billAddData" style="display: flex; justify-content: space-around">
+        <el-form-item label="出库单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
+          <el-upload
+            :action="uploadUrl"
+            :data="{
+              ossKey: 'xingyou',
+              pathKey: 'other',
+              encrypt: 'PUBLIC',
+              code: 'A003'
+            }"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreviewOutboundImage"
+            :on-remove="handleRemoveOutboundImage"
+            :on-success="handleSuccessOutboundImage"
+            :before-upload="beforeHandle"
+            :limit="1"
+            :file-list="fileList"
+          >
+            <i class="el-icon-plus"></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
+            :action="uploadUrl"
+            :data="{
+              ossKey: 'xingyou',
+              pathKey: 'other',
+              encrypt: 'PUBLIC',
+              code: 'A003'
+            }"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreviewWeighImage"
+            :on-remove="handleRemoveWeighImage"
+            :on-success="handleSuccessWeighImage"
+            :before-upload="beforeHandle"
+            :limit="1"
+            :file-list="fileList"
+          >
+            <i class="el-icon-plus"></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
+            :action="uploadUrl"
+            :data="{
+              ossKey: 'xingyou',
+              pathKey: 'other',
+              encrypt: 'PUBLIC',
+              code: 'A003'
+            }"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreviewCustomImage"
+            :on-remove="handleRemoveCustomImage"
+            :on-success="handleSuccessCustomImage"
+            :before-upload="beforeHandle"
+            :limit="1"
+            :file-list="fileList"
+          >
+            <i class="el-icon-plus"></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">
+        <el-button type="info" @click="imageAdd = false">取 消</el-button>
+        <el-button type="primary" @click="imageAddSave()">提交</el-button>
+      </div>
+    </el-dialog>
   </el-drawer>
 </template>
 
@@ -156,6 +283,8 @@ import order from 'api/order.js'
 import refineryInfoServe from 'api/refineryInfo.js'
 
 import autocomplete from 'components/autocomplete/index.vue'
+import utils from 'utils/encode'
+const JSESSIONID = utils.uuid()
 export default {
   components: {
     autocomplete
@@ -214,7 +343,17 @@ export default {
         driverName: [{ required: true, message: '请输入提货人', trigger: 'blur' }],
         identityCard: [{ required: true, message: '请输入提货人身份证号', trigger: 'blur' }],
         plateNumber: [{ required: true, message: '请输入提货车牌号', trigger: 'blur' }]
-      }
+      },
+      uploadUrl: process.env.VUE_APP_ENV === 'development' ? '/api/oil-oss/obejct/uploadFile' : '/adminapi/oil-oss/obejct/uploadFile',
+      imgDialog: false,
+      headers: {
+        dataSources: 'WEB',
+        Authorization: localStorage.getItem('businessToken'),
+        JSESSIONID: JSESSIONID,
+        token: utils.bcrypt(JSESSIONID)
+      },
+      fileList: [],
+      imageAdd: false
     }
   },
   created() {},
@@ -241,18 +380,19 @@ export default {
       } else if (e.deliveryStatus == 'PLATENUM_LOCKED') {
         this.billAddData = JSON.parse(JSON.stringify(e))
         this.billAddData.deliveryStatus = 'PLATENUM_SUCCESS'
-        this.$confirm('是否确认?', '提示', { type: 'info' }).then(() => {
+        this.imageAdd = true
-          console.log(this.billData.list, index, this.billAddData, 'aaaaaaaaaaa')
+        // this.$confirm('是否确认?', '提示', { type: 'info' }).then(() => {
-          order.update(this.billAddData).then(res => {
+        //   console.log(this.billData.list, index, this.billAddData, 'aaaaaaaaaaa')
-            if (res.code == 20000) {
+        //   order.update(this.billAddData).then(res => {
-              this.billListMeth()
+        //     if (res.code == 20000) {
-              // this.$set(this.billData.list,index,this.billAddData)
+        //       this.billListMeth()
-              this.$message.success(res.msg)
+        //       // this.$set(this.billData.list,index,this.billAddData)
-              this.dialogBillAdd = false
+        //       this.$message.success(res.msg)
-              this.$emit('closeWindow')
+        //       this.dialogBillAdd = false
-            }
+        //       this.$emit('closeWindow')
-          })
+        //     }
-        })
+        //   })
+        // })
       }
     },
     orderTagType(val) {
@@ -285,6 +425,10 @@ export default {
     },
     //创建修改提货单
     billAddSave(e) {
+      if (!this.billAddData.createImage) {
+        this.$message.error('请上传图片!')
+        return false
+      }
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (!e) {
@@ -394,6 +538,106 @@ export default {
       this.$emit('closeWindow')
       this.form = {}
       this.controlWindows.bill = false
+    },
+    imageAddSave() {
+      console.log(this.billData.list, this.billAddData, 'aaaaaaaaaaa')
+      if (!this.billAddData.outboundImage || !this.billAddData.weighImage || !this.billAddData.customImage) {
+        this.$message.error('请上传图片!')
+        return false
+      }
+      order.update(this.billAddData).then(res => {
+        if (res.code == 20000) {
+          this.billListMeth()
+          this.$message.success(res.msg)
+          this.imageAdd = false
+          this.$emit('closeWindow')
+        }
+      })
+    },
+    beforeHandle(file) {
+      if (file.type.indexOf('image/') === -1) {
+        this.$message.error('上传的文件不是图片格式!')
+        return false
+      } else if (file.size / 1024 / 1024 > 5) {
+        this.$message.error('上传图片大小不能超过 5MB!')
+        return false
+      }
+      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) {
+      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 = ''
+    },
+    // 上传成功
+    handleSuccessOutboundImage(response, file, fileList) {
+      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) {
+      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) {
+      if (response.code !== 20000) {
+        this.$message.error(response.msg)
+        this.fileList = []
+        return
+      }
+      this.billAddData.customImage = response.data.publicUrl
     }
   }
 }