浦镇质量系统平台-任务管理Week02
菜单设置
- 菜单设置是直接用已经写好的后台流程代码在前端页面上直接操作。演示功能如下，后期有时间应该了解一下后端的业务实现。
taskList.jsp
- 在taskList.jsp中对页面进行布局，这个布局比较简单。搭建一个大体的框架页面。主要注意的就是每个前端代码块与页面的对应关系。
-
开头是样式模块，是CSS样式。
-
中间是页面各个元素，注意有loadGrid，loadGrid可以对一个页面展示不同的数据进行实现，通过数组gridIds。
-
结尾是每个功能图标点击事件的实现方法。
-
不同页面的展示标签要为各自标签设置href值
1.要为第4行，第7行在href中设置标签。
<div class="tabbable">
<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab2">
<li class="active">
<a data-toggle="tab" href="#taskNcr">NCR任务</a>
</li>
<li>
<a data-toggle="tab" href="#taskExod">例外转序任务</a>
</li>
</ul>
<div class="tab-content"
style="padding: 0px 0px;padding-right: 0px;padding-left: 0px;padding-top: 0px;padding-bottom: 0px;">
<div id="taskNcr" class="tab-pane in active">
<table id="ncrgrid-table"></table>
<div id="ncrgrid-pager"></div>
</div>
<div id="taskExod" class="tab-pane">
<table id="exodgrid-table"></table>
<div id="exodgrid-pager"></div>
</div>
</div>
</div>
- 通过gridIds数组为页面使用整个页面的多个标签添加功能
var gridIds = new Array("ncr", "exod");
- 当页面展示的数据的有不同的数据时，可以设置var var colModel = {};为每个要展示的标签单独设置展示的页面。这上面的第19行，和第20行数据标识有区别。不过，个人认为这个方法很差，周末有空应该思考改进，这样写的代码重复冗余代码量很大。
var colModel = {};
colModel['ncr'] = [
{name: 'id', index: 'id', label: '主键', key: true, hidden: true},
{name: 'processInstanceId', index: 'processInstanceId', hidden: true},
{name: 'edit', index: 'edit', label: '操作', width: '60'},
{name: 'no', index: 'no', label: '编号', width: 210},
{name: 'openTime', index: 'openTime', label: '开立时间', width: 200},
{name: 'creatUser', index: 'creatUser', label: '开立人', width: 150},
{name: 'engineer', index: 'engineer', label: '质量工程师', width: 180},
{name: 'checkUser', index: 'checkUser', label: '当前处置人', width: 150},
{name: 'status', index: 'status', label: '状态', width: 150}
];
colModel['exod'] = [
{name: 'id', index: 'id', label: '主键', key: true, hidden: true},
{name: 'processInstanceId', index: 'processInstanceId', hidden: true},
{name: 'edit', index: 'edit', label: '操作', width: '60'},
{name: 'no', index: 'no', label: '编号', width: 210},
{name: 'openTime', index: 'openTime', label: '开立时间', width: 200},
{name: 'creatUser', index: 'creatUser', label: '开立人', width: 150},
{name: 'engineer', index: 'engineer', label: '质量工程师', width: 180},
{name: 'checkUser', index: 'checkUser', label: '当前处置人', width: 150},
{name: 'statusName', index: 'status', label: '状态', width: 150}
];
loadGrid(gridIds[0]);
var activeTab = $(e.target)[0].hash;
if (activeTab == "#taskNcr") loadGrid(gridIds[0]);
-
在gridComplete方法中，可以通过判断语句，为每个图标在加载不同功能页面时添加图标不同的点击方法实现功能。
1.在if(){}else{}判断时，注意判断条件为gridId===gridIds[0]，这样的判断才是正确的。刚开始直接写if(gridIds[0]){}，这样的判断条件gridIds[0]，永远为true，导致只执行if中的语句。
2.注意对应的方法和标签中的id要一致。第11行，第14行，第19行，第22行标签id，对应第28行，第32行，第36行，第40行方法。通过**$(grid_selector).find(‘a[data-action=detail]’).on(‘click’, function (event)**为标签添加点击方法。
gridComplete: function () {
var ids = jQuery(grid_selector).jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var rowData = $(grid_selector).getRowData(ids[i]);
var status = rowData.status;
var id = rowData.id;
var taskId = rowData.taskId;
var btn = '';
if (gridId===gridIds[0]) {
btn = '<div class="action-buttons" style="white-space:normal">\
<a data-action="detail" data-id="' + rowData.id + '" data-processInstanceId="' + rowData.processInstanceId + '"\
href="javascript:void(0);" class="tooltip-success green" data-rel="tooltip" title="明细">\
<i class="ace-icon fa fa-file-text-o bigger-130"></i></a>\
\<a data-action="stop" data-id="' + rowData.id + '" data-taskId="' + rowData.taskId + '" href="javascript:void(0);" class="tooltip-success green" data-rel="tooltip" title="关闭">\
<i class="ace-icon fa fa-ban bigger-130 red"></i></a>\
</div>';
} else {
btn = '<div class="action-buttons" style="white-space:normal">\
<a data-action="detail2" data-id="' + rowData.id + '" data-processInstanceId="' + rowData.processInstanceId + '"\
href="javascript:void(0);" class="tooltip-success green" data-rel="tooltip" title="明细">\
<i class="ace-icon fa fa-file-text-o bigger-130"></i></a>\
\<a data-action="stop2" data-id="' + rowData.id + '" data-taskId="' + rowData.taskId + '" href="javascript:void(0);" class="tooltip-success green" data-rel="tooltip" title="关闭">\
<i class="ace-icon fa fa-ban bigger-130 red"></i></a>\
</div>';
}
jQuery(grid_selector).jqGrid('setRowData', ids[i], {edit: btn});
}
$(grid_selector).find('a[data-action=detail]').on('click', function (event) {
var id = $(this).attr('data-id');
var processInstanceId = $(this).attr('data-processInstanceId');
_from(id, processInstanceId);
});
$(grid_selector).find('a[data-action=stop]').on('click', function (event) {
var id = $(this).attr('data-id');
_stop(id);
});
$(grid_selector).find('a[data-action=detail2]').on('click', function (event) {
var id = $(this).attr('data-id');
_from2(id);
});
$(grid_selector).find('a[data-action=stop2]').on('click', function (event) {
var id = $(this).attr('data-id');
_stop2(id);
});
},
editurl: "/dummy.html",//nothing is saved
caption: "任务列表"
});
$("#editDivId").html(object.responseText).dialog
TaskManageDao.java
- 通过@MyBatisDao为数据库操作添加方法，注意这其中对应的方法都是对应的整个TaskManage，也就是说，如果为TaskManage中的子项设置方法，除非方法实现完全一致才能写一个共性方法，否则都要单独设置。我一开始就是没注意这个问题，TaskManage中两个get方法不同，我只用了一个get代替，导致无法为例外转序设置再设置get方法了，所以应该分开为NCR和例外转序单独设置各自的get方法getNcr，getExod
TaskManageDao.xml
-
这里是SQL语句，有返回值的都要添加resultType
1.需要注意的就是查找结果为id时要与对应的别名表连接查询，查找的结果为别名表的别名。在表连接时要把要用到的两个表相互关联，与前面的表关联无关。
2.因为数据有可能某项有对应多行数据，这样查找会每条数据都显示一行。所以要把含多行数据合并，用oracle将多行数据合并
** listagg(to_char(cu.name),’,’)within group (order by cu.name)
GROUP BY
t.id,
t.process_instance_id,
t.no,
cr.name,
t.status,
t.create_date,
e.name**
<select id="findNcrList" resultType="com.dhc.qmis.basisData.entity.TaskManage">
select
t.id as "id",
t.process_instance_id as "processInstanceId",
t.no as "no",
t.create_date as "openTime",
cr.name as "creatUser",
t.status as "status",
e.name as "engineer",
listagg(to_char(cu.name),',')within group (order by cu.name) as "checkUser"
from qmis_ncr_report_info t
left join llm_invcl li on t.project_id = li.id
left join llm_wk lw on t.station_id = lw.id
left join sys_user d on t.dis_user = d.id
left join sys_user r on r.id = t.ratify_user
left join sys_user c on c.id = t.close_user
left join sys_user cr on cr.id = t.create_by
left join sys_user ap on ap.id = t.appro_user
left join sys_user a on a.id = t.approva_user
left join sys_user e on e.id=t.engineer
left join sys_office off on t.work_shop = off.id
left join QMIS_BAS_SUPPLIER_INFO spl on spl.id = t.supplier
left join act_ru_task u on t.process_instance_id = u.proc_inst_id_
left join act_ru_identitylink i on i.task_id_ = u.id_
left join sys_user cu on cu.id=i.user_id_
where t.del_flag = '0' and t.status!='00' and t.status!='01'
<if test="projectId !=null and projectId !=''">
and t.project_id = #{projectId}
</if>
<if test="creatUser !=null and creatUser !=''">
and t.create_by = #{creatUser}
</if>
<if test="checkUser !=null and checkUser !=''">
and i.user_id_ = #{checkUser}
</if>
<if test="status !=null and status !=''">
and t.status = #{status}
</if>
<if test="beginDate !=null and beginDate !=''">
and t.create_date >= #{beginDate}
</if>
<if test="endDate !=null and endDate !=''">
and t.create_date <= #{endDate}+1
</if>
<if test="searchList !=null">
<foreach collection="searchList" index="index" item="search" open="and"
separator="and" close="">
(upper(li.invclassname) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(lw.gzzxmc) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(t.no) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(t.prd_no) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(t.work_shop) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(off.name) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(c.name) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(t.supplier) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(cr.name) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(a.name) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(t.prd_name) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(ap.name) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
) or
upper(t.fault_code) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
)or
upper(t.ncr_desc) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
)or
upper(t.mater_code) LIKE upper(
<if test="dbName == 'oracle'">'%'||#{search}||'%'</if>
<if test="dbName == 'mysql'">CONCAT('%', #{search}, '%')</if>
))
</foreach>
</if>
GROUP BY
t.id,
t.process_instance_id,
t.no,
cr.name,
t.status,
t.create_date,
e.name
<choose>
<when test="page !=null and page.orderBy != null and page.orderBy != ''">
ORDER BY ${page.orderBy}
</when>
<otherwise>
order by "status","creatUser","checkUser"
</otherwise>
</choose>
</select>
TaskManage.java
- 这里是实体类，尽量写全每一个要用到的实体类。注意构造方法要加上。
TaskManageService.java
- 在service层中通过调用dao层方法为controller实现添加方法。在service实现对dao层的调用。
TaskManageController.java
- 通过@RequestMapping(value = “${adminPath}/qmis/task”)，为jsp中添加方法的路径。在controller层调用service层方法为前端jsp提供调用。