LanJu_UI/src/views/quality/productReport/index.vue

<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>