Skip to content

X
xiaomai-cloud-class-web
Commit 66fa34f4 by guomingpang
Options

fix:修改测试bug

parent a0744081
Showing with 608 additions and 476 deletions
src/domains/basic-domain/constants.ts
/* /*
* @Author: 陈剑宇 * @Author: 陈剑宇
* @Date: 2020-05-07 14:43:01 * @Date: 2020-05-07 14:43:01
* @LastEditTime: 2021-04-19 16:42:24 * @LastEditTime: 2021-05-28 15:20:40
* @LastEditors: zhangleyuan * @LastEditors: fusanqiasng
* @Description: * @Description:
* @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
*/ */
import { MapInterface } from '@/domains/basic-domain/interface' import { MapInterface } from '@/domains/basic-domain/interface'
// 默认是 dev 环境 // 默认是 dev 环境
const ENV: string = process.env.DEPLOY_ENV || 'dev'; const ENV: string = process.env.DEPLOY_ENV || 'dev'
console.log("process.env.DEPLOY_ENV",process) console.log('process.env.DEPLOY_ENV', process)
const BASIC_HOST_MAP: MapInterface = { const BASIC_HOST_MAP: MapInterface = {
dev: 'https://dev-heimdall.xiaomai5.com/', dev: 'https://dev-heimdall.xiaomai5.com/',
dev1: 'https://dev1-heimdall.xiaomai5.com/', dev1: 'https://dev1-heimdall.xiaomai5.com/',
rc: 'https://rc-heimdall.xiaomai5.com/', rc: 'https://rc-heimdall.xiaomai5.com/',
gray: 'https://gray-heimdall.xiaomai5.com/', gray: 'https://gray-heimdall.xiaomai5.com/',
prod: 'https://gateway.xiaomai5.com/' prod: 'https://gateway.xiaomai5.com/',
}; }
const PATH_MAP: MapInterface = { const PATH_MAP: MapInterface = {
dev: 'https://dev.xiaomai5.com/xiaomai-cloud-class-web/h5.html', dev: 'https://dev.xiaomai5.com/xiaomai-cloud-class-web/h5.html',
dev1: 'https://dev.xiaomai5.com/xiaomai-cloud-class-web/h5.html', dev1: 'https://dev.xiaomai5.com/xiaomai-cloud-class-web/h5.html',
rc: 'https://rc.xiaomai5.com/xiaomai-cloud-class-web/h5.html', rc: 'https://rc.xiaomai5.com/xiaomai-cloud-class-web/h5.html',
gray: 'https://res.xiaomai0.com/xiaomai-cloud-class-web/gray/h5.html', gray: 'https://res.xiaomai0.com/xiaomai-cloud-class-web/gray/h5.html',
prod: 'https://res.xiaomai0.com/xiaomai-cloud-class-web/h5.html' prod: 'https://res.xiaomai0.com/xiaomai-cloud-class-web/h5.html',
}; }
// axios headers config // axios headers config
export const TIME_OUT: number = 20000; export const TIME_OUT: number = 20000
export const USER_TYPE: string = 'B'; export const USER_TYPE: string = 'B'
export const PROJECT = 'xmzj-web-b'; export const PROJECT = 'xmzj-web-b'
export const VERSION = '5.4.8'; export const VERSION = '5.4.8'
export const PREFIX = 'cloud-class'; export const PREFIX = 'cloud-class'
export const USER_PREFIX = 'store-live'; export const USER_PREFIX = 'store-live'
// host // host
export const BASIC_HOST: string = BASIC_HOST_MAP[ENV]; export const BASIC_HOST: string = BASIC_HOST_MAP[ENV]
export const PATH: string = PATH_MAP[ENV]; export const PATH: string = PATH_MAP[ENV]
src/modules/course-manage/components/LiveCourseFilter.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-14 15:41:30 * @Date: 2020-07-14 15:41:30
* @Last Modified by: 吴文洁 * @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-23 13:45:16 * @Last Modified time: 2020-07-23 13:45:16
* @Description: 大班直播、互动班课列表的筛选组件 * @Description: 大班直播、互动班课列表的筛选组件
*/ */
import React from 'react'; import React from 'react'
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom'
import { Row,Col, Input, Select ,Tooltip} from 'antd'; import { Row, Col, Input, Select, Tooltip } from 'antd'
import RangePicker from "@/modules/common/DateRangePicker"; import RangePicker from '@/modules/common/DateRangePicker'
import moment from 'moment'; import moment from 'moment'
import StoreService from "@/domains/store-domain/storeService"; import StoreService from '@/domains/store-domain/storeService'
import User from '@/common/js/user'; import User from '@/common/js/user'
import './LiveCourseFilter.less'; import './LiveCourseFilter.less'
const { Search } = Input; const { Search } = Input
const { Option } = Select; const { Option } = Select
const defaultQuery = { const defaultQuery = {
courseName: null, courseName: null,
startTime: null, startTime: null,
teacherId: null, teacherId: null,
courseState: null, courseState: null,
shelfState:null, shelfState: null,
} }
const defaultTeacherQuery = { const defaultTeacherQuery = {
size: 10, size: 10,
current: 1, current: 1,
nickName:null nickName: null,
} }
class LiveCourseFilter extends React.Component { class LiveCourseFilter extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
query: {...defaultQuery}, query: { ...defaultQuery },
teacherQuery: defaultTeacherQuery, teacherQuery: defaultTeacherQuery,
teacherList:[], teacherList: [],
expandFilter:false expandFilter: false,
} }
} }
componentDidMount() { componentDidMount() {
this.getTeacherList(); this.getTeacherList()
} }
getTeacherList(current = 1, selectList){ getTeacherList(current = 1, selectList) {
const { teacherQuery,teacherList} = this.state; const { teacherQuery, teacherList } = this.state
const _query = { const _query = {
...teacherQuery, ...teacherQuery,
current, current,
size:10 size: 10,
}; }
StoreService.getStoreUserBasicPage( _query).then((res) => { StoreService.getStoreUserBasicPage(_query).then((res) => {
const { result = {} } = res; const { result = {} } = res
const { records = [], total = 0, hasNext } = result; const { records = [], total = 0, hasNext } = result
const list = current > 1 ? teacherList.concat(records) : records; const list = current > 1 ? teacherList.concat(records) : records
this.setState({ this.setState({
hasNext, hasNext,
teacherList: list, teacherList: list,
}) })
}); })
} }
// 滑动加载更多讲师列表 // 滑动加载更多讲师列表
handleScrollTeacherList = (e) => { handleScrollTeacherList = (e) => {
const { hasNext } = this.state; const { hasNext } = this.state
const container = e.target; const container = e.target
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop; const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop
if (scrollToBottom && hasNext) { if (scrollToBottom && hasNext) {
const { teacherQuery } = this.state; const { teacherQuery } = this.state
let _teacherQuery = teacherQuery; let _teacherQuery = teacherQuery
_teacherQuery.current = _teacherQuery.current + 1 _teacherQuery.current = _teacherQuery.current + 1
this.setState({ this.setState(
teacherQuery:{..._teacherQuery} {
},()=>{this.getTeacherList(_teacherQuery.current)}) teacherQuery: { ..._teacherQuery },
},
() => {
this.getTeacherList(_teacherQuery.current)
}
)
} }
} }
// 改变搜索条件 // 改变搜索条件
handleChangeQuery = (field, value) => { handleChangeQuery = (field, value) => {
this.setState({ this.setState(
query: { {
...this.state.query, query: {
[field]: value, ...this.state.query,
current: 1, [field]: value,
current: 1,
},
},
() => {
if (field === 'courseName') return
this.props.onChange(this.state.query)
} }
}, () => { )
if (field === 'courseName') return;
this.props.onChange(this.state.query)
});
} }
handleChangeDates = (dates) => { handleChangeDates = (dates) => {
const { query } = this.state; const { query } = this.state
if (_.isEmpty(dates)) { if (_.isEmpty(dates)) {
delete query.startTime; delete query.startTime
delete query.endTime; delete query.endTime
} else { } else {
query.startTime = dates[0].valueOf(); query.startTime = dates[0]?.startOf('day').valueOf()
query.endTime = dates[1].valueOf(); query.endTime = dates[0]?.endOf('day').valueOf()
} }
this.setState({ this.setState(
query:{ {
...query, query: {
current: 1, ...query,
current: 1,
},
},
() => {
this.props.onChange(this.state.query)
} }
}, () => { )
this.props.onChange(this.state.query);
})
} }
// 选择老师 // 选择老师
handleSelectTeacher = (teacher) => { handleSelectTeacher = (teacher) => {
const { name: teacherName, teacherId } = teacher; const { name: teacherName, teacherId } = teacher
this.setState({ this.setState(
query: { {
...this.state.query, query: {
teacherId, ...this.state.query,
teacherName, teacherId,
current: 1, teacherName,
current: 1,
},
},
() => {
this.props.onChange(this.state.query)
} }
}, () => { )
this.props.onChange(this.state.query);
})
} }
// 清空搜索条件 // 清空搜索条件
handleReset = () => { handleReset = () => {
this.setState({ this.setState(
query: { {
courseName: null, query: {
startTime: null, courseName: null,
endTime: null, startTime: null,
teacherId: null, endTime: null,
teacherName: null, teacherId: null,
courseState: undefined, teacherName: null,
current: 1, courseState: undefined,
shelfState:null, current: 1,
shelfState: null,
},
}, },
}, () => { () => {
this.props.onChange(this.state.query); this.props.onChange(this.state.query)
}) }
)
} }
render() { render() {
const { const { courseName, startTime, endTime, courseState, teacherName, teacherId, shelfState } = this.state.query
courseName, startTime, endTime, const { expandFilter, teacherList, teacherQuery } = this.state
courseState, teacherName, teacherId, const { teacherId: _teahcerId } = {}
shelfState const isTeacher = !!_teahcerId // 判断是否是老师身份
} = this.state.query;
const {expandFilter,teacherList,teacherQuery} = this.state;
const { teacherId: _teahcerId } = {};
const isTeacher = !!_teahcerId; // 判断是否是老师身份
return ( return (
<div className="live-course-filter"> <div className='live-course-filter'>
<Row type="flex" justify="space-between" align="top"> <Row type='flex' justify='space-between' align='top'>
<div className='search-condition'>
<div className="search-condition"> <div className='search-condition__item'>
<div className="search-condition__item"> <span className='search-name'>直播名称：</span>
<span className="search-name">直播名称：</span> <Search
<Search value={courseName}
value={courseName} placeholder='搜索直播名称'
placeholder="搜索直播名称" onChange={(e) => {
onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}} this.handleChangeQuery('courseName', e.target.value)
onSearch={ () => { this.props.onChange(this.state.query) } } }}
style={{ width: "calc(100% - 70px)" }} onSearch={() => {
className="search-input" this.props.onChange(this.state.query)
enterButton={<span className="icon iconfont">&#xe832;</span>} }}
/> style={{ width: 'calc(100% - 70px)' }}
</div> className='search-input'
<div className="search-condition__item"> enterButton={<span className='icon iconfont'>&#xe832;</span>}
<span className="search-date">上课日期：</span> />
<RangePicker </div>
id="course_date_picker" <div className='search-condition__item'>
allowClear={false} <span className='search-date'>上课日期：</span>
value={ startTime ? [moment(startTime), moment(endTime)] : null } <RangePicker
format={"YYYY-MM-DD"} id='course_date_picker'
onChange={(dates) => { this.handleChangeDates(dates) }} allowClear={false}
style={{ width: "calc(100% - 70px)" }} value={startTime ? [moment(startTime), moment(endTime)] : null}
/> format={'YYYY-MM-DD'}
</div> onChange={(dates) => {
{ User.getUserRole()!=="CloudLecturer" && this.handleChangeDates(dates)
<div className="search-condition__item"> }}
<span>讲师：</span> style={{ width: 'calc(100% - 70px)' }}
<Select />
placeholder="请选择讲师" </div>
style={{ width: "calc(100% - 70px)"}} {User.getUserRole() !== 'CloudLecturer' && (
showSearch <div className='search-condition__item'>
allowClear <span>讲师：</span>
filterOption={(input, option) => option} <Select
onPopupScroll={this.handleScrollTeacherList} placeholder='请选择讲师'
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} style={{ width: 'calc(100% - 70px)' }}
value={teacherId} showSearch
onChange={(value) => { allowClear
this.handleChangeQuery('teacherId', value); filterOption={(input, option) => option}
}} onPopupScroll={this.handleScrollTeacherList}
onSearch={(value) => { suffixIcon={
teacherQuery.nickName = value <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
this.setState({ &#xe835;
teacherQuery </span>
}, () => { }
value={teacherId}
onChange={(value) => {
this.handleChangeQuery('teacherId', value)
}}
onSearch={(value) => {
teacherQuery.nickName = value
this.setState(
{
teacherQuery,
},
() => {
this.getTeacherList()
}
)
}}
onClear={(value) => {
this.setState(
{
teacherQuery: {
size: 10,
current: 1,
nickName: null,
},
},
() => {
this.getTeacherList() this.getTeacherList()
})
}}
onClear ={(value)=>{
this.setState({
teacherQuery:{
size: 10,
current: 1,
nickName:null
}
}, () => {
this.getTeacherList()
})
} }
} )
> }}>
{_.map(teacherList, (item, index) => { {_.map(teacherList, (item, index) => {
return ( return (
<Select.Option value={item.userId} key={item.userId}>{item.nickName}</Select.Option> <Select.Option value={item.userId} key={item.userId}>
); {item.nickName}
})} </Select.Option>
</Select> )
})}
</Select>
</div>
)}
{((expandFilter && User.getUserRole() !== 'CloudLecturer') || User.getUserRole() === 'CloudLecturer') && (
<div className='search-condition__item'>
<span className='select-status'>上课状态：</span>
<Select
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>
}>
<Option value='UN_START'>待开课</Option>
<Option value='STARTING'>上课中</Option>
<Option value='FINISH'>已完成</Option>
<Option value='EXPIRED'>未成功开课</Option>
</Select>
</div>
)}
{expandFilter && (
<div className='search-condition__item'>
<span className='shelf-status'>学院展示：</span>
<Select
style={{ width: 'calc(100% - 70px)' }}
placeholder='请选择'
allowClear={true}
value={shelfState}
onChange={(value) => {
this.handleChangeQuery('shelfState', value)
}}
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}>
<Option value='YES'>开启</Option>
<Option value='NO'>关闭</Option>
</Select>
</div> </div>
} )}
{ ((expandFilter && User.getUserRole()!=="CloudLecturer") || User.getUserRole()==="CloudLecturer") && </div>
<div className="search-condition__item">
<span className="select-status">上课状态：</span>
<Select
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>}
>
<Option value="UN_START">待开课</Option>
<Option value="STARTING">上课中</Option>
<Option value="FINISH">已完成</Option>
<Option value="EXPIRED">未成功开课</Option>
</Select>
</div>
}
{ expandFilter &&
<div className="search-condition__item">
<span className="shelf-status">学院展示：</span>
<Select
style={{ width: "calc(100% - 70px)" }}
placeholder="请选择"
allowClear={true}
value={shelfState}
onChange={(value) => { this.handleChangeQuery('shelfState', value) }}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
>
<Option value="YES">开启</Option>
<Option value="NO">关闭</Option>
</Select>
</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 style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => { <span className='resetBtn iconfont icon' onClick={this.handleReset}>
this.setState({expandFilter:!expandFilter}); &#xe61b;{' '}
}}>{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> </span>
</div> </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> </Row>
</div> </div>
) )
} }
} }
export default withRouter(LiveCourseFilter); export default withRouter(LiveCourseFilter)
\ No newline at end of file
src/modules/course-manage/graphics-course/components/GraphicsCourseFilter.jsx
import React from 'react'; import React from 'react'
import { Row, Input, Select,Tooltip } from 'antd'; import { Row, Input, Select, Tooltip } from 'antd'
import RangePicker from "@/modules/common/DateRangePicker"; import RangePicker from '@/modules/common/DateRangePicker'
import './GraphicsCourseFilter.less'; import './GraphicsCourseFilter.less'
import moment from 'moment'; import moment from 'moment'
import StoreService from "@/domains/store-domain/storeService"; import StoreService from '@/domains/store-domain/storeService'
const { Search } = Input; const { Search } = Input
const { Option } = Select; const { Option } = Select
const DEFAULT_QUERY = { const DEFAULT_QUERY = {
courseName: null, // 课程名称 courseName: null, // 课程名称
operatorId: null, // 创建人 operatorId: null, // 创建人
beginTime: null, // 开始日期 beginTime: null, // 开始日期
endTime: null, // 结束日期 endTime: null, // 结束日期
shelfState:null, shelfState: null,
} }
const defaultTeacherQuery = { const defaultTeacherQuery = {
size: 10, size: 10,
current: 1, current: 1,
nickName:null nickName: null,
} }
class GraphicsCourseFilter extends React.Component { class GraphicsCourseFilter extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
query: { ...DEFAULT_QUERY }, // 使用扩展运算符,避免浅拷贝 query: { ...DEFAULT_QUERY }, // 使用扩展运算符,避免浅拷贝
teacherQuery: defaultTeacherQuery, teacherQuery: defaultTeacherQuery,
teacherList:[], teacherList: [],
expandFilter:false expandFilter: false,
} }
} }
componentDidMount() { componentDidMount() {
this.getTeacherList(); this.getTeacherList()
} }
getTeacherList(current = 1, selectList){ getTeacherList(current = 1, selectList) {
const { teacherQuery,teacherList} = this.state; const { teacherQuery, teacherList } = this.state
const _query = { const _query = {
...teacherQuery, ...teacherQuery,
current, current,
size:10 size: 10,
}; }
StoreService.getStoreUserBasicPage( _query).then((res) => { StoreService.getStoreUserBasicPage(_query).then((res) => {
const { result = {} } = res; const { result = {} } = res
const { records = [], total = 0, hasNext } = result; const { records = [], total = 0, hasNext } = result
const list = current > 1 ? teacherList.concat(records) : records; const list = current > 1 ? teacherList.concat(records) : records
this.setState({ this.setState({
hasNext, hasNext,
teacherList: list, teacherList: list,
}) })
}); })
} }
// 滑动加载更多讲师列表 // 滑动加载更多讲师列表
handleScrollTeacherList = (e) => { handleScrollTeacherList = (e) => {
const { hasNext } = this.state; const { hasNext } = this.state
const container = e.target; const container = e.target
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop; const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop
if (scrollToBottom && hasNext) { if (scrollToBottom && hasNext) {
const { teacherQuery } = this.state; const { teacherQuery } = this.state
let _teacherQuery = teacherQuery; let _teacherQuery = teacherQuery
_teacherQuery.current = _teacherQuery.current + 1 _teacherQuery.current = _teacherQuery.current + 1
this.setState({ this.setState(
teacherQuery:{..._teacherQuery} {
},()=>{this.getTeacherList(_teacherQuery.current)}) teacherQuery: { ..._teacherQuery },
},
() => {
this.getTeacherList(_teacherQuery.current)
}
)
} }
} }
// 改变搜索条件 // 改变搜索条件
handleChangeQuery = (field, value) => { handleChangeQuery = (field, value) => {
this.setState({ this.setState(
query: { {
...this.state.query, query: {
[field]: value, ...this.state.query,
current: 1, [field]: value,
current: 1,
},
},
() => {
if (field === 'courseName') return
this.props.onChange(this.state.query)
} }
}, () => { )
if (field === 'courseName') return;
this.props.onChange(this.state.query)
});
} }
handleChangeDates = (dates) => { handleChangeDates = (dates) => {
const query = _.clone(this.state.query); const query = _.clone(this.state.query)
if (_.isEmpty(dates)) { if (_.isEmpty(dates)) {
delete query.beginTime; delete query.beginTime
delete query.endTime; delete query.endTime
} else { } else {
query.beginTime = dates[0].valueOf(); query.beginTime = dates[0]?.startOf('day').valueOf()
query.endTime = dates[1].valueOf(); query.endTime = dates[0]?.endOf('day').valueOf()
} }
this.setState({ this.setState(
query:{ {
...query, query: {
current: 1, ...query,
current: 1,
},
},
() => {
this.props.onChange(this.state.query)
} }
}, () => { )
this.props.onChange(this.state.query);
})
} }
// 重置搜索条件 // 重置搜索条件
handleReset = () => { handleReset = () => {
this.setState({ this.setState(
query: DEFAULT_QUERY, {
}, () => { query: DEFAULT_QUERY,
this.props.onChange(this.state.query); },
}) () => {
this.props.onChange(this.state.query)
}
)
} }
render() { render() {
const { const {
query: { query: { courseName, operator, beginTime, endTime, operatorId, shelfState },
courseName,
operator,
beginTime,
endTime,
operatorId,
shelfState
},
expandFilter, expandFilter,
teacherList, teacherList,
teacherQuery teacherQuery,
} = this.state; } = this.state
return ( return (
<div className="video-course-filter"> <div className='video-course-filter'>
<Row type="flex" justify="space-between" align="top"> <Row type='flex' justify='space-between' align='top'>
<div className="search-condition"> <div className='search-condition'>
<div className="search-condition__item"> <div className='search-condition__item'>
<span className="search-name">图文课名称：</span> <span className='search-name'>图文课名称：</span>
<Search <Search
value={courseName} value={courseName}
placeholder="搜索图文课名称" placeholder='搜索图文课名称'
onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}} onChange={(e) => {
onSearch={ () => { this.props.onChange(this.state.query) } } this.handleChangeQuery('courseName', e.target.value)
style={{ width: "calc(100% - 84px)" }} }}
enterButton={<span className="icon iconfont">&#xe832;</span>} onSearch={() => {
this.props.onChange(this.state.query)
}}
style={{ width: 'calc(100% - 84px)' }}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/> />
</div> </div>
<div className="search-condition__item"> <div className='search-condition__item'>
<span>创建人：</span> <span>创建人：</span>
<Select <Select
placeholder="请选择创建人" placeholder='请选择创建人'
style={{width:"calc(100% - 70px)"}} style={{ width: 'calc(100% - 70px)' }}
showSearch showSearch
allowClear allowClear
filterOption={(input, option) => option} filterOption={(input, option) => option}
onPopupScroll={this.handleScrollTeacherList} 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} value={operatorId}
onChange={(value) => { onChange={(value) => {
this.handleChangeQuery('operatorId', value) this.handleChangeQuery('operatorId', value)
}} }}
onSearch={(value) => { onSearch={(value) => {
teacherQuery.nickName = value teacherQuery.nickName = value
this.setState({ this.setState(
teacherQuery {
}, () => { teacherQuery,
this.getTeacherList() },
}) () => {
this.getTeacherList()
}
)
}} }}
onClear ={(value)=>{ onClear={(value) => {
this.setState({ this.setState(
teacherQuery:{ {
size: 10, teacherQuery: {
current: 1, size: 10,
nickName:null current: 1,
nickName: null,
},
},
() => {
this.getTeacherList()
} }
}, () => { )
this.getTeacherList() }}>
})
}
}
>
{_.map(teacherList, (item, index) => { {_.map(teacherList, (item, index) => {
return ( return (
<Select.Option value={item.id} key={item.id}>{item.nickName}</Select.Option> <Select.Option value={item.id} key={item.id}>
); {item.nickName}
</Select.Option>
)
})} })}
</Select> </Select>
</div> </div>
<div className="search-condition__item"> <div className='search-condition__item'>
<span className="search-date">创建日期：</span> <span className='search-date'>创建日期：</span>
<RangePicker <RangePicker
id="course_date_picker" id='course_date_picker'
allowClear={false} allowClear={false}
value={ beginTime ? [moment(beginTime), moment(endTime)] : null } value={beginTime ? [moment(beginTime), moment(endTime)] : null}
format={"YYYY-MM-DD"} format={'YYYY-MM-DD'}
onChange={(dates) => { this.handleChangeDates(dates) }} onChange={(dates) => {
style={{ width: "calc(100% - 70px)" }} this.handleChangeDates(dates)
}}
style={{ width: 'calc(100% - 70px)' }}
/> />
</div> </div>
{ expandFilter && {expandFilter && (
<div className="search-condition__item"> <div className='search-condition__item'>
<span className="shelf-status">学院展示：</span> <span className='shelf-status'>学院展示：</span>
<Select <Select
style={{ width: "calc(100% - 84px)" }} style={{ width: 'calc(100% - 84px)' }}
placeholder="请选择" placeholder='请选择'
allowClear={true} allowClear={true}
value={shelfState} value={shelfState}
onChange={(value) => { this.handleChangeQuery('shelfState', value) }} onChange={(value) => {
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} this.handleChangeQuery('shelfState', value)
> }}
<Option value="YES">开启</Option> suffixIcon={
<Option value="NO">关闭</Option> <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
</Select> &#xe835;
</div> </span>
} }>
<Option value='YES'>开启</Option>
<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> </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> </Row>
</div> </div>
) )
} }
} }
export default GraphicsCourseFilter; export default GraphicsCourseFilter
src/modules/course-manage/offline-course/components/OfflineCourseFilter.jsx
import React from 'react'; import React from 'react'
import { Row, Input, Select,Tooltip } from 'antd'; import { Row, Input, Select, Tooltip } from 'antd'
import RangePicker from "@/modules/common/DateRangePicker"; import RangePicker from '@/modules/common/DateRangePicker'
import './OfflineCourseFilter.less'; import './OfflineCourseFilter.less'
import moment from 'moment'; import moment from 'moment'
import StoreService from "@/domains/store-domain/storeService"; import StoreService from '@/domains/store-domain/storeService'
const { Search } = Input; const { Search } = Input
const { Option } = Select; const { Option } = Select
const DEFAULT_QUERY = { const DEFAULT_QUERY = {
courseName: null, // 课程名称 courseName: null, // 课程名称
operatorId: null, // 创建人 operatorId: null, // 创建人
beginTime: null, // 开始日期 beginTime: null, // 开始日期
endTime: null, // 结束日期 endTime: null, // 结束日期
shelfState:null, shelfState: null,
} }
const defaultTeacherQuery = { const defaultTeacherQuery = {
size: 10, size: 10,
current: 1, current: 1,
nickName:null nickName: null,
} }
class OfflineCourseFilter extends React.Component { class OfflineCourseFilter extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
query: { ...DEFAULT_QUERY }, // 使用扩展运算符,避免浅拷贝 query: { ...DEFAULT_QUERY }, // 使用扩展运算符,避免浅拷贝
teacherQuery: defaultTeacherQuery, teacherQuery: defaultTeacherQuery,
teacherList:[], teacherList: [],
expandFilter:false expandFilter: false,
} }
} }
componentDidMount() { componentDidMount() {
this.getTeacherList(); this.getTeacherList()
} }
getTeacherList(current = 1, selectList){ getTeacherList(current = 1, selectList) {
const { teacherQuery,teacherList} = this.state; const { teacherQuery, teacherList } = this.state
const _query = { const _query = {
...teacherQuery, ...teacherQuery,
current, current,
size:10 size: 10,
}; }
StoreService.getStoreUserBasicPage( _query).then((res) => { StoreService.getStoreUserBasicPage(_query).then((res) => {
const { result = {} } = res; const { result = {} } = res
const { records = [], total = 0, hasNext } = result; const { records = [], total = 0, hasNext } = result
const list = current > 1 ? teacherList.concat(records) : records; const list = current > 1 ? teacherList.concat(records) : records
this.setState({ this.setState({
hasNext, hasNext,
teacherList: list, teacherList: list,
}) })
}); })
} }
// 滑动加载更多讲师列表 // 滑动加载更多讲师列表
handleScrollTeacherList = (e) => { handleScrollTeacherList = (e) => {
const { hasNext } = this.state; const { hasNext } = this.state
const container = e.target; const container = e.target
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop; const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop
if (scrollToBottom && hasNext) { if (scrollToBottom && hasNext) {
const { teacherQuery } = this.state; const { teacherQuery } = this.state
let _teacherQuery = teacherQuery; let _teacherQuery = teacherQuery
_teacherQuery.current = _teacherQuery.current + 1 _teacherQuery.current = _teacherQuery.current + 1
this.setState({ this.setState(
teacherQuery:{..._teacherQuery} {
},()=>{this.getTeacherList(_teacherQuery.current)}) teacherQuery: { ..._teacherQuery },
},
() => {
this.getTeacherList(_teacherQuery.current)
}
)
} }
} }
// 改变搜索条件 // 改变搜索条件
handleChangeQuery = (field, value) => { handleChangeQuery = (field, value) => {
this.setState({ this.setState(
query: { {
...this.state.query, query: {
[field]: value, ...this.state.query,
current: 1, [field]: value,
current: 1,
},
},
() => {
if (field === 'courseName') return
this.props.onChange(this.state.query)
} }
}, () => { )
if (field === 'courseName') return;
this.props.onChange(this.state.query)
});
} }
handleChangeDates = (dates) => { handleChangeDates = (dates) => {
const query = _.clone(this.state.query); const query = _.clone(this.state.query)
if (_.isEmpty(dates)) { if (_.isEmpty(dates)) {
delete query.beginTime; delete query.beginTime
delete query.endTime; delete query.endTime
} else { } else {
query.beginTime = dates[0].valueOf(); query.beginTime = dates[0]?.startOf('day').valueOf()
query.endTime = dates[1].valueOf(); query.endTime = dates[0]?.endOf('day').valueOf()
} }
this.setState({ this.setState(
query:{ {
...query, query: {
current: 1, ...query,
current: 1,
},
},
() => {
this.props.onChange(this.state.query)
} }
}, () => { )
this.props.onChange(this.state.query);
})
} }
// 重置搜索条件 // 重置搜索条件
handleReset = () => { handleReset = () => {
this.setState({ this.setState(
query: DEFAULT_QUERY, {
}, () => { query: DEFAULT_QUERY,
this.props.onChange(this.state.query); },
}) () => {
this.props.onChange(this.state.query)
}
)
} }
render() { render() {
const { const {
query: { query: { courseName, courseState, shelfState },
courseName,
courseState,
shelfState,
},
expandFilter, expandFilter,
} = this.state; } = this.state
return ( return (
<div className="video-course-filter"> <div className='video-course-filter'>
<Row type="flex" justify="space-between" align="top"> <Row type='flex' justify='space-between' align='top'>
<div className="search-condition"> <div className='search-condition'>
<div className="search-condition__item"> <div className='search-condition__item'>
<span className="search-name">线下课名称：</span> <span className='search-name'>线下课名称：</span>
<Search <Search
value={courseName} value={courseName}
placeholder="搜索线下课名称" placeholder='搜索线下课名称'
onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}} onChange={(e) => {
onSearch={ () => { this.props.onChange(this.state.query) } } this.handleChangeQuery('courseName', e.target.value)
style={{ width: "calc(100% - 84px)" }} }}
enterButton={<span className="icon iconfont" style={{fontSize: '16px'}}>&#xe832;</span>} onSearch={() => {
this.props.onChange(this.state.query)
}}
style={{ width: 'calc(100% - 84px)' }}
enterButton={
<span className='icon iconfont' style={{ fontSize: '16px' }}>
&#xe832;
</span>
}
/> />
</div> </div>
<div className="search-condition__item"> <div className='search-condition__item'>
<span className="shelf-status">学院展示：</span> <span className='shelf-status'>学院展示：</span>
<Select <Select
style={{ width: "calc(100% - 84px)" }} style={{ width: 'calc(100% - 84px)' }}
placeholder="请选择" placeholder='请选择'
allowClear={true} allowClear={true}
value={shelfState} value={shelfState}
onChange={(value) => { this.handleChangeQuery('shelfState', value) }} onChange={(value) => {
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} this.handleChangeQuery('shelfState', value)
> }}
<Option value="YES">开启</Option> suffixIcon={
<Option value="NO">关闭</Option> <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}>
<Option value='YES'>开启</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='清空筛选'>
</div> <span className='resetBtn iconfont icon' onClick={this.handleReset}>
&#xe61b;{' '}
</span>
</Tooltip>
</div>
</Row> </Row>
</div> </div>
) )
} }
} }
export default OfflineCourseFilter; export default OfflineCourseFilter
src/modules/course-manage/video-course/components/VideoCourseFilter.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:11:57 * @Date: 2020-08-05 10:11:57
* @LastEditors: fusanqiasng * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-28 14:07:37 * @LastEditTime: 2021-05-28 15:38:11
* @Description: 视频课-搜索模块 * @Description: 视频课-搜索模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -192,7 +192,6 @@ class VideoCourseFilter extends React.Component { ...@@ -192,7 +192,6 @@ class VideoCourseFilter extends React.Component {
teacherList, teacherList,
teacherQuery, teacherQuery,
categoryList, categoryList,
categoryName,
} = this.state } = this.state
console.log('categoryList', categoryList) console.log('categoryList', categoryList)
...@@ -276,10 +275,11 @@ class VideoCourseFilter extends React.Component { ...@@ -276,10 +275,11 @@ class VideoCourseFilter extends React.Component {
<TreeSelect <TreeSelect
treeNodeFilterProp='categoryName' treeNodeFilterProp='categoryName'
showSearch showSearch
value={categoryId || null}
style={{ width: 'calc(100% - 75px)' }} style={{ width: 'calc(100% - 75px)' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={categoryList} treeData={categoryList}
placeholder='请选择课程类型' placeholder='请选择课程分类'
allowClear allowClear
onChange={(value) => { onChange={(value) => {
this.handleChangeQuery('categoryId', value) this.handleChangeQuery('categoryId', value)
......
src/modules/knowledge-base/modal/AddCourse.jsx
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: zangsuyun * @Author: zangsuyun
* @Date: 2021-03-13 09:54:26 * @Date: 2021-03-13 09:54:26
* @LastEditors: fusanqiasng * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-28 14:21:22 * @LastEditTime: 2021-05-28 15:35:33
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -453,10 +453,17 @@ class AddCourse extends React.Component { ...@@ -453,10 +453,17 @@ class AddCourse extends React.Component {
dataIndex: 'categoryName', dataIndex: 'categoryName',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className='record__item'> <Choose>
{record.categoryOneName} <When condition={videoCourseDivision === 'internal'}>
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''} <div className='record__item'>
</div> {record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div>
</When>
<Otherwise>
<div className='record__item'>{record.categorySonName}</div>
</Otherwise>
</Choose>
) )
}, },
}, },
......
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