一键打卡

一、 创建实体

• 新建【打卡记录】实体并根据下表新建字段

二、 创建打卡记录页面

• 新建【打卡记录】页面

三、 创建API函数

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

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

• 入参——表单编码：卡片或者列表页面的编码都可以。

• 示例代码

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 新建【计算距离】前端函数

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

• 前端 -> 公共函数中新建【计算距离函数】分组 -> 点击新增 -> 填写名称和备注 -> 确认 -> 设计

• 将函数复制到编辑器中，点击保存。

• 示例代码

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

四、 创建打卡页面

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

• 进入移动设计器

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

五、 动作绑定

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

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

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

• 选择【一键打卡】按钮，切换动作绑定，点击单击，选择‘前端函数’，如下图所示，点击编辑函数，进入函数编辑器。

• 将示例代码复制进编辑器，点击保存。

• 示例代码

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("打卡失败！");
        }
      })
  }
}

六、 预览测试