自定义组件新增

src/components/AuditForm/ItemAttribute.js

@@ -1,32 +1,44 @@
-import { Form, Button, Switch, Input } from 'antd';
+import { Form, Button, Switch, Input, Radio, Space } from 'antd';
 import React from 'react';
-
+import { DeleteOutlined } from '@ant-design/icons';
 function ItemAttribute(props) {
   const { item, onChange } = props;
 
   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 item={item} onChange={onChange} />;
+        FormContent = <InnerContactField {...formProps} />;
         break;
       case 'DepartmentField':
-        FormContent = <DepartmentField item={item} onChange={onChange} />;
+        FormContent = <DepartmentField {...formProps} />;
         break;
       case 'TextField':
-        FormContent = <TextField item={item} onChange={onChange} />;
+        FormContent = <TextField {...formProps} />;
         break;
       case 'TextareaField':
-        FormContent = <TextareaField item={item} onChange={onChange} />;
+        FormContent = <TextareaField {...formProps} />;
         break;
       case 'DDSelectField':
-        FormContent = <DDSelectField item={item} onChange={onChange} />;
+        FormContent = <DDSelectField {...formProps} />;
         break;
       case 'DDMultiSelectField':
         FormContent = <DDMultiSelectField item={item} onChange={onChange} />;
         break;
       case 'NumberField':
-        FormContent = <NumberField item={item} onChange={onChange} />;
+        FormContent = <NumberField {...formProps} />;
         break;
     }
 
@@ -54,48 +66,67 @@ function ItemAttribute(props) {
 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: 8 }} wrapperCol={{ span: 16 }} autoComplete="off">
-      <Form.Item label="标题">
+    <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} autoComplete="off" initialValues={item.props} onFinish={onFinish}>
+      <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="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: 8 }} wrapperCol={{ span: 16 }} autoComplete="off">
-      <Form.Item label="标题">
+    <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} autoComplete="off" initialValues={item.props} onFinish={onFinish}>
+      <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="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 TextField(props) {
-  const { item, onChange } = props;
+  const { item, btns, onFinish } = props;
   const [form] = Form.useForm();
 
   const onReset = () => {
     form.resetFields();
   };
-  const onFinish = values => {
-    console.log(values);
-    onChange?.(values);
-  };
   return (
     <Form
       form={form}
@@ -111,52 +142,49 @@ function TextField(props) {
       <Form.Item label="提示文字" name="placeholder">
         <Input />
       </Form.Item>
-      <Form.Item label="默认值" name="defaultValue">
-        <Input />
-      </Form.Item>
-      <Form.Item label="必填" valuePropName="checked" name="require">
+      <Form.Item label="必填" valuePropName="checked" name="required">
         <Switch />
       </Form.Item>
-      <Form.Item>
-        <Button type="primary" htmlType="submit" style={{ marginRight: 20 }}>
-          保存
-        </Button>
-        <Button htmlType="button" onClick={onReset}>
-          重置
-        </Button>
-      </Form.Item>
+      {btns}
     </Form>
   );
 }
 function TextareaField(props) {
+  const { item, btns, onFinish } = props;
   const [form] = Form.useForm();
   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={onFinish}>
+      <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="必填" valuePropName="checked" name="required">
+        <Switch />
+      </Form.Item>
+      {btns}
     </Form>
   );
 }
 function DDSelectField(props) {
+  const { item, btns, onFinish } = props;
   const [form] = Form.useForm();
   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={onFinish}>
+      <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">
+        {/* <SelectItem /> */}
+      </Form.Item>
+      <Form.Item label="必填" valuePropName="checked" name="required">
+        <Switch />
+      </Form.Item>
+      {btns}
     </Form>
   );
 }
@@ -176,19 +204,56 @@ function DDMultiSelectField(props) {
     </Form>
   );
 }
+
+function SelectItem(props) {
+  const { value, onChange } = props;
+  console.log(value);
+  const pushItem = item => {
+    let tempValue = [...value, item];
+    onChange(tempValue);
+  }
+  const handleDelete = index => {
+    value.splice(index, 1);
+  }
+  const handleInputOnchange = value => {
+
+  }
+  return (
+    <div>
+      <div>
+        {
+          value.map((item, index) =>
+            <div>
+              <Input />
+              <DeleteOutlined
+                onClick={() => handleDelete(index)}
+              />
+            </div>)
+        }
+      </div>
+      <div onClick={() => { pushItem('') }}>添加选项</div>
+    </div>
+  )
+}
+
 function NumberField(props) {
+  const { item, btns, onFinish } = props;
   const [form] = Form.useForm();
   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={onFinish}>
+      <Form.Item label="标题" name="label">
         <Input />
       </Form.Item>
-      <Form.Item label="提示文字">
+      <Form.Item label="提示文字" name="placeholder">
         <Input />
       </Form.Item>
-      {/* <Form.Item label="默认值">
+      <Form.Item label="单位" name="unit">
         <Input />
-      </Form.Item> */}
+      </Form.Item>
+      <Form.Item label="必填" valuePropName="checked" name="required">
+        <Switch />
+      </Form.Item>
+      {btns}
     </Form>
   );
 }

src/components/AuditForm/constant.js

@@ -15,16 +15,18 @@ export const COMPONENT_LIST = [
     props: {
       label: '联系人',
       placeholder: '请选择联系人',
-      require: false,
+      required: false,
+      choice: '0'
     },
   },
   {
     componentName: 'DepartmentField',
     icon: <TeamOutlined />,
     props: {
-      label: '部门',
+      label: '选择部门',
       placeholder: '请选择部门',
-      require: false,
+      required: false,
+      choice: '0'
     },
   },
   {
@@ -33,7 +35,7 @@ export const COMPONENT_LIST = [
     props: {
       label: '单行输入框',
       placeholder: '请输入',
-      require: false,
+      required: false,
     },
   },
   {
@@ -42,7 +44,7 @@ export const COMPONENT_LIST = [
     props: {
       label: '多行输入框',
       placeholder: '请输入',
-      require: false,
+      required: false,
     },
   },
   {
@@ -51,7 +53,7 @@ export const COMPONENT_LIST = [
     props: {
       label: '单选框',
       placeholder: '请选择',
-      require: false,
+      required: false,
       options: [],
     },
   },
@@ -70,7 +72,8 @@ export const COMPONENT_LIST = [
     props: {
       label: '数字输入框',
       placeholder: '请输入',
-      require: false,
+      required: false,
+      unit:''
     },
   },
 ];