新增:运单寄件图片上传 & 运单签收图片上传;另,修复转件管理页bug;

This commit is contained in:
liuyp 2024-05-23 23:19:56 +08:00
parent 9c6c0f8bf3
commit 6b005e6d3f
4 changed files with 518 additions and 5 deletions

View File

@ -79,7 +79,8 @@ export default {
baseUrl: process.env.VUE_APP_BASE_API,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/ossUpload", // 上传的图片服务器地址
headers: { "X-Token": getToken() },
fileList: []
fileList: [],
filesSize:{}
};
},
watch: {
@ -122,6 +123,7 @@ export default {
if(findex > -1) {
this.fileList.splice(findex, 1);
this.$emit("input", this.listToString(this.fileList));
this.filesSize[file.name] = null;
}
},
// 上传成功回调
@ -132,7 +134,7 @@ export default {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$emit("input", this.listToString(this.fileList), this.filesSize);
this.$modal.closeLoading();
}
},
@ -164,6 +166,7 @@ export default {
return false;
}
}
this.filesSize[file.name] = file.size
this.$modal.loading("正在上传图片,请稍候...");
this.number++;
},

View File

@ -0,0 +1,253 @@
<template>
<div class="app-container">
<el-form ref="form" size="mini" :model="form" label-width="80px">
<!-- <SearchForm :ref="form" :model="picUrl" ref="queryForm" size="small" :maxShow="8" label-width="100px" v-show="showSearch" @search="getList" @reset="resetQuery"> -->
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="上传图片" prop="xxx" label-width="80px">
<ImageUpload ref="imageUpload" v-model="form.picUrl" @input="handleInput" ></ImageUpload>
</el-form-item>
</el-col>
</el-row >
<!-- </SearchForm> -->
</el-form>
<xd-table v-loading="loading"
border stripe
size="small"
ref="multipleTable"
:data="emisTmsScanRecordList"
:showSearch.sync="showSearch"
:queryParams="queryParams"
:total="emisTmsScanRecordList.length"
@queryTable="getList"
@selection-change="handleSelectionChange"
v-if="tableHeight" :max-height="tableHeight + 'px'"
>
<div slot="toolbar">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
@click="handleScanUpload"
>上传</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
@click="handleDelete"
>删除</el-button>
</el-col>
</el-row>
</div>
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('运单编号')" align="center" prop="billCode" min-width="150" />
<el-table-column :label="$t('图片URL')" align="center" prop="fileUrl" min-width="100" />
<el-table-column :label="$t('上传网点')" align="center" prop="scanSite" min-width="100" />
<el-table-column :label="$t('上传人')" align="center" prop="createBy" min-width="100" />
<el-table-column :label="$t('大小')" align="center" prop="volumeWeight" min-width="100">
<template slot-scope="scope">
<span>{{ scope.row.fileSiez + "KB" }}</span>
</template>
</el-table-column>/>
</xd-table>
</div>
</template>
<script>
import { addEmisWaybillAttachment } from "@/api/emis/emisWaybillAttachment";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import emisWaybillView from '@/views/emis/emisWaybill/emisWaybillView';
import emisWaybillForm from '@/views/emis/emisWaybill/emisWaybillForm';
// import { doScan } from "@/api/emis/emisTmsScanRecord";
import { getDateTimeToString } from '@/utils/payutils'
export default {
name: "UploadThePictureOfTheSendWaybillShipment",
components: { elDateSimplePicker,emisWaybillView,emisWaybillForm },
dicts: [
],
data() {
return {
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
dataMap:new Map(),
// 运单扫描记录数据
emisTmsScanRecordList: [],
// emisTmsScanRecordList: [],
openForm: false,
titleForm: "",
tableHeight: 200,
titleEmisWaybill: "",
openEmisWaybill: false,
queryParams:{},
// 显示编辑框更多
moreInputVisible: false,
// 表单参数
form: {
picUrl:null,
},
};
},
created() {
this.$nextTick(function() {
let form = this.$refs.form.$el;
let tableH = form.offsetHeight+265;
this.tableHeight = window.innerHeight - tableH;
});
},
methods: {
getList(){
},
handleInput(item, size){
if(item.trim() == ""){
return;
}
let scList = item.trim().split(/[;\;\,\,\n]/)||[];
scList.forEach(item=>{
let billCode = this.extractSubstring(item);
if(this.dataMap[billCode]) return;
let record = {};
record.billCode=billCode;
record.fileUrl=item;
record.scanSiteCode=this.$store.getters.ownerSiteCode;
record.scanSite=this.$store.getters.ownerSiteName;
record.createBy=this.$store.getters.empName;
record.signManCode=this.$store.getters.empCode;
record.createTime=getDateTimeToString(new Date());
record.remark = "";
record.fileName="寄件底单";
record.attachType="2";
for(let name in size){
if(name.indexOf(billCode) > -1){
record.fileSiez = parseFloat((size[name]/1024).toFixed(2));
break;
}
}
let indexBillCode=billCode;
this.dataMap[indexBillCode]=record;
this.emisTmsScanRecordList.push(record);
// getWaybillDetail(billCode).then(response => {
// debugger;
// if(!response || response.code != 200){
// this.$modal.msgError(response && response.msg || "未知错误");
// return;
// }
// })
});
// this.$refs.imageUpload.fileList = [];
this.form.picUrl =[];
},
/** 上传按钮操作 */
handleScanUpload(){
var selData = this.selection;
selData.forEach(item=>{
addEmisWaybillAttachment(item).then(response => {
if(!response || response.code != 200 ){
this.$modal.msgError(response && response.msg || "未知错误");
return;
}
let newList = [];
this.emisTmsScanRecordList.forEach(item => {
if(this.ids.indexOf(item.billCode) > -1){
this.dataMap[item.billCode]=null;
}else{
newList.push(item);
}
})
this.ids = [];
this.selection = null;
this.emisTmsScanRecordList = newList;
this.$modal.msgSuccess(response.msg);
});
});
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.billCode)
this.selection = selection;
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 删除按钮操作 */
handleDelete(row) {
// const ids = row.id || this.ids;
// this.$modal.confirm('是否确认删除').then(function() {
// return delEmisWaybill(ids);
// }).then(() => {
// this.getList();
// this.$modal.msgSuccess("删除成功");
// }).catch(() => {});
let newList =[];
console.log(this.ids)
this.emisTmsScanRecordList.forEach(item=>{
if(this.ids.indexOf(item.billCode) == -1){
newList.push(item);
}else{
this.dataMap[item.billCode]=null;
}
});
this.emisTmsScanRecordList = newList;
},
extractSubstring(str) {
// 找到最后一个 '-' 的位置
let lastSlashIndex = str.lastIndexOf('-');
// 找到最后一个 '_' 的位置
let lastDotIndex = str.lastIndexOf('_');
// 检查 '-' 和 '_' 是否存在,并且 '-' 在 _' 之前
if (lastSlashIndex !== -1 && lastDotIndex !== -1 && lastSlashIndex < lastDotIndex) {
// 提取 '-' 和 '_' 之间的子字符串
return str.substring(lastSlashIndex + 1, lastDotIndex);
} else {
// 返回空字符串或抛出错误,视需求而定
return '';
}
}
}
};
</script>
<style scoped>
.el-divider{
margin-top: 0px;
background: 0 0;
border-top: 1px solid #E6EBF5;
}
.el-divider__text {
color: #0955ee;
cursor: pointer;
}
</style>

