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

import React from 'react';
import moment from 'moment';
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, bindSearch, getMap } from '@src/services/Tools';
import { asyncSMessage, asyncForm } from '@src/services/AsyncTools';
import { CourseSource, CourseStatus, CourseVsType } from '../../../../Constant';
import { Course } from '../../../stores/course';
import { User } from '../../../stores/user';

const CourseSourceMap = getMap(CourseSource, 'value', 'label');
const CourseStatusMap = getMap(CourseStatus, 'value', 'label');
const CourseVsTypeMap = getMap(CourseVsType, 'value', 'label');

export default class extends Page {
  init() {
    this.onlineAction = [{
      key: 'info',
      name: '课程',
      render: () => {
        const { data } = this.state;
        return `${data.title}`;
      },
    }, {
      key: 'addOnlineStudent',
      name: '添加学员',
    }];
    this.onlineFilter = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'timeId',
      type: 'select',
      allowClear: true,
      select: [],
      number: true,
      name: '时间段',
    }, {
      key: 'userId',
      type: 'select',
      name: '学员',
      allowClear: true,
      select: [],
      number: true,
      placeholder: '请输入',
    }];
    this.onlineList = [{
      key: 'timeId',
      type: 'select',
      select: [],
      name: '时间段',
    }, {
      key: 'userIds',
      type: 'multiple',
      name: '学员',
      allowClear: true,
      select: [],
      number: true,
      placeholder: '请输入',
    }];
    this.onlineColumns = [{
      title: '时间段',
      dataIndex: 'time',
      render: (text) => {
        return `${formatDate(text.startTime, 'YYYY-MM-DD')}~${formatDate(text.endTime, 'YYYY-MM-DD')}`;
      },
    }, {
      title: '学员id',
      dataIndex: 'userId',
    }, {
      title: '学员名称',
      dataIndex: 'user.nickname',
    }, {
      title: '手机号',
      dataIndex: 'user.mobile',
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record) => {
        return <div className="table-button">
          {<a onClick={() => {
            this.deleteOnlineStudent(record);
          }}>删除</a>}
        </div>;
      },
    }];

    this.vsAction = [{
      key: 'info',
      name: '课程',
      render: () => {
        const { data } = this.state;
        return `${data.title}(${CourseVsTypeMap[data.vsType]})`;
      },
    }, {
      key: 'addVsStudent',
      name: '添加学员',
    }];
    this.vsList = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'userId',
      type: 'select',
      name: '学员',
      select: [],
      number: true,
      placeholder: '请输入',
      // }, {
      //   key: 'time',
      //   type: 'daterange',
      //   name: '有效期',
    }, {
      key: 'teacherId',
      type: 'select',
      select: [],
      name: '老师',
    }, {
      key: 'number',
      type: 'number',
      name: '课时数',
    }, {
      key: 'cctalkName',
      type: 'input',
      name: 'CCTalk用户名',
    }];
    this.vsColumns = [{
      title: '学员名称',
      dataIndex: 'user.nickname',
    }, {
      title: '有效期',
      dataIndex: 'time',
      render: (text, record) => {
        return record.isUsed ? `${formatDate(record.useStartTime, 'YYYY-MM-DD')}~${formatDate(record.useEndTime, 'YYYY-MM-DD')}` : '';
      },
    }, {
      title: '添加方式',
      dataIndex: 'source',
      render: (text) => {
        return CourseSourceMap[text] || text;
      },
    }, {
      title: '授课老师',
      dataIndex: 'teacher.realname',
    }, {
      title: '状态',
      dataIndex: 'status',
      render: (text, record) => {
        let status = 0;
        if (record.isUsed) {
          const end = new Date(record.useEndTime);
          status = 1;
          if (new Date().getTime() > end.getTime()) {
            status = 2;
          }
        }
        return CourseStatusMap[status] || status;
      },
    }, {
      title: 'CCTalk用户名',
      dataIndex: 'cctalkName',
    }, {
      title: '操作',
      dataIndex: 'handler',
      render: (text, record) => {
        return <div className="table-button">
          {<a onClick={() => {
            this.changeVs(record);
          }}>修改</a>}
        </div>;
      },
    }];
  }

  initData() {
    const { id } = this.params;
    let handler;
    if (id) {
      handler = Course.get({ id });
    }

    handler
      .then(result => {
        this.setState({ module: result.courseModule });
        this.setState({ data: result });
        this.refresh();
      });
  }

  refresh() {
    const { id } = this.params;
    const { module } = this.state;
    switch (module) {
      case 'video':
        break;
      case 'online':
        bindSearch(this.onlineFilter, 'timeId', this, (search) => {
          return Course.listTime(Object.assign({ courseId: id }, search));
        }, (row) => {
          return {
            title: `${formatDate(row.startTime, 'YYYY-MM-DD')}~${formatDate(row.endTime, 'YYYY-MM-DD')}`,
            value: row.id,
          };
        }, this.state.search.timeId ? Number(this.state.search.timeId) : null, null);
        bindSearch(this.onlineFilter, 'userId', this, (search) => {
          return User.list(search);
        }, (row) => {
          return {
            title: `${row.nickname}(${row.mobile})`,
            value: row.id,
          };
        }, null, null);

        bindSearch(this.onlineList, 'timeId', this, (search) => {
          return Course.listTime(Object.assign({ courseId: id }, search));
        }, (row) => {
          return {
            title: `${formatDate(row.startTime, 'YYYY-MM-DD')}~${formatDate(row.endTime, 'YYYY-MM-DD')}`,
            value: row.id,
          };
        }, null, null);
        bindSearch(this.onlineList, 'userIds', this, (search) => {
          return User.list(search);
        }, (row) => {
          return {
            title: `${row.nickname}(${row.mobile})`,
            value: row.id,
          };
        }, [], null);
        this.refreshOnline();
        break;
      case 'vs':
        this.refreshVs();
        break;
      default:
    }
  }

  refreshOnline() {
    const { id } = this.params;
    Course.listStudentOnline(Object.assign({ courseId: id }, this.state.search)).then(result => {
      this.setTableData(result.list, result.total);
    });
  }

  refreshVs() {
    const { id } = this.params;
    Course.listStudentVs(Object.assign({ courseId: id }, this.state.search)).then(result => {
      this.setTableData(result.list, result.total);
    });
  }

  addOnlineStudentAction() {
    const { id } = this.params;
    asyncForm('添加', this.onlineList, {}, data => {
      return Promise.all(data.userIds.map(userId => Course.addStudentOnline({ courseId: id, timeId: data.timeId, userId }))).then(() => {
        asyncSMessage('添加成功!');
        this.refresh();
      });
    }).catch(err => {
      console.log(err);
    });
  }

  deleteOnlineStudent(row) {
    Course.delStudentOnline({ id: row.id }).then(() => {
      asyncSMessage('删除成功!');
      this.refresh();
    });
  }

  changeVs(record) {
    const { id } = this.params;
    const { data } = this.state;
    record.time = [moment(record.useStartTime), moment(record.useEndTime)];
    this.vsList[4].type = data.vsType === 'novice' ? 'hidden' : 'number';
    asyncForm('修改', this.vsList, record, info => {
      // ([info.useStartTime, info.useEndTime] = info.time);
      return Course.editStudentVs(Object.assign({ courseId: id }, info)).then(() => {
        asyncSMessage('添加成功!');
        this.refresh();
      });
    }).then(component => {
      bindSearch(this.vsList, 'userId', component, (search) => {
        return User.list(search);
      }, (row) => {
        return {
          title: `${row.nickname}(${row.mobile})`,
          value: row.id,
        };
      }, record.userId, null);
      bindSearch(this.vsList, 'teacherId', component, (search) => {
        return Course.listTeacher(Object.assign({ courseId: id }, search));
      }, (row) => {
        return {
          title: row.realname,
          value: row.id,
        };
      }, record.teacherId, null);
    });
  }

  addVsStudentAction() {
    const { id } = this.params;
    const { data } = this.state;
    this.vsList[4].type = data.vsType === 'novice' ? 'hidden' : 'number';
    asyncForm('添加', this.vsList, {}, info => {
      if (data.vsType === 'novice') {
        // 写死：新手每次1课时
        info.number = 1;
      }
      // ([info.useStartTime, info.useEndTime] = info.time);
      return Course.addStudentVs(Object.assign({ courseId: id }, info)).then(() => {
        asyncSMessage('添加成功!');
        this.refresh();
      });
    }).then(component => {
      bindSearch(this.vsList, 'userId', component, (search) => {
        return User.list(search);
      }, (row) => {
        return {
          title: `${row.nickname}(${row.mobile})`,
          value: row.id,
        };
      }, null, null);
      bindSearch(this.vsList, 'teacherId', component, (search) => {
        return Course.listTeacher(Object.assign({ courseId: id }, search));
      }, (row) => {
        return {
          title: row.realname,
          value: row.id,
        };
      }, null, null);
    });
  }

  renderOnline() {
    return <Block flex>
      {<FilterLayout
        show
        itemList={this.onlineFilter}
        data={this.state.search}
        onChange={data => {
          this.search(data);
        }} />}
      <ActionLayout
        itemList={this.onlineAction}
        selectedKeys={this.state.selectedKeys}
        onAction={key => this.onAction(key)}
      />
      <TableLayout
        columns={this.onlineColumns}
        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}
      />
    </Block>;
  }

  renderVs() {
    return <Block flex>
      {<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}
      />
    </Block>;
  }

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