<template>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>面单上传</span>
|
</div>
|
<el-form v-model="formData" label-width="120px">
|
<el-form-item label="选择口岸">
|
<el-select v-model="formData.port_Id" placeholder="请选择" @change="getExpressCorp(formData.port_Id)">
|
<el-option v-for="item in portOptions" :key="item.port_Id" :label="item.portName" :value="item.port_Id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="快递类别">
|
<el-select v-model="formData.expressCorpType" filterable clearable placeholder="请选择快递类别" @change="changCorpType">
|
<el-option v-for="(item, index) in expressCorpTypeList" :key="index" :label="item.expressCorpName" :value="item.expressCorpType">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="快递名称">
|
<el-select v-model="formData.expressCorp_Id" filterable clearable placeholder="请选择快递名称">
|
<el-option v-for="(item, index) in expressCorpNameList" :key="index" :label="item.expressCorpName" :value="item.expressCorp_Id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
|
<el-upload ref="upload" :http-request="uploadHttp" :before-upload="beforeAvatarUpload" :show-file-list="false" class="upload-bill" action="" multiple>
|
<el-button slot="trigger" size="small" type="primary">选取图片</el-button>
|
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitImgUrl">开始导入</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传常见格式图片文件</div>
|
</el-upload>
|
<div class="padding-20 line-height-1_5">
|
<ul>
|
<li v-for="(item, index) in fileList" :key="index">
|
{{ item.imageName }} 已上传
|
</li>
|
</ul>
|
</div>
|
<div class="padding-20 line-height-1_5" v-html="uploadMsg">
|
{{ uploadMsg }}
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
import ossClient from "@/utils/aliyun.oss.client";
|
|
export default {
|
name: "tms-way-upload",
|
data() {
|
return {
|
formData: {
|
port_Id: null,
|
expressCorp_Id: null
|
// Storage_Id: null
|
},
|
portOptions: null,
|
expressCorpoptions: null,
|
// 文件列表
|
fileList: [],
|
fullFileRote: null,
|
// StorageNames: [],
|
// 快递类别下拉框数据列表
|
expressCorpTypeList: [],
|
// 快递名称下拉框数据列表
|
expressCorpNameList: [],
|
// 返回消息
|
uploadMsg: null,
|
uploadConf: this.common.uploadConf
|
};
|
},
|
mounted() {
|
// this.multiDistributionExpress();
|
this.getPortList();
|
this.getExpressCorpList();
|
// this.getStorageList();
|
},
|
methods: {
|
// 获取口岸下拉框
|
getPortList() {
|
const url = "/api/tms/base/port/getList";
|
const params = {};
|
var callback = res => {
|
if (res.result) {
|
this.portOptions = res.data;
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 获快递下拉框
|
getExpressCorpList() {
|
const url = "/api/basicInfo/base/expressCorp/getList";
|
const params = {};
|
var callback = res => {
|
if (res.result) {
|
this.expressCorpoptions = res.data;
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 选择口岸之后获取快递类别下拉框值
|
getExpressCorp(port_Id) {
|
const url = "/api/basicInfo/base/expressCorp/getWayBillExpressCorpType";
|
const params = { port_Id: port_Id };
|
var callback = res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.formData.expressCorpType = null;
|
this.formData.expressCorp_Id = null;
|
this.expressCorpTypeList = res.data;
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
// 弹出框
|
this.dialogFormVisible = true;
|
},
|
// 选择快递单号后加载快递名称
|
changCorpType(value) {
|
const expressCorpType = value;
|
const url = "/api/basicInfo/base/expressCorp/getList";
|
const params = {
|
expressCorpType: expressCorpType
|
};
|
this.formData.expressCorp_Id = "";
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.expressCorpNameList = res.data;
|
this.formData.expressCorp_Id = this.expressCorpNameList[0].expressCorp_Id;
|
} else {
|
this.expressCorpNameList = [];
|
}
|
});
|
},
|
|
// 上传至阿里云
|
/**
|
* 阿里云OSS上传
|
*/
|
uploadHttp({ file }) {
|
this.common.loading(true);
|
const fileName = `Upload/waybill/${this.common.formatDate(
|
new Date(),
|
"YYYY-MM-DD"
|
)}/${file.name}`; // 定义唯一的文件名
|
ossClient(this.uploadConf)
|
.put(fileName, file, {
|
ContentType: "image/jpeg"
|
})
|
.then(({ res, url, name }) => {
|
if (res && res.status === 200) {
|
this.fileList.push({
|
imageName: file.name,
|
imageUrl: name, // 本地相对地址
|
aliUrl: res.requestUrls[0] // 阿里云完整地址
|
});
|
}
|
this.common.loaded(true);
|
})
|
.catch(err => {
|
this.$message.error(`上传图片失败` + err.message);
|
this.common.loaded(true);
|
});
|
},
|
/**
|
* 图片限制
|
*/
|
beforeAvatarUpload(file) {
|
const fileSplit = file.name.split(".");
|
const isJPEG = fileSplit[fileSplit.length - 1] === "jpeg";
|
const isJPG = fileSplit[fileSplit.length - 1] === "jpg";
|
const isPNG = fileSplit[fileSplit.length - 1] === "png";
|
const isLt5MB = file.size / 1024 / 1024 < 5;
|
if (!isJPG && !isJPEG && !isPNG) {
|
this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
|
}
|
if (!isLt5MB) {
|
this.$message.error("单张图片大小不能超过 5MB!");
|
}
|
return (isJPEG || isJPG || isPNG) && isLt5MB;
|
},
|
// 开始导入
|
submitImgUrl() {
|
if (this.fileList.length === 0) {
|
this.$message.error("请上传图片！");
|
return;
|
}
|
const url = "/api/tms/waybillUpload/importWayBillUpload";
|
|
var portName = "";
|
var expressCorpName = "";
|
var portOptions = this.portOptions;
|
var expressCorpoptions = this.expressCorpoptions;
|
// 口岸
|
for (var index in portOptions) {
|
if (portOptions[index].port_Id === this.formData.port_Id) {
|
portName = portOptions[index].portName;
|
}
|
}
|
// 快递
|
for (var index2 in expressCorpoptions) {
|
if (
|
expressCorpoptions[index2].expressCorp_Id ===
|
this.formData.expressCorp_Id
|
) {
|
expressCorpName = expressCorpoptions[index2].expressCorpName;
|
}
|
}
|
|
if (!this.formData.port_Id) {
|
this.$message.error("请选择口岸！");
|
return;
|
}
|
|
if (!this.formData.expressCorp_Id) {
|
this.$message.error("请选择快递！");
|
return;
|
}
|
|
var userInfo = this.common.getUserInfo();
|
const params = {
|
imageList: this.fileList,
|
expressCorp_Id: this.formData.expressCorp_Id,
|
expressCorpName: expressCorpName,
|
expressCorpType: this.formData.expressCorpType,
|
port_Id: this.formData.port_Id,
|
portName: portName,
|
consignor_Id: userInfo.user_Id,
|
consignorCode: userInfo.userName,
|
consignorName: userInfo.userTrueName
|
};
|
var callback = res => {
|
this.uploadMsg = res.msg;
|
if (res.result) {
|
this.fileList = [];
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.box-card {
|
.upload-bill {
|
width: 480px;
|
.el-upload__tip {
|
margin-top: 20px;
|
}
|
}
|
}
|
</style>
|
