<php>
$affected_tooling = is_array($list['affected_tooling'])
? $list['affected_tooling']
: explode(',', $list['affected_tooling']);
</php>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Internal Engineering
Change Notice (ECN) Requests</title>
<style>
.container {
margin: auto;
border: 1px solid #ccc;
padding: 20px 20px 0px 20px;
font-family: Arial, sans-serif;
}
h2 {
text-align: center;
}
.header {
display: flex;
/* justify-content: space-between; */
align-items: center;
margin-bottom: 20px;
}
.header-info {
font-size: 14px;
}
.form-group {
display: flex;
margin-bottom: 15px;
}
/* 容器样式 */
.form-row {
justify-content: space-between;
/* 让子元素分布在两侧 */
display: flex;
gap: 5px;
/* 列之间的间距 */
margin-bottom: 15px;
}
.form-row .form-group {
display: flex;
}
label {
display: inline-block;
width: 300px;
font-weight: normal;
}
input[type="text"],
input[type="date"],
input[type="time"] {
width: 200px;
padding: 5px;
}
.
checkbox-group {
display: flex;
align-items: center;
}
/* 控制复选框组内部间距 */
.
checkbox-group label {
margin-right: 5px;
/* 每个复选框之间的间距 */
width: 60px;
}
.
checkbox-group label {
font-weight: normal;
margin-right: 5px;
}
.section {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #ccc;
}
.footer {
margin-top: 30px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #555;
}
.col {
display: flex;
align-items: center;
white-space: nowrap;
}
.col input[type="text"] {
padding: 2px;
box-sizing: border-box;
}
.col label {
white-space: nowrap;
margin-right: 1px;
}
.approval-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-weight: normal;
}
.approval-table th,
.approval-table td {
padding: 10px;
border: 1px solid #ccc;
vertical-align: top;
}
.approval-table th {
background-color: #f5f5f5;
text-align: left;
}
.
checkbox-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.
checkbox-row {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 48%;
/* 控制每行两个选项 */
}
.
checkbox-row.full-width {
flex: 0 0 100%;
/* Others 行占满整行 */
}
.
checkbox-row input[type="text"] {
flex: 1;
padding: 5px;
width: 200px;
}
.
checkbox-row label {
font-weight: normal;
white-space: nowrap;
}
.footer-page-break {
/*分页，兼容旧浏览器*/
page-break-after: always;
}
.center-text {
display: flex;
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
}
label span {
font-weight: normal;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<div class="center-text">
<div style="width:980px;text-align:left;">
<div class="container" layoutH="56">
<div class="header" style="display: flex; justify-content: space-between; align-items: center;">
<img src="__PUBLIC__/Images/logo.gif" alt="Logo" style="height: 50px;">
<strong>TCN No：{$list.tcn_no}
</strong>
</div>
<div class="header" style="justify-content: center;">
<h2>Tooling
Change Notice (TCN)</h2>
</div>
<div class="form-group">
<!-- 第一列：Requested by -->
<div class="col">
<label>Requested by #:<span>{$list.requested_by}</span></label>
</div>
<!-- 第二列：单选 -->
<div class="col
checkbox-group" style="justify-content: flex-start; padding-left: 5px;">
<label>
<input type="radio" name="requested_department" id="ME" value="ME" <if condition="$list.requested_department eq 'ME'">checked</if>/>
<label for="ME" style="margin-left: 1px;">ME</label>
</label>
<label>
<input type="radio" name="requested_department" id="PE" value="PE" <if condition="$list.requested_department eq 'PE'">checked</if>/>
<label for="PE" style="margin-left: 1px;">PE</label>
</label>
<label>
<input type="radio" name="requested_department" id="QA" value="QA" <if condition="$list.requested_department eq 'QA'">checked</if> />
<label for="QA" style="margin-left: 1px;">QA</label>
</label>
<label>
<input type="radio" name="requested_department" id="PMC" value="PMC" <if condition="$list.requested_department eq 'PMC'">checked</if> />
<label for="PMC" style="margin-left: 1px;">PMC</label>
</label>
</div>
</div>
<!-- 下一行：Date -->
<div style="margin-top: 15px;">
<label>Issue Date (MM/DD/YYYY):<span>{$list.issue_date}</span></label>
</div>
<div class="section">
<h4>Part A: General Project and
Change Information (Fill by Requestor):</h4>
<div class="form-row">
<label>PNG Part No.:<span>{$list.png_part_no}</span></label>
<label style="margin-left: 10px;">Customer:<span>{$list.customer}</span></label>
<div class="form-group">
<label>W/O:<span>{$list.wo}</span></label>
</div>
</div>
</div>
<div class="section">
<h4>Part B:
Change Description (Fill by Requestor):</h4>
<div class="form-group">
<label>Purpose:</label>
<div class="col">
<label>
<input type="radio" name="purpose_option" id="Tooling Update" value="Tooling Update" <if condition="$list.purpose_option eq 'Tooling Update'">checked</if> />
<label for="Tooling Update" style="margin-left: 1px;width: 100px;">Tooling Update</label>
</label>
<label>
<input type="radio" name="purpose_option" id="Test tooling" value="Test tooling" <if condition="$list.purpose_option eq 'Test tooling'">checked</if>/>
<label for="Test tooling" style="margin-left: 1px;">Test tooling</label>
</label>
<label>
<input type="radio" name="purpose_option" id="Rework tooling" value="Rework tooling" <if condition="$list.purpose_option eq 'Rework tooling'">checked</if> />
<label for="Rework tooling" style="margin-left: 1px;">Rework tooling</label>
</label>
</div>
</div>
<div class="form-group">
<label>Reason
of change:</label>
<textarea name="reason_
of_
change" id="reason_
of_
change" rows="3" cols="82"
lookupGroup="
LookupCCEmail"
look_name="
LookupCCEmail.orgName">{$list.reason_
of_
change}</textarea>
</div>
<div class="form-group">
<label>Tooling
change description:</label>
<textarea name="tooling_
change_description" id="tooling_
change_description" rows="3"
cols="82"
lookupGroup="
LookupCCEmail"
look_name="
LookupCCEmail.orgName">{$list.tooling_
change_description}</textarea>
</div>
<div class="form-group" style="display: block;">
<label style="width: 300px;">Remarks / Affected process:</label>
<h5>Affected tooling:</h5>
<div class="
checkbox-container">
<!-- 每行两个复选框 -->
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="inner_ldi"
value="inner_ldi" <if condition="in_array('inner_ldi', $affected_tooling)"> checked="checked"</if>>
<label for="inner_ldi">Inner LDI program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="inner_aoi"
value="inner_aoi" <if condition="in_array('inner_aoi', $affected_tooling)" >checked</if>>
<label for="inner_aoi">Inner layer AOI</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="pluritec" value="pluritec"
<if
condition="in_array('pluritec', $affected_tooling)" >checked</if>>
<label for="pluritec">Pluritec program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="conformal_mask" value="conformal_mask" <if condition="in_array('conformal_mask', $affected_tooling)">checked</if>>
<label for="conformal_mask">Conformal mask LDI program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="drill" value="drill"
<if
condition="in_array('drill', $affected_tooling)" >checked</if>>
<label for="drill">Drill program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="hole_laser"
value="hole_laser" <if
condition="in_array('hole_laser', $affected_tooling)" >checked</if>>
<label for="hole_laser">Hole / Laser AOI & Hole counter program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="buttonplate"
value="buttonplate" <if
condition="in_array('buttonplate', $affected_tooling)" >checked</if>>
<label for="buttonplate">Buttonplate / Copper fill LDI program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="outer_ldi"
value="outer_ldi" <if
condition="in_array('outer_ldi', $affected_tooling)" >checked</if>>
<label for="outer_ldi">Outer LDI program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="outer_aoi"
value="outer_aoi" <if
condition="in_array('outer_aoi', $affected_tooling)" >checked</if>>
<label for="outer_aoi">Outer layer AOI</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="solder_mask_di"
value="solder_mask_di" <if condition="in_array('solder_mask_di', $affected_tooling)">checked</if>>
<label for="solder_mask_di">Solder mask DI program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="solder_mask_avi"
value="solder_mask_avi" <if condition="in_array('solder_mask_avi', $affected_tooling)">checked</if>>
<label for="solder_mask_avi">Solder mask AVI</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="solder_stencil"
value="solder_stencil" <if
condition="in_array('solder_stencil', $affected_tooling)">checked</if>>
<label for="solder_stencil">Solder mask stencil / printing jig</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="via_filling"
value="via_filling" <if
condition="in_array('via_filling', $affected_tooling)" >checked</if>>
<label for="via_filling">Via filling tool</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="inkjet" value="inkjet"
<if
condition="in_array('inkjet', $affected_tooling)" >checked</if>>
<label for="inkjet">Inkjet</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="laser_mark"
value="laser_mark" <if
condition="in_array('laser_mark', $affected_tooling)" >checked</if>>
<label for="laser_mark">Laser mark</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="routing" value="routing"
<if
condition="in_array('routing', $affected_tooling)" >checked</if>>
<label for="routing">Routing program</label>
</div>
<div class="
checkbox-row">
<input name="affected_tooling[]" type="
checkbox" id="etest" value="etest"
<if condition="in_array('etest', $affected_tooling)" >checked</if>>
<label for="etest">E-Test program / Fixture</label>
</div>
<!-- Others 行 -->
<div class="
checkbox-row full-width">
<input name="affected_tooling[]" type="
checkbox" id="others_
checkbox"
value="others_
checkbox" <if
condition="in_array('others_
checkbox', $affected_tooling)">checked</if>>
<label for="others_
checkbox">Others<span style="margin-left: 10px;">{$list.others_input}</span></label>
</div>
</div>
</div>
</div>
<div class="section">
<h4>Part C: Running
change schedule: (Follow PMC schedule)</h4>
<div class="col">
<input type="
checkbox" id="running_
change_date_option" name="running_
change_date_option" <if condition="$list.running_
change_date_option" >checked</if>>
<label style="width: 400px;margin-left: 10px;" for="running_
change_wo_option">Running
Change Effective Date & Time:<span>{$list.running_
change_date}</span></label>
</div>
<div class="col">
<input type="
checkbox" id="running_
change_wo_option" name="running_
change_wo_option" <if
condition="$list.running_
change_wo_option" >checked</if>>
<label style="width: 400px;margin-left: 10px;" for="running_
change_wo_option">Running
Change Effective W/O:<span>{$list.running_
change_wo}</span></label>
</div>
</div>
<div class="section">
<h4>Part D: Approval</h4>
<table class="approval-table">
<tr>
<td>P.E</td>
<td>M.E</td>
<td>QA</td>
</tr>
<tr>
<td>Date (MM/DD/YYYY):<br>
<input type="date" name="pe_approve_date" value="{$list.pe_approve_date}">
<input type="time" name="pe_approve_time" value="{$list.pe_approve_time}">
</td>
<td>Date (MM/DD/YYYY):<br>
<input type="date" name="me_approve_date" value="{$list.me_approve_date}">
<input type="time" name="me_approve_time" value="{$list.me_approve_time}">
</td>
<td>Date (MM/DD/YYYY):<br>
<input type="date" name="qa_approve_date" value="{$list.qa_approve_date}">
<input type="time" name="qa_approve_time" value="{$list.qa_approve_time}">
</td>
</tr>
</table>
<div class="footer" style="margin-top: 1px;">Remark：Tooling update only need PE manager
approval</div>
</div>
<div class="footer">
<div>Form No. PEF-005</div>
<div>Version: A/2</div>
<div>Effective Date: 09/09/2024</div>
</div>
<div class="footer-page-break"></div>
<div class="header" style="display: flex; justify-content: space-between; align-items: center;">
<img src="__PUBLIC__/Images/logo.gif" alt="Logo" style="height: 50px;">
<strong>TCN No： {$list.tcn_no_2}
</div>
<div class="header" style="justify-content: center;">
<h2>Tooling
Change Notice (TCN)</h2>
</div>
<div class="footer">
<div>Form No. PEF-020</div>
<div>Version: A/2</div>
<div>Effective Date: 10/28/2024</div>
</div>
<div class="footer-page-break"></div>
<div class="header" style="display: flex; justify-content: space-between; align-items: center;">
<img src="__PUBLIC__/Images/logo.gif" alt="Logo" style="height: 50px;">
<strong>TCN No： ______________
</div>
<div class="header" style="justify-content: center;">
<h2>Tooling
Change Notice (TCN)</h2>
</div>
<table class="approval-table">
<thead>
<tr>
<th>Affected Tooling</th>
<th>Recall Tooling PIC</th>
<th>Date</th>
<th>PIC Signature</th>
<th>Confirmed By PE</th>
<th>PE Signature</th>
<th>Prod.Signature</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Inner LDI</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Inner AOI</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Pluritec</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Conf. mask LDI</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Drill program</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Hole / Laser AOI and Hole counter</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Buttonplate / Copper fill LDI</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Outer LDI</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Outer AOI</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Solder mask</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>DI</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>SM AVI</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>SM Stencil/Jig</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>RVF Tool</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Inkjet</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Laser mark</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Routing</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>E-test</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Others</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="footer">
<div>Form No. PEF-020</div>
<div>Version: A/2</div>
<div>Effective Date: 10/28/2024</div>
</div>
</div>
</div>
</div>
<div class="formBar">
<ul>
<li><div class="button"> <div class="buttonContent"><button type="button" onclick="navTab.closeCurrentTab()">关闭</button></div></div></li>
<li><div class="buttonActive"><div class="buttonContent"><button type="button" onclick="print()">{$Think.lang.print}</button></div></div></li>
</ul>
</div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript" src="__PUBLIC__/dwz/js/autosize.min.js"></script>
<script language="JavaScript">
function print(){
//$("div#myPrintArea").printArea();
window.open('__URL__/printtable/id/{$list.id}');
}
$(document).ready(function () {
// 禁止所有 radio 按钮被点击修改
$('input[type="radio"]').each(function () {
$(this).data('waschecked', $(this).is(':checked')); // 保存原始状态
$(this).on('click', function (e) {
e.preventDefault(); // 阻止默认行为
return false;
});
});
});
</script>
以上html页面怎么在浏览器打印的时候，左右两边内容显示不全
本文提供了一篇关于如何自定义复选框外观的详细教程，包括使用HTML、CSS和JavaScript实现个性化设计。
扫一扫
1695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
