跳到主要内容

TransferProLov

长念
长念阅读约 5 分钟3 年前发布3 年前编辑
© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0
危险

✂️ 当前组件已停止更新维护，该文档已归档并停止更新。

基于 TransferPro 实现，将 Modal.open 操作内置到组件中，渲染为 TextField 组件。

基本用法

特性说明​

  • 支持 TransferPro 所有特性
  • 支持 record 数据绑定

基本用法​

index.tsx
import { useDataSet } from 'choerodon-ui/pro';
import { TransferProLov } from 'hscs-common/components';
import { getDSProps } from './store';

export default () => {
  const tenantDS = useDataSet(getDSProps, []);
  return <TransferProLov name="tenants" record={tenantDS.current} />;
};

在表单中应用​

import { TransferProLov } from 'hscs-common/components';

export default () => {
  return (
    <Form>
      <TransferProLov name="tenant" record={tenantDS.current} label="租户" />
    </Form>
  );
};

API​

参数类型说明默认值
namestring必输 字段名称
-
recordRecord | undefined必输 关联的 record-
configProps{data?:any; read?: TransportType }可选 源数据加载方式，仅当指定数据或自定义接口时用到-
modalPropsTLovModalProps可选 支持除 key maskClosable children onOk 以外的 ModalProps 所有属性-
其他TransferProProps & FormFieldProps支持 TransferPro 除 configProps targetProps 外所有属性；支持 FormFieldProps 除 dataSet 所有属性。 [1]-

源代码​

TransferProLov/index.tsx
import { Record } from 'choerodon-ui/dataset';
import { DataSetEvents } from 'choerodon-ui/dataset/data-set/enum';
import { Icon, Modal, TextField } from 'choerodon-ui/pro';
import type { TransportType } from 'choerodon-ui/pro/lib/data-set/interface';
import type { FormFieldProps } from 'choerodon-ui/pro/lib/field/FormField';
import type { ModalProps } from 'choerodon-ui/pro/lib/modal/Modal';
import { useObserver } from 'mobx-react-lite';
import * as React from 'react';
import type { TransferProProps } from '.';
import TransferPro from '.';

export type TLovModalProps = Omit<ModalProps, 'key' | 'maskClosable' | 'children' | 'onOk'>;

export type TransferProLovProps = Omit<FormFieldProps, 'dataSet'> & {
  name: string;

  record: Record | undefined;

  configProps?: { data: any; read?: TransportType };

  /**
   * @description 弹窗属性
   */
  modalProps?: TLovModalProps;
} & Omit<TransferProProps, 'targetProps' | 'configProps'>;

const modalKey = Modal.key();

/**
 * @see https://changnian.netlify.app/docs/c7n/custom-components/transfer-pro-lov
 */
const TransferProLov: React.FC<TransferProLovProps> = ({
  name,
  record,
  modalProps = {},
  configProps,
  avatarProps,
  titles,
  header,
  footer,
  className,
  style,
  searchable,
  onChange,
  renderItem,
  ...formProps
}) => {
  const fieldProps = record?.dataSet.getField(name)?.props || new Map();

  const [textField, valueField, primaryKey, lovCode, lookupCode] = [
    fieldProps.get('textField') || 'textField',
    fieldProps.get('valueField') || 'valueField',
    fieldProps.get('idField') || 'id',
    (fieldProps.get('lovCode') || '') as string | undefined,
    fieldProps.get('lookupCode') || '',
  ];

  const handleOk = ({ initialData, value }) => {
    if (!record) {
      return;
    }
    // 设置值
    record.set({
      [name]: value,
      [textField]: value.map((v) => v[textField]),
      [valueField]: value.map((v) => v[valueField]),
    });

    // 触发 update 事件
    record.dataSet.fireEvent(DataSetEvents.update, {
      name,
      record,
      dataSet: record.dataSet,
      value,
      oldValue: initialData,
    });
  };

  const handleOpen = () => {
    let config;
    if (configProps?.data) {
      config = { data: configProps?.data };
    } else if (configProps?.read) {
      config = { read: configProps?.read };
    } else if (lovCode) {
      config = { lovCode };
    } else if (lookupCode) {
      config = { lookupCode };
    }

    const transferProps: TransferProProps = {
      configProps: {
        primaryKey,
        textField,
        valueField,
        lookupCode,
        lovCode,
        ...config,
      },
      targetProps: {
        primaryKey,
        data: record?.get(name) || [],
      },
      avatarProps,
      titles,
      header,
      footer,
      style,
      className,
      searchable,
      onChange,
      renderItem,
    };

    Modal.open({
      title: '选择',
      style: { width: 600 },
      ...modalProps,
      key: modalKey,
      onOk: handleOk,
      maskClosable: false,
      children: <TransferPro {...transferProps} />,
    } as ModalProps);
  };

  React.useEffect(() => {
    // 初始化展示数据
    if (record && record.get(name)) {
      if (!record.get(textField)) {
        record.set(
          textField,
          record
            .get(name)
            .map((r) => r[textField])
            .filter(Boolean)
        );
      }
      if (!record.get(valueField)) {
        record.set(
          valueField,
          record
            .get(name)
            .map((r) => r[valueField])
            .filter(Boolean)
        );
      }
    }
  }, [record?.get(name), textField, valueField]);

  return useObserver(() => (
    <TextField
      {...formProps}
      name={textField}
      readOnly
      multiple
      record={record}
      suffix={<Icon type="search" />}
      onClick={handleOpen}
    />
  ));
};

export default TransferProLov;

Q & A​

为什么不支持 FormFieldProps.dataSet​

可以，但没必要。应用场景类似于表单项，record 更方便直接取值；其次 record.dataSet 也能够获取关联的 DataSet。

这和 TransferButton 有什么不一样​

内部实现不同：

  • Button 更倾向于操作，不涉及回显；所以内部实现时 Button 可以在弹窗展开时加载数据；
  • 而 Lov 更倾向于回显。故 Lov 在一开始就必须 (通过 record) 提供回显的数据，值的变更也会自动同步到绑定的 record 中，并触发 dataSet 的 update 事件。

更新日志​

0.1.1​

  • 🎉 hscs-front-common@0.1.1 起支持该组件

alpha​

2023-05-16

  • 🎉 新增 ConfigProps.data 支持手动加载源数据