Choerodon UI 介紹

Choerodon UI 是基于 Ant Design@3.4.0 的 React 實現，開發和服務于企業級后臺產品。

dataSet 學習

dataSet 就是一個store 可以隨意處理

Transport 的使用

dataSet 中的 transport 里面封裝了 dataset 與后端交互的一些基本方法，利用 transport 中的方法可以很容易實現數據的增刪改查和校驗等功能。

方法介紹

• read - 查詢請求的 axios 配置或 url 字符串
• create - 新建請求的 axios 配置或 url 字符串
• update - 更新請求的 axios 配置或 url 字符串
• destroy - 刪除請求的 axios 配置或 url 字符串
• validate - 唯一性校驗請求的 axios 配置或 url 字符串
• submit - create, update, destroy 的默認配置或 url 字符串

基本使用方法

// DetailDS.js - 將 dataSet 單獨抽離出來的文件// 調用getCurrentOrganizationId 可以獲取 CurrentOrganizationId import { getCurrentOrganizationId } from 'utils/utils'; const API_LIST = '/lightkits'; const organizationId = getCurrentOrganizationId();export default () => {detailDS = new DataSet({// 自動查詢，開啟即進入頁面自動調用 transport 中的 read 方法autoQuery: true, fields: [ {name: 'id',// 當字段名相同時，ui 組件上則會展示對應的 label 標簽，并且數據為通過 read 方法獲取到的所對應字段的數據。label: '員工ID', // 字段類型，可選值：boolean number string date dateTime time week month year email url intl objecttype: 'number', },{name: 'employeeName',label: '員工姓名',type: 'string',// 必輸字段。如果沒有輸入，會有默認的必輸提示。required: true,},{name: 'employeeNumber',label: '員工編號',type: 'string',required: true,},{name: 'hiredate',label: '入職時間',// 字段類型為日期類型時，組件中對應的輸入框會變為日期選擇框type: 'date',},{name: 'email',label: '郵箱',// 字段類型為 email 時，組件會校驗輸入內容是為 email type: 'email',required: true,},{name: 'age',label: '員工年齡',/**字段類型為 number 時，組件展示為數字輸入框，只能輸入數字，并且后端對應字段的數據不為number時，就無法展示該數據。*/type: 'number',// 步距，當字段類型為 number 時，在設置 step 之后，文本輸入框會變為 NumberField。step: 1, // 最小值min: 1, // 最大值max: 100, required: true,},{name: 'enable',label: '是否有效',// 字段類型為 boolean 時，組件展示為選擇框type: 'boolean', // true 對應的值，類型：boolean|string|number，默認 truetrueValue: '1', // false 對應的值，類型：boolean|string|number，默認 falsefalseValue: '0', },],transport: {read: ({ data, params, dataSet }) => {/*觸發 read 的兩種方式：1. 通過在 dataSet 中設置自動查詢參數 autoQuery: true，這樣每次組件渲染的時候就會自動去獲取數據。2. 通過 dataSet 的 query() 方法手動觸發 read 獲取數據，即在組件中調用 this.detailDS.query()。*/const url = `${API_LIST}/v1/${organizationId}/headers/getHeaderList`;const axiosConfig = {url,method: 'GET',params: {/* params為需要傳遞給后端的查詢數據，會通過 ' ? ' 以鍵值對的形式自動拼接在 url 之后；在Table組件中，該函數的形參 params 為 組件的 page 、size 和 sortable；也可以通過組件中使用 this.detailDS.setQueryParameter(para, value) 的方式來設置查詢參數。para - 參數名、value - 參數值。*/ },};return axiosConfig;},destroy: ({ data }) => {return {url: '',data,method: 'DELETE',};},update: ({ data, params }) => {return {url: ``,data,params,method: 'PUT',};},create: ({ data, params, deatSet }) => {return {url: ``,data,params,method: 'POST',};},submit: ({ data, params, dataSet }) => {// submit 適用于所有增刪改操作，調用一次 submit 都會觸發，后端通過 _status 來標識或識別 增/刪/改 操作。// data 為 dataSet 對應的組件中的數據，需要注意的是只有當頁面有改動的的時候，調用 submit / update / create / destroy 才會觸發網絡請求。const axiosConfig = {url: '',method: 'POST',data, // data 為需要傳遞給后端的數據，默認為形參中的data，即組件中的數據。 },},}); } import React, { Component, Fragment } from 'react'; import { DataSet } from 'choerodon-ui/pro';import DetailDS from './DetailDS'export default class Detail extends Component {detailDS = new DataSet({...DetailDS()})// 在頁面上展示表格有兩種方式：一種是直接在 Table 標簽里面去寫 Column；一種是將 Column 單獨提出來。get columns() {return [{ name: 'id', lock: 'left' },{ name: 'employeeName', lock: 'left' },{ name: 'employeeNumber', width: 150, lock: 'left' },{ name: 'hiredate', lock: 'left' },{ name: 'age', width: 80 },{ name: 'enable', width: 80 },]}buttons = [ 'add', 'save', 'delete' ]render() {/**buttons: Table 的功能按鈕。可選值：add delete remove save query resetexpandAll collapseAll export 或 數組 或 自定義按鈕，數組為可選值字符串+按鈕配置屬性對象。給出的關鍵字在使用后可直接渲染出其功能按鈕，并且其點擊事件可直接觸發 transport 中對應的方法。columns：表格的列。queryFieldsLimit：頭部顯示的查詢字段的數量，超出限制的查詢字段放入彈出窗口。columnResizable：可調整列寬。*/return (<Fragment><TabledataSet = { this.detailDS }buttons = { this.buttons } columns = { this.columns } queryFieldsLimit = { 2 } columnResizable="true" /></Fragment>)} }

