• 使用 DataSet 与后端交互(查询)


    视频教程

    本节内容介绍如何通过 choerodon-ui 的 DataSet 实现一个页面的增删改查

    前置条件

    没有后端环境的同学也可以使用我们提供的demo后端环境进行学习 后端环境变量配置方法

    开发步骤

    使用hooks开发页面

      import React, { useMemo } from 'react';
      import { Header, Content } from 'components/Page';
      import { DataSet, Table, Button } from 'choerodon-ui/pro';
      import { getCurrentOrganizationId } from 'utils/utils';
    
      const DataSetStore = new Map();
    
      const useDataSet = (
        dataSetFactory,
        cacheKey,
      ) => {
        const ds = useMemo(() => {
          if(cacheKey) {
            let cacheDS = DataSetStore.get(cacheKey)
            if(!cacheDS) {
              cacheDS = dataSetFactory();
              DataSetStore.set(cacheKey, cacheDS);
            }
            return cacheDS;
          }
          return dataSetFactory();
        }, []);
        return ds;
      }
    
      const HelloWorldPage = () => {
    
        const tableDS = useDataSet(() => new DataSet({
          autoQuery: true,
          transport: {
            read: (config) => {
              return {
                ...config,
                url: `/htodo/v1/${getCurrentOrganizationId()}/tasks`,
                method: 'GET',
              };
            },
            submit: ({ data, params }) => {
              return {
                url: `/htodo/v1/${getCurrentOrganizationId()}/tasks/submit`,
                data,
                params,
                method: 'POST',
              };
            },
          },
          pageSize: 10,
          selection: 'multiple',
          primaryKey: 'id',
          fields: [
            {
              name: 'employeeObject',
              label: '员工',
              type: 'object',
              lovCode: 'TODO.USER',
              ignore: 'always',
              required: true,
            },
            {
              name: 'employeeId',
              label: '员工ID',
              type: 'number',
              bind: 'employeeObject.id',
            },
            {
              name: 'employeeName',
              label: '员工姓名',
              type: 'string',
              bind: 'employeeObject.employeeName',
            },
            {
              name: 'employeeNumber',
              label: '员工编号',
              type: 'string',
              bind: 'employeeObject.employeeNumber',
            },
            {
              name: 'state',
              label: '任务状态',
              type: 'string',
              lookupCode: 'TODO.TODO_STATE',
              required: true,
            },
            {
              name: 'taskDescription',
              label: '任务描述',
              type: 'string',
              required: true,
            },
            {
              name: 'percent',
              label: '进度',
              type: 'number',
              required: false,
              defaultValue: 0,
            },
            {
              name: 'taskNumber',
              label: '任务编号',
              type: 'string',
              required: true,
              pattern: /^[\dA-Z]*$/,
              defaultValidationMessages: {
                patternMismatch: '只能输入大写字母和数字, 例如: A123', // 正则不匹配的报错信息
              }
            },
          ],
          queryFields: [
            {
              name: 'employeeObject',
              label: '员工',
              type: 'object',
              lovCode: 'TODO.USER',
              ignore: 'always',
            },
            {
              name: 'employeeId',
              label: '员工ID',
              type: 'number',
              bind: 'employeeObject.id',
            },
            {
              name: 'employeeName',
              label: '员工姓名',
              type: 'string',
              bind: 'employeeObject.employeeName',
            },
            // {
            //   name: 'state',
            //   label: '任务状态',
            //   type: 'string',
            //   lookupCode: 'TODO.TODO_STATE',
            // },
            {
              name: 'taskDescription',
              label: '任务描述',
              type: 'string',
            },
            {
              name: 'state2',
              label: '任务状态',
              type: 'string',
              lookupCode: 'TODO.TODO_STATE',
            },
            {
              name: 'state',
              label: '任务状态',
              type: 'string',
              lookupCode: 'TODO.TODO_STATE',
            },
    
            {
              name: 'taskNumber',
              label: '任务编号',
              type: 'string',
            },
            {
              name: 'employeeNumber',
              label: '员工编号',
              type: 'string',
            },
          ],
        }), HelloWorldPage);
    
        const columns = [
          { name: 'taskNumber', width: 320, editor: true },
          { name: 'taskDescription', editor: true },
          { name: 'state', editor: true },
          { name: 'employeeObject', editor: true },
        ];
    
        const buttons = [
          'add',
          // 'delete'
          <Button
            key="create-field"
            icon="playlist_add"
            color="primary"
            funcType="flat"
            onClick={() => this.addLine()}
          >
            自定义新建
          </Button>,
        ];
    
        return (
          <>
            <Header title="Hello World">
              <Button
                color="primary"
                onClick={() => tableDS.submit()}
              >
                  提交
              </Button>
            </Header>
            <Content>
              <Table
                queryFieldsLimit={3}
                dataSet={tableDS}
                columns={columns}
                buttons={buttons}
              />
            </Content>
          </>
        );
      }
    
      export default HelloWorldPage;
    
    
      import React, { useMemo } from 'react';
      import { Header, Content } from 'components/Page';
      import { DataSet, Table, Button } from 'choerodon-ui/pro';
      import { ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
      import { TableButtonType } from 'choerodon-ui/pro/lib/table/enum';
      import { Buttons } from 'choerodon-ui/pro/lib/table/Table';
      import { ColumnProps } from 'choerodon-ui/pro/lib/table/Column';
      import { getCurrentOrganizationId } from 'utils/utils';
      import apiPrefixConfig from 'hzero-front-common/lib/config/apiPrefixConfig';
      import { DataSetSelection } from 'choerodon-ui/pro/lib/data-set/enum';
      import { DataSetProps } from 'choerodon-ui/pro/lib/data-set/DataSet';
      import { AxiosRequestConfig } from 'axios';
    
      const TodoDS = ():DataSetProps => ({
        transport: {
          read: (config: AxiosRequestConfig):AxiosRequestConfig => {
            return {
              ...config,
              url: `${
                apiPrefixConfig.TODO_API
              }/v1/${getCurrentOrganizationId()}/tasks`,
              method: 'GET',
            };
          },
          submit: ({ data, params }) => {
            return {
              url: `${
                apiPrefixConfig.TODO_API
              }/v1/${getCurrentOrganizationId()}/tasks/submit`,
              data,
              params,
              method: 'POST',
            };
          },
        },
        pageSize: 10,
        selection: 'multiple' as DataSetSelection,
        primaryKey: 'id',
        fields: [
          {
            name: 'employeeObject',
            label: '员工',
            type: 'object',
            lovCode: 'TODO.USER',
            ignore: 'always',
            required: true,
          },
          {
            name: 'employeeId',
            label: '员工ID',
            type: 'number',
            bind: 'employeeObject.id',
          },
          {
            name: 'employeeName',
            label: '员工姓名',
            type: 'string',
            bind: 'employeeObject.employeeName',
          },
          {
            name: 'employeeNumber',
            label: '员工编号',
            type: 'string',
            bind: 'employeeObject.employeeNumber',
          },
          {
            name: 'state',
            label: '任务状态',
            type: 'string',
            lookupCode: 'TODO.TODO_STATE',
            required: true,
          },
          {
            name: 'taskDescription',
            label: '任务描述',
            type: 'string',
            required: true,
          },
          {
            name: 'percent',
            label: '进度',
            type: 'number',
            required: false,
            defaultValue: 0,
          },
          {
            name: 'taskNumber',
            label: '任务编号',
            type: 'string',
            required: true,
            pattern: /^[\dA-Z]*$/,
            defaultValidationMessages: {
              patternMismatch: '只能输入大写字母和数字, 例如: A123', // 正则不匹配的报错信息
            }
          },
        ],
        queryFields: [
          {
            name: 'employeeObject',
            label: '员工',
            type: 'object',
            lovCode: 'TODO.USER',
            ignore: 'always',
          },
          {
            name: 'employeeId',
            label: '员工ID',
            type: 'number',
            bind: 'employeeObject.id',
          },
          {
            name: 'employeeName',
            label: '员工姓名',
            type: 'string',
            bind: 'employeeObject.employeeName',
          },
          {
            name: 'state',
            label: '任务状态',
            type: 'string',
            lookupCode: 'TODO.TODO_STATE',
          },
          {
            name: 'taskDescription',
            label: '任务描述',
            type: 'string',
          },
          {
            name: 'state2',
            label: '任务状态',
            type: 'string',
            lookupCode: 'TODO.TODO_STATE',
          },
          {
            name: 'state',
            label: '任务状态',
            type: 'string',
            lookupCode: 'TODO.TODO_STATE',
          },
    
          {
            name: 'taskNumber',
            label: '任务编号',
            type: 'string',
          },
          {
            name: 'employeeNumber',
            label: '员工编号',
            type: 'string',
          },
        ],
      } as DataSetProps);
    
      const HelloWorldPage: React.FC = () => {
    
        const tableDS = useMemo(() => new DataSet({
          autoQuery: true,
          ...TodoDS(),
        }), []);
    
        const submit = () => {
          return tableDS.submit();
        }
    
        const columns: ColumnProps[] = [
          { name: 'taskNumber', width: 320, editor: true },
          { name: 'taskDescription', editor: true },
          { name: 'state', editor: true },
          { name: 'employeeObject', editor: true },
        ];
    
        const buttons = [
          TableButtonType.add,
          'delete' as Buttons,
        ];
    
        return (
          <>
            <Header title="Hello World">
              <Button
                color={"primary" as ButtonColor}
                onClick={() => submit()}
              >
                  提交
              </Button>
            </Header>
            <Content>
              <Table
                queryFieldsLimit={3}
                dataSet={tableDS}
                columns={columns}
                buttons={buttons}
              />
            </Content>
          </>
        );
      }
    
      export default HelloWorldPage;
    
    

    DEMO 参考

    API