界面UI框架layui。 主体是上面form下面table。 form有两个输入框，不可更改，显示l...

界面UI框架layui。
主体是上面form下面table。
form有两个输入框，不可更改，显示lotId和equipmentId；有很多按钮，按钮单独一行，按钮分别为暂停(hold),返工(rework),合格(next)，附件管理。
table，列定义lotRrn,lotId(批次号)，unitRrn，unitId(晶圆号)，tapeId，rangId(铁环号),binId（bin号）,binQty(数量),
goodBadFlag(tape标记)，

form按钮：暂停，返工，合格都自定义，无需实现，点击弹出confirm框即可。
附件管理：弹框显示。弹框内分为两个tab：上传附件和查看附件，默认显示上传附件。上传附件要求可以选择多个添加，并看到上传进度条。
失败的可以查看失败原因，支持重新上传和删除。上传列表支持清空。
查看附件：默认table显示，支持预览，下载，删除

table每列追加按钮列。按钮列中定义按钮不良项。点击不良项按钮，弹框显示不良项；不良项弹框功能：主体是table，显示不良项；
表格列：badId(不良项),badQty(不良数量)。表格上方增加按钮：添加。点击添加可以添加不良项，删除不良项的操作做行内按钮。不良项弹框要求有关闭按钮。

开发要求：关键逻辑注释，大厂开发人员角度开发，所有表格的数据加载都采用ajax，附件管理最好封装写，后续可能会挪到另一个界面去支持仅查看。
附件上传采用FTP。
后端计数struts1.0。ajax 采用以下方式：
Ext.Ajax.request({
url: '<%=request.getContextPath()%>/dieCountCalibrationHandle.do',
method: 'POST',
requestMethod: 'queryRunningLotTapeByJobAndEquipment',
params: {
jobRrn: ("#jobRrn").val(), equipmentRrn: ("#equipmentRrn").val()
},
success: function(response){
var res = parseExtResponse(response);
if(res && (res.success || res.flag === true)){
var list = res.dataList || [];
list.forEach(function(r){
if(r.binQtyNew === null || r.binQtyNew === undefined || String(r.binQtyNew).trim() === ''){
r.binQtyNew = '';
}
r.binQtyNew_old = r.binQtyNew;
});
table.reload('calTable', { data: list });
}else{
layer.msg((res && (res.msg || res.message)) || i18n_msg_die_count_calibration_load_failed, {icon:2});
}
},
failure: function(){
layer.msg(i18n_msg_die_count_calibration_network_error, {icon:2});
}
});

后端实现方法：
public Map<String, Object> saveDieCountCalibration(Map<String, Object> params) {
Map<String, Object> result = new HashMap<>();
try {
result.put("success", true);
result.put("msg", errorStringByLanguage("保存成功", "Saved successfully"));
}catch (Exception e){
result.put("success", false);
result.put("msg", e.getMessage());
}
return result;
}

没看见画布啊