开放管理平台02
一、客户模块
批量删除
需要将动态的数据表显示每条的复选框，需要加入属性：
{type: 'checkbox', fixed: 'left'}
前端选中匹配删除选项，发ajax请求到后端
layer.confirm('真的批量删除么', function(index) {
//获取选中对象
var checkStatus = table.checkStatus("custom");
var data = checkStatus.data; //获取选中记录（容器）
//循环变量data，然后取出每条记录的id
var params = "";
$.each(data, function (i, obj) {
params += "&ids=" + obj.id; //批量参数，后台使用数组获取参数
})
//发ajax请求
$.ajax({
type: "post", //批量删除为post请求
url: "/customer/batdel",
data: params,
success: function (res) {
alert("批量删除:" + res);
table.reload("custom"); //重新加载table
}
})
layer.close(index); //删除弹出窗口
})
批量删除的动态SQL
<delete id="deleteIds">
delete from customer where id in
<foreach collection="array" item="id" open="(" close=")" separator=",">
#{id}
</foreach>
</delete>
搜索
搜索的表单控件需要放置动态数据表最前面
<form action="#" class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label>名称:</label>
<div class="layui-inline">
<input type="text" name="username" autocomplete="off" placeholder="请输入名称"
class="layui-input">
</div>
状态:
<div class="layui-inline">
<select name="state">
<option value="">请选择</option>
<option value="0">无效</option>
<option value="1">有效</option>
</select>
</div>
<button class="layui-btn" lay-submit lay-filter="cusquery">搜索</button>
</div>
</div>
</form>
搜索表单的触发事件
form.on('submit(cusquery)',function(data){
layer.msg(JSON.stringify(data.field));
table.reload('custom', { //重新加载table，发/custom/show请求，并拼接data与分页参数
page: {
curr: 1 //重新从第 1 页开始
},
where: data.field //将所有内容重新加载
});
return false; //提交表单时，不用刷新
})
后端需要增加客户实体对象的参数，并进行动态SQL查询
<select id="selectCustomers" resultType="customer" parameterType="customer">
select * from customer
<where>
<if test="username!=null">
username like concat('%',#{username},'%')
</if>
<if test="state!=null">
and state=#{state}
</if>
</where>
</select>
二、应用模块展示
概述
与客户模块的展示数据类似，按照客户模块的操作来展示应用模块即可
展示数据
后端：创建App的controller，service，dao，安装客户模块的方式传参数，进行动态查询
前端：创建app.html,创建动态数据表格控件，并展示数据
三、删除与修改
删除
根据id进行后端数据的删除操作，与客户模块类似（略）
修改
先按照客户模块的修改来填充数据，然后再进行变更
注意：选择公司名称时，对应的要改变客户ID。不用直接显示并修改客户ID选项
细节：填充的数据的调试，如果为null，可能注入数据有问题
应用管理中，需要公司名和客户ID同时变更，是因为反范式的设计；提升了查询性能；但增加了冗余字段的麻烦，修改比较麻烦
打开弹窗(和客户管理类似)，展示数据成功后，即可从后端带回客户ID和公司名的集合
//打开弹窗，并通过ajax访问客户模块的控制层，得到客户id和公司名
$.ajax({
type:"get",
url:"/customer/tree",
success:function(res){ //res是后端返回的客户集合
for(var i=0;i<res.length;i++){
if(data&&data.cusId==res[i].id){ //判断数据不为null，且客户ID匹配，则选中
var test = "";
test="<option selected value='"+res[i].id+"'>"+res[i].nickname+"</option>"
}else{
test="<option value='"+res[i].id+"'>"+res[i].nickname+"</option>"
}
$("#cusId").append(test); //在select标签里面追加内容
}
form.render(); //表单渲染
}
})
弹出表单控件：
<!-- 修改需要注入的内容 -->
<script type="text/html" id="app-edit-layer">
<form id="app-edit-form" style="width: 80%" class="layui-form" lay-filter="app-edit-form">
<input type="hidden" name="id">
<div class="layui-form-item">
<label class="layui-form-label">公司名</label>
<div class="layui-input-block">
<select id="cusId" name="cusId"> <!--下拉标签 -->
<!-- 以下数据，应该在显示编辑弹出框前，加载进来
<option value='id'>字节跳动</option> -->
</select>
</div>
</div>
...
</script>
在后端，根据cusId得到公司名，并修改
@PostMapping("/update")
public String update(App app){
//根据客户ID，返回客户对象，即可拿到公司名
Customer customer = customerService.selectByCusId(app.getCusId());
app.setCorpName(customer.getNickname()); //填充应用对象的公司名
int res = appService.updateApp(app); //修改数据
System.out.println("修改:"+res);
return res+"";
}
在AppMapper文件中进行动态update修改
<!--注意：修改的判断，最好判断不为null和不为'' -->
<if test="appKey!=null and appKey!=''">
appKey=#{appKey},
</if>
四、添加与批量删除
添加
和编辑功能类似，可以进行封装（客户模块中有类似代码）
只需要将工具栏的配置放到table中，即可在工具栏显示添加和批量删除按钮
注意：公司名也需要从后端带回来
批量删除
和客户模块类似，只需要拼接多个id参数，使用ajax传到后端，并进行批量删除。