カスタムページ実装カンバンビュー

いくつかのタスク管理や生産製造のシーンでは、通常、1つのタスクや1つの注文に複数のステータスが存在し、その場合、ステータスに基づいてまとめて展示する看板があると各状態のタスク数や注文数を見ることができ、適切な詳細を見ることができ、適切なカスタム詳細ページとカスタムボタンの機能を組み合わせてタイムリーに処理し、タイムリーに更新することができるそのため、私たちのタスクや注文の状態を可視化、効率的に管理し、この例ではタスク管理の観点から、どのように機能を実現するかを説明します。

前提条件

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• ページ設定のカスタマイズ
• データ管理ページの生成
• プラットフォームインタフェースが必要です (ページデータソースは直接呼び出すことができます)
• カスタム詳細ページ
• カスタムボタン
• 権限設定 (新しい権限グループ構成)

効果を実現する

実装手順

通常のフォームページの作成

通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。

キャンバス領域で次のコンポーネントをドラッグします。

• 単一行テキスト: タスクタイトルに名前を付けます
• 複数行のテキスト: タスクの説明に名前を付けます
• メンバー: タスク責任者と命名
• 日付: 作成時刻の名前を付けます
• ラジオ: タスク優先度という名前
• ラジオ: タスクステータスの名前を付けます
• 日付: 完了時間と名前を付けます
• 複数行のテキスト: キャンセル理由の名前を付けます
• 単一行テキスト: タスク担当者名と命名
• 単一行テキスト: タスク責任者部門と命名

「タスクステータス」フィールドに関連フォームオプションを設定します。

システムフィールドを設定し、グループをドラッグして、「タスク担当者名」「タスク担当者部門」フィールドをグループに入れ、グループを非表示にすればよい。

タスク担当者の名前は式の編集を選択し、次の図に示す式を設定するか、式のソースコードを直接コピーして、フィールドの変更に注意してください。

{"text":"USERFIELD(​任务负责人​,\"name\")","marks":[{"from":{"line":0,"ch":10,"sticky":null},"to":{"line":0,"ch":17,"sticky":null},"value":"employeeField_lxy408q7","invalid":false}],"isCmData":true}

タスク責任者部門は式編集を選択し、次の図に示す式を配置するか、式のソースコードを直接コピーして、フィールドの変更に注意してください。

{"text":"DEPTNAME(​任务负责人​)","marks":[{"from":{"line":0,"ch":9,"sticky":null},"to":{"line":0,"ch":16,"sticky":null},"value":"employeeField_lxy408q7","invalid":false}],"isCmData":true}

フォームを保存します。

カスタムボタンの設定

カスタム詳細ページの設定

追加して適切な場所にドラッグした後、「公開」をクリックします。

これにより、データの詳細ページにカスタムボタンが表示されます。

フォーム権限の設定

私たちはすべてのデータを全員に見せる権限を設定しなければならないが、自分が提出したデータを編集、削除するしかない。もちろん、自分の状況に応じて権限を設定することもできる。

次の権限を設定します。

データ管理ページの構成

テーブルビューを新規作成します。

テーブルビュー名とデータフィルタ条件を設定します。

カスタムボタンを設定し、適切な位置にドラッグします。

タスクビューの下にカスタムボタンが表示されます。

タスク看板の設定

注意:この例では、当月のデータをデフォルトで表示し、状況に応じてデフォルトの時間範囲を調整できます。

カスタムページの作成

完全な構成ソースコード:

