张延森 5 anni fa
parent
commit
3ced6fdcbe

+ 1
- 1
src/components/XForm/WrapperForm.jsx Vedi File

62
   render () {
62
   render () {
63
     const {fields, form, children, submitBtn, cancelBtn, ...formProps} = this.props;
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
     return (
67
     return (
68
       <Form {...formItemLayout} {...formProps} onSubmit={this.handleSubmit}>
68
       <Form {...formItemLayout} {...formProps} onSubmit={this.handleSubmit}>

+ 8
- 4
src/components/XForm/WrapperItem.jsx Vedi File

55
     dict,
55
     dict,
56
     action,
56
     action,
57
     props: fieldProps,
57
     props: fieldProps,
58
+    hidden = false,
58
     ...restProps
59
     ...restProps
59
   } = props;
60
   } = props;
60
 
61
 
82
   // 没有类型与组件, 生成隐藏字段
83
   // 没有类型与组件, 生成隐藏字段
83
   if (!type && !render) {
84
   if (!type && !render) {
84
     getFieldDecorator(name, config);
85
     getFieldDecorator(name, config);
85
-    return <></>;
86
+    return null;
86
   }
87
   }
87
 
88
 
88
   const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.label}</Option>))
89
   const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.label}</Option>))
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
   const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps
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
       {action ? Field : getFieldDecorator(name, config)(Field)}
140
       {action ? Field : getFieldDecorator(name, config)(Field)}
137
     </Item>
141
     </Item>
138
   )
142
   )

+ 3
- 1
src/components/XForm/index.jsx Vedi File

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

+ 67
- 0
src/pages/carouselFigure/SelectActivity.jsx Vedi File

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 Vedi File

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 Vedi File

1
 import React, { useState, useEffect } from 'react';
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
 import { FormattedMessage } from 'umi-plugin-react/locale';
3
 import { FormattedMessage } from 'umi-plugin-react/locale';
4
 import styles from '../style/GoodsList.less';
4
 import styles from '../style/GoodsList.less';
5
 import moment from 'moment';
5
 import moment from 'moment';
6
 import router from 'umi/router';
6
 import router from 'umi/router';
7
 import BuildSelect from '../../components/SelectButton/BuildSelect'
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
 import apis from '../../services/apis';
12
 import apis from '../../services/apis';
11
 import request from '../../utils/request'
13
 import request from '../../utils/request'
12
 
14
 
13
-const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
14
 /**
15
 /**
15
  *
16
  *
16
  *
17
  *
17
  * @param {*} props
18
  * @param {*} props
18
  * @returns
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
     const fields = [
65
     const fields = [
45
       {
66
       {
46
         label: '所属项目',
67
         label: '所属项目',
60
         type: FieldTypes.Text,
81
         type: FieldTypes.Text,
61
         value: data.title,
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
         label: '类型',
85
         label: '类型',
79
         name: 'contentType',
86
         name: 'contentType',
96
         }],
103
         }],
97
         value: data.contentType,
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
         label: '状态',
128
         label: '状态',
107
         name: 'status',
129
         name: 'status',
117
         value: data.status != null ? data.status : 1,
139
         value: data.status != null ? data.status : 1,
118
       },
140
       },
119
     ]
141
     ]
120
-  
142
+    
121
     const handleSubmit = val => { 
143
     const handleSubmit = val => { 
122
       val.showType = 'screen'
144
       val.showType = 'screen'
123
       if(contentId){
145
       if(contentId){
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()