Skip to content

Commit f94558f

Browse files
xgChangexgChange
committed
集成redux
1 parent 8425ac9 commit f94558f

File tree

19 files changed

+621
-200
lines changed

19 files changed

+621
-200
lines changed

‎.eslintrc.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,13 @@ module.exports = {
1212
},
1313
},
1414
rules: {
15-
indent: ['warn', 2, {
16-
'SwitchCase': 1
17-
}],
15+
indent: [
16+
'warn',
17+
2,
18+
{
19+
SwitchCase: 1,
20+
},
21+
],
1822
quotes: [
1923
1,
2024
'single',
@@ -29,7 +33,7 @@ module.exports = {
2933
'prefer-spread': 'off',
3034
'@typescript-eslint/no-var-requires': 'off',
3135
'@typescript-eslint/no-empty-function': 'off',
32-
'@typescript-eslint/no-explicit-any': 'off'
33-
'react/no-children-prop': 'off'
36+
'@typescript-eslint/no-explicit-any': 'off',
37+
'react/no-children-prop': 'off',
3438
},
3539
}

‎src/App.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react'
22
import MyLayout from './layout/index'
3+
import { Provider } from 'react-redux'
4+
5+
import store from './store'
36

47
const App: React.FC = () => (
5-
<>
8+
<Provider store={store}>
69
<MyLayout />
7-
</>
10+
</Provider>
811
)
912

1013
export default App

‎src/components/form-common/index.tsx

+102-67
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import React, { Fragment, memo, PropsWithChildren, useCallback, useState } from 'react'
66

77
import { Form, Input, Button, DatePicker } from 'antd'
8-
import {MinusCircleOutlined} from '@ant-design/icons'
8+
import { MinusCircleOutlined } from '@ant-design/icons'
99
import 'moment/locale/zh-cn'
1010
import locale from 'antd/es/date-picker/locale/zh_CN'
1111
import moment from 'moment'
@@ -27,79 +27,114 @@ const FormCommon = ({ field, label, onFinished }: PropsWithChildren<FormConfig>)
2727
const [formCountArr, setFormCountArr] = useState<string[]>([])
2828
const [formData, setFormData] = useState<any[]>([])
2929

30-
const finished = useCallback((values: any, index: number) => {
31-
const time = values[field[2]]
32-
if (time && time.length > 0) {
33-
const startTime = moment(time[0]).format('YYYY-MM')
34-
const endTime = moment(time[1]).format('YYYY-MM')
35-
const forMatInfo = Object.assign(
36-
{ ...values },
37-
{
38-
[field[2]]: [startTime, endTime],
39-
}
40-
)
41-
setFormData(() => {
42-
let newData = [...formData]
43-
if (formData[index]) {
44-
newData[index] = forMatInfo
45-
} else {
46-
newData = [...formData, forMatInfo]
47-
}
48-
onFinished(newData)
49-
return newData
50-
})
51-
}
52-
}, [formData])
30+
const finished = useCallback(
31+
(values: any, index: number) => {
32+
const time = values[field[2]]
33+
if (time && time.length > 0) {
34+
const startTime = moment(time[0]).format('YYYY-MM')
35+
const endTime = moment(time[1]).format('YYYY-MM')
36+
const forMatInfo = Object.assign(
37+
{ ...values },
38+
{
39+
[field[2]]: [startTime, endTime],
40+
}
41+
)
42+
setFormData(() => {
43+
let newData = [...formData]
44+
if (formData[index]) {
45+
newData[index] = forMatInfo
46+
} else {
47+
newData = [...formData, forMatInfo]
48+
}
49+
onFinished(newData)
50+
return newData
51+
})
52+
}
53+
},
54+
[formData]
55+
)
5356

5457
const addEduForm = useCallback(() => {
5558
setFormCountArr([...formCountArr, `${Math.random()}${Date.now()}`])
5659
}, [formCountArr])
57-
58-
const delForm = useCallback((index: number) => {
59-
setFormCountArr(formCountArr.filter((item, k) => k !== index))
60-
}, [formCountArr])
61-
60+
61+
const delForm = useCallback(
62+
(index: number) => {
63+
const newData = formData.filter((item, k) => k !== index)
64+
onFinished(newData)
65+
setFormData(newData)
66+
setFormCountArr(formCountArr.filter((item, k) => k !== index))
67+
},
68+
[formCountArr]
69+
)
70+
6271
return (
6372
<div className={styles['self-education']}>
64-
{
65-
formCountArr.map((item, index, arr) => (
66-
<Fragment key={item}>
67-
{arr.length > 1 && <MinusCircleOutlined className={styles['del-btn']} onClick={() => delForm(index)}/>}
68-
<Form {...layout} name={item} onFinish={(values) => finished(values, index)}>
69-
<Form.Item label={label[0]} name={field[0]} rules={[{ required: true, message: `${label[0]}不能为空` }]}>
70-
<Input />
71-
</Form.Item>
72-
73-
<Form.Item label={label[1]} name={field[1]} rules={[{ required: true, message: `${label[1]}不能为空` }]}>
74-
<Input />
75-
</Form.Item>
76-
77-
<Form.Item
78-
name={field[2]}
79-
label={label[2]}
80-
rules={[{ type: 'array' as const, required: true, message: `${label[2]}不能为空!` }]}
81-
>
82-
<DatePicker.RangePicker locale={locale} picker="month" />
83-
</Form.Item>
84-
85-
<Form.Item
86-
name="detail"
87-
label="详细描述"
88-
rules={[{ required: true, message: `详细内容不能为空` }]}
89-
>
90-
<Input.TextArea placeholder="请输入内容" autoSize={{ minRows: 3, maxRows: 12 }} showCount />
91-
</Form.Item>
73+
{formCountArr.map((item, index) => (
74+
<Fragment key={item}>
75+
<MinusCircleOutlined
76+
className={styles['del-btn']}
77+
onClick={() => delForm(index)}
78+
/>
79+
<Form {...layout} name={item} onFinish={(values) => finished(values, index)}>
80+
<Form.Item
81+
label={label[0]}
82+
name={field[0]}
83+
rules={[{ required: true, message: `${label[0]}不能为空` }]}
84+
>
85+
<Input />
86+
</Form.Item>
9287

93-
<Form.Item>
94-
<Button type="primary" htmlType="submit">
95-
完成
96-
</Button>
97-
</Form.Item>
98-
</Form>
99-
</Fragment>
100-
))
101-
}
102-
<Button type="dashed" block style={{background: 'transparent', color: '#e5e5e5'}} onClick={addEduForm}>新增</Button>
88+
<Form.Item
89+
label={label[1]}
90+
name={field[1]}
91+
rules={[{ required: true, message: `${label[1]}不能为空` }]}
92+
>
93+
<Input />
94+
</Form.Item>
95+
96+
<Form.Item
97+
name={field[2]}
98+
label={label[2]}
99+
rules={[
100+
{
101+
type: 'array' as const,
102+
required: true,
103+
message: `${label[2]}不能为空!`,
104+
},
105+
]}
106+
>
107+
<DatePicker.RangePicker locale={locale} picker="month" />
108+
</Form.Item>
109+
110+
<Form.Item
111+
name="detail"
112+
label="详细描述"
113+
rules={[{ required: true, message: `详细内容不能为空` }]}
114+
>
115+
<Input.TextArea
116+
placeholder="请输入内容"
117+
autoSize={{ minRows: 3, maxRows: 12 }}
118+
showCount
119+
/>
120+
</Form.Item>
121+
122+
<Form.Item>
123+
<Button type="primary" htmlType="submit">
124+
完成
125+
</Button>
126+
</Form.Item>
127+
</Form>
128+
</Fragment>
129+
))}
130+
<Button
131+
type="dashed"
132+
block
133+
style={{ background: 'transparent', color: '#e5e5e5' }}
134+
onClick={addEduForm}
135+
>
136+
新增
137+
</Button>
103138
</div>
104139
)
105140
}

