Commit 583b15cb authored by 我在何方's avatar 我在何方

添加合单拆单申请UI

parent 54c61d57
......@@ -251,7 +251,7 @@
import {getOffer,deleteOffer} from '@/api/ecw/offer'
import {getProductAttrList} from '@/api/ecw/productAttr'
import {getCustomerList,getCustomer} from '@/api/ecw/customer'
import {getChannelLists,getChannel} from '@/api/ecw/channel'
import {getChannelList,getChannel} from '@/api/ecw/channel'
import {openedRouterList as getOpenedRouterList} from '@/api/ecw/warehouse'
export default {
name: "detail",
......@@ -289,7 +289,7 @@
that.list = response.data;
that.list.transportRespVOList.forEach((item)=>{
if(item.channelIds){
getChannelLists({ids:item.channelIds}).then(res=>{
getChannelList({ids:item.channelIds}).then(res=>{
item.channelData = res.data
})
}
......
......@@ -16,8 +16,6 @@
<el-descriptions-item label="送货日期">
{{orderData.date?orderData.date:''}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="3">
<el-descriptions-item label="运输方式">
<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
</el-descriptions-item>
......@@ -27,6 +25,8 @@
<el-descriptions-item label="目的地">
{{importCityName(orderData.startWarehouseId)}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="4">
<el-descriptions-item label="发货人">
{{orderData.consignorVO?orderData.consignorVO.name||'':''}}
</el-descriptions-item>
......@@ -36,6 +36,8 @@
<el-descriptions-item label="发货电话">
{{orderData.consignorVO?orderData.consignorVO.phone||'':''}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="4">
<el-descriptions-item label="收货人">
{{orderData.consigneeVO?orderData.consigneeVO.name||'':''}}
</el-descriptions-item>
......
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<el-card>
<div slot="header" class="card-title">合单申请-{{orderData.orderSn||''}}</div>
<el-descriptions :column="4">
<el-descriptions-item label="唛头">
{{orderData.marks?orderData.marks:''}}
</el-descriptions-item>
<el-descriptions-item label="已到箱数/总箱数">
{{orderData.sumNum?orderData.sumNum:0+'/'+orderData.totalNum?orderData.totalNum:0}}
</el-descriptions-item>
<el-descriptions-item label="订单状态">
<dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
</el-descriptions-item>
<el-descriptions-item label="送货日期">
{{orderData.date?orderData.date:''}}
</el-descriptions-item>
<el-descriptions-item label="运输方式">
<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
</el-descriptions-item>
<el-descriptions-item label="出货渠道">
{{orderData.channelName||'/'}}
</el-descriptions-item>
<el-descriptions-item label="始发地">
{{importCityName(orderData.startWarehouseId)}}
</el-descriptions-item>
<el-descriptions-item label="目的地">
{{importCityName(orderData.startWarehouseId)}}
</el-descriptions-item>
<el-descriptions-item label="发货人姓名">
{{orderData.consignorVO?orderData.consignorVO.name||'':''}}
</el-descriptions-item>
<el-descriptions-item label="发货公司">
{{orderData.consignorVO?orderData.consignorVO.company||'':''}}
</el-descriptions-item>
<el-descriptions-item label="发货电话">
{{orderData.consignorVO?orderData.consignorVO.phone||'':''}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="4">
<el-descriptions-item label="收货人姓名">
{{orderData.consigneeVO?orderData.consigneeVO.name||'':''}}
</el-descriptions-item>
<el-descriptions-item label="收货公司">
{{orderData.consigneeVO?orderData.consigneeVO.company||'':''}}
</el-descriptions-item>
<el-descriptions-item label="收货电话">
{{orderData.consigneeVO?orderData.consigneeVO.phone||'':''}}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="card">
<!-- 列表 -->
<div slot="header" class="card-title">已合单订单</div>
<el-table v-loading="loading" border :data="list">
<el-table-column label="序号" align="center" prop="id" type="index">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="订单号" align="center" scope="orderSn" />
<el-table-column label="唛头" align="center" scope="marks" />
<el-table-column label="始发地" align="center">
<template slot-scope="scope">
<span>{{importCityName(scope.row.startWarehouseId)}}</span>
</template>
</el-table-column>
<el-table-column label="入仓货物属性" align="center">
<template slot-scope="scope">
<span>合计:</span>
<span>{{scope.row.totalNum+''+scope.row.volume+''+scope.row.weight+'kg'}}</span>
</template>
</el-table-column>
<el-table-column label="入仓时间" align="center" prop='createTime' />
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
</el-card>
<el-card class="card">
<!-- 列表 -->
<div slot="header" class="card-title">待合单订单</div>
<el-table border :data="singleData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="序号" align="center" prop="id" type="index">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="订单号" align="center" scope="orderSn" />
<el-table-column label="唛头" align="center" scope="marks" />
<el-table-column label="始发地" align="center">
<template slot-scope="scope">
<span>{{importCityName(scope.row.startWarehouseId)}}</span>
</template>
</el-table-column>
<el-table-column label="入仓货物属性" align="center">
<template slot-scope="scope">
<span>合计:</span>
<span>{{scope.row.totalNum+''+scope.row.volume+''+scope.row.weight+'kg'}}</span>
</template>
</el-table-column>
<el-table-column label="入仓时间" align="center" prop='createTime' />
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<el-row v-if="singleData.length>0">
<el-checkbox v-model="checked">需要仓库打包</el-checkbox>
</el-row>
</el-card>
<div slot="footer" class="card">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button plain type="primary" @click="submitForm">取消</el-button>
</div>
</div>
</template>
<script>
import {getOrderExceptionPage} from "@/api/ecw/orderException"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from '@/utils/dict'
import {getChannel} from '@/api/ecw/channel'
export default {
name: "SingleApply",
components: {
},
data() {
return {
checked:false,
orderData:{},
// 订单异常列表
list: [],
singleData:[],
tradeCityList:[],
multipleSelection:[],
loading:false
};
},
created() {
// this.getList();
getTradeCityList().then(res => this.tradeCityList = res.data)
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
// 执行查询
getOrderExceptionPage(this.queryParams).then(response => {
this.list = response.data.list;
this.total = response.data.total;
this.orderData = response.data
this.loading = false;
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
importCityName(id){
var arr = this.tradeCityList.filter(item => item.id == id)
return arr.length>0?arr[0].titleZh:''
},
getChannelName(){
getChannel(this.orderData.channelId).then(res=>{
this.orderData.channelName = res.data.nameZh
})
},
submitForm(){
}
}
}
</script>
<style>
.card-title{
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.card{
margin-top: 20px;
}
</style>
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<el-card>
<div slot="header" class="card-title">拆单申请-{{orderData.orderSn||''}}</div>
<div class="btn-header">
<span class="card-title">原单信息</span>
<div>
<span v-if="orderData.status==0" class="red">异常无法拆单</span>
<el-button v-else type="primary" @click="addSplit">新建拆单 </el-button>
</div>
</div>
<el-descriptions :column="4">
<el-descriptions-item label="唛头">
{{orderData.marks?orderData.marks:''}}
</el-descriptions-item>
<el-descriptions-item label="已到箱数/总箱数">
{{orderData.sumNum?orderData.sumNum:0+'/'+orderData.totalNum?orderData.totalNum:0}}
</el-descriptions-item>
<el-descriptions-item label="订单状态">
<dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
</el-descriptions-item>
<el-descriptions-item label="送货日期">
{{orderData.date?orderData.date:''}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="4">
<el-descriptions-item label="运输方式">
<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
</el-descriptions-item>
<el-descriptions-item label="始发地">
{{importCityName(orderData.startWarehouseId)}}
</el-descriptions-item>
<el-descriptions-item label="目的地">
{{importCityName(orderData.startWarehouseId)}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="4">
<el-descriptions-item label="发货人姓名">
{{orderData.consignorVO?orderData.consignorVO.name||'':''}}
</el-descriptions-item>
<el-descriptions-item label="发货公司">
{{orderData.consignorVO?orderData.consignorVO.company||'':''}}
</el-descriptions-item>
<el-descriptions-item label="发货电话">
{{orderData.consignorVO?orderData.consignorVO.phone||'':''}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="4">
<el-descriptions-item label="收货人姓名">
{{orderData.consigneeVO?orderData.consigneeVO.name||'':''}}
</el-descriptions-item>
<el-descriptions-item label="收货公司">
{{orderData.consigneeVO?orderData.consigneeVO.company||'':''}}
</el-descriptions-item>
<el-descriptions-item label="收货电话">
{{orderData.consigneeVO?orderData.consigneeVO.phone||'':''}}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="card">
<!-- 列表 -->
<div slot="header" class="card-title">货物信息</div>
<el-table v-loading="loading" border :data="orderData.list" :summary-method="getSummaries" show-summary>
<el-table-column label="序号" align="center" prop="id" type="index">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="品名" align="center" scope="orderSn">
<template slot-scope="scope">
<el-row>{{scope.row.prodTitleEn}}</el-row>
<el-row>{{scope.row.prodTitleZh}}</el-row>
</template>
</el-table-column>
<el-table-column label="填单货物属性" align="center">
<template slot-scope="scope">
<el-row>
<span>品牌:
<dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
</span>
</el-row>
<el-row>
<span>箱数:{{scope.row.totalNum}}</span>
</el-row>
<el-row>
<span>体积:{{scope.row.volume}}</span>
</el-row>
<el-row>
<span>重量:{{scope.row.weight}}kg</span>
</el-row>
</template>
</el-table-column>
<el-table-column label="入库货物属性" align="center">
<template slot-scope="scope">
<el-row>
<span>规格:{{scope.row.boxGauge}}</span>
</el-row>
<el-row>
<span>品牌:
<dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
</span>
<span style="margin-left: 10px;">箱数:{{scope.row.totalNum}}</span>
<span style="margin-left: 10px;">体积:{{scope.row.volume}}</span>
<span style="margin-left: 10px;">重量:{{scope.row.weight}}kg</span>
</el-row>
</template>
</el-table-column>
<el-table-column label="最后操作时间" align="center" prop='createTime' />
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
</el-card>
<el-card class="card" v-if="splitData.length>0">
<!-- 列表 -->
<div slot="header" class="card-title">拆单信息</div>
<div v-for="(item, index) in splitData" :key="index">
<div class="btn-header">
<div>
<span class="card-title">
{{item.orderSn}}
</span>
<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="item.transportId" />
<span>发往:{{importCityName(item.startWarehouseId)}}</span>
</div>
<div>
<el-button type="primary" @click="addShop(index)">放入</el-button>
<el-button type="primary" plain @click="deleteSplit(index)">删除</el-button>
</div>
</div>
<el-table border :data="item.list">
<el-table-column label="序号" align="center" prop="id" type="index">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="中文名" align="center" scope="prodTitleZh" />
<el-table-column label="英文名" align="center" scope="prodTitleEn" />
<el-table-column label="品牌" align="center" scope="brandType">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
</template>
</el-table-column>
<el-table-column label="体积" align="center" >
<template slot-scope="scope">
<span>{{scope.row.volume}}</span>
</template>
</el-table-column>
<el-table-column label="重量" align="center">
<template slot-scope="scope">
<span>{{scope.row.weight}}</span>
</template>
</el-table-column>
<el-table-column label="箱数" align="center">
<template slot-scope="scope">
<span>{{scope.row.num}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-delete" @click="removeShop(index,scope.$index)">移出</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<div slot="footer" class="card">
<el-button v-if="orderData.status!=0" type="primary" @click="submitForm">提交申请</el-button>
<el-button plain type="primary" @click="submitForm">取消</el-button>
</div>
<!-- 对话框(添加 / 修改) -->
<el-dialog title="新建拆单" :visible.sync="open" width="400px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-form-item label="运输方式">
<dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="form.transportId" formatter="number"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="目的仓库:" >
<el-select v-model="form.destWarehouseId" placeholder="请选择目的仓库" @change="changeDest">
<el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="出货渠道">
<el-select v-model="form.channelId" placeholder="请选择出货渠道">
<el-option v-for="item in channelData" :key="item.channelId" :label="item.nameZh" :value="item.channelId"/>
</el-select>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="haddleAdd">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 对话框(添加 / 修改) -->
<el-dialog title="放入品名" :visible.sync="openShop" width="400px" append-to-body>
<el-form ref="shopForm" :model="shopForm" :rules="shopRules" label-width="80px">
<el-row>
<el-form-item label="中文品名:">
<el-select v-model="shopForm.prodTitleZh" placeholder="请选择中文品名" @change="changeProdTitleZh">
<el-option v-for="item in splitData.list" :label="item.prodTitleZh" :value="item.prodTitleZh" :key="item.prodTitleZh" ></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="英文品名:" >
<el-select v-model="shopForm.prodTitleEn" placeholder="请选择英文品名" @change="changeProdTitleEn">
<el-option v-for="item in splitData.list" :label="item.prodTitleEn" :value="item.prodTitleEn" :key="item.prodTitleEn" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="剩余箱数:">
{{shopForm.sum||0}}
</el-form-item>
<el-form-item label="放入箱数:">
<el-input-number v-model="shopForm.num" controls-position="right" :min="1" :max="shopForm.sum"></el-input-number>
</el-form-item>
<el-form-item label="备注信息:">
<el-input v-model="shopForm.remarks"></el-input>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="shopAdd">确 定</el-button>
<el-button @click="shopCancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {getOrderExceptionPage} from "@/api/ecw/orderException"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from '@/utils/dict'
import {getChannelPage} from '@/api/ecw/channel'
export default {
name: "SplitApply",
components: {
},
data() {
return {
checked:false,
orderData:{},
splitData:[],
splitIndex:0,
channelData:[],
tradeCityList:[],
multipleSelection:[],
loading:false,
open:false,
form:{
},
openShop:false,
shopForm:{},
// 表单校验
rules: {
transportId: [{ required: true, message: "请选择运输方式", trigger: "blur" }],
warehouseIds: [{ required: true, message: "请选择目的仓库", trigger: "blur" }],
channelId: [{ required: true, message: "请选择出货渠道", trigger: "blur" }],
},
// 表单校验
shopRules: {
prodTitleZh: [{ required: true, message: "请选择中文品名", trigger: "blur" }],
prodTitleEn: [{ required: true, message: "请选择英文品名", trigger: "blur" }],
},
query:{
pageSize:20,
pageNo:1,
}
};
},
created() {
// this.getList();
getTradeCityList().then(res => this.tradeCityList = res.data)
},
computed:{
importCityList(){
return this.tradeCityList.filter(item => item.type == 1)
}
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
// 执行查询
getOrderExceptionPage(this.queryParams).then(response => {
this.orderData = response.data
this.form.destWarehouseId = response.data.destWarehouseId
this.loading = false;
this.query.warehouseIds = response.data.destWarehouseId
this.getChannel()
});
},
getChannel(){
getChannelPage(this.query).then(res=>this.channelData = res.data.list)
},
changeDest(){
this.query.warehouseIds = this.form.destWarehouseId
this.getChannel()
},
getSummaries(){
const sums = [];
if(!this.orderData || !this.orderData.list ||ths.orderData.length==0){
return sums
}
sums[0] = '小计'
var orderSum = 0
var orderV = 0
var orderW = 0
var leviteSum = 0
var leviteV = 0
var leviteW = 0
this.orderData.list.forEach((column, index) => {
orderSum += column.orderSum
orderV += column.volume
orderW += column.weight
leviteSum += column.orderSum
leviteV += column.volume
leviteW += column.weight
});
sums[1] = ''
sums[2] = '下单统计:'+ orderSum+''+ orderV +'' + orderW + ' kg'
sums[3] = '入仓统计:'+ leviteSum+''+ leviteV +'' + leviteW + ' kg'
sums[4] = ''
sums[5] = ''
return sums;
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
importCityName(id){
var arr = this.tradeCityList.filter(item => item.id == id)
return arr.length>0?arr[0].titleZh:''
},
submitForm(){
},
addShop(index){
this.splitIndex = index
this.shopForm.prodTitleZh = this.orderData.list[0].prodTitleZh
this.shopForm.prodTitleEn = this.orderData.list[0].prodTitleEn
var sum = list.num
this.splitData.list.forEach((item)=>{
if(item.prodTitleZh == this.shopForm.prodTitleZh){
sum -= item.num
}
})
this.shopForm.sum = sum
this.shopOpen = true
},
addSplit(){
this.open = true
},
changeProdTitleZh(){
var list = []
list = this.orderData.list.filter(item=>item.prodTitleZh == this.shopForm.prodTitleZh)
var sum = list.num
this.splitData.list.forEach((item)=>{
if(item.prodTitleZh == this.shopForm.prodTitleZh){
sum -= item.num
}
})
this.shopForm.sum = sum
this.shopForm.prodTitleEn = list[0].prodTitleEn
},
changeProdTitleEn(){
var list = []
list = this.orderData.list.filter(item=>item.prodTitleEn == this.shopForm.prodTitleEn)
var sum = list.num
this.splitData.list.forEach((item)=>{
if(item.prodTitleEn == this.shopForm.prodTitleEn){
sum -= item.num
}
})
this.shopForm.sum = sum
this.shopForm.prodTitleZh = list[0].prodTitleZh
},
haddleAdd(){
this.$refs["form"].validate(valid => {
if (!valid) {
return;
}
})
this.splitData.push(this.form)
if(this.splitData.length==0){
this.splitData[0].list = this.orderData.list
}
this.open = false
},
cancel(){
this.open = false
this.form = {}
},
shopAdd(){
this.$refs["shopForm"].validate(valid => {
if (!valid) {
return;
}
})
var isExit = this.splitData[this.splitIndex].list.filter(item=>item.prodTitleEn == this.shopForm.prodTitleEn)
if(isExit&&isExit.length==1){
this.splitData[this.splitIndex].list.forEach((item)=>{
item.num = this.shopForm.num
item.remarks = this.shopForm.remarks
})
}else{
var list = this.orderData.list.filter(item=>item.prodTitleEn == this.shopForm.prodTitleEn)
list.num = this.shopForm.num
list.remarks = this.shopForm.remarks
this.splitData[this.splitIndex].list.push(list)
}
this.shopOpen = false
},
removeShop(splitIndex,index){
this.splitData[splitIndex].list.splice(index,1)
},
shopCancel(){
this.shopOpen = false
this.shopForm = {}
},
/** 删除按钮操作 */
deleteSplit(index) {
const orderId = this.splitData[index].orderSn
this.$modal.confirm('是否确认删除订单号为"' + orderId + '"的数据项?').then(function () {
this.splitData.splice(index,1)
}).then(() => {
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
}
}
</script>
<style>
.card-title{
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.card{
margin-top: 20px;
}
.btn-header{
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px 0;
}
.red{
color:#ff3430;
font-size: 15px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment