forked from nsjcy/frontEnd/nsjcy

xuxj
2020-05-09 d7004986135c0885c1b9a92fb48919179732c00d
SunshineIns/src/page/QuestionPersonDetail.jsx
@@ -1,9 +1,10 @@
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) {
@@ -13,7 +14,7 @@
      data: [],
      initData: null,
      btnLoading: false,
      dateSource: []
      dateSource: null
    };
  }
@@ -27,11 +28,12 @@
    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
      })
    })
  }
@@ -75,9 +77,64 @@
  }
  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} />
@@ -88,11 +145,10 @@
            <Breadcrumb.Item>
              <a onClick={() => {
                this.props.history.goBack();
              }}>问卷管理</a>
              }}>返回</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              问卷详情
              问卷答题详情
            </Breadcrumb.Item>
          </Breadcrumb>
        </div>
@@ -104,25 +160,41 @@
            <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>
        }