bug fix

src/components/XForm/WrapperForm.jsx

@@ -62,7 +62,7 @@ class WrapperForm extends React.Component {
   render () {
     const {fields, form, children, submitBtn, cancelBtn, ...formProps} = this.props;
 
-    const FeildItems = (fields || []).map((props, inx) => (<WrapperItem key={inx} {...props} form={form} />))
+    const FeildItems = (fields || []).filter(x => x).map((props, inx) => (<WrapperItem key={inx} {...props} form={form} />))
     
     return (
       <Form {...formItemLayout} {...formProps} onSubmit={this.handleSubmit}>

src/components/XForm/WrapperItem.jsx

@@ -55,6 +55,7 @@ const WrapperItem = (props) => {
     dict,
     action,
     props: fieldProps,
+    hidden = false,
     ...restProps
   } = props;
 
@@ -82,7 +83,7 @@ const WrapperItem = (props) => {
   // 没有类型与组件, 生成隐藏字段
   if (!type && !render) {
     getFieldDecorator(name, config);
-    return <></>;
+    return null;
   }
 
   const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.label}</Option>))
@@ -127,12 +128,15 @@ const WrapperItem = (props) => {
     }
   }
 
-  if (!label && !name && !action) return Field;
+  const visible = typeof hidden === 'function' ? !hidden() : !hidden;
+
+  if (!label && !name && !action) return visible ? Field : null;
   
   const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps
+  const labelNode = typeof label === 'function' ? label() : label;
 
-  return (
-    <Item label={label} {...itemProps}>
+  return visible && (
+    <Item label={labelNode} {...itemProps}>
       {action ? Field : getFieldDecorator(name, config)(Field)}
     </Item>
   )

src/components/XForm/index.jsx

@@ -3,5 +3,7 @@ import { Form } from 'antd';
 import WrapperForm from './WrapperForm';
 import { FieldTypes } from './WrapperItem';
 
+const createForm = option => Form.create(option)(WrapperForm);
+
 export default Form.create()(WrapperForm);
-export { FieldTypes };
+export { FieldTypes, createForm };

src/pages/carouselFigure/SelectActivity.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import{ Select, Modal } from 'antd';
+import { apis, fetch } from '../../utils/request';
+
+const getActivities = fetch(apis.activity.list)
+
+export default (props) => {
+  const {
+    value,
+    onChange,
+    ...rest
+  } = props;
+
+  const [list, setList] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [ activity, setActivity ] = useState({ dynamicId: undefined, title: '请选择活动' })
+  const getActTitle = val => ((list.filter(x => x.dynamicId === val)[0]) || {}).title || '请选择活动'
+  const setAct = val => setActivity({ dynamicId: val, title: getActTitle(val) })
+
+  const buildingId = props.buildingId()
+  
+  useEffect(() => {
+    getActivities({
+      params: {
+        buildingId,
+        pageNum: 1,
+        pageSize: 999,
+      }
+    }).then((data) => {
+      setList(data.list || [])
+
+      console.log('----', buildingId, value)
+
+      setAct(buildingId ? undefined : value);
+    })
+  }, [buildingId]);
+
+  if (value !== activity.dynamicId) {
+    setAct(value);
+  }
+
+  let chooseVal = value
+
+  const handleChange = val => chooseVal = val
+
+  return (
+    <div>
+      <div onClick={() => setVisible(true)}>{activity.title}</div>
+      <Modal
+        title="请选择活动"
+        visible={visible}
+        onOk={() => {
+          setAct(chooseVal)
+          onChange(chooseVal)
+          setVisible(false)
+        }}
+        onCancel={() => setVisible(false)}
+      >
+        <Select defaultValue={chooseVal} onChange={handleChange} style={{ width: '90%' }}>
+          {
+            list.map(x => (<Select.Option key={x.dynamicId} value={x.dynamicId}>{x.title}</Select.Option>))
+          }
+        </Select>
+      </Modal>
+    </div>
+  );
+}

src/pages/carouselFigure/SelectNews.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import{ Select, Modal } from 'antd';
+import { apis, fetch } from '../../utils/request';
+
+const getNewsList = fetch(apis.news.getList)
+
+export default (props) => {
+  const {
+    value,
+    onChange,
+    ...rest
+  } = props;
+
+  const [list, setList] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [ news, setNews ] = useState({ newsId: undefined, newsName: '请选择资讯' })
+  const getNewsTitle = val => ((list.filter(x => x.newsId === val)[0]) || {}).newsName || '请选择资讯'
+  const updateNews = val => setNews({ newsId: val, newsName: getNewsTitle(val) })
+
+  const buildingId = props.buildingId()
+  
+  useEffect(() => {
+    getNewsList({
+      params: {
+        buildingId,
+        pageNum: 1,
+        pageSize: 999,
+      }
+    }).then((data) => {
+      setList(data.list || [])
+
+      updateNews(buildingId ? undefined : value);
+    })
+  }, [buildingId]);
+
+  if (value !== news.newsId) {
+    updateNews(value);
+  }
+
+  let chooseVal = value
+
+  const handleChange = val => chooseVal = val
+
+  return (
+    <div>
+      <div onClick={() => setVisible(true)}>{news.newsName}</div>
+      <Modal
+        title="请选择资讯"
+        visible={visible}
+        onOk={() => {
+          updateNews(chooseVal)
+          onChange(chooseVal)
+          setVisible(false)
+        }}
+        onCancel={() => setVisible(false)}
+      >
+        <Select defaultValue={chooseVal} onChange={handleChange} style={{ width: '90%' }}>
+          {
+            list.map(x => (<Select.Option key={x.newsId} value={x.newsId}>{x.newsName}</Select.Option>))
+          }
+        </Select>
+      </Modal>
+    </div>
+  );
+}

src/pages/carouselFigure/editAdvertising.jsx

@@ -1,46 +1,67 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker,message } from 'antd';
+import { Modal, message } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import moment from 'moment';
 import router from 'umi/router';
 import BuildSelect from '../../components/SelectButton/BuildSelect'
