lanju-front/src/views/quality/inventoryReport/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="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="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['quality:inventoryReport:add']"
				>新增</el-button>
			</el-col> -->
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['quality:inventoryReport:export']"
				>导出</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
				type="success"
				plain
				icon="el-icon-printer"
				size="mini"
				@click="showPrintX"
				v-hasPermi="['quality:inventoryReport:export']"
				>巡检记录</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"/>
			<el-table-column label="订单号" align="center" prop="orderNo" width="150"/>
			<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="240"/>
			<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="80px">
					<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 :offset="8" :span="8" class="center-text">
							<h2>库存检验报告</h2>
						</el-col>
						<el-col :offset="1" :span="5" class="center-text">
							<span style="font-size: 14px;padding: 6px;line-height: 50px;">编码：{{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.factoryCode}}</el-descriptions-item>
						<el-descriptions-item label="生产批号" class="my-description-item2">{{form.incomeBatchNo}}</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.materialName}}</el-descriptions-item>
						<el-descriptions-item label="物料编码" class="my-description-item2">{{form.materialCode}}</el-descriptions-item>
						<el-descriptions-item label="供应单位" class="my-description-item3">{{form.supplierName}}</el-descriptions-item>

						<el-descriptions-item label="供应编码" class="my-description-item1">{{form.supplierCode}}</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.unit}}</el-descriptions-item>

						<el-descriptions-item label="检验依据" class="my-description-item1">{{form.standardNo}}</el-descriptions-item>
						<el-descriptions-item label="报检日期" class="my-description-item2">{{ parseTime(form.createTime, '{y}-{m}-{d}') }}</el-descriptions-item>
						<el-descriptions-item label="检验日期" class="my-description-item3">{{ parseTime(form.checkTime, '{y}-{m}-{d}') }}</el-descriptions-item>
					</el-descriptions>
					<el-row>
						<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="ruleName" />
								<el-table-column label="标准要求" align="center" prop="checkStandard" width="350"/>
								<!--<el-table-column label="抽检数" align="center" prop="sampleNum" width="60"/>
								<el-table-column label="单位" align="center" prop="unitCode" width="50"/>-->
								<el-table-column label="实测结果" align="center" prop="actualValue" width="120"/>
								<el-table-column label="判定" align="center" prop="status" width="70">
								    <template slot-scope="scope">
										<dict-tag :options="dict.type.check_result" :value="scope.row.status"/>
									</template>
								</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="80"/>-->
								<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>
						<el-col>
							<el-form-item label="综合检验结论" label-width="100px">
								 <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-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="品管经理/主任：" label-width="120px">
								<el-input disabled/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="品质主管：" label-width="100px">
								<el-input disabled/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="品管员：" prop="checkManName">
								<el-input v-model="form.checkManName" disabled/>
							</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>

        <!-- 打印预览弹出层 -->
    <el-dialog
      title="仓库质量巡查记录"
      :visible.sync="printDialogVisible"
      width="871px"
    >
      <div id="printFrom" class="my-print-box">

        <el-form :model="form">
          <!-- 主数据 -->
		  <div v-for="(item,index) in printData.workTable" :key="index">
		  		<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 :offset="8" :span="8" class="center-text">
						<h2>仓库质量巡查记录</h2>
					</el-col>
				</el-row>
				<!-- 导航栏 -->
				<el-row class="my-print-nav">
					<el-col :span="6">巡检日期:{{printData.incomeTime}}</el-col>
					<el-col :span="6">条数:{{printData.pageNo}}</el-col>
					<el-col :span="6">编码:{{printData.fileNo}}</el-col>
				</el-row>
			<el-table v-if="refreshNewWorkerTable" v-loading="newWorkerLoading" class="my-print-table" 
			    :data="item" border style="width: 100%;padding-bottom: 1px;">
				<el-table-column label="序号" prop="xh" width="55"></el-table-column>
				<el-table-column prop="materialName" label="产品/物料名称" width="120"></el-table-column>
				<el-table-column prop="modelType" width="80" label="型号规格"></el-table-column>
				<!--<el-table-column prop="workorderCode" width="105" label="生产订单" :formatter="orderCodeFormate"></el-table-column>-->
				<el-table-column prop="incomeBatchNo" width="225" label="生产批号(日期)"></el-table-column>
				<el-table-column prop="checkResult" label="质量状况(包括堆放是否合理)"  width="190"></el-table-column>
				<el-table-column prop="routeCode" width="140" label="处理方式"></el-table-column>  
          </el-table>
		  <!-- 底部 -->
          <el-row class="my-print-foot">
            <el-col :offset="1" :span="6">审核:</el-col>
            <el-col :offset="1" :span="6">品管员:{{printData.checkManName}}</el-col>
          </el-row>
		  <div class="fy" v-if="index!=printData.workTable.length-1"></div>
		  </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
      </span>
    </el-dialog>
	    
	</div>
</template>

