feat(Form): 新增Transfer、CropperAvatar、BasicTitle 组件至Form中，并添加至演示页面 (#3362)

林飞

2023-11-30 f6147fa44985d149692b5c6053a49b76d24767cc

feat(Form): 新增Transfer、CropperAvatar、BasicTitle 组件至Form中，并添加至演示页面 (#3362)

Co-authored-by: gavin-james <meaganlindesy1258@gmail.com>

 src/components/Form/src/componentMap.ts

@@ -19,6 +19,7 @@
  Switch,
  TimePicker,
  TreeSelect,
  Transfer,
} from 'ant-design-vue';
import ApiRadioGroup from './components/ApiRadioGroup.vue';
import RadioButtonGroup from './components/RadioButtonGroup.vue';
@@ -31,6 +32,8 @@
import { StrengthMeter } from '@/components/StrengthMeter';
import { IconPicker } from '@/components/Icon';
import { CountdownInput } from '@/components/CountDown';
import { BasicTitle } from '@/components/Basic';
import { CropperAvatar } from '@/components/Cropper';

const componentMap = new Map<ComponentType, Component>();

@@ -57,6 +60,7 @@
componentMap.set('Cascader', Cascader);
componentMap.set('Slider', Slider);
componentMap.set('Rate', Rate);
componentMap.set('Transfer', Transfer);
componentMap.set('ApiTransfer', ApiTransfer);

componentMap.set('DatePicker', DatePicker);
@@ -71,6 +75,9 @@

componentMap.set('Upload', BasicUpload);
componentMap.set('Divider', Divider);
componentMap.set('CropperAvatar', CropperAvatar);

componentMap.set('BasicTitle', BasicTitle);

export function add(compName: ComponentType, component: Component) {
  componentMap.set(compName, component);

 src/components/Form/src/components/FormItem.vue

@@ -12,7 +12,7 @@
  import type { TableActionType } from '@/components/Table';
  import { Col, Divider, Form } from 'ant-design-vue';
  import { componentMap } from '../componentMap';
  import { BasicHelp } from '@/components/Basic';
  import { BasicHelp, BasicTitle } from '@/components/Basic';
  import { isBoolean, isFunction, isNull } from '@/utils/is';
  import { getSlot } from '@/utils/helper/tsxHelper';
  import {
@@ -367,6 +367,17 @@
              <Divider {...unref(getComponentsProps)}>{renderLabelHelpMessage()}</Divider>
            </Col>
          );
        } else if (component === 'BasicTitle') {
          return (
            <Form.Item
              labelCol={labelCol}
              wrapperCol={wrapperCol}
              name={field}
              class={{ 'suffix-item': !!suffix }}
            >
              <BasicTitle {...unref(getComponentsProps)}>{renderLabelHelpMessage()}</BasicTitle>
            </Form.Item>
          );
        } else {
          const getContent = () => {
            return slot

 src/components/Form/src/types/index.ts

@@ -116,4 +116,7 @@
  | 'Slider'
  | 'Rate'
  | 'Divider'
  | 'ApiTransfer';
  | 'ApiTransfer'
  | 'Transfer'
  | 'CropperAvatar'
  | 'BasicTitle';

 src/views/demo/form/index.vue

@@ -358,6 +358,39 @@
      },
    },
    {
      field: 'field12',
      component: 'BasicTitle',
      label: '标题区分',
      componentProps: {
        line: true,
        span: true,
      },
      colProps: {
        span: 24,
      },
    },
    {
      field: 'field13',
      component: 'CropperAvatar',
      label: '头像上传',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'field14',
      component: 'Transfer',
      label: '穿梭框',
      colProps: {
        span: 8,
      },
      componentProps: {
        render: (item) => item.label,
        dataSource: citiesOptionsData.guangdong,
        targetKeys: ['1'],
      },
    },
    {
      field: 'divider-api-select',
      component: 'Divider',
      label: '远程下拉演示',