GtDigManageWeb/src/components/AuditForm/ItemAttribute.js

import { Form, Button, Switch, Input, Radio, Space, Row } from 'antd';
import React, { useMemo, useState, useEffect } from 'react';
import { DeleteOutlined } from '@ant-design/icons';

function ItemAttribute(props) {
  const { item, onChange, onRelClick } = props;

  if (!item) return null;
  const renderForm = () => {
    let FormContent;
    const formProps = {
      btns: (
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ marginRight: 20 }}>
            保存
          </Button>
        </Form.Item>
      ),
      item,
      onFinish: (values) => {
        console.log(values);
        onChange?.(values);
      },
    };
    switch (item.componentName) {
      case 'InnerContactField':
        FormContent = <InnerContactField {...formProps} />;
        break;
      case 'DepartmentField':
        FormContent = <DepartmentField {...formProps} />;
        break;
      case 'ProjectField':
        FormContent = <ProjectField {...formProps} />;
        break;
      case 'ManufacturerField':
        FormContent = <ManufacturerField {...formProps} />;
        break;
      case 'TextField':
        FormContent = <TextField {...formProps} />;
        break;
      case 'TextareaField':
        FormContent = <TextareaField {...formProps} />;
        break;
      case 'DDSelectField':
        FormContent = <DDSelectField onRelClick={onRelClick} {...formProps} />;
        break;
      case 'DDMultiSelectField':
        FormContent = <DDMultiSelectField {...formProps} />;
        break;
      case 'NumberField':
        FormContent = <NumberField {...formProps} />;
        break;
      case 'TextNote':
        FormContent = <TextNote {...formProps} />;
        break;
      case 'DDAttachment':
        FormContent = <DDAttachment {...formProps} />;
        break;
      case 'DDDateField':
        FormContent = <DDDateField {...formProps} />;
        break;
    }

    return FormContent;
  };

  return (
    <div
      style={{
        // position: 'absolute',
        // top: 0,
        // right: 0,
        width: 500,
        height: 636,
        overflowY: 'auto',
      }}
    >
      {renderForm()}
    </div>
  );
}

export default ItemAttribute;

function InnerContactField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();
  const onSwitchChange = (checked) => {
    form.setFieldValue('choice', checked ? 1 : 0);
  };
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      autoComplete="off"
      initialValues={item.props}
      onFinish={onFinish}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="选项" name="choice">
        <Radio.Group>
          <Space direction="vertical">
            <Radio value={'0'}>只能选择一人</Radio>
            <Radio value={'1'}>可同时选择多人</Radio>
          </Space>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="必填" name="required" valuePropName="checked">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function DepartmentField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      autoComplete="off"
      initialValues={item.props}
      onFinish={onFinish}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="选项" name="choice">
        <Radio.Group>
          <Space direction="vertical">
            <Radio value={'0'}>只能选择一人</Radio>
            <Radio value={'1'}>可同时选择多人</Radio>
          </Space>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="必填" name="required" valuePropName="checked">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function ProjectField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      autoComplete="off"
      initialValues={item.props}
      onFinish={onFinish}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="必填" name="required" valuePropName="checked">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function ManufacturerField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      autoComplete="off"
      initialValues={item.props}
      onFinish={onFinish}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="必填" name="required" valuePropName="checked">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function TextField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();

  const onReset = () => {
    form.resetFields();
  };
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      onFinish={onFinish}
      autoComplete="off"
      initialValues={item.props}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="必填" valuePropName="checked" name="required">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function DDAttachment(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      onFinish={onFinish}
      autoComplete="off"
      initialValues={item.props}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="必填" valuePropName="checked" name="required">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function TextNote(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      onFinish={onFinish}
      autoComplete="off"
      initialValues={item.props}
    >
      <Form.Item label="说明文字" name="placeholder">
        <Input />
      </Form.Item>
      {btns}
    </Form>
  );
}

function DDDateField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      onFinish={onFinish}
      autoComplete="off"
      initialValues={item.props}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      {btns}
    </Form>
  );
}

