|
@@ -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 => {
|
|
|
+ onFinish: (values) => {
|
|
|
console.log(values);
|
|
|
onChange?.(values);
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ };
|
|
|
switch (item.componentName) {
|
|
|
case 'InnerContactField':
|
|
|
FormContent = <InnerContactField {...formProps} />;
|
|
@@ -40,6 +42,15 @@ function ItemAttribute(props) {
|
|
|
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;
|
|
@@ -68,11 +79,18 @@ export default ItemAttribute;
|
|
|
function InnerContactField(props) {
|
|
|
const { item, btns, onFinish } = props;
|
|
|
const [form] = Form.useForm();
|
|
|
- const onSwitchChange = checked => {
|
|
|
- form.setFieldValue("choice", checked ? 1 : 0);
|
|
|
- }
|
|
|
+ const onSwitchChange = (checked) => {
|
|
|
+ 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 +116,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>
|
|
@@ -149,11 +174,89 @@ function TextField(props) {
|
|
|
</Form>
|
|
|
);
|
|
|
}
|
|
|
+function DDAttachment(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>
|
|
|
+ <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: 8 }}
|
|
|
+ wrapperCol={{ span: 16 }}
|
|
|
+ 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: 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 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>
|
|
@@ -170,22 +273,29 @@ function TextareaField(props) {
|
|
|
function DDSelectField(props) {
|
|
|
const { item, btns, onFinish } = props;
|
|
|
const [form] = Form.useForm();
|
|
|
- const handleFinish = value => {
|
|
|
+ const handleFinish = (value) => {
|
|
|
let tempValue = { ...value };
|
|
|
let arr = [];
|
|
|
- tempValue.options.map(item => {
|
|
|
+ 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>
|
|
@@ -205,21 +315,28 @@ function DDSelectField(props) {
|
|
|
function DDMultiSelectField(props) {
|
|
|
const { item, btns, onFinish } = props;
|
|
|
const [form] = Form.useForm();
|
|
|
- const handleFinish = value => {
|
|
|
+ const handleFinish = (value) => {
|
|
|
let tempValue = { ...value };
|
|
|
let arr = [];
|
|
|
- tempValue.options.map(item => {
|
|
|
+ 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>
|
|
@@ -240,74 +357,95 @@ function DDMultiSelectField(props) {
|
|
|
function SelectItem(props) {
|
|
|
const { value, onChange } = props;
|
|
|
const [localValue, setLocalValue] = useState([]);
|
|
|
- const pushItem = item => {
|
|
|
- let tempValue = [...localValue, {
|
|
|
- id: +new Date(),
|
|
|
- value: item
|
|
|
- }];
|
|
|
+ const pushItem = (item) => {
|
|
|
+ let tempValue = [
|
|
|
+ ...localValue,
|
|
|
+ {
|
|
|
+ id: +new Date(),
|
|
|
+ value: item,
|
|
|
+ },
|
|
|
+ ];
|
|
|
setLocalValue(tempValue);
|
|
|
onChange(tempValue);
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
- const handleDelete = index => {
|
|
|
+ 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 }));
|
|
|
+ let tempValue = value.map((item) => ({ id: +new Date(), value: item }));
|
|
|
setLocalValue(tempValue);
|
|
|
onChange(tempValue);
|
|
|
}, []);
|
|
|
|
|
|
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>
|