pull/18/head
zhangyouji 1 year ago
parent c7f2b72a55
commit 3ebcb20141
  1. 136
      src/views/order/components/billOfLading.vue

@ -142,7 +142,7 @@
订单确认 订单确认
</el-button> </el-button>
</div> </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 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="preDeliveryQuantity"> <el-input v-model="billAddData.preDeliveryQuantity"></el-input> </el-form-item>
<el-form-item label="提货人" prop="driverName"> <el-form-item label="提货人" prop="driverName">
@ -156,6 +156,7 @@
</el-form-item> </el-form-item>
<el-form-item label="上传提货证明" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]"> <el-form-item label="上传提货证明" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
<el-upload <el-upload
class="avatar-uploader"
:action="uploadUrl" :action="uploadUrl"
:data="{ :data="{
ossKey: 'xingyou', ossKey: 'xingyou',
@ -163,19 +164,13 @@
encrypt: 'PUBLIC', encrypt: 'PUBLIC',
code: 'A003' code: 'A003'
}" }"
list-type="picture-card" :show-file-list="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess" :on-success="handleSuccess"
:before-upload="beforeHandle" :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-upload>
<el-dialog :visible.sync="imgDialog" :modal="false">
<img width="100%" :src="billAddData.createImage" alt="" />
</el-dialog>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -201,6 +196,7 @@
<el-form :model="billAddData" style="display: flex; justify-content: space-around"> <el-form :model="billAddData" style="display: flex; justify-content: space-around">
<el-form-item label="出库单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]"> <el-form-item label="出库单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
<el-upload <el-upload
class="avatar-uploader"
:action="uploadUrl" :action="uploadUrl"
:data="{ :data="{
ossKey: 'xingyou', ossKey: 'xingyou',
@ -208,22 +204,17 @@
encrypt: 'PUBLIC', encrypt: 'PUBLIC',
code: 'A003' code: 'A003'
}" }"
list-type="picture-card" :show-file-list="false"
:on-preview="handlePictureCardPreviewOutboundImage"
:on-remove="handleRemoveOutboundImage"
:on-success="handleSuccessOutboundImage" :on-success="handleSuccessOutboundImage"
:before-upload="beforeHandle" :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-upload>
<el-dialog :visible.sync="imgDialog" :modal="false">
<img width="100%" :src="billAddData.outboundImage" alt="" />
</el-dialog>
</el-form-item> </el-form-item>
<el-form-item label="过磅单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]"> <el-form-item label="过磅单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
<el-upload <el-upload
class="avatar-uploader"
:action="uploadUrl" :action="uploadUrl"
:data="{ :data="{
ossKey: 'xingyou', ossKey: 'xingyou',
@ -231,22 +222,17 @@
encrypt: 'PUBLIC', encrypt: 'PUBLIC',
code: 'A003' code: 'A003'
}" }"
list-type="picture-card" :show-file-list="false"
:on-preview="handlePictureCardPreviewWeighImage"
:on-remove="handleRemoveWeighImage"
:on-success="handleSuccessWeighImage" :on-success="handleSuccessWeighImage"
:before-upload="beforeHandle" :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-upload>
<el-dialog :visible.sync="imgDialog" :modal="false">
<img width="100%" :src="billAddData.weighImage" alt="" />
</el-dialog>
</el-form-item> </el-form-item>
<el-form-item label="客户确认单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]"> <el-form-item label="客户确认单" :rules="[{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]">
<el-upload <el-upload
class="avatar-uploader"
:action="uploadUrl" :action="uploadUrl"
:data="{ :data="{
ossKey: 'xingyou', ossKey: 'xingyou',
@ -254,19 +240,13 @@
encrypt: 'PUBLIC', encrypt: 'PUBLIC',
code: 'A003' code: 'A003'
}" }"
list-type="picture-card" :show-file-list="false"
:on-preview="handlePictureCardPreviewCustomImage"
:on-remove="handleRemoveCustomImage"
:on-success="handleSuccessCustomImage" :on-success="handleSuccessCustomImage"
:before-upload="beforeHandle" :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-upload>
<el-dialog :visible.sync="imgDialog" :modal="false">
<img width="100%" :src="billAddData.customImage" alt="" />
</el-dialog>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -323,7 +303,9 @@ export default {
form: { form: {
actAmount: 0 actAmount: 0
}, },
billAddData: {}, billAddData: {
createImage: ''
},
dialogBillAdd: false, dialogBillAdd: false,
productNameList: [], productNameList: [],
refineryList: [], refineryList: [],
@ -579,76 +561,36 @@ export default {
return true 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) { if (response.code !== 20000) {
this.$message.error(response.msg) this.$message.error(response.msg)
this.fileList = []
return return
} }
this.billAddData.createImage = response.data.publicUrl // this.billAddData.createImage = response.data.publicUrl
}, this.$set(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) { handleSuccessOutboundImage(response, file) {
if (response.code !== 20000) { if (response.code !== 20000) {
this.$message.error(response.msg) this.$message.error(response.msg)
this.fileList = []
return return
} }
this.billAddData.outboundImage = response.data.publicUrl 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) { if (response.code !== 20000) {
this.$message.error(response.msg) this.$message.error(response.msg)
this.fileList = []
return return
} }
this.billAddData.weighImage = response.data.publicUrl 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) { if (response.code !== 20000) {
this.$message.error(response.msg) this.$message.error(response.msg)
this.fileList = []
return return
} }
this.billAddData.customImage = response.data.publicUrl this.billAddData.customImage = response.data.publicUrl
@ -738,4 +680,28 @@ export default {
::v-deep .billBottom .el-form-item__content { ::v-deep .billBottom .el-form-item__content {
line-height: 20px; 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> </style>

Loading…
Cancel
Save