function TextareaField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      autoComplete="off"
      initialValues={item.props}
      onFinish={onFinish}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="必填" valuePropName="checked" name="required">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function DDSelectField(props) {
  const { item, btns, onFinish, onRelClick } = props;
  const [form] = Form.useForm();
  const handleFinish = (value) => {
    let tempValue = { ...value };
    let arr = [];
    tempValue.options.map((item) => {
      arr.push(item.value);
    });
    if (arr) {
      arr = arr.filter((item) => item);
      arr = [...new Set(arr)];
      tempValue.options = arr;
    }
    onFinish?.(tempValue);
  };

  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      autoComplete="off"
      initialValues={item.props}
      onFinish={handleFinish}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="选项" name="options" wrapperCol={{ span: 24 }}>
        <SelectItem onRelClick={onRelClick} />
      </Form.Item>
      <Form.Item label="必填" valuePropName="checked" name="required">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function DDMultiSelectField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();
  const handleFinish = (value) => {
    let tempValue = { ...value };
    let arr = [];
    tempValue.options.map((item) => {
      arr.push(item.value);
    });
    if (arr) {
      arr = arr.filter((item) => item);
      arr = [...new Set(arr)];
      tempValue.options = arr;
    }
    onFinish?.(tempValue);
  };
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      autoComplete="off"
      initialValues={item.props}
      onFinish={handleFinish}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="选项" name="options" wrapperCol={{ span: 24 }}>
        <SelectItem />
      </Form.Item>
      <Form.Item label="必填" valuePropName="checked" name="required">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}

function SelectItem(props) {
  const { value, onChange, onRelClick } = props;
  const [localValue, setLocalValue] = useState([]);
  const pushItem = (item) => {
    let tempValue = [
      ...localValue,
      {
        id: item,
        value: item,
      },
    ];
    setLocalValue(tempValue);
    onChange(tempValue);
  };

  const handleDelete = (index) => {
    let tempValue = [...localValue];
    tempValue.splice(index, 1);
    setLocalValue(tempValue);
    onChange(tempValue);
  };
  const handleInputOnChange = (targetValue, index) => {
    let tempValue = [...localValue];
    tempValue[index].value = targetValue;
    setLocalValue(tempValue);
    onChange(tempValue);
  };
  useEffect(() => {
    let tempValue = value.map((item) => ({ id: item, value: item }));
    setLocalValue(tempValue);
    onChange(tempValue);
  }, []);

  return (
    <div
      style={{
        minHeight: 40,
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Space>
        <div
          style={{
            fontSize: 4,
            color: '#40a9ff',
            cursor: 'pointer',
            lineHeight: '32px',
          }}
          onClick={() => {
            pushItem('');
          }}
        >
          添加选项
        </div>
        {onRelClick && (
          <div
            style={{
              fontSize: 4,
              color: '#40a9ff',
              cursor: 'pointer',
              lineHeight: '32px',
            }}
            onClick={onRelClick}
          >
            选项关联
          </div>
        )}
      </Space>
      <div style={{ minHeight: 20 }}>
        {localValue.map((item, index) => (
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              marginBottom: 5,
            }}
            key={item.value}
          >
            <Input
              style={{ marginRight: 10 }}
              value={item.value}
              onChange={(e) => handleInputOnChange(e.target.value, index)}
            />
            <DeleteOutlined onClick={() => handleDelete(index)} />
          </div>
        ))}
      </div>
    </div>
  );
}

function NumberField(props) {
  const { item, btns, onFinish } = props;
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      autoComplete="off"
      initialValues={item.props}
      onFinish={onFinish}
    >
      <Form.Item label="标题" name="label">
        <Input />
      </Form.Item>
      <Form.Item label="提示文字" name="placeholder">
        <Input />
      </Form.Item>
      <Form.Item label="单位" name="unit">
        <Input />
      </Form.Item>
      <Form.Item label="必填" valuePropName="checked" name="required">
        <Switch />
      </Form.Item>
      {btns}
    </Form>
  );
}