DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(发货管理): 优化发货单界面布局并新增功能

Browse Source 
重构发货单界面布局，使用可拖拽面板组件提升用户体验。新增订单绑定、逻辑库区显示等功能，并调整页面样式。

- 使用DragResizePanel组件实现可拖拽分割布局
- 新增订单绑定、解绑和切换功能
- 在详情表格中添加逻辑库区、厂家和品质字段
- 优化左侧面板可折叠功能
- 调整页面样式和响应式布局
This commit is contained in:
砂糖
2026-04-08 10:36:23 +08:00
parent 6b9c05d5ee
commit 7e487a487d
4 changed files with 514 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
klp-ui/src/components/DragResizePanel/index.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<div class="drag-resize-panel" :class="{ 'vertical': direction === 'vertical' }">
<div class="panel-a" :style="panelAstyle">
<slot name="panelA"></slot>
</div>
<div class="resizer" :class="{ 'vertical-resizer': direction === 'vertical' }" @mousedown="startResize"></div>
<div class="panel-b" :style="panelBstyle">
<slot name="panelB"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'DragResizePanel',
props: {
direction: {
type: String,
default: 'horizontal',
validator: function(value) {
return ['horizontal', 'vertical'].includes(value);
}
},
// 设置panelA的初始大小，最大值和最小值，默认值为300px，10000px，100px
// panelB占据剩余空间
initialSize: {
type: Number,
default: 300
},
minSize: {
type: Number,
default: 100
},
maxSize: {
type: Number,
default: 10000
}
},
data() {
return {
currentSize: this.initialSize,
isResizing: false,
startPosition: 0
};
},
computed: {
panelAstyle() {
if (this.direction === 'horizontal') {
return { width: this.currentSize + 'px' };
} else {
return { height: this.currentSize + 'px' };
}
},
panelBstyle() {
if (this.direction === 'horizontal') {
return { flex: 1 };
} else {
return { flex: 1 };
}
}
},
methods: {
startResize(e) {
e.preventDefault();
this.isResizing = true;
this.startPosition = this.direction === 'horizontal' ? e.clientX : e.clientY;
this.startSize = this.currentSize;
document.addEventListener('mousemove', this.handleResize);
document.addEventListener('mouseup', this.stopResize);
},
handleResize(e) {
if (!this.isResizing) return;
const delta = this.direction === 'horizontal' ? e.clientX - this.startPosition : e.clientY - this.startPosition;
const newSize = this.startSize + delta;
if (newSize >= this.minSize && newSize <= this.maxSize) {
this.currentSize = newSize;
}
},
stopResize() {
this.isResizing = false;
document.removeEventListener('mousemove', this.handleResize);
document.removeEventListener('mouseup', this.stopResize);
}
}
};
</script>
<style scoped>
.drag-resize-panel {
display: flex;
height: 100%;
overflow: hidden;
}
.drag-resize-panel.vertical {
flex-direction: column;
}
.panel-a {
position: relative;
overflow: hidden;
}
.panel-b {
position: relative;
overflow: auto;
}
.resizer {
width: 4px;
cursor: col-resize;
position: relative;
transition: background-color 0.3s;
height: 100%;
}
.resizer.vertical-resizer {
width: 100%;
height: 4px;
cursor: row-resize;
}
.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.vertical-resizer::before {
width: 40px;
height: 2px;
}
.resizer:hover::before {
background-color: #409eff;
}
.resizer:active {
background-color: #409eff;
}
.resizer:active::before {
background-color: #fff;
}
</style>

6
klp-ui/src/views/wms/delivery/components/detailTable.vue
View File

