sourcecode/front/project/admin/routes/student/studyDetail/page.js

import React from 'react';
import moment from 'moment';
import { DatePicker, Checkbox, Modal, Form, Input, Row, Col, Button, Upload, List, Comment } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
// import FilterLayout from '@src/layouts/FilterLayout';
import ActionLayout from '@src/layouts/ActionLayout';
import TableLayout from '@src/layouts/TableLayout';
import { formatDate, formatSecond, formatPercent } from '@src/services/Tools';
import { asyncSMessage, asyncForm } from '@src/services/AsyncTools';
import { PcUrl } from '../../../../Constant';
import { Course } from '../../../stores/course';
import { User } from '../../../stores/user';
import { System } from '../../../stores/system';


export default class extends Page {
  init() {
    this.videoColumns = [{
      title: '课时',
      dataIndex: 'courseNo.no',
    }, {
      title: '课时名称',
      dataIndex: 'courseNo.title',
    }, {
      title: '学习记录',
      dataIndex: 'records',
      render: (text) => {
        return (text || []).map(row => {
          return <p>{formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss')} {formatSecond(row.userTime)}</p>;
        });
      },
    }, {
      title: '预习作业进度',
      dataIndex: 'userPaper',
      render: (text, record) => {
        const { userPaper, userReport } = record;
        return `${userPaper ? `${userPaper.times}遍` : ''}${userReport ? formatPercent(userReport.userNumber, userReport.questionNumber, false) : '0%'}`;
      },
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record) => {
        return <div className="table-button">
          {<a onClick={() => {
            User.locationUser(record.userId, `${PcUrl}/my/report`);
          }}>查看</a>}
        </div>;
      },
    }];

    this.vsAction = [{
      key: 'addAppointment',
      name: '添加预约',
    }];
    this.vsList = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'title',
      type: 'input',
      name: '课程名称',
    }, {
      key: 'timerange',
      type: 'daterange',
      showTime: true,
      name: '上课时间',
    }, {
      key: 'cctalkChannel',
      type: 'input',
      name: '频道号',
    }];
    this.vsColumns = [{
      title: '课时序号',
      dataIndex: 'no',
      render: (text) => {
        const { data } = this.state;
        return `${text}/${data.number}`;
      },
    }, {
      title: '上课时间',
      dataIndex: 'time',
      render: (text, record) => {
        return <DatePicker.RangePicker showTime value={[record.startTime, record.endTime]} onChange={(value) => {
          this.changeAppointment(record.id, { startTime: value[0], endTime: value[1] });
        }} />;
      },
    }, {
      title: '课程名称',
      dataIndex: 'title',
    }, {
      title: '频道号',
      dataIndex: 'cctalkChannel',
    }, {
      title: '学习进度',
      dataIndex: 'isFinish',
      render: (text, record) => {
        return <Checkbox checked={text > 0} onChange={(e) => {
          this.changeAppointment(record.id, { isFinish: e.target.checked ? 1 : 0 });
        }} />;
      },
    }, {
      title: '预习作业',
      dataIndex: 'previewAssign',
      render: (text, record) => {
        const { userPaper } = record;
        return userPaper ? <a onClick={() => {
          User.locationUser(record.userId, `${PcUrl}/paper/report/${record.reportId}`);
        }} target="_blank">查看{userPaper.times > 0 ? '(已完成)' : ''}</a> : (text ? text.title : '');
      },
    }, {
      title: '笔记批阅',
      dataIndex: 'noteList',
      render: (text, record) => {
        return <a onClick={() => {
          this.noteAction(record);
        }}>查看</a>;
      },
    }, {
      title: '课后补充',
      dataIndex: 'supplyList',
      render: (text, record) => {
        return <a onClick={() => {
          this.supplyAction(record);
        }}>查看</a>;
      },
    }];
  }

  initData() {
    const { id } = this.params;
    let handler;
    if (id) {
      handler = Course.listStudy({ ids: [id] });
    }

    handler
      .then(result => {
        const [row] = result.list;
        if (!row) {
          asyncSMessage('记录不存在');
          return;
        }
        const { course } = row;
        this.setState({ data: row, module: course.courseModule });
        this.refresh();
      });
  }

  refresh() {
    // const { id } = this.params;
    const { module } = this.state;
    switch (module) {
      case 'video':
        this.refreshVideo();
        break;
      case 'online':
        break;
      case 'vs':
        this.refreshVs();
        break;
      default:
    }
  }

  refreshVideo() {
    const { id } = this.params;
    User.allCourseRecord(Object.assign({ recordId: id }, this.state.search)).then(result => {
      this.setTableData(result, result ? result.length : 0);
    });
  }

  refreshVs() {
    const { id } = this.params;
    User.listCourseAppointment(Object.assign({ recordId: id }, this.state.search)).then(result => {
      result.list = result.list.map(row => {
        row.startTime = moment(row.startTime);
        row.endTime = moment(row.endTime);
        return row;
      });
      this.setTableData(result.list, result.total);
    });
  }

  refreshComment(appointmentId, type) {
    this.setState({ comment: {} });
    User.allCourseAppointmentComment({ appointmentId, type })
      .then(result => {
        const commentMap = {};
        result.forEach((row) => {
          commentMap[row.id] = row;
        });
        this.setState({ commentList: result, commentMap });
      });
  }

  changeAppointment(id, data) {
    data.id = id;
    return User.editCourseAppointment(data).then(() => {
      this.refreshVs();
      this.cleanInfo();
    });
  }

  addAppointmentAction() {
    const { id } = this.params;
    asyncForm('添加', this.vsList, {}, info => {
      const { data } = this.state;
      ([info.startTime, info.endTime] = info.timerange);
      return User.addCourseAppointment(Object.assign({ recordId: id, userId: data.userId, courseId: data.courseId, noteList: [], supplyList: [] }, info)).then(() => {
        asyncSMessage('添加成功!');
        this.refreshVs();
      });
    }).catch(err => {
      console.log(err);
    });
  }

  noteAction(record) {
    this.open(record, 'note');
    this.refreshComment(record.id, 'note');
  }

  supplyAction(record) {
    this.open(record, 'supply');
    this.refreshComment(record.id, 'supply');
  }

  submitComment(comment) {
    if (comment.id) {
      User.editCourseAppointmentComment(comment)
        .then(() => {
          this.refreshComment(comment.appointmentId, comment.type);
          this.setState({ comment: {} });
        });
    } else {
      User.addCourseAppointmentComment(comment)
        .then(() => {
          this.refreshComment(comment.appointmentId, comment.type);
          this.setState({ comment: {} });
        });
    }
  }

  deleteComment(comment) {
    User.delCourseAppointmentComment({ id: comment.id }).then(() => {
      this.refreshComment(comment.appointmentId, comment.type);
    });
  }

  deleteAppointment(row) {
    User.delCourseAppointment({ id: row.id }).then(() => {
      asyncSMessage('删除成功!');
      this.refresh();
    });
  }

  changeInfo(key, data) {
    const info = this.state[key] || {};
    this.setState({ [key]: Object.assign(info, data) });
  }

  renderVs() {
    const { data, page, commentMap } = this.state;
    return <div flex>
      {data.number > page.total && <ActionLayout
        itemList={this.vsAction}
        selectedKeys={this.state.selectedKeys}
        onAction={key => this.onAction(key)}
      />}
      <TableLayout
        columns={this.vsColumns}
        list={this.state.list}
        pagination={this.state.page}
        loading={this.props.core.loading}
        onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
        onSelect={(keys, rows) => this.tableSelect(keys, rows)}
        selectedKeys={this.state.selectedKeys}
      />
      {this.state.note && <Modal visible closable title='课后笔记' footer={null} onCancel={() => {
        this.close(false, 'note');
      }}>
        <List
          className="comment-list"
          itemLayout="horizontal"
          dataSource={this.state.commentList}
          renderItem={item => (
            <Comment
              actions={[!!item.userId && <span onClick={() => this.changeInfo('comment', { id: null, parentId: item.id, file: null, content: null })}>回复</span>, !item.userId && <span onClick={() => this.changeInfo('comment', item)}>编辑</span>, !item.userId && <span onClick={() => this.deleteComment(item)}>删除</span>]}
              author={item.userId ? '学生' : '老师'}
              // avatar={item.userId ? '学' : '师'}
              content={<p>{item.reply && <span>{item.reply}</span>}{item.content}<br /> {item.file && <a href={item.file} target="_blank">{item.name || '文件'}</a>}</p>}
              datetime={formatDate(item.createTime, 'YYYY-MM-DD')}
            />
          )}
        />
        <Form>
          <Row>
            {this.state.comment.parentId && <Col span={24}><span>回复：{(commentMap[this.state.comment.parentId] || {}).content}</span></Col>}
            <Col span={12}>
              <Input value={(this.state.comment || {}).content || ''} onChange={e => {
                this.changeInfo('comment', { content: e.target.value });
              }} />
            </Col>
            <Col span={1}><Upload
              showUploadList={false}
              beforeUpload={(file) => System.uploadImage(file).then((result) => {
                this.changeInfo('comment', { file: result.url, name: file.name });
                return Promise.reject();
              })}
            >
              <Button>上传文档{(this.state.comment || {}).file ? '(已上传)' : ''}</Button>
            </Upload></Col>
            <Col span={1} offset={8}><Button type='primary' onClick={() => {
              if (!this.state.comment || !this.state.comment.content) {
                asyncSMessage('请输入内容', 'error');
                return;
              }
              this.state.comment.appointmentId = this.state.note.id;
              this.state.comment.type = 'note';
              this.state.comment.recordId = this.state.note.recordId;
              this.submitComment(this.state.comment);
            }}>{(this.state.comment || {}).id ? '修改' : '发布'}</Button></Col>
          </Row>
        </Form>
      </Modal>}
      {this.state.supply && <Modal visible closable title='课后补充' footer={null} onCancel={() => {
        this.close(false, 'supply');
      }}>
        <List
          className="comment-list"
          itemLayout="horizontal"
          dataSource={this.state.commentList}
          renderItem={item => (
            <Comment
              actions={[!!item.userId && <span onClick={() => this.changeInfo('comment', { id: null, parentId: item.id, file: null, content: null })}>回复</span>, !item.userId && <span onClick={() => this.changeInfo('comment', item)}>编辑</span>, !item.userId && <span onClick={() => this.deleteComment(item)}>删除</span>]}
              author={item.userId ? '学生' : '老师'}
              // avatar={item.userId ? '学' : '师'}
              content={<p>{item.reply && <span>{item.reply}</span>}{item.content}<br /> {item.file && <a href={item.file} target="_blank">{item.name || '文件'}</a>}</p>}
              datetime={formatDate(item.createTime, 'YYYY-MM-DD')}
            />
          )}
        />
        <Form>
          <Row>
            {this.state.comment.parentId && <Col span={24}><span>回复：{(commentMap[this.state.comment.parentId] || {}).content}</span></Col>}
            <Col span={12}>
              <Input value={(this.state.comment || {}).content || ''} onChange={e => {
                this.changeInfo('comment', { content: e.target.value });
              }} />
            </Col>
            <Col span={1}><Upload
              showUploadList={false}
              beforeUpload={(file) => System.uploadImage(file).then((result) => {
                this.changeInfo('comment', { file: result.url, name: file.name });
                return Promise.reject();
              })}
            >
              <Button>上传文档{(this.state.comment || {}).file ? '(已上传)' : ''}</Button>
            </Upload></Col>
            <Col span={1} offset={8}><Button type='primary' onClick={() => {
              if (!this.state.comment || !this.state.comment.content) {
                asyncSMessage('请输入内容', 'error');
                return;
              }
              this.state.comment.appointmentId = this.state.supply.id;
              this.state.comment.type = 'supply';
              this.state.comment.recordId = this.state.supply.recordId;
              this.submitComment(this.state.comment);
            }}>{(this.state.comment || {}).id ? '修改' : '发布'}</Button></Col>
          </Row>
        </Form>
      </Modal>}
    </div>;
  }

  renderVideo() {
    return <div flex>
      <TableLayout
        columns={this.videoColumns}
        list={this.state.list}
        pagination={this.state.page}
        loading={this.props.core.loading}
        onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
        onSelect={(keys, rows) => this.tableSelect(keys, rows)}
        selectedKeys={this.state.selectedKeys}
      />
    </div>;
  }

  renderDetail() {
    switch (this.state.module) {
      case 'online':
        return [];
      case 'vs':
        return [this.renderVs()];
      case 'video':
        return [this.renderVideo()];
      default:
        return <div />;
    }
  }

  renderView() {
    const { data = {} } = this.state;
    const { course = {} } = data;
    return <Block flex>
      <h1>{course.title}{data.vsNo > 0 ? `V${data.vsNo}` : ''}{data.number > 0 ? `(${data.number}课时)` : ''}</h1>
      {this.renderDetail()}
    </Block>;
  }
}