op-admin-ui/src/components/HttpUtil/function.tsx

import { ModalForm, ProCard, ProForm, ProFormList, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { Input, InputRef, Space, Tag } from 'antd';
import React, { useRef, useState } from 'react';

/**
 * @author bianlanzhou
 * @since 2024-10-24
 * @desc 函数对象
 */
const FunctionObject: React.FC<{
  value?: {
    key: string;
    label: string;
    code: string;
    extParams?: string[];
  }[];
  onChange?: (
    value: {
      key: string;
      label: string;
    }[],
  ) => void;
}> = ({ value, onChange }) => {
  const ref = useRef<InputRef | null>(null);
  const [newTags, setNewTags] = useState<
    FunctionObjectItem[]
  >([]);

  const handleInputConfirm = (functions: any) => {
    let tags = [...(value || [])];
    functions.attributes.forEach(
      (item: FunctionObjectItem) => {
        tags = [
          ...[...(value || [])],
          { key: `new-${tags.length}`, label: item.code, extParams: item.extParams, code: item.code },
        ];
        onChange?.(tags);
        setNewTags([])
      }
    )
  };

  return (
    <ModalForm<FunctionObjectItem>
      trigger={
        <Space>
          {(value || []).concat(newTags).map((item) => (
            <Tag key={item.key}>{item.label}</Tag>
          ))}
          <Input
            ref={ref}
            type="text"
            size="middle"
            style={{ width: 78 }}
            value=''
          />
        </Space>
      }
      title="函数配置向导"
      onFinish={
        async (value) => {
          handleInputConfirm(value)
          return true;
        }
      }
      width='60vw'
      style={{ maxHeight: '60vh', overflowY: 'auto' }}
    >
      <ProFormList
        name="attributes"
        creatorButtonProps={{
          creatorButtonText: '函数',
        }}
        min={0}
        onAfterRemove={(param) => {
          if (Number.isInteger(param)) {
            newTags.splice(param as number, 1)
          }
        }}
        initialValue={value}
        copyIconProps={false}
        itemRender={({ listDom, action }, { index }) => (
          <ProCard
            bordered
            style={{ marginBlockEnd: 8 }}
            title={`函数 ${index + 1}`}
            extra={action}
            bodyStyle={{ paddingBlockEnd: 0 }}
          >
            {listDom}
          </ProCard>
        )}
      >
        <ProForm.Group>
          <ProFormSelect name="code" placeholder="请选择函数"
            valueEnum={{
              MD5: 'MD5',
              BASE64: 'BASE64',
            }}
            label='函数名'
            width='sm'
            rules={[
              {
                required: true,
                message: '请选择函数',
              },
            ]}
          />
          <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="额外参数">
            <ProFormList
              name="extParams"
              creatorButtonProps={{
                creatorButtonText: '增加',
                icon: false,
                type: 'link',
                style: { width: 'unset' },
              }}
              min={1}
              copyIconProps={false}
              deleteIconProps={{ tooltipText: '删除' }}
              itemRender={({ listDom, action }) => (
                <div
                  style={{
                    display: 'inline-flex',
                    marginInlineEnd: 25,
                  }}
                >
                  {listDom}
                  {action}
                </div>
              )}
            >
              <ProFormText allowClear={false} width="xs" name={['name']} />
            </ProFormList>
          </ProForm.Item>
        </ProForm.Group>
      </ProFormList>
    </ModalForm>
  );
}
export default FunctionObject;