单选多选框组件

src/components/AuditForm/ItemAttribute.js

@@ -1,5 +1,5 @@
-import { Form, Button, Switch, Input, Radio, Space } from 'antd';
-import React from 'react';
+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 } = props;
@@ -35,7 +35,7 @@ function ItemAttribute(props) {
         FormContent = <DDSelectField {...formProps} />;
         break;
       case 'DDMultiSelectField':
-        FormContent = <DDMultiSelectField item={item} onChange={onChange} />;
+        FormContent = <DDMultiSelectField {...formProps} />;
         break;
       case 'NumberField':
         FormContent = <NumberField {...formProps} />;
@@ -170,16 +170,30 @@ function TextareaField(props) {
 function DDSelectField(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: 8 }} wrapperCol={{ span: 16 }} autoComplete="off" initialValues={item.props} onFinish={onFinish}>
+    <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} 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">
-        {/* <SelectItem /> */}
+      <Form.Item label="选项" name="options" wrapperCol={{ span: 24 }}>
+        <SelectItem />
       </Form.Item>
       <Form.Item label="必填" valuePropName="checked" name="required">
         <Switch />
@@ -189,50 +203,103 @@ function DDSelectField(props) {
   );
 }
 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: 8 }} wrapperCol={{ span: 16 }} autoComplete="off">
-      <Form.Item label="标题">
+    <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} autoComplete="off" initialValues={item.props} onFinish={handleFinish}>
+      <Form.Item label="标题" name="label">
         <Input />
       </Form.Item>
-      <Form.Item label="提示文字">
+      <Form.Item label="提示文字" name="placeholder">
         <Input />
       </Form.Item>
-      {/* <Form.Item label="默认值">
-        <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 } = props;
-  console.log(value);
+  const [localValue, setLocalValue] = useState([]);
   const pushItem = item => {
-    let tempValue = [...value, item];
+    let tempValue = [...localValue, {
+      id: +new Date(),
+      value: item
+    }];
+    setLocalValue(tempValue);
     onChange(tempValue);
   }
+
   const handleDelete = index => {
-    value.splice(index, 1);
+    let tempValue = [...localValue];
+    tempValue.splice(index, 1);
+    setLocalValue(tempValue);
+    onChange(tempValue);
   }
-  const handleInputOnchange = value => {
-
+  const handleInputOnChange = (targetValue, index) => {
+    let tempValue = [...localValue];
+    tempValue[index].value = targetValue;
+    setLocalValue(tempValue);
+    onChange(tempValue);
   }
+  useEffect(() => {
+    let tempValue = value.map(item => ({ id: +new Date(), value: item }));
+    setLocalValue(tempValue);
+    onChange(tempValue);
+  }, []);
+
   return (
-    <div>
+    <div style={{
+      minHeight: 40,
+      display: 'flex',
+      flexDirection: 'column'
+    }}>
       <div>
+        <div style={{
+          fontSize: 4,
+          color: '#40a9ff',
+          cursor: 'pointer',
+          lineHeight: '32px'
+        }} onClick={() => { pushItem('') }}>添加选项</div>
+      </div>
+      <div style={{ minHeight: 20 }}>
         {
-          value.map((item, index) =>
-            <div>
-              <Input />
+          localValue.map((item, index) =>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              marginBottom: 5
+            }}
+              key={item.id}
+            >
+              <Input style={{ marginRight: 10 }} value={item.value} onChange={e => handleInputOnChange(e.target.value, index)} />
               <DeleteOutlined
                 onClick={() => handleDelete(index)}
               />
             </div>)
         }
       </div>
-      <div onClick={() => { pushItem('') }}>添加选项</div>
-    </div>
+    </div >
   )
 }
 

src/components/AuditForm/constant.js

@@ -64,6 +64,7 @@ export const COMPONENT_LIST = [
       label: '多选框',
       placeholder: '请选择',
       require: false,
+      options: [],
     },
   },
   {
@@ -73,7 +74,7 @@ export const COMPONENT_LIST = [
       label: '数字输入框',
       placeholder: '请输入',
       required: false,
-      unit:''
+      unit: ''
     },
   },
 ];