Skip to content

Commit 8425ac9

Browse files
xgChangexgChange
committed
完成基本布局、markdown、左边编辑、现在集成redux
1 parent 282cf4b commit 8425ac9

File tree

28 files changed

+467
-40
lines changed

28 files changed

+467
-40
lines changed

‎.eslintrc.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ module.exports = {
1212
},
1313
},
1414
rules: {
15-
indent: ['off', 2],
15+
indent: ['warn', 2, {
16+
'SwitchCase': 1
17+
}],
1618
quotes: [
1719
1,
1820
'single',
@@ -27,5 +29,7 @@ module.exports = {
2729
'prefer-spread': 'off',
2830
'@typescript-eslint/no-var-requires': 'off',
2931
'@typescript-eslint/no-empty-function': 'off',
32+
'@typescript-eslint/no-explicit-any': 'off'
33+
'react/no-children-prop': 'off'
3034
},
3135
}

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,21 @@
1111
"@types/node": "^12.0.0",
1212
"@types/react": "^17.0.0",
1313
"@types/react-dom": "^17.0.0",
14+
"@types/react-redux": "^7.1.16",
1415
"antd": "^4.13.0",
1516
"babel-plugin-import": "^1.13.3",
1617
"customize-cra": "^1.0.0",
18+
"markdown-to-jsx": "^7.1.1",
1719
"moment": "^2.29.1",
1820
"node-sass": "^5.0.0",
1921
"normalize.css": "^8.0.1",
2022
"react": "^17.0.1",
2123
"react-app-rewired": "^2.1.8",
2224
"react-dom": "^17.0.1",
25+
"react-redux": "^7.2.2",
2326
"react-scripts": "4.0.3",
27+
"redux": "^4.0.5",
28+
"redux-thunk": "^2.3.0",
2429
"typescript": "^4.1.2",
2530
"web-vitals": "^1.0.1"
2631
},

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/**
2+
* @description 教育信息组件
3+
*/
4+
5+
import React, { Fragment, memo, PropsWithChildren, useCallback, useState } from 'react'
6+
7+
import { Form, Input, Button, DatePicker } from 'antd'
8+
import {MinusCircleOutlined} from '@ant-design/icons'
9+
import 'moment/locale/zh-cn'
10+
import locale from 'antd/es/date-picker/locale/zh_CN'
11+
import moment from 'moment'
12+
13+
import styles from './style.module.scss'
14+
15+
const layout = {
16+
labelCol: { span: 5 },
17+
wrapperCol: { span: 16 },
18+
}
19+
20+
interface FormConfig {
21+
field: string[]
22+
label: string[]
23+
onFinished: (values: any) => void
24+
}
25+
26+
const FormCommon = ({ field, label, onFinished }: PropsWithChildren<FormConfig>) => {
27+
const [formCountArr, setFormCountArr] = useState<string[]>([])
28+
const [formData, setFormData] = useState<any[]>([])
29+
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])
53+
54+
const addEduForm = useCallback(() => {
55+
setFormCountArr([...formCountArr, `${Math.random()}${Date.now()}`])
56+
}, [formCountArr])
57+
58+
const delForm = useCallback((index: number) => {
59+
setFormCountArr(formCountArr.filter((item, k) => k !== index))
60+
}, [formCountArr])
61+
62+
return (
63+
<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>
92+
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>
103+
</div>
104+
)
105+
}
106+
107+
export default memo(FormCommon)

‎src/components/form-common/style.module.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.self-education {
2+
.del-btn {
3+
display: block;
4+
text-align: right;
5+
font-size: 18px;
6+
cursor: pointer;
7+
}
8+
:global {
9+
label {
10+
color: #e5e5ee;
11+
}
12+
.ant-form-item {
13+
&:last-child {
14+
.ant-form-item-control {
15+
padding-left: 76px;
16+
}
17+
}
18+
}
19+
}
20+
}

‎src/mock/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ export const NavPanelData: PanelDataObj[] = [
4747
icon: '',
4848
type: 'SelfSkill',
4949
},
50+
{
51+
id: 1008,
52+
text: '校园经历',
53+
icon: '',
54+
type: 'SelfSchool'
55+
}
5056
]
5157

