问卷答题详情

Mr Ke

2020-03-31 09b4797fb18e2971434c8cfc217f706628e0126e

问卷答题详情

 SunshineIns/src/fetch/getAnswer.js

New file
@@ -0,0 +1,6 @@
import fetch from './_fetch';
import { message } from 'antd';
export default ({ id, userId }) =>
  fetch(`api/question/getAnswer?id=${id}&userId=${userId}`)
    .then(json => json.data)
    .catch(error => message.error('详情加载失败，请联系管理员', 2));

 SunshineIns/src/fetch/index.js

@@ -100,6 +100,7 @@
import searchLawSave from './searchLawSave';
import searchLawDelete from './searchLawDelete';
import questionFindPersonById from './questionFindPersonById';
import getAnswer from './getAnswer';

export default {
  domain,
@@ -203,5 +204,6 @@
  searchLawFind,
  searchLawSave,
  searchLawDelete,
  questionFindPersonById
  questionFindPersonById,
  getAnswer
};

 SunshineIns/src/page/Login.jsx

@@ -42,8 +42,8 @@
      // debugger;
      if (res.code === 0) {
        // location.href = res.data;
        // location.href ='http://localhost:8080/index.html#/'
        location.href ='http://nsjcy.hugeinfo.com.cn/nsjc-charge/pc/index.html#/'
        location.href ='http://localhost:8080/index.html#/'
        // location.href ='http://nsjcy.hugeinfo.com.cn/nsjc-charge/pc/index.html#/'
      } else {
        message.error(res.msg, 2)
      }

 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>
        }


 SunshineIns/src/view/QuestionnairAnswer/index.js

@@ -1,23 +1,55 @@
import React from 'react';
import { Table, Tag } from 'antd';

const QuestionnairAnswer = ({
  answer
}) => {
  console.log(answer)
const QuestionnairAnswer = ({ answer, index }) => {
  // console.log(answer);
  // const columns = [
  //   {
  //     title: 'Name',
  //     dataIndex: 'name',
  //     key: 'name',
  //     render: text => <a>{text}</a>,
  //   },
  //   {
  //     title: 'Age',
  //     dataIndex: 'age',
  //     key: 'age',
  //   },
  //   {
  //     title: 'Address',
  //     dataIndex: 'address',
  //     key: 'address',
  //   },
  return (
    // {`${index + 1}.
    <div style={{ minHeight: 60 }}>
      <div style={{ color: '#666' }}>{`${index + 1}.${answer.type === 'input' ? answer.completionForwards : answer.title + ':'}`}</div>
      <div style={{ paddingLeft: 12, color: '#151515' }}>{typeof answer.answer[answer.type] !== 'string' ? (
        typeof answer.answer[answer.type].optionValue !== 'string' ? (
          answer.answer[answer.type].optionValue.map((item, index) => {
            return (
              item && <span key={index} style={{ marginRight: 15 }}>{item}</span>
            )
          })
        ) : answer.answer[answer.type].optionValue
      ) : answer.answer[answer.type]}</div>
      {answer.answer && (
        <React.Fragment>
          <div style={{ color: '#666' }}>
            {index + 1}、
            {answer.type === 'input'
              ? answer.completionForwards
              : answer.title + ':'}
          </div>
          <div style={{ paddingLeft: 12, color: '#151515' }}>
            {typeof answer.answer[answer.type] !== 'string'
              ? typeof answer.answer[answer.type].optionValue !== 'string'
                ? answer.answer[answer.type].optionValue.map((item, index) => {
                    return (
                      item && (
                        <span key={index} style={{ marginRight: 15 }}>
                          {item}
                        </span>
                      )
                    );
                  })
                : answer.answer[answer.type].optionValue
              : answer.answer[answer.type]}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}
};

export default QuestionnairAnswer;
export default QuestionnairAnswer;

 SunshineIns/src/view/QuestionnairEditor/index.js

@@ -386,7 +386,7 @@
    }
  };
  render() {
    const { index, curMoveItem, drag, acitveAnswer } = this.props;
    const { index, curMoveItem, drag, acitveAnswer, disabled } = this.props;
    const {
      toggleMutiOption,
      editor,
@@ -660,6 +660,7 @@
              <input
                type="radio"
                name="radio"
                disabled={disabled || false}
                data-index={index}
                value={data}
                defaultChecked={
@@ -710,11 +711,12 @@
              <input
                type="checkbox"
                name="checkbox"
                disabled={disabled || false}
                value={data}
                data-index={index}
                defaultChecked={
                  answer &&
                  this.answer.checkbox !== '' &&
                  this.answer.checkbox &&
                  this.answer.checkbox.optionIndex.includes(index + '')
                }
                onChange={this.handleAnswerChange}