开发者中心包含此范例模板（一键完成批量审批），请前往开发者中心下载学习。

概要

本次要尝试的是使用更新记录状态的API来一键批量更新多条记录的状态。

准备

大概的脚本是筛选状态为“申请中”、执行者为“登录用户”的记录，然后进行批量批准。

对于应用，无特别要求。本次使用的是以下“交通费申请”应用。

筛选设置如下。 

这样准备就完成了。

JavaScript 自定义

以下是本次最终做成的整个代码。其实处理特别的简单。
各位把代码放到自己环境的时候，记得把第11行XXXX的地方改成您自身环境中的列表ID。

※列表ID可在event对象或URL中查看。view之后的编号就是列表ID。
例：https://sample.cybozu.cn/k/13327/?view=5341206

[approval-button.js]

/*
 * 一键完成批量审批的范例代码
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
*/
(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    const appId = kintone.app.getId();
    if (event.viewId !== xxxx) {
      return;
    }
    if ($('.header-contents').length !== 0) {
      return;
    }
    const el = kintone.app.getHeaderSpaceElement();
    const headerDiv = $('', {
      class: 'header-contents'
    });
      // make a button for approval.
    const balusButton = $('', {
      class: 'approval-button'
    })
      .html('批量审批！')
      .click(() => {
        if (event.records.length > 0) {
          window.swal({
            title: '定要批准此列表的所有申请吗？',
            text: '将批准所有申请',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: '确定！',
            cancelButtonText: '还是算了',
            closeOnConfirm: false},
          () => {
            const records = [];
            for (let h = 0; h < event.records.length; h++) {
              const obj = {};
              obj.id = event.records[h].$id.value;
              obj.action = '审批'; // 指定在流程管理中设置的动作名称
              records.push(obj);
            }
            const requestObj = {
              app: appId,
              records: records
            };
            kintone.api(kintone.api.url('/k/v1/records/status', true), 'PUT', requestObj, () => {
              window.swal({title: '批量审批成功！',
                text: '申请已完成审批',
                // eslint-disable-next-line max-nested-callbacks
                type: 'success'}, () => {
                location.reload();
              });
            });
          });
        } else {
          window.swal({
            title: '没有申请中的记录',
            type: 'warning'});
        }
      });
    headerDiv.append(balusButton);
    headerDiv.append($('
'));
    headerDiv.appendTo(el);
  });
})();

处理的流程如下。

1. 通过列表ID来控制是否显示按钮。如果要在所有列表中显示的话就不需要了。(第11行)

2. 用jQuery创建按钮。后面要给它设置风格，因此要定义一个类名。(第22行)

3. 使用Cybozu CDN中的SweetAlert 1.x，弹出确认对话框。(第28行)

4. 使用更新记录状态的API对页面上显示的所有记录发送“批准请求”。(第49行)

5. 创建的按钮放在记录列表菜单下方的空白处。参考。(第64行)

CSS 自定义

以下CSS定义了对齐方式。

[approval-button-design.css]

.header-contents{  
  border: 1px dashed #D8D8D8;
  text-align: center;
}

上传JavaScript / CSS 文件

除了以上代码 [approval-button.js]、[approval-button-design.css]之外，还要读入Cybozu CDN上提供的jQuery、SweetAlert。

JavaScript

• jQuery v3.6.1
  

  • https://js.cybozu.cn/jquery/3.6.1/jquery.min.js

• SweetAlert v1.1.3

  • https://js.cybozu.cn/sweetalert/v1.1.3/sweetalert.min.js

• 通过上传文件

  • approval-button.js

CSS

• SweetAlert v1.1.3

  • https://js.cybozu.cn/sweetalert/v1.1.3/sweetalert.css

• 通过上传文件

  • approval-button-design.css

JavaScript和CSS应用到环境之后，记录列表页面显示如下。

确认动作

接下来我们来试试是否可以正常运行。
执行的结果如下。

实际上，列表上显示的记录已经全部被批准了。

※状态栏中，根据不同的状态显示不同的颜色，这个是因为使用了“条件格式插件”。如果只是范例代码“approval-button.js”，不会变颜色。这点请注意。

注意事项

• 如果列表因为没有设置筛选而显示“申請中”之外的记录，会报错。

总结

一键批量申请就介绍到这里。
批量申请比较恐怖，有些用户希望通过勾选来选择需要批准的记录，您可以参考这里博客（仅提供日文）。

另外，实际使用过程中，需要对可使用批准按钮的用户进行控制。
可以使用导出用户API来进行控制，请务必自己挑战一下。