fix:列表样式调整、列表数据更新补充

e7744cf6 · yuananting · 4c69da71 · e7744cf6 · e7744cf6 · e7744cf6
Commit e7744cf6 authored Aug 14, 2021 by yuananting
9 changed files
--- a/src/data-source/taskCenter/request-apis.ts
+++ b/src/data-source/taskCenter/request-apis.ts
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-08-06 17:35:35
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-14 09:51:12
+ * @LastEditTime: 2021-08-14 15:15:07
 * @Description: 任务中心接口
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
@@ -52,3 +52,7 @@ export function updateTrainingTaskAssign(params: object) {
 export function getTrainingCourseAutoCancel(params: object) {
  return Service.Hades('public/hades/getTrainingCourseAutoCancel', params);
 }
+export function delTaskCancelContent(params: object) {
+  return Service.Hades('public/hades/delTaskCancelContent', params);
+}
--- a/src/domains/task-center-domain/TaskCenterService.ts
+++ b/src/domains/task-center-domain/TaskCenterService.ts
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-08-06 17:32:41
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-14 09:52:00
+ * @LastEditTime: 2021-08-14 15:16:12
 * @Description: 任务中心-培训任务接口
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
@@ -19,6 +19,7 @@ import {
  getTaskCustomerDetail,
  updateTrainingTaskAssign,
  getTrainingCourseAutoCancel,
+  delTaskCancelContent,
 } from '@/data-source/taskCenter/request-apis';
 export default class TaskCenterService {
@@ -76,4 +77,9 @@ export default class TaskCenterService {
  static getTrainingCourseAutoCancel(params: any) {
    return getTrainingCourseAutoCancel(params);
  }
+  // 删除失效课程
+  static delTaskCancelContent(params: any) {
+    return delTaskCancelContent(params);
+  }
 }
--- a/src/modules/task-center/train-task/TrainTaskPage.jsx
+++ b/src/modules/task-center/train-task/TrainTaskPage.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-07-28 11:25:58
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-10 15:10:44
+ * @LastEditTime: 2021-08-14 17:18:39
 * @Description: 任务中心-培训任务
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -23,7 +23,7 @@ function TrainTaskPage(props) {
    issueState: 'ALL', // 发布状态
    myAssist: false, // 是否由我协同
    size: 10,
-    sortMap: {}, // 排序
+    sortMap: { UPDATED: 'SORT_DESC' }, // 排序(默认更新时间倒序)
    startTime: null,
    storeId: User.getStoreId(),
    storeUserId: User.getStoreUserId(),
@@ -48,7 +48,9 @@ function TrainTaskPage(props) {
  useEffect(() => {}, []);
  const initPageData = () => {
-    Bus.bind('getTrainingTaskPage', getTrainingTaskPage);
+    Bus.bind('getTrainingTaskPage', (filterData) => {
+      getTrainingTaskPage(filterData);
+    });
    Bus.bind('getStoreTaskNum', getStoreTaskNum);
  };
@@ -58,8 +60,8 @@ function TrainTaskPage(props) {
  };
  // 获取计划列表
-  function getTrainingTaskPage() {
+  function getTrainingTaskPage(filterData) {
-    let _query = _.clone(query);
+    const _query = { ...query, ...filterData };
    if (_query.issueState === 'ALL') {
      delete _query.issueState;
    }

--- a/src/modules/task-center/train-task/components/ExpiredCourseList.jsx
+++ b/src/modules/task-center/train-task/components/ExpiredCourseList.jsx
@@ -2,37 +2,66 @@
 * @Author: yuananting
 * @Date: 2021-08-03 10:47:59
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-03 18:31:56
+ * @LastEditTime: 2021-08-14 17:35:04
 * @Description: 编辑培训任务-失效课程
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import React from 'react';
-import { List } from 'antd';
+import { List, message, Modal } from 'antd';
 import './ExpiredCourseList.less';
 import ENUM from '../../enum';
+import moment from 'moment';
+import TaskCenterService from '@/domains/task-center-domain/TaskCenterService';
 function ExpiredCourseList(props) {
-  const expiredCourseList = [1, 2, 3, 4];
+  // 移除未成功开课课程
+  function deLExpiredCourse(contentId) {
+    Modal.confirm({
+      content: '你确定要删除该数据内容吗？',
+      okText: '取消',
+      cancelText: '确定',
+      icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
+      onOk: () => {
+        const params = {
+          taskId: window.getParameterByName('taskId'),
+          contentId: [contentId],
+        };
+        TaskCenterService.deLExpiredCourse(params).then((res) => {
+          message.success('删除成功');
+        });
+      },
+    });
+  }
  return (
    <div className='expired-list-page'>
      <div className='tip'>为了不影响学员学习，「未成功开课」的课程已从任务中移出，具体课程如下所示：</div>
      <List
-        dataSource={expiredCourseList}
+        dataSource={props.expiredCourseList}
        renderItem={(item) => (
          <List.Item>
            <div className='item-detail'>
              <span className='icon iconfont'>&#xe80b;</span>
              <span className='content-status'>未成功开课</span>
-              <span className='stage-name'>阶段一、</span>
+              <span className='stage-name'>{item.stageName}</span>
              <span className='content-name'>
-                <img src={ENUM.LearningContentIcon['LIVE']} />
+                <img src={ENUM.LearningContentIcon[item.courseType]} />
-                <span>2.1 入门培训任务</span>
+                <span>{item.courseName}</span>
              </span>
-              <span className='teacher-name'>张老师</span>
+              <span className='teacher-name'>{item.teacherName}</span>
              <span className='split'>|</span>
-              <span className='course-time'>2020-12-12 09:00~10:00</span>
+              <span className='course-time'>
-              <span className='del-btn'>删除记录</span>
+                {moment(item.startTime).format('YYYY-MM-DD HH:mm')}~{moment(item.endTime).format('HH:mm')}
+              </span>
+              <span
+                className='del-btn'
+                onClick={() => {
+                  deLExpiredCourse(item.courseId);
+                }}>
+                删除记录
+              </span>
            </div>
          </List.Item>
        )}

--- a/src/modules/task-center/train-task/components/RelatedCourseDrawer.jsx
+++ b/src/modules/task-center/train-task/components/RelatedCourseDrawer.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-08-01 17:28:30
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-11 11:27:09
+ * @LastEditTime: 2021-08-14 15:41:33
 * @Description: 新建培训任务-关联课程抽屉
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
@@ -10,14 +10,12 @@
 import React, { Component } from 'react';
 import _ from 'underscore';
 import { Radio, Tabs, Drawer, Input, message, Button, Tooltip } from 'antd';
 import { PageControl, XMTable } from '@/components';
 import college from '@/common/lottie/college';
 import CourseService from '@/domains/course-domain/CourseService';
 import User from '@/common/js/user';
 import Service from '@/common/js/service';
+import ENUM from '../../enum';
 import './RelatedCourseDrawer.less';
 const { Search } = Input;
@@ -97,7 +95,6 @@ class RelatedCourseDrawer extends Component {
  handleFetchLiveDataList = () => {
    const { liveQuery, liveSize } = this.state;
    const _data = [...this.props.data];
-    console.log('data=========>', _data);
    let currentLiveCourseListData = [];
    _data.map((item) => {
      item.contentList.map((childItem, childIndex) => {
@@ -286,7 +283,7 @@ class RelatedCourseDrawer extends Component {
        ),
        key: 'course',
        dataIndex: 'course',
-        width: '40%',
+        width: '30%',
        render: (val, record) => {
          if (type === 'live') {
            let hasCover = false;
@@ -303,14 +300,7 @@ class RelatedCourseDrawer extends Component {
                  <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} alt='' />
                </If>
-                <div>
+                <div className='course-name'>{record.courseName}</div>
-                  <div className='course-name'>{record.courseName}</div>
-                  {/* <span
-                  className='course-status'
-                  style={{ color: courseStateShow[record.courseState].color, border: `1px solid ${courseStateShow[record.courseState].color}` }}>
-                  {courseStateShow[record.courseState].title}
-                </span> */}
-                </div>
              </div>
            );
          } else {
@@ -332,10 +322,26 @@ class RelatedCourseDrawer extends Component {
      },
      type === 'live'
        ? {
+            title: '课程状态',
+            key: 'courseState',
+            dataIndex: 'courseState',
+            width: '25%',
+            render: (val, record) => {
+              return (
+                <div className='course-state'>
+                  <span className='status-point' style={{ backgroundColor: ENUM.trainStatus[val || 'UN_START'].color }}></span>
+                  <span>{ENUM.trainStatus[val || 'UN_START'].text}</span>
+                </div>
+              );
+            },
+          }
+        : {},
+      type === 'live'
+        ? {
            title: '上课时间',
            key: 'courseTime',
            dataIndex: 'courseTime',
-            width: '40%',
+            width: '25%',
            render: (val, record) => {
              return (
                <div>

--- a/src/modules/task-center/train-task/components/RelatedCourseDrawer.less
+++ b/src/modules/task-center/train-task/components/RelatedCourseDrawer.less
@@ -70,19 +70,19 @@
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
-      width: 180px;
+      width: 140px;
    }
-    .course-state {
+  }
-      * {
+  .course-state {
-        vertical-align: middle;
+    * {
-        display: inline-block;
+      vertical-align: middle;
-      }
+      display: inline-block;
-      .status-point {
+    }
-        width: 6px;
+    .status-point {
-        height: 6px;
+      width: 6px;
-        border-radius: 50%;
+      height: 6px;
-        margin-right: 4px;
+      border-radius: 50%;
-      }
+      margin-right: 4px;
    }
  }

--- a/src/modules/task-center/train-task/components/TrainContent.jsx
+++ b/src/modules/task-center/train-task/components/TrainContent.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-07-30 16:33:58
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-14 10:10:44
+ * @LastEditTime: 2021-08-14 15:21:50
 * @Description: 任务中心-培训任务-新建-培训内容
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
@@ -46,9 +46,6 @@ const courseStateShow = {
 const SortConvert = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
-// const id = window.getParameterByName('id');
-// const type = window.getParameterByName('type');
 class TrainContent extends Component {
  constructor(props) {
    super(props);

--- a/src/modules/task-center/train-task/components/TrainList.jsx
+++ b/src/modules/task-center/train-task/components/TrainList.jsx
@@ -2,12 +2,12 @@
 * @Author: yuananting
 * @Date: 2021-07-28 14:56:52
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-14 10:48:01
+ * @LastEditTime: 2021-08-14 17:35:59
 * @Description: 描述一下咯
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import React, { useState } from 'react';
-import { Route, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { Tooltip, Checkbox, Dropdown, Radio, Button, Space, Modal, message } from 'antd';
 import './TrainList.less';
 import { XMTable, PageControl } from '@/components';
@@ -30,23 +30,21 @@ function TrainList(props) {
  const [chooseAssignorModal, setChooseAssignorModal] = useState(null);
  // 发布或取消发布培训任务
-  function updateIssueStateTrain(taskId, issueState) {
+  function updateIssueStateTrain(taskId, state) {
    Modal.confirm({
      title: '提示',
      content:
-        issueState === 'YES'
+        state === 'YES' ? '发布后，被指派学员将任务列表中看到该任务，确定要发布？' : '取消发布后，任务对学员暂不可见，可能会影响正在学习学员，确定要取消？',
-          ? '发布后，被指派学员将任务列表中看到该任务，确定要发布？'
-          : '取消发布后，任务对学员暂不可见，可能会影响正在学习学员，确定要取消？',
      okText: '确定',
      cancelText: '取消',
      icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
      onOk: () => {
        TaskCenterService.updateIssueStateTraining({
          taskId,
-          issueState,
+          state,
        }).then((res) => {
-          message.success(issueState === 'YES' ? '发布成功' : '取消发布成功');
+          message.success(state === 'YES' ? '发布成功' : '取消发布成功');
-          Bus.trigger('getTrainingTaskPage');
+          Bus.trigger('getTrainingTaskPage', { issueState, myAssist });
          Bus.trigger('getStoreTaskNum');
        });
      },
@@ -66,7 +64,7 @@ function TrainList(props) {
          taskId,
        }).then((res) => {
          message.success('删除成功');
-          Bus.trigger('getTrainingTaskPage');
+          Bus.trigger('getTrainingTaskPage', { issueState, myAssist });
          Bus.trigger('getStoreTaskNum');
        });
      },
@@ -140,7 +138,7 @@ function TrainList(props) {
    }
    TaskCenterService.updateTrainingTaskAssign(params).then((res) => {
      message.success('指派成功');
-      Bus.trigger('getTrainingTaskPage');
+      Bus.trigger('getTrainingTaskPage', { issueState, myAssist });
      setChooseAssignorModal(null);
    });
  }
@@ -234,7 +232,7 @@ function TrainList(props) {
      },
      {
        title: '学习人数',
-        width: '10%',
+        width: '12%',
        key: 'cultureCustomerNum',
        dataIndex: 'cultureCustomerNum',
        sorter: true,
@@ -248,7 +246,13 @@ function TrainList(props) {
                  <div>已逾期：{record.overdueCustomerNum}人</div>
                </div>
              }>
-              <span style={{ color: '#2966FF' }}>{val}</span>
+              <span
+                style={{ color: '#2966FF', cursor: 'pointer' }}
+                onClick={() => {
+                  props.history.push(`${match.path}/data/${record.taskId}`);
+                }}>
+                {val}
+              </span>
            </Tooltip>
          );
        },
@@ -272,7 +276,7 @@ function TrainList(props) {
            </Tooltip>
          </span>
        ),
-        width: '10%',
+        width: '11.5%',
        key: 'finishPercent',
        dataIndex: 'finishPercent',
        sorter: true,
@@ -282,7 +286,7 @@ function TrainList(props) {
      },
      {
        title: '培训时间',
-        width: '12.5%',
+        width: '17%',
        key: 'trainTime',
        dataIndex: 'trainTime',
        render: (val, record) => {
@@ -291,7 +295,7 @@ function TrainList(props) {
          }
          return (
            <span>
-              {window.formatDate('YYYY-MM-DD H:i', record.startTime)}~{window.formatDate('YYYY-MM-DD H:i', record.endTime)}
+              {window.formatDate('YYYY-MM-DD H:i', record.startTime)} ~ {window.formatDate('YYYY-MM-DD H:i', record.endTime)}
            </span>
          );
        },
@@ -307,7 +311,7 @@ function TrainList(props) {
      },
      {
        title: '创建时间',
-        width: '12%',
+        width: '14%',
        key: 'created',
        dataIndex: 'created',
        sorter: true,
@@ -317,7 +321,7 @@ function TrainList(props) {
      },
      {
        title: '更新时间',
-        width: '12%',
+        width: '14%',
        key: 'updated',
        dataIndex: 'updated',
        sorter: true,
@@ -331,7 +335,7 @@ function TrainList(props) {
        key: 'operate',
        dataIndex: 'operate',
        fixed: 'right',
-        width: '16%',
+        width: '18%',
        render: (val, record) => {
          return (
            <div className='operate'>
@@ -429,7 +433,9 @@ function TrainList(props) {
    const _query = {
      ...query,
-      sortMap: {},
+      sortMap: {
+        UPDATED: 'SORT_DESC',
+      },
    };
    _query.sortMap[_columnKey] = _order;
    props.onChange(_query);
@@ -475,7 +481,7 @@ function TrainList(props) {
          onChange={handleChangeTable}
          bordered
          size='middle'
-          scroll={{ x: 1600 }}
+          scroll={{ x: 1400 }}
          className='train-list-table'
          renderEmpty={{
            description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>,

--- a/src/modules/task-center/train-task/components/TrainList.less
+++ b/src/modules/task-center/train-task/components/TrainList.less
@@ -23,6 +23,7 @@
    .train-task-name {
      display: flex;
      align-items: center;
+      cursor: pointer;
      .train-cover {
        width: 106px;
        height: 60px;
@@ -62,9 +63,12 @@
        margin: 0 8px;
        color: #bfbfbf;
      }
-      .more-text {
+      .more-operate {
-        color: #2966ff;
        cursor: pointer;
+        .more-text {
+          color: #2966ff;
+          cursor: pointer;
+        }
      }
    }