新增文字说明控件、附件上传控件、日历控件

.umirc.ts

@@ -15,16 +15,10 @@ export default defineConfig({
   title: '金科环境数字化管理平台',
   publicPath: process.env.NODE_ENV == 'development' ? '/' : '/gt-dig/',
   proxy: {
-    '/api/v1/oa': {
-      // target: 'http://47.96.12.136:8788/',
-      // target: 'http://47.96.12.136:8896/',
-      target: 'http://120.55.44.4:8902/',
-      changeOrigin: true,
-    },
     '/api': {
       // target: 'http://47.96.12.136:8788/',
-      // target: 'http://47.96.12.136:8888/',
-      target: 'http://120.55.44.4:8902/',
+      target: 'http://47.96.12.136:8895/',
+      // target: 'http://120.55.44.4:8902/',
       changeOrigin: true,
     },
   },

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 => {
+      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>

src/components/AuditForm/constant.js

@@ -6,6 +6,9 @@ import {
   BorderOutlined,
   BlockOutlined,
   FieldNumberOutlined,
+  InsertRowAboveOutlined,
+  FolderAddOutlined,
+  FontColorsOutlined,
 } from '@ant-design/icons';
 
 export const COMPONENT_LIST = [
@@ -77,4 +80,33 @@ export const COMPONENT_LIST = [
       unit: ''
     },
   },
+  {
+    componentName: 'DDDateField',
+    icon: <InsertRowAboveOutlined />,
+    props: {
+      label: '日历控件',
+      placeholder: '请选择日期',
+      required: false,
+      unit: ''
+    },
+  },
+  {
+    componentName: 'DDAttachment',
+    icon: <FolderAddOutlined />,
+    props: {
+      label: '附件控件',
+      placeholder: '请上传附件',
+      required: false,
+    },
+  },
+  {
+    componentName: 'TextNote',
+    icon: <FontColorsOutlined />,
+    props: {
+      label: '文本说明控件',
+      bizAlias: '',
+      placeholder: '请输入文本',
+      required: false,
+    },
+  },
 ];

src/components/DDComponents/DDAttachment/index.js

@@ -1,30 +1,30 @@
-import React, { useState, useEffect } from 'react';
-import { Upload, Button, message } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader';
+import { queryOSSData } from '@/services/boom';
+import { useParams, useRequest } from '@umijs/max';
 
 function DDAttachment(props) {
   const { disabled, onChange } = props;
-  const uploadProps = {
-    name: 'file',
-    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-    headers: {
-      authorization: 'authorization-text',
-    },
-    onChange(info) {
-      if (info.file.status === 'done') {
-        console.log(info.file.url);
-        onChange(info.file.url)
-        message.success(`附件${info.file.name}上传成功`);
-      } else if (info.file.status === 'error') {
-        message.error(`附件${info.file.name}上传失败`);
-      }
-    },
+  const { oaId } = useParams();
+
+  const { data: OSSData } = useRequest(queryOSSData, {
+    defaultParams: [{ ids: oaId }],
+    cacheKey: `ossData-${oaId}`,
+  });
+
+  const OnModelFileDone = (file) => {
+    onChange(OSSData.host + '/' + file.url);
   };
 
+  if (!OSSData) return;
   return (
-    <Upload {...uploadProps}>
-      <Button icon={<PlusOutlined />}>添加附件</Button>
-    </Upload>
+    <AliyunOSSUpload
+      OSSData={OSSData}
+      onDone={OnModelFileDone}
+      directory={false}
+      noStyle={false}
+      label="上传文件"
+      disabled={disabled}
+    />
   );
 }
 

src/components/DDComponents/DDDateField/index.js

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

src/components/DDComponents/TextNote/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function TextNote(props) {
+  const { value } = props;
+
+  return <div>{value}</div>;
+}
+
+export default TextNote;

src/components/DDComponents/index.js

@@ -10,9 +10,7 @@ import DDSelectField from './DDSelectField';
 import DDDateField from './DDDateField';
 import DDDateRangeField from './DDDateRangeField';
 import DDAttachment from './DDAttachment';
-
-const { Option } = Select;
-const { RangePicker } = DatePicker;
+import TextNote from './TextNote';
 
 export default function DDComponents(props) {
   const { item, onChange } = props;
@@ -62,7 +60,12 @@ export default function DDComponents(props) {
       break;
     case 'DDDateField': //日期控件
       component = (
-        <DDDateField format={format} disabled={disabled} onChange={onChange} />
+        <DDDateField
+          placeholder={placeholder}
+          format={format}
+          disabled={disabled}
+          onChange={onChange}
+        />
       );
       break;
     case 'DDDateRangeField': //时间区间控件
@@ -75,8 +78,7 @@ export default function DDComponents(props) {
       );
       break;
     case 'TextNote': //文本说明控件
-      console.info('文本说明控件!');
-      console.log(item);
+      component = <TextNote value={placeholder} />;
       break;
     case 'PhoneField': //电话控件
       component = <PhoneField onChange={onChange} />;
@@ -91,7 +93,7 @@ export default function DDComponents(props) {
       component = <TableField item={item} />;
       break;
     case 'DDAttachment': //附件
-      // component = <DDAttachment />
+      component = <DDAttachment onChange={onChange} />;
       // component = '附件控件未渲染!'
       console.info('附件控件未渲染!');
       break;

src/pages/Flow/OaDetail.js

@@ -3,12 +3,12 @@ import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { Button, Col, Empty, Row, message } from 'antd';
 import ApprovalProcess from './components/ApprovalProcess';
 import AuditDetailed from './components/AuditDetailed';
-import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader';
+// import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader';
 import {
   queryProcessFlows,
   createAduit,
   advanceSubmitNextNode,
-  queryOSSData,
+  // queryOSSData,
 } from '@/services/boom';
 import { useParams, useRequest, useNavigate } from 'umi';
 
@@ -23,10 +23,10 @@ const OaDetail = () => {
   const { data, loading } = useRequest(queryProcessFlows, {
     defaultParams: [{ ids: oaId }],
   });
-  const { data: OSSData } = useRequest(queryOSSData, {
-    defaultParams: [{ ids: oaId }],
-  });
-  console.log(OSSData);
+  // const { data: OSSData } = useRequest(queryOSSData, {
+  //   defaultParams: [{ ids: oaId }],
+  // });
+
   const { loading: createLoadin, run: createRun } = useRequest(createAduit, {
     manual: true,
     onSuccess() {
@@ -62,6 +62,7 @@ const OaDetail = () => {
           return {
             name: itemProps.label,
             id: itemProps.id,
+            type: item.componentName,
             value: [allValues[itemProps.id]] || undefined,
           };
         }
@@ -84,21 +85,26 @@ const OaDetail = () => {
       if (item[0].type == 'role') return item[0].nowValue;
       return item[0].value;
     });
+    let files = [],
+      formData = [];
+    form.forEach((item) => {
+      if (item.type == 'DDAttachment') {
+        files = files.concat(item.value);
+      } else {
+        formData.push(item);
+      }
+    });
     createRun({
       flow_id: Number(oaId),
-      form: JSON.stringify(form),
+      form: JSON.stringify(formData),
       audit_list,
-      files: uploadList.current.join(','),
+      files: files.join(','),
     });
   };
-  const OnModelFileDone = (file) => {
-    var path = OSSData.host + '/' + file.url;
-    uploadList.current = [...uploadList.current, path];
-    // const files = form.getFieldsValue('files');
-    // form.setFieldValue('files', files.concat(path));
-    // console.log(uploadList.current);
-    // setThumbnail(path);
-  };
+  // const OnModelFileDone = (file) => {
+  //   var path = OSSData.host + '/' + file.url;
+  //   uploadList.current = [...uploadList.current, path];
+  // };
 
   return (
     <PageContainer
@@ -112,7 +118,7 @@ const OaDetail = () => {
       <ProCard style={{ minHeight: '80vh' }}>
         <Row gutter={24}>
           <Col span={12}>
-            {OSSData && (
+            {/* {OSSData && (
               <AliyunOSSUpload
                 OSSData={OSSData}
                 onDone={OnModelFileDone}
@@ -120,7 +126,7 @@ const OaDetail = () => {
                 noStyle={false}
                 label="上传文件"
               />
-            )}
+            )} */}
             <AuditDetailed
               items={data?.formData}
               onValuesChange={advanceSubmit}

src/pages/Flow/components/AuditDetailed.js

@@ -57,7 +57,7 @@ const AuditDetailed = (props) => {
       }
     }
     let formLabel;
-    if (bizAlias) {
+    if (bizAlias !== undefined) {
       formLabel = bizAlias;
     } else {
       try {