Skip to content

X
xiaomai-cloud-class-web
Commit 00153e8b by zhangleyuan
Options

feat:处理课程列表培训任务的显示

parent ada678af
Showing with 128 additions and 93 deletions
src/modules/course-manage/components/LiveCourseList.jsx
...@@ -293,9 +293,12 @@ class LiveCourseList extends React.Component { ...@@ -293,9 +293,12 @@ class LiveCourseList extends React.Component {
return ( return (
<div className="related-task"> <div className="related-task">
{ record.relatedPlanList ? { record.relatedPlanList ?
record.relatedPlanList.map((item,index)=>{ <Tooltip title={this.handlePlanName(record.relatedPlanList)} >
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span> { record.relatedPlanList.map((item,index)=>{
}) return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
})
}
</Tooltip>
: :
<span></span> <span></span>
} }
...@@ -510,9 +513,12 @@ class LiveCourseList extends React.Component { ...@@ -510,9 +513,12 @@ class LiveCourseList extends React.Component {
return ( return (
<div className="related-task"> <div className="related-task">
{ record.relatedPlanList ? { record.relatedPlanList ?
record.relatedPlanList.map((item,index)=>{ <Tooltip title={this.handlePlanName(record.relatedPlanList)} >
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span> { record.relatedPlanList.map((item,index)=>{
}) return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
})
}
</Tooltip>
: :
<span></span> <span></span>
} }
...@@ -535,6 +541,19 @@ class LiveCourseList extends React.Component { ...@@ -535,6 +541,19 @@ class LiveCourseList extends React.Component {
}) })
return adminStr return adminStr
} }
handlePlanName = (planArray)=>{
let planStr = "";
planArray.map((item,index)=>{
if(index < planArray.length-1){
planStr = planStr + item.planName + '、';
}else{
planStr = planStr + item.planName
}
})
return planStr
}
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
return ( return (
<div className="live-course-more-menu"> <div className="live-course-more-menu">
......
src/modules/course-manage/modal/RelatedPlanModal.jsx
...@@ -220,13 +220,6 @@ class RelatedPlanModal extends React.Component { ...@@ -220,13 +220,6 @@ class RelatedPlanModal extends React.Component {
this.selectPlanList(record,selected,_record.planId); this.selectPlanList(record,selected,_record.planId);
}, },
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
// let _list = [];
// if (selected) {
// _list = _.uniq(selectVideo.concat(changeRows), false, (item) => item.id);
// } else {
// _list = _.reject(selectVideo, (item) => _.find(changeRows, (data) => data.id === item.id));
// }
// this.setState({selectVideo:_list});
}, },
}} }}
/> />
...@@ -241,6 +234,7 @@ class RelatedPlanModal extends React.Component { ...@@ -241,6 +234,7 @@ class RelatedPlanModal extends React.Component {
current={query.current - 1} current={query.current - 1}
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
size="small"
toPage={(page) => { toPage={(page) => {
const _query = {...query, current: page + 1}; const _query = {...query, current: page + 1};
this.setState({ this.setState({
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-11 17:16:20 * @LastEditTime: 2021-03-15 17:05:01
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -175,14 +175,17 @@ class VideoCourseList extends React.Component { ...@@ -175,14 +175,17 @@ class VideoCourseList extends React.Component {
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="related-task"> <div className="related-task">
{ record.relatedPlanList ? { record.relatedPlanList ?
record.relatedPlanList.map((item,index)=>{ <Tooltip title={this.handlePlanName(record.relatedPlanList)} >
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span> { record.relatedPlanList.map((item,index)=>{
}) return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
: })
<span></span> }
} </Tooltip>
</div> :
<span></span>
}
</div>
) )
} }
}, },
...@@ -217,7 +220,7 @@ class VideoCourseList extends React.Component { ...@@ -217,7 +220,7 @@ class VideoCourseList extends React.Component {
]; ];
return columns; return columns;
} }
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
return ( return (
<div className="live-course-more-menu"> <div className="live-course-more-menu">
...@@ -240,7 +243,19 @@ class VideoCourseList extends React.Component { ...@@ -240,7 +243,19 @@ class VideoCourseList extends React.Component {
</div> </div>
) )
} }
//改变上架状态
handlePlanName = (planArray)=>{
let planStr = "";
planArray.map((item,index)=>{
if(index < planArray.length-1){
planStr = planStr + item.planName + '、';
}else{
planStr = planStr + item.planName
}
})
return planStr
}
//改变上架状态
changeShelfState = (item) =>{ changeShelfState = (item) =>{
let _shelfState = item.shelfState let _shelfState = item.shelfState
if(_shelfState==='NO'){ if(_shelfState==='NO'){
......
src/modules/plan-manage/LearningData.less
.plan-learn-data-list{ .plan-learn-data-list{
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { .ant-tabs-tab.ant-tabs-tab-active{
font-weight:normal; font-weight:normal;
} }
.plan-info{ .plan-info{
......
src/modules/plan-manage/components/BasicInfo.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-03-15 14:47:39 * @LastEditTime: 2021-03-15 17:01:47
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -219,7 +219,7 @@ class BasicInfo extends React.Component{ ...@@ -219,7 +219,7 @@ class BasicInfo extends React.Component{
<span className="label"><span className="require">*</span>培训计划名称：</span> <span className="label"><span className="require">*</span>培训计划名称：</span>
<Input <Input
value={planName} value={planName}
placeholder="请输入培训计划名称,最多20字" placeholder="请输入培训计划名称(20字以内)"
maxLength={20} maxLength={20}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e)=>this.props.onChange('planName', e.target.value)} onChange={(e)=>this.props.onChange('planName', e.target.value)}
...@@ -253,7 +253,7 @@ class BasicInfo extends React.Component{ ...@@ -253,7 +253,7 @@ class BasicInfo extends React.Component{
<TextArea <TextArea
placeholder="请输入培训计划简介" placeholder="请输入培训计划简介"
maxLength={200} maxLength={200}
style={{ width: '552px',height:'90px'}} style={{ width: '552px',height:'110px'}}
className="instro-textarea" className="instro-textarea"
value={instro} value={instro}
onChange={(e)=>this.props.onChange('instro', e.target.value)} onChange={(e)=>this.props.onChange('instro', e.target.value)}
......
src/modules/plan-manage/components/BasicInfo.less
...@@ -80,6 +80,9 @@ ...@@ -80,6 +80,9 @@
.view-range{ .view-range{
display:flex; display:flex;
margin-top:16px; margin-top:16px;
.label{
margin-top:2px;
}
.instro-text{ .instro-text{
color:#999; color:#999;
margin-left:12px; margin-left:12px;
......
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-03-13 18:00:15 * @LastEditTime: 2021-03-15 16:19:53
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -85,7 +85,7 @@ function PlanList(props) { ...@@ -85,7 +85,7 @@ function PlanList(props) {
}, },
{ {
title: '更新时间', title: '更新时间',
width: "12.5%", width: "10%",
key: 'updated', key: 'updated',
dataIndex: 'updated', dataIndex: 'updated',
sorter: true, sorter: true,
...@@ -95,7 +95,7 @@ function PlanList(props) { ...@@ -95,7 +95,7 @@ function PlanList(props) {
}, },
{ {
title: '参培人数', title: '参培人数',
width: "10%", width:76,
key: 'cultureCustomerNum', key: 'cultureCustomerNum',
dataIndex: 'cultureCustomerNum', dataIndex: 'cultureCustomerNum',
sorter: true, sorter: true,
...@@ -227,49 +227,6 @@ function PlanList(props) { ...@@ -227,49 +227,6 @@ function PlanList(props) {
props.onChange(); props.onChange();
} }
}) })
// let _enableState = record.enableState
// if(_enableState==='NO'){
// // _enableState = "YES";
// const params={
// "planId": record.planId,
// "enableState":"YES"
// }
// PlanService.updateStateTrainingPlan(params).then((res)=>{
// if(res.success){
// // if(_enableState === "YES"){
// record.enableState = "YES";
// message.success("已启用此计划");
// // }
// }
// })
// }else{
// // _enableState = "NO";
// // item.enableState = "YES";
// return confirm({
// title: "确定要禁用培训计划吗？",
// content: "禁用后，培训计划不再支持新用户加入，已参与培训的用户可继续培训",
// icon: (
// <span className="icon iconfont default-confirm-icon">&#xe839; </span>
// ),
// okText: "确定",
// okType: "danger",
// cancelText: "取消",
// onOk: () => {
// const params={
// "planId": record.planId,
// "enableState":"NO"
// }
// PlanService.updateStateTrainingPlan(params).then((res)=>{
// if(res.success){
// // if(_enableState === "NO"){
// record.enableState = "NO";
// message.success("已禁用此计划");
// // }
// }
// })
// },
// });
// }
} }
function toEditPlanPage(item){ function toEditPlanPage(item){
...@@ -336,6 +293,7 @@ function PlanList(props) { ...@@ -336,6 +293,7 @@ function PlanList(props) {
bordered bordered
size="middle" size="middle"
scroll={{ x: 1400}} scroll={{ x: 1400}}
className="plan-list-table"
/> />
<div className="box-footer"> <div className="box-footer">
<PageControl <PageControl
......
src/modules/plan-manage/components/PlanList.less
.plan-list{ .plan-list{
margin-top:12px; margin-top:12px;
.plan-list-table{
tbody {
tr{
&:nth-child(even){
background: transparent !important;
td{
background:#FFF !important;
}
}
&:nth-child(odd){
background: #FAFAFA !important;
td{
background: #FAFAFA !important;
}
}
&:hover{
td{
background:#F3f6fa !important;
}
}
}
}
}
.plan-name{ .plan-name{
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
...@@ -26,6 +49,10 @@ ...@@ -26,6 +49,10 @@
} }
} }
} }
.join-number{
text-align:right;
margin-right:12px;
}
.more-operate{ .more-operate{
line-height:20px; line-height:20px;
} }
......
src/modules/plan-manage/components/TrainingTask.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-03-12 16:49:01 * @LastEditTime: 2021-03-15 16:14:50
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -41,6 +41,7 @@ const courseStateShow = { ...@@ -41,6 +41,7 @@ const courseStateShow = {
title: "未成功开课", title: "未成功开课",
}, },
}; };
const DragHandle = sortableHandle(() => ( const DragHandle = sortableHandle(() => (
<span className="operate__item" > <span className="operate__item" >
<span className="icon iconfont">&#xe7cd;</span> <span className="icon iconfont">&#xe7cd;</span>
...@@ -351,7 +352,7 @@ class TrainingTask extends React.Component { ...@@ -351,7 +352,7 @@ class TrainingTask extends React.Component {
} }
</div> </div>
<div className="operate"> <div className="course-operate">
<DragHandle /> <DragHandle />
{/* <span className="operate__item"> {/* <span className="operate__item">
<span className="icon iconfont">&#xe6f5;</span> <span className="icon iconfont">&#xe6f5;</span>
......
src/modules/plan-manage/components/TrainingTask.less
...@@ -55,22 +55,29 @@ ...@@ -55,22 +55,29 @@
} }
} }
} }
} .operate{
.operate{ display: none;
.operate__item{ .operate__item{
cursor:pointer; cursor:pointer;
margin-left:16px; margin-left:16px;
color:#666666; color:#666666;
font-size:14px;
.icon{
font-size:14px; font-size:14px;
color:#999; .icon{
font-size:14px;
color:#999;
}
.text{
margin-left:8px;
}
} }
.text{ }
margin-left:8px; &:hover{
.operate{
display:block;
} }
} }
} }
.course-box{ .course-box{
.add-course-con{ .add-course-con{
padding:16px 51px; padding:16px 51px;
...@@ -88,7 +95,13 @@ ...@@ -88,7 +95,13 @@
padding:16px 16px 16px 51px; padding:16px 16px 16px 51px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.operate{ &:hover{
.course-operate{
display:block;
}
}
.course-operate{
display: none;
.operate__item{ .operate__item{
cursor:pointer; cursor:pointer;
margin-left:16px; margin-left:16px;
...@@ -103,6 +116,7 @@ ...@@ -103,6 +116,7 @@
} }
} }
} }
.course-info{ .course-info{
.ant-form{ .ant-form{
display:inline-block; display:inline-block;
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
...@@ -160,7 +160,7 @@ class UserLearnDetailModal extends React.Component { ...@@ -160,7 +160,7 @@ class UserLearnDetailModal extends React.Component {
<div className="course-info"> <div className="course-info">
<div className="course-type">{CourseType[record.courseType].text}</div> <div className="course-type">{CourseType[record.courseType].text}</div>
<div className="name-and-state"> <div className="name-and-state">
<span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span> <span className="course-name">{parentIndex + 1}.{index + 1} {record.courseName}</span>
{ record.courseType==="LIVE" && { record.courseType==="LIVE" &&
<span className="course-state">{courseStateShow[record.courseState].title}</span> <span className="course-state">{courseStateShow[record.courseState].title}</span>
} }
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
...@@ -352,9 +352,9 @@ class SelectOperatorModal extends React.Component { ...@@ -352,9 +352,9 @@ class SelectOperatorModal extends React.Component {
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
footer={[ footer={[
activeKey ==='live'? activeKey ==='live'?
<a target='_blank' className="link-create-course" href={window.location.origin + window.location.pathname + '#/create-live-course?type=add'}>没有找到需要的直播课？<span>去创建</span></a> <a target='_blank' className="link-create-course" href={window.location.origin + window.location.pathname + '#/create-live-course?type=add'} onClick={this.props.onClose}>没有找到需要的直播课？<span>去创建</span></a>
: :
<a target='_blank' className="link-create-course" href={window.location.origin + window.location.pathname + '#/create-video-course?type=add'}>没有找到需要的视频课？<span>去创建</span></a> <a target='_blank' className="link-create-course" href={window.location.origin + window.location.pathname + '#/create-video-course?type=add'} onClick={this.props.onClose}>没有找到需要的视频课？<span>去创建</span></a>
, ,
<Button <Button
onClick={() => { onClick={() => {
......
src/modules/plan-manage/modal/relatedCourseModal.less
...@@ -5,6 +5,9 @@ ...@@ -5,6 +5,9 @@
.ant-tabs-nav-list{ .ant-tabs-nav-list{
margin:0 auto; margin:0 auto;
} }
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
font-weight:normal;
}
.ant-tabs-nav .ant-tabs-tab{ .ant-tabs-nav .ant-tabs-tab{
padding:6px 12px !important; padding:6px 12px !important;
margin:0; margin:0;
...@@ -19,9 +22,10 @@ ...@@ -19,9 +22,10 @@
border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px;
} }
} }
.ant-tabs-nav .ant-tabs-tab-active{ .ant-tabs-nav .ant-tabs-tab-active{
border: 1px solid #FFB714; border: 1px solid #FFB714;
color:#FFB714; color:#FFB714;
} }
.ant-tabs-top .ant-tabs-ink-bar-animated:after{ .ant-tabs-top .ant-tabs-ink-bar-animated:after{
......
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