<!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的宽度限制是为什么
本文深入探讨了HTML中控制自动换行的方法，包括使用`word-break`属性来灵活处理英文与中文的换行问题。通过实例演示了如何在表格中应用这一特性，确保文本内容在不同语言环境下的完美显示。
扫一扫
7850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
