<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Internal Engineering Change Notice (ECN) Request - View</title>
<style>
.container {
margin: auto;
border: 1px solid #ccc;
padding: 20px 20px 0px 20px;
font-family: Arial, sans-serif;
}
.container h2 {
text-align: center;
}
.header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.header-info {
font-size: 14px;
}
.form-group {
display: flex;
margin-bottom: 15px;
}
.container label {
display: inline-block;
width: 300px;
font-weight: bold;
}
input[type="text"],
input[type="date"],
input[type="time"],
textarea {
width: 200px;
padding: 5px;
}
.checkbox-group {
display: flex;
align-items: center;
}
.checkbox-group label {
margin-right: 10px;
font-weight: normal;
margin-right: 5px;
/* 控制每个复选框之间的间距 */
width: 60px;
}
.section {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #ccc;
}
.container .footer {
margin-top: 30px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #555;
}
.row {
display: flex;
width: 100%;
gap: 10px;
}
.col {
display: flex;
align-items: center;
white-space: nowrap;
}
.col label {
white-space: nowrap;
margin-right: 1px;
font-weight: bold;
}
.approval-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.approval-table th,
.approval-table td {
padding: 10px;
border: 1px solid #ccc;
vertical-align: top;
}
.approval-table th {
background-color: #f5f5f5;
text-align: left;
}
.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">
<input name="id" id="id" type="hidden" value="{$list.id}" />
<input name="navTabId" id="navTabId" type="hidden" value="{$navTabId}" />
<
div class="header" style="display: flex; justify-content: space-between; align-items: center;">
<img src="__PUBLIC__/Images/logo.gif" alt="Logo">
<strong>Ref. No：{$list.ref_no}
</strong>
</
div>
<
div class="header" style="justify-content: center;">
<h2 style="font-size: 32px;">Internal Engineering Change Notice (ECN) Requests</h2>
</
div>
<
div class="form-group">
<
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" <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" <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" <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" <if condition="$list.requested_department eq 'PMC'">checked</if> />
<label for="PMC" style="margin-left: 1px;">PMC</label>
</label>
</
div>
<
div class="col" style="margin-left: 200px;">
<label style="width: 100px;">Ext. no: <
span>{$list.ext_no}</
span></label>
</
div>
</
div>
<
div style="margin-top: 15px;">
<label>Date (MM/DD/YYYY):<
span>{$list.request_date|date='m/d/Y',###}</
span></label>
</
div>
<
div class="section">
<h4 style="font-size: 20px;">Part A: General Project and Change Information (Fill by Requestor):</h4>
<
div style="margin-bottom: 15px;margin-top: 10px;">
<label>PNG Part No:<
span>{$list.png_part_no}</
span></label>
<label style="margin-left: 10px;">Customer:<
span>{$list.customer}</
span></label>
<label style="margin-left: 10px;">Customer code:<
span>{$list.customer_code}</
span></label>
</
div>
<
div class="form-group">
<label>Purpose / Reason of ECN:<
span>{$list.purpose_reason}</
span></label>
</
div>
<
div class="form-group">
<label style="width: 400px;margin-top: 5px;">Change area: Manufacturing Instruction(M.I.) #：</label>
<
div class="col checkbox-group" style="justify-content: flex-start; padding-left: 5px;">
<label><input type="radio" <if condition="$list.change_area_manufacturing eq 'YES'">checked</if> /> YES</label>
<text>/</text>
<label><input type="radio" <if condition="$list.change_area_manufacturing eq 'NO'">checked</if> /> NO</label>
</
div>
<label style="margin-left: 100px;width: 100px;">Tooling#：</label>
<
div class="checkbox-group" style="justify-content: flex-start; padding-left: 5px;">
<label><input type="radio" <if condition="$list.tooling eq 'YES'">checked</if> /> YES</label>
<text>/</text>
<label><input type="radio" <if condition="$list.tooling eq 'NO'">checked</if> /> NO</label>
</
div>
</
div>
</
div>
<
div class="section">
<h4 style="font-size: 20px;">Part B: Change Description (Fill by Requestor):</h4>
<
div class="header" style="justify-content: center;">
<h2>ECN Change Details (add attachment if needed)</h2>
</
div>
<
div class="form-group">
<label style="width: 100px;">From:</label>
<
div>{$list.change_from}</
div>
</
div>
<
div class="form-group">
<label style="width: 100px;">To:</label>
<
div>{$list.change_to}</
div>
</
div>
<label style="white-space: nowrap;">Involve Work Order in Production #:</label>
<
div class="form-group">
<label style="width: 80px;"><input type="radio" <if condition="$list.involve_work_order eq 'YES'">checked</if> /> YES -</label>
<label style="width: 400px;"><input type="radio" <if condition="$list.request_change_date_option eq 'YES'">checked</if> />Request Change Date:
<
span>{$list.request_change_date|date='m/d/Y',###}</
span>(MM/DD/YYYY)
</label>
<label style="margin-left: 50px;">Time:
<
span style="font-weight: normal;">{$list.request_change_time}(HH:MM)</
span>
</label>
</
div>
<
div class="form-group" style="margin-left: 80px;">
<label style="white-space: nowrap;width: 300px;"><input type="radio" <if condition="$list.implement_after_option eq 'YES'">checked</if> />Implement after * W/O / DC/Process <
span>{$list.implement_after}</
span></label>
</
div>
<
div class="form-group" style="margin-left: 80px;">
<label style="white-space: nowrap;width: 250px;"><input type="radio" <if condition="$list.assigned_by_pmc eq 'YES'">checked</if> />Assigned by PMC (Go to PartC)</label>
</
div>
<
div class="form-group">
<label style="white-space: nowrap;"><input type="radio" <if condition="$list.involve_work_order eq 'NO'">checked</if> />NO(Change date schedule byPE)</label>
</
div>
<
div class="form-group">
<label style="white-space: nowrap;">M.I & Tooling disposition by #:</label>
<
div class="checkbox-group" style="margin-left: 50px;">
<label style="width: 150px;"><input type="radio" <if condition="$list.mi_tooling_disposition_by eq 'New Part number'">checked</if> /> New Part number</label>
<label style="width: 150px;"><input type="radio" <if condition="$list.mi_tooling_disposition_by eq 'Up-version'">checked</if> /> Up-version</label>
<label style="width: 150px;"><input type="radio" <if condition="$list.mi_tooling_disposition_by eq 'Amendment'">checked</if> /> Amendment</label>
</
div>
</
div>
</
div>
<
div class="section">
<h4 style="font-size: 20px;">Part C: Running change schedule: (Fill by PMC)</h4>
<
div class="form-group" style="margin-top: 20px;">
<label style="width:400px;">Assign Change Date:
<
span>{$list.assign_change_date|date='m/d/Y',###}(MM/DD/YYYY)</
span>
</label>
<label style="margin-left: 50px;">Time:
<
span>{$list.assign_change_time}(HH:MM)</
span>
</label>
</
div>
</
div>
<
div class="section">
<h4 style="font-size: 20px;">Part D: Approval</h4>
<table class="approval-table">
<tr>
<td>Department Manager of requestor: <
span>{$list.department_manager_signature}</
span></td>
<td>M.E <br/><
span>{$list.me_signature}</
span></td>
<td>P.E <br/><
span>{$list.pe_signature}</
span></td>
<td>PMC <br/><
span>{$list.pmc_signature}</
span></td>
<td>QA <br/><
span>{$list.qa_signature}</
span></td>
</tr>
<tr>
<td>Date (MM/DD/YYYY):<
span>{$list.department_manager_date|date='m/d/Y',###}</
span></td>
<td>Date (MM/DD/YYYY):<
span>{$list.me_date|date='m/d/Y',###}</
span></td>
<td>Date (MM/DD/YYYY):<
span>{$list.pe_date|date='m/d/Y',###}</
span></td>
<td>Date (MM/DD/YYYY):<
span>{$list.pmc_date|date='m/d/Y',###}</
span></td>
<td>Date (MM/DD/YYYY):<
span>{$list.qa_date|date='m/d/Y',###}</
span></td>
</tr>
</table>
</
div>
<
div class="footer">
<
div>Form No. PEF-005</
div>
<
div>Version: A/2</
div>
<
div>Effective Date: 09/09/2024</
div>
</
div>
</
div>
</
div>
</
div>
</
div>
</body>
</html>
<script language="javascript" type="text/javascript" src="__PUBLIC__/dwz/js/autosize.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function () {
$("#printbt").click(function(){
$("
div#myPrintArea").printArea();
});
// 禁止所有 radio 按钮被点击修改
$('input[type="radio"]').each(function () {
$(this).data('waschecked', $(this).is(':checked')); // 保存原始状态
$(this).on('click', function (e) {
e.preventDefault(); // 阻止默认行为
return false;
});
});
});
</script>
part d的table表格部分
超出了980px的
宽度限制是为什么
超级扫帚
|
2016-9-9 10:00
本文介绍如何使用CSS属性如overflow、display等来实现文本溢出时的自动隐藏效果，适用于块级元素。
扫一扫
937
到【灌水乐园】发言
