张延森 5 年 前
コミット
3ced6fdcbe

+ 1
- 1
src/components/XForm/WrapperForm.jsx ファイルの表示

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

+ 8
- 4
src/components/XForm/WrapperItem.jsx ファイルの表示

@@ -55,6 +55,7 @@ const WrapperItem = (props) => {
55 55
     dict,
56 56
     action,
57 57
     props: fieldProps,
58
+    hidden = false,
58 59
     ...restProps
59 60
   } = props;
60 61
 
@@ -82,7 +83,7 @@ const WrapperItem = (props) => {
82 83
   // 没有类型与组件, 生成隐藏字段
83 84
   if (!type && !render) {
84 85
     getFieldDecorator(name, config);
85
-    return <></>;
86
+    return null;
86 87
   }
87 88
 
88 89
   const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.label}</Option>))
@@ -127,12 +128,15 @@ const WrapperItem = (props) => {
127 128
     }
128 129
   }
129 130
 
130
-  if (!label && !name && !action) return Field;
131
+  const visible = typeof hidden === 'function' ? !hidden() : !hidden;
132
+
133
+  if (!label && !name && !action) return visible ? Field : null;
131 134
   
132 135
   const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps
136
+  const labelNode = typeof label === 'function' ? label() : label;
133 137
 
134
-  return (
135
-    <Item label={label} {...itemProps}>
138
+  return visible && (
139
+    <Item label={labelNode} {...itemProps}>
136 140
       {action ? Field : getFieldDecorator(name, config)(Field)}
137 141
     </Item>
138 142
   )

+ 3
- 1
src/components/XForm/index.jsx ファイルの表示

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

+ 67
- 0
src/pages/carouselFigure/SelectActivity.jsx ファイルの表示

@@ -0,0 +1,67 @@
1
+import React, { useState, useEffect } from 'react';
2
+import{ Select, Modal } from 'antd';
3
+import { apis, fetch } from '../../utils/request';
4
+
5
+const getActivities = fetch(apis.activity.list)
6
+
7
+export default (props) => {
8
+  const {
9
+    value,
10
+    onChange,
11
+    ...rest
12
+  } = props;
13
+
14
+  const [list, setList] = useState([]);
15
+  const [visible, setVisible] = useState(false);
16
+  const [ activity, setActivity ] = useState({ dynamicId: undefined, title: '请选择活动' })
17
+  const getActTitle = val => ((list.filter(x => x.dynamicId === val)[0]) || {}).title || '请选择活动'
18
+  const setAct = val => setActivity({ dynamicId: val, title: getActTitle(val) })
19
+
20
+  const buildingId = props.buildingId()
21
+  
22
+  useEffect(() => {
23
+    getActivities({
24
+      params: {
25
+        buildingId,
26
+        pageNum: 1,
27
+        pageSize: 999,
28
+      }
29
+    }).then((data) => {
30
+      setList(data.list || [])
31
+
32
+      console.log('----', buildingId, value)
33
+
34
+      setAct(buildingId ? undefined : value);
35
+    })
36
+  }, [buildingId]);
37
+
38
+  if (value !== activity.dynamicId) {
39
+    setAct(value);
40
+  }
41
+
42
+  let chooseVal = value
43
+
44
+  const handleChange = val => chooseVal = val
45
+
46
+  return (
47
+    <div>
48
+      <div onClick={() => setVisible(true)}>{activity.title}</div>
49
+      <Modal
50
+        title="请选择活动"
51
+        visible={visible}
52
+        onOk={() => {
53
+          setAct(chooseVal)
54
+          onChange(chooseVal)
55
+          setVisible(false)
56
+        }}
57
+        onCancel={() => setVisible(false)}
58
+      >
59
+        <Select defaultValue={chooseVal} onChange={handleChange} style={{ width: '90%' }}>
60
+          {
61
+            list.map(x => (<Select.Option key={x.dynamicId} value={x.dynamicId}>{x.title}</Select.Option>))
62
+          }
63
+        </Select>
64
+      </Modal>
65
+    </div>
66
+  );
67
+}

+ 65
- 0
src/pages/carouselFigure/SelectNews.jsx ファイルの表示

@@ -0,0 +1,65 @@
1
+import React, { useState, useEffect } from 'react';
2
+import{ Select, Modal } from 'antd';
3
+import { apis, fetch } from '../../utils/request';
4
+
5
+const getNewsList = fetch(apis.news.getList)
6
+
7
+export default (props) => {
8
+  const {
9
+    value,
10
+    onChange,
11
+    ...rest
12
+  } = props;
13
+
14
+  const [list, setList] = useState([]);
15
+  const [visible, setVisible] = useState(false);
16
+  const [ news, setNews ] = useState({ newsId: undefined, newsName: '请选择资讯' })
17
+  const getNewsTitle = val => ((list.filter(x => x.newsId === val)[0]) || {}).newsName || '请选择资讯'
18
+  const updateNews = val => setNews({ newsId: val, newsName: getNewsTitle(val) })
19
+
20
+  const buildingId = props.buildingId()
21
+  
22
+  useEffect(() => {
23
+    getNewsList({
24
+      params: {
25
+        buildingId,
26
+        pageNum: 1,
27
+        pageSize: 999,
28
+      }
29
+    }).then((data) => {
30
+      setList(data.list || [])
31
+
32
+      updateNews(buildingId ? undefined : value);
33
+    })
34
+  }, [buildingId]);
35
+
36
+  if (value !== news.newsId) {
37
+    updateNews(value);
38
+  }
39
+
40
+  let chooseVal = value
41
+
42
+  const handleChange = val => chooseVal = val
43
+
44
+  return (
45
+    <div>
46
+      <div onClick={() => setVisible(true)}>{news.newsName}</div>
47
+      <Modal
48
+        title="请选择资讯"
49
+        visible={visible}
50
+        onOk={() => {
51
+          updateNews(chooseVal)
52
+          onChange(chooseVal)
53
+          setVisible(false)
54
+        }}
55
+        onCancel={() => setVisible(false)}
56
+      >
57
+        <Select defaultValue={chooseVal} onChange={handleChange} style={{ width: '90%' }}>
58
+          {
59
+            list.map(x => (<Select.Option key={x.newsId} value={x.newsId}>{x.newsName}</Select.Option>))
60
+          }
61
+        </Select>
62
+      </Modal>
63
+    </div>
64
+  );
65
+}

+ 75
- 53
src/pages/carouselFigure/editAdvertising.jsx ファイルの表示

@@ -1,46 +1,67 @@
1 1
 import React, { useState, useEffect } from 'react';
2
-import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker,message } from 'antd';
2
+import { Modal, message } from 'antd';
3 3
 import { FormattedMessage } from 'umi-plugin-react/locale';
