2024-08-29 MES-首检报表
A0010407
3 months ago
parent
ec8dae6ae9
commit
561c92dc67
@ -0,0 +1,576 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div id="table" v-show="showTable">
|
||||
<el-form class="print-selfMutualInspection">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<img src="@/assets/logo/lanjv.png" class="lanju-logo" />
|
||||
</el-col>
|
||||
<el-col class="tittle-text" :span="14">
|
||||
<span>中山榄菊日化实业有限公司</span>
|
||||
</el-col>
|
||||
<el-col :span="5"> </el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col class="tittle-text">
|
||||
<span>产品首检记录表</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<div>生产车间:黑蚊香车间</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>产品名称: {{ headerParameters.productName }}</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div>检查人: {{ headerParameters.checkPeople }}</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<div>
|
||||
生产产线:
|
||||
<el-select
|
||||
v-model="headerParameters.lineCode"
|
||||
filterable
|
||||
placeholder="请选择产线"
|
||||
style="width: 160px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineCodeOption"
|
||||
:key="item.equipmentCode"
|
||||
:label="item.equipmentName"
|
||||
:value="item.equipmentCode"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
检查日期:
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="headerParameters.checkDate"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择检查日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<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="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handlePrintPre"
|
||||
>打印
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<table class="bordered-table">
|
||||
<tr>
|
||||
<th v-for="item in leftTableTittle0" style="width:200px" :key="item.key">
|
||||
{{ item.label }}
|
||||
</th>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="item in leftTableTittle" :key="item.key" :width = leftTableTittleWidth >
|
||||
{{ item.label }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="(index, key) in leftTableData[0]" :key="key">
|
||||
{{ key }}
|
||||
</th>
|
||||
</tr>
|
||||
<tr v-for="item in leftTableData" :key="item.id">
|
||||
<!-- 动态渲染列值 -->
|
||||
<td v-for="(value, key) in item" :key="key">{{ value }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan = "1">异常处理</td>
|
||||
<td :colspan = leftPropertyNum>{{ headerParameters.bz }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
备注:{{ headerParameters.remark }}
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<table class="bordered-table">
|
||||
<tr>
|
||||
<th v-for="item in rightTableTittle0" style="width:200px" :key="item.key">
|
||||
{{ item.label }}
|
||||
</th>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="item in rightTableTittle" :key="item.key" :width = rightTableTittleWidth >
|
||||
{{ item.label }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="(index, key) in rightTableData[0]" :key="key">
|
||||
{{ key }}
|
||||
</th>
|
||||
</tr>
|
||||
<tr v-for="item in rightTableData" :key="item.id">
|
||||
<!-- 动态渲染列值 -->
|
||||
<td v-for="(value, key) in item" :key="key">{{ value }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan = "1">异常处理</td>
|
||||
<td :colspan = rightPropertyNum>{{ headerParameters.bz }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
备注:{{ headerParameters.remark }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div id="printPage" v-show="showPrintPage">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<img src="@/assets/logo/lanjv.png" class="lanju-logo-print" />
|
||||
</el-col>
|
||||
<el-col class="tittle-text-print" :span="14">
|
||||
<span>中山榄菊日化实业有限公司</span>
|
||||
</el-col>
|
||||
<el-col :span="5"> </el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col class="tittle-text-print">
|
||||
<span>产品首检记录表</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<div class="text-print">生产车间:黑蚊香车间</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="text-print" >生产产线: {{ headerParameters.lineCode }}</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="text-print">检查人: {{ headerParameters.checkPeople }}</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<div class="text-print">产品名称: {{ headerParameters.productName }}</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="text-print">检查日期: {{ headerParameters.checkDate }}</div>
|
||||
<br />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<table class="bordered-table-print" border="1">
|
||||
<tr>
|
||||
<th v-for="item in leftTableTittle0" style="width:200px" :key="item.key">
|
||||
{{ item.label }}
|
||||
</th>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="item in leftTableTittle" :key="item.key" :width = leftPrintTittleWidth >
|
||||
{{ item.label }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th v-for="(index, key) in leftTableData[0]" :key="key">
|
||||
{{ key }}
|
||||
</th>
|
||||
</tr>
|
||||
<tr v-for="item in leftTableData" :key="item.id">
|
||||
<td v-for="(value, key) in item" :key="key">{{ value }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan = "1">异常处理</td>
|
||||
<td :colspan = leftPropertyNum>{{ headerParameters.bz }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
备注:{{ headerParameters.remark }}
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<table class="bordered-table-print" border="1">
|
||||
<tr>
|
||||
<th v-for="item in rightTableTittle0" style="width:200px" :key="item.key">
|
||||
{{ item.label }}
|
||||
</th>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="item in rightTableTittle" :key="item.key" :width = rightPrintTittleWidth >
|
||||
{{ item.label }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th v-for="(index, key) in rightTableData[0]" :key="key">
|
||||
{{ key }}
|
||||
</th>
|
||||
</tr>
|
||||
<tr v-for="item in rightTableData" :key="item.id">
|
||||
<td v-for="(value, key) in item" :key="key">{{ value }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan = "1">异常处理</td>
|
||||
<td :colspan = rightPropertyNum>{{ headerParameters.bz }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
备注:{{ headerParameters.remark }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <el-table :data="tableData">
|
||||
<el-table-column
|
||||
v-for="(value, key) in tableData"
|
||||
:key="key"
|
||||
:prop="value"
|
||||
:label="value"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
--></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listFirstInspectionLeft,
|
||||
listFirstInspectionRight,
|
||||
getSelfMutualInspectionData,
|
||||
getLineCodeList,
|
||||
} from "@/api/mes/selfMutualInspection";
|
||||
|
||||
export default {
|
||||
name: "Item",
|
||||
dicts: ["device_item_type", "device_loop_type"],
|
||||
data() {
|
||||
return {
|
||||
printData: {
|
||||
printable: "printPage",
|
||||
ignore: ["no-print"],
|
||||
},
|
||||
lineCodeOption: [],
|
||||
leftPropertyNum: null,
|
||||
leftTableData: [],
|
||||
leftTableTittle0: [],
|
||||
leftTableTittle: [],
|
||||
rightPropertyNum: null,
|
||||
rightTableData: [],
|
||||
rightTableTittle: [],
|
||||
rightTableTittle0: [],
|
||||
leftTableTittleWidth: null,
|
||||
rightTableTittleWidth: null,
|
||||
leftPrintTittleWidth: null,
|
||||
rightPrintTittleWidth: null,
|
||||
showPrintPage: false,
|
||||
showTable: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {},
|
||||
//表头参数
|
||||
headerParameters: {
|
||||
productionWorkshop: null, //生产车间
|
||||
reportName: 'ConversionReportRight', //表类型
|
||||
lineCode: null, //生产产线编码
|
||||
checkPeople: null, //检查人
|
||||
productName: null, //产品名称
|
||||
checkDate: null, //检查日期
|
||||
bz: null, //异常处理
|
||||
remark: null, //备注
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getDate();
|
||||
this.getLineCode();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
//预处理
|
||||
handlePrintPre() {
|
||||
this.showTable = false;//页面上的表格不显示
|
||||
this.showPrintPage = true;//打印的表格显示
|
||||
this.$nextTick(() => {
|
||||
this.handlePrint()
|
||||
})
|
||||
},
|
||||
|
||||
//真正打印
|
||||
handlePrint() {
|
||||
printJS({
|
||||
printable: this.printData.printable, // 'printPage', // 标签元素id
|
||||
type: this.printData.type || "html",
|
||||
maxWidth: 1500, // 最大宽度
|
||||
font_size: "", // 设置字体大小
|
||||
header: this.printData.header, // '表单',
|
||||
targetStyles: ["*"],
|
||||
style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
|
||||
ignoreElements: this.printData.ignore || [], // ['no-print']
|
||||
properties: this.printData.properties || null,
|
||||
});
|
||||
this.showTable = true;//页面上的表格显示
|
||||
this.showPrintPage = false;//打印的表格不显示
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
if (this.headerParameters.lineCode == null) {
|
||||
this.$modal.msg("您没有选择生产产线，请选择！");
|
||||
} else if (this.headerParameters.checkDate == null) {
|
||||
this.$modal.msg("您没有选择检查时间，请选择！");
|
||||
} else {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
|
||||
getLineCode() {
|
||||
getLineCodeList().then((response) => {
|
||||
this.lineCodeOption = response;
|
||||
});
|
||||
},
|
||||
|
||||
/**获取默认查询时间段**/
|
||||
// getDate() {
|
||||
// let start = this.Fungetdate (0)
|
||||
// this.headerParameters.checkDate = start;
|
||||
// },
|
||||
// Fungetdate (num) {
|
||||
// var dd = new Date();
|
||||
// dd.setDate(dd.getDate() + num);
|
||||
// var y = dd.getFullYear();
|
||||
// var m = dd.getMonth() + 1;//获取当前月份的日期
|
||||
// var d = dd.getDate();
|
||||
// return y + "-" + m +"-"+d;
|
||||
// },
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
(this.headerParameters.productionWorkshop = null), //生产车间
|
||||
(this.headerParameters.lineCode = null), //生产产线
|
||||
(this.headerParameters.checkPeople = null), //检查人
|
||||
(this.headerParameters.productName = null), //产品名称
|
||||
(this.headerParameters.checkDate = null), //检查日期
|
||||
(this.headerParameters.bz = null), //异常处理
|
||||
(this.headerParameters.remark = null), //备注
|
||||
// this.getDate();
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 查询检查项维护列表 */
|
||||
getList() {
|
||||
this.showTable = true;//页面上的表格显示
|
||||
this.showPrintPage = false;//打印的表格不显示
|
||||
this.leftTableData = [];
|
||||
this.leftTableTittle = [];
|
||||
this.leftTableTittle0 = [];
|
||||
getSelfMutualInspectionData(this.headerParameters).then((response) => {
|
||||
this.headerParameters.checkPeople = response.createBy; //检查人
|
||||
this.headerParameters.productName = response.productName; //产品名称
|
||||
this.headerParameters.remark = response.remark; //备注
|
||||
this.headerParameters.bz = response.bz; //异常处理
|
||||
//this.headerParameters.checkDate = response.checkDate 检查日期
|
||||
//生产产线
|
||||
});
|
||||
|
||||
listFirstInspectionLeft(this.headerParameters).then((response) => {
|
||||
this.leftTableData = response;
|
||||
this.leftPropertyNum = Object.keys(this.leftTableData[0]).length - 1; //属性个数
|
||||
console.log('leftPropertyNum',this.leftPropertyNum);
|
||||
this.leftTableTittleWidth = (440 / (this.leftPropertyNum)) + 'px';
|
||||
this.leftPrintTittleWidth = (400 / (this.leftPropertyNum)) + 'px';
|
||||
|
||||
this.leftTableTittle0.push({
|
||||
label: "项目",
|
||||
key: 0,
|
||||
});
|
||||
|
||||
for (let i = 0; i < this.leftPropertyNum; i++) {
|
||||
this.leftTableTittle.push({
|
||||
label: "检查时间",
|
||||
key: i + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.rightTableData = [];
|
||||
this.rightTableTittle = [];
|
||||
this.rightTableTittle0 = [];
|
||||
|
||||
listFirstInspectionRight(this.headerParameters).then((response) => {
|
||||
this.rightTableData = response;
|
||||
this.rightPropertyNum = Object.keys(this.rightTableData[0]).length - 1; //属性个数
|
||||
this.rightTableTittleWidth = (440 / (this.rightPropertyNum)) + 'px';
|
||||
this.rightPrintTittleWidth = (400 / (this.leftPropertyNum)) + 'px';
|
||||
|
||||
this.rightTableTittle0.push({
|
||||
label: "项目",
|
||||
key: 0,
|
||||
});
|
||||
|
||||
for (let i = 0; i < this.rightPropertyNum; i++) {
|
||||
this.rightTableTittle.push({
|
||||
label: "检查时间",
|
||||
key: i + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tittle-text {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
color: black;
|
||||
}
|
||||
.lanju-logo {
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.bordered-table {
|
||||
border-collapse: collapse; /* 确保边框合并为单一边框 */
|
||||
width: 640px; /* 表格宽度 */
|
||||
}
|
||||
.bordered-table th,
|
||||
.bordered-table td {
|
||||
border: 1px solid #ddd; /* 边框样式 */
|
||||
padding: 8px; /* 单元格内边距 */
|
||||
text-align: center; /* 文本对齐 */
|
||||
}
|
||||
.bordered-table-bottom {
|
||||
border-collapse: collapse; /* 确保边框合并为单一边框 */
|
||||
width: 640px; /* 表格宽度 */
|
||||
}
|
||||
.bordered-table-bottom td {
|
||||
border: 1px solid #ddd; /* 边框样式 */
|
||||
text-align: left; /* 文本对齐 */
|
||||
width: 640px; /* 表格宽度 */
|
||||
height: 35px; /* 表格高度 */
|
||||
}
|
||||
|
||||
.bordered-table tr {
|
||||
word-break:break-all;
|
||||
word-wrap:break-word;
|
||||
font-size: 12px;
|
||||
border-collapse:collapse
|
||||
}
|
||||
|
||||
/* 下面是和打印有关系的 */
|
||||
.tittle-text-print {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
font-weight: 800;
|
||||
color: black;
|
||||
}
|
||||
.lanju-logo-print {
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.text-print {
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.bordered-table-print {
|
||||
border-collapse: collapse; /* 确保边框合并为单一边框 */
|
||||
width: 600px; /* 表格宽度 */
|
||||
}
|
||||
.bordered-table-print td {
|
||||
text-align: center; /* 文本对齐 */
|
||||
}
|
||||
|
||||
.bordered-table-bottom-print {
|
||||
border-collapse: collapse; /* 确保边框合并为单一边框 */
|
||||
width: 600px; /* 表格宽度 */
|
||||
}
|
||||
.bordered-table-bottom-print td{
|
||||
text-align: left; /* 文本对齐 */
|
||||
height: 35px; /* 表格宽度 */
|
||||
width: 600px; /* 表格高度 */
|
||||
}
|
||||
|
||||
.bordered-table-print tr {
|
||||
word-break:break-all;
|
||||
word-wrap:break-word;
|
||||
font-size: 12px;
|
||||
height: 35px; /* 表格高度 */
|
||||
border-collapse:collapse
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue