钉钉数据渲染表单

src/pages/PurchaseAdmin/PurchaseList/Detail/AuditDetailed.js

@@ -0,0 +1,264 @@
+import { Button, Form, Input, InputNumber, Select, DatePicker, Rate, Upload } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+const { Option } = Select;
+const layout = {
+  labelCol: {
+    span: 8,
+  },
+  wrapperCol: {
+    span: 16,
+  },
+};
+
+const AuditDetailed = ({ items }) => {
+  const onFinish = values => {
+    console.log(values);
+  };
+  const selectBefore = (
+    <Select defaultValue="是" className="select-before">
+      <Option value="是">是</Option>
+      <Option value="否">否</Option>
+    </Select>
+  );
+  const prefixSelector = (
+    <Form.Item name="prefix" noStyle>
+      <Select style={{ width: 70 }}>
+        <Option value="86">+86</Option>
+        <Option value="87">+87</Option>
+      </Select>
+    </Form.Item>
+  );
+
+  const children = [];
+  for (let i = 10; i < 36; i++) {
+    children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
+  }
+
+  const handleChange = value => {
+    console.log(`selected ${value}`);
+  };
+
+  const GetComponent = item => {
+    const {
+      id,
+      label,
+      bizAlias,
+      required,
+      placeholder,
+      options,
+      align,
+      statField,
+      hideLabel,
+      objOptions,
+      format,
+      pushToAttendance,
+      labelEditableFreeze,
+      requiredEditableFreeze,
+      unit,
+      extract,
+      link,
+      payEnable,
+      bizType,
+      childFieldVisible,
+      notPrint,
+      verticalPrint,
+      hiddenInApprovalDetail,
+      disabled,
+      notUpper,
+      children, // 子控件
+    } = item.props;
+    //{ id: startId, label: startLabel, upper, unit } = statField;是个array
+    //objOptions ={value}
+    // children ={componentName, props ={ id,label,bizAlias,required,}}
+
+    console.log(item.props);
+    let component;
+    switch (item.componentName) {
+      case 'TextField': //单行输入
+        component = <Input placeholder={placeholder} />;
+        break;
+      case 'TextareaField': //多行输入
+        component = <Input.TextArea placeholder={placeholder} />;
+        break;
+      case 'NumberField': //数字输入
+        break;
+      case 'DDSelectField': //单选框
+        component = (
+          <Select style={{ width: '100%' }} defaultValue="">
+            {options.map(cur => (
+              <Option key={cur.key} value={cur.key}>
+                {cur.value}
+              </Option>
+            ))}
+          </Select>
+        );
+        break;
+      case 'DDMultiSelectField': //多选框
+        component = (
+          <Select mode="multiple" allowClear style={{ width: '100%' }} defaultValue="">
+            {options.map(cur => (
+              <Option value={cur}>{cur}</Option>
+            ))}
+          </Select>
+        );
+        break;
+      case 'DDDateField': //日期控件
+        component = <DatePicker format={format} onChange={() => {}} />;
+        break;
+      case 'DDDateRangeField': //时间区间控件
+        break;
+      case 'TextNote': //文本说明控件
+        break;
+      case 'PhoneField': //电话控件
+        break;
+      case 'DDPhotoField': //图片控件
+        component = (
+          <Upload>
+            <Button icon={<PlusOutlined />}>添加图片</Button>
+          </Upload>
+        );
+        break;
+      case 'MoneyField': //金额控件
+        component = <Input placeholder={placeholder} />;
+        break;
+      case 'TableField': //明细控件
+        break;
+      case 'DDAttachment': //附件
+        break;
+      case 'InnerContactField': //联系人控件
+        break;
+      case 'DepartmentField': //部门控件
+        break;
+      case 'RelateField': //关联审批单
+        break;
+      case 'AddressField': //省市区控件
+        break;
+      case 'StarRatingField': //评分控件
+        break;
+      case 'FormRelateField': //关联控件
+        break;
+    }
+    return (
+      <Form.Item
+        name={['user', 'introduction']}
+        label={bizAlias || label}
+        rules={[
+          {
+            required,
+          },
+        ]}
+      >
+        {component}
+        {notUpper == 1 && <p>大写</p>}
+      </Form.Item>
+    );
+  };
+
+  return (
+    <Form
+      style={{ height: '300px', overflowY: 'scroll' }}
+      layout="vertical"
+      autoComplete="off"
+      onFinish={onFinish}
+    >
+      <Form.Item
+        name={['user', 'name']}
+        label="单行输入"
+        rules={[
+          {
+            required: true,
+          },
+        ]}
+      >
+        <Input placeholder="Basic usage" />
+      </Form.Item>
+      <Form.Item
+        name={['user', 'name']}
+        label="金额输入"
+        rules={[
+          {
+            required: true,
+          },
+        ]}
+      >
+        <Input placeholder="Basic usage" />
+        <p>大写</p>
+      </Form.Item>
+      <Form.Item
+        name={['user', 'age']}
+        label="数字输入"
+        rules={[
+          {
+            type: 'number',
+            min: 0,
+            max: 99,
+          },
+        ]}
+      >
+        <InputNumber placeholder="Basic usage" />
+      </Form.Item>
+      <Form.Item
+        name={['user', 'introduction']}
+        tooltip="This is a required field"
+        label="多行输入"
+      >
+        <Input.TextArea placeholder="Basic usage" />
+      </Form.Item>
+      <Form.Item
+        name="phone"
+        label="Phone Number"
+        rules={[{ required: true, message: 'Please input your phone number!' }]}
+      >
+        <Input addonBefore={prefixSelector} style={{ width: '100%' }} />
+      </Form.Item>
+      <Form.Item name={['user', 'introduction']} label="单选框">
+        <Select style={{ width: '30%' }} defaultValue="Home">
+          <Option value="Home">Home</Option>
+          <Option value="Company">Company</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item name={['user', 'introduction']} label="多选框">
+        <Select
+          mode="multiple"
+          allowClear
+          style={{ width: '100%' }}
+          placeholder="Please select"
+          defaultValue={['a10', 'c12']}
+          onChange={handleChange}
+        >
+          {children}
+        </Select>
+      </Form.Item>
+      <Form.Item name={['user', 'introduction']} label="时间组件">
+        <DatePicker onChange={() => {}} />
+      </Form.Item>
+      <Form.Item name={['user', 'introduction']} label="开始时间">
+        <DatePicker onChange={() => {}} />
+        <Select style={{ width: '30%' }} defaultValue="Home">
+          <Option value="Home">上午</Option>
+          <Option value="Company">下午</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item name={['user', 'introduction']} label="结束时间">
+        <DatePicker onChange={() => {}} />
+        <Select style={{ width: '30%' }} defaultValue="Home">
+          <Option value="Home">上午</Option>
+          <Option value="Company">下午</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item name={['user', 'introduction']} label="评分">
+        <Rate />
+      </Form.Item>
+      {/* <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item> */}
+
+      {items.map(item => GetComponent(item))}
+    </Form>
+  );
+};
+
+export default AuditDetailed;

src/pages/PurchaseAdmin/PurchaseList/Detail/CommitAuditModal.js

@@ -5,6 +5,7 @@ import { connect } from 'dva';
 import { isArray, result } from 'lodash';
 import { useForm } from 'rc-field-form';
 import { async } from '@antv/x6/lib/registry/marker/async';
+import AuditDetailed from './AuditDetailed';
 
 const { TextArea } = Input;
 const { Option } = Select;
@@ -20,6 +21,130 @@ function CommitAuditModal(props) {
   const [auditList, setAuditList] = useState([]); //用于创建Tabs表单
   const [form] = Form.useForm();
 
+  const res = {
+    result: {
+      creatorUserId: '26652461xxxx5992',
+      appUuid: 'xxxx',
+      formCode: 'PROC-17428B8C-6C60-470E-xxxx-64F1037AE067',
+      formUuid: 'FORM-28215C3E-00E3-4118-xxxx-4091F828AF2F',
+      name: '示例模板',
+      memo: 'xxxx',
+      ownerId: '25xxxx01',
+      ownerIdType: '25xxxx01',
+      schemaContent: {
+        title: '示例模板',
+        icon: 'common',
+        items: [
+          {
+            componentName: 'TextareaField',
+            props: {
+              staffStatusEnabled: false,
+              holidayOptions: [],
+              id: 'TextareaField-JBQAB8UJ',
+              label: '印制目的',
+              placeholder: '',
+              required: true,
+              push: {},
+            },
+          },
+          {
+            componentName: 'DDSelectField',
+            props: {
+              staffStatusEnabled: false,
+              holidayOptions: [],
+              options: [
+                { value: '是', key: 'option_JYF5F53R' },
+                { value: '否', key: 'option_JYF5F53S' },
+              ],
+              id: 'DDSelectField-JBRMGAXZ',
+              label: '是否日常项目',
+              placeholder: '',
+              required: true,
+            },
+          },
+          {
+            componentName: 'TextField',
+            props: {
+              staffStatusEnabled: false,
+              holidayOptions: [],
+              id: 'TextField-JBQAB8UH',
+              label: '项目号',
+              placeholder: '',
+              required: true,
+              push: {},
+            },
+          },
+          {
+            componentName: 'TextareaField',
+            props: {
+              staffStatusEnabled: false,
+              holidayOptions: [],
+              id: 'TextareaField-JBQAB8UF',
+              label: '印制内容',
+              placeholder: '包含印制份数',
+              required: true,
+              push: {},
+            },
+          },
+          {
+            componentName: 'MoneyField',
+            props: {
+              staffStatusEnabled: false,
+              holidayOptions: [],
+              notUpper: '1',
+              id: 'MoneyField-JBQAB8UK',
+              label: '预计印制费（元）',
+              placeholder: '可询问印刷社后填写',
+              required: true,
+            },
+          },
+          {
+            componentName: 'TextareaField',
+            props: {
+              staffStatusEnabled: false,
+              id: '请假事由',
+              label: '请假事由',
+              placeholder: '请输入请假事由',
+              required: false,
+            },
+          },
+          {
+            componentName: 'DDPhotoField',
+            props: {
+              staffStatusEnabled: false,
+              id: '图片',
+              label: '上传病假单（如病假）',
+            },
+          },
+          {
+            componentName: 'TextNote',
+            props: {
+              staffStatusEnabled: false,
+              holidayOptions: [],
+              link: 'https://meta.zbox.filez.com/v/link/view/ae35765eb1ad4444a863a4feefa8b41c',
+              notPrint: '0',
+              bizAlias: '',
+              id: 'TextNote_1NYDZYJ979K00',
+            },
+          },
+        ],
+      },
+      icon: 'null',
+      appType: 0,
+      bizType: 'hrm.xxxx',
+      engineType: 0,
+      status: 'PUBLISHED',
+      listOrder: 1,
+      customSetting: 'null',
+      procType: 'inner',
+      visibleRange: 'PRIVATE',
+      gmtCreate: '1638326995000',
+      gmtModified: '1640344585000',
+    },
+  };
+  const [schemaContent, setSchemaContent] = useState(res.result.schemaContent);
+  console.log(schemaContent);
+
   useEffect(() => {
     const { edges, nodes } = flowDetail;
     let Id = version.template_node_id;
@@ -220,10 +345,6 @@ function CommitAuditModal(props) {
     console.log('=====================', key);
   };
 
-  useEffect(() => {
-    console.log('========================', auditList);
-  }, [auditList]);
-
   const CascaderNode = index => {
     return (
       <Form.Item
@@ -270,8 +391,11 @@ function CommitAuditModal(props) {
       </Form>
       <Tabs defaultActiveKey="1" onChange={onTabChange}>
         {auditList.map(item => (
-          <TabPane tab={item.label} key={`${item.Id}_${item.label}`}>
-            {item.label}
+          // <TabPane tab={item.label} key={`${item.Id}_${item.label}`}>
+          //   <AuditDetailed />
+          // </TabPane>
+          <TabPane tab={schemaContent.title} key={`${item.Id}_${item.label}`}>
+            <AuditDetailed items={schemaContent.items} />
           </TabPane>
         ))}
       </Tabs>