Skip to content

X
xiaomai-cloud-class-web
Commit 1f8e9e38 by zhangleyuan
Options

feat:处理创建培训计划的接口

parent da09f281
Showing with 172 additions and 70 deletions
src/data-source/course/request-api.ts
/*
* @Author: wufan
* @Date: 2020-12-12 11:57:10
* @LastEditors: wufan
* @LastEditTime: 2021-01-06 20:18:16
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-28 13:47:38
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -52,6 +52,11 @@ export function turnOnOrOffLiveCloudCourse(params: object) {
export function delLiveCloudCourse(params: object) {
return Service.Hades("public/courseCloud/delLiveCloudCourse", params);
}
//该接口主要用于培训计划关联直播课的接口（会筛选掉已关联的直播课）
export function getLiveCloudCourseBasePage(params: object) {
return Service.Hades("public/courseCloud/getLiveCloudCourseBasePage", params);
}
//视频课相关接口
export function changeVideoShelfState(params: object) {
return Service.Hades("public/hades/changeVideoShelfState", params);
......@@ -76,4 +81,7 @@ export function videoSchedulePage(params: object) {
}
export function videoWatchInfo(params: object) {
return Service.Hades("public/hades/videoWatchInfo", params);
}
export function videoScheduleBasePage(params: object) {
return Service.Hades("public/hades/videoScheduleBasePage", params);
}
\ No newline at end of file
src/data-source/plan/request-apis.ts
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-21 16:08:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-21 16:13:45
* @LastEditTime: 2021-02-28 17:51:46
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -10,4 +10,7 @@ import Service from "@/common/js/service";
export function getTrainingPlanPage(params: object) {
return Service.Hades("public/hades/getTrainingPlanPage", params);
}
\ No newline at end of file
}
export function createTrainingPlan(params: object) {
return Service.Hades("public/hades/createTrainingPlan", params);
}
src/domains/course-domain/CourseService.ts
/*
* @Author: wufan
* @Date: 2020-11-25 18:25:02
* @LastEditors: wufan
* @LastEditTime: 2021-01-06 20:17:40
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-28 15:15:37
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import {
fetchLecturerData, fetchUserData, exportStudentCourseData, exportPlayBackCourseData, fetchPlaybackList, createLiveCloudCourse, getLiveCloudCoursePage,
getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule, editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode
getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule,
editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode,getLiveCloudCourseBasePage,videoScheduleBasePage
} from '@/data-source/course/request-api';
export default class courseService {
......@@ -84,4 +85,10 @@ export default class courseService {
static videoWatchInfo(params: any) {
return videoWatchInfo(params);
}
static getLiveCloudCourseBasePage(params: any){
return getLiveCloudCourseBasePage(params);
}
static videoScheduleBasePage(params: any){
return videoScheduleBasePage(params);
}
}
\ No newline at end of file
src/domains/plan-domain/planService.ts
......@@ -2,14 +2,17 @@
* @Author: zhangleyuan
* @Date: 2021-02-21 16:15:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-21 16:20:15
* @LastEditTime: 2021-02-28 17:52:28
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import {getTrainingPlanPage} from '@/data-source/plan/request-apis';
import {getTrainingPlanPage,createTrainingPlan} from '@/data-source/plan/request-apis';
export default class PlanService {
// 获取员工列表
static getTrainingPlanPage(params: any) {
return getTrainingPlanPage(params);
}
static createTrainingPlan(params: any) {
return createTrainingPlan(params);
}
}
\ No newline at end of file
src/modules/plan-manage/AddPlan.jsx
......@@ -2,17 +2,19 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-25 17:49:09
* @LastEditTime: 2021-02-28 19:05:50
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from "react";
import { Button, message, Modal } from 'antd';
import { Button, 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 PlanService from '@/domains/plan-domain/planService'
import User from '@/common/js/user';
import _ from "underscore";
import './AddPlan.less'
const DEFAULT_BASIC_DATA = {
planName:"",
......@@ -24,19 +26,48 @@ const DEFAULT_BASIC_DATA = {
percentCompleteVideo:80
}
function AddPlan() {
const [basicData,setBasicData] = useState(DEFAULT_BASIC_DATA);
const [basicData,setBasicData] = useState(DEFAULT_BASIC_DATA);
const [taskList,setTaskList] = useState([]);
function handleChangeBasicInfo(field, value){
console.log('field',value);
setBasicData( {
...basicData,
[field]: value,
})
}
function handleChangeTaskInfo(value){
setTaskList(value)
}
function submitInfo(){
const {planName,enableState,selectOperatorList,instro,operateType,percentCompleteLive,percentCompleteVideo} = basicData;
if(!planName){
message.warning('请输入的培训计划名称');
return;
}
if(taskList.length === 0){
message.warning('请输入培训计划内容');
return;
}
)
}
const params = {
createId:User.getStoreUserId(),
enableState,
operateIds:_.pluck(selectOperatorList,'id'),
operateType,
percentCompleteLive,
percentCompleteVideo,
planName,
scheduleMediaRequests:[],
storeId:User.getStoreId(),
trainingTaskList:taskList
}
PlanService.createTrainingPlan(params).then((res) => {
});
}
return (
<div className="page add-plan-page">
<Breadcrumbs
......@@ -56,13 +87,13 @@ function AddPlan() {
</div>
<div className="basic-info__wrap">
<div className="title">培训任务</div>
<TrainingTask/>
<TrainingTask onChange={handleChangeTaskInfo}/>
</div>
</div>
</div>
<div className="footer">
<Button>取消</Button>
<Button type="primary">保存</Button>
<Button type="primary" onClick={submitInfo}>保存</Button>
</div>
</div>
)
......
src/modules/plan-manage/PlanPage.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-21 17:26:00
* @LastEditTime: 2021-02-28 19:37:07
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -13,27 +13,27 @@ import PlanList from './components/PlanList';
import PlanService from "@/domains/plan-domain/planService";
function PlanPage() {
const [planListData, setPlanListData] = useState([
{
name:'计划名称'
},
{
name:'计划名称'
}
]);
const [planListData, setPlanListData] = useState([]);
const [query,setQuery] = useState({
current:1,
size:10
size:10,
});
const [totalCount,setTotalCount] = useState(0)
function handleFetchPlanList(_query){
useEffect(() => {
handleFetchPlanList();
}, [query]);
const [totalCount,setTotalCount] = useState(0);
function queryChange(){
const params = {
...query,
..._query,
};
setQuery(params);
console.log(params);
}
function handleFetchPlanList(_query){
const params = {
...query,
..._query,
};
//动态获取计划列表
PlanService.getTrainingPlanPage(params).then((res) => {
const { result: { records = [], total } } = res;
......@@ -51,7 +51,7 @@ function PlanPage() {
planListData={planListData}
query={query}
totalCount={totalCount}
onChange={handleFetchPlanList}
onChange={queryChange}
/>
</div>
</div>
......
src/modules/plan-manage/components/PlanList.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-21 15:46:25
* @LastEditTime: 2021-02-28 19:39:39
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -26,20 +26,20 @@ function PlanList(props) {
render: (val, record) => {
return (
<div className="plan__name">
培训计划名称培训计划名称
{val}
</div>
)
}
},
{
title: '课程总数量',
key: 'courseNumber',
dataIndex: 'courseNumber',
key: 'courseNum',
dataIndex: 'courseNum',
width: '10%',
render: (val, record) => {
return (
<div className="course-number">
20
{val}
</div>
)
}
......
src/modules/plan-manage/components/PlanOpt.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-22 13:49:41
* @LastEditTime: 2021-02-28 15:41:33
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -12,11 +12,17 @@ import { withRouter } from 'react-router-dom';
import './PlanOpt.less';
function PlanOpt() {
function handleCreatePlan(){
window.RCHistory.push({
pathname: '/create-plan?type=add',
})
}
return (
<div className="plan-opt">
<Button
type="primary"
className="mr12"
onClick={handleCreatePlan}
>新建培训计划</Button>
</div>
);
......
src/modules/plan-manage/components/TrainingTask.jsx
......@@ -2,15 +2,16 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-25 13:42:07
* @LastEditTime: 2021-02-28 17:49:30
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Table ,Button,Input,Form} from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import { sortableContainer, sortableElement, sortableHandle} from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';
import arrayMove from 'array-move';
import RelatedCourseModal from '../modal/relatedCourseModal'
import { withRouter } from 'react-router-dom';
import './TrainingTask.less';
......@@ -90,6 +91,8 @@ class TrainingTask extends React.Component {
super(props);
this.state = {
dataSource: data,
selectedTaskIndex:0,
relatedCourseModalVisible:false
};
}
parseTaskColumns = ()=>{
......@@ -152,21 +155,22 @@ class TrainingTask extends React.Component {
render: (val, record) => {
return (
<div>
{record.type==='text'?
<span>{val}</span>
:
<Form>
<Form.Item
validateTrigger={['onChange', 'onBlur']}
name={['courseName']}
rules={[
{
required: true,
message: "请输入课程名称",
},
]}>
<Input defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入任务名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item>
</Form>}
{record.type==='input'?
<Form>
<Form.Item
validateTrigger={['onChange', 'onBlur']}
name={['courseName']}
rules={[
{
required: true,
message: "请输入课程名称",
},
]}>
<Input defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入任务名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item>
</Form>
:
<span>{record.courseName}</span>
}
</div>
)
}
......@@ -239,13 +243,14 @@ class TrainingTask extends React.Component {
const { value } = e.target;
const { dataSource } = this.state;
record.taskName = value;
this.props.onChange(dataSource);
}
handleTaskNameBlur = (e,record)=>{
const { value } = e.target;
const {dataSource}= this.state;
if(value){
record.type="text";
this.setState(dataSource);
this.setState({dataSource});
}
}
......@@ -253,6 +258,7 @@ class TrainingTask extends React.Component {
const { value } = e.target;
const { dataSource } = this.state;
record.courseName = value;
this.props.onChange(this.state.dataSource);
}
handleCourseNameBlur = (e,record)=>{
......@@ -260,14 +266,14 @@ class TrainingTask extends React.Component {
const {dataSource}= this.state;
if(value){
record.type="text";
this.setState(dataSource);
this.setState({dataSource});
}
}
handleDeleteTask = (index)=>{
const {dataSource}= this.state;
const newData=[...dataSource];
newData.splice(index,1);
this.setState({dataSource:newData});
this.setState({dataSource:newData},()=>{this.props.onChange(this.state.dataSource);});
}
handleDeleteCourse = (parentIndex,index)=>{
const {dataSource}= this.state;
......@@ -275,11 +281,37 @@ class TrainingTask extends React.Component {
const selectData = [...newData[parentIndex].courserList]
selectData.splice(index,1)
newData[parentIndex].courserList= selectData;
this.setState({dataSource:newData});
this.setState({dataSource:newData},()=>{this.props.onChange(this.state.dataSource);});
}
showRelatedCourseModal = (index)=>{
this.setState({
selectedTaskIndex:index,
relatedCourseModalVisible:true
})
}
closeRelatedCourseModal = (index)=>{
this.setState({
relatedCourseModalVisible:false
})
}
confirmSelectCourse = (selectList) =>{
const {dataSource,selectedTaskIndex}= this.state;
const newData=[...dataSource];
const selectData = [...newData[selectedTaskIndex].courserList]
const _selectData =[...selectData,...selectList];
newData[selectedTaskIndex].courserList= _selectData;
this.setState({
relatedCourseModalVisible:false,
dataSource:newData
},()=>{
this.props.onChange(dataSource);
})
}
render() {
const { dataSource } = this.state;
const { dataSource,selectedTaskIndex,relatedCourseModalVisible} = this.state;
return (
<div className="training-task">
<Table
......@@ -302,10 +334,10 @@ class TrainingTask extends React.Component {
// },
// }}
/>
<div><Button><span>+</span><span>关联课程</span></Button></div>
<div><Button onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></Button></div>
</div>
}else{
return <div><Button><span>+</span><span>关联课程</span></Button></div>;
return <div><Button onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></Button></div>;
}
}}
// components={{
......@@ -316,8 +348,18 @@ class TrainingTask extends React.Component {
// }}
/>
<div><Button onClick={()=>this.addTask()}><span>+</span><span>添加任务</span></Button></div>
{ relatedCourseModalVisible &&
<RelatedCourseModal
selectedTaskIndex={selectedTaskIndex}
data={dataSource}
visible={relatedCourseModalVisible}
onClose={this.closeRelatedCourseModal}
onSelect={this.confirmSelectCourse}
/>
}
</div>
);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment