feat(流程管理): 表单设计新增日历控件

src/components/AuditForm/ItemAttribute.js

@@ -7,17 +7,19 @@ function ItemAttribute(props) {
   const renderForm = () => {
     let FormContent;
     const formProps = {
-      btns: <Form.Item>
-        <Button type="primary" htmlType="submit" style={{ marginRight: 20 }}>
-          保存
-        </Button>
-      </Form.Item>,
+      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} />;
@@ -40,6 +42,9 @@ function ItemAttribute(props) {
       case 'NumberField':
         FormContent = <NumberField {...formProps} />;
         break;
+      case 'DDDateField':
+        FormContent = <DDDateField {...formProps} />;
+        break;
     }
 
     return FormContent;
@@ -69,10 +74,17 @@ function InnerContactField(props) {
   const { item, btns, onFinish } = props;
   const [form] = Form.useForm();
   const onSwitchChange = checked => {
-    form.setFieldValue("choice", checked ? 1 : 0);
-  }
+    form.setFieldValue('choice', checked ? 1 : 0);
+  };
   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={onFinish}
+    >
       <Form.Item label="标题" name="label">
         <Input />
       </Form.Item>
@@ -98,7 +110,14 @@ function DepartmentField(props) {
   const { item, btns, onFinish } = props;
   const [form] = Form.useForm();
   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={onFinish}
+    >
       <Form.Item label="标题" name="label">
         <Input />
       </Form.Item>
@@ -153,7 +172,14 @@ function TextareaField(props) {
   const { item, btns, onFinish } = props;
   const [form] = Form.useForm();
   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={onFinish}
+    >
       <Form.Item label="标题" name="label">
         <Input />
       </Form.Item>
@@ -175,17 +201,24 @@ function DDSelectField(props) {
     let arr = [];
     tempValue.options.map(item => {
       arr.push(item.value);
-    })
+    });
     if (arr) {
-      arr = arr.filter(item => item)
+      arr = arr.filter(item => item);
       arr = [...new Set(arr)];
-      tempValue.options = arr
+      tempValue.options = arr;
     }
     onFinish?.(tempValue);
-  }
+  };
 
   return (
-    <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} autoComplete="off" initialValues={item.props} onFinish={handleFinish}>
+    <Form
+      form={form}
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      autoComplete="off"
+      initialValues={item.props}
+      onFinish={handleFinish}
+    >
       <Form.Item label="标题" name="label">
         <Input />
       </Form.Item>
@@ -210,16 +243,23 @@ function DDMultiSelectField(props) {
     let arr = [];
     tempValue.options.map(item => {
       arr.push(item.value);
-    })
+    });
     if (arr) {
-      arr = arr.filter(item => item)
+      arr = arr.filter(item => item);
       arr = [...new Set(arr)];
-      tempValue.options = arr
+      tempValue.options = arr;
     }
     onFinish?.(tempValue);
-  }
+  };
   return (
-    <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} autoComplete="off" initialValues={item.props} onFinish={handleFinish}>
+    <Form
+      form={form}
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      autoComplete="off"
+      initialValues={item.props}
+      onFinish={handleFinish}
+    >
       <Form.Item label="标题" name="label">
         <Input />
       </Form.Item>
@@ -237,30 +277,57 @@ function DDMultiSelectField(props) {
   );
 }
 
+function DDDateField(props) {
+  const { item, btns, onFinish } = props;
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      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 SelectItem(props) {
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState([]);
   const pushItem = item => {
-    let tempValue = [...localValue, {
-      id: +new Date(),
-      value: item
-    }];
+    let tempValue = [
+      ...localValue,
+      {
+        id: +new Date(),
+        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: +new Date(), value: item }));
     setLocalValue(tempValue);
@@ -268,46 +335,64 @@ function SelectItem(props) {
   }, []);
 
   return (
-    <div style={{
-      minHeight: 40,
-      display: 'flex',
-      flexDirection: 'column'
-    }}>
+    <div
+      style={{
+        minHeight: 40,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       <div>
-        <div style={{
-          fontSize: 4,
-          color: '#40a9ff',
-          cursor: 'pointer',
-          lineHeight: '32px'
-        }} onClick={() => { pushItem('') }}>添加选项</div>
+        <div
+          style={{
+            fontSize: 4,
+            color: '#40a9ff',
+            cursor: 'pointer',
+            lineHeight: '32px',
+          }}
+          onClick={() => {
+            pushItem('');
+          }}
+        >
+          添加选项
+        </div>
       </div>
       <div style={{ minHeight: 20 }}>
-        {
-          localValue.map((item, index) =>
-            <div style={{
+        {localValue.map((item, index) => (
+          <div
+            style={{
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
-              marginBottom: 5
+              marginBottom: 5,
             }}
-              key={item.id}
-            >
-              <Input style={{ marginRight: 10 }} value={item.value} onChange={e => handleInputOnChange(e.target.value, index)} />
-              <DeleteOutlined
-                onClick={() => handleDelete(index)}
-              />
-            </div>)
-        }
+            key={item.id}
+          >
+            <Input
+              style={{ marginRight: 10 }}
+              value={item.value}
+              onChange={e => handleInputOnChange(e.target.value, index)}
+            />
+            <DeleteOutlined onClick={() => handleDelete(index)} />
+          </div>
+        ))}
       </div>
-    </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" initialValues={item.props} onFinish={onFinish}>
+    <Form
+      form={form}
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      autoComplete="off"
+      initialValues={item.props}
+      onFinish={onFinish}
+    >
       <Form.Item label="标题" name="label">
         <Input />
       </Form.Item>

src/components/AuditForm/constant.js

@@ -6,6 +6,7 @@ import {
   BorderOutlined,
   BlockOutlined,
   FieldNumberOutlined,
+  InsertRowAboveOutlined,
 } from '@ant-design/icons';
 
 export const COMPONENT_LIST = [
@@ -16,7 +17,7 @@ export const COMPONENT_LIST = [
       label: '联系人',
       placeholder: '请选择联系人',
       required: false,
-      choice: '0'
+      choice: '0',
     },
   },
   {
@@ -26,7 +27,7 @@ export const COMPONENT_LIST = [
       label: '选择部门',
       placeholder: '请选择部门',
       required: false,
-      choice: '0'
+      choice: '0',
     },
   },
   {
@@ -74,7 +75,17 @@ export const COMPONENT_LIST = [
       label: '数字输入框',
       placeholder: '请输入',
       required: false,
-      unit: ''
+      unit: '',
+    },
+  },
+  {
+    componentName: 'DDDateField',
+    icon: <InsertRowAboveOutlined />,
+    props: {
+      label: '日历控件',
+      placeholder: '请选择日期',
+      required: false,
+      unit: '',
     },
   },
 ];

src/components/DDComponents/DDDateField/index.js

@@ -2,12 +2,18 @@ import React from 'react';
 import { DatePicker } from 'antd';
 
 function DDDateField(props) {
-  const { format, disabled, onChange } = props;
+  const { format = '', disabled, onChange } = props;
 
   const handleChange = date => {
     onChange?.(date.format('YYYY-MM-DD'));
   };
-  return <DatePicker disabled={disabled} format={format.replace("yyyy","YYYY").replace("dd","DD")} onChange={handleChange} />;
+  return (
+    <DatePicker
+      disabled={disabled}
+      format={format.replace('yyyy', 'YYYY').replace('dd', 'DD')}
+      onChange={handleChange}
+    />
+  );
 }
 
 export default DDDateField;