410 lines
15 KiB
Vue
410 lines
15 KiB
Vue
<template>
|
||
<div v-loading="loading" style="position: relative; top: 0; background-color: #f5f7fa;">
|
||
<div v-if="waybillId">
|
||
<!-- 这一部分始终定在最上方 -->
|
||
<el-row :gutter="10" class="mb8" style="position: sticky; top: 0; z-index: 10; padding: 10px; background-color: #fff;">
|
||
<el-col :span="2" style="font-weight: 900;">发货单明细</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<coil-selector dialogWidth="1200px" :use-trigger="true" multiple @confirm="handleBatchAdd"
|
||
:filters="{ selectType: 'product', status: 0, excludeBound: true, orderBy: true }" :orderBy="true" :disableO="true">
|
||
<el-button type="primary" plain icon="el-icon-plus" size="mini">批量新增</el-button>
|
||
</coil-selector>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="warning" plain icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button>
|
||
</el-col>
|
||
|
||
<el-col :span="6" style="float: right;" size="medium">
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="总卷数">
|
||
{{ totalCoilCount }} 卷
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="总重量">
|
||
{{ totalWeight }} 吨
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-table :data="deliveryWaybillDetailList">
|
||
<!-- <el-table-column label="关联钢卷表ID" align="center" prop="coilId" /> -->
|
||
<el-table-column label="品名" align="center" prop="productName" />
|
||
<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="settlementType" />
|
||
<!-- <el-table-column label="原料厂家" align="center" prop="rawMaterialFactory" /> -->
|
||
<el-table-column label="卷号" align="center" prop="coilNo">
|
||
<template slot-scope="scope">
|
||
<current-coil-no :current-coil-no="scope.row.coilNo"></current-coil-no>
|
||
</template>
|
||
</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="surfaceTreatmentDesc" />
|
||
<!-- <el-table-column label="数量" align="center" prop="quantity" /> -->
|
||
<el-table-column label="重量" align="center" prop="weight" />
|
||
<!-- <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">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-delete" @click="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" />
|
||
</div>
|
||
<div v-else>
|
||
<el-empty description="请选择发货单查看明细" />
|
||
</div>
|
||
|
||
<!-- 添加或修改发货单明细对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form-item label="发货钢卷" prop="coilId">
|
||
<div style="display: flex; gap: 10px;">
|
||
<coil-selector dialogWidth="1200px" v-model="form.coilId" :use-trigger="true"
|
||
:filters="{ selectType: 'product', status: 0, excludeBound: true, orderBy: true }" @select="handleSelect"
|
||
:orderBy="true" :disableO="true"/>
|
||
<el-checkbox v-model="autoFillForm" label="自动填写表单信息" />
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="品名" prop="productName">
|
||
<el-select v-model="form.productName" placeholder="请选择品名" style="width: 100%">
|
||
<el-option v-for="item in dict.type.coil_itemname" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="切边" prop="edgeType">
|
||
<el-select v-model="form.edgeType" placeholder="请选择切边" clearable style="width: 100%">
|
||
<el-option label="净边料" value="净边料" />
|
||
<el-option label="毛边料" value="毛边料" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="包装" prop="packaging">
|
||
<el-select v-model="form.packaging" placeholder="请选择包装" clearable style="width: 100%">
|
||
<el-option label="裸包" value="裸包" />
|
||
<el-option label="普包" value="普包" />
|
||
<el-option label="简包" value="简包" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="结算方式" prop="settlementType">
|
||
<el-select v-model="form.settlementType" placeholder="请选择结算方式" style="width: 100%">
|
||
<el-option label="磅重结算" value="磅重结算" />
|
||
<el-option label="卷重结算" value="卷重结算" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="原料厂家" prop="rawMaterialFactory">
|
||
<el-input v-model="form.rawMaterialFactory" placeholder="请输入原料厂家" />
|
||
</el-form-item>
|
||
<el-form-item label="卷号" prop="coilNo">
|
||
<el-input v-model="form.coilNo" placeholder="请输入卷号" />
|
||
</el-form-item>
|
||
<el-form-item label="规格" prop="specification">
|
||
<el-input v-model="form.specification" placeholder="请输入规格" />
|
||
</el-form-item>
|
||
<el-form-item label="材质" prop="material">
|
||
<el-input v-model="form.material" placeholder="请输入材质" />
|
||
</el-form-item>
|
||
<el-form-item label="数量" prop="quantity">
|
||
<el-input v-model="form.quantity" placeholder="请输入数量" />
|
||
</el-form-item>
|
||
<el-form-item label="重量" prop="weight">
|
||
<el-input v-model="form.weight" placeholder="请输入重量" />
|
||
</el-form-item>
|
||
<el-form-item label="单价" prop="unitPrice">
|
||
<el-input v-model="form.unitPrice" 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>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listDeliveryWaybillDetail, getDeliveryWaybillDetail, delDeliveryWaybillDetail, addDeliveryWaybillDetail, updateDeliveryWaybillDetail, batchAddDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
|
||
import { listCoilByIds } from "@/api/wms/coil";
|
||
import CoilSelector from "@/components/CoilSelector";
|
||
|
||
export default {
|
||
name: "DeliveryWaybillDetail",
|
||
props: {
|
||
waybillId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
coilList: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
dicts: ['coil_itemname'],
|
||
components: {
|
||
CoilSelector
|
||
},
|
||
watch: {
|
||
waybillId: {
|
||
handler(newVal, oldVal) {
|
||
// if (newVal) {
|
||
this.getList();
|
||
// }
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 遮罩层
|
||
loading: false,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 发货单明细表格数据
|
||
deliveryWaybillDetailList: [],
|
||
// 弹出层标题
|
||
title: "",
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 999,
|
||
waybillId: this.waybillId,
|
||
coilId: undefined,
|
||
productName: undefined,
|
||
edgeType: undefined,
|
||
packaging: undefined,
|
||
settlementType: undefined,
|
||
rawMaterialFactory: undefined,
|
||
coilNo: undefined,
|
||
specification: undefined,
|
||
material: undefined,
|
||
quantity: undefined,
|
||
weight: undefined,
|
||
unitPrice: undefined,
|
||
},
|
||
// 表单参数
|
||
form: {},
|
||
// 自动填写表单信息
|
||
autoFillForm: true,
|
||
};
|
||
},
|
||
computed: {
|
||
totalCoilCount() {
|
||
return this.total;
|
||
},
|
||
totalWeight() {
|
||
return this.deliveryWaybillDetailList.reduce((acc, item) => acc + Number(item.weight), 0).toFixed(3);
|
||
}
|
||
},
|
||
created() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
/** 查询发货单明细列表 */
|
||
async getList() {
|
||
if (!this.waybillId) {
|
||
return;
|
||
}
|
||
this.loading = true;
|
||
const response = await listDeliveryWaybillDetail({ ...this.queryParams, waybillId: this.waybillId })
|
||
const coils = response.rows.map(item => item.coilId).join(',');
|
||
if (coils) {
|
||
const coilResponse = await listCoilByIds(coils);
|
||
// 查找response中coilId相对应的项，将actualWarehouseName赋值给deliveryWaybillDetailList中
|
||
response.rows.forEach(item => {
|
||
const coil = coilResponse.rows.find(c => c.coilId === item.coilId);
|
||
if (coil) {
|
||
item.actualWarehouseName = coil.actualWarehouseName;
|
||
item.surfaceTreatmentDesc = coil.surfaceTreatmentDesc;
|
||
}
|
||
});
|
||
}
|
||
this.deliveryWaybillDetailList = response.rows;
|
||
this.total = response.total;
|
||
this.loading = false;
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
handleSelect(coil) {
|
||
// 填充钢卷信息到表单中，
|
||
console.log(coil);
|
||
if (!this.autoFillForm) {
|
||
return;
|
||
}
|
||
this.form = {
|
||
...this.form,
|
||
productName: coil.itemName,
|
||
edgeType: coil.trimmingRequirement,
|
||
packaging: coil.packagingRequirement,
|
||
rawMaterialFactory: coil.manufacturer,
|
||
coilNo: coil.currentCoilNo,
|
||
specification: coil.specification,
|
||
settlementType: '卷重结算',
|
||
material: coil.material,
|
||
quantity: 1,
|
||
weight: coil.netWeight,
|
||
}
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
detailId: undefined,
|
||
waybillId: this.waybillId,
|
||
coilId: undefined,
|
||
productName: undefined,
|
||
edgeType: undefined,
|
||
packaging: undefined,
|
||
settlementType: '卷重结算',
|
||
rawMaterialFactory: undefined,
|
||
coilNo: undefined,
|
||
specification: undefined,
|
||
material: undefined,
|
||
quantity: undefined,
|
||
weight: undefined,
|
||
unitPrice: undefined,
|
||
remark: undefined,
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.handleQuery();
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.detailId)
|
||
this.single = selection.length !== 1
|
||
this.multiple = !selection.length
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.reset();
|
||
this.open = true;
|
||
this.title = "添加发货单明细";
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.loading = true;
|
||
this.reset();
|
||
const detailId = row.detailId || this.ids
|
||
getDeliveryWaybillDetail(detailId).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.detailId != null) {
|
||
updateDeliveryWaybillDetail(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
this.$emit('update');
|
||
});
|
||
} else {
|
||
addDeliveryWaybillDetail(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
this.$emit('add');
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
handleBatchAdd(rows) {
|
||
console.log(rows);
|
||
const payload = rows.map(coil => ({
|
||
waybillId: this.waybillId,
|
||
coilId: coil.coilId,
|
||
productName: coil.itemName,
|
||
edgeType: coil.trimmingRequirement,
|
||
settlementType: '卷重结算',
|
||
packaging: coil.packagingRequirement,
|
||
rawMaterialFactory: coil.manufacturer,
|
||
coilNo: coil.currentCoilNo,
|
||
specification: coil.specification,
|
||
material: coil.material,
|
||
quantity: 1,
|
||
weight: coil.netWeight,
|
||
}))
|
||
this.loading = true;
|
||
this.buttonLoading = true;
|
||
batchAddDeliveryWaybillDetail(payload).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const detailIds = row.detailId || this.ids;
|
||
this.$modal.confirm('是否确认删除发货单明细编号为"' + detailIds + '"的数据项？').then(() => {
|
||
this.loading = true;
|
||
return delDeliveryWaybillDetail(detailIds);
|
||
}).then(() => {
|
||
this.loading = false;
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
this.$emit('delete');
|
||
}).catch(() => {
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('wms/deliveryWaybillDetail/export', {
|
||
...this.queryParams,
|
||
waybillId: this.waybillId,
|
||
}, `deliveryWaybillDetail_${new Date().getTime()}.xlsx`)
|
||
}
|
||
}
|
||
};
|
||
</script>
|