‎src/mock/index.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -51,64 +51,64 @@ export const NavPanelData: PanelDataObj[] = [
5151
id: 1008,
5252
text: '校园经历',
5353
icon: '',
54-
type: 'SelfSchool'
55-
}
54+
type: 'SelfSchool',
55+
},
5656
]
5757

5858
export const SexOption = [
5959
{
6060
id: 100,
6161
name: '男',
6262
enName: 'man',
63-
value: 1,
63+
value: '男',
6464
},
6565
{
6666
id: 101,
6767
name: '女',
6868
enName: 'women',
69-
value: 0,
69+
value: '女',
7070
},
7171
]
7272

7373
export const eduOption = [
7474
{
7575
id: 110,
7676
name: '博士后',
77-
value: 1,
77+
value: '博士后',
7878
},
7979
{
8080
id: 111,
8181
name: '博士',
82-
value: 2,
82+
value: '博士',
8383
},
8484
{
8585
id: 112,
8686
name: '硕士',
87-
value: 3,
87+
value: '硕士',
8888
},
8989
{
9090
id: 113,
9191
name: '本科',
92-
value: 4,
92+
value: '本科',
9393
},
9494
{
9595
id: 114,
9696
name: '专科',
97-
value: 5,
97+
value: '专科',
9898
},
9999
{
100100
id: 115,
101101
name: '高中',
102-
value: 6,
102+
value: '高中',
103103
},
104104
{
105105
id: 116,
106106
name: '初中',
107-
value: 7,
107+
value: '初中',
108108
},
109109
{
110110
id: 117,
111111
name: '小学',
112-
value: 1,
112+
value: '小学',
113113
},
114114
]