4 4
 import styles from '../style/GoodsList.less';
5 5
 import moment from 'moment';
6 6
 import router from 'umi/router';
7 7
 import BuildSelect from '../../components/SelectButton/BuildSelect'
8
-import XForm, { FieldTypes } from '../../components/XForm';
9
-import Wangedit from '../../components/Wangedit/Wangedit'
8
+import { FieldTypes, createForm } from '../../components/XForm';
9
+import Wangedit from '../../components/Wangedit/Wangedit';
10
+import SelectActivity from './SelectActivity';
11
+import SelectNews from './SelectNews';
10 12
 import apis from '../../services/apis';
11 13
 import request from '../../utils/request'
12 14
 
13
-const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
14 15
 /**
15 16
  *
16 17
  *
17 18
  * @param {*} props
18 19
  * @returns
19 20
  */
20
- const Edit = (props) => {
21
-  const [ tab, changeTab ] = useState('basic')
22
-  const contentId = props.location.query.contentId
23
-  const [ data, setData ] = useState({})
24
-  if(contentId){
25
-    useEffect(() => {
26
-      getDetail(contentId);
27
-    },[])
21
+ const createEditor = () => {
22
+  let contentVisible = false
23
+  let activityVisible = false
24
+  let newsVisible = false
25
+  let buildingId = ''
28 26
 
29
-  // 查询列表
30
-  const getDetail = (contentId) => {
31
-    request({ ...apis.carsuseFigure.getExtendContent,urlData:{id: contentId}}).then((data) => {
32
-        console.log(data)
33
-        setData(data)
34
-    })
27
+  const setExtraData = (data) => {
28
+    contentVisible = data.contentType === 'other';
29
+    activityVisible = data.contentType === 'activity';
30
+    newsVisible = data.contentType === 'news';
31
+    buildingId = data.buildingId
35 32
   }
33
+  
34
+  const handleFormValueChange = (props, changedValues, allValues) => {
35
+    setExtraData(allValues)
36 36
   }
37 37
 
38
-  const cancelPage = () =>{
39
-    router.push({
40
-      pathname: '/carouselFigure/advertisingList',
41
-    });
42
-  }
43
- 
38
+  const XForm = createForm({ onValuesChange: handleFormValueChange })
39
+
40
+  return (props) => {
41
+    const [ tab, changeTab ] = useState('basic')
42
+    const contentId = props.location.query.contentId
43
+    const [ data, setData ] = useState({})
44
+  
45
+    if(contentId){
46
+      useEffect(() => {
47
+        getDetail(contentId);
48
+      },[])
49
+  
50
+      // 查询列表
51
+      const getDetail = (contentId) => {
52
+        request({ ...apis.carsuseFigure.getExtendContent,urlData:{id: contentId}}).then((data) => {
53
+          setExtraData(data)
54
+          setData(data)
55
+        })
56
+      }
57
+    }
58
+  
59
+    const cancelPage = () =>{
60
+      router.push({
61
+        pathname: '/carouselFigure/advertisingList',
62
+      });
63
+    }
64
+   
44 65
     const fields = [
45 66
       {
46 67
         label: '所属项目',
@@ -60,20 +81,6 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
60 81
         type: FieldTypes.Text,
61 82
         value: data.title,
62 83
       },
63
-      // {
64
-      //   label: '发布位置',
65
-      //   name: 'showPosition',
66
-      //   type: FieldTypes.Select,
67
-      //   dict: [{
68
-      //     label: '首页',
69
-      //     value: 'index'
70
-      //   },
71
-      //   {
72
-      //     label: '商城',
73
-      //     value: 'mall'
74
-      //   }],
75
-      //   value: data.showPosition,
76
-      // },
77 84
       {
78 85
         label: '类型',
79 86
         name: 'contentType',
@@ -96,12 +103,27 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
96 103
         }],
97 104
         value: data.contentType,
98 105
       },
99
-      // {
100
-      //   label: '发布内容',
101
-      //   name: 'content',
102
-      //   render: <Wangedit />,
103
-      //   value: data.content,
104
-      // },
106
+      {
107
+        label: '发布活动',
108
+        name: 'targetId',
109
+        render: <SelectActivity buildingId={() => buildingId} />,
110
+        hidden: () => !activityVisible,
111
+        value: data.targetId,
112
+      },
113
+      {
114
+        label: '发布资讯',
115
+        name: 'targetId',
116
+        render: <SelectNews buildingId={() => buildingId} />,
117
+        hidden: () => !newsVisible,
118
+        value: data.targetId,
119
+      },
120
+      {
121
+        label: '发布内容',
122
+        name: 'content',
123
+        render: <Wangedit />,
124
+        value: data.content,
125
+        hidden: () => !contentVisible,
126
+      },
105 127
       {
106 128
         label: '状态',
107 129
         name: 'status',
@@ -117,7 +139,7 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
117 139
         value: data.status != null ? data.status : 1,
118 140
       },
119 141
     ]
120
-  
142
+    
121 143
     const handleSubmit = val => { 
122 144
       val.showType = 'screen'
123 145
       if(contentId){
@@ -134,12 +156,12 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
134 156
         })
135 157
       }
136 158
     }
137
-
138
-  return (
139
-    <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
140
-  );
159
+  
160
+  
161
+    return (
162
+      <XForm onSubmit={handleSubmit} onCancel={cancelPage} onValuesChange={handleFormValueChange} fields={fields}></XForm>
163
+    );
164
+   }
141 165
  }
142
-
143
-
144
-
145
-export default Edit
166
+ 
167
+export default createEditor()