<template>
    <el-container>
        <el-side>
            <el-button type="primary" @click="handleExport">导出</el-button>
            <el-button type="primary" @click="handlePrint">打印</el-button>
        </el-side>
        <!--基本信息!-->
        <el-main v-loading="mainLoading" style="margin-top: -10px;">
            <div id="exportDiv" class="exportDiv">
               <!-- 入库信息 -->
                <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">入库信息单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">入库信息单编号</li>
                        <li class="export_ulli">入库日期</li>
                        <li class="export_ulli">执行部门-工段</li>
                        <li class="export_ulli">交送人</li>
                        <li class="export_ulli">仓库接收人</li>
                        <li class="export_ulli">仓库</li>
                        <li class="export_ulli">采购订单</li>
                        <li class="export_ulli">供应商名称</li>
                        <!-- <li class="export_ulli"><span>333333333：</span><span class="export_ulli_info">333333333</span></li> -->
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                        <li class="export_ulli">44444444444</li>
                        <li class="export_ulli">55555555555</li>
                        <li class="export_ulli">66666666666</li>
                        <li class="export_ulli">77777777777</li>
                        <li class="export_ulli">88888888888</li>
                        <!-- <li class="export_ulli"><span>333333333：</span><span class="export_ulli_info">333333333</span></li> -->
                    </ul>
                
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">物料清单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">物料名称</li>
                        <li class="export_ulli">型号</li>
                        <li class="export_ulli">所在工序</li>
                        <li class="export_ulli">批次号</li>
                        <li class="export_ulli">数量</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                        <li class="export_ulli">44444444444</li>
                        <li class="export_ulli">55555555555</li>
                    </ul>
                </div>
                <!-- 生产领料信息单 -->
                <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">生产领料信息单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">信息单编号</li>
                        <li class="export_ulli">出库日期</li>
                        <li class="export_ulli">执行部门-工段</li>
                        <li class="export_ulli">交送人</li>
                        <li class="export_ulli">仓库执行人</li>
                        <li class="export_ulli">接收人</li>
                        <li class="export_ulli">仓库</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                        <li class="export_ulli">44444444444</li>
                        <li class="export_ulli">55555555555</li>
                        <li class="export_ulli">66666666666</li>
                        <li class="export_ulli">77777777777</li>
                    </ul>
                
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">物料清单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">物料名称</li>
                        <li class="export_ulli">批次号</li>
                        <li class="export_ulli">数量</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                    </ul>
                </div>
                <!-- 销售发货信息单 -->
                <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">销售发货信息单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">发货单编号</li>
                        <li class="export_ulli">发货日期</li>
                        <li class="export_ulli">订单编号</li>
                        <li class="export_ulli">日期</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                        <li class="export_ulli">44444444444</li>
                    </ul>
                
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">物料清单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">物料名称</li>
                        <li class="export_ulli">批次号</li>
                        <li class="export_ulli">数量</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                    </ul>
                </div>
                <!-- 检验结果 -->
                <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">XXX检验结果</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">物料名称</li>
                        <li class="export_ulli">批次号总数</li>
                        <li class="export_ulli">抽检数</li>
                        <li class="export_ulli">检验人</li>
                        <li class="export_ulli">检验设备</li>
                        <li class="export_ulli">检验日期</li>
                        <li class="export_ulli">备注</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                        <li class="export_ulli">44444444444</li>
                        <li class="export_ulli">55555555555</li>
                        <li class="export_ulli">66666666666</li>
                        <li class="export_ulli">77777777777</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">合格数</li>
                        <li class="export_ulli">不合格数合计</li>
                        <li class="export_ulli">合格率</li>
                        <li class="export_ulli"></li>
                        <li class="export_ulli"></li>
                        <li class="export_ulli"></li>
                        <li class="export_ulli"></li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                        <li class="export_ulli"></li>
                        <li class="export_ulli"></li>
                        <li class="export_ulli"></li>
                        <li class="export_ulli"></li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">厚度</li>
                        <li class="export_ulli">气泡</li>
                        <li class="export_ulli">水纹</li>
                        <li class="export_ulli">崩边</li>
                        <li class="export_ulli">划伤</li>
                        <li class="export_ulli">麻点</li>
                        <li class="export_ulli">线痕</li>
                        <li class="export_ulli">产品外径</li>
                        <li class="export_ulli">产品圆度</li>
                        <li class="export_ulli">产品同心度</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">1</li>
                        <li class="export_ulli">2</li>
                        <li class="export_ulli">3</li>
                        <li class="export_ulli">4</li>
                        <li class="export_ulli">5</li>
                        <li class="export_ulli">6</li>
                        <li class="export_ulli">7</li>
                        <li class="export_ulli">8</li>
                        <li class="export_ulli">9</li>
                        <li class="export_ulli">10</li>
                    </ul>
                </div>
                 <!-- 任务分解单 -->
                 <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">任务分解单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">任务编号</li>
                        <li class="export_ulli">工艺路线</li>
                        <li class="export_ulli">产品名称</li>
                        <li class="export_ulli">任务总数量</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">CNC</li>
                        <li class="export_ulli">CNC玻璃</li>
                        <li class="export_ulli">100000</li>
                    </ul>
                
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">任务分解表</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">子任务编号</li>
                        <li class="export_ulli">人员</li>
                        <li class="export_ulli">数量</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111101</li>
                        <li class="export_ulli">张三</li>
                        <li class="export_ulli">5000</li>
                    </ul>
                </div>
                <!-- 日志记录 -->
                <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">日志记录</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">任务编号</li>
                        <li class="export_ulli">工艺路线</li>
                        <li class="export_ulli">产品名称</li>
                        <li class="export_ulli">任务总数</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">CNC</li>
                        <li class="export_ulli">CNC玻璃</li>
                        <li class="export_ulli">100000</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">物料清单</li>
                    </ul>
                    <!-- 循环子任务 -->
                    <div style="display: flex;">
                        <div style="width: 40px; border-top: 1px solid #aaaaaa;border-left: 1px solid #aaaaaa;">1</div>
                        <div style="flex: 1;">
                            <ul class="export_ul">
                                <li class="export_ulli">设备编号</li>
                                <li class="export_ulli">操作人</li>
                                <li class="export_ulli">班次</li>
                                <li class="export_ulli">开始时间</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'">温度</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'||mgroupName=='退火'">保温时间</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'||mgroupName=='退火'">冷却时间</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'||mgroupName=='退火'">预估结束时间</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'||mgroupName=='退火'">备注层数</li>
                            </ul>
                            <ul class="export_ul">
                                <li class="export_ulli">TH11101</li>
                                <li class="export_ulli">张三</li>
                                <li class="export_ulli">白班</li>
                                <li class="export_ulli">19：00</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'">温度</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'||mgroupName=='退火'">600</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'||mgroupName=='退火'">120</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'||mgroupName=='退火'">05：00</li>
                                <li class="export_ulli" v-if="mgroupName=='黑化'||mgroupName=='退火'">1到10层</li>
                            </ul>
                            <ul class="export_ul">
                                <li class="export_ulli">输入物料批次号</li>
                                <li class="export_ulli">领料数量</li>
                                <li class="export_ulli">加工数量</li>
                                <li class="export_ulli">加工前不良数量</li>
                                <li class="export_ulli">输出物料批次号</li>
                                <li class="export_ulli">合格数量</li>
                                <li class="export_ulli">不合格数量</li>
                                <li class="export_ulli">不合格原因</li>
                            </ul>
                            <ul class="export_ul">
                                <li class="export_ulli">20241011</li>
                                <li class="export_ulli">5000</li>
                                <li class="export_ulli">4000</li>
                                <li class="export_ulli">10</li>
                                <li class="export_ulli">20241011-TH01</li>
                                <li class="export_ulli">3950</li>
                                <li class="export_ulli">40</li>
                                <li class="export_ulli">崩边</li>
                            
                            </ul>
                        </div>
                    </div>
                    
                </div>
                 <!-- 交接记录 -->
                 <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">交接记录</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">交送工序</li>
                        <li class="export_ulli">交送人</li>
                        <li class="export_ulli">接受工序</li>
                        <li class="export_ulli">接收人</li>
                        <li class="export_ulli">交送日期</li>
                        <li class="export_ulli">接收日期</li>
                        <li class="export_ulli">备注</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">1111</li>
                        <li class="export_ulli">2222</li>
                        <li class="export_ulli">3333</li>
                        <li class="export_ulli">4444</li>
                        <li class="export_ulli">5555</li>
                        <li class="export_ulli">6666</li>
                        <li class="export_ulli">7777</li>
                    </ul>
                
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">物料清单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">物料名称</li>
                        <li class="export_ulli">批次号</li>
                        <li class="export_ulli">数量</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">11111111111</li>
                        <li class="export_ulli">22222222222</li>
                        <li class="export_ulli">33333333333</li>
                    </ul>
                </div>
                <!-- 成品尺寸检测记录单 -->
                <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">成品尺寸检测记录单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">日期</li>
                        <li class="export_ulli">批次号</li>
                        <li class="export_ulli">输入</li>
                        <li class="export_ulli">合格输出</li>
                        <li class="export_ulli">内径不良</li>
                        <li class="export_ulli">外径不良</li>
                        <li class="export_ulli">产品外径不良</li>
                        <li class="export_ulli">同心度不良</li>
                        <li class="export_ulli">圆度不良</li>
                        <li class="export_ulli">准合格</li>
                        <li class="export_ulli">不合格总数</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">1</li>
                        <li class="export_ulli">2</li>
                        <li class="export_ulli">3</li>
                        <li class="export_ulli">4</li>
                        <li class="export_ulli">5</li>
                        <li class="export_ulli">6</li>
                        <li class="export_ulli">7</li>
                        <li class="export_ulli">8</li>
                        <li class="export_ulli">9</li>
                        <li class="export_ulli">10</li>
                        <li class="export_ulli">11</li>
                    </ul>
                </div>
                <!-- 成品外观检测记录单 -->
                <div class="containersDom">
                    <ul class="export_ul">
                        <li class="export_ulli export_ulli_title">成品外观检测记录单</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">日期</li>
                        <li class="export_ulli">批次号</li>
                        <li class="export_ulli">输入</li>
                        <li class="export_ulli">合格输出</li>
                        <li class="export_ulli">内径不良</li>
                        <li class="export_ulli">外径不良</li>
                        <li class="export_ulli">产品外径不良</li>
                        <li class="export_ulli">同心度不良</li>
                        <li class="export_ulli">圆度不良</li>
                        <li class="export_ulli">准合格</li>
                        <li class="export_ulli">不合格总数</li>
                    </ul>
                    <ul class="export_ul">
                        <li class="export_ulli">1</li>
                        <li class="export_ulli">2</li>
                        <li class="export_ulli">3</li>
                        <li class="export_ulli">4</li>
                        <li class="export_ulli">5</li>
                        <li class="export_ulli">6</li>
                        <li class="export_ulli">7</li>
                        <li class="export_ulli">8</li>
                        <li class="export_ulli">9</li>
                        <li class="export_ulli">10</li>
                        <li class="export_ulli">11</li>
                    </ul>
                </div>
            </div>
        </el-main>
    </el-container>
