649 lines
26 KiB
Vue
649 lines
26 KiB
Vue
|
<template>
|
||
|
|
<div class="p-2">
|
||
|
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||
|
|
<div v-show="showSearch" class="mb-[10px]">
|
||
|
|
<el-card shadow="hover">
|
||
|
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||
|
|
<el-form-item label="关联系统ID" prop="sid">
|
||
|
|
<el-input v-model="queryParams.sid" placeholder="请输入关联系统ID" clearable @keyup.enter="handleQuery" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="货件编号" prop="shipmentId">
|
||
|
|
<el-input v-model="queryParams.shipmentId" placeholder="请输入货件编号" clearable @keyup.enter="handleQuery" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="货件名称" prop="shipmentName">
|
||
|
|
<el-input v-model="queryParams.shipmentName" placeholder="请输入货件名称" clearable @keyup.enter="handleQuery" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="物流中心编码" prop="destinationFulfillmentCenterId">
|
||
|
|
<el-input v-model="queryParams.destinationFulfillmentCenterId" placeholder="请输入物流中心编码" clearable @keyup.enter="handleQuery" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="运输模式" prop="shippingMode">
|
||
|
|
<el-input v-model="queryParams.shippingMode" placeholder="请输入运输模式" clearable @keyup.enter="handleQuery" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="运输方案" prop="shippingSolution">
|
||
|
|
<el-input v-model="queryParams.shippingSolution" placeholder="请输入运输方案" clearable @keyup.enter="handleQuery" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="最后更新时间" prop="gmtModified">
|
||
|
|
<el-date-picker clearable v-model="queryParams.gmtModified" type="date" value-format="YYYY-MM-DD" placeholder="请选择最后更新时间" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="创建时间" prop="gmtCreate">
|
||
|
|
<el-date-picker clearable v-model="queryParams.gmtCreate" type="date" value-format="YYYY-MM-DD" placeholder="请选择创建时间" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="同步时间" prop="syncTime">
|
||
|
|
<el-date-picker clearable v-model="queryParams.syncTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择同步时间" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="计划发货日期" prop="staShipmentDate">
|
||
|
|
<el-date-picker
|
||
|
|
clearable
|
||
|
|
v-model="queryParams.staShipmentDate"
|
||
|
|
type="date"
|
||
|
|
value-format="YYYY-MM-DD"
|
||
|
|
placeholder="请选择计划发货日期"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="预计到货开始日" prop="staDeliveryStartDate">
|
||
|
|
<el-date-picker
|
||
|
|
clearable
|
||
|
|
v-model="queryParams.staDeliveryStartDate"
|
||
|
|
type="date"
|
||
|
|
value-format="YYYY-MM-DD"
|
||
|
|
placeholder="请选择预计到货开始日"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="预计到货截止日" prop="staDeliveryEndDate">
|
||
|
|
<el-date-picker
|
||
|
|
clearable
|
||
|
|
v-model="queryParams.staDeliveryEndDate"
|
||
|
|
type="date"
|
||
|
|
value-format="YYYY-MM-DD"
|
||
|
|
placeholder="请选择预计到货截止日"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="参考编号" prop="referenceId">
|
||
|
|
<el-input v-model="queryParams.referenceId" placeholder="请输入参考编号" clearable @keyup.enter="handleQuery" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="入库计划ID" prop="staInboundPlanId">
|
||
|
|
<el-input v-model="queryParams.staInboundPlanId" placeholder="请输入入库计划ID" clearable @keyup.enter="handleQuery" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
|
||
|
|
<el-card shadow="never">
|
||
|
|
<template #header>
|
||
|
|
<el-row :gutter="10" class="mb8">
|
||
|
|
<el-col :span="1.5">
|
||
|
|
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['amz:shipmentPlan:add']">新增 </el-button>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="1.5">
|
||
|
|
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['amz:shipmentPlan:edit']"
|
||
|
|
>修改
|
||
|
|
</el-button>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="1.5">
|
||
|
|
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['amz:shipmentPlan:remove']"
|
||
|
|
>删除
|
||
|
|
</el-button>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="1.5">
|
||
|
|
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['amz:shipmentPlan:export']">导出 </el-button>
|
||
|
|
</el-col>
|
||
|
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||
|
|
</el-row>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<el-table v-loading="loading" :data="shipmentPlanList" @current-change="handleCurrentChange" highlight-current-row ref="singleTableRef">
|
||
|
|
<el-table-column type="expand">
|
||
|
|
<template #default="props">
|
||
|
|
<div m="4">
|
||
|
|
<p m="t-0 b-2">货件名称: {{ props.row.shipmentName }}</p>
|
||
|
|
<p m="t-0 b-2">是否关闭: {{ props.row.isClosed }}</p>
|
||
|
|
<p m="t-0 b-2">货件状态: {{ props.row.shipmentStatus }}</p>
|
||
|
|
<p m="t-0 b-2">运输模式: {{ props.row.shippingMode }}</p>
|
||
|
|
<p m="t-0 b-2">运输方案: {{ props.row.shippingSolution }}</p>
|
||
|
|
<p m="t-0 b-2">入库计划ID: {{ props.row.staInboundPlanId }}</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="领星ID" align="center" prop="sid" />
|
||
|
|
<el-table-column label="货件编号" align="center" prop="shipmentId" />
|
||
|
|
|
||
|
|
<el-table-column label="物流中心编码" align="center" prop="destinationFulfillmentCenterId" />
|
||
|
|
|
||
|
|
<el-table-column label="最后更新时间" align="center" prop="gmtModified" width="180">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ parseTime(scope.row.gmtModified, '{y}-{m}-{d}') }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="创建时间" align="center" prop="gmtCreate" width="180">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ parseTime(scope.row.gmtCreate, '{y}-{m}-{d}') }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="同步时间" align="center" prop="syncTime" width="180">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ parseTime(scope.row.syncTime, '{y}-{m}-{d}') }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="计划发货日期" align="center" prop="staShipmentDate" width="180">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ parseTime(scope.row.staShipmentDate, '{y}-{m}-{d}') }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="预计到货开始日" align="center" prop="staDeliveryStartDate" width="180">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ parseTime(scope.row.staDeliveryStartDate, '{y}-{m}-{d}') }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="预计到货截止日" align="center" prop="staDeliveryEndDate" width="180">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ parseTime(scope.row.staDeliveryEndDate, '{y}-{m}-{d}') }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column width="150" label="发货地址" align="center" prop="shipFromAddress">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-button @click="openAddressDialog(row.shipFromAddress)"> 查看详情</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column width="150" label="收货地址" align="center" prop="shipToAddress">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-button @click="openAddressDialog(row.shipToAddress)"> 查看详情</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="参考编号" align="center" prop="referenceId" />
|
||
|
|
<el-table-column label="是否STA计划" align="center" prop="isSta" />
|
||
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-tooltip content="修改" placement="top">
|
||
|
|
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['amz:shipmentPlan:edit']"></el-button>
|
||
|
|
</el-tooltip>
|
||
|
|
<!-- <el-tooltip content="删除" placement="top">-->
|
||
|
|
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['amz:shipmentPlan:remove']"></el-button>-->
|
||
|
|
<!-- </el-tooltip>-->
|
||
|
|
<el-tooltip content="发货" placement="top">
|
||
|
|
<el-button link type="primary" icon="Promotion" @click="handleSend(scope.row)" v-hasPermi="['amz:shipmentPlan:remove']"></el-button>
|
||
|
|
</el-tooltip>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||
|
|
</el-card>
|
||
|
|
<!-- 添加或修改货件计划对话框 -->
|
||
|
|
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||
|
|
<el-form ref="shipmentPlanFormRef" :model="form" :rules="rules" label-width="80px">
|
||
|
|
<el-form-item label="主键ID" prop="id">
|
||
|
|
<el-input v-model="form.id" placeholder="请输入主键ID" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="关联系统ID" prop="sid">
|
||
|
|
<el-input v-model="form.sid" placeholder="请输入关联系统ID" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="货件编号" prop="shipmentId">
|
||
|
|
<el-input v-model="form.shipmentId" placeholder="请输入货件编号" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="货件名称" prop="shipmentName">
|
||
|
|
<el-input v-model="form.shipmentName" placeholder="请输入货件名称" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="物流中心编码" prop="destinationFulfillmentCenterId">
|
||
|
|
<el-input v-model="form.destinationFulfillmentCenterId" placeholder="请输入物流中心编码" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="运输模式" prop="shippingMode">
|
||
|
|
<el-input v-model="form.shippingMode" placeholder="请输入运输模式" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="运输方案" prop="shippingSolution">
|
||
|
|
<el-input v-model="form.shippingSolution" placeholder="请输入运输方案" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="最后更新时间" prop="gmtModified">
|
||
|
|
<el-date-picker clearable v-model="form.gmtModified" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择最后更新时间">
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="创建时间" prop="gmtCreate">
|
||
|
|
<el-date-picker clearable v-model="form.gmtCreate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择创建时间">
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="同步时间" prop="syncTime">
|
||
|
|
<el-date-picker clearable v-model="form.syncTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择同步时间">
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="计划发货日期" prop="staShipmentDate">
|
||
|
|
<el-date-picker
|
||
|
|
clearable
|
||
|
|
v-model="form.staShipmentDate"
|
||
|
|
type="datetime"
|
||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
placeholder="请选择计划发货日期"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="预计到货开始日" prop="staDeliveryStartDate">
|
||
|
|
<el-date-picker
|
||
|
|
clearable
|
||
|
|
v-model="form.staDeliveryStartDate"
|
||
|
|
type="datetime"
|
||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
placeholder="请选择预计到货开始日"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="预计到货截止日" prop="staDeliveryEndDate">
|
||
|
|
<el-date-picker
|
||
|
|
clearable
|
||
|
|
v-model="form.staDeliveryEndDate"
|
||
|
|
type="datetime"
|
||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
placeholder="请选择预计到货截止日"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="参考编号" prop="referenceId">
|
||
|
|
<el-input v-model="form.referenceId" placeholder="请输入参考编号" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="入库计划ID" prop="staInboundPlanId">
|
||
|
|
<el-input v-model="form.staInboundPlanId" placeholder="请输入入库计划ID" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||
|
|
<el-button @click="cancel">取 消</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
<!-- 详情对话框 -->
|
||
|
|
<el-dialog v-model="dialogVisible" title="地址详细信息" width="60%">
|
||
|
|
<el-table :data="addressTableData">
|
||
|
|
<el-table-column prop="key" label="字段" width="180" />
|
||
|
|
<el-table-column prop="value" label="值" />
|
||
|
|
</el-table>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<el-dialog v-model="channelDialogVisible" title="渠道选择" width="60%">
|
||
|
|
<!-- <el-radio-group v-model="form.status">-->
|
||
|
|
<!-- <el-radio v-for="dict in biz_transport_channel" :key="dict.value" :value="dict.value">-->
|
||
|
|
<!-- {{ dict.label }}-->
|
||
|
|
<!-- </el-radio>-->
|
||
|
|
<!-- </el-radio-group>-->
|
||
|
|
|
||
|
|
<!-- <el-radio-group v-model="form.status">-->
|
||
|
|
<!-- <!– 按国家分组循环 –>-->
|
||
|
|
<!-- <div v-for="(transportDict, country) in groupedChannels" :key="country">-->
|
||
|
|
<!-- <!– 国家标题 –>-->
|
||
|
|
<!-- <div class="country-title">{{ country }}</div>-->
|
||
|
|
|
||
|
|
<!-- <!– 运输方式子分组 –>-->
|
||
|
|
<!-- <div-->
|
||
|
|
<!-- v-for="(channels, transport) in transportDict"-->
|
||
|
|
<!-- :key="transport"-->
|
||
|
|
<!-- class="transport-group"-->
|
||
|
|
<!-- >-->
|
||
|
|
<!-- <el-radio-->
|
||
|
|
<!-- v-for="dict in channels"-->
|
||
|
|
<!-- :key="dict.value"-->
|
||
|
|
<!-- :value="dict.value"-->
|
||
|
|
<!-- border-->
|
||
|
|
<!-- class="channel-item"-->
|
||
|
|
<!-- >-->
|
||
|
|
<!-- {{ transport }} - {{ getChannelName(dict.label) }}-->
|
||
|
|
<!-- </el-radio>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </el-radio-group>-->
|
||
|
|
|
||
|
|
<el-collapse v-model="activeCollapse">
|
||
|
|
<!-- 遍历国家分组 -->
|
||
|
|
<el-collapse-item v-for="(countryGroup, country) in groupedChannels" :key="country" :title="getCountryName(country)" :name="country">
|
||
|
|
<!-- 遍历运输方式 -->
|
||
|
|
<div v-for="(methodGroup, method) in countryGroup" :key="method">
|
||
|
|
<div class="shipping-method-title">
|
||
|
|
{{ getShippingMethodName(method) }}
|
||
|
|
</div>
|
||
|
|
<el-radio-group v-model="selectedChannel" @change="handleChannelSelect">
|
||
|
|
<!-- 遍历具体渠道 -->
|
||
|
|
<div v-for="channel in methodGroup" :key="channel.id" class="channel-item">
|
||
|
|
<el-radio :label="channel.id">
|
||
|
|
{{ getChannelLabel(channel.channelName) }}
|
||
|
|
</el-radio>
|
||
|
|
<div class="channel-description">{{ channel.description }}</div>
|
||
|
|
</div>
|
||
|
|
</el-radio-group>
|
||
|
|
</div>
|
||
|
|
</el-collapse-item>
|
||
|
|
</el-collapse>
|
||
|
|
|
||
|
|
<div v-if="selectedChannel" class="selected-info">已选择渠道ID: {{ selectedChannel }}</div>
|
||
|
|
|
||
|
|
<el-button :loading="buttonLoading" type="primary" @click="checkPrice()">查询报价</el-button>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup name="ShipmentPlan" lang="ts">
|
||
|
|
import { listShipmentPlan, getShipmentPlan, delShipmentPlan, addShipmentPlan, updateShipmentPlan } from '@/api/amz/shipmentPlan';
|
||
|
|
import { listAllLogisticsChannel } from '@/api/amz/logisticsChannel';
|
||
|
|
|
||
|
|
import { createWithDesAndChannel } from '@/api/amz/inquiryRequest';
|
||
|
|
|
||
|
|
import { queryLogisticsQuote } from '@/api/amz/logisticsQuote';
|
||
|
|
|
||
|
|
import { ShipmentPlanVO, ShipmentPlanQuery, ShipmentPlanForm } from '@/api/amz/shipmentPlan/types';
|
||
|
|
import { ElTable } from 'element-plus';
|
||
|
|
|
||
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
|
|
const { biz_transport_channel } = toRefs<any>(proxy?.useDict('biz_transport_channel'));
|
||
|
|
|
||
|
|
const shipmentPlanList = ref<ShipmentPlanVO[]>([]);
|
||
|
|
const buttonLoading = ref(false);
|
||
|
|
const loading = ref(true);
|
||
|
|
const showSearch = ref(true);
|
||
|
|
const ids = ref<Array<string | number>>([]);
|
||
|
|
const single = ref(true);
|
||
|
|
const multiple = ref(true);
|
||
|
|
const total = ref(0);
|
||
|
|
|
||
|
|
const queryFormRef = ref<ElFormInstance>();
|
||
|
|
const shipmentPlanFormRef = ref<ElFormInstance>();
|
||
|
|
|
||
|
|
const dialog = reactive<DialogOption>({
|
||
|
|
visible: false,
|
||
|
|
title: ''
|
||
|
|
});
|
||
|
|
|
||
|
|
const initFormData: ShipmentPlanForm = {
|
||
|
|
id: undefined,
|
||
|
|
sid: undefined,
|
||
|
|
shipmentId: undefined,
|
||
|
|
shipmentName: undefined,
|
||
|
|
isClosed: undefined,
|
||
|
|
shipmentStatus: undefined,
|
||
|
|
destinationFulfillmentCenterId: undefined,
|
||
|
|
shippingMode: undefined,
|
||
|
|
shippingSolution: undefined,
|
||
|
|
gmtModified: undefined,
|
||
|
|
gmtCreate: undefined,
|
||
|
|
syncTime: undefined,
|
||
|
|
staShipmentDate: undefined,
|
||
|
|
staDeliveryStartDate: undefined,
|
||
|
|
staDeliveryEndDate: undefined,
|
||
|
|
shipFromAddress: undefined,
|
||
|
|
shipToAddress: undefined,
|
||
|
|
referenceId: undefined,
|
||
|
|
staInboundPlanId: undefined,
|
||
|
|
isSta: undefined
|
||
|
|
};
|
||
|
|
const data = reactive<PageData<ShipmentPlanForm, ShipmentPlanQuery>>({
|
||
|
|
form: { ...initFormData },
|
||
|
|
queryParams: {
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
sid: undefined,
|
||
|
|
shipmentId: undefined,
|
||
|
|
shipmentName: undefined,
|
||
|
|
isClosed: undefined,
|
||
|
|
shipmentStatus: undefined,
|
||
|
|
destinationFulfillmentCenterId: undefined,
|
||
|
|
shippingMode: undefined,
|
||
|
|
shippingSolution: undefined,
|
||
|
|
gmtModified: undefined,
|
||
|
|
gmtCreate: undefined,
|
||
|
|
syncTime: undefined,
|
||
|
|
staShipmentDate: undefined,
|
||
|
|
staDeliveryStartDate: undefined,
|
||
|
|
staDeliveryEndDate: undefined,
|
||
|
|
shipFromAddress: undefined,
|
||
|
|
shipToAddress: undefined,
|
||
|
|
referenceId: undefined,
|
||
|
|
staInboundPlanId: undefined,
|
||
|
|
isSta: undefined,
|
||
|
|
params: {}
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
||
|
|
sid: [{ required: true, message: '关联系统ID不能为空', trigger: 'blur' }],
|
||
|
|
shipmentId: [{ required: true, message: '货件编号不能为空', trigger: 'blur' }],
|
||
|
|
shipmentName: [{ required: true, message: '货件名称不能为空', trigger: 'blur' }],
|
||
|
|
isClosed: [{ required: true, message: '是否关闭不能为空', trigger: 'blur' }],
|
||
|
|
shipmentStatus: [{ required: true, message: '货件状态不能为空', trigger: 'change' }],
|
||
|
|
destinationFulfillmentCenterId: [{ required: true, message: '物流中心编码不能为空', trigger: 'blur' }],
|
||
|
|
shippingMode: [{ required: true, message: '运输模式不能为空', trigger: 'blur' }],
|
||
|
|
shippingSolution: [{ required: true, message: '运输方案不能为空', trigger: 'blur' }],
|
||
|
|
gmtModified: [{ required: true, message: '最后更新时间不能为空', trigger: 'blur' }],
|
||
|
|
gmtCreate: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
|
||
|
|
syncTime: [{ required: true, message: '同步时间不能为空', trigger: 'blur' }],
|
||
|
|
staShipmentDate: [{ required: true, message: '计划发货日期不能为空', trigger: 'blur' }],
|
||
|
|
staDeliveryStartDate: [{ required: true, message: '预计到货开始日不能为空', trigger: 'blur' }],
|
||
|
|
staDeliveryEndDate: [{ required: true, message: '预计到货截止日不能为空', trigger: 'blur' }],
|
||
|
|
shipFromAddress: [{ required: true, message: '发货地址不能为空', trigger: 'blur' }],
|
||
|
|
shipToAddress: [{ required: true, message: '收货地址不能为空', trigger: 'blur' }],
|
||
|
|
referenceId: [{ required: true, message: '参考编号不能为空', trigger: 'blur' }],
|
||
|
|
staInboundPlanId: [{ required: true, message: '入库计划ID不能为空', trigger: 'blur' }],
|
||
|
|
isSta: [{ required: true, message: '是否STA计划不能为空', trigger: 'blur' }]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const { queryParams, form, rules } = toRefs(data);
|
||
|
|
|
||
|
|
/** 查询货件计划列表 */
|
||
|
|
const getList = async () => {
|
||
|
|
loading.value = true;
|
||
|
|
const res = await listShipmentPlan(queryParams.value);
|
||
|
|
shipmentPlanList.value = res.rows;
|
||
|
|
total.value = res.total;
|
||
|
|
loading.value = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
let channelTableData = ref([]);
|
||
|
|
|
||
|
|
const getAllChannelData = async () => {
|
||
|
|
const res = await listAllLogisticsChannel();
|
||
|
|
console.log('getAllChannelData');
|
||
|
|
console.log(res);
|
||
|
|
channelTableData.value = res.rows;
|
||
|
|
console.log('groupedChannels:', groupedChannels.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 国家代码映射
|
||
|
|
const countryMap = {
|
||
|
|
us: '美国'
|
||
|
|
};
|
||
|
|
|
||
|
|
// 运输方式映射
|
||
|
|
const shippingMethodMap = {
|
||
|
|
air: '空运',
|
||
|
|
sea: '海运'
|
||
|
|
};
|
||
|
|
|
||
|
|
const currentDes = ref('');
|
||
|
|
|
||
|
|
// 分组后的渠道数据
|
||
|
|
const groupedChannels = computed(() => {
|
||
|
|
return channelTableData.value.reduce((acc, channel) => {
|
||
|
|
const country = channel.country;
|
||
|
|
const method = channel.shippingMethod;
|
||
|
|
|
||
|
|
if (!acc[country]) acc[country] = {};
|
||
|
|
if (!acc[country][method]) acc[country][method] = [];
|
||
|
|
|
||
|
|
acc[country][method].push(channel);
|
||
|
|
return acc;
|
||
|
|
}, {});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 从渠道名称中提取显示标签（移除国家+运输方式前缀）
|
||
|
|
const getChannelLabel = (name) => {
|
||
|
|
return name.split('-').slice(2).join('-');
|
||
|
|
};
|
||
|
|
|
||
|
|
// 获取国家显示名称
|
||
|
|
const getCountryName = (code) => {
|
||
|
|
return countryMap[code] || code.toUpperCase();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 获取运输方式显示名称
|
||
|
|
const getShippingMethodName = (method) => {
|
||
|
|
return shippingMethodMap[method] || method;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 交互逻辑
|
||
|
|
const activeCollapse = ref(['us']); // 默认展开美国
|
||
|
|
const selectedChannel = ref(null);
|
||
|
|
|
||
|
|
const handleChannelSelect = (channelId) => {
|
||
|
|
console.log('Selected channel ID:', channelId);
|
||
|
|
// 这里可以触发自定义事件或调用API
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 取消按钮 */
|
||
|
|
const cancel = () => {
|
||
|
|
reset();
|
||
|
|
dialog.visible = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 表单重置 */
|
||
|
|
const reset = () => {
|
||
|
|
form.value = { ...initFormData };
|
||
|
|
shipmentPlanFormRef.value?.resetFields();
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 搜索按钮操作 */
|
||
|
|
const handleQuery = () => {
|
||
|
|
queryParams.value.pageNum = 1;
|
||
|
|
getList();
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 重置按钮操作 */
|
||
|
|
const resetQuery = () => {
|
||
|
|
queryFormRef.value?.resetFields();
|
||
|
|
handleQuery();
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 多选框选中数据 */
|
||
|
|
const handleSelectionChange = (selection: ShipmentPlanVO[]) => {
|
||
|
|
ids.value = selection.map((item) => item.id);
|
||
|
|
single.value = selection.length != 1;
|
||
|
|
multiple.value = !selection.length;
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 新增按钮操作 */
|
||
|
|
const handleAdd = () => {
|
||
|
|
reset();
|
||
|
|
dialog.visible = true;
|
||
|
|
dialog.title = '添加货件计划';
|
||
|
|
};
|
||
|
|
|
||
|
|
const checkPrice = async () => {
|
||
|
|
console.log('checkPrice', currentDes.value, selectedChannel.value);
|
||
|
|
const res = await queryLogisticsQuote(currentDes.value, selectedChannel.value);
|
||
|
|
console.log('checkPriceEnd', res);
|
||
|
|
if (res.total == 0) {
|
||
|
|
ElMessageBox.confirm('未查询到价格信息,是否要向物流商发布询价？', 'Warning', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
})
|
||
|
|
.then(async () => {
|
||
|
|
ElMessage({
|
||
|
|
type: 'success',
|
||
|
|
message: 'Delete completed'
|
||
|
|
});
|
||
|
|
const res2 = await createWithDesAndChannel(currentDes.value, selectedChannel.value);
|
||
|
|
console.log('checkPriceEnd2', res2);
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
ElMessage({
|
||
|
|
type: 'info',
|
||
|
|
message: 'Delete canceled'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 修改按钮操作 */
|
||
|
|
const handleUpdate = async (row?: ShipmentPlanVO) => {
|
||
|
|
reset();
|
||
|
|
const _id = row?.id || ids.value[0];
|
||
|
|
const res = await getShipmentPlan(_id);
|
||
|
|
Object.assign(form.value, res.data);
|
||
|
|
dialog.visible = true;
|
||
|
|
dialog.title = '修改货件计划';
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSend = async (row?: ShipmentPlanVO) => {
|
||
|
|
reset();
|
||
|
|
channelDialogVisible.value = true;
|
||
|
|
console.log(row);
|
||
|
|
|
||
|
|
currentDes.value = row.destinationFulfillmentCenterId;
|
||
|
|
};
|
||
|
|
/** 提交按钮 */
|
||
|
|
const submitForm = () => {
|
||
|
|
shipmentPlanFormRef.value?.validate(async (valid: boolean) => {
|
||
|
|
if (valid) {
|
||
|
|
buttonLoading.value = true;
|
||
|
|
if (form.value.id) {
|
||
|
|
await updateShipmentPlan(form.value).finally(() => (buttonLoading.value = false));
|
||
|
|
} else {
|
||
|
|
await addShipmentPlan(form.value).finally(() => (buttonLoading.value = false));
|
||
|
|
}
|
||
|
|
proxy?.$modal.msgSuccess('操作成功');
|
||
|
|
dialog.visible = false;
|
||
|
|
await getList();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 删除按钮操作 */
|
||
|
|
const handleDelete = async (row?: ShipmentPlanVO) => {
|
||
|
|
const _ids = row?.id || ids.value;
|
||
|
|
await proxy?.$modal.confirm('是否确认删除货件计划编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||
|
|
await delShipmentPlan(_ids);
|
||
|
|
proxy?.$modal.msgSuccess('删除成功');
|
||
|
|
await getList();
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 导出按钮操作 */
|
||
|
|
const handleExport = () => {
|
||
|
|
proxy?.download(
|
||
|
|
'amz/shipmentPlan/export',
|
||
|
|
{
|
||
|
|
...queryParams.value
|
||
|
|
},
|
||
|
|
`shipmentPlan_${new Date().getTime()}.xlsx`
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const dialogVisible = ref(false);
|
||
|
|
const addressTableData = ref([]);
|
||
|
|
|
||
|
|
const channelDialogVisible = ref(false);
|
||
|
|
|
||
|
|
// 转换对象为表格需要的数组格式
|
||
|
|
const convertAddressToTableData = (address) => {
|
||
|
|
return Object.entries(address).map(([key, value]) => ({
|
||
|
|
key: key,
|
||
|
|
value: value
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
|
||
|
|
// 打开对话框
|
||
|
|
const openAddressDialog = (address) => {
|
||
|
|
addressTableData.value = convertAddressToTableData(address);
|
||
|
|
dialogVisible.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
const currentRow = ref();
|
||
|
|
const singleTableRef = ref<InstanceType<typeof ElTable>>();
|
||
|
|
|
||
|
|
const handleCurrentChange = (val: ShipmentPlanVO | undefined) => {
|
||
|
|
currentRow.value = val;
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getList();
|
||
|
|
getAllChannelData();
|
||
|
|
});
|
||
|
|
</script>
|