問題記錄

choerodon 組件的問題

remove（removeAll）和 delete（deleteAll） 的區別

delete 為立即刪除，會去調用接口；remove 為臨時刪除操作，類似于你編輯了，但是沒有保存，不保存重新查詢數據就還在。

自定義 table 的搜索框

table 自定義搜索條

lovPara 傳一個變量

使用 dynamicProps 動態屬性鉤子或者對象。對象為字段屬性和返回該字段值的鉤子的鍵值對，建議使用對象以提高性能。

// 使用方法 ItemDynamicProps({ record }) {return {lovPara: {organizationId: record.get('organization') ? record.get('organization').organizationId : record.get('organizationId')}} } fields: [{ name: 'item', type: 'object', label: 'Item',lovCode: 'LOV_FND_ITEM', dynamicProps: this.ItemDynamicProps, ignore: 'always' }, ]

自定義按鈕，實現表格的新增、刪除、查詢和保存功能

讓自定義的按鈕觸發注入在此表格的 dataSet 的對應 Method，Method 中的這些方法都是可以通過直接 ‘點’ 出來調用的。如 新增 - create、刪除 - remove / removeAll / delete / deleteAll、查詢 - query 等。

// 使用方法 add() {this.DetailDS.create(); } delete() {// 需要注意的是，在調用 delete 和 remove 進行記錄刪除的時候，應傳入需要刪除的數據，此處以選擇刪除為例。// dataSet 的 currentSelected 為當前頁的選中記錄，包含當前頁已選中的所有數據const { currentSelected } = this.DetailDS;this.DetailDS.delete(currentSelected); }

在Form中使用DataSet時，配置了submitUrl，請求后無法自動處理Token

修改 .babelrc 文件，同 .babelrc

項目啟動時報 cross-env 錯誤

一般是因為缺少 cross-env 模塊，執行 yarn add cross-env 或 npm install cross-env 即可解決。

dynamicProps設置lov值的時候，為什么會反反復復多次調用為dynamicProps設定的方法?

field 在獲取任何屬性的時候都會執行 dynamicProps，所以不要在 dynamicProps 里調用接口，dynamicProps也不支持async await。

如何手動獲取到 dataSet 中的 data。

有兩種方法： toData() 和 toJSONData()。
兩種方法的區別：

• toData() 會獲取到當前 dataSet 中的全部數據，即使你的 fields 中有 ignore 屬性，也不會過濾掉。
• toJSONData() 獲取到的是用于提交的 json 數據。需要注意的是，如果當前 dataSet 對應組件中的數據沒有任何改動，則無法獲取到該 dataSet 中的數據，提交只會提交變更的數據。

動態添加 dataSet 的 childrenDS，并把動態添加出來的 childrenDS 的數據渲染到頁面中

// 在 dataSet 的 children 屬性下添加 export default () => ({...children: {DemandDateDS: new DataSet({ ...DemandDateDS() }),}, } /*operationResponseDTOList 為后端返回給我的工序的數組，因為每個工序下面都有對應的 Task 需要操作， 所以我在這塊每一個工序對應添加一個 dataSet，使用工序的 Code 作為 dataSet 的名字。 */ operationResponseDTOList.map(item => {// 在組件中通過 “點” 的方式進行添加this.taskSplitDS.children[item.operationCode] = new DataSet({...TaskSplitChildrenDS(),data: [].concat(item),}); })

在動態渲染 dataSet 的時候，需要注意 dataSet 的持久化，否則可能會出現調用 create 去添加數據的時候，每次都是初始化的狀態。

Table 的列添加 lock 屬性之后，出現空白格。

給添加的 lock 的列設置寬度

篩選框有數據全部展示出來，并且可以多選

demo 預覽
代碼地址

刷新 Swagger - 解決 403

iam -> Permission_Refresh -> 先運行第二個，再運行第一個接口。服務名：light***，版本號：對應需要解決403的接口的版本號 version - x.x.x.RELEASE

Table 組件第一列添加序號

利用變量和閉包的方式都不能實現 +1，需要利用當前 record 的 index 屬性實現

{name: 'order',renderer: ({ record }) => record.index + 1, },

c7n 功能按鈕的屬性

自定義 save、add等組件給定的這些功能按鈕的點擊事件和按鈕的展示內容

buttons = [ [ 'add', { children: '新增', onClick: () = >{} ], ]

頁面中使用別名引入圖片

// images 是對應的路徑別名 <img src={require('Images/emptyBox.png')}></img>

利用 withProps 給組件注入 dataSet

Todo

React 框架的問題

React 條件渲染組件之后，通過父子組件傳參，props 拿到的不是最新的數據

setState 是異步的，它的第二參數是操作成功之后的一個回調。

// 當父組件中的 showTaskFlag 為 true 的時候，展示子組件，并調用子組件中的 getTaskData 方法。// 如果使用下面的寫法，會出現 getTaskData 為 undefinedhandleShowTask(record) {const data = record.toData();this.setState({showTaskFlag: true,});this.getTaskData(data) }// 正確的寫法應該是將頁面渲染之后，需要調用的函數寫在 setState 的回調當中。handleShowTask(record) {const data = record.toData();this.setState({showTaskFlag: true,}, () => this.getTaskData(data)); }

React 中遍歷對象并渲染的方法

const obj = { name: '張小三' }; {Object.keys(obj).map(key => {return (<span> { obj[key] } </span>)}); }

總結

以上是生活随笔為你收集整理的choerodon-ui/pro入门 - dataset 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。