Skip to content

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

feat:初始化

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