-import XForm, { FieldTypes } from '../../components/XForm';
-import Wangedit from '../../components/Wangedit/Wangedit'
+import { FieldTypes, createForm } from '../../components/XForm';
+import Wangedit from '../../components/Wangedit/Wangedit';
+import SelectActivity from './SelectActivity';
+import SelectNews from './SelectNews';
 import apis from '../../services/apis';
 import request from '../../utils/request'
 
-const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 /**
  *
  *
  * @param {*} props
  * @returns
  */
- const Edit = (props) => {
-  const [ tab, changeTab ] = useState('basic')
-  const contentId = props.location.query.contentId
-  const [ data, setData ] = useState({})
-  if(contentId){
-    useEffect(() => {
-      getDetail(contentId);
-    },[])
+ const createEditor = () => {
+  let contentVisible = false
+  let activityVisible = false
+  let newsVisible = false
+  let buildingId = ''
 
-  // 查询列表
-  const getDetail = (contentId) => {
-    request({ ...apis.carsuseFigure.getExtendContent,urlData:{id: contentId}}).then((data) => {
-        console.log(data)
-        setData(data)
-    })
+  const setExtraData = (data) => {
+    contentVisible = data.contentType === 'other';
+    activityVisible = data.contentType === 'activity';
+    newsVisible = data.contentType === 'news';
+    buildingId = data.buildingId
   }
+  
+  const handleFormValueChange = (props, changedValues, allValues) => {
+    setExtraData(allValues)
   }
 
-  const cancelPage = () =>{
-    router.push({
-      pathname: '/carouselFigure/advertisingList',
-    });
-  }
- 
+  const XForm = createForm({ onValuesChange: handleFormValueChange })
+
+  return (props) => {
+    const [ tab, changeTab ] = useState('basic')
+    const contentId = props.location.query.contentId
+    const [ data, setData ] = useState({})
+  
+    if(contentId){
+      useEffect(() => {
+        getDetail(contentId);
+      },[])
+  
+      // 查询列表
+      const getDetail = (contentId) => {
+        request({ ...apis.carsuseFigure.getExtendContent,urlData:{id: contentId}}).then((data) => {
+          setExtraData(data)
+          setData(data)
+        })
+      }
+    }
+  
+    const cancelPage = () =>{
+      router.push({
+        pathname: '/carouselFigure/advertisingList',
+      });
+    }
+   
     const fields = [
       {
         label: '所属项目',
@@ -60,20 +81,6 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         type: FieldTypes.Text,
         value: data.title,
       },
-      // {
-      //   label: '发布位置',
-      //   name: 'showPosition',
-      //   type: FieldTypes.Select,
-      //   dict: [{
-      //     label: '首页',
-      //     value: 'index'
-      //   },
-      //   {
-      //     label: '商城',
-      //     value: 'mall'
-      //   }],
-      //   value: data.showPosition,
-      // },
       {
         label: '类型',
         name: 'contentType',
@@ -96,12 +103,27 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         }],
         value: data.contentType,
       },
-      // {
-      //   label: '发布内容',
-      //   name: 'content',
-      //   render: <Wangedit />,
-      //   value: data.content,
-      // },
+      {
+        label: '发布活动',
+        name: 'targetId',
+        render: <SelectActivity buildingId={() => buildingId} />,
+        hidden: () => !activityVisible,
+        value: data.targetId,
+      },
+      {
+        label: '发布资讯',
+        name: 'targetId',
+        render: <SelectNews buildingId={() => buildingId} />,
+        hidden: () => !newsVisible,
+        value: data.targetId,
+      },
+      {
+        label: '发布内容',
+        name: 'content',
+        render: <Wangedit />,
+        value: data.content,
+        hidden: () => !contentVisible,
+      },
       {
         label: '状态',
         name: 'status',
@@ -117,7 +139,7 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         value: data.status != null ? data.status : 1,
       },
     ]
-  
+    
     const handleSubmit = val => { 
       val.showType = 'screen'
       if(contentId){
@@ -134,12 +156,12 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         })
       }
     }
-
-  return (
-    <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
-  );
+  
+  
+    return (
+      <XForm onSubmit={handleSubmit} onCancel={cancelPage} onValuesChange={handleFormValueChange} fields={fields}></XForm>
+    );
+   }
  }
-
-
-
-export default Edit
+ 
+export default createEditor()