@@ -38,6 +38,7 @@
<el-table-column label="切边" align="center" prop="edgeType" />
<el-table-column label="包装" align="center" prop="packaging" />
<el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
<el-table-column label="逻辑库区" align="center" prop="warehouseName" />
<el-table-column label="结算方式" align="center" prop="settlementType" />
<!-- <el-table-column label="原料厂家" align="center" prop="rawMaterialFactory" /> -->
<el-table-column label="卷号" align="center" prop="coilNo">
@@ -47,9 +48,11 @@
</el-table-column>
<el-table-column label="规格" align="center" prop="specification" />
<el-table-column label="材质" align="center" prop="material" />
<el-table-column label="厂家" align="center" prop="manufacturer" />
<el-table-column label="表面处理" align="center" prop="surfaceTreatmentDesc" />
<!-- <el-table-column label="数量" align="center" prop="quantity" /> -->
<el-table-column label="重量" align="center" prop="weight" />
<el-table-column label="品质" align="center" prop="qualityStatus" />
<!-- <el-table-column label="单价" align="center" prop="unitPrice" /> -->
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -241,6 +244,9 @@ export default {
if (coil) {
item.actualWarehouseName = coil.actualWarehouseName;
item.surfaceTreatmentDesc = coil.surfaceTreatmentDesc;
item.qualityStatus = coil.qualityStatus;
item.warehouseName = coil.warehouseName;
item.manufacturer = coil.manufacturer;
}
});
}

