2d30a2f3fb
- 在CoilSelector组件中新增rangeMode和rangeData属性，支持传入可选钢卷列表 - 发货单明细表增加对可选钢卷列表的支持，并在增删改时刷新列表 - 发货单打印时自动填充取货地点为实际库位前三位 - 调整操作列固定显示在表格右侧
471 lines
17 KiB
Vue
471 lines
17 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row :gutter="10">
|
||
<el-col :span="4">
|
||
<el-card>
|
||
<el-input v-model="planQueryParams.planName" placeholder="计划名称" clearable @change="handlePlanQuery"
|
||
style="width: 100%;" />
|
||
|
||
<el-tree v-loading="planLoading" :data="planTreeData" :props="planTreeProps" @node-click="handlePlanSelect"
|
||
default-expand-all style="margin-top: 10px; height: 550px; overflow: auto;">
|
||
<template slot-scope="{ node, data }">
|
||
<span class="plan-node">
|
||
<span class="plan-name">{{ data.planName }}</span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
<pagination v-show="planTotal > 0" :total="planTotal" :page.sync="planQueryParams.pageNum"
|
||
:limit.sync="planQueryParams.pageSize" @pagination="getPlanList" style="margin-top: 10px;"
|
||
layout="total, prev, jumper, next" />
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :span="20">
|
||
<el-card>
|
||
<el-form :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>
|
||
<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-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>
|
||
|
||
<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="senderUnit" />
|
||
<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" />
|
||
<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-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)">打印发货单</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-edit"
|
||
@click.stop="handleUpdate(scope.row)">修改</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-delete"
|
||
@click.stop="handleDelete(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
||
|
||
<el-divider style="margin: 20px 0;" />
|
||
|
||
<DeliveryWaybillDetail ref="detailTable" :waybillId="waybillId" :coilList="coilList" @add="refreshCoilList" @update="refreshCoilList" @delete="refreshCoilList" />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
|
||
|
||
<!-- 添加或修改发货单对话框 -->
|
||
<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="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="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>
|
||
<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="weighbridge">
|
||
<el-input v-model="form.weighbridge" placeholder="请输入磅房" />
|
||
</el-form-item>
|
||
<el-form-item label="销售" prop="salesPerson">
|
||
<el-input v-model="form.salesPerson" placeholder="请输入销售" />
|
||
</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">
|
||
<el-input v-model="form.principalPhone" placeholder="请输入负责人电话" />
|
||
</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="900px" append-to-body center>
|
||
<WayBill :waybill="currentWaybill" :waybillDetails="currentWaybillDetails" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listDeliveryWaybill, getDeliveryWaybill, delDeliveryWaybill, addDeliveryWaybill, updateDeliveryWaybill } from "@/api/wms/deliveryWaybill";
|
||
import { listDeliveryPlan, listSelectableCoils } from "@/api/wms/deliveryPlan"; // 导入发货计划API
|
||
import { listCoilByIds } from "@/api/wms/coil";
|
||
import { listDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
|
||
import MemoInput from "@/components/MemoInput";
|
||
import DeliveryWaybillDetail from "../components/detailTable.vue";
|
||
import WayBill from "../components/wayBill.vue";
|
||
|
||
export default {
|
||
name: "DeliveryWaybill",
|
||
components: {
|
||
MemoInput,
|
||
DeliveryWaybillDetail,
|
||
WayBill
|
||
},
|
||
data() {
|
||
return {
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 发货单表格数据
|
||
deliveryWaybillList: [],
|
||
waybillId: null,
|
||
// 打印相关数据
|
||
printDialogVisible: false,
|
||
currentWaybill: {},
|
||
currentWaybillDetails: [],
|
||
// 弹出层标题
|
||
title: "",
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
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: {},
|
||
// 发货计划相关数据
|
||
planList: [],
|
||
planTreeData: [],
|
||
planTreeProps: {
|
||
label: 'planName',
|
||
children: 'children'
|
||
},
|
||
planTotal: 0,
|
||
planLoading: false,
|
||
selectedPlan: null,
|
||
planQueryParams: {
|
||
pageNum: 1,
|
||
pageSize: 20, // 增大分页大小以确保树形结构显示足够数据
|
||
planName: undefined,
|
||
planType: 0,
|
||
auditStatus: 1,
|
||
},
|
||
coilList: []
|
||
};
|
||
},
|
||
created() {
|
||
this.getList();
|
||
this.getPlanList();
|
||
},
|
||
methods: {
|
||
/** 查询发货单列表 */
|
||
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
|
||
updateDeliveryWaybill(row).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();
|
||
},
|
||
// 获取发货计划列表
|
||
getPlanList() {
|
||
this.planLoading = true;
|
||
listDeliveryPlan(this.planQueryParams).then(response => {
|
||
this.planList = response.rows;
|
||
this.planTotal = response.total;
|
||
// 转换为树形数据格式
|
||
this.planTreeData = response.rows;
|
||
this.planLoading = false;
|
||
});
|
||
},
|
||
|
||
// 发货计划搜索
|
||
handlePlanQuery() {
|
||
this.planQueryParams.pageNum = 1;
|
||
this.getPlanList();
|
||
},
|
||
// 发货计划重置
|
||
resetPlanQuery() {
|
||
this.planQueryParams.planName = undefined;
|
||
this.handlePlanQuery();
|
||
},
|
||
handlePlanSelect(row) {
|
||
this.selectedPlan = row;
|
||
this.refreshCoilList();
|
||
// 更新查询参数，根据选中的planId筛选发货单
|
||
this.queryParams.planId = row.planId;
|
||
this.waybillId = null;
|
||
this.getList();
|
||
},
|
||
handleRowClick(row) {
|
||
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}`;
|
||
}
|
||
}
|
||
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;
|
||
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;
|
||
});
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('wms/deliveryWaybill/export', {
|
||
...this.queryParams
|
||
}, `deliveryWaybill_${new Date().getTime()}.xlsx`)
|
||
},
|
||
/** 打印发货单 */
|
||
handlePrint(row) {
|
||
this.loading = true;
|
||
// 获取发货单明细
|
||
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(',');
|
||
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.printDialogVisible = true;
|
||
this.loading = false;
|
||
}).catch(error => {
|
||
console.error('获取发货单明细失败:', error);
|
||
this.$modal.msgError('获取发货单明细失败');
|
||
this.loading = false;
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.plan-container {
|
||
padding: 10px;
|
||
height: 100%;
|
||
border-right: 1px solid #ebeef5;
|
||
}
|
||
|
||
.plan-container h3 {
|
||
margin: 0 0 10px 0;
|
||
padding: 0;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|