修改infomation 小写

src/components/UploadImage/index.tsx

 import React, { useState, Fragment, forwardRef } from 'react'
 import { Upload, message, Button } from 'antd'
 import { LoadingOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons'
-import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
+import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';
+import { UPLOAD_TYPE } from '@/constants/index';
 import cx from 'classnames'
 import styles from './index.less'
 
@@ -35,7 +36,7 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
     action: '/api/file/file/upload',
     headers: {},
     data: {
-      fileType: 1
+      fileType: UPLOAD_TYPE
     },
     disabled: loading || disabled,
     showUploadList: false,

src/pages/content/components/CustomEditor/index.tsx

+import React from 'react';
+
+import 'braft-editor/dist/index.css';
+import BraftEditor from 'braft-editor';
+
+// const SchemaEditor = createVirtualBox('SchemaEditor', BraftEditor);
+const CustomEditor = (props) => {
+  const editorProps = props.props['x-component-props'];
+  const parentProps = props.props['x-component-parent-props']; 
+  return (
+    <div {...parentProps}>
+      <BraftEditor {...editorProps} />
+    </div>
+  )
+}
+
+CustomEditor.isFieldComponent = true;
+
+export default CustomEditor
\ No newline at end of file

src/pages/content/components/Tags/Tags.less

@@ -39,7 +39,7 @@
     flex-direction: row;
     flex-wrap: nowrap;
     cursor: pointer;
-    
+    user-select: none;
     .tagItem {
       height: 28px;
       padding: 0 6px;

src/pages/content/components/Tags/Tags.tsx

@@ -3,49 +3,56 @@ import styles from './Tags.less';
 import { CloseCircleOutlined } from '@ant-design/icons';
 
 const Tags = (props) => {
-  console.log(props);
-  const [value, setValue] = useState<number[]>([]);
+  const [tags, setTags] = useState<number[]>([]);
 
   const handleItemSelect = (params) => {
-    console.log(params);
-    const { id } = params;
-    if(value.includes(id)) {
+    const { value } = params;
+    if(tags.includes(value)) {
       return;
     }
-    setValue((state) => {
+    const onChange = props.props['x-component-props']['onChange'];
+    setTags((state) => {
       const current = state;
-      const res = [...current, id];
-      props.mutators.change(res);
+      const res = [...current, value];
+      !!onChange && onChange(res);
       return res
     })
   }
 
   const handleCancel = (params) => {
-    const { id } = params;
-    setValue((state) => {
+    const { value } = params;
+    const onChange = props.props['x-component-props']['onChange'];
+    setTags((state) => {
       const current = state;
-      const res = current.filter((item) => item !== id);
-      props.mutators.change(res);
+      const res = current.filter((item) => item !== value);
+      !!onChange && onChange(res);
       return res;
     })
   }
 
-  const dataSource = [{label: '政策法规', value: '1'},{label: '政策法规2', value: '2'}]
+  const dataSource = props.props['x-component-props']['dataSource'];
+  const selected = dataSource.filter((item) => tags.includes(item.value) )
   return (
     <div className={styles.tagContainer}>
       <div className={styles.selection}>
-        <div className={styles.selectionItem}>
-          <span>政策法规</span>
-          <span className={styles.icon} onClick={() => handleCancel({id: 1})}><CloseCircleOutlined /></span>
+        {
+          selected.map((item) => {
+            return (
+              <div className={styles.selectionItem} key={item.value}>
+                <span>{item.label}</span>
+                <span className={styles.icon} onClick={() => handleCancel(item)}><CloseCircleOutlined /></span>
               </div>
+            )
+          })
+        }
       </div>
       <p className={styles.tips}>从下列标签中选择</p>
       <div className={styles.tags}>
         {
           dataSource.map((item) => {
             return (
-              <div className={styles.tagItem} onClick={() => handleItemSelect({id: 1})}>
-                政策法规
+              <div className={styles.tagItem} key={item.value} onClick={() => handleItemSelect(item)}>
+                {item.label}
               </div>  
             )
           })

src/pages/content/infomation/index.tsx

@@ -4,14 +4,14 @@ import { Card, Input, Button, Table, Dropdown, Menu, Select  } from 'antd';
 import { createVirtualBox, createFormActions, FormEffectHooks, createEffectHook } from '@formily/antd';
 import { history } from 'umi';			
 import EyePreview from '@/components/EyePreview';
-import { useAsyncDataSource } from '../hooks/useAsyncDataSource';
 import { DownOutlined, DeleteOutlined, UpOutlined } from '@ant-design/icons';
 import { timeRange } from '@/utils/index';
 import { TimeList } from '@/pages/logistics/statusList';
-import { PublicApi } from '@/services/API';
+import { PublicApi } from '@/services/api';
 
 const { onFormInit$ } = FormEffectHooks
 const { Search } = Input;
+
 const SchemaButton = createVirtualBox('button', Button);
 const SchemaTable = createVirtualBox('SchemaTable', Table);
 const SchemaDropDown = createVirtualBox('SchemaDropDown', Dropdown.Button);

src/pages/content/infomation/infomationInfo1.tsx

-import React from 'react';
-import { SchemaForm,Submit, FormButtonGroup, Reset, createVirtualBox } from '@formily/antd';
-import { Card, Select, Input, Checkbox, Grid } from 'antd';
+import React, { useState } from 'react';
+import { SchemaForm,Submit, FormButtonGroup, Reset, createVirtualBox, createFormActions } from '@formily/antd';
+import { Card, Select, Input, Checkbox, Grid, Button } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ReutrnEle from '@/components/ReturnEle';
 import { usePageStatus } from '@/hooks/usePageStatus';
@@ -8,9 +8,30 @@ import { history, Prompt } from 'umi';
 import { FlexRowLayout } from '../components/FilterTable';
 import CustomUpload from '@/components/NiceForm/components/CustomUpload';
 import { CustomTags } from '../components/Tags';
+import CustomEditor  from '../components/CustomEditor';
+import { action } from 'mobx';
+
+const actions = createFormActions();
 
 const { TextArea } = Input;
 
+interface IOption {
+  value: number|string,
+  label: number|string
+}
+
+const sortedList = (() => {
+  let res: IOption[] = []
+  for(let i = 1; i <= 10; i++ ) {
+    let data: IOption = {
+      label: i,
+      value: i
+    }
+    res.push(data);
+  }
+  return res
+})()
+
 const schema = {
   type: 'object',
   properties: {
@@ -36,15 +57,14 @@ const schema = {
             "message": "最长30个字符，15个汉字"
           },
         },
-        column: {
-          name: 'column',
+        columnId: {
+          name: 'columnId',
           title: '栏目',
           'x-component': 'Select',
           "x-component-props": {
             options: [
               {label: '今日热点', value: '1'}
             ],
-            defaultValue: '1'
           },
           "x-rules": {
             "required": true,
@@ -58,12 +78,14 @@ const schema = {
           'x-component': 'Select',
           "x-component-props": {
             options: [
-              {label: '推荐阅读', value: '1'}
+              {label: '头条文章', value: '1'},
+              {label: '轮播新闻', value: '2'},
+              {label: '图片新闻', value: '3'},
+              {label: '推荐阅读', value: '4'}
             ],
-            defaultValue: '1'
           },
         },
-        sort: {
+        sortLayout: {
           type: 'object',
           'x-component': 'mega-layout',
           "x-component-props": {
@@ -78,31 +100,17 @@ const schema = {
             addonAfter: "{{isTop}}"
           },
           properties: {
-            sortNum: {
-              name: 'sortNum',
+            sort: {
+              name: 'sort',
               type: 'string',
               'x-component': 'Select',
               'x-component-props': {
                 style: {
                   width: '98%'
-                }
+                },
+                options: sortedList
               }
             },
-            // isTop: {
-            //   name: 'isTop',
-            //   type: 'string',
-            //   "x-component": 'Checkbox',
-            //   'x-mega-props': {
-            //     style: {
-            //       display: 'inline-block',
-            //       width: 'calc(20% - 10px)' 
-            //     }
-            //   },
-            //   "x-component-props": {
-            //     children: '置顶',
-            //     checked: true
-            //   }
-            // }
           }
         },
         view: {
@@ -111,24 +119,36 @@ const schema = {
           type: 'string',
           'x-component': 'Input',
         },
-        
-        infomationTags: {
-          name: 'infomationTags',
+        labelIds: {
+          name: 'labelIds',
           title: '咨询标签',
-          "x-component": 'CustomTags'
+          "x-component": 'CustomTags',
+          "x-component-props": {
+            layoutProps: {
+              "wrapperCol": 12,
+            },
+            "onChange": "{{tagOnChange}}",
+            dataSource: [
+              { label: '政策法规', value: 1 },
+              { label: '跨境交易', value: 2 },
+              { label: '行业报告', value: 3 }
+            ]
+          }
         },
         imageUpload: {
           type: "object",
-          title: "卡片上传文件",
+          title: "图片",
           name: "imageUpload",
           "x-component": "CustomUpload",
           "x-component-props": {
-            size: '无'
+            size: '无',
+            onChange: "{{uploadImage}}",
+            fileMaxSize: 300
           }
         },
-        desc: {
+        digest: {
           type: 'string',
-          name: 'desc',
+          name: 'digest',
           title: '摘要',
           "x-component": 'TextArea',
           "x-component-props": {
@@ -139,15 +159,45 @@ const schema = {
             "message": "最长300个字符，150个汉字"
           },
         },
+        contentLayout: {
+          'x-component': 'mega-layout',
+          "x-component-props": {
+            layoutProps: {
+              "wrapperCol": 21,
+            },
+            wrapperCol: 23,
+          },
+          properties: {
             content: {
               type: "string",
               name: 'content',
               title: '内容',
-          "x-component": 'TextArea',
-          "x-rules": {
-            "required": true,
-            "message": "最长300个字符，150个汉字"
+              "x-component": 'CustomEditor',
+              "x-component-parent-props": {
+                style: {
+                  border: '1px solid #DCDFE6'
+                }
+              },
+              "x-component-props": {
+                contentStyle: {
+                  height: 256,
                 },
+                onChange: "{{editorChange}}",
+                excludeControls: [
+                  'letter-spacing',
+                  'line-height',
+                  'clear',
+                  'headings',
+                  'list-ol',
+                  'list-ul',
+                  'remove-styles',
+                  'superscript',
+                  'subscript',
+                  'hr',
+                ]
+              },
+            }
+          }
         }
       }
     }
@@ -156,9 +206,18 @@ const schema = {
 
 const InfomationInfo = () => {
   const { id, validateId } = usePageStatus();
+  const [isTop, setIsTop] = useState(1);
+  const [labelIds, setLabelIds] = useState<number[]>([]);
   const handleSubmit = (value) => {
+    console.log(isTop)
+    console.log(labelIds);
     console.log(value)
   }
+  const handleClick = () => {
+    const test = {"blocks":[{"key":"63n0e","text":"TEST","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}};
+
+  }
+
   return (
     <div>
       <PageHeaderWrapper
@@ -170,15 +229,30 @@ const InfomationInfo = () => {
         <SchemaForm 
           onSubmit={handleSubmit}
           schema={schema}
-          components={{ Input, Select, Submit, TextArea, Checkbox, FlexRowLayout, CustomUpload, CustomTags}}
+          actions={actions}
+          components={{ 
+              Input, Select, Submit, 
+              TextArea, Checkbox, FlexRowLayout, 
+              CustomUpload, CustomTags, CustomEditor
+            }}
           expressionScope={{
             isTop: (
-                <Checkbox>置顶</Checkbox>
+                <Checkbox onChange={(e) => setIsTop(e.target.checked ? 1 : 0)}>置顶</Checkbox>
             ),
-            uploadShowDesc: (
-              <div>123</div>
-            )
-            
+            tagOnChange: (value) => {
+              setLabelIds(value);
+            },
+            editorChange: (editorState) => {
+              console.log(editorState.toRAW())
+            },
+            uploadImage: (values) => {
+              //http://10.0.0.28:88/group1/M00/00/0B/CgAAHF9rAu2AdfJMAAQ0taO65Rw451.jpg
+              actions.setFieldState('layout.imageUpload', (state) => {
+                // @ts-ignore
+                state.props['x-component-props'].imgUrl = values;
+              })
+              console.log(values)
+            }
           }}
         >
           <FormButtonGroup offset={3}>
@@ -186,6 +260,7 @@ const InfomationInfo = () => {
             <Reset>取消</Reset>
           </FormButtonGroup>
         </SchemaForm>
+          {/* <Button onClick={}></Button> */}
       </Card>
       </PageHeaderWrapper>
     </div>