話不多說，直接上代碼：
本文主要是使用https://baidu.gitee.io/amis/examples/crud/table?page=1和https://baidu.gitee.io/amis/examples/crud/merge-cell做出來的。
table的新增功能，我並沒有在示例中提及，讀者可自行嘗試並實現。
<!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。
具體用法請搜索官方文檔。