<template>
<div class="cabin-box">
<OrderMessage :order="orderMsg" :isSubOrder="isSubOrder"/>
<div class="panne-wrap" v-loading="loading">
<div v-for="(pannel, index) in pannelList" :key="index" class="panne-li">
<div class="pannel-box">
<el-row :gutter="50">
<el-col :span="4">
<div class="head-left">{{ pannel.soNo }}</div>
</el-col>
<el-col :span="11" class="head-middle">
<span>供应商：{{ pannel.supplierName }}</span>
<!-- <span>{{ pannel.shipName }}</span><span style="margin:0 5px;">/</span>
<span>{{ pannel.voyage }}</span> -->
</el-col>
</el-row>
</div>
<!-- 表格 -->
<EdaTable
:showPage="false"
:tableData="pannel.tableList"
:show-header="false"
:empty-text="$t('common.cargoListEmpty')"
>
<el-table-column :key="Math.random()" v-if="isSubOrder" width="60" align="center" >
<template #default="scope">
<el-radio
name="subOrderRadio"
v-model="subOrderRadio"
:label="scope.row.shippingResourcePoolId"
>{{''}}</el-radio>
</template>
</el-table-column>
<el-table-column :key="Math.random()" width="100">
<template #default="scope">
<img :src="scope.row.shipownerIcon" alt="" width="72" height="72">
</template>
</el-table-column>
<el-table-column :key="Math.random()" min-width="120">
<template #default="scope">
<div class="port-style">{{ scope.row.startLocationName }}</div>
<div class="time-style">{{ $filter.date(scope.row.departureTime,'YYYY-MM-DD') }}</div>
</template>
</el-table-column>
<el-table-column :key="Math.random()" min-width="110" align="center">
<template #default="scope">
<div class="ship-name">{{scope.row.shipName}}</div>
<div><img :src="transitionIcon" alt="" ></div>
<div class="ship-name">{{scope.row.voyage}}</div>
</template>
</el-table-column>
<el-table-column :key="Math.random()" min-width="120" align="right">
<template #default="scope">
<div class="port-style">{{ scope.row.endLocationName }}</div>
<div class="time-style">{{ $filter.date(scope.row.arrivalTime,'YYYY-MM-DD') }}</div>
</template>
</el-table-column>
<el-table-column :key="Math.random()" min-width="280">
<template #default="scope">
<div><span class="fade-out">补料截止：</span>{{ $filter.date(scope.row.addFedDeadline) }}</div>
<div><span class="fade-out">重柜截止：</span>{{ $filter.date(scope.row.heavyTankDeadline) }}</div>
<div><span class="fade-out">放行条截止：</span>{{ $filter.date(scope.row.releaseDeadline) }}</div>
<div><span class="fade-out">VGM截止：</span>{{ $filter.date(scope.row.vgmDeadline) }}</div>
</template>
</el-table-column>
<el-table-column :key="Math.random()" min-width="70">
<template #default="scope">
<div v-for="item in scope.row.edaResourcePoolStockDTOList" :key="item">
<dict-tag :options="box_size" :value="item.boxSize" />
</div>
</template>
</el-table-column>
<el-table-column :key="Math.random()" min-width="100">
<template #default="scope">
<div v-for="item in scope.row.edaResourcePoolStockDTOList" :key="item" style="color:#FF1D1D">
{{item.referencePrice || '-'}}
</div>
</template>
</el-table-column>
<el-table-column :key="Math.random()" min-width="120">
<template #default="scope">
<div v-for="item in scope.row.edaResourcePoolStockDTOList" :key="item">
<span class="fade-out">{{ $t("common.enableInventory") }}：</span>{{item.availableStock}}
</div>
</template>
</el-table-column>
<el-table-column :key="Math.random()" v-if="!isSubOrder" min-width="230">
<template #default="scope">
<div v-for="item in scope.row.edaResourcePoolStockDTOList" :key="item" style="margin-bottom:1px">
<span class="fade-out">{{ $t("common.lockInventory") }}：</span>
<el-input-number
size="small"
step-strictly
v-model="item.count"
placeholder="0"
min="-0.1"
precision="0"
controls-position="right"
@change="handleChangeLockInventory(scope.row.soNo,item)"
></el-input-number>
</div>
</template>
</el-table-column>
</EdaTable>
</div>
</div>
<div class="has-more" v-show="hasMore">
<span @click="clickLoadMore">{{$t('common.loadMoreResource')}}</span>
</div>
<div class="footer-save-wrap">
<el-button type="primary" @click="save" :disabled="!lockArr.length && !subOrderRadio">
{{$t("common.save")}}
</el-button>
<el-button type="default" plain @click="cancel">{{
$t("common.close")
}}</el-button>
</div>
</div>
</template>
<script>
import {computed,getCurrentInstance,onMounted,reactive,ref,toRefs,} from "vue";
import OrderMessage from "./components/orderMessage";
import moment from "moment";
import { getEnableCabinetResource, savaCargoPlan } from "@/api/order/order";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import transitionImg from '@/assets/images/operate/transition.png'
import overseasImg from '@/assets/images/operate/overseas.png'
// 订单管理->配舱
export default {
name: "Cabin-Allocate",
components: { OrderMessage },
setup(props, context) {
const router = useRouter();
const { proxy } = getCurrentInstance();
const store = useStore();
const routeRow = proxy.$route.params;
const { box_size } = proxy.useDict("box_size");
let loading = ref(false); // loading
const data = reactive({
pannelList: [], // 面板数据
isSubOrder: false, // 是否是子单配舱
hasMore: true, // 是否有更多
subOrderRadio: '', // 子单时选中的箱型
orderMsg: [],
list: [],
transitionIcon: transitionImg,
overseasIcon:overseasImg,
lockArr:[],
});
// computed
const renderTableValue = computed(() => (rowData, col) => {
if (col.format) {
return col.format(rowData);
}
return rowData[col.dataKey];
});
/** 获取-tabs全部页签 */
const visitedViews = computed(() => store.state.tagsView.visitedViews);
// 生命周期钩子
onMounted(() => {
data.isSubOrder = !!routeRow.subOrderCode;
getResource({ orderInfoId: routeRow.orderInfoId });
});
const onSubmit = () => {
context.emit("onSubmit", form);
};
const onCancel = () => {
context.emit("onCancel");
};
// 点击查询更多
const clickLoadMore = () => {
getResource({moreInfo: true}).then(() => {
data.hasMore = false
})
}
// 获取资源池数据
const getResource = async (req = {}) => {
const params = {
...routeRow,
...req,
};
try {
const res = await getEnableCabinetResource(params);
if (!res || !res.data) {
return;
}
data.orderMsg = res.data;
data.pannelList = data.orderMsg.edaShippingResourcePoolListVOs
data.pannelList.map((item)=> {
item.tableList = [item]
})
} catch (error) {}
};
/**
* @param cabinetBox 柜型尺寸 {boxSize: 0, boxSizeStr: '20GP', count: 0}
*/
// const calcInputTotalLimit = (cabinetBox) => {
// const totalInput = data.list.reduce((total, el) => {
// total =
// el.boxSize === cabinetBox.boxSize && typeof el.count === "number"
// ? total + el.count
// : total;
// return total;
// }, 0);
// // 获取到所有的对应柜型的数据，是否超过数值,超过提示填写值超过
// if (
// typeof cabinetBox.count === "number" &&
// cabinetBox.count < totalInput
// ) {
// ElMessage.error("锁定库存量超过待配舱数量");
// return false;
// }
// return true;
// };
// 输入锁定库存数量
const handleChangeLockInventory = (soNo,rowItem) => {
const { boxSize, count,shippingResourcePoolId } = rowItem; // 获取柜型和数量
let obj = {
count: count,
resourcePoolId:shippingResourcePoolId,
soNo: soNo,
}
let arrLocked = data.lockArr
if(arrLocked.length>0){
arrLocked.forEach((item)=>{
if(obj.resourcePoolId == item.resourcePoolId){
item.count = obj.count
item.resourcePoolId = obj.resourcePoolId
item.soNo = obj.soNo
}
else{
arrLocked.push(obj)
}
})
}
else{
arrLocked.push(obj)
}
//数组去重
for (var i = 0; i < arrLocked.length; i++) {
for (var j = i + 1; j < arrLocked.length; j++) {
if (arrLocked[i].resourcePoolId === arrLocked[j].resourcePoolId) {
arrLocked.splice(j, 1);
j = j - 1;
}
}
}
data.lockArr = arrLocked.filter(item =>{ return item.count > 0})
};
// 校验参数
const checkSubmitParams = () => {
for (const item of data.orderMsg.waitBerthList) {
// 如果是子单，且用户没有选中单选，则不允许提交
if (data.isSubOrder && !data.isSubOrder) return false
// if (!calcInputTotalLimit(item)) return false;
}
return true;
};
// 生成请求参数
const generateParams = () => {
const temp = {
orderCode: data.orderMsg.orderCode,
orderId: routeRow.orderInfoId,
subOrderCode: routeRow.subOrderCode
};
// 如果是子单
if (data.isSubOrder) {
const el = data.pannelList.find(item => item.shippingResourcePoolId === data.subOrderRadio)
temp.selectList = [{
count: 1,
resourcePoolId: el.shippingResourcePoolId,
soNo: el.soNo,
}]
return temp
}
else{
temp.selectList = data.lockArr
return temp;
}
};
const save = () => {
// 校验参数， 不通过直接返回
if (!checkSubmitParams()) {
return;
}
// 通过组装数据，调用保存接口
const params = generateParams();
savaCargoPlan(params).then((response) => {
proxy.$modal.msgSuccess('操作成功');
// 当前tab：
let view = visitedViews.value.find((n) => n.name === "CabinAllocate");
// 关闭当前tab
view &&
proxy.$tab.closePage(view).then(({ visitedViews }) => {
router.go(-1);
});
}).catch(() => {
// data.loading = false;
});
}
const cancel = () => {
// 当前tab：
let view = visitedViews.value.find((n) => n.name === "CabinAllocate");
// 关闭当前tab
view &&
proxy.$tab.closePage(view).then(({ visitedViews }) => {
router.go(-1);
});
};
return {
...toRefs(data),
routeRow,
loading,
renderTableValue,
clickLoadMore,
// calcComma,
handleChangeLockInventory,
save,
cancel,
onSubmit,
onCancel,
box_size,
};
},
};
</script>
<style lang="scss">
@import "@/assets/styles/variables.module.scss";
.cabin-box .insert-table-col .cell {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
// .cabin-box .table-col-item {
// border-right: 1px solid $eda-border-color;
// }
.cabinet-msg :deep(.el-descriptions__body) {
background: transparent;
}
.cabin-box :deep(.el-radio--default .el-radio__inner) {
border-color: $text-color;
}
.cabin-box :deep(.is-checked .el-radio__inner) {
border-color: #007BFF;
}
.table-col-key,
.table-col-value {
display: inline-block;
font-size: 14px;
}
.table-col-key {
color: $text-title-color;
}
.table-col-value {
color: $text-color;
font-weight: 400;
}
.has-more {
text-align: center;
font-size: 15px;
color: $text-more-color;
span {
display: inline-block;
padding: 4px;
cursor: pointer;
}
}
.head-left{
height: 28px;
// width: 164px;
padding-left: 10px;
line-height: 28px;
background: #E9F2FF;
border-radius: 4px 0 100px 0;
font-size: 14px;
color: #16BAD8;
font-weight: 600;
}
.head-middle{
font-size: 14px;
color: #8AA6CC;
margin-top: 4px;
}
.pannel-box {
background-color: $eda-pannel-bg-color;
// padding-bottom: 10px;
}
.port-style{
font-size: 14px;
color: #2C405A;
letter-spacing: 0;
font-weight: 600;
}
.time-style{
font-size: 14px;
color: #2C405A;
font-weight: 500;
}
.ship-name{
font-size: 12px;
color: #8AA6CC;
font-weight: 500;
}
.panne-li{
margin-bottom: 15px;
border: 1px solid #EBEEF5;
border-bottom: #EBEEF5;
}
.fade-out{
color: #98A2AD;
}
</style>
5087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
