feat:新建培训任务页面部分开发

52a7b420 · yuananting · 14cd1beb · 52a7b420 · 52a7b420 · 52a7b420
Commit 52a7b420 authored Jul 30, 2021 by yuananting
8 changed files
--- a/src/modules/task-center/train-task/AddTrainTask.jsx
+++ b/src/modules/task-center/train-task/AddTrainTask.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-07-29 13:57:03
 * @LastEditors: yuananting
- * @LastEditTime: 2021-07-30 10:07:51
+ * @LastEditTime: 2021-07-30 16:35:59
 * @Description: 任务中心-培训任务-新建页面
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
@@ -12,7 +12,7 @@ import { Button, Tabs, message, Modal } from 'antd';
 import ShowTips from '@/components/ShowTips';
 import Breadcrumbs from '@/components/Breadcrumbs';
 import BasicInfo from './components/BasicInfo';
-// import TrainingTask from './components/TrainingTask';
+import TrainContent from './components/TrainContent';
 // import ExpiredCourseList from './components/ExpiredCourseList';
 import PlanService from '@/domains/plan-domain/planService';
 import User from '@/common/js/user';
@@ -28,6 +28,7 @@ const DEFAULT_BASIC_INFO = {
  coverUrl: defaultCover,
  coverId: null,
  durationType: 'NEVER_EXPIRES',
+  learnType: 'FREEDOM',
  enableState: 'YES',
  selectOperatorList: [],
  instro: '',
@@ -92,7 +93,7 @@ function AddTrainTask() {
            <BasicInfo data={basicInfo} onChange={handleChangeBasicInfo} />
          </TabPane>
          <TabPane tab='2  培训内容' key='TRAIN_CONTENT'>
-            <div className='train-content__warp'>2</div>
+            <TrainContent />
          </TabPane>
        </Tabs>
      </div>

--- a/src/modules/task-center/train-task/TrainTaskPage.jsx
+++ b/src/modules/task-center/train-task/TrainTaskPage.jsx
@@ -2,13 +2,12 @@
 * @Author: yuananting
 * @Date: 2021-07-28 11:25:58
 * @LastEditors: yuananting
- * @LastEditTime: 2021-07-30 10:10:59
+ * @LastEditTime: 2021-07-30 11:58:13
 * @Description: 任务中心-培训任务
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import React, { useEffect, useState } from 'react';
 import TrainFilter from './components/TrainFilter';
-import TrainOpt from './components/TrainOpt';
 import TrainList from './components/TrainList';
 // import PlanList from './components/PlanList'
 import PlanService from '@/domains/plan-domain/planService';
@@ -16,8 +15,8 @@ import User from '@/common/js/user';
 function TrainTaskPage() {
  const [trainListData, setTrainListData] = useState([]); // 培训任务列表
  const [query, setQuery] = useState({
-    status: 'All',
+    issueState: 'ALL', // 发布状态
-    onlyHelp: false,
+    myAssist: false, // 是否协同
    current: 1,
    size: 10,
    storeUserId: User.getStoreUserId(),
@@ -49,7 +48,6 @@ function TrainTaskPage() {
      <div className='content-header'>培训任务</div>
      <div className='box'>
        <TrainFilter onChange={queryChange} />
-        <TrainOpt />
        <TrainList trainListData={trainListData} query={query} totalCount={totalCount} onChange={queryChange} />
      </div>
    </div>

--- a/src/modules/task-center/train-task/components/BasicInfo.jsx
+++ b/src/modules/task-center/train-task/components/BasicInfo.jsx
@@ -2,19 +2,19 @@
 * @Author: yuananting
 * @Date: 2021-07-29 14:32:24
 * @LastEditors: yuananting
- * @LastEditTime: 2021-07-29 16:54:42
+ * @LastEditTime: 2021-07-30 16:23:11
 * @Description: 任务中心-培训任务-新建-基本信息
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import React from 'react';
-import { Form, Button, Input, Space, DatePicker, Radio, Row, Col, message, Tooltip } from 'antd';
+import { Form, Button, Input, Space, DatePicker, Radio, Tag, Col, message, Tooltip } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { withRouter } from 'react-router-dom';
 // import SelectOperatorModal from '../modal/SelectOperatorModal';
 // import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import Upload from '@/core/upload';
-// import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
+import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
 // import ImgClipModal from '@/components/ImgClipModal';
 import moment from 'moment';
 import './BasicInfo.less';
@@ -30,8 +30,9 @@ function BasicInfo(props) {
    planName,
    coverUrl,
    durationType,
-    endTime,
+    learnType,
    instro,
+    endTime,
    enableState,
    operateType,
    selectOperatorList,
@@ -40,6 +41,169 @@ function BasicInfo(props) {
    percentCompletePicture,
  } = data;
  const isDefaultCover = true;
+  const helpStoreUsers = [
+    {
+      id: 1,
+      name: 'y阿萨德at',
+    },
+    {
+      id: 2,
+      name: 'ASFSDFAtgdf',
+    },
+    {
+      id: 3,
+      name: 'sfasfasdffff',
+    },
+    {
+      id: 4,
+      name: 'fsaf',
+    },
+    {
+      id: 5,
+      name: '示范法as',
+    },
+    {
+      id: 6,
+      name: '会尽快个何况',
+    },
+    {
+      id: 7,
+      name: '千多',
+    },
+    {
+      id: 8,
+      name: '我二合一',
+    },
+    {
+      id: 9,
+      name: '发顺丰',
+    },
+    {
+      id: 10,
+      name: '时高时低',
+    },
+    {
+      id: 11,
+      name: 'ASFSDFAtgdf',
+    },
+    {
+      id: 12,
+      name: '撒的A',
+    },
+    {
+      id: 13,
+      name: '山东高速广东省广东省怪怪的',
+    },
+    {
+      id: 14,
+      name: '而言二',
+    },
+    {
+      id: 15,
+      name: '而已',
+    },
+    {
+      id: 16,
+      name: '一条鱼',
+    },
+    {
+      id: 17,
+      name: '水电费干啥',
+    },
+    {
+      id: 18,
+      name: 'AddTrainTask',
+    },
+  ];
+  const assignList1 = [
+    {
+      id: 1,
+      name: 'yat',
+    },
+    {
+      id: 2,
+      name: '而已',
+    },
+    {
+      id: 3,
+      name: '一条鱼',
+    },
+  ];
+  const assignList2 = [
+    {
+      id: 1,
+      name: 'yat',
+    },
+    {
+      id: 2,
+      name: 'ya发发送到发送到发送到撒旦法撒旦法师t',
+    },
+    {
+      id: 3,
+      name: '1111111111111111111111111111111111111111111111111111111',
+    },
+    {
+      id: 4,
+      name: 'fsaf',
+    },
+    {
+      id: 5,
+      name: '示范法as',
+    },
+    {
+      id: 6,
+      name: '示范法as水电费',
+    },
+    {
+      id: 7,
+      name: '千多',
+    },
+    {
+      id: 8,
+      name: 'y阿萨at',
+    },
+    {
+      id: 9,
+      name: '发顺丰',
+    },
+    {
+      id: 10,
+      name: 'iuyti第三方感受到',
+    },
+    {
+      id: 11,
+      name: 'ASFSDFAtgdf',
+    },
+    {
+      id: 12,
+      name: '撒的A',
+    },
+    {
+      id: 13,
+      name: '耳热耳热让他一人',
+    },
+    {
+      id: 14,
+      name: '而言二',
+    },
+    {
+      id: 15,
+      name: '而已',
+    },
+    {
+      id: 16,
+      name: '一条鱼',
+    },
+    {
+      id: 17,
+      name: '水电费干啥',
+    },
+    {
+      id: 18,
+      name: 'AddTrainTask',
+    },
+  ];
  // 使用默认封面图
  function handleResetCoverUrl() {
@@ -55,13 +219,13 @@ function BasicInfo(props) {
  return (
    <div className='basic-info__form'>
-      <Form labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>
+      <Form>
-        <FormItem label='培训任务名称'>
+        <FormItem label='培训任务名称' required>
          <Input
            value={planName}
            placeholder='请输入培训任务名称（20字以内）'
            maxLength={20}
-            style={{ width: 240 }}
+            style={{ width: 300 }}
            // onChange={(e) => this.props.onChange('planName', e.target.value)}
          />
        </FormItem>
@@ -74,7 +238,7 @@ function BasicInfo(props) {
                    showSelectFileModal: true,
                  });
                }}>
-                上传图片
+                上传封面
              </Button>
              <span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={handleResetCoverUrl}>
                使用默认图
@@ -82,20 +246,21 @@ function BasicInfo(props) {
              <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
            </div>
            <div className='img-box'>
-              {isDefaultCover && <span className='tag'>默认图</span>}
+              {isDefaultCover && <span className='default-tag'>默认图</span>}
-              <img src={coverUrl} width='690' alt='' />
+              <img src={coverUrl} alt='' />
            </div>
          </div>
        </FormItem>
        <FormItem label='培训时间'>
          <div className='duration__wrap'>
            <Radio.Group value={durationType} onChange={(e) => props.onChange('durationType', e.target.value)}>
-              <Space direction='vertical'>
+              <Space direction='vertical' size={16}>
                <Radio value='NEVER_EXPIRES'>
                  永久有效<span className='tips'>设置为“永久有效”，发布后任务开始生效，取消发布后失效</span>
                </Radio>
                <Radio value='FIXED_DURATION'>
                  固定时间段
+                  {durationType === 'FIXED_DURATION' && (
                    <div className='picker-box'>
                      <RangePicker
                        style={{ width: 320 }}
@@ -105,7 +270,6 @@ function BasicInfo(props) {
                          近1个月: [moment().add(10, 'minute'), moment().add(1, 'month').endOf('day')],
                          近3个月: [moment().add(10, 'minute'), moment().add(3, 'month').endOf('day')],
                        }}
-                      disabled={durationType === 'NEVER_EXPIRES'}
                        // disabledDate={disabledDate}
                        // value={[examStartTime ? moment(Number(examStartTime)) : null, examEndTime ? moment(Number(examEndTime)) : null]}
                        // disabledTime={disabledRangeTime}
@@ -116,18 +280,20 @@ function BasicInfo(props) {
                        // }}
                      />
                    </div>
+                  )}
                </Radio>
              </Space>
            </Radio.Group>
          </div>
        </FormItem>
-        <FormItem label='学习模式'>
+        <FormItem label='学习模式' required extra={<div className='learning-model-tips'>提示：任务开始后学习模式将不允许更换</div>}>
          <div className='learning-model__wrap'>
-            <Radio.Group value={durationType} onChange={(e) => props.onChange('durationType', e.target.value)}>
+            <Radio.Group value={learnType} onChange={(e) => props.onChange('learnType', e.target.value)}>
-              <Radio value='FREE_LEARNING'>自由学习</Radio>
+              <Space direction='vertical' size={16}>
+                <Radio value='FREEDOM'>自由学习</Radio>
                <Radio value='BREAKTHROUGH_LEARNING'>
                  闯关学习
-                <Tooltip title='提示：任务开始后学习模式将不允许更换'>
+                  <Tooltip title='学员必须按顺序学习'>
                    <i
                      className='icon iconfont'
                      style={{
@@ -141,14 +307,59 @@ function BasicInfo(props) {
                    </i>
                  </Tooltip>
                </Radio>
+              </Space>
            </Radio.Group>
          </div>
        </FormItem>
-        <FormItem label='指派学员'>
+        <FormItem label='指派学员' required>
-          <Button>
+          <div className='item-btn'>添加指派对象</div>
-            <PlusOutlined />
+          {assignList1.length + assignList2.length > 0 && (
-            添加指派对象
+            <Space size={'12'} direction={'vertical'} className='item-obj'>
-          </Button>
+              {assignList1.length > 0 && (
+                <div className='obj-type-container'>
+                  <div className='type-title'>已选组织：</div>
+                  <div className='tag-box'>
+                    {_.map(assignList1, (item) => {
+                      return <Tag closable>{item.name}</Tag>;
+                    })}
+                  </div>
+                </div>
+              )}
+              {assignList2.length > 0 && (
+                <div className='obj-type-container'>
+                  <div className='type-title'>已选学员：</div>
+                  <div className='tag-box'>
+                    {_.map(assignList2, (item) => {
+                      return <Tag closable>{item.name}</Tag>;
+                    })}
+                  </div>
+                </div>
+              )}
+            </Space>
+          )}
+        </FormItem>
+        <FormItem label='协同人员'>
+          <div className='item-btn'>添加协同者</div>
+          {helpStoreUsers.length > 0 && (
+            <div className='item-obj'>
+              {_.map(helpStoreUsers, (item) => {
+                return <Tag closable>{item.name}</Tag>;
+              })}
+            </div>
+          )}
+        </FormItem>
+        <FormItem label='培训目的'>
+          <GraphicsEditor
+            maxLimit={1000}
+            id='intro'
+            isIntro={true}
+            detail={{
+              content: instro,
+            }}
+            onChange={(val) => {
+              // this.changeIntro(val);
+            }}
+          />
        </FormItem>
      </Form>
    </div>

--- a/src/modules/task-center/train-task/components/BasicInfo.less
+++ b/src/modules/task-center/train-task/components/BasicInfo.less
 .basic-info__form {
+  margin-bottom: 138px;
  .cover {
    display: flex;
    margin-top: 24px;
@@ -7,9 +8,9 @@
      .img-box {
        position: relative;
        margin-top: 8px;
-        width: 299px;
+        width: 300px;
-        height: 169px;
+        height: 170px;
-        .tag {
+        .default-tag {
          border-radius: 2px;
          background: #d6d6d6;
          font-size: 12px;
@@ -29,7 +30,7 @@
      }
      .opt-box {
        .default-btn {
-          margin-left: 14px;
+          margin-left: 12px;
          color: #2966ff;
          cursor: pointer;
          &.disabled {
@@ -45,4 +46,65 @@
      }
    }
  }
+  .duration {
+    &__wrap {
+      .tips {
+        color: #999999;
+        display: inline-block;
+        margin-left: 16px;
+      }
+      .picker-box {
+        display: inline-block;
+        margin-left: 16px;
+      }
+    }
+  }
+  .ant-form-item-extra {
+    .learning-model-tips {
+      margin-top: 8px;
+      color: #999999;
+      line-height: 20px;
+    }
+  }
+  .ant-form-item {
+    margin-bottom: 24px !important;
+    .ant-form-item-label > label {
+      width: 108px;
+      justify-content: flex-end;
+    }
+    &:not(:first-child) .ant-form-item-label > label {
+      height: 22px !important;
+    }
+    .ant-form-item-control-input {
+      min-height: 22px !important;
+    }
+    .ant-tag {
+      border: 1px solid #cccccc;
+      color: #666666;
+      margin-bottom: 12px;
+      font-size: 14px;
+    }
+  }
+  .item-btn {
+    color: #2966ff;
+  }
+  .item-obj {
+    width: 600px;
+    max-height: 90px;
+    overflow-y: scroll;
+    padding: 12px;
+    border-radius: 4px;
+    margin-top: 10px;
+    border: 1px solid #e8e8e8;
+    color: #666666;
+    .obj-type-container {
+      display: flex;
+      overflow-wrap: normal;
+      .type-title {
+        width: 70px;
+        flex-shrink: 0;
+      }
+    }
+  }
 }
--- a/src/modules/task-center/train-task/components/TrainContent.jsx
+++ b/src/modules/task-center/train-task/components/TrainContent.jsx
+/*
+ * @Author: yuananting
+ * @Date: 2021-07-30 16:33:58
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-07-30 16:58:03
+ * @Description: 任务中心-培训任务-新建-培训内容
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React from 'react';
+import { Form, Button, Input, Space, DatePicker, Radio, Tag, Col, message, Tooltip } from 'antd';
+import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
+function TrainContent(props) {
+  const SortableTaskContainer = sortableContainer((props) => <div {...props}></div>);
+  return (
+    <div className='train-content__warp'>
+      <SortableTaskContainer useDragHandle disableAutoscroll helperClass='row-dragging' onSortEnd={this.onTaskSortEnd} className='plan-task-sort-container'>
+        {dataSource.map((item, index) => (
+          <SortableTaskItem taskitem={this.renderTaskItem(item, index)} index={index} key={index}></SortableTaskItem>
+        ))}
+      </SortableTaskContainer>
+    </div>
+  );
+}
+export default TrainContent;
--- 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-07-29 13:52:35
+ * @LastEditTime: 2021-07-30 12:01:29
 * @Description: 描述一下咯
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import React, { useState, useEffect } from 'react';
-import { Tabs, Tooltip, Checkbox, Dropdown } from 'antd';
+import { Tabs, Tooltip, Checkbox, Dropdown, Radio, Button, Space } from 'antd';
 import './TrainList.less';
 import { XMTable, PageControl } from '@/components';
 import User from '@/common/js/user';
@@ -16,7 +16,7 @@ const { TabPane } = Tabs;
 function TrainList(props) {
  const {
-    query: { size, current },
+    query: { issueState, myAssist, current, size },
    totalCount,
  } = props;
@@ -218,15 +218,35 @@ function TrainList(props) {
    props.onChange(_query);
  }
+  function handleCreatePlan() {
+    window.RCHistory.push({
+      pathname: '/create-train-task?type=add',
+    });
+  }
  return (
    <div className='train-list-page'>
-      <div className='search-box'>
+      <div className='header-line'>
-        <Tabs onChange={(value) => handleChangeQuery('status', value)} type='card'>
+        {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
-          <TabPane tab={`全部 (${20})`} key='all' />
+          <Button type='primary' className='mr12' onClick={handleCreatePlan}>
-          <TabPane tab={`已发布 (${10})`} key='published' />
+            新建培训任务
-          <TabPane tab={`未发布 (${10})`} key='unpublished' />
+          </Button>
-        </Tabs>
+        )}
-        <Checkbox onChange={(e) => handleChangeQuery('onlyHelp', e.target.checked)}>只看我协同的 ({10})</Checkbox>
+        <Space size={16}>
+          <Radio.Group
+            size='middle'
+            value={issueState}
+            onChange={(e) => {
+              handleChangeQuery('issueState', e.target.value);
+            }}>
+            <Radio.Button value='ALL'>全部</Radio.Button>
+            <Radio.Button value='YES'>已发布</Radio.Button>
+            <Radio.Button value='NO'>未发布</Radio.Button>
+          </Radio.Group>
+          <Checkbox style={{ lineHeight: '32px' }} value={myAssist} onChange={(e) => handleChangeQuery('myAssist', e.target.checked)}>
+            只看我协同的 ({10})
+          </Checkbox>
+        </Space>
      </div>
      <div className='list-content'>
        <XMTable

--- a/src/modules/task-center/train-task/components/TrainList.less
+++ b/src/modules/task-center/train-task/components/TrainList.less
 .train-list-page {
  margin-top: 12px;
-  .search-box {
+  .header-line {
    display: flex;
-    line-height: 46px;
+    justify-content: space-between;
+    margin-bottom: 12px;
  }
  .ant-tabs-nav {
    margin: 0 !important;

--- a/src/modules/task-center/train-task/components/TrainOpt.jsx
+++ b/src/modules/task-center/train-task/components/TrainOpt.jsx
-/*
- * @Author: zhangleyuan
- * @Date: 2021-02-20 16:45:51
- * @LastEditors: yuananting
- * @LastEditTime: 2021-07-29 14:04:05
- * @Description: 描述一下
- * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
- */
-import React from 'react';
-import { Button } from 'antd';
-import { withRouter } from 'react-router-dom';
-import User from '@/common/js/user';
-// import './PlanOpt.less';
-function PlanOpt() {
-  function handleCreatePlan() {
-    window.RCHistory.push({
-      pathname: '/create-train-task?type=add',
-    });
-  }
-  return (
-    <div className='plan-opt-page'>
-      {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
-        <Button type='primary' className='mr12' onClick={handleCreatePlan}>
-          新建培训任务
-        </Button>
-      )}
-    </div>
-  );
-}
-export default withRouter(PlanOpt);