2024-08-29 MES-首检报表

yangwl
A0010407 2 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…
Cancel
Save