表单控件值

src/components/DDComponents/DDMultiSelectField/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+function DDSelectField(props) {
+  const { options, disabled, onChange } = props;
+
+  return (
+    <Select
+      mode="multiple"
+      allowClear
+      style={{ width: '100%' }}
+      disabled={disabled}
+      onChange={value => {
+        onChange(JSON.stringify(value));
+      }}
+    >
+      {options?.map(cur => {
+        if (typeof cur == 'string') {
+          cur = JSON.parse(cur);
+        }
+
+        return (
+          <Option key={cur.key} value={cur.key}>
+            {cur.value}
+          </Option>
+        );
+      })}
+    </Select>
+  );
+}
+
+export default DDSelectField;

src/components/DDComponents/DDPhotoField/AliyunOssUploader.js

@@ -0,0 +1,107 @@
+import React from 'react'
+import { Upload, message, Button} from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+
+class AliyunOSSUpload extends React.Component {
+  state = {
+    OSSData: {},
+  };
+
+  componentDidMount() {
+    this.init();
+  }
+
+  init = () => {
+    try {
+      const { OSSData } = this.props;
+
+      this.setState({
+        OSSData,
+      });
+    } catch (error) {
+      message.error(error);
+    }
+  };
+
+  onChange = ({ file, fileList }) => {
+    const { onChange, onDone , onUploading} = this.props;
+    console.log('Aliyun OSS:', file, fileList);
+    if (onChange) {
+      onChange([...fileList]);
+    }
+
+    if (onDone) {
+      if (file.status === 'done')
+        onDone(file)
+    }
+    if(onUploading && file.status === 'uploading') {
+      onUploading({ file, fileList })
+    }
+    this.setState({ fileList: [...fileList] });
+  };
+
+  onRemove = file => {
+    const { value, onChange } = this.props;
+
+    const files = value.filter(v => v.url !== file.url);
+
+    if (onChange) {
+      onChange(files);
+    }
+  };
+
+  transformFile = file => {
+    const { OSSData } = this.state;
+    file.url = OSSData.dir + file.name;
+    return file;
+  };
+
+  getExtraData = file => {
+    const { OSSData } = this.state;
+
+    return {
+      key: file.url,
+      OSSAccessKeyId: OSSData.accessid,
+      policy: OSSData.policy,
+      Signature: OSSData.signature,
+    };
+  };
+
+  beforeUpload = async () => {
+    const { OSSData } = this.state;
+    const expire = OSSData.expire * 1000;
+
+    if (expire < Date.now()) {
+      await this.init();
+    }
+    return true;
+  };
+
+  render() {
+    const { value, directory, label, noStyle, showUploadList, accept } = this.props;
+    const props = {
+      name: 'file',
+      fileList: this.state.fileList,
+      action: this.state.OSSData.host,
+      onChange: this.onChange,
+      onRemove: this.onRemove,
+      transformFile: this.transformFile,
+      data: this.getExtraData,
+      beforeUpload: this.beforeUpload,
+      accept: accept,
+      showUploadList: showUploadList !== false,
+      headers: { "Access-Control-Allow-Origin": "*" }
+    };
+    return (
+      <Upload {...props} directory={directory}>
+        {noStyle ? label : (<Button type="primary">
+          <PlusOutlined /> {label}
+        </Button>)}
+
+      </Upload>
+    );
+  }
+}
+
+
+export default AliyunOSSUpload;

src/components/DDComponents/DDPhotoField/index.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Upload, Button } from 'antd';
+import AliyunOssUploader from '@/components/OssUpload/AliyunOssUploader';
+import { queryOSSData } from '@/services/boom';
+
+function DDPhotoField(props) {
+  const { disabled, onChange } = props;
+  const [ossData, setOssData] = useState();
+
+  const OnModelFileDone = file => {
+    var path = ossData.host + '/' + file.url;
+    onChange(path);
+  };
+  const OnUploading = file => {};
+
+  useEffect(() => {
+    queryOSSData().then(res => {
+      setOssData(res.data);
+    });
+  }, []);
+
+  return ossData ? (
+    <AliyunOssUploader
+      OSSData={ossData}
+      onDone={OnModelFileDone}
+      onUploading={OnUploading}
+      noStyle={false}
+      showUploadList={false}
+      directory={false}
+      accept={'.png, .jpg, .jpeg'}
+      label="上传图片"
+    ></AliyunOssUploader>
+  ) : null;
+}
+
+export default DDPhotoField;

