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

Choerodon UI 介绍

Choerodon UI 是基于 Ant [email protected] 的 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 object
        type: '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',
        lab