2024-08-29 MES-自检互检报表
A0010407
3 months ago
parent
a7b6736ee9
commit
ec8dae6ae9
@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询自检互检列表
|
||||
export function listSelfMutualInspection(query) {
|
||||
return request({
|
||||
url: '/mes/inspectionReport/selfMutualInspectionList',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 查询自检互检上方和下方数据
|
||||
export function getSelfMutualInspectionData(query) {
|
||||
return request({
|
||||
url: '/mes/inspectionReport/selfMutualInspectionData',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询组线列表
|
||||
export function getLineCodeList(query) {
|
||||
return request({
|
||||
url: '/mes/inspectionReport/getLineCodeList',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
}
|
||||
|
||||
// 查询首检左侧
|
||||
export function listFirstInspectionLeft(query) {
|
||||
return request({
|
||||
url: '/mes/inspectionReport/listFirstInspectionLeft',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询首检右侧
|
||||
export function listFirstInspectionRight(query) {
|
||||
return request({
|
||||
url: '/mes/inspectionReport/listFirstInspectionRight',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,517 @@
|
||||
<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="10">
|
||||
<div>生产车间:黑蚊香车间</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<div>产品名称: {{ headerParameters.productName }}</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div>检查人: {{ headerParameters.checkPeople }}</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<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="9">
|
||||
<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="5">
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<table class="bordered-table">
|
||||
<tr>
|
||||
<th v-for="item in tableTittle0" style="width:300px" :key="item.key">
|
||||
{{ item.label }}
|
||||
</th>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="item in tableTittle" :key="item.key" :width = tableTittleWidth >
|
||||
{{ item.label }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="(index, key) in tableData[0]" :key="key">{{ key }}</th>
|
||||
</tr>
|
||||
|
||||
<tr v-for="item in tableData" :key="item.id">
|
||||
<!-- 动态渲染列值 -->
|
||||
<td columnspan="1" v-for="(value, key) in item" :key="key">
|
||||
{{ value }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan = "1">异常处理</td>
|
||||
<td :colspan = propertyNum>{{ headerParameters.bz }}</td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td colspan = "1">备注</td>
|
||||
<td :colspan = propertyNum>{{ headerParameters.remark }}</td>
|
||||
</tr> -->
|
||||
</table>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
备注:{{ headerParameters.remark }}
|
||||
</div>
|
||||
</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="9">
|
||||
<div class="text-print">
|
||||
生产产线: {{ headerParameters.lineCode }}
|
||||
</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="text-print">
|
||||
检查人: {{ headerParameters.checkPeople }}
|
||||
</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<div class="text-print">
|
||||
产品名称: {{ headerParameters.productName }}
|
||||
</div>
|
||||
<br />
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="text-print">
|
||||
检查日期: {{ headerParameters.checkDate }}
|
||||
</div>
|
||||
<br />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<row>
|
||||
<el-col :span="24">
|
||||
<table class="bordered-table-print" border="1">
|
||||
<tr>
|
||||
<th v-for="item in tableTittle0" style="width:300px" :key="item.key">
|
||||
{{ item.label }}
|
||||
</th>
|
||||
<!-- 动态渲染列名 -->
|
||||
<th v-for="item in tableTittle" :key="item.key" :width = tableTittleWidth >
|
||||
{{ item.label }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th v-for="(index, key) in tableData[0]" :key="key">
|
||||
{{ key }}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr v-for="item in tableData" :key="item.id">
|
||||
<td v-for="(value, key) in item" :key="key">{{ value }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan = "1">异常处理</td>
|
||||
<td :colspan = propertyNum>{{ headerParameters.bz }}</td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td colspan = "1">备注</td>
|
||||
<td :colspan = propertyNum>{{ headerParameters.remark }}</td>
|
||||
</tr> -->
|
||||
</table>
|
||||
</el-col>
|
||||
</row>
|
||||
<div class="bottom-remark">
|
||||
备注:{{ headerParameters.remark }}
|
||||
</div>
|
||||
</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 {
|
||||
listSelfMutualInspection,
|
||||
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"],
|
||||
},
|
||||
showPrintPage: false,
|
||||
showTable: false,
|
||||
lineCodeOption: [],
|
||||
propertyNum: null,
|
||||
tableTittle0: [],
|
||||
tableTittle: [],
|
||||
tableTittleWidth: null,
|
||||
tableData: [],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {},
|
||||
//表头参数
|
||||
headerParameters: {
|
||||
reportName: "ConversionReport", //表类型
|
||||
productionWorkshop: null, //生产车间
|
||||
lineCode: null, //生产产线编码
|
||||
checkPeople: null, //检查人
|
||||
productName: null, //产品名称
|
||||
checkDate: null, //检查日期
|
||||
bz: null, //异常处理
|
||||
remark: null, //备注
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getDate();
|
||||
this.getLineCode();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
dynamicWidthStyle(){
|
||||
return { width: `${1000 / this.propertyNum }px`}
|
||||
},
|
||||
|
||||
//预处理
|
||||
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.tableData = [];
|
||||
this.tableTittle = [];
|
||||
this.tableTittle0 = [];
|
||||
this.propertyNum = null;
|
||||
this.loading = true;
|
||||
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 检查日期
|
||||
//生产产线
|
||||
});
|
||||
listSelfMutualInspection(this.headerParameters).then((response) => {
|
||||
this.tableData = response;
|
||||
console.log("this.tableData", this.tableData);
|
||||
this.propertyNum = Object.keys(this.tableData[0]).length - 1; //属性个数
|
||||
this.tableTittle0.push({
|
||||
label: "项目",
|
||||
key: 0,
|
||||
});
|
||||
for (let i = 0; i < this.propertyNum; i++) {
|
||||
this.tableTittle.push({
|
||||
label: "检查时间",
|
||||
key: i + 1,
|
||||
});
|
||||
}
|
||||
|
||||
this.tableTittleWidth = (1000 / (this.propertyNum)) + 'px';
|
||||
console.log(this.tableTittleWidth);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tittle-text {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
font-weight: 800;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.lanju-logo {
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.bordered-table {
|
||||
border-collapse: collapse; /* 确保边框合并为单一边框 */
|
||||
width: 1300px; /* 表格宽度 */
|
||||
}
|
||||
|
||||
.bordered-table th,
|
||||
|
||||
.bordered-table td {
|
||||
border: 1px solid #ddd; /* 边框样式 */
|
||||
padding: 8px; /* 单元格内边距 */
|
||||
text-align: center; /* 文本对齐 */
|
||||
}
|
||||
|
||||
.bordered-table tr {
|
||||
word-break:break-all;
|
||||
word-wrap:break-word;
|
||||
border-collapse:collapse
|
||||
}
|
||||
|
||||
.bordered-table-bottom {
|
||||
border-collapse: collapse; /* 确保边框合并为单一边框 */
|
||||
width: 1300px; /* 表格宽度 */
|
||||
}
|
||||
|
||||
.bordered-table-bottom td {
|
||||
border: 1px solid #ddd; /* 边框样式 */
|
||||
text-align: left; /* 文本对齐 */
|
||||
width: 1300px; /* 表格宽度 */
|
||||
}
|
||||
|
||||
.bordered-table-tittle0 {
|
||||
width: 300px; /* 表格高度 */
|
||||
}
|
||||
|
||||
/* 下面是和打印有关系的 */
|
||||
.tittle-text-print {
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
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: 1300px; /* 表格宽度 */
|
||||
}
|
||||
|
||||
.bordered-table-print td {
|
||||
text-align: center; /* 文本对齐 */
|
||||
height: 30px; /* 表格高度 */
|
||||
}
|
||||
|
||||
.bordered-table-bottom-print {
|
||||
border-collapse: collapse; /* 确保边框合并为单一边框 */
|
||||
width: 1300px; /* 表格宽度 */
|
||||
}
|
||||
|
||||
.bordered-table-bottom-print td {
|
||||
text-align: left; /* 文本对齐 */
|
||||
height: 35px; /* 表格宽度 */
|
||||
width: 1300px; /* 表格高度 */
|
||||
}
|
||||
|
||||
.bottom-remark {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.bordered-table-print tr {
|
||||
word-break:break-all;
|
||||
word-wrap:break-word;
|
||||
border-collapse:collapse
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue