choerodon-ui/pro入门 - dataset 的使用

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 的使用相关推荐

视频教程 | Egret Pro 入门学习笔记（10）：认识模型
今天的视频是通过点击按钮切换网格,以及点击按钮切换材质,来一起认识下EgretPro中的基础模型与基础材质,加深对模型的认识以及熟练Egret2d与EgretPro之间的UI交互. 大家都知道,在3D ...
Ant Design Pro入门之简介
Ant Design Pro入门了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中后台前端/设计解决方案. 效果: 源码地址:htt ...
[转]WIN MOBILE UI开发入门
标题: [原创]WIN MOBILE UI开发入门作者: 打小时间: 2009-06-06,12:17:14 链接: http://bbs.pediy.com/showthread.php ...
Premiere Pro入门
介绍 Adobe Premiere Pro,简称PR,是最强大的视频编辑软件.可同时创建多个时间轨道,多个视频素材按层遮挡:可对单个素材添加各种效果,例如放缩.移动.旋转.裁剪等:可插入图片遮挡视频素 ...
UI设计入门：五种基本APP界面类型【萧蕊冰】
今天这篇是一个UI设计入门:五种基本APP界面类型的欣赏.随着互联网的发展和智能手机的普及,移动应用成了大家最热爱的宠儿,许多移动APP也会根据用户的需求来随时替换本身的UI设计.本篇UI设计入门分享 ...
Flink入门——DataSet Api编程指南
简介: Flink入门--DataSet Api编程指南 Apache Flink 是一个兼顾高吞吐.低延迟.高性能的分布式处理框架.在实时计算崛起的今天,Flink正在飞速发展.由于性能的优势和兼顾 ...
【组件-工具】小程序ui组件Color UI快速入门
小程序ui组件Color UI快速入门什么是ColorUI ColorUI是UI组件库!不是一个Js框架.相比于同类小程序组件库,ColorUI更注重于视觉交互,样式更加华丽精美,使用方法简单,只需 ...
猪齿鱼Choerodon UI中，对保存校验失败的提示语进行优化，自动提示所有校验失败的字段，而不是简单的提示“数据校验不通过”
猪齿鱼Choerodon UI中,对保存校验失败的提示语进行优化,自动提示所有校验失败的字段,而不是简单的提示"数据校验不通过" 三个技术优化方案以10条新建的关联交易行(存在关 ...
Chakra UI Pro (Marketing + Application UI + ECommerce)
Chakra UI Pro (Marketing + Application UI + ECommerce) 快速创建可访问的 React 应用程序 Chakra UI 是一个简单.模块化且可访问的 ...

choerodon-ui/pro入门 - dataset 的使用

Choerodon UI 介绍

dataSet 学习

Transport 的使用

方法介绍

基本使用方法

问题记录

choerodon 组件的问题

React 框架的问题

choerodon-ui/pro入门 - dataset 的使用相关推荐

最新文章

热门文章