| | |
| | | import React from 'react'; |
| | | import { Input, Button, DatePicker, Divider, message, Popconfirm, Select, Badge, Spin, Breadcrumb } from 'antd'; |
| | | import { Input, Button, DatePicker, Divider, message, Popconfirm, Select, Badge, Spin, Breadcrumb, Table } from 'antd'; |
| | | import Questionnair from './Questionnair' |
| | | import Fetch from '../fetch' |
| | | import TableView from '../view/TableView'; |
| | | import HeadView from '../view/HeadView'; |
| | | import moment from 'moment'; |
| | | |
| | | export default class QuestionPersonDetail extends React.Component { |
| | | constructor(props) { |
| | |
| | | data: [], |
| | | initData: null, |
| | | btnLoading: false, |
| | | dateSource: [] |
| | | dateSource: null |
| | | }; |
| | | } |
| | | |
| | |
| | | this.setState({ |
| | | loading: true |
| | | }); |
| | | Fetch.questionFindPersonById(id, userId).then(res => { |
| | | Fetch.getAnswer({ id, userId }).then(res => { |
| | | console.log('res', res); |
| | | console.log('res', res); |
| | | this.setState({ |
| | | loading: false, |
| | | initData: res |
| | | dataSoure: res |
| | | }) |
| | | }) |
| | | } |
| | |
| | | |
| | | } |
| | | |
| | | switchByType = (type) => { |
| | | switch (type) { |
| | | case 'radio': |
| | | return '单选题'; |
| | | case 'checkbox': |
| | | return '多选题' |
| | | } |
| | | } |
| | | |
| | | columns = () => { |
| | | return [ |
| | | { |
| | | title: '问题', |
| | | dataIndex: 'questionTitle', |
| | | key: 'questionTitle', |
| | | }, |
| | | { |
| | | title: '问题类型', |
| | | dataIndex: 'type', |
| | | key: 'type', |
| | | render: (cur, item) => { |
| | | return this.switchByType(cur) |
| | | } |
| | | }, |
| | | { |
| | | title: '问题选项', |
| | | dataIndex: 'options', |
| | | key: 'options', |
| | | render: (cur) => { |
| | | return cur.map((a, idx) => { |
| | | return <div> |
| | | {idx + 1}、{a}; |
| | | </div> |
| | | }) |
| | | } |
| | | }, |
| | | { |
| | | title: '答题情况', |
| | | dataIndex: 'itemDesc', |
| | | key: 'itemDesc', |
| | | render: (cur, item) => { |
| | | return cur || '未提供答案' |
| | | } |
| | | }, |
| | | { |
| | | title: '得分', |
| | | dataIndex: 'score', |
| | | key: 'score', |
| | | render: (cur) => { |
| | | return cur + '分' |
| | | } |
| | | }, |
| | | ]; |
| | | } |
| | | |
| | | render() { |
| | | |
| | | const { data, loading, resetKey, initData, btnLoading, dateSource } = this.state; |
| | | const { loading, dataSoure } = this.state; |
| | | return ( |
| | | <div className="app-page"> |
| | | <HeadView history={this.props.history} /> |
| | |
| | | <Breadcrumb.Item> |
| | | <a onClick={() => { |
| | | this.props.history.goBack(); |
| | | }}>问卷管理</a> |
| | | }}>返回</a> |
| | | </Breadcrumb.Item> |
| | | |
| | | <Breadcrumb.Item> |
| | | 问卷详情 |
| | | 问卷答题详情 |
| | | </Breadcrumb.Item> |
| | | </Breadcrumb> |
| | | </div> |
| | |
| | | <React.Fragment> |
| | | {/* <Questionnair submitQuestionTemp={this.submitQuestionTemp} btnLoading={btnLoading} /> */} |
| | | { |
| | | initData && |
| | | dataSoure && |
| | | <div style={{ background: '#fff', marginTop: 10 }}> |
| | | <div style={{ width: 700, margin: '0 auto', padding: '20px 0 0 0 ' }}> |
| | | <div style={{ width: 600, margin: '0 auto', padding: '20px 0 0 0 ' }}> |
| | | <h3> |
| | | 问卷标题:{initData.title || '暂无'} |
| | | 问卷标题:{dataSoure[0].title || '暂无'} |
| | | </h3> |
| | | <h4 style={{ marginBottom: 0 }}> |
| | | 问卷描述:{initData.content || '暂无'} |
| | | 答题人:{dataSoure[0].userName || '暂无'} |
| | | </h4> |
| | | <h4 style={{ marginBottom: 0 }}> |
| | | 业务类型:{typeStatus(initData.businessType) || '暂无'} |
| | | 答题时间:{dataSoure[0].createTime ? moment(dataSoure[0].createTime).format("YYYY-MM-DD HH:mm") : '暂无'} |
| | | </h4> |
| | | <h4 style={{ marginBottom: 0 }}> |
| | | 答题总得分:{dataSoure.map(({ score }) => score).reduce(function (prev, cur, index, array) { |
| | | return prev + cur |
| | | })}分 |
| | | </h4> |
| | | </div> |
| | | </div> |
| | | } |
| | | |
| | | {initData && initData.questionDtos.map((item, index) => ( |
| | | <Questionnair.Editor editor={item} acitveAnswer={true} data={initData} key={item.questionId} index={index} /> |
| | | ))} |
| | | {/* {initData && initData.questionDtos.map((item, index) => ( |
| | | <React.Fragment> |
| | | <Questionnair.Editor editor={item} acitveAnswer={true} data={initData} key={item.questionId} index={index} disabled={true}/> |
| | | <Questionnair.Answer answer={item} index={index} /> |
| | | </React.Fragment> |
| | | ))} */} |
| | | |
| | | { |
| | | dataSoure && |
| | | <div style={{ background: '#fff', padding: 40 }}> |
| | | <Table columns={this.columns()} dataSource={dataSoure} style={{ width: '80%', margin: '0 auto' }} pagination={false}></Table> |
| | | </div> |
| | | } |
| | | |
| | | </React.Fragment> |
| | | } |
| | | |