Skip to content

X
xiaomai-cloud-class-web
Commit 1070de6a by zhangleyuan
Options

style:修改计划页的样式

parent 7343b741
Showing with 153 additions and 34 deletions
src/modules/course-manage/modal/RelatedPlanModal.jsx
...@@ -118,7 +118,9 @@ class RelatedPlanModal extends React.Component { ...@@ -118,7 +118,9 @@ class RelatedPlanModal extends React.Component {
let item = {}; let item = {};
if(selectPlanList[key].taskBaseVOList){ if(selectPlanList[key].taskBaseVOList){
item.planId = selectPlanList[key].planId; item.planId = selectPlanList[key].planId;
item.taskId = selectPlanList[key].taskBaseVOList[0].taskId; if(selectPlanList[key].taskBaseVOList[0]){
item.taskId = selectPlanList[key].taskBaseVOList[0].taskId;
}
} }
_selectPlanList.push(item) _selectPlanList.push(item)
} }
......
src/modules/plan-manage/AddPlan.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-03-10 16:18:28 * @LastEditTime: 2021-03-10 16:51:57
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -222,7 +222,7 @@ function AddPlan() { ...@@ -222,7 +222,7 @@ function AddPlan() {
window.RCHistory.goBack(); window.RCHistory.goBack();
} }
} }
return ( return (
<div className="page add-plan-page"> <div className="page add-plan-page">
......
src/modules/plan-manage/components/UserLearningDataFilter.jsx
...@@ -190,8 +190,8 @@ function UserLearningDataFilter(props) { ...@@ -190,8 +190,8 @@ function UserLearningDataFilter(props) {
onChange={(value) => { handleChangeQuery('learnState', value) }} onChange={(value) => { handleChangeQuery('learnState', value) }}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
> >
<Option value="YES">开启</Option> <Option value="UNDER_WAY">进行中</Option>
<Option value="NO">关闭</Option> <Option value="FINISH">已完成</Option>
</Select> </Select>
</div> </div>
} }
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
...@@ -81,7 +81,7 @@ class SelectOperatorModal extends React.Component { ...@@ -81,7 +81,7 @@ class SelectOperatorModal extends React.Component {
}); });
const params ={ const params ={
...liveQuery, ...liveQuery,
liveSize, size:liveSize,
excludeCourseIdList:currentLiveCourseListData excludeCourseIdList:currentLiveCourseListData
} }
...@@ -113,7 +113,7 @@ class SelectOperatorModal extends React.Component { ...@@ -113,7 +113,7 @@ class SelectOperatorModal extends React.Component {
}); });
const params ={ const params ={
...videoQuery, ...videoQuery,
videoSize, size:videoSize,
excludeCourseIdList:currentVideoCourseListData excludeCourseIdList:currentVideoCourseListData
} }
CourseService.videoScheduleBasePage(params).then((res) => { CourseService.videoScheduleBasePage(params).then((res) => {
...@@ -161,7 +161,6 @@ class SelectOperatorModal extends React.Component { ...@@ -161,7 +161,6 @@ class SelectOperatorModal extends React.Component {
videoSize:size videoSize:size
},()=>{this.handleFetchLiveDataList()}) },()=>{this.handleFetchLiveDataList()})
} }
// 请求表头 // 请求表头
parseLiveColumns = () => { parseLiveColumns = () => {
const columns = [ const columns = [
...@@ -169,23 +168,26 @@ class SelectOperatorModal extends React.Component { ...@@ -169,23 +168,26 @@ class SelectOperatorModal extends React.Component {
title: <span><span>课程信息</span><Tooltip title="以下为该培训计划暂未关联的课程。 已关联的课程不支持重复选择，因此不显示。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>, title: <span><span>课程信息</span><Tooltip title="以下为该培训计划暂未关联的课程。 已关联的课程不支持重复选择，因此不显示。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
key: 'course', key: 'course',
dataIndex: 'course', dataIndex: 'course',
width:'45%',
render: (val, record) => { render: (val, record) => {
let hasCover = false; let hasCover = false;
return ( return (
<div className="record__item"> <div className="course-info">
{ {
record.courseMediaVOS.map((item,index)=>{ record.courseMediaVOS.map((item,index)=>{
if( item.contentType === "COVER"){ if( item.contentType === "COVER"){
hasCover = true; hasCover = true;
return <img className="course-cover" src={item.mediaUrl} style={{width:'100px',height:'50px'}}/> return <img className="course-cover" src={item.mediaUrl}/>
} }
}) })
} }
{ !hasCover && { !hasCover &&
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} style={{width:'100px',height:'50px'}} /> <img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
} }
<div className="course-name">{record.courseName}</div> <div>
<div><span className="course-status">{courseStateShow[record.courseState].title}</span></div> <div className="course-name">{record.courseName}</div>
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span>
</div>
</div> </div>
) )
} }
...@@ -194,9 +196,10 @@ class SelectOperatorModal extends React.Component { ...@@ -194,9 +196,10 @@ class SelectOperatorModal extends React.Component {
title: '上课时间', title: '上课时间',
key: 'courseTime', key: 'courseTime',
dataIndex: 'courseTime', dataIndex: 'courseTime',
width:'40%',
render: (val, record) => { render: (val, record) => {
return ( return (
<span>{formatDate('YYYY-MM-DD H:i', record.startTime)} ~ {formatDate('YYYY-MM-DD H:i', record.endTime)}</span> <span>{formatDate('YYYY-MM-DD H:i', record.startTime)}</span>
) )
} }
}, },
...@@ -204,6 +207,7 @@ class SelectOperatorModal extends React.Component { ...@@ -204,6 +207,7 @@ class SelectOperatorModal extends React.Component {
title: '店铺展示', title: '店铺展示',
key: 'shelfState', key: 'shelfState',
dataIndex: 'shelfState', dataIndex: 'shelfState',
width:'15%',
render: (val, record) => { render: (val, record) => {
return ( return (
<span> <span>
...@@ -228,12 +232,13 @@ class SelectOperatorModal extends React.Component { ...@@ -228,12 +232,13 @@ class SelectOperatorModal extends React.Component {
title: <span><span>课程信息</span><Tooltip title="以下为该培训计划暂未关联的课程。 已关联的课程不支持重复选择，因此不显示。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>, title: <span><span>课程信息</span><Tooltip title="以下为该培训计划暂未关联的课程。 已关联的课程不支持重复选择，因此不显示。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
key: 'course', key: 'course',
dataIndex: 'course', dataIndex: 'course',
width:'60%',
render: (val, record) => { render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record; const { coverUrl, scheduleVideoUrl } = record;
return ( return (
<div className="record__item"> <div className="course-info">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} style={{width:'100px',height:'50px'}}/> <img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`}/>
<div className="course-name">{record.courseName}</div> <div className="course-name">{record.courseName}</div>
</div> </div>
) )
...@@ -243,6 +248,7 @@ class SelectOperatorModal extends React.Component { ...@@ -243,6 +248,7 @@ class SelectOperatorModal extends React.Component {
title: '课程时长', title: '课程时长',
key: 'courseTime', key: 'courseTime',
dataIndex: 'courseTime', dataIndex: 'courseTime',
width:'20%',
render: (val, record) => { render: (val, record) => {
return ( return (
<span className="course-status">{dealTimeDuration(record.videoDuration)}</span> <span className="course-status">{dealTimeDuration(record.videoDuration)}</span>
...@@ -253,6 +259,7 @@ class SelectOperatorModal extends React.Component { ...@@ -253,6 +259,7 @@ class SelectOperatorModal extends React.Component {
title: '店铺展示', title: '店铺展示',
key: 'shelfState', key: 'shelfState',
dataIndex: 'shelfState', dataIndex: 'shelfState',
width:'20%',
render: (val, record) => { render: (val, record) => {
return ( return (
<span> <span>
...@@ -341,9 +348,9 @@ class SelectOperatorModal extends React.Component { ...@@ -341,9 +348,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' class="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-live-course?type=add">没有找到需要的直播课？<span>去创建</span></a> <a target='_blank' className="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-live-course?type=add">没有找到需要的直播课？<span>去创建</span></a>
: :
<a target='_blank' class="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-video-course?type=add">没有找到需要的视频课？<span>去创建</span></a> <a target='_blank' className="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-video-course?type=add">没有找到需要的视频课？<span>去创建</span></a>
, ,
<Button <Button
onClick={() => { onClick={() => {
...@@ -364,13 +371,17 @@ class SelectOperatorModal extends React.Component { ...@@ -364,13 +371,17 @@ class SelectOperatorModal extends React.Component {
<div className="search-container"> <div className="search-container">
<Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangVideoCourseName(e.target.value)}} onSearch={ () => { this.handleFetchVideoDataList()}}/> <Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangVideoCourseName(e.target.value)}} onSearch={ () => { this.handleFetchVideoDataList()}}/>
</div> </div>
<div> <div className="select-area">
<span> <div className="select-box">
<span className="iconfont">&#xe61d;</span> <div>
<span>已选择{selectVideo.length + selectLive.length}个</span> <span className="icon iconfont tip-icon">&#xe61d;</span>
<span onClick={this.clearSelectCourse}>清空</span> <span className="select-num">已选择{selectVideo.length + selectLive.length}个</span>
</span> </div>
<span>该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</span> <div>
<span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
</div>
</div>
<div className="related-box">该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</div>
</div> </div>
<div> <div>
<Table <Table
...@@ -378,6 +389,7 @@ class SelectOperatorModal extends React.Component { ...@@ -378,6 +389,7 @@ class SelectOperatorModal extends React.Component {
dataSource={videoDataSource} dataSource={videoDataSource}
columns={this.parseVideoColumns()} columns={this.parseVideoColumns()}
pagination={false} pagination={false}
bordered
rowSelection={{ rowSelection={{
type: 'checkbox', type: 'checkbox',
selectedRowKeys: _.pluck(selectVideo, 'id'), selectedRowKeys: _.pluck(selectVideo, 'id'),
...@@ -404,6 +416,7 @@ class SelectOperatorModal extends React.Component { ...@@ -404,6 +416,7 @@ class SelectOperatorModal extends React.Component {
<PageControl <PageControl
current={videoQuery.current - 1} current={videoQuery.current - 1}
pageSize={videoSize} pageSize={videoSize}
size="small"
total={videoTotalCount} total={videoTotalCount}
toPage={(page) => { toPage={(page) => {
const _query = {...videoQuery, current: page + 1}; const _query = {...videoQuery, current: page + 1};
...@@ -411,7 +424,7 @@ class SelectOperatorModal extends React.Component { ...@@ -411,7 +424,7 @@ class SelectOperatorModal extends React.Component {
videoQuery:_query videoQuery:_query
},()=>{ this.handleFetchVideoDataList()}) },()=>{ this.handleFetchVideoDataList()})
}} }}
onShowVideoSizeChange={this.onShowVideoSizeChange} onShowSizeChange={this.onShowVideoSizeChange}
/> />
</div> </div>
} }
...@@ -421,13 +434,18 @@ class SelectOperatorModal extends React.Component { ...@@ -421,13 +434,18 @@ class SelectOperatorModal extends React.Component {
<div className="search-container"> <div className="search-container">
<Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangLiveCourseName(e.target.value)}} onSearch={ () => { this.handleFetchLiveDataList()}} /> <Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangLiveCourseName(e.target.value)}} onSearch={ () => { this.handleFetchLiveDataList()}} />
</div> </div>
<div>
<span> <div className="select-area">
<span className="iconfont">&#xe61d;</span> <div className="select-box">
<span>已选择{selectVideo.length + selectLive.length}个</span> <div>
<span onClick={this.clearSelectCourse}>清空</span> <span className="icon iconfont tip-icon">&#xe61d;</span>
</span> <span className="select-num">已选择{selectVideo.length + selectLive.length}个</span>
<span>该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</span> </div>
<div>
<span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
</div>
</div>
<div className="related-box">该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</div>
</div> </div>
<div> <div>
<Table <Table
...@@ -435,6 +453,7 @@ class SelectOperatorModal extends React.Component { ...@@ -435,6 +453,7 @@ class SelectOperatorModal extends React.Component {
dataSource={liveDataSource} dataSource={liveDataSource}
columns={this.parseLiveColumns()} columns={this.parseLiveColumns()}
pagination={false} pagination={false}
bordered
rowSelection={{ rowSelection={{
type: 'checkbox', type: 'checkbox',
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'), selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
...@@ -461,6 +480,7 @@ class SelectOperatorModal extends React.Component { ...@@ -461,6 +480,7 @@ class SelectOperatorModal extends React.Component {
<PageControl <PageControl
current={liveQuery.current - 1} current={liveQuery.current - 1}
pageSize={liveSize} pageSize={liveSize}
size="small"
total={liveTotalCount} total={liveTotalCount}
toPage={(page) => { toPage={(page) => {
const _query = {...liveQuery, current: page + 1}; const _query = {...liveQuery, current: page + 1};
...@@ -468,7 +488,7 @@ class SelectOperatorModal extends React.Component { ...@@ -468,7 +488,7 @@ class SelectOperatorModal extends React.Component {
liveQuery:_query liveQuery:_query
},()=>{ this.handleFetchLiveDataList()}) },()=>{ this.handleFetchLiveDataList()})
}} }}
onShowLiveSizeChange={this.onShowLiveSizeChange} onShowSizeChange={this.onShowLiveSizeChange}
/> />
</div> </div>
} }
......
src/modules/plan-manage/modal/relatedCourseModal.less
.related-course-modal{ .related-course-modal{
.ant-tabs-top > .ant-tabs-nav::before{
border-bottom: 0px;
}
.ant-tabs-nav-list{
margin:0 auto;
}
.ant-tabs-nav .ant-tabs-tab{
padding:6px 12px !important;
margin:0;
border: 1px solid #E8E8E8;
font-size:14px !important;
color:#999;
&:nth-child(1){
border-radius: 4px 0px 0px 4px;
}
&:nth-child(2){
border-radius: 0px 4px 4px 0px;
}
}
.ant-tabs-nav .ant-tabs-tab-active{
border: 1px solid #FFB714;
color:#FFB714;
}
.ant-tabs-top .ant-tabs-ink-bar-animated:after{
height:0;
}
.link-create-course{ .link-create-course{
color:#666666; color:#666666;
font-size:14px; font-size:14px;
...@@ -12,4 +40,72 @@ ...@@ -12,4 +40,72 @@
.search-container{ .search-container{
margin-bottom:16px; margin-bottom:16px;
} }
.select-area{
margin-bottom:12px;
display:flex;
justify-content:space-between;
.select-box{
display:inline-box;
width: 186px;
background: #FFF4DD;
border-radius: 4px;
padding:6px 16px;
margin-right:8px;
display: flex;
justify-content: space-between;
.tip-icon{
color:#FF9D14;
font-size:14px;
margin-right:4px;
}
.select-num{
color:#666666;
font-size:14px;
}
.clear-btn{
text-align:right;
color:#5289FA;
font-size:14px;
}
}
.related-box{
padding:6px 16px;
background: #FFF4DD;
border-radius: 4px;
flex:1;
color:#666666;
font-size:14px;
}
}
.course-info{
display: flex;
align-items: center;
.course-cover{
width: 97px;
height: 55px;
display: inline-block;
border-radius:4px;
margin-right:8px;
}
.course-name{
font-size:14px;
color:#666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
width:238px;
}
.course-status {
font-size:12px;
line-height:18px;
display:inline-block;
border-radius:2px;
padding:0 8px;
margin-top:8px;
}
}
} }
\ No newline at end of file
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