Skip to content

X
xiaomai-cloud-class-web
Commit 92a4c2c1 by chenshu
Options

feat:初始化

parent c2db507e
Showing with 122 additions and 143 deletions
src/components/MultipleDatePicker.jsx
......@@ -115,7 +115,7 @@ class MultipleDatePicker extends React.Component {
}
handleShowDetail(time, className) {
if(!this.props.canSelectTodayBefore && className === 'before-disabled') {
if((!this.props.canSelectTodayBefore && className === 'before-disabled') || this.props.disabled) {
return
}
let date = time.valueOf();
......
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
......@@ -18,6 +18,7 @@ import {
Select,
Switch,
TimePicker,
InputNumber,
} from 'antd';
import $ from 'jquery';
......@@ -46,7 +47,6 @@ const whetherVisitorsJoin = 'NO'
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
let cutFlag = false;
const unitList = [
{ key: 'DAY', value: '天' },
{ key: 'HOUR', value: '小时' },
{ key: 'MINUTE', value: '分钟' },
]
......@@ -89,7 +89,8 @@ class AddOfflineCourse extends React.Component {
offlineCourseType: 'ANY_DAY_POFFLINE',
signInType: 'START_AGO',
signOutType: 'START_LATER',
quota: 1,
oldQuta: null,
quota: null,
signInTimeNum: 1,
signOutEndTimeNum: 1,
signOutStartTimeNum: 1,
......@@ -99,6 +100,7 @@ class AddOfflineCourse extends React.Component {
whetherSetApply: 'YES',
whetherSetSignIn: 'YES',
whetherSetSignOut: 'YES',
isEditDisablie: false,
}
}
......@@ -174,6 +176,7 @@ class AddOfflineCourse extends React.Component {
signOutEndTimeUnit,
signInType,
signOutType,
whetherHaveApply,
} = result;
let coverId;
let coverUrl = this.state.coverUrl;
......@@ -216,7 +219,8 @@ class AddOfflineCourse extends React.Component {
endTime,
startTimeApply,
endTimeApply,
quota,
quota: quota < 0 ? null : quota,
oldQuta: quota < 0 ? null : quota,
calendarTime,
signInTimeNum,
signInTimeUnit,
......@@ -226,6 +230,7 @@ class AddOfflineCourse extends React.Component {
signOutEndTimeUnit,
signInType,
signOutType,
isEditDisablie: whetherHaveApply === 'YES' || true,
});
})
}
......@@ -535,14 +540,16 @@ class AddOfflineCourse extends React.Component {
if (whetherSetSignOut === 'YES') {
commonParams.signOutType = signOutType;
commonParams.signOutStartTimeNum = signOutStartTimeNum;
commonParams.signOutStartTimeUnit = signOutStartTimeUnit;
if (commonParams.signOutType === 'START_LATER') {
commonParams.signOutStartTimeNum = signOutStartTimeNum;
commonParams.signOutStartTimeUnit = signOutStartTimeUnit;
}
commonParams.signOutEndTimeNum = signOutEndTimeNum;
commonParams.signOutEndTimeUnit = signOutEndTimeUnit;
}
// 校验必填字段:课程名称, 课程线下
this.handleValidate({ courseName, courseMedia, categoryId }).then((res) => {
this.handleValidate(commonParams).then((res) => {
if (!res) return;
Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
this.submitRemote({
......@@ -582,19 +589,49 @@ class AddOfflineCourse extends React.Component {
}
handleValidate = (data) => {
const { courseName, categoryId } = data;
return new Promise((resolve) => {
if (!courseName) {
if (!data.courseName) {
message.warning('请输入课程名称');
resolve(false);
return false
}
if(!categoryId){
} else if(!data.categoryId){
message.warning('请选择课程分类');
resolve(false);
return false
} else if(!data.offlinePlace){
message.warning('请输入上课地点');
resolve(false);
} else if(!data.teacherId ){
message.warning('请选择讲师');
resolve(false);
} else if(_.isEmpty(data.calendarTime)){
message.warning('请选择上课日期');
resolve(false);
} else if(!data.startTime || !data.endTime){
message.warning('请选择上课时间');
resolve(false);
} else if(moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.endTime).format(' HH:mm')).valueOf() < Date.now()){
message.warning('上课时间不能早于现在');
resolve(false);
} else if(data.startTime > data.endTime){
message.warning('上课结束时间需大于报名开始时间');
resolve(false);
} else if(data.whetherSetApply === 'YES' && !data.startTimeApply){
message.warning('请选择报名时间');
resolve(false);
} else if(data.whetherSetApply === 'YES' && data.startTimeApply > data.endTimeApply){
message.warning('报名结束时间需大于报名开始时间');
resolve(false);
} else if(data.whetherSetApply === 'YES' && data.endTimeApply > moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.endTime).format(' HH:mm')).valueOf()){
message.warning('报名结束时间需小于上课开始时间');
resolve(false);
} else if(data.whetherSetSignIn === 'YES' && !data.signInTimeNum){
message.warning('请输入签到时间');
resolve(false);
} else if(data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)){
message.warning('请输入签退时间');
resolve(false);
} else {
resolve(true);
}
resolve(true);
});
}
......@@ -709,8 +746,10 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit,
signInType,
signOutType,
oldQuta,
quota,
offlinePlace,
isEditDisablie,
} = this.state;
const isDefaultCover = coverUrl === defaultCoverUrl;
return (
......@@ -901,6 +940,7 @@ class AddOfflineCourse extends React.Component {
已选 <span className="mark-day">{isLongArr(calendarTime) ? calendarTime.length : 0}</span> 天
</div>
<MultipleDatePicker
disabled={isEditDisablie}
selectDateList={calendarTime}
onSelect={this.selectMultiDate}
canSelectTodayBefore={false}
......@@ -912,6 +952,7 @@ class AddOfflineCourse extends React.Component {
<div className="hour" id="hour">
<span className="label"><span className="require">*</span>上课时间：</span>
<TimePicker
disabled={isEditDisablie}
className="time-picker"
format="HH:mm"
value={startTime ? moment(startTime) : null}
......@@ -926,6 +967,7 @@ class AddOfflineCourse extends React.Component {
}
/>&nbsp;&nbsp;~&nbsp;&nbsp;
<TimePicker
disabled={isEditDisablie}
className="time-picker"
format="HH:mm"
value={endTime ? moment(endTime) : null}
......@@ -949,6 +991,7 @@ class AddOfflineCourse extends React.Component {
this.setState({ offlineCourseType: e.target.value });
}}
className="mt5"
disabled={isEditDisablie}
>
<Radio value="ANY_DAY_POFFLINE" className="mr-16">
<span style={{ color: "#333" }}>所选日期都要上课</span>
......@@ -962,7 +1005,11 @@ class AddOfflineCourse extends React.Component {
<span className="label">课程报名：</span>
<div className="switch-box">
<div className="switch-item" key="1">
<Switch checked={whetherSetApply === 'YES'} onChange={(value) => this.setState({ whetherSetApply: value ? 'YES' : 'NO' })} />
<Switch
disabled={isEditDisablie}
checked={whetherSetApply === 'YES'}
onChange={(value) => this.setState({ whetherSetApply: value ? 'YES' : 'NO' })}
/>
<span className="switch-tip">开启后可设置课程报名时间，获取报名数据</span>
</div>
{whetherSetApply === 'YES' && <div className="switch-item" key="2">
......@@ -979,12 +1026,12 @@ class AddOfflineCourse extends React.Component {
</div>}
{whetherSetApply === 'YES' && <div className="switch-item" key="3">
<span className="switch-label">报名人数：最多</span>
<Input
<InputNumber
value={quota}
min={oldQuta || 1}
style={{ margin: '0 4px', width: 90 }}
onChange={(e) => {
const number = (e.target.value + '').replace(/[^\d]/g, '');
this.setState({ quota: number })
onChange={(value) => {
this.setState({ quota: value })
}}
/>
<span className="switch-label">人</span>
......@@ -1017,13 +1064,14 @@ class AddOfflineCourse extends React.Component {
</Radio.Group>
</div>}
{whetherSetSignIn === 'YES' && <div className="switch-item" key="3">
<span className="switch-label">课程开始前</span>
<Input
<span className="switch-label">课程{signInType === 'START_AGO' ? '开始' : '结束'}前</span>
<InputNumber
value={signInTimeNum}
min={1}
max={signInTimeUnit === 'MINUTE' ? 1440 : 24}
style={{ margin: '0 4px', width: 90 }}
onChange={(e) => {
const number = (e.target.value + '').replace(/[^\d]/g, '');
this.setState({ signInTimeNum: number });
onChange={(value) => {
this.setState({ signInTimeNum: value })
}}
/>
<Select
......@@ -1067,16 +1115,17 @@ class AddOfflineCourse extends React.Component {
</Radio.Group>
</div>}
{whetherSetSignOut === 'YES' && <div className="switch-item" key="3">
<span className="switch-label">课程开始后</span>
<Input
<span className="switch-label">课程{signOutType === 'START_LATER' ? '开始' : '结束'}后</span>
{signOutType === 'START_LATER' && <InputNumber
value={signOutStartTimeNum}
min={1}
max={signOutStartTimeUnit === 'MINUTE' ? 1440 : 24}
style={{ margin: '0 4px', width: 90 }}
onChange={(e) => {
const number = (e.target.value + '').replace(/[^\d]/g, '');
this.setState({ signOutStartTimeNum: number });
onChange={(value) => {
this.setState({ signOutStartTimeNum: value })
}}
/>
<Select
/>}
{signOutType === 'START_LATER' && <Select
style={{ width: 72, marginRight: 4 }}
value={signOutStartTimeUnit}
onChange={(value) => {
......@@ -1086,14 +1135,15 @@ class AddOfflineCourse extends React.Component {
{unitList.map(item => (
<Option value={item.key} key={item.key}>{item.value}</Option>
))}
</Select>
<span className="switch-label">就可签退，截止签退时间为下课后</span>
<Input
</Select>}
{signOutType === 'START_LATER' && <span className="switch-label">就可签退，截止签退时间为下课后</span>}
<InputNumber
value={signOutEndTimeNum}
min={1}
max={signOutEndTimeUnit === 'MINUTE' ? 1440 : 24}
style={{ margin: '0 4px', width: 90 }}
onChange={(e) => {
const number = (e.target.value + '').replace(/[^\d]/g, '');
this.setState({ signOutEndTimeNum: number });
onChange={(value) => {
this.setState({ signOutEndTimeNum: value })
}}
/>
<Select
......@@ -1107,6 +1157,9 @@ class AddOfflineCourse extends React.Component {
<Option value={item.key} key={item.key}>{item.value}</Option>
))}
</Select>
{signOutType !== 'START_LATER' &&
<span className="switch-label">内可签退</span>
}
</div>}
</div>
</div>
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
......@@ -33,8 +33,6 @@ class OfflineCourseList extends React.Component {
this.state = {
id: '', // 视频课ID
studentIds: [],
RelatedPlanModalVisible: false,
selectPlanList: {},
}
}
......@@ -169,8 +167,8 @@ class OfflineCourseList extends React.Component {
return (
<div className="operate">
<div className="operate__item" onClick={() => window.RCHistory.push(`/offline-course/data?id=${record.courseId}`)}>参与数据</div>
<span className="operate__item split"> | </span>
<div className="operate__item" onClick={() => this.handleShowShareModal(record)}>分享</div>
{record.courseState !== 'EXPIRED' && <span className="operate__item split"> | </span>}
{record.courseState !== 'EXPIRED' && <div className="operate__item" onClick={() => this.handleShowShareModal(record)}>分享</div>}
<span className="operate__item split"> | </span>
<Dropdown overlay={this.renderMoreOperate(record)}>
<span className="more-operate">
......@@ -190,42 +188,6 @@ class OfflineCourseList extends React.Component {
];
return columns;
}
handleRelatedModalShow = (item) => {
const selectPlanList = {};
if(item.relatedPlanList){
item.relatedPlanList.map((item, index) => {
selectPlanList[item.planId] = {}
selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }];
return item
})
}
this.setState({
RelatedPlanModalVisible: true,
selectCourseId: item.courseId,
selectPlanList: selectPlanList,
})
}
closeRelatedPlanModalVisible = ()=>{
this.setState({
RelatedPlanModalVisible: false
})
}
onChangeSelectPlanList = (selectPlanList) => {
this.setState({
selectPlanList: selectPlanList
})
}
onConfirmSelectPlanList = () => {
this.setState({
RelatedPlanModalVisible: false
}, () => { this.props.onChange(); });
}
// 显示预览弹窗
handleShowPreviewModal = (query) => {
......@@ -265,13 +227,13 @@ class OfflineCourseList extends React.Component {
renderMoreOperate = (item) => {
return (
<div className="live-course-more-menu">
<div
{item.courseState !== 'EXPIRED' && <div
className="operate__item"
key="qrcode"
onClick={() => {
this.setState({ openQRCodeModal: true, qrcodeData: item })
}}
>考勤二维码</div>
>考勤二维码</div>}
<div
className="operate__item"
key="preview"
......@@ -279,20 +241,20 @@ class OfflineCourseList extends React.Component {
this.handleShowPreviewModal(item);
}}
>预览</div>
<div
{item.courseState === 'UN_START' && item.courseState === 'STARTING' && <div
className="operate__item"
key="cancel"
onClick={() => {
this.handleDeleteOfflineCourse(item.courseId);
}}
>取消课程</div>
<div
>取消课程</div>}
{item.courseState === 'UN_START' && <div
className="operate__item"
key="edit"
onClick={() => {
RCHistory.push(`/create-offline-course?type=edit&id=${item.courseId}`);
}}
>编辑</div>
>编辑</div>}
<div
className="operate__item"
key="delete"
......@@ -402,55 +364,22 @@ class OfflineCourseList extends React.Component {
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter;
const { query } = this.props;
let { order: _order } =query;
let _columnKey;
let _order;
// 按创建时间升序排序
if (columnKey === 'created' && order === 'ascend') { _order = 'CREATED_ASC'; }
if (columnKey === 'created' && order === 'ascend') {_columnKey="CREATED"; _order = 'SORT_ASC'; }
// 按创建时间降序排序
if (columnKey === 'created' && order === 'descend') { _order = 'CREATED_DESC'; }
// 按更新时间升序排序
if (columnKey === 'updated' && order === 'ascend') { _order = 'UPDATED_ASC'; }
// 按更新时间降序排序
if (columnKey === 'updated' && order === 'descend') { _order = 'UPDATED_DESC'; }
if (columnKey === 'created' && order === 'descend') { _columnKey="CREATED"; _order = 'SORT_DESC';}
const _query = {
...query,
orderEnum: _order
sortMap:{}
};
_query.sortMap[_columnKey]=_order;
this.props.onChange(_query);
}
handleRelatedModalShow = (item)=>{
const selectPlanList = {};
if(item.relatedPlanList){
item.relatedPlanList.map((item,index)=>{
selectPlanList[item.planId] = {}
selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{taskId:item.taskId}];
return item
})
}
this.setState({
RelatedPlanModalVisible:true,
selectCourseId:item.courseId,
selectPlanList:selectPlanList
})
}
closeRelatedPlanModalVisible = ()=>{
this.setState({
RelatedPlanModalVisible:false
})
}
onChangeSelectPlanList = (selectPlanList)=>{
this.setState({
selectPlanList:selectPlanList
})
}
onConfirmSelectPlanList = ()=>{
this.setState({
RelatedPlanModalVisible:false
},()=>{this.props.onChange();})
}
render() {
const { RelatedPlanModalVisible, selectCourseId, selectPlanList, openQRCodeModal, qrcodeData } = this.state;
const { openQRCodeModal, qrcodeData } = this.state;
const { dataSource = [], totalCount, query, match } = this.props;
const { current, size } = query;
return (
......@@ -477,16 +406,6 @@ class OfflineCourseList extends React.Component {
}}
/>
</div>
{RelatedPlanModalVisible &&
<RelatedPlanModal
onClose={this.closeRelatedPlanModalVisible}
visible={RelatedPlanModalVisible}
selectCourseId={selectCourseId}
selectPlanList={selectPlanList}
onChange={this.onChangeSelectPlanList}
onConfirm={this.onConfirmSelectPlanList}
/>
}
{this.state.shareLiveModal}
{this.state.previewOfflineModal}
<QRCodeModal
......
src/modules/course-manage/offline-course/modal/QRCodeModal.jsx
......@@ -100,13 +100,20 @@ export default class QRCodeModal extends React.Component {
render() {
const { visible, onCancel } = this.props;
const { selectedDate, data = {} } = this.state;
const { startTime, endTime, courseName, whetherSetSignIn, whetherSetSignOut } = data;
const { startTime, endTime, courseName, whetherSetSignIn, whetherSetSignOut, signInType, signOutType } = data;
const date = moment(selectedDate).format('YYYY-MM-DD');
const unit = (data.signInTimeUnit || '').toLocaleLowerCase() + 's';
const time = moment(data.startTime).subtract(data.signInTimeNum, unit);
const startUnit = (data.signOutStartTimeUnit || '').toLocaleLowerCase() + 's';
const time = moment(data.signInType == 'START_AGO' ? data.startTime : data.endTime).subtract(data.signInTimeNum, unit);
const signInTime = data.signInType == 'START_AGO' ? `${date} ${moment(time).format('HH:mm')} ~ ${date} ${moment(data.startTime).format('HH:mm')}` : `${date} ${moment(data.startTime).format('HH:mm')} ~ ${date} ${moment(time).format('HH:mm')}`;
const endUnit = (data.signOutEndTimeUnit || '').toLocaleLowerCase() + 's';
const start = moment(data.startTime).add(data.signOutStartTimeNum, startUnit);
const end = moment(data.endTime).add(data.signOutEndTimeNum, endUnit);
let startUnit = '';
let start = '';
if (data.signOutType === 'START_LATER') {
startUnit = (data.signOutStartTimeUnit || '').toLocaleLowerCase() + 's';
start = moment(data.startTime).add(data.signOutStartTimeNum, startUnit);
}
const signOutTime = data.signOutType === 'START_LATER' ? `${date} ${moment(start).format('HH:mm')} ~ ${date} ${moment(end).format('HH:mm')}` : `${date} ${moment(data.endTime).format('HH:mm')} ~ ${date} ${moment(end).format('HH:mm')}`;
return (
<Modal
title="考勤二维码"
......@@ -128,7 +135,7 @@ export default class QRCodeModal extends React.Component {
}}
>
{(data.calendarTime || []).map(item => (
<Option value={item}>{moment(item).format('MM月DD日')}</Option>
<Option value={item} key={item}>{moment(item).format('MM月DD日')}</Option>
))}
</Select>
<Button
......@@ -139,19 +146,19 @@ export default class QRCodeModal extends React.Component {
}}
>下载二维码</Button>
</div>
{whetherSetSignIn === 'YES' && <div className="image-box">
{whetherSetSignIn === 'YES' && <div className="image-box" key="1">
<img src="https://image.xiaomaiketang.com/xm/xYSpX2y6ri.png" className="image" />
<div className="title">签到二维码</div>
<div className="name">{courseName}</div>
<div className="qrcodeWrap" id="qrcodeWrap1"></div>
<div className="time">签到时间：{moment(selectedDate).format('YYYY-MM-DD')} {moment(time).format('HH:mm')} ~ {moment(selectedDate).format('YYYY-MM-DD')} {moment(data.endTime).format('HH:mm')}</div>
<div className="time">签到时间：{signInTime}</div>
</div>}
{whetherSetSignOut === 'YES' && <div className="image-box">
{whetherSetSignOut === 'YES' && <div className="image-box" key="2">
<img src="https://image.xiaomaiketang.com/xm/xYSpX2y6ri.png" className="image" />
<div className="title">签退二维码</div>
<div className="name">{courseName}</div>
<div className="qrcodeWrap" id="qrcodeWrap2"></div>
<div className="time">签退时间：{moment(selectedDate).format('YYYY-MM-DD')} {moment(start).format('HH:mm')} ~ {moment(selectedDate).format('YYYY-MM-DD')} {moment(end).format('HH:mm')}</div>
<div className="time">签退时间：{signOutTime}</div>
</div>}
</Modal>
)
......
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