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