Choerodon UI 介紹

Choerodon UI 是基于 Ant Design@3.4.0 的 React 實(shí)現(xiàn)，開(kāi)發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。

dataSet 學(xué)習(xí)

dataSet 就是一個(gè)store 可以隨意處理

Transport 的使用

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

方法介紹

• read - 查詢請(qǐng)求的 axios 配置或 url 字符串
• create - 新建請(qǐng)求的 axios 配置或 url 字符串
• update - 更新請(qǐng)求的 axios 配置或 url 字符串
• destroy - 刪除請(qǐng)求的 axios 配置或 url 字符串
• validate - 唯一性校驗(yàn)請(qǐng)求的 axios 配置或 url 字符串
• submit - create, update, destroy 的默認(rèn)配置或 url 字符串

基本使用方法

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

問(wèn)題記錄

choerodon 組件的問(wèn)題

remove（removeAll）和 delete（deleteAll） 的區(qū)別

delete 為立即刪除，會(huì)去調(diào)用接口；remove 為臨時(shí)刪除操作，類似于你編輯了，但是沒(méi)有保存，不保存重新查詢數(shù)據(jù)就還在。

自定義 table 的搜索框

table 自定義搜索條

lovPara 傳一個(gè)變量

使用 dynamicProps 動(dòng)態(tài)屬性鉤子或者對(duì)象。對(duì)象為字段屬性和返回該字段值的鉤子的鍵值對(duì)，建議使用對(duì)象以提高性能。

// 使用方法 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' }, ]

自定義按鈕，實(shí)現(xiàn)表格的新增、刪除、查詢和保存功能

讓自定義的按鈕觸發(fā)注入在此表格的 dataSet 的對(duì)應(yīng) Method，Method 中的這些方法都是可以通過(guò)直接 ‘點(diǎn)’ 出來(lái)調(diào)用的。如 新增 - create、刪除 - remove / removeAll / delete / deleteAll、查詢 - query 等。

// 使用方法 add() {this.DetailDS.create(); } delete() {// 需要注意的是，在調(diào)用 delete 和 remove 進(jìn)行記錄刪除的時(shí)候，應(yīng)傳入需要?jiǎng)h除的數(shù)據(jù)，此處以選擇刪除為例。// dataSet 的 currentSelected 為當(dāng)前頁(yè)的選中記錄，包含當(dāng)前頁(yè)已選中的所有數(shù)據(jù)const { currentSelected } = this.DetailDS;this.DetailDS.delete(currentSelected); }

在Form中使用DataSet時(shí)，配置了submitUrl，請(qǐng)求后無(wú)法自動(dòng)處理Token

修改 .babelrc 文件，同 .babelrc

項(xiàng)目啟動(dòng)時(shí)報(bào) cross-env 錯(cuò)誤

一般是因?yàn)槿鄙?cross-env 模塊，執(zhí)行 yarn add cross-env 或 npm install cross-env 即可解決。

dynamicProps設(shè)置lov值的時(shí)候，為什么會(huì)反反復(fù)復(fù)多次調(diào)用為dynamicProps設(shè)定的方法?

field 在獲取任何屬性的時(shí)候都會(huì)執(zhí)行 dynamicProps，所以不要在 dynamicProps 里調(diào)用接口，dynamicProps也不支持async await。

如何手動(dòng)獲取到 dataSet 中的 data。

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

• toData() 會(huì)獲取到當(dāng)前 dataSet 中的全部數(shù)據(jù)，即使你的 fields 中有 ignore 屬性，也不會(huì)過(guò)濾掉。
• toJSONData() 獲取到的是用于提交的 json 數(shù)據(jù)。需要注意的是，如果當(dāng)前 dataSet 對(duì)應(yīng)組件中的數(shù)據(jù)沒(méi)有任何改動(dòng)，則無(wú)法獲取到該 dataSet 中的數(shù)據(jù)，提交只會(huì)提交變更的數(shù)據(jù)。

動(dòng)態(tài)添加 dataSet 的 childrenDS，并把動(dòng)態(tài)添加出來(lái)的 childrenDS 的數(shù)據(jù)渲染到頁(yè)面中

// 在 dataSet 的 children 屬性下添加 export default () => ({...children: {DemandDateDS: new DataSet({ ...DemandDateDS() }),}, } /*operationResponseDTOList 為后端返回給我的工序的數(shù)組，因?yàn)槊總€(gè)工序下面都有對(duì)應(yīng)的 Task 需要操作， 所以我在這塊每一個(gè)工序?qū)?yīng)添加一個(gè) dataSet，使用工序的 Code 作為 dataSet 的名字。 */ operationResponseDTOList.map(item => {// 在組件中通過(guò) “點(diǎn)” 的方式進(jìn)行添加this.taskSplitDS.children[item.operationCode] = new DataSet({...TaskSplitChildrenDS(),data: [].concat(item),}); })

在動(dòng)態(tài)渲染 dataSet 的時(shí)候，需要注意 dataSet 的持久化，否則可能會(huì)出現(xiàn)調(diào)用 create 去添加數(shù)據(jù)的時(shí)候，每次都是初始化的狀態(tài)。

Table 的列添加 lock 屬性之后，出現(xiàn)空白格。

給添加的 lock 的列設(shè)置寬度

篩選框有數(shù)據(jù)全部展示出來(lái)，并且可以多選

demo 預(yù)覽
代碼地址

刷新 Swagger - 解決 403

iam -> Permission_Refresh -> 先運(yùn)行第二個(gè)，再運(yùn)行第一個(gè)接口。服務(wù)名：light***，版本號(hào)：對(duì)應(yīng)需要解決403的接口的版本號(hào) version - x.x.x.RELEASE

Table 組件第一列添加序號(hào)

利用變量和閉包的方式都不能實(shí)現(xiàn) +1，需要利用當(dāng)前 record 的 index 屬性實(shí)現(xiàn)

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

c7n 功能按鈕的屬性

自定義 save、add等組件給定的這些功能按鈕的點(diǎn)擊事件和按鈕的展示內(nèi)容

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

頁(yè)面中使用別名引入圖片

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

利用 withProps 給組件注入 dataSet

Todo

React 框架的問(wèn)題

React 條件渲染組件之后，通過(guò)父子組件傳參，props 拿到的不是最新的數(shù)據(jù)

setState 是異步的，它的第二參數(shù)是操作成功之后的一個(gè)回調(diào)。

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

React 中遍歷對(duì)象并渲染的方法

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。