|
@@ -1,259 +1,207 @@
|
1
|
|
-import React, { useState, useEffect } from 'react';
|
2
|
|
-import { UploadOutlined } from '@ant-design/icons';
|
3
|
|
-import { Input, Card, message, Radio, Select,Upload, Button } from 'antd';
|
4
|
|
-import { FormattedMessage } from 'umi-plugin-react/locale';
|
5
|
|
-import BuildSelect from '@/components/SelectButton/BuildSelectCourse'
|
6
|
|
-import router from 'umi/router';
|
7
|
|
-import { FieldTypes, createForm } from '@/components/XForm';
|
8
|
|
-import Wangedit from '@/components/Wangedit/Wangedit'
|
9
|
|
-// import channels from './channelList.less';
|
10
|
|
-// import Tagss from '../components/Tagss.jsx';
|
11
|
|
-import apis from '@/services/apis';
|
12
|
|
-import request from '@/utils/request'
|
13
|
|
-import BuildingSelection from '../components/BuildingSelection'
|
14
|
|
-import { render } from 'react-dom';
|
|
1
|
+import React, { useEffect, useState, useCallback } from 'react';
|
|
2
|
+import { Button, Form, Select, Input, InputNumber, Radio, message, Card } from 'antd';
|
15
|
3
|
import ImageUpload from '@/components/XForm/ImageUpload';
|
16
|
|
-//下拉
|
17
|
|
-function handleChange(value) {
|
18
|
|
- console.log(`selected ${value}`);
|
19
|
|
-}
|
20
|
|
-const { TextArea } = Input;
|
21
|
|
-const { Option } = Select;
|
22
|
|
-let consultantChecked = false;
|
23
|
|
-
|
24
|
|
-const setExtraData = (data) => {
|
25
|
|
- consultantChecked = data.isConsultant
|
26
|
|
-}
|
27
|
|
-
|
28
|
|
-const handleFormValueChange = (props, changedValues, allValues) => {
|
29
|
|
- setExtraData(allValues)
|
30
|
|
-}
|
31
|
|
-
|
32
|
|
-const XForm = createForm({ onValuesChange: handleFormValueChange })
|
33
|
|
-
|
34
|
|
-/**
|
35
|
|
- *
|
36
|
|
- *
|
37
|
|
- * @param {*} props
|
38
|
|
- * @returns
|
39
|
|
- */
|
40
|
|
-const StaffEdit = (props) => {
|
41
|
|
- const roleId = props.location.query.roleId
|
42
|
|
- const [userData, setUserData] = useState({})
|
43
|
|
- const [tagData, setTagData] = useState([])
|
44
|
|
- const [roleData, setRoleData] = useState([])
|
45
|
|
- const [buildData, setBuildData] = useState([])
|
46
|
|
- const [visible, setVisible] = useState(false)
|
47
|
|
- //图文单选详情Radio
|
48
|
|
- const [newsDetailType, setNewsOenType] = useState(1);
|
49
|
|
-
|
50
|
|
- //视频组件
|
|
4
|
+import FileUpload from '@/components/XForm/FileUpload';
|
|
5
|
+import Wangedit from '@/components/Wangedit/Wangedit';
|
|
6
|
+import router from 'umi/router';
|
|
7
|
+import { fetch, apis } from '@/utils/request';
|
|
8
|
+
|
|
9
|
+const FormItem = Form.Item;
|
|
10
|
+const Option = Select.Option;
|
|
11
|
+const getCurriculumData = fetch(apis.course.searchCourse);
|
|
12
|
+const saveCurriculumData = fetch(apis.course.addCourse);
|
|
13
|
+const updateCurriculumData = fetch(apis.course.alterCourse);
|
|
14
|
+const goBack = () => router.goBack(-1);
|
|
15
|
+
|
|
16
|
+const CurriculumForm = React.forwardRef((props, ref) => {
|
|
17
|
+ const [loading, setLoading] = useState(false);//防止多次点击 定义loadind
|
|
18
|
+ const [formData, setFormData] = useState();//提交表单的数据
|
|
19
|
+ const [contentType, setContentType] = useState(1);//单选。初始默认显示1 富文本框。点击视频, 渲染2
|
|
20
|
+ const { form, history } = props;
|
|
21
|
+ const { getFieldDecorator, setFieldsValue, validateFields } = form;
|
|
22
|
+ const { curriculumId } = history.location.query || {}
|
51
|
23
|
|
52
|
|
- const getVideo = {
|
53
|
|
- action: '//jsonplaceholder.typicode.com/posts/',
|
54
|
|
- listType: 'picture',
|
55
|
|
- previewFile(file) {
|
56
|
|
- console.log('Your upload file:', file);
|
57
|
|
- // Your process logic. Here we just mock to the same file
|
58
|
|
- return fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
|
59
|
|
- method: 'POST',
|
60
|
|
- body: file,
|
61
|
|
- })
|
62
|
|
- .then(res => res.json())
|
63
|
|
- .then(({ thumbnail }) => thumbnail);
|
64
|
|
- },
|
65
|
|
- };
|
|
24
|
+ const formItemLayout = {
|
|
25
|
+ //布局
|
|
26
|
+ labelCol: { span: 6 },
|
|
27
|
+ wrapperCol: { span: 14 },
|
66
|
28
|
|
67
|
|
- const getTagList = () => {
|
68
|
|
- request({ ...apis.staff.taTags, params: { pageNum: 1, pageSize: 999 } }).then((data) => {
|
69
|
|
- setTagData(data.records)
|
70
|
|
- })
|
71
|
|
- }
|
72
|
|
-
|
73
|
|
- const getRoleList = () => {
|
74
|
|
- request({ ...apis.role.getRoleList, params: { pageNum: 1, pageSize: 999 } }).then((data) => {
|
75
|
|
- console.log(data)
|
76
|
|
- setRoleData(data.records)
|
77
|
|
- })
|
78
|
|
- }
|
|
29
|
+ };
|
79
|
30
|
|
80
|
|
- //获取项目列表
|
81
|
|
- const getBuildList = e => {
|
82
|
|
- request({ ...apis.building.buildingSelect, params: { pageNum: 1, pageSize: 999 } }).then(data => {
|
83
|
|
- setBuildData(data)
|
84
|
|
- })
|
|
31
|
+ const handleSubmit = (e) => {
|
|
32
|
+ e.preventDefault();
|
|
33
|
+ validateFields((err, values) => {
|
|
34
|
+ if (err) {
|
|
35
|
+ return;
|
|
36
|
+ //字符验证未填写---返回
|
|
37
|
+ }
|
|
38
|
+
|
|
39
|
+ setLoading(true);//loading开始
|
|
40
|
+
|
|
41
|
+ if (curriculumId) {
|
|
42
|
+ //如果有这个id拿。没有就,拿返回的curriculumId
|
|
43
|
+ updateCurriculumData({
|
|
44
|
+ data: {
|
|
45
|
+ ...values,
|
|
46
|
+ curriculumId
|
|
47
|
+ },
|
|
48
|
+ urlData: { id: curriculumId }
|
|
49
|
+ }).then(() => {
|
|
50
|
+ setLoading(false);
|
|
51
|
+ message.success('数据更新成功');
|
|
52
|
+ goBack()
|
|
53
|
+ }).catch((err) => {
|
|
54
|
+ setLoading(false);//loading消失
|
|
55
|
+ message.error(err.message || err);
|
|
56
|
+ })
|
|
57
|
+ } else {
|
|
58
|
+ saveCurriculumData({ data: values }).then(() => {
|
|
59
|
+ setLoading(false);
|
|
60
|
+ message.success('数据保存成功');
|
|
61
|
+ goBack()
|
|
62
|
+ }).catch((err) => {
|
|
63
|
+ setLoading(false);//loading消失
|
|
64
|
+ message.error(err.message || err);
|
|
65
|
+ })
|
|
66
|
+ }
|
|
67
|
+ });
|
85
|
68
|
}
|
86
|
69
|
|
87
|
|
- // 查询列表
|
88
|
|
- const getUserData = (roleId) => {
|
89
|
|
- request({ ...apis.staff.getTaUser, urlData: { id: roleId } }).then((data) => {
|
90
|
|
- consultantChecked = data.isConsultant
|
91
|
|
- setUserData(data)
|
92
|
|
- setNewsOenType(Number(data.newsDetailType))
|
|
70
|
+ const getCourseData = useCallback(({ curriculumId }) => {//函数结果存 初始化运行一次,等待调用。
|
|
71
|
+ getCurriculumData({urlData: { id: curriculumId }}).then((res) => {
|
|
72
|
+ setFormData(res)
|
93
|
73
|
})
|
94
|
|
- }
|
95
|
|
-
|
96
|
|
- if(userData.buildingIds && buildData.length > 0 && !consultantChecked){
|
97
|
|
- const newBuildings = userData.buildingIds.filter(x => buildData.filter(it => it.buildingId === x)[0])
|
98
|
|
- userData.buildingIds = newBuildings
|
99
|
|
- }
|
100
|
|
-
|
101
|
|
- if(userData.roleIds && roleData.length > 0){
|
102
|
|
- const newRoleIds = userData.roleIds.filter(x => roleData.filter(it => it.roleId === x)[0])
|
103
|
|
- userData.roleIds = newRoleIds
|
104
|
|
- }
|
105
|
|
-
|
106
|
|
- useEffect(() => {
|
107
|
|
- getTagList();
|
108
|
|
- getRoleList();
|
109
|
|
- getBuildList();
|
110
|
|
- if (roleId) {
|
111
|
|
- getUserData(roleId);
|
112
|
|
- }
|
113
|
74
|
}, [])
|
114
|
75
|
|
115
|
|
- // const tagsChange = (value) => {
|
116
|
|
- // console.log(`selected ${value}`);
|
117
|
|
- // }
|
118
|
|
-
|
119
|
|
- const handleSubmit = val => {
|
120
|
|
- if (roleId) {
|
121
|
|
- request({ ...apis.course.alterCourse, urlData: { id: roleId }, data: val, }).then((data) => {
|
122
|
|
- console.log(data, "tauser")
|
123
|
|
- message.info("保存成功")
|
124
|
|
- router.go(-1)
|
125
|
|
- }).catch(error => {
|
126
|
|
- // message.info(error.message)
|
127
|
|
- })
|
128
|
|
- } else {
|
129
|
|
- request({ ...apis.course.addCourse, data: val, }).then((data) => {
|
130
|
|
- console.log(data, "tauser")
|
131
|
|
- message.info("保存成功")
|
132
|
|
- router.go(-1)
|
133
|
|
- }).catch(error => {
|
134
|
|
- // message.info(error.message)
|
135
|
|
- })
|
|
76
|
+ useEffect(() => {
|
|
77
|
+ if (curriculumId) {
|
|
78
|
+ getCourseData({curriculumId})//第一次渲染前//获取id
|
136
|
79
|
}
|
137
|
|
- }
|
138
|
|
-
|
139
|
|
-
|
140
|
|
- //视频--------------------
|
141
|
|
-
|
|
80
|
+ }, [curriculumId])//第二次id一样不执行
|
142
|
81
|
|
143
|
|
-
|
144
|
|
-
|
145
|
|
-
|
146
|
|
- const photoBeforeUpload = (file) => {
|
147
|
|
- // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
148
|
|
- // if (!isJpgOrPng) {
|
149
|
|
- // message.error('请上传 JPG/PNG 格式的图片!');
|
150
|
|
- // }
|
151
|
|
- console.log(file.size, file.size / 1024)
|
152
|
|
- const isLt100k = (file.size / 1024) < 100;
|
153
|
|
- if (!isLt100k) {
|
154
|
|
- message.error('请上传小于100k的图片!');
|
|
82
|
+ useEffect(() => {
|
|
83
|
+ if (formData) {//1.form表单数据{2} 执行。无变更不执行
|
|
84
|
+ setFieldsValue(formData)
|
155
|
85
|
}
|
156
|
|
- return isLt100k;
|
157
|
|
- }
|
158
|
|
- const handleChange = (value) => {
|
159
|
|
- console.log(`selected ${value}`);
|
160
|
|
- }
|
161
|
|
-
|
162
|
|
- const fields = [
|
163
|
|
- {
|
164
|
|
- label: '参与对象',
|
165
|
|
- name: 'roleId',
|
166
|
|
- render:<Select initialValue={'0'} style={{ width: 200 }}>
|
167
|
|
- <Option value='0'>置业顾问</Option>
|
168
|
|
- <Option value='1'>经纪人</Option>
|
169
|
|
- <Option value='2'>置业顾问&经纪人</Option>
|
170
|
|
- </Select> ,
|
171
|
|
- rules: [
|
172
|
|
- { required: true, message: '请输入参与对象' },
|
173
|
|
- ],
|
174
|
|
- },
|
175
|
|
- {
|
176
|
|
- label: '主图',
|
177
|
|
- name: 'curriculumImg',
|
178
|
|
- type: FieldTypes.ImageUploader,
|
179
|
|
- extra: '建议尺寸:750px*600px,比例5:4,格式:jpg,用于:列表和详情',
|
180
|
|
- value: userData.curriculumImg,
|
181
|
|
- // render:<ImageUpload/>,
|
182
|
|
- // beforeUpload: (e) => photoBeforeUpload(e),
|
183
|
|
- rules: [
|
184
|
|
- { required: true, message: '主图' },
|
185
|
|
- ]
|
186
|
|
- },
|
187
|
|
-
|
188
|
|
- {
|
189
|
|
- label: '课程标题',
|
190
|
|
- name: 'content',
|
191
|
|
- render: <Input style={{width:'550px'}} ></Input>,
|
192
|
|
- value: userData.usernew,
|
193
|
|
-
|
194
|
|
- // className={channels.inpuitTxt}
|
195
|
|
- rules: [
|
196
|
|
- { required: true, message: '请输入课程标题' },
|
197
|
|
- ]
|
198
|
|
- },
|
199
|
|
- {
|
200
|
|
- label: '简介',
|
201
|
|
- name: 'remark',
|
202
|
|
- render: <TextArea style={{width:'550px'}} rows='5' ></TextArea>,
|
203
|
|
- value: userData.description,
|
204
|
|
- rules: [
|
205
|
|
- { required: true, message: '请输入简介' },
|
206
|
|
- ]
|
|
86
|
+ }, [formData])//2.有变更跟的话
|
207
|
87
|
|
208
|
|
- // className={channels.inpuitTxt}
|
209
|
|
- },
|
210
|
|
- {
|
211
|
|
- label:'详情',
|
212
|
|
- name:'newsOen',
|
213
|
|
- render:(
|
214
|
|
- <Radio.Group
|
215
|
|
- onChange={e=>{
|
216
|
|
- setNewsOenType(e.target.value)
|
217
|
|
- }} >
|
218
|
|
- <Radio value='1'>图文</Radio>,
|
219
|
|
- <Radio value='0'>视频</Radio>,
|
220
|
|
- </Radio.Group>
|
221
|
|
- ),
|
222
|
|
- value:userData,
|
223
|
|
- rules: [{ required: true, message: '请选择详情类型' }],
|
224
|
88
|
|
225
|
|
- },
|
226
|
|
- {
|
227
|
|
- label: '详情内容',
|
228
|
|
- name: 'newsDetail',
|
229
|
|
- render: <Wangedit />,
|
230
|
|
- hidden: newsDetailType == 0,
|
231
|
|
- value: userData.newsDetail,
|
232
|
|
- rules: [{ required: true, message: '请输入详情内容' }],
|
233
|
|
- },
|
234
|
|
- {
|
235
|
|
- label:'视频详情',
|
236
|
|
- name:'newVideo',
|
237
|
|
- hidden: newsDetailType == 1,
|
238
|
|
- value:userData.newVideo,
|
239
|
|
- render: <Upload {...getVideo} maxCount='1' accept='.avi,.mp4,.wmv,.flv'>
|
240
|
|
- <Button ><UploadOutlined />上传视频</Button>
|
241
|
|
- </Upload>,
|
242
|
|
- extra: '仅支AVI、MP4、WMV、FIV格式视频',
|
243
|
|
- rules:[{required:true,message:'请上传视频详情'}]
|
244
|
|
- },
|
245
|
|
- {
|
246
|
|
- label: '权重',
|
247
|
|
- name: 'weight',
|
248
|
|
- type: FieldTypes.Number,
|
249
|
|
- render: <Input type="number" style={{ width: 150}} />,
|
250
|
|
- value: '1',
|
251
|
|
- help: '数字越大越靠前',
|
252
|
|
- },
|
253
|
|
- ]
|
|
89
|
+ return (
|
|
90
|
+ <Card>
|
|
91
|
+ <Form {...formItemLayout} onSubmit={handleSubmit}>
|
|
92
|
+ {/* 布局提交表单 */}
|
|
93
|
+ <FormItem label="参与对象">
|
|
94
|
+ {
|
|
95
|
+ getFieldDecorator('roleId', {
|
|
96
|
+ rules: [
|
|
97
|
+ { required: true, message: '请选择参与对象' }
|
|
98
|
+ ]
|
|
99
|
+ })(
|
|
100
|
+ <Select style={{width:'500px'}}>
|
|
101
|
+ <Option value="1">经纪人</Option>
|
|
102
|
+ <Option value="2">职业顾问</Option>
|
|
103
|
+ <Option value="0">职业顾问&经纪人</Option>
|
|
104
|
+ </Select>
|
|
105
|
+ )
|
|
106
|
+ }
|
|
107
|
+ </FormItem>
|
|
108
|
+ <FormItem label="主图" help="建议尺寸:750px*600px,比例5:4,格式:jpg,用于:列表和详情">
|
|
109
|
+ {
|
|
110
|
+ getFieldDecorator('curriculumImg', {
|
|
111
|
+ rules: [
|
|
112
|
+ { required: true, message: '请上传主图' }
|
|
113
|
+ ]
|
|
114
|
+ })(
|
|
115
|
+ <ImageUpload />
|
|
116
|
+ )
|
|
117
|
+ }
|
|
118
|
+ </FormItem>
|
|
119
|
+ <FormItem label="课程标题">
|
|
120
|
+ {
|
|
121
|
+ getFieldDecorator('name', {
|
|
122
|
+ rules: [
|
|
123
|
+ { required: true, message: '请输入课程标题' }
|
|
124
|
+ ]
|
|
125
|
+ })(
|
|
126
|
+ <Input style={{width:'500px'}} />
|
|
127
|
+ )
|
|
128
|
+ }
|
|
129
|
+ </FormItem>
|
|
130
|
+ <FormItem label="简介">
|
|
131
|
+ {
|
|
132
|
+ getFieldDecorator('remark', {
|
|
133
|
+ rules: [
|
|
134
|
+ { required: true, message: '请填写简介' }
|
|
135
|
+ ]
|
|
136
|
+ })(
|
|
137
|
+ <Input.TextArea rows='5' style={{width:'500px'}}/>
|
|
138
|
+ )
|
|
139
|
+ }
|
|
140
|
+ </FormItem>
|
|
141
|
+
|
|
142
|
+ <FormItem label="详情">
|
|
143
|
+ {
|
|
144
|
+ getFieldDecorator('type', {
|
|
145
|
+ rules: [
|
|
146
|
+ { required: true, message: '请选择详情类型' }
|
|
147
|
+ ]
|
|
148
|
+ })(
|
|
149
|
+ <Radio.Group value={contentType} onChange={e=> setContentType(e.target.value)} style={{width:'500px'}} defaultValue={1}>
|
|
150
|
+ <Radio value={1}>图文</Radio>
|
|
151
|
+ <Radio value={2}>视频</Radio>
|
|
152
|
+ </Radio.Group>
|
|
153
|
+ )
|
|
154
|
+ }
|
|
155
|
+ </FormItem>
|
|
156
|
+{/*
|
|
157
|
+ <FormItem label="详情">
|
|
158
|
+ {
|
|
159
|
+ getFieldDecorator('type'),{
|
|
160
|
+ rules:[
|
|
161
|
+ {required:true,message:'请选择详情类型'}
|
|
162
|
+ ]
|
|
163
|
+
|
|
164
|
+ },
|
|
165
|
+ <Radio.Group value={contentType} onChange={e => setContentType(e.target.value)}>
|
|
166
|
+ <Radio value={1} type='0'>图文</Radio>
|
|
167
|
+ <Radio value={2}type='1'>视频</Radio>
|
|
168
|
+ </Radio.Group>
|
|
169
|
+ }
|
|
170
|
+
|
|
171
|
+ </FormItem> */}
|
|
172
|
+
|
|
173
|
+ <FormItem label="详情内容">
|
|
174
|
+ {
|
|
175
|
+ getFieldDecorator('content', {
|
|
176
|
+ rules: [
|
|
177
|
+ { required: true, message: '请输入详情内容' }
|
|
178
|
+ ]
|
|
179
|
+ })(
|
|
180
|
+ contentType == 1 ? <Wangedit style={{width:'500px'}} /> : <FileUpload />
|
|
181
|
+ )
|
|
182
|
+ }
|
|
183
|
+ </FormItem>
|
|
184
|
+ <FormItem label="权重" >
|
|
185
|
+ {
|
|
186
|
+ getFieldDecorator('weight', {
|
|
187
|
+ rules: [{ required: true, message: '请设置权重' }]})(
|
|
188
|
+ <InputNumber min='0' />
|
|
189
|
+ )
|
|
190
|
+ }
|
|
191
|
+ </FormItem>
|
|
192
|
+
|
|
193
|
+ <FormItem wrapperCol={{ span: 12, offset: 6 }}>
|
|
194
|
+ <Button loading={loading} type="primary" htmlType="submit">
|
|
195
|
+ 保存
|
|
196
|
+ </Button>
|
|
197
|
+ <Button style={{marginLeft: '2em'}} onClick={goBack}>
|
|
198
|
+ 取消
|
|
199
|
+ </Button>
|
|
200
|
+ </FormItem>
|
|
201
|
+ </Form>
|
|
202
|
+ </Card>
|
|
203
|
+
|
|
204
|
+ )
|
|
205
|
+})
|
254
|
206
|
|
255
|
|
- return <Card>
|
256
|
|
- <XForm onChange={console.log} onSubmit={handleSubmit} fields={fields.filter(Boolean)} onCancel={() => router.go(-1)}></XForm>
|
257
|
|
- </Card>
|
258
|
|
-}
|
259
|
|
-export default StaffEdit
|
|
207
|
+export default Form.create({})(CurriculumForm);
|