View File

@ -0,0 +1,253 @@
<template>
<div class="app-container">
<el-form ref="form" size="mini" :model="form" label-width="80px">
<!-- <SearchForm :ref="form" :model="picUrl" ref="queryForm" size="small" :maxShow="8" label-width="100px" v-show="showSearch" @search="getList" @reset="resetQuery"> -->
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="上传图片" prop="xxx" label-width="80px">
<ImageUpload ref="imageUpload" v-model="form.picUrl" @input="handleInput" ></ImageUpload>
</el-form-item>
</el-col>
</el-row >
<!-- </SearchForm> -->
</el-form>
<xd-table v-loading="loading"
border stripe
size="small"
ref="multipleTable"
:data="emisTmsScanRecordList"
:showSearch.sync="showSearch"
:queryParams="queryParams"
:total="emisTmsScanRecordList.length"
@queryTable="getList"
@selection-change="handleSelectionChange"
v-if="tableHeight" :max-height="tableHeight + 'px'"
>
<div slot="toolbar">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
@click="handleScanUpload"
>上传</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
@click="handleDelete"
>删除</el-button>
</el-col>
</el-row>
</div>
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('运单编号')" align="center" prop="billCode" min-width="150" />
<el-table-column :label="$t('图片URL')" align="center" prop="fileUrl" min-width="100" />
<el-table-column :label="$t('上传网点')" align="center" prop="scanSite" min-width="100" />
<el-table-column :label="$t('上传人')" align="center" prop="createBy" min-width="100" />
<el-table-column :label="$t('大小')" align="center" prop="volumeWeight" min-width="100">
<template slot-scope="scope">
<span>{{ scope.row.fileSiez + "KB" }}</span>
</template>
</el-table-column>/>
</xd-table>
</div>
</template>
<script>
import { addEmisWaybillAttachment } from "@/api/emis/emisWaybillAttachment";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import emisWaybillView from '@/views/emis/emisWaybill/emisWaybillView';
import emisWaybillForm from '@/views/emis/emisWaybill/emisWaybillForm';
// import { doScan } from "@/api/emis/emisTmsScanRecord";
import { getDateTimeToString } from '@/utils/payutils'
export default {
name: "UploadThePictureOfTheWaybillShipment",
components: { elDateSimplePicker,emisWaybillView,emisWaybillForm },
dicts: [
],
data() {
return {
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
dataMap:new Map(),
// 运单扫描记录数据
emisTmsScanRecordList: [],
// emisTmsScanRecordList: [],
openForm: false,
titleForm: "",
tableHeight: 200,
titleEmisWaybill: "",
openEmisWaybill: false,
queryParams:{},
// 显示编辑框更多
moreInputVisible: false,
// 表单参数
form: {
picUrl:null,
},
};
},
created() {
this.$nextTick(function() {
let form = this.$refs.form.$el;
let tableH = form.offsetHeight+265;
this.tableHeight = window.innerHeight - tableH;
});
},
methods: {
getList(){
},
handleInput(item, size){
if(item.trim() == ""){
return;
}
let scList = item.trim().split(/[;\;\,\,\n]/)||[];
scList.forEach(item=>{
let billCode = this.extractSubstring(item);
if(this.dataMap[billCode]) return;
let record = {};
record.billCode=billCode;
record.fileUrl=item;
record.scanSiteCode=this.$store.getters.ownerSiteCode;
record.scanSite=this.$store.getters.ownerSiteName;
record.createBy=this.$store.getters.empName;
record.signManCode=this.$store.getters.empCode;
record.createTime=getDateTimeToString(new Date());
record.remark = "";
record.fileName="签收底单";
record.attachType="3";
for(let name in size){
if(name.indexOf(billCode) > -1){
record.fileSiez = parseFloat((size[name]/1024).toFixed(2));
break;
}
}
let indexBillCode=billCode;
this.dataMap[indexBillCode]=record;
this.emisTmsScanRecordList.push(record);
// getWaybillDetail(billCode).then(response => {
// debugger;
// if(!response || response.code != 200){
// this.$modal.msgError(response && response.msg || "未知错误");
// return;
// }
// })
});
// this.$refs.imageUpload.fileList = [];
this.form.picUrl =[];
},
/** 上传按钮操作 */
handleScanUpload(){
var selData = this.selection;
selData.forEach(item=>{
addEmisWaybillAttachment(item).then(response => {
if(!response || response.code != 200 ){
this.$modal.msgError(response && response.msg || "未知错误");
return;
}
let newList = [];
this.emisTmsScanRecordList.forEach(item => {
if(this.ids.indexOf(item.billCode) > -1){
this.dataMap[item.billCode]=null;
}else{
newList.push(item);
}
})
this.ids = [];
this.selection = null;
this.emisTmsScanRecordList = newList;
this.$modal.msgSuccess(response.msg);
});
});
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.billCode)
this.selection = selection;
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 删除按钮操作 */
handleDelete(row) {
// const ids = row.id || this.ids;
// this.$modal.confirm('是否确认删除').then(function() {
// return delEmisWaybill(ids);
// }).then(() => {
// this.getList();
// this.$modal.msgSuccess("删除成功");
// }).catch(() => {});
let newList =[];
console.log(this.ids)
this.emisTmsScanRecordList.forEach(item=>{
if(this.ids.indexOf(item.billCode) == -1){
newList.push(item);
}else{
this.dataMap[item.billCode]=null;
}
});
this.emisTmsScanRecordList = newList;
},
extractSubstring(str) {
// 找到最后一个 '-' 的位置
let lastSlashIndex = str.lastIndexOf('-');
// 找到最后一个 '_' 的位置
let lastDotIndex = str.lastIndexOf('_');
// 检查 '-' 和 '_' 是否存在,并且 '-' 在 _' 之前
if (lastSlashIndex !== -1 && lastDotIndex !== -1 && lastSlashIndex < lastDotIndex) {
// 提取 '-' 和 '_' 之间的子字符串
return str.substring(lastSlashIndex + 1, lastDotIndex);
} else {
// 返回空字符串或抛出错误,视需求而定
return '';
}
}
}
};
</script>
<style scoped>
.el-divider{
margin-top: 0px;
background: 0 0;
border-top: 1px solid #E6EBF5;
}
.el-divider__text {
color: #0955ee;
cursor: pointer;
}
</style>

View File

@ -147,8 +147,12 @@
<span>{{ parseTime(scope.row.transferDate) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('转件公司')" align="center" prop="transferExpress" min-width="100" />
<el-table-column :label="$t('转件公司编码')" align="center" prop="xxxx" min-width="100" />
<el-table-column :label="$t('转件公司')" align="center" prop="transferExpress" min-width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.emis_express_code" :value="scope.row.transferExpress"/>
</template>
</el-table-column> />
<el-table-column :label="$t('转件公司编码')" align="center" prop="transferExpress" min-width="100" />
<el-table-column :label="$t('目的城市')" align="center" prop="transferCity" min-width="100" />
<el-table-column :label="$t('物流公司联系人')" align="center" prop="linkMan" min-width="100" />
<el-table-column :label="$t('电话')" align="center" prop="linkPhone" min-width="100" />
@ -198,7 +202,7 @@
clearable
v-model="form.transferExpress"
>
<el-option v-for="item in dict.type.emis_express_code" :key="item.value" :label="item.label" :value="item.label" />
<el-option v-for="item in dict.type.emis_express_code" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>