8
klp-ui/src/views/wms/delivery/components/planList.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-card>
<div style="padding: 10px">
<div style="display: flex; width: 100%; gap: 5px">
<el-input
v-model="planQueryParams.planName"
@@ -17,7 +17,7 @@
:props="planTreeProps"
@node-click="handlePlanSelect"
default-expand-all
style="margin-top: 10px; height: 550px; overflow: auto;"
style="margin-top: 10px; height: 800px; overflow: auto;"
>
<template slot-scope="{ node, data }">
<span
@@ -94,7 +94,7 @@
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
<script>
@@ -109,7 +109,7 @@ export default {
planQueryParams: {
planName: '',
pageNum: 1,
pageSize: 10,
pageSize: 30,
planType: 0,
},
selectedPlan: null,

460
klp-ui/src/views/wms/delivery/waybill/index.vue
View File

@@ -1,15 +1,31 @@
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="5">
<PlanList ref="planList" @select="handlePlanSelect" />
</el-col>
<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>
<el-col :span="19" style="position: relative;">
<el-card v-if="!selectedPlan">
<!-- 切换按钮 -->
<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="请先选择发货计划" />
</el-card>
<el-card v-else>
</div>
<div v-else>
<el-form style="position: sticky; left: 0; top: 0;" :model="queryParams" ref="queryForm" size="small"
:inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="发货单名称" prop="waybillName">
@@ -24,86 +40,106 @@
<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="handleExport">导出</el-button> -->
</el-form-item>
<el-form-item>
<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>
</el-form-item>
</el-form>
<div style="height: calc(100vh - 204px); overflow: hidden; display: flex; flex-direction: column;">
<div :style="{ height: topHeight + 'px', 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-button type="warning" plain icon="el-icon-download" size="mini"
@click="handleExportPlan">导出</el-button>
</el-col>
<!-- <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-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>
<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>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
<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 />
<!-- 可拖拽的分割线 -->
<div class="resizer" ref="resizer" @mousedown="startResize"></div>
<div :style="{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }">
<DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
<el-empty v-else description="已发货，不可修改，点击打印查看详情" />
</div>
<!-- <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" />
<el-empty v-else description="已发货，不可修改，点击打印查看详情" />
</div>
</template>
</DragResizePanel>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- 添加或修改发货单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -120,9 +156,6 @@
<el-form-item label="车牌" prop="licensePlate">
<MemoInput v-model="form.licensePlate" storageKey="licensePlate" placeholder="请输入车牌" />
</el-form-item>
<el-form-item label="收货单位" prop="consigneeUnit">
<el-input v-model="form.consigneeUnit" placeholder="请输入收货单位" />
</el-form-item>
<el-form-item label="发货单位" prop="senderUnit">
<el-input v-model="form.senderUnit" placeholder="请输入发货单位" />
</el-form-item>
@@ -131,15 +164,47 @@
placeholder="请选择发货时间">
</el-date-picker>
</el-form-item>
<el-form-item label="负责人" prop="principal">
<el-input v-model="form.principal" placeholder="请输入负责人" />
</el-form-item>
<!-- 如果没有绑定订单，这里是使用手机号字段来存储手填的订单编号 -->
<el-form-item label="订单编号" prop="principalPhone" v-if="!form.orderId">
<el-input v-model="form.principalPhone" placeholder="请输入订单编号" />
<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="当前发货单已绑定订单">
<el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled />
<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>
@@ -164,12 +229,14 @@ import { listSelectableCoils } from "@/api/wms/deliveryPlan"; // 导入发货计
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",
@@ -179,8 +246,10 @@ export default {
WayBill,
PlanList,
WayBill2,
PlanSelector
PlanSelector,
DragResizePanel
},
dicts: ['wip_pack_saleman'],
data() {
return {
// 按钮loading
@@ -200,8 +269,7 @@ export default {
// 发货单表格数据
deliveryWaybillList: [],
waybillId: null,
// 上部分高度
topHeight: 300,
// 打印相关数据
printDialogVisible: false,
currentWaybill: {},
@@ -214,10 +282,17 @@ export default {
open: false,
// 发货计划列表
planListOption: [],
// 左侧面板宽度
leftWidth: 260,
// 左侧面板是否收起
isLeftCollapsed: false,
// 拖拽相关
startX: 0,
startLeftWidth: 0,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 50,
waybillNo: undefined,
waybillName: undefined,
licensePlate: undefined,
@@ -245,11 +320,19 @@ export default {
},
coilList: [],
canEdit: true,
// 订单列表
orderList: [],
orderLoading: false,
// 订单选择对话框
orderDialogVisible: false,
// 订单搜索关键词
orderQuery: '',
};
},
created() {
this.loadPlanList();
this.getList();
this.loadOrderList();
},
computed: {
/** 计算已发货数量 */
@@ -268,33 +351,59 @@ export default {
this.planListOption = response.rows || [];
});
},
/** 开始拖拽 */
/** 加载订单列表 */
loadOrderList() {
this.orderLoading = true;
listOrder({ pageNum: 1, pageSize: 100, orderType: 1, 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;
}
// 记录初始位置
const container = this.$el.querySelector('.el-card__body');
const containerRect = container.getBoundingClientRect();
this.startY = e.clientY;
this.startTopHeight = this.topHeight;
this.startX = e.clientX;
this.startLeftWidth = this.leftWidth;
document.addEventListener('mousemove', this.resize);
document.addEventListener('mouseup', this.stopResize);
},
/** 拖拽中 */
/** 拖拽中（水平） */
resize(e) {
const container = this.$el.querySelector('.el-card__body');
const containerRect = container.getBoundingClientRect();
// 基于初始位置计算相对变化
const deltaY = e.clientY - this.startY;
const newHeight = this.startTopHeight + deltaY;
if (newHeight > 100 && newHeight < containerRect.height - 100) {
this.topHeight = newHeight;
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
@@ -471,6 +580,8 @@ export default {
salesPerson: row.salesPerson,
principal: row.principal,
principalPhone: row.principalPhone,
// 车牌号
licensePlate: row.licensePlate,
remark: row.remark
};
this.open = true;
@@ -482,10 +593,48 @@ export default {
...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,
@@ -545,26 +694,84 @@ export default {
</script>
<style scoped>
.plan-container {
padding: 10px;
height: 100%;
border-right: 1px solid #ebeef5;
.app-container {
height: 100vh;
padding: 0;
overflow: hidden;
height: calc(100vh - 84px);
}
.plan-container h3 {
margin: 0 0 10px 0;
.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;
}
.resizer {
.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: 4px;
background-color: #818181;
cursor: row-resize;
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 {
@@ -577,8 +784,8 @@ export default {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 2px;
height: 40px;
width: 2px;
background-color: #c0c4cc;
border-radius: 1px;
transition: background-color 0.3s;
@@ -595,4 +802,27 @@ export default {
.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>