833 lines
30 KiB
Vue
833 lines
30 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="main-container1">
|
||
<!-- 左侧计划列表 -->
|
||
<div class="left-panel-container" :style="{ width: leftWidth + 'px' }">
|
||
<div class="left-panel" v-show="!isLeftCollapsed">
|
||
<div class="panel-header">
|
||
<h3>发货计划</h3>
|
||
</div>
|
||
<PlanList ref="planList" @select="handlePlanSelect" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 切换按钮 -->
|
||
<div class="toggle-button" @click="toggleLeftPanel">
|
||
<el-button type="text" size="small" :icon="isLeftCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'">
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 可拖拽分割线 -->
|
||
<div class="resizer" ref="resizer" @mousedown="startResize" v-show="!isLeftCollapsed"></div>
|
||
|
||
<!-- 右侧内容区域 -->
|
||
<div class="right-panel" :style="{ flex: 1 }">
|
||
<div v-if="!selectedPlan">
|
||
<el-empty description="请先选择发货计划" />
|
||
</div>
|
||
<div v-else>
|
||
<el-form style="position: sticky; left: 0; top: 0; padding: 10px;" :model="queryParams" ref="queryForm" size="small"
|
||
:inline="true" v-show="showSearch" label-width="68px">
|
||
<el-form-item label="发货单名称" prop="waybillName">
|
||
<el-input v-model="queryParams.waybillName" placeholder="请输入发货单名称" clearable
|
||
@keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="收货单位" prop="consigneeUnit">
|
||
<el-input v-model="queryParams.consigneeUnit" placeholder="请输入收货单位" clearable
|
||
@keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="车牌号" prop="licensePlate">
|
||
<el-input v-model="queryParams.licensePlate" placeholder="请输入车牌号" clearable
|
||
@keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="负责人" prop="principal">
|
||
<el-select v-model="queryParams.principal" placeholder="请选择负责人" clearable filterable allow-create
|
||
@change="handleQuery">
|
||
<el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||
:disabled="!selectedPlan" title="请先选择发货计划">新增</el-button>
|
||
<el-button type="success" plain icon="el-icon-refresh" size="mini" @click="handleQuery">刷新</el-button>
|
||
<el-button type="warning" plain icon="el-icon-download" size="mini"
|
||
@click="handleExportPlan">导出</el-button>
|
||
</el-col>
|
||
|
||
<el-col :span="16" style="display: flex; justify-content: flex-end; align-items: center; gap: 10px;">
|
||
<div>
|
||
<el-descriptions :column="2" :data="queryParams" border>
|
||
<el-descriptions-item label="单据总数">{{ deliveryCountTotal }}</el-descriptions-item>
|
||
<el-descriptions-item label="已发数量">{{ deliveryCountFinished }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div>
|
||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div style="height: calc(100vh - 164px); overflow: hidden;">
|
||
<DragResizePanel direction="vertical" :initialSize="300" :minSize="100">
|
||
<template slot="panelA">
|
||
<div style="height: 100%; overflow: auto;">
|
||
<el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row
|
||
@row-click="handleRowClick">
|
||
<el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
|
||
<el-table-column label="发货单名称" align="center" prop="waybillName" />
|
||
<el-table-column label="车牌" align="center" prop="licensePlate" width="100" />
|
||
<el-table-column label="收货单位" align="center" prop="consigneeUnit" />
|
||
<!-- <el-table-column label="发货单位" align="center" prop="senderUnit" /> -->
|
||
<el-table-column label="订单编号" align="center" prop="orderNo">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.orderId">{{ scope.row.orderCode }}</span>
|
||
<span v-else>{{ scope.row.principalPhone }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="发货时间" align="center" prop="deliveryTime" width="100">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="负责人" align="center" prop="principal" width="60" />
|
||
<el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip />
|
||
|
||
<!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> -->
|
||
<el-table-column label="完成状态" align="center" prop="status" width="120">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.status" placeholder="请选择完成状态" @change="handleStatusChange(scope.row)">
|
||
<el-option label="已发货" :value="1" />
|
||
<el-option label="未发货" :value="0" />
|
||
<el-option label="已打印" :value="2" />
|
||
<el-option label="未打印" :value="3" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" icon="el-icon-view"
|
||
@click.stop="handlePrint(scope.row, 0)">打印发货单</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-view"
|
||
@click.stop="handlePrint(scope.row, 1)">简单打印</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-document-copy"
|
||
@click.stop="handleCopy(scope.row)">复制新增</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status === 1"
|
||
title="已发货的发货单不能修改" @click.stop="handleUpdate(scope.row)">修改</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status === 1"
|
||
title="已发货的发货单不能删除" @click.stop="handleDelete(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
<template slot="panelB">
|
||
<div style="height: 100%; overflow: auto;">
|
||
<DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" :orderId="orderId" />
|
||
<el-empty v-else description="已发货，不可修改，点击打印查看详情" />
|
||
</div>
|
||
</template>
|
||
</DragResizePanel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加或修改发货单对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||
<el-form-item label="发货计划" prop="planId">
|
||
<!-- <PlanSelector v-model="form.planId" /> -->
|
||
<el-select v-model="form.planId" placeholder="请选择发货计划" filterable>
|
||
<el-option v-for="plan in planListOption" :key="plan.planId" :label="plan.planName" :value="plan.planId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="发货单名称" prop="waybillName">
|
||
<el-input v-model="form.waybillName" placeholder="请输入发货单名称" />
|
||
</el-form-item>
|
||
<el-form-item label="车牌" prop="licensePlate">
|
||
<MemoInput v-model="form.licensePlate" storageKey="licensePlate" placeholder="请输入车牌" />
|
||
</el-form-item>
|
||
<el-form-item label="发货单位" prop="senderUnit">
|
||
<el-input v-model="form.senderUnit" placeholder="请输入发货单位" />
|
||
</el-form-item>
|
||
<el-form-item label="发货时间" prop="deliveryTime">
|
||
<el-date-picker clearable v-model="form.deliveryTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="请选择发货时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<!-- 如果没有绑定订单，这里是使用手机号字段来存储手填的订单编号 -->
|
||
<el-form-item label="订单编号" prop="principalPhone" v-if="!form.orderId">
|
||
<div style="display: flex; gap: 10px; align-items: center;">
|
||
<el-input v-model="form.principalPhone" placeholder="请输入订单编号" style="flex: 1;" />
|
||
<el-button type="primary" size="small" @click="bindOrder">绑定订单</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="订单编号" prop="principalPhone" v-else title="当前发货单已绑定订单">
|
||
<div style="display: flex; gap: 10px; align-items: center;">
|
||
<el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled style="flex: 1;" />
|
||
<el-button type="warning" size="small" @click="unbindOrder">解绑</el-button>
|
||
<el-button type="primary" size="small" @click="changeOrder">切换订单</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<!-- 订单选择对话框 -->
|
||
<el-dialog title="选择订单" :visible.sync="orderDialogVisible" width="800px" append-to-body>
|
||
<el-input @change="loadOrderList" v-model="orderQuery" placeholder="输入关键词搜索" style="margin-bottom: 10px;" @input="handleOrderSearch" />
|
||
<el-table v-loading="orderLoading" :data="orderList" max-height="500px" style="width: 100%" @row-click="handleOrderSelect">
|
||
<el-table-column prop="orderCode" label="订单编号" />
|
||
<el-table-column prop="companyName" label="客户公司" />
|
||
<el-table-column prop="salesman" label="销售员" />
|
||
<el-table-column prop="contractCode" label="合同号" />
|
||
<el-table-column prop="deliveryDate" label="交货日期" />
|
||
</el-table>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="orderDialogVisible = false">取消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-form-item label="收货单位" prop="consigneeUnit">
|
||
<el-input v-model="form.consigneeUnit" placeholder="请输入收货单位" />
|
||
</el-form-item>
|
||
|
||
|
||
<el-form-item label="负责人" prop="principal">
|
||
<el-select v-model="form.principal" placeholder="请选择负责人" clearable filterable allow-create>
|
||
<el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 打印发货单对话框 -->
|
||
<el-dialog title="打印发货单" :visible.sync="printDialogVisible" width="1000px" append-to-body center>
|
||
<WayBill v-if="printType === 0" :waybill="currentWaybill" :waybillDetails="currentWaybillDetails" />
|
||
<WayBill2 v-else :waybill="currentWaybill" :waybillDetails="currentWaybillDetails" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listDeliveryWaybill, getDeliveryWaybill, delDeliveryWaybill, addDeliveryWaybill, updateDeliveryWaybill, updateDeliveryWaybillStatus } from "@/api/wms/deliveryWaybill";
|
||
import { listSelectableCoils } from "@/api/wms/deliveryPlan"; // 导入发货计划API
|
||
import { listDeliveryPlan } from "@/api/wms/deliveryPlan";
|
||
import { listCoilByIds } from "@/api/wms/coil";
|
||
import { listDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
|
||
import { listOrder } from "@/api/crm/order";
|
||
import MemoInput from "@/components/MemoInput";
|
||
import DeliveryWaybillDetail from "../components/detailTable.vue";
|
||
import WayBill from "../components/wayBill.vue";
|
||
import PlanList from "../components/planList.vue";
|
||
import WayBill2 from "../components/wayBill2.vue";
|
||
import PlanSelector from "../components/planSelector.vue";
|
||
import DragResizePanel from "@/components/DragResizePanel";
|
||
|
||
export default {
|
||
name: "DeliveryWaybill",
|
||
components: {
|
||
MemoInput,
|
||
DeliveryWaybillDetail,
|
||
WayBill,
|
||
PlanList,
|
||
WayBill2,
|
||
PlanSelector,
|
||
DragResizePanel
|
||
},
|
||
dicts: ['wip_pack_saleman'],
|
||
data() {
|
||
return {
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 发货单表格数据
|
||
deliveryWaybillList: [],
|
||
waybillId: null,
|
||
|
||
// 打印相关数据
|
||
printDialogVisible: false,
|
||
currentWaybill: {},
|
||
currentWaybillDetails: [],
|
||
// 弹出层标题
|
||
title: "",
|
||
// 打印类型
|
||
printType: 0,
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 发货计划列表
|
||
planListOption: [],
|
||
// 左侧面板宽度
|
||
leftWidth: 260,
|
||
// 左侧面板是否收起
|
||
isLeftCollapsed: false,
|
||
// 拖拽相关
|
||
startX: 0,
|
||
startLeftWidth: 0,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
waybillNo: undefined,
|
||
waybillName: undefined,
|
||
licensePlate: undefined,
|
||
consigneeUnit: undefined,
|
||
senderUnit: undefined,
|
||
deliveryTime: undefined,
|
||
weighbridge: undefined,
|
||
salesPerson: undefined,
|
||
principal: undefined,
|
||
principalPhone: undefined,
|
||
status: undefined,
|
||
planId: undefined
|
||
},
|
||
// 表单参数
|
||
form: {},
|
||
// 表单校验
|
||
rules: {},
|
||
selectedPlan: null,
|
||
planQueryParams: {
|
||
pageNum: 1,
|
||
pageSize: 20, // 增大分页大小以确保树形结构显示足够数据
|
||
planName: undefined,
|
||
planType: 0,
|
||
// auditStatus: 1,
|
||
},
|
||
coilList: [],
|
||
canEdit: true,
|
||
// 订单列表
|
||
orderList: [],
|
||
orderLoading: false,
|
||
// 订单选择对话框
|
||
orderDialogVisible: false,
|
||
// 订单搜索关键词
|
||
orderQuery: '',
|
||
orderId: '',
|
||
};
|
||
},
|
||
created() {
|
||
this.loadPlanList();
|
||
this.getList();
|
||
this.loadOrderList();
|
||
},
|
||
computed: {
|
||
/** 计算已发货数量 */
|
||
deliveryCountFinished() {
|
||
return this.deliveryWaybillList.filter(row => row.status === 1 || row.status === 2).length;
|
||
},
|
||
/** 计算总数量 */
|
||
deliveryCountTotal() {
|
||
return this.deliveryWaybillList.length;
|
||
}
|
||
},
|
||
methods: {
|
||
/** 查询发货单列表 */
|
||
loadPlanList() {
|
||
listDeliveryPlan({ pageSize: 100, pageNum: 1, planType: 0 }).then(response => {
|
||
this.planListOption = response.rows || [];
|
||
});
|
||
},
|
||
/** 加载订单列表 */
|
||
loadOrderList() {
|
||
this.orderLoading = true;
|
||
listOrder({ pageNum: 1, pageSize: 100, keyword: this.orderQuery }).then(response => {
|
||
this.orderList = response.rows || [];
|
||
this.orderLoading = false;
|
||
}).catch(error => {
|
||
console.error('获取订单列表失败:', error);
|
||
this.orderLoading = false;
|
||
});
|
||
},
|
||
/** 切换左侧面板收起/展开 */
|
||
toggleLeftPanel() {
|
||
if (this.isLeftCollapsed) {
|
||
// 展开：恢复到原来的宽度
|
||
this.leftWidth = 200;
|
||
this.isLeftCollapsed = false;
|
||
} else {
|
||
// 收起：只隐藏内容，保留容器宽度以确保按钮可见
|
||
this.leftWidth = 0;
|
||
this.isLeftCollapsed = true;
|
||
}
|
||
},
|
||
/** 开始拖拽水平分割线 */
|
||
startResize(e) {
|
||
e.preventDefault();
|
||
// 如果面板是收起状态，先展开它
|
||
if (this.isLeftCollapsed) {
|
||
this.leftWidth = 200;
|
||
this.isLeftCollapsed = false;
|
||
}
|
||
// 记录初始位置
|
||
this.startX = e.clientX;
|
||
this.startLeftWidth = this.leftWidth;
|
||
document.addEventListener('mousemove', this.resize);
|
||
document.addEventListener('mouseup', this.stopResize);
|
||
},
|
||
/** 拖拽中（水平） */
|
||
resize(e) {
|
||
// 基于初始位置计算相对变化
|
||
const deltaX = e.clientX - this.startX;
|
||
const newWidth = this.startLeftWidth + deltaX;
|
||
// 限制最小宽度
|
||
if (newWidth > 100 && newWidth < 500) {
|
||
this.leftWidth = newWidth;
|
||
}
|
||
},
|
||
/** 结束拖拽（水平） */
|
||
stopResize() {
|
||
document.removeEventListener('mousemove', this.resize);
|
||
document.removeEventListener('mouseup', this.stopResize);
|
||
},
|
||
|
||
getList() {
|
||
this.loading = true;
|
||
// 确保查询参数包含planId
|
||
const params = {
|
||
...this.queryParams,
|
||
// 如果选中了计划，传递planId，否则不传递该参数
|
||
planId: this.selectedPlan ? this.selectedPlan.planId : undefined
|
||
};
|
||
listDeliveryWaybill(params).then(response => {
|
||
this.deliveryWaybillList = response.rows;
|
||
this.total = response.total;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
refreshCoilList() {
|
||
if (this.selectedPlan && this.selectedPlan.planId) {
|
||
listSelectableCoils(this.selectedPlan.planId).then(response => {
|
||
this.coilList = response.data;
|
||
});
|
||
}
|
||
},
|
||
/** 完成状态改变时的处理 */
|
||
handleStatusChange(row) {
|
||
// 确保在更新状态时包含waybillId
|
||
updateDeliveryWaybillStatus({
|
||
waybillId: row.waybillId,
|
||
status: row.status
|
||
}).then(() => {
|
||
this.$modal.msgSuccess("状态更新成功");
|
||
this.getList(); // 刷新列表
|
||
});
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
waybillId: undefined,
|
||
waybillNo: new Date().getTime(),
|
||
waybillName: undefined,
|
||
planId: undefined,
|
||
licensePlate: undefined,
|
||
consigneeUnit: undefined,
|
||
senderUnit: '科伦普',
|
||
deliveryTime: undefined,
|
||
weighbridge: undefined,
|
||
salesPerson: undefined,
|
||
principal: undefined,
|
||
principalPhone: undefined,
|
||
status: undefined,
|
||
remark: undefined,
|
||
delFlag: undefined,
|
||
createTime: undefined,
|
||
createBy: undefined,
|
||
updateTime: undefined,
|
||
updateBy: undefined
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
// 重置查询时保留planId
|
||
if (this.selectedPlan) {
|
||
this.queryParams.planId = this.selectedPlan.planId;
|
||
}
|
||
this.handleQuery();
|
||
},
|
||
handlePlanSelect(row) {
|
||
this.selectedPlan = row;
|
||
// this.refreshCoilList();
|
||
// 更新查询参数，根据选中的planId筛选发货单
|
||
this.queryParams.planId = row.planId;
|
||
this.waybillId = null;
|
||
this.getList();
|
||
},
|
||
handleRowClick(row) {
|
||
if (row.status === 1) {
|
||
this.canEdit = false;
|
||
this.waybillId = row.waybillId;
|
||
// this.$modal.msgWarning("已发货的发货单不能操作");
|
||
return;
|
||
}
|
||
this.orderId = row.orderId;
|
||
this.canEdit = true;
|
||
this.waybillId = row.waybillId;
|
||
},
|
||
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.reset();
|
||
// 自动填入选中的planId
|
||
if (this.selectedPlan) {
|
||
this.form.planId = this.selectedPlan.planId;
|
||
// 可以根据需要填充其他相关字段
|
||
if (this.selectedPlan.planName) {
|
||
this.form.waybillName = `发货单_${this.selectedPlan.planName}`;
|
||
}
|
||
// deliveryTime设置为当前时间，格式为yyyy-MM-dd HH:mm:ss，北京时间，
|
||
this.form.deliveryTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
|
||
}
|
||
this.open = true;
|
||
this.title = "添加发货单";
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.loading = true;
|
||
this.reset();
|
||
const waybillId = row.waybillId || this.ids
|
||
getDeliveryWaybill(waybillId).then(response => {
|
||
this.loading = false;
|
||
this.form = {
|
||
...response.data,
|
||
orderCode: row.orderCode
|
||
};
|
||
this.open = true;
|
||
this.title = "修改发货单";
|
||
});
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
if (this.form.waybillId != null) {
|
||
updateDeliveryWaybill(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
} else {
|
||
addDeliveryWaybill(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const waybillIds = row.waybillId || this.ids;
|
||
this.$modal.confirm('是否确认删除发货单编号为"' + waybillIds + '"的数据项？会同时删除该发货单的所有明细记录且无法恢复。').then(() => {
|
||
this.loading = true;
|
||
return delDeliveryWaybill(waybillIds);
|
||
}).then(() => {
|
||
this.loading = false;
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
handleCopy(row) {
|
||
this.form = {
|
||
waybillNo: new Date().getTime(),
|
||
waybillName: row.waybillName,
|
||
planId: row.planId,
|
||
consigneeUnit: row.consigneeUnit,
|
||
senderUnit: row.senderUnit,
|
||
deliveryTime: row.deliveryTime,
|
||
weighbridge: row.weighbridge,
|
||
salesPerson: row.salesPerson,
|
||
principal: row.principal,
|
||
principalPhone: row.principalPhone,
|
||
// 车牌号
|
||
licensePlate: row.licensePlate,
|
||
remark: row.remark
|
||
};
|
||
this.open = true;
|
||
this.title = "复制新增发货单";
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('wms/deliveryWaybill/export', {
|
||
...this.queryParams
|
||
}, `deliveryWaybill_${new Date().getTime()}.xlsx`)
|
||
},
|
||
handleExportPlan() {
|
||
this.download('wms/deliveryWaybillDetail/export', {
|
||
planId: this.selectedPlan.planId
|
||
}, `deliveryPlan_${new Date().getTime()}.xlsx`)
|
||
},
|
||
/** 绑定订单 */
|
||
bindOrder() {
|
||
this.orderDialogVisible = true;
|
||
},
|
||
/** 解绑订单 */
|
||
unbindOrder() {
|
||
this.form.orderId = undefined;
|
||
this.form.orderCode = undefined;
|
||
this.form.consigneeUnit = undefined;
|
||
this.form.principal = undefined;
|
||
},
|
||
/** 切换订单 */
|
||
changeOrder() {
|
||
this.orderDialogVisible = true;
|
||
},
|
||
/** 订单搜索 */
|
||
handleOrderSearch() {
|
||
// 搜索逻辑已在computed中处理
|
||
},
|
||
/** 选择订单 */
|
||
handleOrderSelect(row) {
|
||
this.form.orderId = row.orderId;
|
||
this.form.orderCode = row.orderCode;
|
||
this.form.consigneeUnit = row.companyName;
|
||
this.form.principal = row.salesman;
|
||
this.orderDialogVisible = false;
|
||
},
|
||
/** 打印发货单 */
|
||
handlePrint(row, printType) {
|
||
this.loading = true;
|
||
this.printType = printType || 0;
|
||
updateDeliveryWaybill({
|
||
waybillId: row.waybillId,
|
||
status: 2
|
||
}).then(() => {
|
||
row.status = 2;
|
||
});
|
||
// 获取发货单明细
|
||
listDeliveryWaybillDetail({
|
||
waybillId: row.waybillId,
|
||
pageNum: 1,
|
||
pageSize: 1000 // 获取所有明细
|
||
}).then(response => {
|
||
// 处理字段映射，确保与wayBill组件使用的字段名一致
|
||
this.currentWaybillDetails = response.rows.map(item => ({
|
||
coilId: item.coilId,
|
||
productName: item.productName,
|
||
edgeType: item.edgeType,
|
||
packageType: item.packaging, // 映射packaging到packageType
|
||
settlementType: item.settlementType,
|
||
rawMaterialFactory: item.rawMaterialFactory,
|
||
coilNumber: item.coilNo, // 映射coilNo到coilNumber
|
||
specification: item.specification,
|
||
material: item.material,
|
||
quantity: item.quantity,
|
||
weight: item.weight,
|
||
unitPrice: item.unitPrice || '',
|
||
// 单价为空时，显示为空字符串
|
||
remark: item.remark
|
||
}));
|
||
const coils = this.currentWaybillDetails.map(item => item.coilId).join(',');
|
||
if (coils) {
|
||
listCoilByIds(coils).then(response => {
|
||
// 取前三位, 然后去抽后用;连接
|
||
// 设置当前发货单
|
||
const actualWahouseNames = [...new Set(response.rows.filter(item => Boolean(item.actualWarehouseName)).map(item => item.actualWarehouseName.slice(0, 3)))].join(';');
|
||
this.currentWaybill = {
|
||
...row,
|
||
pickupLocation: (actualWahouseNames || '') + '；共' + this.currentWaybillDetails.length + '卷，合计' + this.currentWaybillDetails.reduce((acc, item) => acc + parseFloat(item.weight), 0).toFixed(3) + '吨',
|
||
};
|
||
this.currentWaybillDetails = this.currentWaybillDetails.map(item => {
|
||
const actualWarehouseName = response.rows.find(detail => detail.coilId === item.coilId)?.actualWarehouseName || '';
|
||
return {
|
||
...item,
|
||
actualWarehouseName: actualWarehouseName,
|
||
};
|
||
});
|
||
});
|
||
}
|
||
this.currentWaybill = {
|
||
...row,
|
||
};
|
||
this.printDialogVisible = true;
|
||
this.loading = false;
|
||
|
||
}).catch(error => {
|
||
console.error('获取发货单明细失败:', error);
|
||
this.$modal.msgError('获取发货单明细失败');
|
||
this.loading = false;
|
||
});
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.app-container {
|
||
height: 100vh;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
height: calc(100vh - 84px);
|
||
}
|
||
|
||
.main-container1 {
|
||
display: flex;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.left-panel-container {
|
||
height: 100%;
|
||
position: relative;
|
||
transition: width 0.3s ease;
|
||
/* 移除 overflow: hidden，确保按钮不被裁剪 */
|
||
}
|
||
|
||
.left-panel {
|
||
height: 100%;
|
||
border-right: 1px solid #ebeef5;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.panel-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.panel-header h3 {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.toggle-button {
|
||
position: absolute;
|
||
bottom: 0px;
|
||
z-index: 10;
|
||
background-color: #fff;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 0 4px 4px 0;
|
||
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-left: -1px;
|
||
/* 确保按钮始终可见 */
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.toggle-button .el-button {
|
||
padding: 0;
|
||
margin: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.resizer {
|
||
width: 4px;
|
||
/* background-color: #818181; */
|
||
cursor: col-resize;
|
||
position: relative;
|
||
transition: background-color 0.3s;
|
||
height: 100%;
|
||
}
|
||
|
||
.resizer:hover {
|
||
background-color: #409eff;
|
||
}
|
||
|
||
.resizer::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
height: 40px;
|
||
width: 2px;
|
||
background-color: #c0c4cc;
|
||
border-radius: 1px;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.resizer:hover::before {
|
||
background-color: #409eff;
|
||
}
|
||
|
||
.resizer:active {
|
||
background-color: #409eff;
|
||
}
|
||
|
||
.resizer:active::before {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.right-panel {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 保留原有的垂直分割线样式 */
|
||
.resizer.row-resizer {
|
||
width: 100%;
|
||
height: 4px;
|
||
cursor: row-resize;
|
||
}
|
||
|
||
.resizer.row-resizer::before {
|
||
width: 40px;
|
||
height: 2px;
|
||
}
|
||
|
||
::v-deep .el-pagination {
|
||
margin-top: 6px !important;
|
||
}
|
||
</style>
|