‎src/pages/home/left-components/self-Skill/index.tsx

+19-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
1-
import React, { ChangeEvent, memo } from 'react'
1+
import React, { ChangeEvent, memo, useCallback } from 'react'
22

3-
import {Input} from 'antd'
3+
import { Input } from 'antd'
44
import styles from './style.module.scss'
5+
import { useDispatch } from 'react-redux'
6+
import { changeSelfSkill } from 'src/pages/home/store'
57

68
const SelfSkill: React.FC = () => {
7-
const handle = (e: ChangeEvent<HTMLTextAreaElement>) => {
8-
console.log(e.target.value)
9-
}
9+
const dispatch = useDispatch()
10+
const handle = useCallback(
11+
(e: ChangeEvent<HTMLTextAreaElement>) => {
12+
const value = e.target.value
13+
dispatch(changeSelfSkill(value))
14+
},
15+
[dispatch]
16+
)
1017
return (
1118
<div className={styles['self-skill']}>
12-
<Input.TextArea placeholder="请输入内容" autoSize={{ minRows: 3, maxRows: 12 }} showCount onChange={handle} />
19+
<Input.TextArea
20+
placeholder="请输入内容"
21+
autoSize={{ minRows: 3, maxRows: 12 }}
22+
showCount
23+
onChange={handle}
24+
/>
1325
</div>
1426
)
1527
}
1628

17-
export default memo(SelfSkill)
29+
export default memo(SelfSkill)

‎src/pages/home/left-components/self-Skill/style.module.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.self-skill {
2+
:global {
3+
.ant-input-textarea-show-count::after {
4+
color: #e5e5e5;
5+
}
6+
}
7+
}

‎src/pages/home/left-components/self-awards/index.tsx

+19-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
1-
import React, { ChangeEvent, memo } from 'react'
1+
import React, { ChangeEvent, memo, useCallback } from 'react'
22

3-
import {Input} from 'antd'
3+
import { Input } from 'antd'
44
import styles from './style.module.scss'
5+
import { useDispatch } from 'react-redux'
6+
import { changeSelfAwards } from 'src/pages/home/store/index'
57

68
const SelfAwards: React.FC = () => {
7-
const handle = (e: ChangeEvent<HTMLTextAreaElement>) => {
8-
console.log(e.target.value)
9-
}
9+
const dispatch = useDispatch()
10+
const handle = useCallback(
11+
(e: ChangeEvent<HTMLTextAreaElement>) => {
12+
const value = e.target.value
13+
dispatch(changeSelfAwards(value))
14+
},
15+
[dispatch]
16+
)
1017
return (
1118
<div className={styles['self-awards']}>
12-
<Input.TextArea placeholder="请输入内容" autoSize={{ minRows: 3, maxRows: 12 }} showCount onChange={handle} />
19+
<Input.TextArea
20+
placeholder="请输入内容"
21+
autoSize={{ minRows: 3, maxRows: 12 }}
22+
showCount
23+
onChange={handle}
24+
/>
1325
</div>
1426
)
1527
}
1628

17-
export default memo(SelfAwards)
29+
export default memo(SelfAwards)

0 commit comments

Comments
 (0)