Skip to content

X
xiaomai-cloud-class-web
Commit b11a9005 by chenshu
Options

feat:初始化

parent 173422ca
Showing with 86 additions and 133 deletions
src/modules/course-manage/offline-course/components/OfflineCourseFilter.jsx
...@@ -116,15 +116,10 @@ class OfflineCourseFilter extends React.Component { ...@@ -116,15 +116,10 @@ class OfflineCourseFilter extends React.Component {
const { const {
query: { query: {
courseName, courseName,
operator, courseState,
beginTime, shelfState,
endTime,
operatorId,
shelfState
}, },
expandFilter, expandFilter,
teacherList,
teacherQuery
} = this.state; } = this.state;
return ( return (
...@@ -142,62 +137,22 @@ class OfflineCourseFilter extends React.Component { ...@@ -142,62 +137,22 @@ class OfflineCourseFilter extends React.Component {
enterButton={<span className="icon iconfont">&#xe832;</span>} enterButton={<span className="icon iconfont">&#xe832;</span>}
/> />
</div> </div>
<div className="search-condition__item"> <div className="search-condition__item">
<span>创建人：</span> <span className="select-status">课程状态：</span>
<Select <Select
placeholder="请选择创建人" style={{ width: "calc(100% - 70px)" }}
style={{width:"calc(100% - 70px)"}} placeholder="请选择"
showSearch allowClear={true}
allowClear value={courseState}
filterOption={(input, option) => option} onChange={(value) => { this.handleChangeQuery('courseState', value) }}
onPopupScroll={this.handleScrollTeacherList}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
value={operatorId}
onChange={(value) => {
this.handleChangeQuery('operatorId', value)
}}
onSearch={(value) => {
teacherQuery.nickName = value
this.setState({
teacherQuery
}, () => {
this.getTeacherList()
})
}}
onClear ={(value)=>{
this.setState({
teacherQuery:{
size: 10,
current: 1,
nickName:null
}
}, () => {
this.getTeacherList()
})
}
}
> >
{_.map(teacherList, (item, index) => { <Option value="UN_START">未开始</Option>
return ( <Option value="STARTING">进行中</Option>
<Select.Option value={item.id} key={item.id}>{item.nickName}</Select.Option> <Option value="FINISH">已结束</Option>
); <Option value="EXPIRED">已取消</Option>
})}
</Select> </Select>
</div> </div>
<div className="search-condition__item">
<span className="search-date">创建日期：</span>
<RangePicker
id="course_date_picker"
allowClear={false}
value={ beginTime ? [moment(beginTime), moment(endTime)] : null }
format={"YYYY-MM-DD"}
onChange={(dates) => { this.handleChangeDates(dates) }}
style={{ width: "calc(100% - 70px)" }}
/>
</div>
{ expandFilter &&
<div className="search-condition__item"> <div className="search-condition__item">
<span className="shelf-status">学院展示：</span> <span className="shelf-status">学院展示：</span>
<Select <Select
...@@ -212,13 +167,9 @@ class OfflineCourseFilter extends React.Component { ...@@ -212,13 +167,9 @@ class OfflineCourseFilter extends React.Component {
<Option value="NO">关闭</Option> <Option value="NO">关闭</Option>
</Select> </Select>
</div> </div>
}
</div> </div>
<div className="reset-fold-area"> <div className="reset-fold-area">
<Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={this.handleReset}>&#xe61b; </span></Tooltip> <Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={this.handleReset}>&#xe61b; </span></Tooltip>
<span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => {
this.setState({expandFilter:!expandFilter});
}}>{this.state.expandFilter ? <span><span>收起</span><span className="iconfont icon fold-icon" >&#xe82d; </span> </span> : <span>展开<span className="iconfont icon fold-icon" >&#xe835; </span></span>}</span>
</div> </div>
</Row> </Row>
</div> </div>
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
...@@ -19,6 +19,7 @@ import WatchDataModal from '../modal/WatchDataModal' ...@@ -19,6 +19,7 @@ import WatchDataModal from '../modal/WatchDataModal'
import CourseService from "@/domains/course-domain/CourseService"; import CourseService from "@/domains/course-domain/CourseService";
import RelatedPlanModal from '../../modal/RelatedPlanModal'; import RelatedPlanModal from '../../modal/RelatedPlanModal';
import ENUM from "../../../knowledge-base/ENUM.js";
import User from '@/common/js/user' import User from '@/common/js/user'
...@@ -78,7 +79,7 @@ class OfflineCourseList extends React.Component { ...@@ -78,7 +79,7 @@ class OfflineCourseList extends React.Component {
parseColumns = () => { parseColumns = () => {
const columns = [ const columns = [
{ {
title: '图文课', title: '线下课',
key: 'scheduleName', key: 'scheduleName',
dataIndex: 'scheduleName', dataIndex: 'scheduleName',
width:321, width:321,
...@@ -87,49 +88,40 @@ class OfflineCourseList extends React.Component { ...@@ -87,49 +88,40 @@ class OfflineCourseList extends React.Component {
const { coverUrl, scheduleVideoUrl } = record; const { coverUrl, scheduleVideoUrl } = record;
return ( return (
<div className="record__item"> <div className="record__item">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || defaultCoverUrl} /> <img className="course-cover" src={coverUrl || defaultCoverUrl} />
{ record.courseName.length > 25? <div>
<Tooltip title={record.courseName}> <Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div> <div className="course-name">{record.courseName}</div>
</Tooltip> </Tooltip>
: <div className="course-text">地点：一行最多二十字超出一行最多二十字超出</div>
<div className="course-name">{record.courseName}</div> <div className="course-text">12-01 09:00 ~ 01-01 14:00</div>
} </div>
</div> </div>
) )
} }
}, },
{ {
title: '课程分类', title: '上课状态',
key: 'categoryName', key: 'courseState',
dataIndex: 'categoryName', dataIndex: 'courseState',
width: 120, width: 120,
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="record__item"> <div className="record__item">
{record.categoryOneName}{ record.categoryTwoName?`-${record.categoryTwoName}`:''} {ENUM.offlineStateShow[val]}
</div> </div>
) )
} }
}, },
{ {
title: '创建人', title: '课程分类',
key: 'createName', key: 'categoryName',
dataIndex: 'createName', dataIndex: 'categoryName',
width: 100, width: 120,
render: (val) => { render: (val, record) => {
return ( return (
<div> <div className="record__item">
{ val && {record.categoryOneName}{ record.categoryTwoName?`-${record.categoryTwoName}`:''}
<Tooltip title={val}>
<div>
{val.length > 4 ? `${val.slice(0,4)}...` : val}
</div>
</Tooltip>
}
</div> </div>
) )
} }
...@@ -148,59 +140,37 @@ class OfflineCourseList extends React.Component { ...@@ -148,59 +140,37 @@ class OfflineCourseList extends React.Component {
}, },
}, },
{ {
title: "观看用户数", title: "讲师",
width: 110, width: 110,
key: "watchUserCount", key: "teacher",
dataIndex: "watchUserCount", dataIndex: "teacher",
render: (val, item) => { render: (val, item) => {
return ( return (
<div className="watchUserCount">{val}</div> <div className="watchUserCount">张老师</div>
) )
}, },
}, },
{ {
title: '创建时间', title: '报名时间',
width: 181, width: 181,
key: 'created', key: 'updated',
dataIndex: 'created', dataIndex: 'updated',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return formatDate('YYYY-MM-DD H:i', val) return formatDate('YYYY-MM-DD H:i', val)
} }
}, },
{ {
title: '最近修改时间', title: '创建时间',
width: 181, width: 181,
key: 'updated', key: 'created',
dataIndex: 'updated', dataIndex: 'created',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return formatDate('YYYY-MM-DD H:i', val) return formatDate('YYYY-MM-DD H:i', val)
} }
}, },
{ {
title: '关联项',
width: 200,
key: "planList",
dataIndex: "planList",
render: (val, record) => {
return (
<div className="related-task">
{ record.relatedPlanList ?
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement="top" arrowPointAtCenter>
{ record.relatedPlanList.map((item,index)=>{
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
})
}
</Tooltip>
:
<span></span>
}
</div>
)
}
},
{
title: '操作', title: '操作',
key: 'operate', key: 'operate',
dataIndex: 'operate', dataIndex: 'operate',
...@@ -365,7 +335,7 @@ class OfflineCourseList extends React.Component { ...@@ -365,7 +335,7 @@ class OfflineCourseList extends React.Component {
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="videoClass" type="videoClass"
title="图文课" title="线下课"
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null
...@@ -434,7 +404,7 @@ class OfflineCourseList extends React.Component { ...@@ -434,7 +404,7 @@ class OfflineCourseList extends React.Component {
const { current, size } = query; const { current, size } = query;
return ( return (
<div className="video-course-list"> <div className="offline-course-list">
<Table <Table
rowKey={record => record.id} rowKey={record => record.id}
dataSource={dataSource} dataSource={dataSource}
...@@ -443,7 +413,7 @@ class OfflineCourseList extends React.Component { ...@@ -443,7 +413,7 @@ class OfflineCourseList extends React.Component {
pagination={false} pagination={false}
scroll={{ x: 1500}} scroll={{ x: 1500}}
bordered bordered
className="video-list-table" className="offline-list-table"
/> />
<div className="box-footer"> <div className="box-footer">
......
src/modules/course-manage/offline-course/components/OfflineCourseList.less
.video-course-list { .offline-course-list {
margin-top: 12px; margin-top: 12px;
.video-list-table{ .offline-list-table{
tbody { tbody {
tr{ tr{
&:nth-child(even){ &:nth-child(even){
...@@ -51,29 +51,39 @@ ...@@ -51,29 +51,39 @@
display: flex; display: flex;
.course-cover { .course-cover {
min-width: 97px; min-width: 116px;
max-width: 97px; max-width: 116px;
height: 50px; height: 60px;
border-radius: 2px; border-radius: 2px;
margin-right: 8px; margin-right: 8px;
background-color: #666; background-color: #000;
} }
.course-name { .course-name {
color: #333;
max-width:262px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
line-height: 20px;
margin-bottom: 4px;
}
.course-text {
color: #666; color: #666;
width:188px; max-width:262px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; white-space: nowrap;
-webkit-line-clamp: 2; line-height: 20px;
-webkit-box-orient: vertical; font-size: 12px;
height:48px;
} }
} }
} }
.video-course-more-menu { .offline-course-more-menu {
background: white; background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
......
src/modules/knowledge-base/ENUM.js
...@@ -30,6 +30,28 @@ const ENUM = { ...@@ -30,6 +30,28 @@ const ENUM = {
color: "#999", color: "#999",
}, },
}, },
offlineStateShow: {
UN_START: {
code: 1,
title: "未开始",
color: "#FFB714",
},
STARTING: {
code: 2,
title: "进行中",
color: "#238FFF",
},
FINISH: {
code: 3,
title: "已结束",
color: "#3BBDAA",
},
EXPIRED: {
code: 4,
title: "已取消",
color: "#999",
},
},
CourseTypeEnum: { CourseTypeEnum: {
LIVE: "直播课", LIVE: "直播课",
......
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