入职申请单-1

一、实现功能描述

填写手机号失去焦点后,校验该用户是否曾经入职,如果已经入职则直接提示,如果该员工为离职状态,则弹出员工信息模态框,选择确定,带入员工信息,选择取消提示手机号已存在

二、功能步骤拆分

编号单 能力清单
1 控件值改变后事件
2 前端函数调用API函数
3 模态框

三、功能实现

3.1、根据手机号查询员工信息API函数

  • api函数

  • 创建目录

图3

  • 创建API函数

图4


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、手机号只改变后事件

  • 手机号改变后,触发事件

  • 手机号新增值改变后函数

图1 图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、新建一个员工管理模态框

  • 创建一个主子表页面

图5

  • 取消列表勾选

图6

  • 进入页面设计器

图7

  • 选择层级-页面模板-打开编辑器

图8

  • 添加: "templateType": "modal",如下图

  "templateType": "modal",

图9

  • 调整弹框大小为1000

图10

  • 删除表单头部栏

图11

  • 删除表格所有工具栏

图12 图13

  • 删除卡片组下一级的容器名称,操作后效果如下图

图14

  • 删除底部栏:创建人、创建时间、修改人、修改时间

图15 图16

  • 删除底部栏按钮

图17

  • 新添加两个按钮

图18

  • 修改按钮名称,效果如下图

图19 图20

  • 取消按钮添加前端函数

图21 图22


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}});
}

图23

  • 【添加】按钮添加前端函数

图24


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}});
}

图25

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);
      }
    }
  })
}

四、测试

  • 输入手机号校验是否已存在,如果存在会弹出模态框.

图26 图27

  • 点击取消.页面会处于禁用状态

图28

  • 再试一次,点击添加,会带入用户信息

图29 图30

4.1、弹出框按钮位置需右侧显示

  • 通过设置JS控制样式实现

  • 弹框页面初始化,加载一个样式

图30 图30

  • 点击配置填写以下函数

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);
  }
}

图33

  • 控件绑定样式

图33

  • 验证

图35

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:21

results matching ""

    No results matching ""