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.

682 lines
21 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="80px">
<el-form-item label="任务编号" prop="checkNo">
<el-input
v-model="queryParams.checkNo"
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="materialName">
<el-input
v-model="queryParams.materialName"
placeholder="请输入物料名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="检验结果" prop="checkResult">
<el-select
v-model="queryParams.checkResult"
placeholder="检验结果"
clearable
>
<el-option
v-for="dict in dict.type.check_result"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="检测地点" prop="checkLoc">
<el-input
v-model="queryParams.checkLoc"
placeholder="请输入检测地点"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="检验时间" prop="checkTimeArray">
<el-date-picker
v-model="queryParams.checkTimeArray"
format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</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="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['quality:productReport:export']"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-document-checked"
size="mini"
@click="handleCPReportExport"
v-hasPermi="['quality:productReport:export']"
>报告Excel下载</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="incomeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="recordId" align="center" prop="recordId" v-if="false"/>
<el-table-column label="检验任务编号" align="center" prop="checkNo" width="120" fixed />
<el-table-column label="工单号" align="center" prop="orderNo" width="150" fixed/>
<el-table-column label="订单号" align="center" prop="workorderCodeSap" width="100" fixed :formatter="orderCodeFormate"/>
<el-table-column label="物料名称" align="center" prop="materialName" width="150"/>
<el-table-column label="收货数量" align="center" prop="quality" />
<el-table-column label="单位" align="center" prop="unit" />
<el-table-column label="线体名称" align="center" prop="supplierName" width="100"/>
<el-table-column label="检测地点" align="center" prop="checkLoc"/>
<el-table-column label="检验时间" align="center" prop="checkTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="检验结果" align="center" prop="checkResult">
<template slot-scope="scope">
<dict-tag :options="dict.type.check_result" :value="scope.row.checkResult"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleLook(scope.row)"
>查看</el-button>
</template>
</el-table-column>
</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="1000px" append-to-body>
<el-row>
<el-col :span="20">
<el-button
class="print-btn"
size="mini"
type="primary"
icon="el-icon-edit"
@click="handlePrint(form)"
>打印</el-button>
</el-col>
</el-row>
<!-- 打印整个printFrom区域 -->
<div id="printFrom">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="7">
<img src="@/assets/logo/lanjv.png" class="report-logo"/>
</el-col>
<el-col :span="10" class="center-text">
<h1>中山榄菊日化实业有限公司</h1>
</el-col>
</el-row>
<el-row>
<el-col class="center-text">
<h2>成品检验报告</h2>
</el-col>
<el-col :offset="18" :span="5" class="center-text">
<span style="font-size: 14px;padding: 6px;">编码:{{form.fileNo}}</span>
</el-col>
</el-row>
<el-descriptions title="" border :column="3" :contentStyle="content_style" :label-style="label_style">
<el-descriptions-item label="产品名称" class="my-description-item1">{{form.materialName}}</el-descriptions-item>
<el-descriptions-item label="生产数量(单位/箱)" class="my-description-item2">{{form.quality}}</el-descriptions-item>
<el-descriptions-item label="检验编码" class="my-description-item3">{{form.checkNo}}</el-descriptions-item>
<el-descriptions-item label="产品编码" class="my-description-item1">{{form.materialCode}}</el-descriptions-item>
<el-descriptions-item label="抽样地点" class="my-description-item2">{{form.checkLoc}}</el-descriptions-item>
<el-descriptions-item label="报检日期" class="my-description-item3">{{form.createTime}}</el-descriptions-item>
<el-descriptions-item label="生产批号" class="my-description-item1">{{form.incomeBatchNo}}</el-descriptions-item>
<el-descriptions-item label="检验依据" class="my-description-item2">09JS08S-048B</el-descriptions-item><!--{{form.standardNo}}-->
<el-descriptions-item label="检验日期" class="my-description-item3">{{form.checkTime}}</el-descriptions-item>
</el-descriptions>
<el-row class="border-row">
<el-col :span="24">
包装检验项目
</el-col>
<el-col :span="24">
<!-- 检验项目明细 -->
<el-table v-loading="loading" :data="checkProjectList" border :span-method="objectSpanMethod" >
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="检验项目" align="center" prop="projectRuleName" width="100"/>
<el-table-column label="标准要求" align="center" prop="checkStandard"/>
<el-table-column label="抽检数(PC)" align="center" prop="samplePlan" width="60"/>
<!--<el-table-column label="单位" align="center" prop="unitCode" width="50"/>-->
<el-table-column label="实测结果及判定" align="center">
<el-table-column label="实测结果" align="center" prop="actualValue" width="120"/>
<el-table-column label="判定" align="center" prop="status" width="110"/>
</el-table-column>
<!--
<el-table-column label="不良类型" align="center" prop="defectCode" width="80">
<template slot-scope="scope">
<span v-if="scope.row.defectCode">{{ getCodeValue(scope.row.defectCode) }}</span>
</template>
</el-table-column>
<el-table-column label="不良数量" align="center" prop="defectQuality" width="50"/>
<el-table-column label="附件" align="center" prop="files" width="120">
<template slot-scope="scope">
<el-image v-for="(item,index) in scope.row.files" :key="index"
:src="item.fileAddress"
style="width: 100px; height: 100px"
:fit="fit" />
</template>
</el-table-column>
-->
</el-table>
</el-col>
</el-row>
<el-row class="border-row">
<el-col :span="24">
内容物分析项目
</el-col>
<el-col :span="24">
<!-- 检验项目明细 -->
<el-table v-loading="loading" :data="checkProjectList0" border>
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="检验项目" align="center" prop="projectRuleName" width="100"/>
<el-table-column label="标准要求" align="center" prop="checkStandard"/>
<el-table-column label="抽检数(PC)" align="center" prop="samplePlan" width="60"/>
<el-table-column label="实测结果及判定" align="center">
<el-table-column label="实测结果" align="center" prop="actualValue" width="120"/>
<el-table-column label="判定" align="center" prop="status" width="110"/>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-descriptions title="" border :column="1">
<el-descriptions-item label="综合检验结论">
<el-col :span="6">
<span v-if="this.checkResult=='Y'">√合格</span>
<span label="N" v-else>×不合格</span>
</el-col>
<el-col :span="8">
备注:判定合格打“√”,不合格打“×”
</el-col>
</el-descriptions-item>
</el-descriptions>
<!--
<el-row>
<el-col :span="20">
<el-form-item label="备注:" label-width="100px">
<el-input type="textarea" disabled/>
</el-form-item>
</el-col>
</el-row>-->
<el-row>
<el-col :span="10">
<el-form-item label="品检主管:" label-width="100px">
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="检验员:" >
{{form.checkManName}}
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listProduct, getProduct, delProduct, addProduct, updateProduct,getWorkOrders} from "@/api/quality/productReport";
import { getCkeckProjectList} from "@/api/quality/incomeReport";
import { getCheckTypes } from "@/api/quality/qcProduce";
import { getDefectTypeListByDefectType } from "@/api/quality/defectType.js";
import moment from 'moment';
export default {
name: "ProductReport",
dicts: ["unit","check_status","check_result"],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
//打印
formRef: 'form',
validateRules: [],
checkResult: 'Y',
printData: {
printable: 'printFrom',
ignore: ['no-print'],
workCenter: "暂无数据",
SAPNo: null,
manufacture: null,
auditor: null,
printDate: null,
factory: null,
productDate: null,
workTable: [],
},
printDialogVisible: false,
// 来料检验表格数据
incomeList: [],
// 检验项目列表
checkProjectList: [],
checkProjectList0:[],
defectList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
checkTimeArray: [],
pageNum: 1,
pageSize: 10,
checkNo: null,
incomeBatchNo: null,
orderNo: null,
materialCode: null,
materialName: null,
quality: null,
unit: null,
supplierCode: null,
supplierName: null,
incomeTime: null,
checkLoc: null,
checkStatus: null,
checkManCode: null,
checkManName: null,
checkTime: null,
checkResult: null,
status: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
factoryCode: null,
},
// 表单参数
form: {checkedValues:[]},
checkTypes:[],
// 表单校验
rules: {
/* incomeBatchNo: [
{ required: true, message: "来料批次号不能为空", trigger: "blur" }
], */
},
content_style: {
'text-align': 'center',
'min-width': '200px',
'word-break': 'break-all'
},
label_style: {
'color': '#000',
'text-align': 'center',
'font-weight': '600',
'height': '40px',
'background-color': '#d6dbe1',
'min-width': '100px',
'word-break': 'keep-all'
},
spanArr: [],
position: 0
};
},
created() {
this.getDate();
this.getList();
this.getCheckTypes();
this.getDefectType();
},
methods: {
//订单编码格式化
orderCodeFormate(row, column, cellValue){
if(cellValue !=null){
return cellValue.slice(3,18); //返回值
}
},
/****/
getCheckTypes() {
getCheckTypes('material').then(response => {
this.checkTypes = response;
});
},
/**获取默认查询时间段**/
getDate() {
let start = this.Fungetdate (0)
let end = this.Fungetdate (1)
//this.queryParams.incomeTimeArray.push(start,end)
this.queryParams.checkTimeArray.push(start,end)
},
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+" 00:00:00";
},
/** 查询来料检验列表 */
getList() {
this.loading = true;
if(this.queryParams.checkTimeArray != null &&this.queryParams.checkTimeArray.length>0){
this.queryParams.checkTimeStart = moment(this.queryParams.checkTimeArray[0]).format('YYYY-MM-DD HH:mm:ss');
this.queryParams.checkTimeEnd = moment(this.queryParams.checkTimeArray[1]).format('YYYY-MM-DD HH:mm:ss');
}else{
this.queryParams.checkTimeStart = null;
this.queryParams.checkTimeEnd = null;
}
listProduct(this.queryParams).then(response => {
this.incomeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
recordId: null,
checkNo: null,
incomeBatchNo: null,
orderNo: null,
materialCode: null,
materialName: null,
quality: null,
unit: null,
supplierCode: null,
supplierName: null,
incomeTime: null,
checkLoc: null,
checkStatus: null,
checkManCode: null,
checkManName: null,
checkTime: null,
checkResult: null,
status: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
factoryCode: null,
delFlag: null,
};
this.spanArr = [];
this.position = 0;
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.recordId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加来料检验";
},
/** 查看按钮操作 */
handleLook(row) {
this.reset();
const recordId = row.recordId || this.ids
this.queryParams.recordId = recordId;
getProduct(recordId).then(response => {
this.form = response.data;
//let checkedValues0 =[];
this.checkResult = response.data.checkResult;
//this.form.checkedValues = checkedValues0;
this.form.printable = 'printFrom'; //打印时需要
this.form.ignore = ['no-print'];//打印时需要
this.open = true;
this.title = "查看成品入库报告";
});
this.getCheckedProjectList();
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.recordId != null) {
updateProduct(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addProduct(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const recordIds = row.recordId || this.ids;
this.$modal.confirm('是否确认删除来料检验编号为"' + recordIds + '"的数据项?').then(function() {
return delProduct(recordIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('quality/qcProductReport/export', {
...this.queryParams
}, `ProductReport_${new Date().getTime()}.xlsx`)
},
/** 导出报告按钮操作 */
handleCPReportExport() {
const recordId =this.ids[0];
this.queryParams.recordId = recordId;
this.download('quality/qcProductReport/CPReportExport', {
...this.queryParams
}, `CPReportExport_${new Date().getTime()}.xlsx`)
},
/**获取检验项目列表 */
getCheckedProjectList(){
this.loading = true;
getCkeckProjectList(this.queryParams).then((response) => {
const itemType1s=[];
const itemType0s=[];
response.rows.forEach(item=>{
if (item.itemType == '1') {
itemType1s.push(item);
}else if(item.itemType == '0'){
itemType0s.push(item);
}
if(item.status == 'Y'){
item.status = '合格';
}else if(item.status == 'N'){
item.status = '不合格';
}else if(item.status == '未检验'){
item.status = '未检验';
}else{
item.status = '/';
}
})
this.checkProjectList = itemType1s;
this.checkProjectList0 = itemType0s;
this.total = response.total;
this.loading = false;
//this.form.standardNo = this.checkProjectList[0].standardNo;
this.rowspan()
});
},
// 打印预览-浏览器打印
handlePrint(params) {
console.log(this.form);
printJS({
printable: params.printable, // 'printFrom', // 标签元素id
type: params.type || 'html',
maxWidth: 1500, // 最大宽度
font_size: "",// 设置字体大小
//header: "成品入库检验结果报告",//params.header, // '表单',
targetStyles: ['*'],
style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
ignoreElements: params.ignore || [], // ['no-print']
properties: params.properties || null
})
},
getDefectType() {
const defectType = "product";
getDefectTypeListByDefectType(defectType).then(response => {
this.defectList = response.rows;
});
},
getCodeValue(defectCode) {
const foundDefect = this.defectList.find(defect => defect.defectCode === defectCode);
return foundDefect.defectSubclass;
},
/**
* 1. 若是objectSpanMethod不返回任何东西表格不会变化
* 2. 最外层的判断一般是,先从第几列开始合并
* 3. 这次从第0行合并2个下次就要从第3行开始合并0行加俩就到3行了
* 4. 这种方式是有多少条数据合并多少条数据比如本案例中有7条数据从第0条合并到第7条
* 5. return { rowspan: 0, colspan: 0 } // 表示不合并
* */
rowspan() {
this.checkProjectList.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
this.position = 0;
} else {
if (
this.checkProjectList[index].projectRuleName ===
this.checkProjectList[index - 1].projectRuleName
) {
this.spanArr[this.position] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.position = index;
}
}
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
}
};
</script>
<style scoped>
.print-btn{
margin-bottom: 15px;
margin-left: 10px;
}
.center-text {
text-align: center;
}
.report-logo {
margin-top: 15px;
margin-left: 15px;
height: 38px;
}
.my-description-item1 {
width: 280px; /* 或者你想要的任何宽度 */
}
.my-description-item2 {
width: 120px; /* 或者你想要的任何宽度 */
}
.my-description-item3 {
width: 80px; /* 或者你想要的任何宽度 */
}
.border-row {
border: 1px solid #d3dce6; /* 边框颜色可以根据需要自定义 */
text-align:center;
}
</style>