<script>
import { listInventory, getInventory, delInventory, addInventory, updateInventory,getCkeckProjectList,printXJRecordList} from "@/api/quality/inventoryReport";
import { getCheckTypes } from "@/api/quality/qcProduce";
import { getDefectTypeListByDefectType } from "@/api/quality/defectType.js";
import moment from 'moment';
export default {
	name: "InventoryReport",
	dicts: ["unit","check_status","check_result"],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			//打印
			formRef: 'form',
			validateRules: [],
			printData: {
				printable: 'printFrom',
				ignore: ['no-print'],
				workCenter: "暂无数据",
				SAPNo: null,
				manufacture: null,
				auditor: null,
				printDate: null,
				factory: null,
				productDate: null,
				workTable: [],
			},
			printDialogVisible: false,
			// 库存检验表格数据
			incomeList: [],
			// 检验项目列表
			checkProjectList: [],
			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: {},
			checkTypes:[],
			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,
			// 表单校验
			rules: {
				/* incomeBatchNo: [
					{ required: true, message: "库存批次号不能为空", trigger: "blur" }
				], */
			},
					fenyeNumber:5,
			fenyeNumberTwo:5,
			shengchan:true,
			newWorkerLoading: false,
			refreshNewWorkerTable:true
		};
	},
	created() {
		this.getDate();
		this.getList();
		this.getCheckTypes();
		this.getDefectType();
	},
	methods: {
		/****/
		getCheckTypes() {
           	getCheckTypes('inventory').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.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');
			}

			listInventory(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;
			getInventory(recordId).then(response => {
				this.form = response.data;
				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) {
						updateInventory(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addInventory(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 delInventory(recordIds);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('quality/qcInventoryReport/export', {
				...this.queryParams
			}, `inventoryReport_${new Date().getTime()}.xlsx`)
		},
		/**获取检验项目列表 */
		getCheckedProjectList(){
			this.loading = true;
			getCkeckProjectList(this.queryParams).then((response) => {
				this.checkProjectList = response.rows;
				this.total = response.total;
				this.loading = false;

				this.rowspan()
			});
		},
		// 打印预览-浏览器打印
		handlePrint(params) {
			printJS({
				printable: params.printable, // 'printFrom', // 标签元素id
				type: params.type || 'html',
				maxWidth: 1600, // 最大宽度
				font_size: "",// 设置字体大小
				//header: "库存检验结果报告",//params.header, // '表单',
				targetStyles: ['*'],
				style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
				ignoreElements: params.ignore || [], // ['no-print']
				properties: params.properties || null
			})
		},
		getDefectType() {
			const defectType = "inventory";
			getDefectTypeListByDefectType(defectType).then(response => {
				this.defectList = response.rows;
			});
		},
		getCodeValue(defectCode) {
			const foundDefect = this.defectList.find(defect => defect.defectCode === defectCode);
			return foundDefect.defectSubclass;
		},

		// 打印巡检记录
		showPrintX() {
            var startQuery = moment(this.queryParams.checkTimeArray[0]).format('YYYY-MM-DD');
			var endQuery = moment(this.queryParams.checkTimeArray[1]).format('YYYY-MM-DD');
            if(this.queryParams.checkTimeArray.length<0){
				this.$modal.msgError("检验时间筛选条件不能为空")
				return
			}
			if(startQuery != endQuery){
				this.$modal.msgError("检验时间筛选条件必须是同一天")
				return
			}

			this.printData.workCenter = "暂无数据";
			this.printData.printDate = null;
			this.printData.workTable = [];
			this.printData.factory = null;
			this.printData.productDate = null;
			this.printData.pageNo =0 ;
			// 打开工单信息对话框
			this.printDialogVisible = true;
			this.newWorkerLoading = true // 设置加载状态为true，表示正在加载
			this.refreshNewWorkerTable = false // 先将refreshProTable设置为false，隐藏表格
			printXJRecordList(this.queryParams).then(response => {
				this.showWorkorderCode = false;
				this.printData.incomeTime = startQuery;
				this.printData.fileNo = response[0].fileNo;
				this.printData.checkManName = response[0].checkManName;
				//this.printData.printDate = moment(new Date()).format('YYYY-MM-DD')
				this.printData.workTable = response
				this.printData.pageNo = response.length;
				let chunkedArray = [];

				// 遍历this.printData.workTable
				for (let i = 0; i < this.printData.workTable.length; i += (i==0?this.fenyeNumber:this.fenyeNumberTwo)) {

					// 使用slice方法从当前索引i开始切割，切割长度为10（如果剩余元素少于10，则切割剩余所有元素）
					let chunk = this.printData.workTable.slice(i, i + (i==0?this.fenyeNumber:this.fenyeNumberTwo));
					// 将切割后的数组添加到chunkedArray中
					chunkedArray.push(chunk);
				}
				this.printData.workTable = chunkedArray;
				this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true，显示表格
				this.newWorkerLoading = false // 设置加载状态为false，表示加载完成
			})
		},

		/**
		* 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 === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
		**/
        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;
}
.my-print-head {
  margin-top: 5px;
  font-weight: bold;
  text-align: center;
}
</style>