import React from 'react';
|
import './index.scss';
|
import Input from '../../libs/Input';
|
// import Button from '../../libs/Button';
|
import { Button, Select } from 'antd';
|
|
// import Default from '../../assets/scale_default.png'
|
const Option = Select.Option;
|
class QuestionnairContent extends React.PureComponent {
|
state = {
|
questionnairSign: false,
|
questionnairTitle: '',
|
questionnairDescription: '',
|
questionnairBusinessType: ''
|
};
|
|
componentDidMount() {
|
const { title, content, businessType } = this.props.initData;
|
console.log(title);
|
this.setState({
|
questionnairTitle: title,
|
questionnairDescription: content,
|
questionnairBusinessType: businessType
|
});
|
}
|
//新增题目时内容页滚动到底部
|
componentDidUpdate() {
|
if (this.scrollBottom) {
|
const scrollHeight = this.content.scrollHeight;
|
this.page.scrollTo(0, scrollHeight);
|
}
|
if (this.scrollTo) {
|
this.page.scrollTo(0, this.scrollTo);
|
}
|
}
|
|
componentWillReceiveProps(nextProps) {
|
if (nextProps.isFirst) {
|
this.scrollBottom = true;
|
} else {
|
this.scrollBottom = false;
|
}
|
if (nextProps.scrollTo !== this.props.scrollTo) {
|
this.scrollTo = nextProps.scrollTo;
|
} else {
|
this.scrollTo = false;
|
}
|
this.setState({
|
questionnairSign: nextProps.questionnairSign
|
// questionnairTitle: nextProps.questionnairTitle,
|
// questionnairDescription: nextProps.questionnairDescription
|
});
|
}
|
|
handleSign = () => {
|
const { onChangeSign } = this.props;
|
this.setState(
|
prevState => ({
|
questionnairSign: !prevState.questionnairSign
|
}),
|
() => {
|
onChangeSign(this.state.questionnairSign);
|
}
|
);
|
};
|
|
handleChange = ({ target: { value, name } }) => {
|
console.log(value, name)
|
this.setState({
|
[name]: value
|
});
|
}
|
|
handleBlur = () => {
|
// const { onBlurTitle } = this.props;
|
// if (onBlurTitle) {
|
// onBlurTitle(this.state.questionnairTitle);
|
// }
|
};
|
|
render() {
|
const {
|
questionnairSign,
|
questionnairTitle,
|
questionnairDescription,
|
questionnairBusinessType
|
} = this.state;
|
const { submitQuestionTemp, editors, btnLoading } = this.props;
|
|
const questionnairtitleEl = (
|
<div className="title-inner">
|
<span style={{ color: 'red' }}>*</span>
|
<Input
|
placeholder="问卷标题"
|
value={questionnairTitle}
|
name='questionnairTitle'
|
onChange={this.handleChange}
|
onBlur={this.handleBlur}
|
style={{
|
height: 45,
|
borderColor: 'transparent',
|
textAlign: 'center',
|
fontSize: 18,
|
color: '#666',
|
fontFamily: 'PingFangSC-Medium'
|
}}
|
className="title-input"
|
/>
|
</div>
|
);
|
const questionnairDescriptionEl = (
|
<div className="title-inner" style={{ marginTop: 10 }}>
|
<Input
|
placeholder="问卷描述"
|
value={questionnairDescription}
|
name='questionnairDescription'
|
onChange={this.handleChange}
|
onBlur={this.handleBlur}
|
style={{
|
height: 25,
|
borderColor: 'transparent',
|
textAlign: 'left',
|
fontSize: 16,
|
color: '#666',
|
fontFamily: 'PingFangSC-Medium'
|
}}
|
className="title-input"
|
/>
|
</div>
|
);
|
const questionnairBusinessType1 = (
|
<div className="title-inner" style={{ marginTop: 10 }}>
|
<span style={{ color: 'red' }}>*</span>
|
<Select placeholder="业务类型"
|
value={questionnairBusinessType}
|
style={{
|
width: '100%',
|
textAlign: 'center',
|
fontSize: 18,
|
color: '#666',
|
fontFamily: 'PingFangSC-Medium'
|
}}
|
onChange={(value) => this.handleChange({ target: { name: 'questionnairBusinessType', value } })}
|
>
|
<Option value='1'>企业体检</Option>
|
<Option value='2'>培训活动</Option>
|
<Option value='3'>未检调查</Option>
|
<Option value='4'>刑执监督</Option>
|
</Select>
|
</div>
|
);
|
return (
|
<div className="questionnair-page" ref={el => (this.page = el)}>
|
<div className="questionnair-page-banner">
|
{/* <div className='banner-text' onClick={this.handleSign} style={{ color: questionnairSign ? '#FFBF47' : '' }}>
|
<i className="iconfont icon-dengpao"></i>
|
<span style={{ marginLeft: 6 }}>{questionnairSign ? '取消标记' : '标记'}</span>
|
</div> */}
|
</div>
|
<div className="questionnair-page-title">
|
{questionnairtitleEl}
|
{questionnairDescriptionEl}
|
{questionnairBusinessType1}
|
</div>
|
<div
|
className="questionnair-page-content"
|
ref={el => (this.content = el)}
|
>
|
{/*如果组件没有子节点，this.props.children返回false*/}
|
{this.props.children || (
|
<div className="questionnair-page-default">
|
{/* <img src={Default} style={{ width: 130 }}/> */}
|
<div className="page-default-text">
|
您还没有添加题目哦，请点击左侧控件开始出题吧
|
</div>
|
</div>
|
)}
|
</div>
|
{this.props.children && (
|
<div className="questionnair-page-footer">
|
<div className="footer-text">
|
<Button
|
loading={btnLoading}
|
type="primary"
|
onClick={() => {
|
if (this.props.isThereEditor()) {
|
return;
|
}
|
// this.props.isThereEditor();
|
submitQuestionTemp(editors, {
|
questionnairTitle,
|
questionnairDescription,
|
questionnairBusinessType
|
});
|
}}
|
>
|
提交问卷模板
|
</Button>
|
</div>
|
</div>
|
)}
|
</div>
|
);
|
}
|
}
|
|
export default QuestionnairContent;
|
