You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

711 lines
22 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" class="edit-el-form">
<el-form-item label="工单编码" prop="workorderCode">
<el-input
v-model="queryParams.workorderCode"
placeholder="请输入工单编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="订单编码" prop="workorderCodeSap">
<el-input
v-model="queryParams.workorderCodeSap"
placeholder="请输入订单编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="产品编号" prop="productCode">
<el-input
v-model="queryParams.productCode"
placeholder="请输入产品编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="产品名称" prop="productName">
<el-input
v-model="queryParams.productName"
placeholder="请输入产品名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="规格型号" prop="productSpc">
<el-input
v-model="queryParams.productSpc"
placeholder="请输入规格型号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="工单生产日期" prop="productDate">
<el-date-picker clearable
v-model="queryParams.productDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择工单生产日期"
style="width:205px"
>
</el-date-picker>
</el-form-item>
<!--
<el-form-item label="单据状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择单据状态"
@change="$forceUpdate()"
clearable
style="width:205px"
@keyup.enter.native="handleQuery">
<el-option v-for="item in options" :key="item.status" :label="item.label" :value="item.status"></el-option>
</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="10" class="mb8">
<!-- <el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['mes:prepare:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['mes:prepare:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['mes:prepare:remove']"
>删除</el-button>
</el-col> -->
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['mes:prepare:export']"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
:disabled="single"
icon="el-icon-download"
size="mini"
@click="showPrint"
v-hasPermi="['mes:prepare:export']"
>打印生产物料</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-download"
size="mini"
@click="showPrintX"
v-hasPermi="['mes:prepare:export']"
>打印反冲物料</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="prepareList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- 序号 -->
<el-table-column type="index" align="center" :index="indexMethod" label="序号" fixed/>
<el-table-column label="工单编码" align="center" prop="workorderCode" width="150" fixed/>
<el-table-column label="订单编码" align="center" prop="workorderCodeSap" width="100" fixed
:formatter="orderCodeFormate"
/>
<el-table-column label="产品编号" align="center" prop="productCode" width="180"
:formatter="productCodeFormate"
/>
<el-table-column label="产品名称" align="center" prop="productName" width="300" :show-overflow-tooltip="true"/>
<el-table-column label="工单生产日期" align="center" prop="productDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.productDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="单据状态" align="center" prop="status">
<template slot-scope="scope">
{{ scope.row.status == "L0" ? "待领用" : "已领用" }}
</template>
</el-table-column>
<el-table-column label="生产数量" align="center" prop="quantity" />
<el-table-column label="单位" align="center" prop="unit" />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改备料单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-form-item label="工单编码" prop="workorderCode">
<el-input v-model="form.workorderCode" placeholder="请输入工单编码" />
</el-form-item>
<el-form-item label="工单名称" prop="workorderName">
<el-input v-model="form.workorderName" placeholder="请输入工单名称" />
</el-form-item>
<el-form-item label="父工单" prop="parentOrder">
<el-input v-model="form.parentOrder" placeholder="请输入父工单" />
</el-form-item>
<el-form-item label="订单编码" prop="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入订单编码" />
</el-form-item>
<el-form-item label="产品编号" prop="productCode">
<el-input v-model="form.productCode" placeholder="请输入产品编号" />
</el-form-item>
<el-form-item label="产品名称" prop="productName">
<el-input v-model="form.productName" placeholder="请输入产品名称" />
</el-form-item>
<el-form-item label="规格型号" prop="productSpc">
<el-input v-model="form.productSpc" placeholder="请输入规格型号" />
</el-form-item>
<el-form-item label="配料计划明细id" prop="wetDetailPlanId">
<el-input v-model="form.wetDetailPlanId" placeholder="请输入配料计划明细id" />
</el-form-item>
<el-form-item label="工单生产日期" prop="productDate" >
<el-date-picker clearable
v-model="form.productDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择工单生产日期"
style="width:350px">
</el-date-picker>
</el-form-item>
<el-form-item label="班次" prop="shiftId">
<el-input v-model="form.shiftId" placeholder="请输入班次" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="工厂编码" prop="factoryCode">
<el-input v-model="form.factoryCode" placeholder="请输入工厂编码" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 打印预览弹出层(生产物料) -->
<el-dialog
title="备料信息"
:visible.sync="printDialogVisible"
:width="shengchan?'731px':'721px'"
>
<div id="printFrom" class="my-print-box">
<el-form :model="form">
<!-- 表头-工单信息 -->
<div class="my-print-barcode" :width="shengchan?'731px':'721px'">
<svg id="barcode"></svg>
</div>
<el-row>
<div class="my-print-head">
<el-col>生产订单备料单({{printData.printTitle}})</el-col>
</div>
</el-row>
<!-- 导航栏 -->
<el-row class="my-print-nav">
<el-col :span="8">工厂:{{printData.factory}}</el-col>
<el-col :span="8">工作中心:{{printData.workCenter}}</el-col>
<el-col :span="8" v-if="printData.prodLineCode!=null">线体:{{printData.prodLineCode}}</el-col>
</el-row>
<el-row class="my-print-nav">
<el-col :span="8">生产日期:{{printData.productDate}}</el-col>
<el-col :span="8">打印日期:{{printData.printDate}}</el-col>
<el-col :span="8">页次: 1/ 1</el-col>
</el-row>
<!-- 主数据 -->
<div v-for="(item,index) in printData.workTable" :key="index">
<el-table
v-if="refreshNewWorkerTable" v-loading="newWorkerLoading" class="my-print-table" :data="item"
border style="width: 100%;">
<el-table-column label="序号" width="40">
<template slot-scope="scope">
<!-- scope.$index 是当前行的索引(从 0 开始),加 1 后乘以 2 -->
{{ (scope.$index + 1) + (index==0?fenyeNumber* index:fenyeNumberTwo* index-2) }}
</template>
</el-table-column>
<el-table-column prop="materialCode" label="料号" :width="shengchan?85:125" :formatter="productCodeFormate"></el-table-column>
<el-table-column prop="materialName" label="物料描述" :width="shengchan?200:240"></el-table-column>
<el-table-column prop="unit" width="60" label="单位"></el-table-column>
<el-table-column v-if="showWorkorderCode" prop="workorderCode" width="90" label="生产订单" :formatter="orderCodeFormate"></el-table-column>
<el-table-column prop="quantity" label="请领数量" width="80"></el-table-column>
<el-table-column prop="routeCode" width="60" label="实发数量"></el-table-column>
<el-table-column prop="routeCode" width="75" label="实发数量2"></el-table-column>
</el-table>
<div class="fy" v-if="index!=printData.workTable.length-1"></div>
</div>
<!-- 底部 -->
<el-row class="my-print-foot">
<el-col :offset="1" :span="3">发料人:</el-col>
<el-col :offset="2" :span="3">收料人:</el-col>
<el-col :offset="2" :span="3">白色:车间联</el-col>
<el-col :offset="1" :span="3">蓝色:仓库联</el-col>
<el-col :offset="1" :span="3">红色:财务联</el-col>
</el-row>
<el-row class="my-print-foot">
<el-col :offset="1" :span="3">SAP-No:{{printData.SAPNo}}</el-col>
<el-col :offset="1" :span="3">Z-PM-F-030-A.2</el-col>
</el-row>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlePrint(printData)"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { listPrepare, getPrepare, delPrepare, addPrepare, updatePrepare } from "@/api/mes/prepare";
import {printPrepareByCode,printPrepareXByCode} from "@/api/mes/prepareDetail";
import moment from "moment/moment";
import JsBarcode from 'jsbarcode';
// import { listPrepareDetail, getPrepareDetail, delPrepareDetail, addPrepareDetail, updatePrepareDetail } from "@/api/mes/prepareDetail";
// import Detail from "./prepareDetail.vue";
export default {
name: "Prepare",
// components: {Detail},
data() {
return {
fenyeNumber:2,
fenyeNumberTwo:4,
shengchan:true,
newWorkerLoading: false,
refreshNewWorkerTable:true,
showWorkorderCode:true,
// 选择领料单
selectPrepare:[],
// 打印
printData: {
printable: 'printFrom',
ignore: ['no-print'],
workCenter: "暂无数据",
SAPNo: null,
manufacture: null,
auditor: null,
printDate: null,
factory: null,
productDate: null,
workTable: [],
barcode:null,//打印生产物料和反冲物料的条码
},
printDialogVisible: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 备料单表格数据
prepareList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
workorderCode: null,
workorderName: null,
parentOrder: null,
orderId: null,
orderCode: null,
productId: null,
productCode: null,
prodType: null,
productName: null,
productSpc: null,
wetDetailPlanId: null,
productDate: null,
shiftId: null,
ancestors: null,
status: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
factoryCode: null
},
options: [{
status: "L0",
label: '待确认'
}, {
status: "L1",
label: '已确认'
}],
// 表单参数
form: {},
// 表单校验
rules: {
workorderCode: [
{ required: true, message: "工单编码不能为空", trigger: "blur" }
],
parentOrder: [
{ required: true, message: "父工单不能为空", trigger: "blur" }
],
orderId: [
{ required: true, message: "订单id不能为空", trigger: "blur" }
],
productCode: [
{ required: true, message: "产品编号不能为空", trigger: "blur" }
],
productName: [
{ required: true, message: "产品名称不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
},
mounted() {
this.generateBarcode();
},
methods: {
//产品编码格式化
productCodeFormate(row, column, cellValue){
return cellValue.slice(7,18); //返回值
},
//订单编码格式化
orderCodeFormate(row, column, cellValue){
if(cellValue !=null){
return cellValue.slice(3,18); //返回值
}
},
// 打印
handlePrint(params) {
printJS({
printable: params.printable, // 'printFrom', // 标签元素id
type: params.type || 'html',
dpi: 300, // 清晰度
//font_size: "",// 设置字体大小
header: params.header, // '表单',
targetStyles: ['*'],
style: `
body {margin: 3mm;padding: 0;}
.fy{page-break-after: always;}
table { border-collapse: collapse; } table, th, td { border: 2px solid black; }
.el-table .cell{padding-left:5px;padding-right:5px;}
`,
ignoreElements: params.ignore || [], // ['no-print']
properties: params.properties || null
})
},
// 打印预览(生产物料)
showPrint() {
this.shengchan = true;
// 清楚缓存
this.printData.workCenter = "暂无数据";
this.printData.printDate = null;
this.printData.workTable = [];
this.printData.factory = null;
this.printData.productDate = null;
this.printData.prodLineCode = null;
// 打开工单信息对话框
this.printDialogVisible = true;
this.newWorkerLoading = true // 设置加载状态为true表示正在加载
this.refreshNewWorkerTable = false // 先将refreshProTable设置为false隐藏表格
printPrepareByCode(this.selectPrepare[0].workorderCode,'0').then(response => {
this.showWorkorderCode = true;
this.printData.printTitle = '订单物料';
this.printData.factory = response.data.mesPrepareDetailList[0].factoryCode
this.printData.productDate = response.data.mesPrepareDetailList[0].productDate
this.printData.printDate = moment(new Date()).format('YYYY-MM-DD')
this.printData.workTable = response.data.mesPrepareDetailList;
let chunkedArray = [];
// 遍历this.printData.workTable
for (let i = 0; i < this.printData.workTable.length; i += (i==0?this.fenyeNumber:this.fenyeNumberTwo)) {
// 使用slice方法从当前索引i开始切割切割长度为10如果剩余元素少于10则切割剩余所有元素
let chunk = this.printData.workTable.slice(i, i + (i==0?this.fenyeNumber:this.fenyeNumberTwo));
// 将切割后的数组添加到chunkedArray中
chunkedArray.push(chunk);
}
this.printData.workTable = chunkedArray;
this.printData.prodLineCode = response.data.mesPrepare.prodLineCode
this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true显示表格
this.newWorkerLoading = false // 设置加载状态为false表示加载完成
this.generateBarcode(this.selectPrepare[0].workorderCode); //条码 根据工单号生成
})
},
// 打印预览(反冲物料)
showPrintX() {
if(this.queryParams.productDate == null){
this.$modal.msgError("请选择工单生产日期");
return;
}
this.shengchan = false;
// 清楚缓存
this.printData.workCenter = "暂无数据";
this.printData.printDate = null;
this.printData.workTable = [];
this.printData.factory = null;
this.printData.productDate = null;
this.printData.prodLineCode = null;
// 打开工单信息对话框
this.printDialogVisible = true;
this.newWorkerLoading = true // 设置加载状态为true表示正在加载
this.refreshNewWorkerTable = false // 先将refreshProTable设置为false隐藏表格
printPrepareXByCode(moment(this.queryParams.productDate).format('YYYY-MM-DD'),'X').then(response => {
this.showWorkorderCode = false;
this.printData.printTitle = '反冲物料';
this.printData.factory = response.data.mesPrepareDetailList[0].factoryCode
this.printData.productDate = moment(this.queryParams.productDate).format('YYYY-MM-DD')
this.printData.printDate = moment(new Date()).format('YYYY-MM-DD')
this.printData.workTable = response.data.mesPrepareDetailList
let chunkedArray = [];
// 遍历this.printData.workTable
for (let i = 0; i < this.printData.workTable.length; i += (i==0?this.fenyeNumber:this.fenyeNumberTwo)) {
// 使用slice方法从当前索引i开始切割切割长度为10如果剩余元素少于10则切割剩余所有元素
let chunk = this.printData.workTable.slice(i, i + (i==0?this.fenyeNumber:this.fenyeNumberTwo));
// 将切割后的数组添加到chunkedArray中
chunkedArray.push(chunk);
}
this.printData.workTable = chunkedArray;
this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true显示表格
this.newWorkerLoading = false // 设置加载状态为false表示加载完成
this.generateBarcode(this.printData.printDate); //条码 根据打印日期生成
})
},
//打印条码
generateBarcode(barcode){
JsBarcode("#barcode", barcode, {
format: "CODE128",
height:75,
width:2,
displayValue: true,
});
},
// 生成表头序号
indexMethod(index){
return index+1 ;
},
/** 查询备料单列表 */
getList() {
this.loading = true;
listPrepare(this.queryParams).then(response => {
this.prepareList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
prepareId: null,
workorderCode: null,
workorderName: null,
parentOrder: null,
orderId: null,
orderCode: null,
productId: null,
productCode: null,
prodType: null,
productName: null,
productSpc: null,
wetDetailPlanId: null,
productDate: null,
shiftId: null,
ancestors: null,
status: null,
remark: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
factoryCode: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.prepareId)
this.single = selection.length!==1
this.multiple = !selection.length
this.selectPrepare = selection
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加备料单";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const prepareId = row.prepareId || this.ids
getPrepare(prepareId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改备料单";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.prepareId != null) {
updatePrepare(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addPrepare(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const prepareIds = row.prepareId || this.ids;
this.$modal.confirm('是否确认删除备料单编号为"' + prepareIds + '"的数据项?').then(function() {
return delPrepare(prepareIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('mes/prepare/export', {
...this.queryParams
}, `prepare_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style>
.my-print-table .el-table {
border-collapse: collapse;
border-spacing: 0;
}
.my-print-table .el-table__header-wrapper th {
border: 1px solid black !important;
}
.my-print-table .el-table__body-wrapper td {
border: 1px solid black !important;
}
.my-print-head {
margin-top: 2px;
font-weight: bold;
text-align: center;
}
.my-print-barcode {
margin-top: 0px;
margin-right: 40px;
text-align: right;
}
.my-print-nav {
margin-top: 10px;
margin-bottom: 10px;
}
.my-print-foot {
margin-top: 20px;
}
@media print {
body {
font-family: 'Arial', sans-serif; /* 设置字体为'Arial'或其他清晰的无衬线字体 */
font-size: 14px; /* 设置字体大小 */
}
.my-print-table .el-table {
border-collapse: collapse; /* 合并表格边框 */
}
}
.fy{
page-break-after: always;
}
</style>