268 lines
8.5 KiB
Vue
268 lines
8.5 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
|
|
<!-- <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="24">
|
|
<el-form-item label="上传图片" prop="xxx" label-width="80px">
|
|
<ImageUpload ref="imageUpload" v-model="form.picUrl" :fileSize="1" :limit="80"></ImageUpload>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<el-form-item label="运单号" prop="billCode" label-width="70px">
|
|
<span slot="label">
|
|
<span style="color: red">运单号</span>
|
|
</span>
|
|
<el-input v-model="form.billCode" clearable="" placeholder="单号输入后按回车" @keyup.enter.native="handleInput" >
|
|
<i slot="suffix" class="iconfont"></i>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row >
|
|
<!-- </SearchForm> -->
|
|
</el-form>
|
|
|
|
<xd-table v-loading="loading"
|
|
border
|
|
size="small"
|
|
ref="multipleTable"
|
|
storageName="uploadThePictureOfTheWaybillSigning_main"
|
|
|
|
: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" >
|
|
<template slot-scope="scope">
|
|
<ImagePreview height="50px" v-for="pic in (scope.row.fileUrl||'').split(',')" :key="pic" :src="pic" ></ImagePreview>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="$t('上传网点')" align="center" prop="createSite" 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 { getWaybillDetail } from "@/api/emis/emisWaybill";
|
|
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(){
|
|
|
|
},
|
|
async handleInput() {
|
|
if (this.form.billCode == "" || this.form.billCode == null) {
|
|
this.$modal.msgError("请先输入单号！");
|
|
return;
|
|
}
|
|
let billCode = this.form.billCode + '';
|
|
let response = await getWaybillDetail(billCode)
|
|
if (!response || response.code != 200) {
|
|
this.$modal.msgError(response && response.msg || "未知错误");
|
|
this.form.picUrl = [];
|
|
return;
|
|
}
|
|
if (response.data.blFormalWaybill === "0") {
|
|
this.$modal.msgError("运单号无效");
|
|
this.form.picUrl = [];
|
|
return;
|
|
}
|
|
let record = {};
|
|
record.billCode = billCode;
|
|
record.fileUrl=this.form.picUrl+'';
|
|
record.createSite = 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";
|
|
record.dataFrom = "pc";
|
|
record.fileSiez=-1;
|
|
let indexBillCode = billCode;
|
|
this.dataMap[indexBillCode] = record;
|
|
this.emisTmsScanRecordList.push(record);
|
|
},
|
|
/** 上传按钮操作 */
|
|
handleScanUpload(){
|
|
if(!this.selection){
|
|
this.$modal.msgError("请先上传图片！");
|
|
return;
|
|
}
|
|
|
|
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>
|