Commit 049a33e4 authored by huhaiqing's avatar huhaiqing

海运操作理货界面开发

parent a7215a91
......@@ -740,6 +740,72 @@ export function extraCostList(params) {
/***************************** 报关费用 end **********************************/
/***************************** 理货 start **********************************/
/**
* 理货列表
*
* @export
* @param {*} data
* @return {*}
*/
export function getTallyList(data) {
return request({
url: "/shipment/box/tallyList",
method: "post",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
data: jsonToFormData(data),
});
}
/**
* 理货移出
*
* @export
* @param {*} data
* @return {*}
*/
export function tallyRemove(data) {
return request({
url: "/ecw/box-preload-goods/remove",
method: "post",
data,
});
}
/**
* 理货
*
* @export
* @param {*} data
* @return {*}
*/
export function tallyLocationUpdate(data) {
return request({
url: "/shipment/box/batchOrderLocationUpdate",
method: "post",
data,
});
}
/**
* 理货提交
*
* @export
* @param {*} data
* @return {*}
*/
export function tallyCommit(data) {
return request({
url: "/shipment/box/tallyCommit",
method: "post",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
data: jsonToFormData(data),
});
}
/***************************** 理货 end **********************************/
function jsonToFormData(params) {
const formData = new FormData();
for (const [key, value] of Object.entries(params)) {
......
......@@ -5,6 +5,7 @@
:visible.sync="opened"
width="600px"
:before-close="handleClose()"
v-bind="$attrs"
>
<el-tabs v-model="activeName" type="card" @tab-click="activeWarehouse = {}">
<el-tab-pane :label="item.name" :name="'' + index" v-for="(item, index) in area" :key="index">
......
......@@ -315,7 +315,7 @@ export default {
orderId: item.orderId,
};
if (type === "all") {
params.orderItemIdList = item.orderItemList.map(
params.orderItemIdList = item.boxOrderItemList.map(
(data) => data.orderItemId
);
} else {
......
<template>
<div class="shipping-batchTally">
<el-row v-if="$attrs.type === 'batchTally'">
<el-button type="text" size="small" @click="()=>openStorage('all')">批量修改储位</el-button>
</el-row>
<el-scrollbar viewClass="tally-list">
<el-row class="tally-detail" v-for="(item, index) in storageList" :key="item.id">
<div class="status-number">{{++index}}</div>
<div class="detail-info">
<div>入仓单号:{{item.orderNo}}</div>
<div>入仓统计:{{getTotlContent(item)}}</div>
<div class="detail-modify">
<el-tooltip effect="dark" :content="item.positionNo" placement="top">
<div>储位:{{item.positionNo}}</div>
</el-tooltip>
<el-button type="text" size="small" @click="()=>openStorage('single', item)">修改</el-button>
</div>
</div>
</el-row>
</el-scrollbar>
<el-row class="operate-button">
<el-button size="small" type="primary" @click="tallyModify">确定</el-button>
<el-button size="small" @click="$emit('closeDialog')">关闭</el-button>
</el-row>
<warehouse-area-dialog ref="area" :visible.sync="visible" v-model="storageSpaces" :order-id="orderId" :modal-append-to-body=false append-to-body v-if="visible" />
</div>
</template>
<script>
import { getTotlContent, serviceMsg } from "../../utils";
import WarehouseAreaDialog from "@/components/WarehouseAreaDialog";
import { deepClone } from "@/utils";
import { tallyLocationUpdate } from "@/api/ecw/boxSea";
export default {
name: "batchTally",
inheritAttrs: false,
components: { WarehouseAreaDialog },
props: {
tallyRows: Array,
},
data() {
return {
visible: false,
// 储位
storageSpaces: [],
// 订单ID
orderId: -1,
// 仓位数据
storageList: deepClone(this.tallyRows),
};
},
methods: {
getTotlContent,
// 打开储位
openStorage(type, item) {
if (type === "all") {
this.orderId = -1;
} else {
this.orderId = item.orderId;
}
this.visible = true;
},
// 修改储位
tallyModify() {
// 查找数据中存在storageList的订单
let orderLocationList = [];
this.storageList.forEach((item) => {
const { storageList } = item;
if (storageList && storageList.length) {
storageList.forEach((sItem) => {
orderLocationList.push({
...sItem,
orderId: item.orderId,
});
});
}
});
if (orderLocationList.length === 0) {
this.$message.error("没有需要修改储位的订单");
return;
}
tallyLocationUpdate({
shipmentId: this.$attrs.shipmentObj.id,
orderLocationList,
}).then((res) => {
serviceMsg(res, this).then(() => {
this.$emit("closeDialog", "query");
});
});
},
},
watch: {
storageSpaces(val) {
let newList = [];
const { selected = [] } = this.$refs.area;
// 批量修改储位
if (this.orderId === -1) {
newList = this.storageList.map((item) => {
item.positionNo = selected.join(",");
item.storageList = val;
return item;
});
} else {
newList = this.storageList.map((item) => {
if (item.orderId === this.orderId) {
item.positionNo = selected.join(",");
item.storageList = val;
}
return item;
});
}
this.storageList = newList;
},
},
};
</script>
<style lang="scss">
.shipping-batchTally {
.el-scrollbar__wrap {
max-height: 500px;
.tally-list {
.tally-detail {
display: flex;
padding: 10px 0px;
border-bottom: 1px solid rgb(223, 230, 236);
.status-number {
width: 26px;
height: 26px;
border: 1px solid #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}
.detail-info {
> div {
height: 30px;
line-height: 30px;
}
.detail-modify {
display: flex;
align-items: center;
> :first-child {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px;
}
}
}
}
> .tally-detail:last-child {
border-bottom: none;
}
}
}
}
</style>
<template>
<div class="shipping-tally">
<el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
<el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="22">
<el-card>
<el-descriptions :column="4" border>
<el-descriptions-item label="自编号">
{{shipmentObj.selfNo}}
</el-descriptions-item>
<el-descriptions-item label="运输方式">
<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
</el-descriptions-item>
<el-descriptions-item label="始发地">
{{getCityName(shipmentObj.startWarehouseId)}}
</el-descriptions-item>
<el-descriptions-item label="目的地">
{{getCityName(shipmentObj.destWarehouseId)}}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-row style="margin-top: 15px">
<el-row>
<el-button size="small" type="primary" @click="()=>tallyClick('batch')">批量理货</el-button>
<el-button size="small" type="primary" @click="()=>removeClick('batch')">批量移出</el-button>
</el-row>
<el-row style="margin-top: 5px">
<el-table border :data="tallyList" @select="checkboxSelect" @select-all="checkboxSelect" max-height="600px">
<el-table-column type="selection" align="center" width="55" fixed="left" />
<el-table-column type="index" align="center" label="序号" width="50" />
<el-table-column label="订单号" align="center" prop="orderNo" />
<el-table-column label="商品信息" width="250px" align="center" prop="prodTitleZh">
</el-table-column>
<el-table-column label="备案" align="center" prop="productRecord">
<template v-slot="{row}">
<dict-tag :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" :value="row.productRecord" />
</template>
</el-table-column>
<el-table-column label="箱数" align="center" prop="num" />
<el-table-column label="纸箱尺寸" align="center" prop="boxGauge">
</el-table-column>
<el-table-column label="体积" align="center" prop="volume">
</el-table-column>
<el-table-column label="重量" align="center" prop="weight">
</el-table-column>
<el-table-column label="数量(个)" align="center" prop="quantity"></el-table-column>
<el-table-column label="储位" align="center" prop="positionNo" width="250px"></el-table-column>
<el-table-column label="状态" align="center" prop="tallyStatus">
<template slot-scope="scope">
{{scope.row.tallyStatus === 1 ? '已理货' : '未理货'}}
</template>
</el-table-column>
<el-table-column label="理货时间" align="center" prop="tallyTime">
<template slot-scope="scope">
{{formatDate(scope.row.tallyTime,'YYYY-MM-DD HH:mm:ss')}}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="small" @click="tallyClick('single',scope.row)">理货</el-button>
<el-button type="text" size="small" @click="removeClick('single',scope.row)">移出</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</el-row>
<el-row style="margin-top: 15px" class="operate-button">
<el-button size="small" type="primary" @click="tallyFinish">完成理货</el-button>
<el-button size="small" @click="cancel">取消</el-button>
</el-row>
</el-col>
</el-row>
<!-- 对话框 -->
<el-dialog custom-class="shipping-dialog" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :fullscreen="dialogConfig.fullscreen" :width="dialogConfig.width" :modal-append-to-body=false append-to-body>
<batchTally v-if="dialogConfig.dialogVisible" v-bind="$attrs" @closeDialog="closeDialog" :type="dialogConfig.type" :tallyRows="tallyRows" :shipmentObj="shipmentObj" />
</el-dialog>
</div>
</template>
<script>
import batchTally from "./batchTally.vue";
import { getTallyList, tallyRemove, tallyCommit } from "@/api/ecw/boxSea";
import { formatDate, serviceMsg } from "../../utils";
export default {
name: "tally",
inheritAttrs: false,
components: {
batchTally,
},
props: {
shipmentObj: Object,
},
data() {
return {
tallyList: [],
// 理货数据
tallyRows: [],
// 勾选行
selectedRows: [],
// 弹窗配置
dialogConfig: {
title: "",
dialogVisible: false,
width: "30%",
type: "",
fullscreen: false,
},
};
},
created() {
this.getList();
},
methods: {
// 格式化日期
formatDate,
// 查询理货列表
getList() {
getTallyList({ shipmentId: this.shipmentObj.id }).then((res) => {
let list = [];
res.data.forEach((item) => {
item.orderItemList.forEach((oItem) => {
list.push({
...oItem,
positionNo: item.positionNo,
tallyStatus: item.tallyStatus,
tallyTime: item.tallyTime,
});
});
});
this.tallyList = list;
});
},
// 选中
checkboxSelect(selection) {
this.selectedRows = selection;
},
// 理货点击
tallyClick(type, data) {
if (type === "batch") {
if (this.selectedRows.length === 0) {
this.$message.error("请选择需要理货的订单");
return;
}
this.tallyRows = this.selectedRows;
this.showDialog("batchTally");
} else {
this.tallyRows = [data];
this.showDialog("singleTally");
}
},
// 移出点击
removeClick(type, data) {
let orderNos = [],
orderIds = [];
if (type === "batch") {
if (this.selectedRows.length === 0) {
this.$message.error("请选择需要移出的订单");
return;
}
orderNos = this.selectedRows.map((item) => item.orderNo);
orderIds = this.selectedRows.map((item) => item.orderId);
} else {
orderNos = [data.orderNo];
orderIds = [data.orderId];
}
let msgTitle = `您确定要将 ${orderNos.join("")} 移出 ${
this.shipmentObj.selfNo
} 吗?`;
this.$confirm(msgTitle, "提示", {
type: "warning",
})
.then((_) => {
tallyRemove({
orderIdLIst: orderIds,
shipmentId: this.shipmentObj.id,
}).then((res) => {
serviceMsg(res, this).then(() => {
this.getList();
});
});
})
.catch((_) => {});
},
// 关闭弹窗
closeDialog(type) {
this.$set(this.dialogConfig, "dialogVisible", false);
if (type === "query") {
this.getList();
}
},
// 打开弹窗
showDialog(type) {
switch (type) {
case "batchTally":
this.$set(this.dialogConfig, "title", "批量理货");
this.$set(this.dialogConfig, "width", "500px");
break;
case "singleTally":
this.$set(this.dialogConfig, "title", "理货确认");
this.$set(this.dialogConfig, "width", "500px");
break;
}
this.$set(this.dialogConfig, "type", type);
this.$set(this.dialogConfig, "dialogVisible", true);
},
/** 取消 */
cancel(type) {
this.$emit("closeDialog", type);
},
// 理货完成
tallyFinish() {
tallyCommit({ shipmentId: this.shipmentObj.id }).then((res) => {
serviceMsg(res, this).then(() => {
this.$emit("closeDialog", "submit");
});
});
},
},
computed: {
/* 获取仓库 */
getCityName() {
return (id) => {
let arr = this.$attrs.warehouseList.filter((item) => item.id == id);
return arr.length > 0 ? arr[0].titleZh : "";
};
},
},
};
</script>
<style lang="scss" scoped>
</style>
......@@ -5,29 +5,19 @@
<el-row class="number-area">
<p class="label-font">自编号:</p>
<p class="label-font">{{selfNo}}</p>
<el-input v-model="labelNo"
placeholder="请输入标签号"></el-input>
<el-input v-model="labelNo" placeholder="请输入标签号"></el-input>
<div>
<el-button type="primary"
@click="modifyBatchUnload">批量输入</el-button>
<el-button type="primary"
@click="modifyAllUnload">一键卸柜</el-button>
<el-button type="primary" @click="modifyBatchUnload">批量输入</el-button>
<el-button type="primary" @click="modifyAllUnload">一键卸柜</el-button>
</div>
</el-row>
<!-- 当前部分 -->
<el-row class="number-area">
<p class="label-font">当前部分:</p>
<el-select placeholder="请选择"
v-model="sectionId"
@change="sectionChange">
<el-option key="0"
label="全部"
value="0"></el-option>
<el-option v-for="item in sectionList"
:key="item.id"
:label="item.title"
:value="item.id"></el-option>
<el-select placeholder="请选择" v-model="sectionId" @change="sectionChange">
<el-option key="0" label="全部" value="0"></el-option>
<el-option v-for="item in sectionList" :key="item.id" :label="item.title" :value="item.id"></el-option>
</el-select>
<p>
{{getSectionInfo}}
......@@ -36,58 +26,32 @@
<!-- 表格 -->
<el-row class="table-area">
<el-table v-loading="loading"
:data="pageData.sectionOrderList"
border>
<el-table-column label="序号"
type="index"
align="center"
width="50" />
<el-table-column label="订单号"
align="center"
prop="orderNo">
<el-table v-loading="loading" :data="pageData.sectionOrderList" border>
<el-table-column label="序号" type="index" align="center" width="50" />
<el-table-column label="订单号" align="center" prop="orderNo">
<template slot-scope="scope">
<a href="javascript:void(0);"
class="order-href">{{ scope.row.orderNo }}</a>
<a href="javascript:void(0);" class="order-href">{{ scope.row.orderNo }}</a>
</template>
</el-table-column>
<el-table-column label="商品信息"
align="center"
prop="goodsList">
<el-table-column label="商品信息" align="center" prop="goodsList">
<template slot-scope="scope">
<section class="table-goodList">
<div v-for="(item, index) in scope.row.goodsList"
:key="index"
class="goodList-div">
<div v-for="(item, index) in scope.row.goodsList" :key="index" class="goodList-div">
<p>{{index+1}}{{item.prodTitleZh}}</p>
</div>
</section>
</template>
</el-table-column>
<el-table-column label="实装箱数"
align="center"
prop="installNum" />
<el-table-column label="卸柜箱数"
align="center"
prop="unloadNum" />
<el-table-column label="清关状态"
align="center"
prop="">
<el-table-column label="实装箱数" align="center" prop="installNum" />
<el-table-column label="卸柜箱数" align="center" prop="unloadNum" />
<el-table-column label="清关状态" align="center" prop="">
<template slot-scope="scope">{{clearStatus(scope.row)}}</template>
</el-table-column>
<el-table-column label="体积"
align="center"
prop="volume" />
<el-table-column label="重量"
align="center"
prop="weight" />
<el-table-column label="操作"
align="center"
class-name="small-padding fixed-width">
<el-table-column label="体积" align="center" prop="volume" />
<el-table-column label="重量" align="center" prop="weight" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="danger"
size="small"
@click="openError(scope.row)">异常</el-button>
<el-button type="danger" size="small" @click="openError(scope.row)">异常</el-button>
</template>
</el-table-column>
</el-table>
......@@ -110,21 +74,12 @@
</el-row>
<el-row>
<el-button type="success"
@click="onSubmit">卸柜完成</el-button>
<el-button type="success" @click="onSubmit">卸柜完成</el-button>
</el-row>
<!-- 对话框 -->
<el-dialog custom-class="shipping-dialog"
title="异常"
:visible.sync="dialogVisible"
width="600px"
:modal-append-to-body=false
append-to-body>
<unloadingError v-if="dialogVisible"
@closeDialog="closeDialog"
v-bind="$attrs"
:currRow="currRow" />
<el-dialog custom-class="shipping-dialog" title="异常" :visible.sync="dialogVisible" width="600px" :modal-append-to-body=false append-to-body>
<unloadingError v-if="dialogVisible" @closeDialog="closeDialog" v-bind="$attrs" :currRow="currRow" />
</el-dialog>
</div>
</template>
......@@ -188,6 +143,7 @@ export default {
});
},
methods: {
getTotlContent,
/* 获取卸柜数据 */
getLoadGoodsList() {
this.loading = true;
......@@ -247,9 +203,9 @@ export default {
this.$emit("closeStart");
},
/* 关闭弹窗 */
closeDialog() {
closeDialog(type) {
this.dialogVisible = false;
this.getLoadGoodsList();
if (type === "query") this.getLoadGoodsList();
},
/* 打开异常 */
openError(row) {
......
......@@ -62,7 +62,7 @@ export default {
shipmentId: this.$attrs.shipmentObj.id,
}).then((res) => {
serviceMsg(res, this).then((res) => {
this.$emit("closeDialog");
this.$emit("closeDialog", "query");
});
});
}
......
......@@ -42,7 +42,8 @@ import arrivalWidget from "./nodePage/arrival.vue";
import cusClearanceWidget from "./nodePage/cusClearance.vue";
import unloadingWidget from "./nodePage/unloading/index.vue";
import settlementWidget from "./nodePage/settlement.vue";
import ReviewWidget from "./nodePage/review.vue";
import reviewWidget from "./nodePage/review.vue";
import tallyWidget from "./nodePage/tally/index.vue";
/**
* 海运流程图
......@@ -67,7 +68,8 @@ export default {
cusClearanceWidget,
unloadingWidget,
settlementWidget,
ReviewWidget,
reviewWidget,
tallyWidget,
},
props: {
shipmentObj: Object,
......@@ -137,12 +139,16 @@ export default {
case "agent":
this.$set(this.dialogConfig, "title", "代理商设置");
break;
// 理货
case "tally":
this.$set(this.dialogConfig, "fullscreen", true);
break;
// 预装
case "preinstall":
// 预装反审
const preStatus = this.shipmentObj[node.keyName];
if ([24, 25].includes(preStatus)) {
this.currentComponent = `ReviewWidget`;
this.currentComponent = `reviewWidget`;
this.$set(this.dialogConfig, "width", "700px");
this.$set(this.dialogConfig, "title", "预装反审");
} else {
......@@ -154,7 +160,7 @@ export default {
// 卸柜反审
const unStatus = this.shipmentObj[node.keyName];
if ([184, 185].includes(unStatus)) {
this.currentComponent = `ReviewWidget`;
this.currentComponent = `reviewWidget`;
this.$set(this.dialogConfig, "width", "700px");
this.$set(this.dialogConfig, "title", "卸柜反审");
}
......@@ -223,7 +229,7 @@ export default {
.shipping-chart {
display: flex;
padding: 10px 10px;
min-width: 1320px;
min-width: max-content;
.chart-nodes {
display: flex;
......
<template>
<div class="app-seaStepDetail">
<el-scrollbar :vertical="true" viewClass="shipping-step">
<!-- <div class="shipping-step"> -->
<template v-for="(step, index) in flatSeaStep">
<div :key="index" v-if="shipmentObj[step.voName] && columnsMapping[step.voName]" class="step-table">
<div class="step-title">{{step.title}}</div>
......@@ -11,7 +10,6 @@
</div>
</div>
</template>
<!-- </div> -->
</el-scrollbar>
</div>
</template>
......
......@@ -139,6 +139,7 @@ export default {
}
}
.operate-button {
padding-top: 10px;
text-align: center;
}
.two-element {
......
......@@ -17,6 +17,9 @@ function getStatusName(statu) {
statusName.set(24, "预装审核失败");
statusName.set(25, "预装审核成功");
statusName.set(2111, "未理货");
statusName.set(2112, "已理货");
statusName.set(31, "未派车");
statusName.set(32, "已派车");
......@@ -99,7 +102,7 @@ function seaBaseData() {
],
[
{
title: "预装",
title: "排单",
imgSrc: {
start: require("@/assets/images/shipping/yz-start.png"),
wait: require("@/assets/images/shipping/yz-wait.png"),
......@@ -118,6 +121,39 @@ function seaBaseData() {
end: [25],
},
},
{
title: "AGENT",
imgSrc: {
start: require("@/assets/images/shipping/agent-start.png"),
wait: require("@/assets/images/shipping/agent-wait.png"),
end: require("@/assets/images/shipping/agent-end.png"),
},
type: "agent",
voName: "agentInfo",
currStatus: "start",
},
],
[
{
title: "理货",
imgSrc: {
start: require("@/assets/images/shipping/lh-start.png"),
wait: require("@/assets/images/shipping/lh-wait.png"),
end: require("@/assets/images/shipping/lh-end.png"),
},
type: "tally",
dataKey: "16", // 字典数据键值
/**
* 理货状态:2111、未理货;2112、已理货
*/
voName: "tyTime",
keyName: "tyStatus",
status: {
start: [2111],
wait: [],
end: [2112],
},
},
{
title: "拖车",
imgSrc: {
......@@ -138,17 +174,6 @@ function seaBaseData() {
end: [32],
},
},
{
title: "AGENT",
imgSrc: {
start: require("@/assets/images/shipping/agent-start.png"),
wait: require("@/assets/images/shipping/agent-wait.png"),
end: require("@/assets/images/shipping/agent-end.png"),
},
type: "agent",
voName: "agentInfo",
currStatus: "start",
},
],
[
{
......
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