harry
parent
ed5b352799
commit
24dabf0c2a
@ -0,0 +1,334 @@
|
||||
/*
|
||||
* @Description:
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-12-01 09:17:07
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-12-02 16:33:35
|
||||
*/
|
||||
import 'quill/dist/quill.core.css';
|
||||
import 'quill/dist/quill.bubble.css';
|
||||
import 'quill/dist/quill.snow.css';
|
||||
import './index.scss';
|
||||
import React, { useState, useImperativeHandle, useRef, useEffect } from 'react';
|
||||
import { Form, Input, InputNumber, Button, Select } from 'antd';
|
||||
import { connect } from 'react-redux';
|
||||
import AddTestDemo from './AddTestDemo';
|
||||
import QuillEditor from '../../../quillEditor';
|
||||
import actions from '../../../../../redux/actions';
|
||||
import CONST from '../../../../../constants';
|
||||
|
||||
const {jcLabel} = CONST;
|
||||
const { Option } = Select;
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const maps = {
|
||||
language: [
|
||||
{ title: 'C', key: 'C' },
|
||||
{ title: 'C++', key: 'C++' },
|
||||
{ title: 'Python', key: 'Python' },
|
||||
{ title: 'Java', key: 'Java' }
|
||||
],
|
||||
difficult: [
|
||||
{ title: '简单', key: '1' },
|
||||
{ title: '中等', key: '2'},
|
||||
{ title: '困难', key: '3' }
|
||||
],
|
||||
category: [
|
||||
{ title: '程序设计', key: '1' },
|
||||
{ title: '算法', key: '2'}
|
||||
],
|
||||
openOrNot: [
|
||||
{ title: '公开', key: '1' },
|
||||
{ title: '私有', key: '0' }
|
||||
]
|
||||
}
|
||||
|
||||
function EditTab (props, ref) {
|
||||
|
||||
const {
|
||||
form,
|
||||
ojForm,
|
||||
position,
|
||||
testCases,
|
||||
addTestCase,
|
||||
deleteTestCase,
|
||||
testCasesValidate,
|
||||
getFormData
|
||||
} = props;
|
||||
|
||||
const { getFieldDecorator } = form;
|
||||
|
||||
const formRef = useRef(null);
|
||||
const [description, setDescription] = useState('');
|
||||
|
||||
// 获取表单label
|
||||
const myLabel = (name, subTitle) => {
|
||||
if (subTitle) {
|
||||
return (
|
||||
<span className={'label_text'}>
|
||||
{name}
|
||||
<span className={'label_sub_text'}>
|
||||
({subTitle})
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<span className={'label_text'}>{name}</span>
|
||||
)
|
||||
}
|
||||
};
|
||||
// 获取下拉列表项
|
||||
const getOptions = (key) => {
|
||||
return maps[key].map((opt, i) => {
|
||||
return (
|
||||
<Option value={opt.key} key={`opt_${i}`}>{opt.title}</Option>
|
||||
);
|
||||
});
|
||||
};
|
||||
// 向外暴露的方法
|
||||
useImperativeHandle(ref, () => ({
|
||||
validateForm () {
|
||||
props.form.validateFieldsAndScroll((err, values) => {
|
||||
if (!err) {
|
||||
getFormData(() => {
|
||||
return values;
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
}));
|
||||
// 添加测试用例
|
||||
const handleAddTest = () => {
|
||||
const obj = { // 测试用例参数
|
||||
input: '',
|
||||
output: '',
|
||||
position: position,
|
||||
isAdd: true // 新增的测试用例
|
||||
}
|
||||
const validateObj = { // 测试用例验证参数
|
||||
input: {
|
||||
validateStatus: '',
|
||||
errMsg: ''
|
||||
},
|
||||
output: {
|
||||
validateStatus: '',
|
||||
errMsg: ''
|
||||
}
|
||||
}
|
||||
addTestCase({testCase: obj, tcValidate: validateObj});
|
||||
// TODO 点击新增时，需要滚到到最底部
|
||||
// this.editorRef.current.scrollTop
|
||||
// const oDiv = this.editorRef.current;
|
||||
// oDiv.scrollTo(oDiv.scrollLeft, 99999);
|
||||
// console.log(oDiv.scrollTop);
|
||||
// oDiv.scrollTop = 99999;
|
||||
}
|
||||
// 渲染测试用例
|
||||
const renderTestCase = () => {
|
||||
return testCases.map((item, i) => {
|
||||
return (
|
||||
<AddTestDemo
|
||||
key={`key_${i}`}
|
||||
onSubmitTest={handleSubmitTest}
|
||||
onDeleteTest={handleDeleteTest}
|
||||
testCase={item}
|
||||
testCaseValidate={testCasesValidate[i]}
|
||||
index={i}
|
||||
/>
|
||||
)
|
||||
});
|
||||
};
|
||||
// 提交测试用例
|
||||
const handleSubmitTest = (obj) => {
|
||||
console.log('提交的测试用例: ', obj);
|
||||
};
|
||||
// 删除测试用例
|
||||
const handleDeleteTest = (obj) => {
|
||||
console.log('删除的测试用例: ', obj);
|
||||
deleteTestCase(obj);
|
||||
};
|
||||
// 描述信息改变时
|
||||
const handleChangeDescription = (value) => {
|
||||
console.log('描述信息改变: ', value);
|
||||
if (value) {
|
||||
setDescription(value);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (description) {
|
||||
props.form.setFieldsValue({
|
||||
description: description
|
||||
}, function () {
|
||||
console.log('设置成功。。。');
|
||||
});
|
||||
}
|
||||
}, [description]);
|
||||
|
||||
return (
|
||||
<div className={'editor_area'}>
|
||||
<Form
|
||||
hideRequiredMark={true}
|
||||
className={'editor_form'}
|
||||
ref={formRef}>
|
||||
<FormItem
|
||||
className={`input_area flex_60`}
|
||||
label={<span>{myLabel(jcLabel['name'])}</span>}
|
||||
>
|
||||
{
|
||||
getFieldDecorator('name', {
|
||||
rules: [
|
||||
{ required: true, message: '任务名称不能为空' }
|
||||
],
|
||||
initialValue: ojForm.name
|
||||
})(<Input placeholder="请输入任务名称"/>)
|
||||
}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
className={`input_area flex_40`}
|
||||
label={<span>{myLabel(jcLabel['language'])}</span>}
|
||||
>
|
||||
{
|
||||
getFieldDecorator('language', {
|
||||
rules: [
|
||||
{ required: true, message: '语言不能为空' }
|
||||
],
|
||||
initialValue: ojForm.language
|
||||
})(
|
||||
<Select>
|
||||
{getOptions('language')}
|
||||
</Select>)
|
||||
}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
className={`input_area flex_100`}
|
||||
label={<span>{myLabel(jcLabel['description'])}</span>}
|
||||
>
|
||||
{
|
||||
getFieldDecorator('description', {
|
||||
rules: [
|
||||
{ required: true, message: '描述信息不能为空' }
|
||||
],
|
||||
initialValue: ojForm.description
|
||||
})(<QuillEditor
|
||||
style={{ height: '300px' }}
|
||||
placeholder="请输入描述信息"
|
||||
htmlCtx={ojForm.description}
|
||||
onEditorChange={handleChangeDescription}
|
||||
/>)
|
||||
}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
className={`input_area flex_50 flex_50_left`}
|
||||
label={<span>{myLabel(jcLabel['difficult'], '任务的难易程度')}</span>}
|
||||
>
|
||||
{
|
||||
getFieldDecorator('difficult', {
|
||||
rules: [
|
||||
{ required: true, message: '难度不能为空' }
|
||||
],
|
||||
initialValue: `${ojForm.difficult || ''}`
|
||||
})(
|
||||
<Select>
|
||||
{getOptions('difficult')}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
className={`input_area flex_50 flex_50_right`}
|
||||
label={<span>{myLabel(jcLabel['timeLimit'], '程序允许时间限制时长，单位：秒')}</span>}
|
||||
>
|
||||
{
|
||||
getFieldDecorator('timeLimit', {
|
||||
rules: [
|
||||
{ required: true, message: '时间限制不能为空' }
|
||||
],
|
||||
initialValue: ojForm.timeLimit
|
||||
})(<InputNumber min={0} style={{ width: '100%' }} />)
|
||||
}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
className={`input_area flex_50 flex_50_left`}
|
||||
label={<span>{myLabel(jcLabel['category'], '任务所属分类')}</span>}
|
||||
>
|
||||
{
|
||||
getFieldDecorator('category', {
|
||||
rules: [
|
||||
{ required: true, message: '任务名称不能为空' }
|
||||
],
|
||||
initialValue: `${ojForm.category || ''}`
|
||||
})(
|
||||
<Select>
|
||||
{getOptions('category')}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
className={`input_area flex_50 flex_50_right`}
|
||||
label={<span>{myLabel(jcLabel['openOrNot'])}</span>}
|
||||
>
|
||||
{
|
||||
getFieldDecorator('openOrNot', {
|
||||
rules: [
|
||||
{ required: true, message: '任务名称不能为空' }
|
||||
],
|
||||
initialValue: `${ojForm.openOrNot}`
|
||||
})(
|
||||
<Select>
|
||||
{getOptions('openOrNot')}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
</FormItem>
|
||||
</Form>
|
||||
{/* 添加测试用例 */}
|
||||
<div className="test_demo_title">
|
||||
<h2>测试用例</h2>
|
||||
<Button type="primary" onClick={handleAddTest}>添加测试用例</Button>
|
||||
</div>
|
||||
<div className="test_demo_ctx">
|
||||
{ renderTestCase() }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const ojFormReducer = state.ojFormReducer;
|
||||
const {ojForm, position, testCases, testCasesValidate} = ojFormReducer;
|
||||
return {
|
||||
ojForm,
|
||||
testCases,
|
||||
testCasesValidate,
|
||||
position
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
// 新增测试用例
|
||||
addTestCase: (value) => dispatch(actions.addTestCase(value)),
|
||||
// 删除测试用例
|
||||
deleteTestCase: (value) => dispatch(actions.deleteTestCase(value)),
|
||||
})
|
||||
|
||||
// EditTab = React.formRef(EditTab);
|
||||
// EditTab = React.forwardRef(EditTab);
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Form.create()(
|
||||
React.forwardRef(EditTab)
|
||||
));
|
||||
Loading…
Reference in new issue