问卷内容详情

dev_aliyun_beta
caicai8 6 years ago
parent a5fc4f9144
commit 96bde76ac6

@ -1,14 +1,13 @@
import React,{ Component } from "react";
import {Checkbox,Radio} from "antd";
import '../css/members.css'
import '../css/busyWork.css'
import './pollStyle.css'
import PollDetailTabThirdInfo from './PollDetailTabThirdInfo'
import axios from 'axios';
const map={1:"单选题",2:"多选题",3:"主观题",4:"主观题"}
class PollDetailTabThird extends Component{
constructor(props){
super(props);
@ -36,105 +35,7 @@ class PollDetailTabThird extends Component{
let {pollDetail}=this.state;
return(
<div>
{
pollDetail && pollDetail.poll.polls_description &&
<p style={{backgroundColor:"#F2F9FF",whiteSpace:"pre-wrap"}} className="color-blue pt15 pb15 pl30 pr30">{ pollDetail.poll.polls_description }</p>
}
<div className="edu-back-white">
<p className="padding20-30 clearfix bor-bottom-greyE edu-txt-left">
{ pollDetail && pollDetail.question_types.q_counts===0 ? "" :
<span className="color-grey-3">
{
pollDetail && pollDetail.question_types.q_counts > 0 &&
<span>合计{pollDetail.question_types.q_counts}</span>
}
{
pollDetail && pollDetail.question_types.q_singles > 0 &&
<span className="mr15 color-grey-9">单选题{pollDetail.question_types.q_singles}</span>
}
{
pollDetail && pollDetail.question_types.q_doubles > 0 &&
<span className="mr15 color-grey-9">多选题{pollDetail.question_types.q_doubles}</span>
}
{
pollDetail && pollDetail.question_types.q_mains > 0 &&
<span className="color-grey-9">主观题{pollDetail.question_types.q_mains}</span>
}
</span>
}
</p>
{
pollDetail && pollDetail.questions.map((item,key)=>{
console.log("ddd");
console.log(item.question.min_choices);
return(
<div className="previewList">
<p className="pl30 pr30 pt30 pb15 font-16 clearfix">
<span className="color-blue mr8 fl">{item.question.question_number}{map[item.question.question_type]}</span>
{ item.question.is_necessary==1 ? <span className="mustAnswer fl ml10 mr10">必答</span>:<span className="mustAnswer fl ml10 mr10"></span> }
{ item.question.question_type == 2 && item.question.min_choices != undefined && item.question.min_choices != null && item.question.max_choices != undefined && item.question.max_choices != null ?
<span className="color-grey-9 font-14 fl mt2">
{
item.question.min_choices == item.question.max_choices ? "可选"+item.question.max_choices+"项" :
"可选"+item.question.min_choices+"-"+item.question.max_choices+"项"
}
</span>:""
}
</p>
<li className="pl30 pr30 pb15">{item.question.question_title}</li>
{
// 单选题
item.question.question_type==1 &&
<Radio.Group className="answerList" disabled>
{
item.question.answers.map((index,k)=>{
return(
<li className="df">
<Radio className="fl" value={index.answer_id}></Radio>
<span className={index.answer_text=="其他"?"break-word":"break-word flex1"}>{index.answer_text}</span>
{
index.answer_text=="其他" ? <p className="textLine"></p>:""
}
</li>
)
})
}
</Radio.Group>
}
{
// 多选题
item.question.question_type==2 &&
<Checkbox.Group className="answerList" disabled>
{
item.question.answers.map((index,k)=>{
return(
<li className="df" key={k}>
<Checkbox className="fl mr8" value={index.answer_id} key={index.answer_id}></Checkbox>
<span className={index.answer_text=="其他"?"break-word":"break-word flex1"}>{index.answer_text}</span>
{
index.answer_text=="其他" ? <p className="textLine"></p>:""
}
</li>
)
})
}
</Checkbox.Group>
}
{
// 主观题
item.question.question_type == 3 &&
<div className="mt10 pl30 pr30 pb20">
<textarea placeholder="在此填入答案" readOnly className="winput-100-130"></textarea>
</div>
}
</div>
)
})
}
</div>
<PollDetailTabThirdInfo {...this.props} {...this.state} pollDetail = {pollDetail}></PollDetailTabThirdInfo>
</div>
)
}

@ -0,0 +1,117 @@
import React,{ Component } from "react";
import {Checkbox,Radio} from "antd";
import '../css/members.css'
import '../css/busyWork.css'
import './pollStyle.css'
const map={1:"单选题",2:"多选题",3:"主观题",4:"主观题"}
class PollDetailTabThirdInfo extends Component{
constructor(props){
super(props);
}
render(){
let { pollDetail }=this.props;
return(
<div className="edu-back-white">
{
pollDetail && pollDetail.poll.polls_description &&
<p style={{whiteSpace:"pre-wrap"}} className="color-grey-3 padding20-30">{ pollDetail.poll.polls_description }</p>
}
<p className="padding20-30 clearfix edu-txt-left" style={{background:"#fafafa"}}>
{ pollDetail && pollDetail.question_types.q_counts===0 ? "" :
<span className="color-grey-3">
{
pollDetail && pollDetail.question_types.q_counts > 0 &&
<span>合计{pollDetail.question_types.q_counts}</span>
}
{
pollDetail && pollDetail.question_types.q_singles > 0 &&
<span className="mr15 color-grey-9">单选题{pollDetail.question_types.q_singles}</span>
}
{
pollDetail && pollDetail.question_types.q_doubles > 0 &&
<span className="mr15 color-grey-9">多选题{pollDetail.question_types.q_doubles}</span>
}
{
pollDetail && pollDetail.question_types.q_mains > 0 &&
<span className="color-grey-9">主观题{pollDetail.question_types.q_mains}</span>
}
</span>
}
</p>
{
pollDetail && pollDetail.questions.map((item,key)=>{
return(
<div className="previewList">
<p className="pl30 pr30 pt30 pb15 font-16 clearfix">
<span className="color-blue mr8 fl">{item.question.question_number}{map[item.question.question_type]}</span>
{ item.question.is_necessary==1 ? <span className="mustAnswer fl ml10 mr10">必答</span>:<span className="mustAnswer fl ml10 mr10"></span> }
{ item.question.question_type == 2 && item.question.min_choices != undefined && item.question.min_choices != null && item.question.max_choices != undefined && item.question.max_choices != null ?
<span className="color-grey-9 font-14 fl mt2">
{
item.question.min_choices == item.question.max_choices ? "可选"+item.question.max_choices+"项" :
"可选"+item.question.min_choices+"-"+item.question.max_choices+"项"
}
</span>:""
}
</p>
<li className="pl30 pr30 pb15">{item.question.question_title}</li>
{
// 单选题
item.question.question_type==1 &&
<Radio.Group className="answerList" disabled>
{
item.question.answers.map((index,k)=>{
return(
<li className="df">
<Radio className="fl" value={index.answer_id}></Radio>
<span className={index.answer_text=="其他"?"break-word":"break-word flex1"}>{index.answer_text}</span>
{
index.answer_text=="其他" ? <p className="textLine"></p>:""
}
</li>
)
})
}
</Radio.Group>
}
{
// 多选题
item.question.question_type==2 &&
<Checkbox.Group className="answerList" disabled>
{
item.question.answers.map((index,k)=>{
return(
<li className="df" key={k}>
<Checkbox className="fl mr8" value={index.answer_id} key={index.answer_id}></Checkbox>
<span className={index.answer_text=="其他"?"break-word":"break-word flex1"}>{index.answer_text}</span>
{
index.answer_text=="其他" ? <p className="textLine"></p>:""
}
</li>
)
})
}
</Checkbox.Group>
}
{
// 主观题
item.question.question_type == 3 &&
<div className="pl30 pr30 pb20">
<textarea placeholder="在此填入答案" readOnly className="winput-100-130"></textarea>
</div>
}
</div>
)
})
}
</div>
)
}
}
export default PollDetailTabThirdInfo

@ -70,7 +70,7 @@ class BanksIndex extends Component{
<p className="clearfix mt20 mb20">
<span className="fl font-24 color-grey-3 task-hide lineh-30" style={{maxWidth:'800px'}}>{crumbData && crumbData.title}</span>
{
crumbData && crumbData.is_public && <span className="bank_is_public">{crumbData.is_public == true ? '公开':'私有'}</span>
crumbData && <span className="bank_is_public">{crumbData.is_public == true ? '公开':'私有'}</span>
}
</p>
@ -89,7 +89,12 @@ class BanksIndex extends Component{
return (<BanksTabIndex {...this.props} {...props} {...this.state} {...common}/>)
}
}></Route>
<Route path='/banks/poll/:bankId'
render={
(props) => {
return (<BanksTabIndex {...this.props} {...props} {...this.state} {...common} />)
}
}></Route>
</Switch>
</div>

@ -12,6 +12,11 @@ const GtopicBanks = Loadable({
loader: () => import('./GtopicBanks'),
loading: Loading,
})
// 问卷内容
const PollBanks = Loadable({
loader: () => import('./PollBanksContent'),
loading: Loading,
})
class BanksTabIndex extends Component{
constructor(props){
@ -56,6 +61,12 @@ class BanksTabIndex extends Component{
return (<GtopicBanks {...this.props} {...props} {...this.state} {...common} />)
}
}></Route>
<Route path='/banks/poll/:bankId'
render={
(props) => {
return (<PollBanks {...this.props} {...props} {...this.state} {...common} />)
}
}></Route>
</Switch>
</React.Fragment>

@ -0,0 +1,64 @@
import React, { Component } from 'react';
import axios from 'axios'
import PollDetailTabThirdInfo from '../../../courses/poll/PollDetailTabThirdInfo'
class PollBanksContent extends Component{
constructor(props){
super(props);
this.state={
pollDetail:undefined
}
}
componentDidMount = () =>{
let bankId=this.props.match.params.bankId;
let url = `/exercise_banks/${bankId}.json`
axios.get(url).then((result)=>{
if(result){
let pollDetail = {
poll:{
id: result.data.poll && result.data.poll.id ,
polls_description: result.data.poll && result.data.poll.description,
polls_name: result.data.poll && result.data.poll.name,
is_public:result.data.poll && result.data.poll.is_public
},
question_types:result.data.question_types,
questions:result.data.questions,
}
const crumbData={
title:result.data.poll && result.data.poll.name,
is_public:result.data.poll && result.data.poll.is_public,
crumbArray:[
{content:'详情'},
]
}
const menuData={
tab:'0',//tab选中的index
menuArray:[//tab以及tab路由
{to:`/banks/poll/${bankId}`,content:'内容详情'}
],
category:'poll',//毕设选题
id:bankId
}
this.props.initPublic(crumbData,menuData);
this.setState({
pollDetail
})
}
}).catch((error)=>{
console.log(error);
})
}
render(){
let { pollDetail } = this.state
return(
<div>
<PollDetailTabThirdInfo {...this.props} {...this.state} pollDetail = {pollDetail}></PollDetailTabThirdInfo>
</div>
)
}
}
export default PollBanksContent
Loading…
Cancel
Save