入职申请单-1
一、实现功能描述
填写手机号失去焦点后,校验该用户是否曾经入职,如果已经入职则直接提示,如果该员工为离职状态,则弹出员工信息模态框,选择确定,带入员工信息,选择取消提示手机号已存在
二、功能步骤拆分
编号单 | 能力清单 |
---|---|
1 | 控件值改变后事件 |
2 | 前端函数调用API函数 |
3 | 模态框 |
三、功能实现
3.1、根据手机号查询员工信息API函数
api函数
创建目录
- 创建API函数
let AbstractAPIHandler = require('AbstractAPIHandler');
class MyAPIHandler extends AbstractAPIHandler {
execute(request){
var mobile = request.mobile;
var sql = "select staff_position0521Fk.id,staff_position0521Fk.code,staff_position0521Fk.name from GT10700AT74.GT10700AT74.staff_position0521 t left join staff_position0521Fk t1 on t.staff_position0521Fk=t1.id"
+" where staff_position0521Fk.mobile='"+mobile+"'";
var res = ObjectStore.queryByYonQL(sql);
return {res};
}
}
exports({"entryPoint":MyAPIHandler});
3.2、手机号只改变后事件
手机号改变后,触发事件
手机号新增值改变后函数
3.3、前端函数调用API函数
- 前端请求api函数
function (event) {
var viewModel = this;
cb.rest.invokeFunction("GT10700AT74.entryapply.checkmobile", {mobile:event.params.value},
function(err, res) {
if(err!=null){
cb.utils.alert("查询手机号出错");
}else{
if(res.length!=0){
//TODO:此处要做模态框弹出
console.log(res.res[0]);
}
}
})
}
3.4、模态框
3.4.1、新建一个员工管理模态框
- 创建一个主子表页面
- 取消列表勾选
- 进入页面设计器
- 选择层级-页面模板-打开编辑器
- 添加: "templateType": "modal",如下图
"templateType": "modal",
- 调整弹框大小为1000
- 删除表单头部栏
- 删除表格所有工具栏
- 删除卡片组下一级的容器名称,操作后效果如下图
- 删除底部栏:创建人、创建时间、修改人、修改时间
- 删除底部栏按钮
- 新添加两个按钮
- 修改按钮名称,效果如下图
- 取消按钮添加前端函数
function(event){
var viewModel = this;
var parentViewModel = viewModel.getCache('parentViewModel'); //获取到父model
parentViewModel.setReadOnly(true); //设置页面不允许编辑
parentViewModel.get("btnSaveAndAdd").setDisabled(true); //设置保存并新增按钮不可用
parentViewModel.get("btnSave").setDisabled(true); //设置保存按钮不可用
viewModel.communication({type:'modal',payload:{data:false}});
}
- 【添加】按钮添加前端函数
function (event) {
var viewModel = this;
var parentViewModel = viewModel.getCache('parentViewModel'); //获取到父model
parentViewModel.get("name").setValue(viewModel.get("name").getValue());
parentViewModel.get("gender").setValue(viewModel.get("gender").getValue());
parentViewModel.get("age").setValue(viewModel.get("age").getValue());
parentViewModel.get("province_name").setValue(viewModel.get("province_name").getValue());
parentViewModel.get("province").setValue(viewModel.get("province").getValue());
viewModel.communication({type:'modal',payload:{data:false}});
}
3.4.2、优化手机号值改变事件
function (event) {
var viewModel = this;
var code = viewModel.get("code").getValue();
viewModel.clear(); //清楚数据
viewModel.get("mobile").setValue(event.params.value);
viewModel.get("code").setValue(code);
cb.rest.invokeFunction("GT10700AT74.entryapply.checkmobile", {mobile:event.params.value},
function(err, res) {
if(err!=null){
cb.utils.alert("查询手机号出错");
}else{
if(res.length!=0){
//TODO:此处要做模态框弹出
console.log(res.res[0]);
let data = {
billtype: 'Voucher',// 单据类型
billno: '14a794cf',// 单据号
params: {
mode: 'edit', // (编辑态edit、新增态add)
//传参
id:res.res[0].staff_position0521Fk_id
},
};
//打开一个单据,并在当前页面显示
cb.loader.runCommandLine('bill', data, viewModel);
}
}
})
}
四、测试
- 输入手机号校验是否已存在,如果存在会弹出模态框.
- 点击取消.页面会处于禁用状态
- 再试一次,点击添加,会带入用户信息
4.1、弹出框按钮位置需右侧显示
通过设置JS控制样式实现
弹框页面初始化,加载一个样式
- 点击配置填写以下函数
function (event) {
var viewModel = this;
loadStyle(".popbottom {width: 900px;}");
function loadStyle(params){
var headobj=document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
headobj.appendChild(style);
style.sheet.insertRule(params, 0);
}
}
- 控件绑定样式
- 验证