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
--- 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);