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