</template>
<script>
	import PdfLoader from '@/utils/html2pdf';
	export default {
		name: "scFire",
		props: {
			id: { type: String, default: "" },
			wfId: { type: String, default: "" },
		},
		data() {
			return {
				mainLoading: false,
				issave: false, //控制基本信息提交
				search: {
					keyword: null,
				},
				oplcateCode: 'fire',
				operationId: "",
				oplId: "",
				ticketId:'',
			};
		},
		mounted() {
			let that = this;
			this.$nextTick(()=>{})
		},
		methods: {
            handlePrint(){
                this.$PRINT("#exportDiv");
            },
			handleExport() {
				let exportDiv = document.getElementById('exportDiv')  // 需要导出部分页面的id名
    			this.pdfDownLoader = new PdfLoader(exportDiv, '作业许可证', 'exportDiv')  // fileName -->导出文件名,  question-table -->防止被截断的class名
				this.pdfDownLoader.outPutPdfFn('test');
			},
			//作业人员列表
			getworkerList() {
				this.$API.opm.worker.list.req({opl: this.oplId, page: 0}).then((res) => {
					this.workerData = res;
				});
			},
		},
	}
</script>
<style scoped>
.exportDiv{
    /* width: 210px;
    height: 297px; */
    width: 1050px;
    height: 1485px;
    padding: 10px;
    margin-top: 10px;
    background: #ffffff;
}
/* .pdfTitle{
    font-size: 18px;
    margin-top: 10px;
    font-weight: 600px;
    text-align: center;
} */
 .containersDom{
    border-right: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    margin-bottom: 20px;
 }
.export_ul{
   display: flex;
   list-style: none;
}
.export_ulli{
    flex:1;
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    border-top: 1px solid #aaaaaa;
    border-left: 1px solid #aaaaaa;
}
.export_ulli_title{
    text-align: center;
}
/* .export_ulli_info{
    color: var(--el-text-color-regular);
} */
</style>