src/components/DDComponents/DepartmentField/index.js

@@ -31,7 +31,7 @@ function DepartmentField(props) {
   const onChangeValue = newValue => {
     console.log(newValue);
     let dep = treeData.find(dep => dep.id == newValue);
-    onChange(dep?.name);
+    onChange(dep?.title);
   };
 
   useEffect(() => {

src/components/DDComponents/InnerContactField/index.js

@@ -10,11 +10,15 @@ function InnerContactField(props) {
   return (
     <Select
       showSearch
-      onChange={onChange}
+      onChange={value => {
+        onChange(JSON.stringify([value]));
+      }}
       filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
     >
       {userList.map(item => (
-        <Option key={item.ID}>{item.CName}</Option>
+        <Option key={item.ID} value={item.DingUserId}>
+          {item.CName}
+        </Option>
       ))}
     </Select>
   );

src/components/DDComponents/NumberField/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputNumber } from 'antd';
+
+function NumberField(props) {
+  const { onChange,disabled, unit } = props;
+
+  return (
+    <InputNumber
+      disabled={disabled}
+      formatter={value => `${value}${unit || ''}`}
+      onChange={e => {
+        onChange?.(String(e));
+      }}
+    />
+  );
+}
+
+export default NumberField;

src/components/DDComponents/index.js

@@ -1,9 +1,11 @@
-import { Button, Input, InputNumber, Select, DatePicker, Rate, Upload } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { Input, InputNumber, Select, DatePicker, Rate } from 'antd';
 import TableField from './TableField';
 import PhoneField from './PhoneField';
 import InnerContactField from './InnerContactField';
 import DepartmentField from './DepartmentField';
+import DDMultiSelectField from './DDMultiSelectField';
+import NumberField from './NumberField';
+import DDPhotoField from './DDPhotoField';
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
@@ -49,16 +51,7 @@ export default function DDComponents(props) {
       );
       break;
     case 'NumberField': //数字输入
-      component = (
-        <InputNumber
-          disabled={disabled}
-          formatter={value => `${value}${unit || ''}`}
-          onChange={e => {
-            console.log(e);
-            onChange?.(e);
-          }}
-        />
-      );
+      component = <NumberField disabled={disabled} unit={unit} />;
       break;
     case 'DDSelectField': //单选框
       component = (
@@ -78,21 +71,7 @@ export default function DDComponents(props) {
       );
       break;
     case 'DDMultiSelectField': //多选框
-      component = (
-        <Select mode="multiple" allowClear style={{ width: '100%' }} onChange={onChange}>
-          {options?.map(cur => {
-            if (typeof cur == 'string') {
-              cur = JSON.parse(cur);
-            }
-
-            return (
-              <Option key={cur.key} value={cur.key}>
-                {cur.value}
-              </Option>
-            );
-          })}
-        </Select>
-      );
+      component = <DDMultiSelectField disabled={disabled} options={options} />;
       break;
     case 'DDDateField': //日期控件
       component = <DatePicker format={format} onChange={onChange} />;
@@ -107,11 +86,7 @@ export default function DDComponents(props) {
       component = <PhoneField onChange={onChange} />;
       break;
     case 'DDPhotoField': //图片控件
-      component = (
-        <Upload>
-          <Button icon={<PlusOutlined />}>添加图片</Button>
-        </Upload>
-      );
+      component = <DDPhotoField />;
       break;
     case 'MoneyField': //金额控件
       component = <Input placeholder={placeholder} onChange={onChange} />;
@@ -130,7 +105,7 @@ export default function DDComponents(props) {
       component = <InnerContactField onChange={onChange}></InnerContactField>;
       break;
     case 'DepartmentField': //部门控件
-      component = <DepartmentField onChange={onChange} />;
+      component = <DepartmentField />;
       break;
     case 'RelateField': //关联审批单
       break;