<template>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>面单录入</span>
|
</div>
|
<div class="margin-top-30">
|
<el-steps :active="step" finish-status="success">
|
<el-step title="输入面单号"></el-step>
|
<el-step title="开始识别信息"></el-step>
|
<el-step title="提交完成"></el-step>
|
</el-steps>
|
<div class="split-line"></div>
|
<div :class="{hidden:hiddenStep1}" class="step1">
|
<el-form v-model="formData" label-width="250px">
|
<el-alert :closable="false" title="说明：直接点“获取面单”时，按时间顺序获取最早上传未录入的面单在输入框输入单号再点“获取面单时，获取对应的面单信息，未录入的提示“未上传电子面单！”" type="error" class="margin-bottom-20">
|
</el-alert>
|
|
<el-form-item label="已录入订单数">
|
<span>{{ countInfo.endNum }}</span>
|
</el-form-item>
|
<el-form-item label="未录入单数">
|
<span>{{ countInfo.beginNum }}</span>
|
</el-form-item>
|
<el-form-item label="面单号">
|
<el-input v-model="formData.wayBillCode" placeholder="请输入面单号" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getWayBillUploadInfo()">获得面单</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div :class="{hidden:hiddenStep2}" class="step2">
|
<h4>运单跟踪信息</h4>
|
<div class="mainInfo">
|
<el-row>
|
<el-col :span="7">
|
<div class="grid-content bg-purple">面单号：{{ wayBilUploadInfo?wayBilUploadInfo.wayBillCode:"" }}</div>
|
</el-col>
|
<el-col :span="10">
|
<div class="grid-content bg-purple-light">上传时间：{{ wayBilUploadInfo?common.formatDate(wayBilUploadInfo.createDate, "YYYY-MM-DD HH:mm:ss"):"" }}</div>
|
</el-col>
|
<el-col :span="7">
|
<div class="grid-content bg-purple-light">上传口岸：{{ wayBilUploadInfo?wayBilUploadInfo.portName:"" }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
<el-row :gutter="10">
|
<el-col :sm="12" :xl="8">
|
<el-table :data="wayBillTrackingList" max-height="200">
|
<el-table-column prop="action" label="行为" width="130">
|
</el-table-column>
|
<el-table-column prop="creator" label="操作人" width="90">
|
</el-table-column>
|
<el-table-column prop="createDate" label="创建时间">
|
<template slot-scope="{row, column, $index}">
|
{{ common.formatDate(row.createDate, "YYYY-MM-DD HH:mm:ss") }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注">
|
</el-table-column>
|
</el-table>
|
|
<h4 class="margin-bottom-0">物料明细
|
<el-button type="text" size="small" class="ma font-15" icon="el-icon-yrt-xinjian" @click="addNewRow">新增添加</el-button>
|
</h4>
|
<el-table :data="wayBillDetails">
|
<el-table-column prop="productName" label="物料名称" width="155">
|
<template slot-scope="scope">
|
<table-select :ref="productTableSelect" v-model="scope.row.productName" :table-data="tableData" :popover-width="600" :table-max-height="500" size="mini" label-field="productName" label="物料名称" trigger="focus" tabindex="1" @on-key-up="(ref, val, event, tableData)=>{onProductKeyup(ref, val, event, tableData);}" @on-key-down="(ref, val, event, tableData)=>{onProductKeydown(ref, val, event, tableData);}" @on-row-change="(ref, rowData) => {onRowChange(ref, rowData, scope.row);}" @keyup.native.enter="addNewRow_row">
|
<template slot="column">
|
<el-table-column property="productName" label="物料名称" width="230">
|
</el-table-column>
|
<el-table-column property="productModel" label="条码" width="120">
|
</el-table-column>
|
<el-table-column property="smallUnit" label="单位" width="50">
|
</el-table-column>
|
<!-- <el-table-column property="salePrice" label="售价" width="60">
|
</el-table-column> -->
|
<el-table-column property="productSpec" label="规格" width="70">
|
</el-table-column>
|
<el-table-column property="brandName" label="品牌" width="80">
|
</el-table-column>
|
</template>
|
</table-select>
|
</template>
|
</el-table-column>
|
<el-table-column prop="quantityOrder" label="物料数量" width="110">
|
<template slot-scope="scope">
|
<el-input-number v-model="scope.row.quantityOrder" :min="0" size="mini" controls-position="right" class="w-80" tabindex="1" @change="sumTolQuantity" @keyup.native.enter="addNewRow_row" @focus="(e)=>{qtyFocus(e, scope.$index)}"></el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column prop="weight" label="净重" width="110">
|
<template slot-scope="scope">
|
<el-input :ref="'Weight_'+scope.$index" v-model="scope.row.weight" size="mini" tabindex="-1" class="w-80" @change="()=>{scope.row.grossWeight=parseFloat(scope.row.weight)+0.1}" @focus="(e)=>{weightFocus(e, scope.$index)}"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="grossWeight" label="毛重" width="110">
|
<template slot-scope="scope">
|
<el-input :ref="'GrossWeight_'+scope.$index" v-model="scope.row.grossWeight" size="mini" tabindex="-1" class="w-80"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="address" label="操作" width="60">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" tabindex="-1" @click="deleteRow(scope)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-form ref="form" :inline="true" :model="formData" :rules="formRules" label-width="110px" class="margin-top-10">
|
<el-form-item label="物料总数量" class=" margin-bottom-10" prop="totalQuantityOrder">
|
<el-input v-model.number="formData.totalQuantityOrder" class="w-80" tabindex="-1"></el-input>
|
</el-form-item>
|
<el-form-item label="货物实重" required class=" margin-bottom-10" prop="grossWeight">
|
<el-input ref="grossWeight" v-model="formData.grossWeight" class="w-80" @focus="unitFocus"></el-input>
|
<el-select ref="unit" v-model="formData.unit" class="w-70" tabindex="-1">
|
<el-option label="KG" value="KG">
|
</el-option>
|
<el-option label="LB" value="LB">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<div class="split-line"></div>
|
<h4>收货人信息</h4>
|
<el-form-item label="收件人手机号" required prop="consigneeMobile">
|
<el-input ref="consigneeMobile" v-model="formData.consigneeMobile" class="w-200" @blur="blurConsigneeMobile"></el-input>
|
<!-- <input-select ref="consigneeMobile" v-model="formData.consigneeMobile" :options="mobileList" :props="mobileProps" label="收件人手机号" input-width="150px" trigger="focus" tabindex="1" @on-item-click="onMobileItemClick" @on-key-up="(ref, val, event)=>{onMobileKeyup(ref, val, event);}" @on-key-down="(ref, val, event, tableData)=>{onMobileKeydown(ref, val, event, tableData);}">
|
</input-select> -->
|
</el-form-item>
|
<el-form-item label="收件人姓名" required prop="consigneeName">
|
<el-input ref="consigneeName" v-model="formData.consigneeName" class="w-200"></el-input>
|
</el-form-item>
|
<br>
|
<el-form-item label="收件人身份证号">
|
<el-input ref="consigneeIdcard" v-model="formData.consigneeIdcard" class="w-200"></el-input>
|
</el-form-item>
|
<br>
|
<el-form-item label="收件人省市区" required prop="regionName">
|
<!-- <el-input v-if="isEdit" ref="provinceName" v-model="formData.provinceName" class="w-150" @change="addressChange"></el-input> -->
|
<input-select ref="provinceName" v-model="formData.provinceName" :options="addressList.provinceList" label="省" input-width="150px" trigger="focus" @on-item-click="onProvinceItemClick" @on-row-change="onProvinceItemChange" @on-key-up="onProvinceKeyup" @on-key-down="(ref, val, event, tableData)=>{onProvinceKeydown(ref, val, event, tableData);}">
|
</input-select>
|
|
<!-- <el-input v-if="isEdit" ref="cityName" v-model="formData.cityName" class="w-150" @change="addressChange"></el-input> -->
|
<input-select ref="cityName" v-model="formData.cityName" :options="addressList.cityList" label="市" input-width="150px" trigger="focus" @on-item-click="onCityItemClick" @on-row-change="onCityItemChange" @on-focus="onFocusCity" @on-key-up="onCityKeyup" @on-key-down="(ref, val, event, tableData)=>{onCityKeydown(ref, val, event, tableData);}">
|
</input-select>
|
|
<!-- <el-input v-if="isEdit" ref="regionName" v-model="formData.regionName" class="w-150" @change="addressChange"></el-input> -->
|
<input-select ref="regionName" v-model="formData.regionName" :options="addressList.regionList" label="区" input-width="150px" trigger="focus" @on-item-click="onRegionItemClick" @on-focus="onFocusRegion" @on-key-up="onRegionKeyup" @on-key-down="(ref, val, event, tableData)=>{onRegionKeydown(ref, val, event, tableData);}">
|
</input-select>
|
</el-form-item>
|
<!-- <br>
|
<el-form-item label="街道" required prop="Street">
|
<el-input v-model="formData.Street" style="width:520px;"></el-input>
|
</el-form-item> -->
|
<br>
|
<el-form-item label="详细地址" label-width="80px" required prop="consigneeAddress" style="width:900px;position: relative;z-index: 100;">
|
<el-input ref="consigneeAddress" v-model="formData.consigneeAddress" style="width:620px;" @blur="getPostCode()"></el-input>
|
<el-input v-model="formData.consigneePostCode" placeholder="邮编" class="w-100"></el-input>
|
</el-form-item>
|
<br>
|
<el-form-item class="padding-left-50">
|
<el-button type="warning" @click="goto(1)">上一步</el-button>
|
<el-button type="primary" @click="submitWayBillInfo('审核成功')">确认提交</el-button>
|
<el-button type="primary" @click="submitWayBillInfo('审核成功', 'next')">保存并添加下一单</el-button>
|
<el-button type="danger" @click="showReason()">异常提交</el-button>
|
<!-- <el-button>取消</el-button> -->
|
</el-form-item>
|
<br>
|
<el-form-item class="padding-left-50">
|
<div class="bold line-height-1_5">快捷键：</div>
|
<div class="line-height-1_5">alt + X：新增物料</div>
|
<div class="line-height-1_5">F2：保存且下一单，注意360浏览需要将浏览器默认快捷键禁用，操作步骤：选项->快捷键->禁用所有快捷键</div>
|
<div class="line-height-1_5">输入手机号后，带出历史同手机号信息</div>
|
<div class="line-height-1_5">当此单录入之前，对应单号存在身份证、收件人姓名，则自动带出</div>
|
<div class="line-height-1_5">物料输入时，只需名称和数量，输入完数量后按回车可添加新一行</div>
|
<div class="line-height-1_5">物料模糊搜索，下拉框显示字段：名称、条码、单位、单价、税号、规格、品牌</div>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
<el-col :sm="12" :xl="14">
|
<sticky class-name="left-sticky">
|
<img :src="getSrc" style="max-width:100%;cursor: pointer;" @click="imgVisible=true">
|
</sticky>
|
</el-col>
|
</el-row>
|
</div>
|
<div :class="{hidden:hiddenStep3}" class="step3">
|
<div class="step3-finished">
|
<i class="el-icon-yrt-yduigouxuan icon"></i>
|
</div>
|
<div class="text">上传完成</div>
|
<el-button type="primary" @click="reStart">再来一单</el-button>
|
</div>
|
</div>
|
|
<!--异常原因窗口-->
|
<el-dialog v-dialogDrag :visible.sync="reasonVisible" title="提示" width="300px">
|
异常原因:
|
<el-select v-model="formData.reason" placeholder="请选择异常原因" class="w-150">
|
<el-option v-for="item in reasonList" :key="item.label" :label="item.label" :value="item.label">
|
</el-option>
|
</el-select>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="reasonVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitWayBillInfo('录入异常')">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
<el-dialog v-dialogDrag :visible.sync="imgVisible" :append-to-body="true" width="90%">
|
<img :src="getSrc" style="max-width:100%;">
|
</el-dialog>
|
</el-card>
|
</template>
|
|
<script>
|
import InputSelect from '@/components/base/InputSelect'
|
import TableSelect from '@/components/base/TableSelect'
|
import Sticky from '@/components/Sticky'
|
import emitter from '@/components/common/emitter.mixin.js'
|
|
export default {
|
name: 'tms-way-bill-editor',
|
components: {
|
InputSelect,
|
TableSelect,
|
Sticky
|
},
|
mixins: [emitter],
|
data() {
|
return {
|
// 省市区全局
|
cityList: [],
|
// 选择器配置参数
|
selectorConfig: {
|
title: '物料选择器',
|
width: '1000px',
|
visible: false,
|
// 配置路由
|
router: '/selector/s-product-selector'
|
},
|
// 图片域名地址
|
BASE_API: this.common.ossDomain,
|
// 图片窗口
|
imgVisible: false,
|
// 统计数据
|
countInfo: {
|
beginNum: null,
|
endNum: null
|
},
|
// 运单上传数据
|
wayBilUploadInfo: {},
|
// 运单跟踪数据
|
wayBillTrackingList: [],
|
// 识别数据
|
formData: {
|
provinceName: null,
|
cityName: null,
|
regionName: null,
|
consigneeAddress: null,
|
grossWeight: null,
|
// 总数量
|
totalQuantityOrder: null,
|
unit: 'KG'
|
},
|
// 运单明细数据
|
wayBillDetails: [
|
{
|
product_Id: null,
|
productCode: null,
|
productName: null,
|
productModel: null,
|
productSpec: null,
|
quantityOrder: null,
|
smallUnit: null,
|
salePrice: null,
|
weight: null,
|
grossWeight: null
|
}
|
],
|
// 省市区加载
|
addressList: {
|
provinceList: [],
|
cityList: [],
|
regionList: []
|
},
|
// 步骤
|
step: 1,
|
// step1隐藏
|
hiddenStep1: false,
|
// step2隐藏
|
hiddenStep2: true,
|
// step3隐藏
|
hiddenStep3: true,
|
reasonVisible: false,
|
reasonList: [
|
{
|
value: '品名不详',
|
label: '品名不详'
|
},
|
{
|
value: '面单不清',
|
label: '面单不清'
|
},
|
{
|
value: '订单取消退货',
|
label: '订单取消退货'
|
},
|
{
|
value: '货物超重',
|
label: '货物超重'
|
}
|
],
|
// 手机号身份证下拉框数据
|
mobileList: [],
|
// 手机号下拉框属性选项
|
mobileProps: {
|
label: 'Mobile',
|
value: 'Mobile'
|
},
|
tableData: [],
|
// 验证规则
|
formRules: {
|
totalQuantityOrder: [
|
{ required: true, trigger: 'blur', message: '物料总数量不能为空！' },
|
{ type: 'number', trigger: 'blur', message: '物料总数量必须是数字！' }
|
],
|
grossWeight: [
|
{ required: true, trigger: 'blur', message: '货物实重不能为空！' },
|
{
|
type: 'string',
|
pattern: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
|
message: '货物实重必须是数字！'
|
}
|
],
|
consigneeMobile: [
|
{
|
type: 'string',
|
pattern: /^((0\d{2,3}-?\d{7,8})|(1[3456789]\d{9}))$/,
|
message: '手机号格式不正确'
|
},
|
{
|
type: 'string',
|
required: true,
|
message: '手机号必填'
|
}
|
],
|
consigneeName: [{ required: true, trigger: 'blur', message: '收件人姓名不能为空！' }],
|
region_Id: [{ required: true, trigger: 'blur', message: '收件人省市区不能为空！' }],
|
consigneeAddress: [
|
{
|
required: true,
|
trigger: 'blur',
|
message: '收件人详细地址不能为空！'
|
}
|
],
|
cIQName: [{ required: true, trigger: 'blur', message: '英文名称不能为空' }],
|
brand_Id: [{ required: true, trigger: 'blur', message: '品牌名称不能为空' }],
|
originPlace: [{ required: true, trigger: 'blur', message: '原产地不能为空' }],
|
netWeight: [{ required: true, trigger: 'blur', message: '净重不能为空' }],
|
salePrice: [{ required: true, trigger: 'blur', message: '单价不能为空' }],
|
currency: [{ required: true, trigger: 'blur', message: '币种不能为空' }]
|
},
|
// 物料搜索停止后再触发
|
productSearchHandle: null,
|
// 是否编辑状态
|
isEdit: false,
|
// 物料明细选择下拉框ref名称
|
productTableSelect: 'tableSelect'
|
}
|
},
|
computed: {
|
// 获取url
|
getSrc: {
|
get: function() {
|
if (this.wayBilUploadInfo && this.wayBilUploadInfo.filePath) {
|
return this.BASE_API + this.wayBilUploadInfo.filePath + '?x-oss-process=style/big'
|
} else {
|
return ''
|
}
|
}
|
}
|
},
|
watch: {
|
wayBillDetails: {
|
handler: function(val) {},
|
deep: true
|
}
|
},
|
created() {
|
// 快捷键处理
|
document.onkeydown = e => {
|
// 监听按键捕获
|
if (e.key === 'x' && e.altKey) {
|
// 添加物料
|
this.addNewRow()
|
return false
|
} else if (e.key === 'F2') {
|
// 保存并添加下一单
|
this.submitWayBillInfo('审核成功', 'next')
|
return false
|
}
|
}
|
},
|
mounted() {
|
this.getSumCount()
|
this.getCityList()
|
},
|
activated() {
|
// 判断是否为编辑数据
|
this.editData()
|
},
|
methods: {
|
// 获得全局省市区
|
getCityList() {
|
const url = '/api/basicInfo/base/city/getAll'
|
const params = {}
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res)
|
if (res.result) {
|
this.cityList = res.data
|
this.cityList.forEach(item => {
|
item.value = item.city_Id
|
item.label = item.cityName
|
})
|
this.getProvince()
|
}
|
})
|
},
|
// 步骤跳转
|
goto(step) {
|
if (step === 1) {
|
this.step = 1
|
this.hiddenStep1 = false
|
this.hiddenStep2 = true
|
this.hiddenStep3 = true
|
} else if (step === 2) {
|
this.step = 2
|
this.hiddenStep1 = true
|
this.hiddenStep2 = false
|
this.hiddenStep3 = true
|
} else if (step === 3) {
|
this.step = 3
|
this.hiddenStep1 = true
|
this.hiddenStep2 = true
|
this.hiddenStep3 = false
|
}
|
},
|
// 开始识别身份证信息
|
onSubmit() {
|
this.step = 2
|
this.hiddenStep1 = true
|
this.hiddenStep2 = true
|
this.hiddenStep3 = false
|
},
|
// 重新上传
|
reStart() {
|
this.step = 1
|
this.hiddenStep1 = false
|
this.hiddenStep2 = true
|
this.hiddenStep3 = true
|
},
|
// 获取面单上传统计
|
getSumCount() {
|
const url = '/api/tms/wayBillUpload/getSumCount'
|
const params = {}
|
var callback = res => {
|
if (res.result) {
|
this.$set(this.countInfo, 'beginNum', res.data.beginNum)
|
this.$set(this.countInfo, 'endNum', res.data.endNum)
|
}
|
}
|
this.common.ajax(url, params, callback, true)
|
},
|
// 获取面单上传信息、运单跟踪信息
|
getWayBillUploadInfo(type) {
|
// 将图片清空
|
if (this.wayBilUploadInfo) {
|
this.wayBilUploadInfo.FilePath = ''
|
}
|
this.$refs.form.clearValidate()
|
const url = '/api/tms/wayBillUpload/getWayBillUploadInfo'
|
var wayBillCode = null
|
if (this.formData.wayBillCode) {
|
wayBillCode = this.formData.wayBillCode
|
}
|
var params = {
|
wayBillCode: wayBillCode,
|
type: type
|
}
|
var callback = res => {
|
if (res.result) {
|
this.wayBilUploadInfo = res.data.wayBilUploadInfo
|
this.wayBillTrackingList = res.data.wayBillTrackingList
|
this.goto(2)
|
this.imgVisible = false
|
// 编辑数据
|
if (type === 'edit') {
|
// 主表数据
|
this.formData = res.data.wayBillInfo
|
this.formData.grossWeight = '' + this.formData.grossWeight
|
// 明细表数据
|
const details = res.data.wayBillInfo.tmsWayBillList
|
this.wayBillDetails = []
|
details.forEach((item, index) => {
|
this.$set(this.wayBillDetails, this.wayBillDetails.length, details[index])
|
})
|
if (!this.wayBillDetails.length) {
|
this.wayBillDetails.push({
|
product_Id: null,
|
productCode: null,
|
productName: null,
|
productModel: null,
|
productSpec: null,
|
quantityOrder: null,
|
smallUnit: null,
|
salePrice: null,
|
weight: null,
|
grossWeight: null
|
})
|
}
|
// this.getCity(this.formData.province_Id);
|
// this.getRegion(this.formData.city_Id);
|
}
|
} else {
|
this.common.showMsg(res)
|
this.wayBilUploadInfo = {}
|
}
|
this.$nextTick(() => {
|
this.$refs[this.productTableSelect].focus()
|
})
|
}
|
this.common.ajax(url, params, callback, true)
|
},
|
// 添加一个新行
|
addNewRow() {
|
var insertWayBillInfo = {
|
product_Id: null,
|
productCode: null,
|
productName: null,
|
productModel: null,
|
productSpec: null,
|
quantityOrder: null,
|
smallUnit: null,
|
salePrice: null,
|
weight: null,
|
grossWeight: null
|
}
|
this.$set(this.wayBillDetails, this.wayBillDetails.length, insertWayBillInfo)
|
},
|
// 物料数量回车新增行
|
addNewRow_row() {
|
this.addNewRow()
|
this.$nextTick(() => {
|
this.$refs[this.productTableSelect].focus()
|
})
|
},
|
// 删除行
|
deleteRow(scope) {
|
if (this.wayBillDetails.length === 1) {
|
this.$message.error('至少保留一条物料明细！')
|
return
|
}
|
this.wayBillDetails.splice(scope.$index, 1)
|
},
|
// 计算物料总数量
|
sumTolQuantity() {
|
var wayBillDetails = this.wayBillDetails
|
var tolQuantity = 0
|
for (var index in wayBillDetails) {
|
tolQuantity += parseInt(wayBillDetails[index].quantityOrder)
|
}
|
this.$set(this.formData, 'totalQuantityOrder', tolQuantity)
|
},
|
// 获取省数据
|
getProvince() {
|
this.addressList.provinceList = this.cityList.filter(item => {
|
return item.parentId === 0
|
})
|
},
|
// 获取市数据
|
getCity(id) {
|
this.formData.city_Id = null
|
this.formData.cityName = null
|
this.addressList.cityList.length = 0
|
this.cityList
|
.filter(item => {
|
return item.parentId === id
|
})
|
.forEach((item, index) => {
|
this.$set(this.addressList.cityList, index, item)
|
})
|
if (this.addressList.cityList.length === 1) {
|
const item = this.addressList.cityList[0]
|
this.formData.city_Id = item.value
|
this.formData.cityName = item.label
|
// this.$refs.regionName.focus();
|
this.getRegion(item.value)
|
}
|
},
|
// 获取区数据
|
getRegion(id) {
|
this.formData.region_Id = null
|
this.formData.regionName = null
|
this.addressList.regionList = this.cityList.filter(item => {
|
return item.parentId === id
|
})
|
if (this.addressList.regionList.length === 1) {
|
const item = this.addressList.regionList[0]
|
this.formData.region_Id = item.value
|
this.formData.regionName = item.label
|
this.$refs.consigneeAddress.focus()
|
}
|
},
|
// 获取省市区
|
getAddress() {
|
var s = (this.formData.provinceName || '') + (this.formData.cityName || '') + (this.formData.regionName || '')
|
if (!this.formData.consigneeAddress || this.formData.consigneeAddress.indexOf(s) < 0) {
|
this.formData.consigneeAddress = s
|
}
|
},
|
// 展示异常原因
|
showReason() {
|
this.reasonVisible = true
|
},
|
// 确认提交, type=[next(再来一单), finish(完成)]
|
submitWayBillInfo(state, type) {
|
var wayBillDetails = this.wayBillDetails
|
var errormsg = ''
|
// 物品明细效验
|
debugger
|
if (state !== '录入异常') {
|
// 验证身份证
|
if (this.formData.consigneeIdcard) {
|
var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
|
var cardNo = this.formData.consigneeIdcard
|
if (!idcardReg.test(cardNo)) {
|
this.$message.error('身份证格式不正确')
|
return
|
}
|
}
|
for (var index in wayBillDetails) {
|
var inx = parseInt(index) + 1
|
if (!wayBillDetails[index].product_Id || parseInt(wayBillDetails[index].product_Id) <= 0) {
|
errormsg += '物料明细第' + inx + '行请选择一个物料。'
|
break
|
}
|
|
if (!wayBillDetails[index].quantityOrder || parseInt(wayBillDetails[index].quantityOrder) <= 0) {
|
errormsg += '物料明细第' + inx + '行请输入大于0的物料数量。'
|
break
|
}
|
|
if (!wayBillDetails[index].weight || parseFloat(wayBillDetails[index].weight) <= 0) {
|
errormsg += '物料明细第' + inx + '行请输入大于0的物料净重。'
|
break
|
}
|
|
if (!wayBillDetails[index].grossWeight || parseFloat(wayBillDetails[index].grossWeight) <= 0) {
|
errormsg += '物料明细第' + inx + '行请输入大于0的物料毛重。'
|
break
|
}
|
}
|
if (errormsg) {
|
this.$message.error(errormsg)
|
return
|
}
|
}
|
// var p = this.formData.provinceName + this.formData.cityName + this.formData.regionName;
|
// if(p === this.formData.consigneeAddress){
|
// this.$message.error("详细地址未录入完全");
|
// return;
|
// }
|
|
// 运单数据非空验证
|
this.$refs.form.validate(valid => {
|
if (valid || state === '录入异常') {
|
// 提交信息
|
var reason = this.formData.reason ? this.formData.reason : ''
|
if (state === '录入异常' && !reason) {
|
this.$message.error('请选择异常原因！')
|
return
|
}
|
this.reasonVisible = false
|
// 提交信息
|
const url = '/api/tms/wayBillUpload/submitWayBillInfo'
|
const params = {
|
wayBillInfo: this.formData,
|
wayBillUploadInfo: this.wayBilUploadInfo,
|
wayBillDetails: this.wayBillDetails,
|
state: state,
|
reason: reason
|
}
|
var callback = res => {
|
if (res.result) {
|
this.getSumCount()
|
this.resetForm()
|
// 跳转到来源页面
|
const goBackRouter = sessionStorage['goBackRouter']
|
if (goBackRouter) {
|
// 清除跳转路由，异常处理
|
sessionStorage.removeItem('goBackRouter')
|
this.$router.push(goBackRouter)
|
const comp = this.findComponent('tms-way-bill-abnormal')
|
if (comp) {
|
comp.reload()
|
}
|
} else if (type === 'next') {
|
// 再来一单
|
this.getWayBillUploadInfo()
|
} else {
|
// 跳到完成
|
this.goto(3)
|
}
|
} else {
|
this.common.showMsg(res)
|
}
|
}
|
this.common.ajax(url, params, callback, true)
|
} else {
|
this.$message.error('请正确填写物料表单信息')
|
return false
|
}
|
})
|
},
|
// 重置表单
|
resetForm() {
|
this.productTableSelect = 'tableSelect' + Math.random()
|
this.isEdit = false
|
var wayBillInfo = {
|
product_Id: null,
|
productCode: null,
|
productName: null,
|
productModel: null,
|
productSpec: null,
|
quantityOrder: null,
|
smallUnit: null,
|
salePrice: null,
|
weight: null,
|
grossWeight: null,
|
unit: 'KG'
|
}
|
this.wayBillDetails.length = 0
|
this.$set(this.wayBillDetails, 0, wayBillInfo)
|
|
Object.keys(this.formData).forEach(key => {
|
this.formData[key] = null
|
})
|
// 运单上传数据
|
this.wayBilUploadInfo = {}
|
// 运单跟踪数据
|
this.wayBillTrackingList.length
|
},
|
// 手机号输入改变后
|
onMobileKeyup(ref, val, event) {
|
if (!val) {
|
this.mobileList = []
|
return
|
}
|
const url = '/api/tms/idcard/getList'
|
const params = {
|
name: val
|
}
|
this.common.ajax(url, params, res => {
|
// this.common.showMsg(res);
|
if (res.result) {
|
this.mobileList = res.data
|
} else {
|
this.mobileList.length = 0
|
}
|
})
|
},
|
onMobileKeydown(ref, val, event) {
|
if (event.key === 'Tab' && event.shiftKey) {
|
window.setTimeout(() => {
|
this.$refs.grossWeight.focus()
|
}, 50)
|
return
|
}
|
// 按tab键，第一条选中
|
if (event.keyCode === 9 && this.$refs.consigneeMobile.getCurrrentIndex() < 0) {
|
this.$refs.consigneeMobile.setCurrentIndex(0)
|
}
|
},
|
// 手机号下拉框项单击事件
|
onMobileItemClick(ref, label, itemData) {
|
this.formData.consigneeIdcard = itemData.IdCardCode
|
this.formData.consigneeName = itemData.FullName
|
},
|
// 收件人姓名
|
onConsigneeNameKeyup(event) {
|
if (event.key === 'Tab' && event.shiftKey) {
|
window.setTimeout(() => {
|
this.$refs.consigneeMobile.focus()
|
}, 500)
|
return
|
}
|
},
|
// 收件人身份证号
|
onConsigneeIdcardKeyup(event) {
|
if (event.key === 'Tab' && event.shiftKey) {
|
this.$refs.consigneeName.focus()
|
return
|
}
|
},
|
// 地址下拉框项单击事件
|
onProvinceItemClick(ref, label, itemData) {
|
this.formData.province_Id = itemData.value
|
this.formData.provinceName = itemData.label
|
this.getCity(itemData.value)
|
},
|
onProvinceItemChange(ref, label, itemData) {
|
this.formData.province_Id = itemData.value
|
this.formData.provinceName = itemData.label
|
this.getCity(itemData.value)
|
},
|
// 省筛选数据
|
onProvinceKeyup(ref, val, event) {
|
try {
|
if (!val) {
|
this.addressList.provinceList = this.cityList.filter(item => {
|
return item.parentId === 0
|
})
|
return
|
}
|
const filterItems = this.cityList.filter(item => {
|
if (!item.label) return false
|
return item.label.indexOf(val) >= 0 && item.parentId === 0
|
})
|
this.addressList.provinceList = filterItems
|
} catch (error) {
|
this.$message.error(error.message)
|
}
|
},
|
// 省keydown事件
|
onProvinceKeydown(ref, val, event) {
|
try {
|
if (event.key === 'Tab' && event.shiftKey) {
|
window.setTimeout(() => {
|
this.$refs.consigneeIdcard.focus()
|
})
|
return
|
}
|
// 按tab键，第一条选中
|
if (event.keyCode === 9 && this.$refs.provinceName.getCurrrentIndex() < 0) {
|
this.$refs.provinceName.setCurrentIndex(0)
|
} else {
|
const index = this.$refs.provinceName.getCurrrentIndex()
|
this.$refs.provinceName.setCurrentIndex(index)
|
}
|
} catch (error) {
|
this.$message.error(error.message)
|
}
|
},
|
// 市
|
onCityItemClick(ref, label, itemData) {
|
this.formData.city_Id = itemData.value
|
this.formData.cityName = itemData.label
|
this.getRegion(itemData.value)
|
},
|
onCityItemChange(ref, label, itemData) {
|
this.formData.city_Id = itemData.value
|
this.formData.cityName = itemData.label
|
this.getRegion(itemData.value)
|
},
|
onFocusCity() {
|
this.getCity(this.formData.province_Id)
|
},
|
// 市筛选数据
|
onCityKeyup(ref, val) {
|
try {
|
if (!val) {
|
this.addressList.cityList = this.cityList.filter(item => {
|
return item.parentId === this.formData.province_Id
|
})
|
return
|
}
|
const filterItems = this.cityList.filter(item => {
|
if (!item.label) return false
|
|
return item.parentId === this.formData.province_Id && item.label.indexOf(val) >= 0
|
})
|
this.addressList.cityList = filterItems
|
} catch (error) {
|
this.$message.error(error.message)
|
}
|
},
|
// 市keydown事件
|
onCityKeydown(ref, val, event) {
|
if (event.key === 'Tab' && event.shiftKey) {
|
this.$refs.provinceName.focus()
|
return
|
}
|
// tab keycode
|
if (event.keyCode === 9 && this.$refs.cityName.getCurrrentIndex() < 0) {
|
this.$refs.cityName.setCurrentIndex(0)
|
} else {
|
const index = this.$refs.cityName.getCurrrentIndex()
|
this.$refs.cityName.setCurrentIndex(index)
|
}
|
},
|
// 区
|
onRegionItemClick(ref, label, itemData) {
|
for (var i in this.addressList.regionList) {
|
var item = this.addressList.regionList[i]
|
if (itemData.value === item.value) {
|
this.$set(this.formData, 'region_Id', item.value)
|
this.$set(this.formData, 'regionName', item.label)
|
}
|
}
|
},
|
onFocusRegion() {
|
this.getRegion(this.formData.city_Id)
|
},
|
// 市筛选数据
|
onRegionKeyup(ref, val) {
|
try {
|
if (!val) {
|
this.addressList.regionList = this.cityList.filter(item => {
|
return item.parentId === this.formData.city_Id
|
})
|
return
|
}
|
const filterItems = this.cityList.filter(item => {
|
if (!item.label) return false
|
|
return item.parentId === this.formData.city_Id && item.label.indexOf(val) >= 0
|
})
|
this.addressList.regionList = filterItems
|
} catch (error) {
|
this.$message.error(error.message)
|
}
|
},
|
// 区keydown事件
|
onRegionKeydown(ref, val, event) {
|
if (event.key === 'Tab' && event.shiftKey) {
|
this.$refs.cityName.focus()
|
return
|
}
|
// tab keycode
|
if (event.keyCode === 9 && this.$refs.regionName.getCurrrentIndex() < 0) {
|
this.$refs.regionName.setCurrentIndex(0)
|
} else {
|
const index = this.$refs.regionName.getCurrrentIndex()
|
this.$refs.regionName.setCurrentIndex(index)
|
}
|
// 拼接省市区
|
this.getAddress()
|
},
|
// 物料名称下拉框输入改变后
|
onProductKeyup(ref, val, event, tableData) {
|
if (!val) {
|
this.tableData = []
|
return
|
}
|
|
clearTimeout(this.productSearchHandle)
|
|
this.productSearchHandle = setTimeout(() => {
|
const url = '/api/tms/wayBillUpload/getProductList'
|
const params = {
|
key: val
|
}
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res)
|
if (res.result) {
|
this.tableData = res.data
|
} else {
|
this.tableData = []
|
}
|
})
|
}, 800)
|
},
|
// 物料名称keydown事件
|
onProductKeydown(ref, val, event, tableData) {
|
// tab keycode
|
if (event.keyCode === 9 && this.$refs[this.productTableSelect].getCurrrentIndex() < 0) {
|
this.$refs[this.productTableSelect].setCurrentIndex(0)
|
} else {
|
const index = this.$refs[this.productTableSelect].getCurrrentIndex()
|
this.$refs[this.productTableSelect].setCurrentIndex(index)
|
}
|
},
|
// 物料名称下拉框行数据单击事件
|
onRowChange(ref, rowData, scopeRow) {
|
scopeRow.product_Id = rowData.product_Id
|
scopeRow.productCode = rowData.productCode
|
scopeRow.productName = rowData.productName
|
scopeRow.productModel = rowData.productModel
|
scopeRow.productSpec = rowData.productSpec
|
scopeRow.smallUnit = rowData.smallUnit
|
scopeRow.salePrice = rowData.salePrice
|
scopeRow.weight = rowData.netWeight
|
scopeRow.grossWeight = rowData.weight
|
},
|
// 明细数量获得焦点，将重量选择框失去焦点
|
qtyFocus(e, index) {
|
this.$nextTick(() => {
|
this.$refs['Weight_' + index].$el.children[0].tabIndex = -1
|
|
this.$refs['GrossWeight_' + index].$el.children[0].tabIndex = -1
|
|
this.$refs.unit.$el.children[0].children[0].tabIndex = -1
|
})
|
},
|
// 明细净重获得焦点，将毛重选择框失去焦点
|
weightFocus(e, index) {
|
this.$nextTick(() => {
|
this.$refs['GrossWeight_' + index].$el.children[0].tabIndex = -1
|
})
|
},
|
// 货物实重获得焦点，将单位选择框失去焦点
|
unitFocus(e) {
|
this.$nextTick(() => {
|
this.$refs.unit.$el.children[0].children[0].tabIndex = -1
|
})
|
},
|
// 编辑数据
|
editData() {
|
var abnInfo = sessionStorage['TMS_AbnormalOrder']
|
if (abnInfo) {
|
abnInfo = JSON.parse(abnInfo)
|
this.formData.wayBillCode = abnInfo.wayBillCode
|
this.goto(2)
|
this.getWayBillUploadInfo('edit')
|
this.isEdit = true
|
// this.getWayBillInfo(abnInfo.wayBillCode);
|
}
|
sessionStorage.removeItem('TMS_AbnormalOrder')
|
},
|
// 编辑时获取已存在的运单信息
|
getWayBillInfo(Code) {
|
const url = '/api/tms/wayBillUpload/getWayBillInfo'
|
const params = {
|
Code: Code
|
}
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res)
|
if (res.result) {
|
this.formData = res.data
|
this.wayBillDetails = res.data.wayBillDetails
|
// this.getCity(this.formData.province_Id);
|
// this.getRegion(this.formData.city_Id);
|
}
|
})
|
},
|
// 获得邮编地址
|
getPostCode() {
|
var that = this
|
var detiladdress = ''
|
if (this.formData.consigneeAddress) {
|
detiladdress = this.formData.consigneeAddress
|
}
|
if (!this.formData.provinceName) return
|
if (!this.formData.cityName) return
|
if (!this.formData.regionName) return
|
if (!detiladdress) return
|
|
const url = '/api/tms/wayBillUpload/getPostCode'
|
const params = {
|
provinceName: this.formData.provinceName,
|
cityName: this.formData.cityName,
|
regionName: this.formData.regionName,
|
consigneeAddress: detiladdress
|
}
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res)
|
if (res.result) {
|
that.$set(that.formData, 'consigneePostCode', res.data.consigneePostCode)
|
// var data = JSON.parse(res.data);
|
// var item = data.rs.find(item => {
|
// return item.POSTCODE.length === 6;
|
// });
|
// if (item) {
|
// }
|
}
|
})
|
},
|
// 改变省市区
|
// addressChange() {
|
// const addr =
|
// (this.formData.provinceName || "") +
|
// (this.formData.cityName || "") +
|
// (this.formData.regionName || "");
|
// this.formData.consigneeAddress = addr;
|
// },
|
// 收件人手机号带出收件人信息
|
blurConsigneeMobile() {
|
if (!this.formData.consigneeMobile) return
|
// 修改单子不带入
|
if (this.formData.wayBill_Id > 0) return
|
|
const url = '/api/tms/wayBillUpload/getConsigneeInfo'
|
const params = {
|
consigneeMobile: this.formData.consigneeMobile
|
}
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res)
|
if (res.result) {
|
this.$set(this.formData, 'consigneeName', res.data.consigneeName)
|
this.$set(this.formData, 'consigneeIdcard', res.data.consigneeIdcard)
|
this.$set(this.formData, 'provinceName', res.data.provinceName)
|
this.$set(this.formData, 'cityName', res.data.cityName)
|
this.$set(this.formData, 'regionName', res.data.regionName)
|
this.$set(this.formData, 'consigneeAddress', res.data.consigneeAddress)
|
}
|
},
|
true
|
)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.sub-item {
|
display: inline-block;
|
.sub-title {
|
width: 150px;
|
text-align: right;
|
font-weight: bold;
|
display: inline-block;
|
padding-right: 5px;
|
}
|
}
|
.step3 {
|
margin-top: 50px;
|
text-align: center;
|
.step3-finished {
|
width: 80px;
|
height: 80px;
|
border-radius: 40px;
|
background-color: #409eff;
|
display: inline-block;
|
|
padding: 13px;
|
.icon {
|
font-size: 60px;
|
color: white;
|
}
|
}
|
.text {
|
font-size: 14px;
|
color: #888;
|
padding: 10px 30px 100px;
|
}
|
}
|
|
.img-container {
|
left: 900px;
|
top: 400px;
|
width: 0;
|
height: 0;
|
overflow: visible;
|
margin: 0;
|
|
.el-tabs__header {
|
margin: 0;
|
}
|
}
|
/deep/ .el-input-number.is-controls-right .el-input__inner {
|
padding-left: 2px;
|
padding-right: 30px;
|
}
|
</style>
|