{"type":"nodeSchema","componentsMap":{},"componentsTree":[{"componentName":"Div","props":{"useFieldIdAsDomId":true,"width":"","customClassName":"","className":"div_lxwoh1b4","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  flex-direction: column;\n}\n","fieldId":"div_lxwogc3v","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1b2","behavior":"NORMAL","__style__":":root {\n  border-bottom: 1px solid #f1f2f3;\n  background-color: #fff;\n}\n","fieldId":"div_lxwogc3w","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bu","behavior":"NORMAL","__style__":":root {\n  display: block;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 8px 0;\n}\n\n:root .deep-filter-form {\n  border-bottom: none;\n}\n\n@media screen and (max-width: 1200px){\n  :root {\n    padding: 8px 16px;\n  }\n}\n","fieldId":"div_lxwogc4r","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Filter2","props":{"size":"medium","labelAlign":"top","rowColumn":4,"showTag":true,"createForm":true,"onSubmit":{"type":"JSExpression","value":"this.utils.legaoBuiltin.execEventFlow.bind(this, [this.onSubmit])","events":[{"name":"onSubmit","id":"onSubmit","params":{},"type":"actionRef","uuid":"1719473581715_3"}]},"className":"filter2_lxwoh1bw","onReset":{"type":"JSExpression","value":"this.utils.legaoBuiltin.execEventFlow.bind(this, [this.onReset])","events":[{"name":"onReset","id":"onReset","params":{},"type":"actionRef","uuid":"1719473585652_6"}]},"config":[{"title":{"use":"zh_CN","en_US":"TextField","zh_CN":"任务标题","type":"i18n"},"id":"node_oclxwog39b1t","fieldId":"textField_krk2pdba","componentName":"TextField","isAdvanced":false,"colspan":1},{"title":{"en_US":"Employee Field","use":"zh_CN","zh_CN":"任务负责人","type":"i18n"},"id":"node_oclxy3ze9u1","fieldId":"employeeField_lxy4ekv2","componentName":"EmployeeField"},{"title":{"en_US":"CascadeDateField","use":"zh_CN","zh_CN":"创建时间","type":"i18n"},"id":"node_oclxwog39b1q","fieldId":"cascadeDateField_lxwogc53","componentName":"CascadeDateField"}],"__style__":":root {\n  display: block;\n}","fieldId":"filter_lxwogc50","labelColSpan":4,"events":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"TextField","props":{"labelTipsTypes":"none","__useMediator":"value","hasClear":true,"validationType":"text","labelTipsIcon":"","linkage":"","__gridSpan":1,"autoFocus":false,"tips":{"en_US":"","zh_CN":"","type":"i18n"},"trim":true,"valueType":"custom","labelTextAlign":"left","placeholder":{"use":"zh_CN","en_US":"Please enter","zh_CN":"请输入","type":"i18n"},"state":"","behavior":"NORMAL","value":{"en_US":"","zh_CN":"","type":"i18n"},"addonBefore":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"hasLimitHint":false,"validation":[],"__style__":{},"cutString":false,"fieldId":"textField_krk2pdba","autoHeight":false,"htmlType":"input","visibility":["PC","MOBILE"],"dataEntryMode":false,"submittable":"DEFAULT","enableI18nInput":false,"labelColOffset":0,"label":{"use":"zh_CN","en_US":"TextField","zh_CN":"任务标题","type":"i18n"},"__category__":"form","rows":4,"labelColSpan":4,"wrapperColSpan":0,"addonAfter":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"scanCode":{"enabled":false,"type":"all","editable":true},"wrapperColOffset":0,"complexValue":{"complexType":"custom","formula":"","value":{"en_US":"","zh_CN":"","type":"i18n"}},"size":"medium","labelAlign":"top","variable":"","formula":"","maxLength":200,"labelTipsText":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"events":{"ignored":true},"onChange":{"ignored":true},"onFocus":{"ignored":true},"onBlur":{"ignored":true},"onPaste":{"ignored":true},"onKeyDown":{"ignored":true},"onPressEnter":{"ignored":true},"onScanCodeSuccess":{"ignored":true},"onScanCodeError":{"ignored":true},"labelTips":""},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"EmployeeField","props":{"labelTipsTypes":"none","closeOnSelect":false,"__useMediator":"value","hasClear":true,"labelTipsIcon":"","fetchDataOnMount":true,"tips":{"en_US":"","zh_CN":"","type":"i18n"},"showJobDesc":true,"labelTextAlign":"right","showEmplId":false,"placeholder":{"en_US":"Please Select","use":"zh_CN","zh_CN":"请选择","type":"i18n"},"behavior":"NORMAL","value":[],"validation":[],"startWithDepartmentId":"SELF","fieldId":"employeeField_lxy4ekv2","emplIdInLabel":true,"dataEntryMode":false,"dataType":"url","multiple":true,"labelColOffset":0,"label":{"en_US":"Employee Field","use":"zh_CN","zh_CN":"任务负责人","type":"i18n"},"__category__":"form","labelColSpan":4,"wrapperColSpan":0,"wrapperColOffset":0,"size":"medium","labelAlign":"top","showDeptDesc":true,"showAvater":true,"showSub":false,"labelTipsText":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"dataSource":[],"events":{"ignored":true},"onChange":{"ignored":true},"onSearch":{"ignored":true},"labelTips":"","url":"","subUrl":""},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"CascadeDateField","props":{"labelTipsTypes":"none","__useMediator":"value","ranges":{"name":"quickRanges","id":"quickRanges","type":"actionRef","params":{}},"hasClear":false,"labelTipsIcon":"","tips":{"en_US":"","zh_CN":"","type":"i18n"},"labelTextAlign":"right","placeholder":{"en_US":"please select","use":"zh_CN","zh_CN":"请选择","type":"i18n"},"behavior":"NORMAL","resetTime":false,"value":{"start":{"type":"JSExpression","value":"state.boardSettings.defaultTime[0]"},"end":{"type":"JSExpression","value":"state.boardSettings.defaultTime[1]"}},"validation":[],"__style__":{},"fieldId":"cascadeDateField_lxwogc53","dataEntryMode":false,"disabledDate":false,"format":"YYYY-MM-DD","labelColOffset":0,"label":{"en_US":"CascadeDateField","use":"zh_CN","zh_CN":"创建时间","type":"i18n"},"__category__":"form","labelColSpan":4,"wrapperColSpan":0,"wrapperColOffset":0,"size":"medium","labelAlign":"top","returnType":"timestamp","labelTipsText":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"events":{"ignored":true},"onChange":{"ignored":true},"onOk":{"ignored":true},"onVisibleChange":{"ignored":true},"labelTips":""},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]}]},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bk","behavior":"NORMAL","__style__":":root {\n  flex: 1;\n  padding: 16px;\n  overflow: auto;\n}\n\n@media screen and (max-width: 480px){\n  :root {\n    padding: 12px;\n  }\n}\n","fieldId":"div_lxwogc4m","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bp","behavior":"NORMAL","__style__":":root {\n  max-width: 1200px;\n  margin: 0 auto;\n  height: 100%;\n}\n","fieldId":"div_lxwogc4o","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1b3","behavior":"NORMAL","__style__":":root {\n  height: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow: auto;\n  padding-bottom: 16px;\n}\n\n:root::-webkit-scrollbar {\n  height: 10px;\n  background: transparent;\n}\n\n:root::-webkit-scrollbar-track:hover {\n  background: #f1f2f3;\n}\n\n:root::-webkit-scrollbar-thumb {\n  background-color: #c3c7ca;\n  border-radius: 6px;\n  border: 2px solid transparent;\n  background-clip: padding-box;\n}\n\n:root::-webkit-scrollbar-thumb:hover {\n  background: #a9aeb3;\n}\n\n:root::-webkit-scrollbar-corner {\n  background-color: transparent;\n}\n\n@media screen and (max-width: 480px){\n  :root {\n    padding-bottom: 12px;\n  }\n}\n","fieldId":"div_lxwogc3x","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":{"type":"JSExpression","value":"!state.loading && state.boardData.totalCount","mock":true},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1b5","behavior":"NORMAL","__style__":":root {\n  width: 340px;\n  border-radius: 8px;\n  background-color: #fff;\n  display: flex;\n  flex-direction: column;\n  margin-right: 16px;\n  flex-shrink: 0;\n  word-break: break-word;\n}\n\n:root:last-child {\n  margin-right: 0;\n}\n\n@media screen and (max-width: 480px){\n  :root {\n    width: 310px;\n    margin-right: 12px;\n  }\n}","fieldId":"div_lxwogc3y","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loop":{"type":"JSExpression","value":"Object.keys(state.boardData.data || {})","mock":[]},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","className":"text_lxwoh1bg","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"type":"JSExpression","value":"`${item}（${((state.boardData.data || {})[item] || []).length}）`","mock":{"en_US":"Tips content","use":"zh_CN","zh_CN":"待处理 23","type":"i18n"}},"__style__":":root {\n  font-weight: 700;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 16px;\n}\n\n@media screen and (max-width: 480px){\n  :root {\n    margin: 12px;\n  }\n}\n","fieldId":"text_lxwogc4e","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bh","behavior":"NORMAL","__style__":":root {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 16px 16px 16px;\n}\n\n:root::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n  background: transparent;\n}\n\n:root::-webkit-scrollbar-track:hover {\n  background: #f1f2f3;\n}\n\n:root::-webkit-scrollbar-thumb {\n  background-color: #c3c7ca;\n  border-radius: 6px;\n  border: 2px solid transparent;\n  background-clip: padding-box;\n}\n\n:root::-webkit-scrollbar-thumb:hover {\n  background: #a9aeb3;\n}\n\n:root::-webkit-scrollbar-corner {\n  background-color: transparent;\n}\n\n@media screen and (max-width: 480px){\n  :root {\n    padding: 0 12px 12px 12px;\n  }\n}\n","fieldId":"div_lxwogc4f","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"onClick":{"type":"JSExpression","value":"this.utils.legaoBuiltin.execEventFlow.bind(this, [this.onClickDetail])","events":[{"name":"onClickDetail","id":"onClickDetail","params":{},"type":"actionRef","uuid":"1719470282944_0"}]},"width":"","customClassName":"","className":"div_lxwoh1bj","behavior":"NORMAL","__style__":":root {\n  padding: 16px;\n  border-radius: 6px;\n  border: 1px solid #f2f3f5;\n  margin-bottom: 8px;\n  cursor: pointer;\n}\n\n@media screen and (max-width: 480px){\n  :root {\n    padding: 12px;\n  }\n}\n\n:root:hover {\n  border-color: #0089FF;\n}\n\n:root:last-child {\n  margin-bottom: 0;\n}","fieldId":"div_lxwogc4g","height":"","events":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loop":{"type":"JSExpression","value":"(state.boardData.data || {})[item] || []","mock":[]},"loopArgs":["_item","_index"],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Text","props":{"maxLine":0,"showTitle":true,"contentPaddingMobile":"0","className":"text_lxwoh1bx","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"type":"JSExpression","value":"_item.textField_lxy408q5","mock":{"en_US":"Tips content","use":"zh_CN","zh_CN":"任务标题","type":"i18n"}},"__style__":":root {\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 20px;\n  margin-bottom: 8px;\n}\n","fieldId":"text_lxwogc4p","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":0,"showTitle":true,"contentPaddingMobile":"0","className":"text_lxwoh1by","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"type":"JSExpression","value":"_item.textareaField_lxy408q6","mock":{"en_US":"Tips content","use":"zh_CN","zh_CN":"任务描述","type":"i18n"}},"__style__":":root {\n  color: #a2a3a5;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-line-clamp: 4;\n  margin-bottom: 8px;\n}\n","fieldId":"text_lxwogc4q","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1c9","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  color: #a2a3a5;\n  margin-bottom: 4px;\n}\n","fieldId":"div_lxwogc5l","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Icon","props":{"size":"small","className":"icon_lxwoh1c3","type":{"useType":true,"baseType":{"type":"JSExpression","value":"'bumen'","mock":"account"},"iconfontSymbol":"","otherType":"smile"},"__style__":":root {\n  margin-right: 4px;\n}\n","fieldId":"icon_lxwogc5h"},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","className":"text_lxwoh1c4","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"type":"JSExpression","value":"_item.textField_lxy408qh","mock":{"en_US":"Tips content","use":"zh_CN","zh_CN":"任务负责人部门","type":"i18n"}},"__style__":":root {\n  \n}\n","fieldId":"text_lxwogc5f","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1ca","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  color: #a2a3a5;\n  margin-bottom: 8px;\n}\n","fieldId":"div_lxwogc5m","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Icon","props":{"size":"small","className":"icon_lxwoh1c6","type":{"useType":true,"baseType":{"type":"JSExpression","value":"'clock'","mock":"account"},"iconfontSymbol":"","otherType":"smile"},"__style__":":root {\n  margin-right: 4px;\n}\n","fieldId":"icon_lxwogc5i"},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","className":"text_lxwoh1c7","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"type":"JSExpression","value":"`${_item.textField_lxy408qe}提交于${utils.formatter('date', _item.dateField_lxy408qf, 'YYYY-MM-DD hh:mm')}`","mock":{"en_US":"Tips content","use":"zh_CN","zh_CN":"任务负责人人创建日期","type":"i18n"}},"__style__":":root {\n  \n}\n","fieldId":"text_lxwogc5j","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1c0","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n}\n","fieldId":"div_lxwogc57","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":{"type":"JSExpression","value":"_item.radioField_lxy408q8","mock":""},"className":"div_lxwoh1c1","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 22px;\n}\n\n.P0 {\n  border-color: rgb(255, 107, 122);\n  background-color: rgb(255, 107, 122);\n  color: rgb(255, 255, 255);\n}\n\n.P1 {\n  border-color: rgb(255, 115, 87);\n  background-color: rgb(255, 115, 87);\n  color: rgb(255, 255, 255);\n}\n\n.P2 {\n  border-color: rgb(255, 162, 0);\n  background-color: rgb(255, 162, 0);\n  color: rgb(255, 255, 255);\n}\n\n.P3 {\n  border-color: rgb(1, 137, 255);\n  background-color: rgb(1, 137, 255);\n  color: rgb(255, 255, 255);\n}","fieldId":"div_lxwogc59","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":{"type":"JSExpression","value":"!!_item.radioField_lxy408q8","mock":true},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"type":"JSExpression","value":"_item.radioField_lxy408q8","mock":{"en_US":"Tips content","use":"zh_CN","zh_CN":"P0","type":"i18n"}},"__style__":{},"fieldId":"text_lxwogc5a","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]}]}]}]}]},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bo","behavior":"NORMAL","__style__":":root {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fff;\n  border-radius: 8px;\n}\n","fieldId":"div_lbvvfx8l","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":{"type":"JSExpression","value":"state.loading","mock":true},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bn","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  justify-content: denter;\n}\n","fieldId":"div_lbvvfx8m","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bl","behavior":"NORMAL","__style__":":root {\n  width: 36px;\n  height: 36px;\n  background: url(//img.alicdn.com/tfs/TB1S3fieubviK0jSZFNXXaApXXa-144-144.gif) 50%/contain no-repeat,50%/contain no-repeat!important;\n}\n","fieldId":"div_lbvvfx8p","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","behavior":"NORMAL","title":{"use":"zh_CN","en_US":"","zh_CN":"","type":"i18n"},"content":{"use":"zh_CN","en_US":"Tips content","zh_CN":"","type":"i18n"},"__style__":{},"fieldId":"text_lbvvfx8q","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","className":"text_lxwoh1bm","behavior":"NORMAL","title":{"use":"zh_CN","en_US":"","zh_CN":"","type":"i18n"},"content":{"use":"zh_CN","en_US":"Tips content","zh_CN":"数据加载中","type":"i18n"},"__style__":":root {\n  font-size: 14px;\n  line-height: 18px;\n  margin-left: 6px;\n}\n","fieldId":"text_lbvvfx8o","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bt","behavior":"NORMAL","__style__":":root {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fff;\n  border-radius: 8px;\n  flex-direction: column;\n}\n","fieldId":"div_lmrbkcxx","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":{"type":"JSExpression","value":"!state.loading && !state.boardData.totalCount","mock":true},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Image","props":{"preview":false,"autoHeight":false,"src":"https://img.alicdn.com/imgextra/i1/O1CN01DghkG21xUJmKSfikB_!!6000000006446-2-tps-600-600.png","alt":"Image 404","className":"image_lxwoh1bq","fit":"contain","round":"0","width":200,"autoWidth":false,"roundRadius":"0","__style__":":root {\n  margin-bottom: 4px;\n  width: 200px;\n  height: 200px;\n}\n","height":"200","fieldId":"image_lmrbkcxu","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lxwoh1bs","behavior":"NORMAL","__style__":":root {\n  text-align: center;\n  margin-bottom: 24px;\n} \n","fieldId":"div_lmrbkcxw","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","className":"text_lxwoh1br","behavior":"NORMAL","title":{"use":"zh_CN","en_US":"","zh_CN":"","type":"i18n"},"content":{"use":"zh_CN","en_US":"Tips content","zh_CN":"暂无数据","type":"i18n"},"__style__":":root {\n  font-size: 14px;\n  line-height: 18px;\n}\n","fieldId":"text_lmrbkcxv","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]}]}]}]}]}

データソースと使用する変数の設定

使用するデータソース:条件に基づいてフォームインスタンスの詳細リストを検索します

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

{
  formUuid: 'FORM-3F0EC47FD9B9410783234D375C4BD6BC0IN5',
  defaultTime: [moment().startOf('month').valueOf(), moment().endOf('month').valueOf()],
  fieldId: 'radioField_lxy408qg',
  basis: {
    '待处理': [],
    '进行中': [],
    '已完成': [],
    '已取消': [],
  },
}

• Formuuid: データフォームを分析する必要があるformuuid。上記の手順で操作すると、2.1で作成されたフォームのformuuidになります
• Defaulttime: デフォルトのクエリの時間範囲。デフォルトの当月
• Fieldid: 分類表示が必要なフィールドに基づいて一意に識別され、上記の手順で操作すると、2.1の「タスクステータス」フィールドに一意に識別されます
• Basis: 看板の分類展示の順序、看板の展示の順序はここに配置された順序で展示されます

{
  data: {},
  totalCount: 0,
}

{}

true

ページ機能の設定

メインコンテナを画面いっぱいに設定します。

/**
* 设置容器高度为一屏
* @param {string} contentId 容器的 DOM ID
*/
export function setFullScreenHeight(contentId = '') {
  const headerDom = document.querySelectorAll('.next-shell-header');
  const contentDom = document.querySelector(`#${contentId}`);
  const headerDomHeight = headerDom.length ? headerDom[0].offsetHeight : 0;
  const contentDomHeightCssStr = `calc(100vh - ${headerDomHeight}px)`;
  contentDom.style.height = contentDomHeightCssStr;
}

Didmountで呼び出されます。

this.setFullScreenHeight('div_lxwogc3v');

// 获取看板数据
export function getFormAllData() {
  const { boardSettings = {}, searchFieldJson = {} } = this.state;
  this.dataSourceMap.getData.load({
    formUuid: boardSettings.formUuid,
    searchFieldJson: JSON.stringify(searchFieldJson),
    pageSize: 100,
  }).then(async (res) => {
    const fetchResult = []; // 请求成功的结果
    const failPageNum = []; // 请求失败的页码
    fetchResult.push(...res.data);
    if (res.totalCount > 100) {
      for (let i = 2; i < Math.ceil(res.totalCount / 100) + 1; i++) {
        const delay = i === 2 ? 0 : 100;
        await new Promise((resolve => {
          setTimeout(async () => {
            try {
              await this.dataSourceMap.getData.load({
                formUuid: boardSettings.formUuid,
                searchFieldJson: JSON.stringify(searchFieldJson),
                currentPage: i,
                pageSize: 100,
              }).then((res) => {
                fetchResult.push(...res.data);
              });
            } catch (error) {
              failPageNum.push(i);
            };
            resolve();
          }, delay);
        }));
      };
    }
    const result = _.cloneDeep(boardSettings.basis);
    fetchResult.forEach((item) => {
      const { formData = {}, formInstId } = item;
      if (!result[formData[boardSettings.fieldId]]) {
        result[formData[boardSettings.fieldId]] = [];
      }
      result[formData[boardSettings.fieldId]].push({
        formInstId,
        ...formData,
      });
    });
    this.setState({
      boardData: {
        data: result,
        totalCount: res.totalCount,
      },
      loading: false,
    });
  });
}

検索 & リセットを設定します。

// 搜索
export function onSubmit(values = {}) {
  const { boardSettings = {} } = this.state;
  this.setState({
    loading: true,
    searchFieldJson: {
      textField_lxy408q5: values.textField_krk2pdba, // 任务标题
      employeeField_lxy408q7: !_.isEmpty(values.employeeField_lxy4ekv2) ? values.employeeField_lxy4ekv2.map((item) => { return item.value; }) : '', // 任务负责人
      dateField_lxy408qf: !_.isEmpty(values.cascadeDateField_lxwogc53) ? [values.cascadeDateField_lxwogc53.start, this.utils.getDateTimeRange(new Date(values.cascadeDateField_lxwogc53.end), 'day')[1]] : boardSettings.defaultTime, // 创建时间
    },
  });
  this.getFormAllData();
}

// 重置
export function onReset() {
  const { boardSettings = {} } = this.state;
  if (!this.utils.isMobile()) {
    this.onSubmit();
  }
  this.$('cascadeDateField_lxwogc53').setValue(boardSettings.defaultTime);
}

Didmountで呼び出されます。

this.onSubmit();

日付区間クイック区間選択を設定します。

// 快速日期选择区间
export function quickRanges() {
  return {
    '本周': [moment().startOf('week').valueOf(), moment().endOf('week').valueOf()],
    '本月': [moment().startOf('month').valueOf(), moment().endOf('month').valueOf()],
    '本季度': [moment().startOf('quarter').valueOf(), moment().endOf('quarter').valueOf()],
    '上季度': [moment().quarter(moment().quarter() - 1).startOf('quarter').valueOf(), moment().quarter(moment().quarter() - 1).endOf('quarter').valueOf()],
    '本年': [moment().startOf('year').valueOf(), moment().endOf('year').valueOf()]
  };
}

詳細を表示するように設定します。

// 查看详情
export function onClickDetail() {
  const { boardSettings = {} } = this.state;
  this.utils.router.push(
    `/${pageConfig.appType}/formDetail/${boardSettings.formUuid}`,
    {
      formInstId: this._item.formInstId,
      corpid: pageConfig.corpId,
    },
    true,
    true,
  );
}

オンラインで試遊する