Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024-08-30 MES-自检报表优化+点检

Browse Source
yangwl
A0010407 3 weeks ago
parent e8ad5d296a
commit e23ab5b15f
3 changed files with 603 additions and 1 deletions
Show Stats Download Patch File Download Diff File

18
src/api/mes/selfMutualInspection.js
Unescape Escape View File

@ -45,3 +45,21 @@ export function listFirstInspectionRight(query) {
params: query params: query
}) })
} }
// 查询点检
export function listPointInspection(query) {
return request({
url: '/mes/inspectionReport/listPointInspection',
method: 'get',
params: query
})
}
// 查询点检listCheckBox
export function listCheckBox(query) {
return request({
url: '/mes/inspectionReport/listCheckBox',
method: 'get',
params: query
})
}

584
src/views/mes/pointInspection/index.vue
Unescape Escape View File

@ -0,0 +1,584 @@
<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>
<div class="formCode">表单编号:08GL05C001-014A</div>
<br />
<el-row>
<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="10">
<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 rowspan="2" style="width: 50px">车间</th>
<th rowspan="2" style="width: 80px">黑蚊香</th>
<th style="width: 220px">产线：{{ headerParameters.lineCode }}</th>
<th
th
v-for="item in checkBoxData[0]"
:key="item.key"
:width="tableTittleWidth"
>
<row>
<label>
<input
type="checkbox"
class="check-box"
v-model="item.openLine"
size="4"
/>开线
</label>
<label>
<input
type="checkbox"
class="check-box"
v-model="item.clearLine"
size="4"
/>清换线
</label>
</row>
</th>
</tr>
<tr>
<th>日期：{{ headerParameters.checkDate }}</th>
<td
columnspan="1"
v-for="(value, key) in checkBoxData[1]"
:key="key"
>
{{ value }}
</td>
</tr>
<tr>
<!-- 动态渲染列名 -->
<th
v-for="item in tableTittle"
:key="item.key"
:width="tableTittleWidth"
>
{{ item.label }}
</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>
</table>
</div>
<br />
<div>
<el-row>填写要求：</el-row>
<el-row>1.产线组长在开线、品种转换时填写该表。</el-row>
<el-row>
<el-col :span="18">2.在"口"中选择类别。 </el-col
><el-col :span="6"
>班组长签字：{{ headerParameters.createBy }}</el-col
>
</el-row>
<el-row>3."点检结果",是填"√",否填"×",若有异常则填写实际情况。</el-row>
</div>
</div>
<div id="printPage" v-show="showPrintPage">
<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 :span="5"> </el-col>
<el-col class="tittle-text-print">
<span>产品转换/完产清线点检表</span>
</el-col>
<el-col :span="5"> </el-col>
</el-row>
<br />
<el-row>
<div class="formCode">表单编号:08GL05C001-014A</div>
<br />
</el-row>
<row>
<el-col :span="24">
<table class="bordered-table-print" border="1">
<tr>
<th rowspan="2" style="width: 50px">车间</th>
<th rowspan="2" style="width: 80px">黑蚊香</th>
<th style="width: 220px">
产线：{{ headerParameters.lineCode }}
</th>
<th
th
v-for="item in checkBoxData[0]"
:key="item.key"
:width="tableTittleWidth"
>
<row>
<label>
<input
type="checkbox"
class="check-box"
v-model="item.openLine"
size="4"
/>开线
</label>
<label>
<input
type="checkbox"
class="check-box"
v-model="item.clearLine"
size="4"
/>清换线
</label>
</row>
</th>
</tr>
<tr>
<th>日期：{{ headerParameters.checkDate }}</th>
<td
columnspan="1"
v-for="(value, key) in checkBoxData[1]"
:key="key"
>
{{ value }}
</td>
</tr>
<tr>
<!-- 动态渲染列名 -->
<th
v-for="item in tableTittle"
:key="item.key"
:width="tableTittleWidth"
>
{{ item.label }}
</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>
</table>
</el-col>
</row>
<br />
<el-row>填写要求：</el-row>
<el-row>1.产线组长在开线、品种转换时填写该表。</el-row>
<el-row>
<el-col :span="18">2.在"口"中选择类别。 </el-col
><el-col :span="6">班组长签字：{{ headerParameters.createBy }}</el-col>
</el-row>
<el-row>3."点检结果",是填"√",否填"×",若有异常则填写实际情况。</el-row>
</div>
</div>
</template>
<script>
import {
listPointInspection,
getSelfMutualInspectionData,
getLineCodeList,
listCheckBox,
} 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,
tableTittle: [],
tableTittleWidth: null,
tableData: [],
checkBoxData: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {},
//表头参数
headerParameters: {
reportName: "ConversionReport", //表类型
productionWorkshop: null, //生产车间
lineCode: null, //生产产线编码
createBy: 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.createBy = null), //检查人
(this.headerParameters.productName = null), //产品名称
(this.headerParameters.checkDate = null), //检查日期
(this.headerParameters.bz = null), //异常处理
(this.headerParameters.remark = null), //备注
// this.getDate();
this.getList();
},
// objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// if (columnIndex === 1) {
// // 获取当前单元格的值
// const currentValue = row[column.property];
// // 获取上一行相同列的值
// const preRow = this.tableData[rowIndex - 1];
// const preValue = preRow ? preRow[column.property] : null;
// // 如果当前值和上一行的值相同，则将当前单元格隐藏
// if (currentValue === preValue) {
// return { rowspan: 0, colspan: 0 };
// } else {
// // 否则计算当前单元格应该跨越多少行
// let rowspan = 1;
// for (let i = rowIndex + 1; i < this.detailList.length; i++) {
// const nextRow = this.tableData[i];
// const nextValue = nextRow[column.property];
// if (nextValue === currentValue) {
// rowspan++;
// } else {
// break;
// }
// }
// return { rowspan, colspan: 1 };
// }
// }
// },
/** 查询检查项维护列表 */
getList() {
this.showTable = true; //页面上的表格显示
this.showPrintPage = false; //打印的表格不显示
this.tableData = [];
this.tableTittle = [];
this.propertyNum = null;
this.loading = true;
//查询上方
listCheckBox(this.headerParameters).then((response) => {
this.checkBoxData = response;
});
getSelfMutualInspectionData(this.headerParameters).then((response) => {
this.headerParameters.createBy = response.createBy; //检查人
this.headerParameters.productName = response.productName; //产品名称
this.headerParameters.remark = response.remark; //备注
this.headerParameters.bz = response.bz; //异常处理
//this.headerParameters.checkDate = response.checkDate 检查日期
//生产产线
});
listPointInspection(this.headerParameters).then((response) => {
this.tableData = response;
console.log("this.tableData", this.tableData);
this.propertyNum = Object.keys(this.tableData[0]).length - 3; //属性个数
this.tableTittle.push({
label: "序号",
key: 0,
});
this.tableTittle.push({
label: "点检项目",
key: 1,
});
this.tableTittle.push({
label: "点检内容",
key: 2,
});
for (let i = 0; i < this.propertyNum; i++) {
this.tableTittle.push({
label: "点检结果",
key: i + 3,
});
}
this.tableTittleWidth = 950 / this.propertyNum + "px";
});
},
},
};
</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; /* 边框样式 */
text-align: center; /* 文本对齐 */
}
.bordered-table tr {
word-break: break-all;
word-wrap: break-word;
border-collapse: collapse;
height: 35px; /* 表格高度 */
}
.bordered-table-bottom {
border-collapse: collapse; /* 确保边框合并为单一边框 */
width: 1300px; /* 表格宽度 */
}
.bordered-table-bottom td {
border: 1px solid #ddd; /* 边框样式 */
text-align: left; /* 文本对齐 */
width: 1300px; /* 表格宽度 */
}
/* 下面是和打印有关系的 */
.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;
}
.formCode {
margin-left: 1000px;
font-size: 20px;
}
.check-box {
font-size: 3px;
}
</style>

2
src/views/mes/selfMutualInspection/index.vue
Unescape Escape View File

@ -418,7 +418,7 @@ export default {
<style scoped> <style scoped>
.tittle-text { .tittle-text {
text-align: center; text-align: center;
font-size: 25px; font-size: 30px;
font-weight: 800; font-weight: 800;
color: black; color: black;
} }

Write Preview
Loading…
Cancel
Save