5258
export const SexOption = [

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { ChangeEvent, memo } from 'react'
2+
3+
import {Input} from 'antd'
4+
import styles from './style.module.scss'
5+
6+
const SelfSkill: React.FC = () => {
7+
const handle = (e: ChangeEvent<HTMLTextAreaElement>) => {
8+
console.log(e.target.value)
9+
}
10+
return (
11+
<div className={styles['self-skill']}>
12+
<Input.TextArea placeholder="请输入内容" autoSize={{ minRows: 3, maxRows: 12 }} showCount onChange={handle} />
13+
</div>
14+
)
15+
}
16+
17+
export default memo(SelfSkill)

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

Whitespace-only changes.

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { ChangeEvent, memo } from 'react'
2+
3+
import {Input} from 'antd'
4+
import styles from './style.module.scss'
5+
6+
const SelfAwards: React.FC = () => {
7+
const handle = (e: ChangeEvent<HTMLTextAreaElement>) => {
8+
console.log(e.target.value)
9+
}
10+
return (
11+
<div className={styles['self-awards']}>
12+
<Input.TextArea placeholder="请输入内容" autoSize={{ minRows: 3, maxRows: 12 }} showCount onChange={handle} />
13+
</div>
14+
)
15+
}
16+
17+
export default memo(SelfAwards)

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

Whitespace-only changes.

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

Lines changed: 56 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
* @description 教育信息组件
33
*/
44

5-
import React, { memo } from 'react'
5+
import React, { Fragment, memo, useState, useCallback } from 'react'
66

77
import { Form, Input, Select, Button, DatePicker } from 'antd'
8+
import {MinusCircleOutlined} from '@ant-design/icons'
89
import 'moment/locale/zh-cn'
910
import locale from 'antd/es/date-picker/locale/zh_CN'
1011
import moment from 'moment'
@@ -18,7 +19,9 @@ const layout = {
1819
}
1920

2021
const SelfEducation: React.FC = () => {
21-
const finished = (values: any) => {
22+
const [formCountArr, setFormCountArr] = useState<string[]>([])
23+
24+
const finished = useCallback((values: any, item: string) => {
2225
if (values.eduTime && values.eduTime.length > 0) {
2326
const startTime = moment(values.eduTime[0]).format('YYYY-MM')
2427
const endTime = moment(values.eduTime[1]).format('YYYY-MM')
@@ -28,44 +31,61 @@ const SelfEducation: React.FC = () => {
2831
eduTime: [startTime, endTime],
2932
}
3033
)
31-
console.log(values, forMatInfo)
34+
console.log(forMatInfo)
3235
}
33-
}
34-
return (
35-
<div className={styles['self-education']}>
36-
<Form {...layout} name="basic" onFinish={finished}>
37-
<Form.Item label="学校" name="school" rules={[{ required: true, message: '学校不能为空' }]}>
38-
<Input />
39-
</Form.Item>
36+
}, [])
4037

41-
<Form.Item label="专业" name="profession" rules={[{ required: true, message: '专业不能为空' }]}>
42-
<Input />
43-
</Form.Item>
38+
const addEduForm = useCallback(() => {
39+
setFormCountArr([...formCountArr, `${Math.random()}${Date.now()}`])
40+
}, [formCountArr])
4441

45-
<Form.Item label="学历" name="eduLevel" rules={[{ required: true, message: '学历不能为空' }]}>
46-
<Select>
47-
{eduOption.map((item) => (
48-
<Select.Option value={item.value} key={item.id}>
49-
{item.name}
50-
</Select.Option>
51-
))}
52-
</Select>
53-
</Form.Item>
42+
const delForm = useCallback((index: number) => {
43+
setFormCountArr(formCountArr.filter((item, k) => k !== index))
44+
}, [formCountArr])
5445

55-
<Form.Item
56-
name="eduTime"
57-
label="在校时间"
58-
rules={[{ type: 'array' as const, required: true, message: '时间不能为空!' }]}
59-
>
60-
<DatePicker.RangePicker locale={locale} picker="month" />
61-
</Form.Item>
62-
63-
<Form.Item>
64-
<Button type="primary" htmlType="submit">
65-
完成
66-
</Button>
67-
</Form.Item>
68-
</Form>
46+
return (
47+
<div className={styles['self-education']}>
48+
{
49+
formCountArr.map((item, index, arr) => (
50+
<Fragment key={item}>
51+
{arr.length > 1 && <MinusCircleOutlined className={styles['del-btn']} onClick={() => delForm(index)}/>}
52+
<Form {...layout} name={item} onFinish={(values) => finished(values, item)}>
53+
<Form.Item label="学校" name="school" rules={[{ required: true, message: '学校不能为空' }]}>
54+
<Input />
55+
</Form.Item>
56+
57+
<Form.Item label="专业" name="profession" rules={[{ required: true, message: '专业不能为空' }]}>
58+
<Input />
59+
</Form.Item>
60+
61+
<Form.Item label="学历" name="eduLevel" rules={[{ required: true, message: '学历不能为空' }]}>
62+
<Select>
63+
{eduOption.map((item) => (
64+
<Select.Option value={item.value} key={item.id}>
65+
{item.name}
66+
</Select.Option>
67+
))}
68+
</Select>
69+
</Form.Item>
70+
71+
<Form.Item
72+
name="eduTime"
73+
label="在校时间"
74+
rules={[{ type: 'array' as const, required: true, message: '时间不能为空!' }]}
75+
>
76+
<DatePicker.RangePicker locale={locale} picker="month" />
77+
</Form.Item>
78+
79+
<Form.Item>
80+
<Button type="primary" htmlType="submit">
81+
完成
82+
</Button>
83+
</Form.Item>
84+
</Form>
85+
</Fragment>
86+
))
87+
}
88+
<Button type="dashed" block style={{background: 'transparent', color: '#e5e5e5'}} onClick={addEduForm}>新增</Button>
6989
</div>
7090
)
7191
}

0 commit comments

Comments
 (0)