一键打卡

一、 创建实体

  • 新建【打卡记录】实体并根据下表新建字段
操作 描述
名称 打卡记录
编码 clockinrecord
父实体
引用接口 自动编码
属性 编码 名称 类型 引用
staff 员工 单选引用 bd.staff.StaffNew
clockintime 打卡时间 日期时间
longitude 经度 数值
latitude 纬度 数值

image.png image.png

二、 创建打卡记录页面

  • 新建【打卡记录】页面

image.png image.png image.png image.png

三、 创建API函数

3.1 新建【插入打卡记录】API函数

  • 进入流程&自动化页面,在【后端】菜单新建一个函数分组,填写编码名称,点击保存。 image.png
  • 选择刚建好的分组,点击【新建】函数,填写名称,写清楚备注,点击确定。 image.png
  • 点击【设计】按钮,进入函数编辑页面。 image.png
  • 将代码复制到编辑器中,并修改红框中的入参内容,点击保存。 image.png
  • 入参——实体url image.png
  • 入参——表单编码:卡片或者列表页面的编码都可以。 image.png

  • 示例代码

let AbstractAPIHandler = require('AbstractAPIHandler');
class MyAPIHandler extends AbstractAPIHandler { 
  execute(request) {
    //获取当前用户的身份信息-----------
    var currentUser = JSON.parse(AppContext()).currentUser; //通过上下文获取当前的用户信息
    var sysId = "diwork";
    var tenantId = currentUser.tenantId;
    var userids = [currentUser.id];
    var result = listOrgAndDeptByUserIds(sysId, tenantId, userids); //获取当前用户的组织和部门信息
    var resultJSON = JSON.parse(result);
    if ("1" == resultJSON.status && resultJSON.data != null) {
      //根据当前用户信息去查询员工表
      var userData = resultJSON.data;
      // 组装入参的json对象(不要传string)
      var json = {
        staff: userData[currentUser.id].id, // 业务系统员工id
        clockintime: request.date,
        longitude: request.res.longitude,
        latitude: request.res.latitude
      };
      // 执行插入语句
      var res = ObjectStore.insert("GT11311AT3.GT11311AT3.clockinrecord", json, "10c2e987List");
      return {
        res
      };
    } else {
      throw new Error("获取员工信息异常");
    }
  }
}
exports({
  "entryPoint": MyAPIHandler
});

3.2 新建【计算距离】前端函数

函数作用:根据两个坐标点的经度、维度计算出两点之间的距离,并转化成米,然后返回。

  • 前端 -> 公共函数中新建【计算距离函数】分组 -> 点击新增 -> 填写名称和备注 -> 确认 -> 设计 image.png
  • 将函数复制到编辑器中,点击保存。 image.png

  • 示例代码

cb.defineInner([], function() {
  var MyExternal = {
    /**
      * 获取两个经纬度之间的距离
      * @param.lat1 第一点的纬度
      * @param.lng1 第一点的经度
      * @param.lat2 第二点的纬度
      * @param.lng2 第二点的经度
      * @returns {Number} 距离(m)
      */
    getDistance: function(params) {
      var radLng1 = radians(params.lng1);
      var radLat1 = radians(params.lat1);
      var radLng2 = radians(params.lng2);
      var radLat2 = radians(params.lat2);

      var a = radLat2 - radLat1;
      var b = radLng2 - radLng1;

      // 通过公式计算两点之间的距离(单位Km)
      var disKm = 2 * Math.asin(Math.sqrt(Math.sin(a / 2) * Math.sin(a / 2) +
        Math.cos(radLat2) * Math.cos(radLat1) * Math.sin(b / 2) * Math.sin(b / 2))) * 6378.137;

      // 将距离转化为米(m)并保留两位小数
      var dis = (disKm * 1000).toFixed(2);
      return dis;
    }
  }
  return MyExternal;
})

/**
  * 将角度转化为弧度
*/
function radians(d) {
  var PI = Math.PI;
  return d * PI / 180.0;
}

四、 创建打卡页面

  • 新建页面 -> 空页面 -> 勾选移动端 -> 下一步 -> 填写基本信息 -> 完成 image.png image.png

  • 进入移动设计器 image.png

  • 如下图所示:添加【流式布局】,将布局方向改为‘从上到下’,将水平/垂直方向对齐均设为‘居中’。 image.png
  • 在流式布局中添加两个【按钮】,将名称分别改为‘一键打卡’、‘打卡记录’,并将按钮大小改为‘大’。 image.png
  • 选择一键打卡按钮,点击样式,如图将上下外边距设为‘1rem’。 image.png

五、 动作绑定

5.1 绑定【打卡记录】按钮动作

  • 选择【打卡记录】按钮,切换动作绑定,点击单击。 image.png
  • 选择‘前端动作’。 image.png
  • 选择‘跳转页面’、‘列表页面’,填写好跳转路径单据号。 image.png
  • 跳转路径单据号:在要跳转的页面的编辑器中,选择层级,选择最外层根目录,在属性中即可看到‘单据编码’。 image.png

5.2 绑定【一键打卡】按钮动作

  • 选择【一键打卡】按钮,切换动作绑定,点击单击,选择‘前端函数’,如下图所示,点击编辑函数,进入函数编辑器。 image.png
  • 将示例代码复制进编辑器,点击保存。 image.png

  • 示例代码

function(event) {
  var viewModel = this;

  mtl.getLocation({
    type: 'wgs84', //默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
    success: function(res) {
      // 打印位置信息
      console.log(JSON.stringify(res));

      // 打卡范围中心点的经纬度
      var centreLng = 116.2362;
      var centreLat = 40.06808;

      cb.requireInner(["/opencomponentsystem/public/GT11311AT3/getdistance"], function(a) {
        var json = {
          lat1: centreLat,
          lng1: centreLng,
          lat2: res.latitude,
          lng2: res.longitude
        };
        // 打卡点到中心点的距离
        var distance = a.getDistance(json);
        console.log("打卡距离:" + distance + "米");

        if (distance > 100) {
          alert("您当前不在打卡范围内");
          return;
        }

        save(res);
      })
    },
    fail(err) {
      console.log(JSON.stringify(err));
      alert(err.message);
    }
  });

  // 将打卡记录表中插入记录
  function save(res) {
    cb.rest.invokeFunction("GT11311AT3.clockInRecord.insertClockInRecord", {
        res: res,
        date: new Date().format("yyyy-MM-dd hh:mm:ss")
      },
      function(err, res) {
        console.log("=============================================================");
        if (typeof err == "undefined" || err == null) {
          console.log(res);
          alert("打卡成功!");
        } else {
          console.log(err);
          alert("打卡失败!");
        }
      })
  }
}

六、 预览测试

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

results matching ""

    No results matching ""