话不多说，直接上代码：
本文主要是使用https://baidu.gitee.io/amis/examples/crud/table?page=1和https://baidu.gitee.io/amis/examples/crud/merge-cell做出来的。
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" /> <title>审批事项</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!-- <link rel="stylesheet" href="../css/amis/sdk.css" />--> <link rel="stylesheet" href="https://houtai.baidu.com/v2/csssdk"/> <style> html, body, .app-wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="root" class="app-wrapper"></div> <!--<script src="../js/amis/sdk.js"></script>--> <!--<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>--> <script src="https://houtai.baidu.com/v2/jssdk"></script> <script type="text/javascript"> //这里是我的判断是否登录的逻辑，与amis无关 // //初始化页面判断用户是否登录 // $.ajax({ // url:"/restapi/bpm/initUserData", // ajax请求要请求的地址 // async:false, // type:"get", // 请求的类型 get post // // data:"", // 请求要发送的数据 常在post请求中使用，get请求只需要拼接请求的url就可以 // success:function (result) { // // 请求成功之后要执行的方法 // // data 接收请求成功之后的返回值 // console.log(result); // if(result.status!=0){ // // var url = data.data.url; // // window.location.href = data.data.url; // document.write(result); // } // }, // }); (function () { let amis = amisRequire(‘amis/embed‘); let amisScoped = amis.embed(‘#root‘, { "$schema": "http://amis.baidu.com/v2/schemas/page.json#", "type": "page", "title": "尊敬的 ${lastname}，有${count}条工时需要您的审批", // "initApi": { // "url": "/restapi/bpm/initUserData" // }, "toolbar": [ { "type": "link", "href": "/ViewHistoryData.html", "body": "返回工时管理", "className": "v-middle" } ], "body": [ { "type": "crud", "mode": "table", "data": { "items": [ { // 每一行的数据 "id": 1, "taskNumber": "138223", "fromUserDisplayName": "张某某", "weekStartDate":"2020-09-14", "weekEndDate":"2020-09-20", "state":"COMPLETED", "satteMeaning":"已批准", "weekSummary":[{"projectName":"XXX项目","teType":"正常","weekSum":20},{"projectName":"XXX项目","teType":"加班","weekSum":3}], "timecardDetails":[ {"projectName":"XX项目","fbsName":"任务A","teStartTime":"2020-09-16","teType":"正常","teMeasureLabor":"8"}, {"projectName":"XX项目","fbsName":"任务B","teStartTime":"2020-09-17","teType":"正常","teMeasureLabor":"8"}, {"projectName":"XX项目","fbsName":"任务D","teStartTime":"2020-09-18","teType":"正常","teMeasureLabor":"8"}, {"projectName":"XX项目","fbsName":"任务C","teStartTime":"2020-09-16","teType":"加班","teMeasureLabor":"3"},] }, { // 每一行的数据 "id": 1, "taskNumber": "13822334", "fromUserDisplayName": "王某某", "weekStartDate":"2020-09-14", "weekEndDate":"2020-09-20", "state":"ASSIGNED", "satteMeaning":"待审批", "weekSummary":[{"projectName":"XXX项目1","teType":"正常","weekSum":15},{"projectName":"XXX项目2","teType":"加班","weekSum":3}], "timecardDetails":[ {"projectName":"XX项目","fbsName":"任务1","teStartTime":"2020-09-16","teType":"正常","teMeasureLabor":"7"}, {"projectName":"XX项目","fbsName":"任务2","teStartTime":"2020-09-17","teType":"正常","teMeasureLabor":"8"}, {"projectName":"XX项目","fbsName":"任务1","teStartTime":"2020-09-16","teType":"加班","teMeasureLabor":"3"},] } ], "count": 200 // 注意！！！这里不是当前请求返回的 items 的长度，而是数据库中一共有多少条数据，用于生成分页组件 // 如果你不想要分页，把这个不返回就可以了。 }, "name": "bpmtimecardtable", // "reload": "none", "draggable": true, //当切分页的时候，是否自动跳顶部。 "autoJumpToTopOnPagerChange": true, "itemCheckableOn": "data.state === ‘ASSIGNED‘", //方案1：对后台API设置默认参数为空值时，仅查询待批任务 // "api": "/restapi/bpm/tasks", //方案2,默认查询时直接赋值，actionType=reload时传入的相同参数会覆盖掉该参数 // "api": "/restapi/bpm/tasks?view=ASSIGNED", // "syncLocation": false, "primaryField": "taskNumber", //跨页面批量操作 // "keepItemSelectionOnPageChange": true, //如果配置了一次性加载，API中就不要使用page和perPage参数了 // "loadDataOnce": true, // "loadDataOnceFetchOnFilter": false, //一次性加载，设置搜索条件 // "source": "${rows | filter:taskNumber,fromUserDisplayName,weekStartDate:match:keywords}", "filter": { "title": "查询", "submitText": "", "controls": [ { "type": "text", "name": "keywords", "placeholder": "支持模糊搜索工时填写人员，开始日期", "addOn": { "label": "搜索", "type": "submit" } } ] }, "bulkActions": [ { "label": "批量审批通过", "actionType": "ajax", "api": { "method": "post", "url": "/restapi/bpm/postApprovalTask", "data":{ "id": "${ids|raw}", "action": "APPROVE" } }, "confirmText": "确定要批量审批通过?" }, { "label": "批量拒绝", "actionType": "ajax", "api": { "method": "post", "url": "/restapi/bpm/postApprovalTask", "data":{ "id": "${ids|raw}", "action": "REJECT" } }, "confirmText": "确定要批量拒绝?" } ], "filterTogglable": true, // "filterDefaultVisible": false, "headerToolbar": [ "filter-toggler", "bulkActions", { "type": "action", "actionType": "reload", "label": "待审批工时${assignedCount}条", // "reload": "none", "target": "bpmtimecardtable?view=ASSIGNED" }, { "type": "action", "actionType": "reload", "label": "已审批工时${completedCount}条", // "reload": "none", "target": "bpmtimecardtable?view=COMPLETED" }, { "type": "action", "actionType": "reload", "label": "所有工时审批${allCount}条", "target": "bpmtimecardtable?view=ALL" // "actionType": "ajax", // "api": { // "method": "get", // "url": "/restapi/bpm/tasks?view=ALL" // }, // "reload": "bpmtimecardtable" // "reload": "none", }, { "type": "columns-toggler", "align": "right" }, { "type": "drag-toggler", "align": "right" }, { "type": "pagination", "align": "right" } ], "footerToolbar": [ "statistics", "switch-per-page", "pagination" ], "columns": [ { "name": "taskNumber", "label": "审批编号", "width": 20, "sortable": true, "type": "text", "toggled": true, // "remark": "Bla bla Bla" }, // { // "name": "title", // "label": "标题", // "sortable": true, // // "searchable": true, // "type": "text", // "toggled": true // }, { "name": "fromUserDisplayName", "label": "工时填写人员", "type": "text" }, { "name": "satteMeaning", "label": "状态", "type": "text" }, { "name": "weekStartDate", "label": "开始日期", "type": "text" }, { "name": "weekEndDate", "label": "结束日期", "type": "text" }, { "name": "weekSummary", "label": "工时情况汇总", "type": "table", "combineNum": 1, "columns": [ { "name": "projectName" }, { "name": "teType", }, { "name": "weekSum" } ] }, { "type": "operation", "label": "操作", // "width": 100, "buttons": [ { "type": "button", "icon": "fa fa-eye", "actionType": "dialog", "tooltip": "查看详情", "dialog": { "title": "查看详情", "body": { "type": "form", "controls": [ { "type": "static", "name": "fromUserDisplayName", "label": "工时填写人员" }, { "type": "divider" }, { "type": "static", "name": "weekStartDate", "label": "开始日期" }, { "type": "divider" }, { "type": "static", "name": "weekEndDate", "label": "结束日期" }, { "type": "divider" }, { "name": "timecardDetails", "label": "工时情况明细", "type": "table", "columns": [ // { // "name": "projectNumber" // }, { "name": "projectName", "label": "项目名称" }, { "name": "fbsName", "label": "任务" }, { "name": "teStartTime", "label": "工时日期" }, { "name": "teType", "label": "类型" }, { "name": "teMeasureLabor", "label": "工时时长" } // , // { // "name": "teUnitOfMeasure", // "label": "单位" // } ] } ] }, "actions": [ { "type": "button", "visibleOn": "data.state === ‘ASSIGNED‘", // "icon": "fa fa-pencil", "label": "批准", "actionType": "ajax", "tooltip": "批准", "confirmText": "您确认要审批通过该工时?", "api": { "method": "post", "url": "/restapi/bpm/postApprovalTask", "data": { "id": "${taskNumber}", "action": "APPROVE" } } }, { "type": "button", "visibleOn": "data.state === ‘ASSIGNED‘", // "icon": "fa fa-times text-danger", "label": "拒绝", "actionType": "ajax", "tooltip": "拒绝", "confirmText": "您确认要拒绝?", "api": { "method": "post", "url": "/restapi/bpm/postApprovalTask", "data": { "id": "${taskNumber}", "action": "REJECT" } } } ] } }, { "type": "button", "visibleOn": "data.state === ‘ASSIGNED‘", // "icon": "fa fa-pencil", "label": "批准", "actionType": "ajax", "tooltip": "批准", "confirmText": "您确认要审批通过该工时?", "api": { "method": "post", "url": "/restapi/bpm/postApprovalTask", "data": { "id": "${taskNumber}", "action": "APPROVE" } } }, { "type": "button", "visibleOn": "data.state === ‘ASSIGNED‘", // "icon": "fa fa-times text-danger", "label": "拒绝", "actionType": "ajax", "tooltip": "拒绝", "confirmText": "您确认要拒绝?", "api": { "method": "post", "url": "/restapi/bpm/postApprovalTask", "data": { "id": "${taskNumber}", "action": "REJECT" } } } ], "toggled": true } ] }] }); })(); </script> </body> </html>
备注：
1.本示例中为了代码能直接运行，采取了本地data的方式，请读者自行实现crud中自定义的api:/restapi/bpm/tasks, api没有指定method，默认为get方法。
2.各位点击页面分页，待审批工时功能后，浏览器地址中会多出一些参数，这部分参数便是/restapi/bpm/tasks对应的参数，需各位实现，尤其是page和perPage需要做空判断，另外，syncLocation配置会影响地址栏数据对于数据链的同步功能，请各位查阅官方文档中syncLocation关于此配置的说明。
3.为了实现点击独立的自定义button，所有工时审批，刷新表格数据，翻阅官方文档，找到了这个好东西：
{ "type": "action", "actionType": "reload", "label": "所有工时审批${allCount}条", "target": "bpmtimecardtable?view=ALL" // "actionType": "ajax", // "api": { // "method": "get", // "url": "/restapi/bpm/tasks?view=ALL" // }, // "reload": "bpmtimecardtable" // "reload": "none", }
请注意，actionType：reload搭配target使用，和actionType:ajax搭配reload使用，是有区别的。
简单的说，target的方式，是将target对应的参数，传递给name=bpmtimecardtable的控件；
而reload则是，在执行了ajax方法之后，重载bpmtimecardtable，自动执行bpmtimecardtable默认的api（或许此处也能传参？没试过。）
4.表格中的翻页等操作，默认执行crud中指定的api:/restapi/bpm/tasks,并将page, perPage等参数传递
5.如果配置了一次性加载，api中就不要使用page和perPage参数了, "loadDataOnce": true,具体使用方法请看对应文档，一次性加载，设置搜索条件应搭配source使用，"source": "${rows | filter:taskNumber,fromUserDisplayName,weekStartDate:match:keywords}"
个人建议：尽量使用分页的查询方式。
6.表达式是一个很牛的东西，文档中写的简明扼要 https://baidu.gitee.io/amis/docs/concepts/expression
本例子中使用如下："itemCheckableOn": "data.state === ‘ASSIGNED‘", 只有当前数据域中的state为ASSIGNED时，可勾选。
行上的批准及拒绝按钮，以及查看详情的批准及拒绝按钮的显示 ，一样的控制逻辑 "visibleOn": "data.state === ‘ASSIGNED‘"
7."primaryField": "taskNumber"， 本示例对应的行data中，同时存在id和自定义primaryField字段，在批量操作的参数传递，"id": "${ids|raw}"，会发现，传给后台的是 "id":["13822334"]，而不会直接传id。
具体用法请搜索官方文档。
原文：https://www.cnblogs.com/huanghongbo/p/13702770.html