Skip to content

B
biz.qingxiao.com
Commit e7ada6d0 authored by wangxuelai's avatar wangxuelai
Browse files
Options

''

parent ab3abbcd
Hide whitespace changes
Inline Side-by-side
Showing with 665 additions and 40 deletions
src/components/MaterialModal.js
View file @ e7ada6d0
......@@ -90,8 +90,8 @@ class MaterialModalForm extends React.Component {
renderItem={item => (
<List.Item>
<div className={pageStyle.item}>
<Radio value={item.src}>
<img className={pageStyle.img} src={imagify(item.src)} alt="" />
<Radio value={item}>
{item.type == 1 && <img className={pageStyle.img} src={imagify(item.src)} alt="" />}
</Radio>
</div>
</List.Item>
......
src/components/UploadCourseware.js 0 → 100644
View file @ e7ada6d0
import { connect } from 'dva';
import React from 'react';
import { Button, Row, Icon, Col, Input, Select, Pagination, Radio, DatePicker, Modal, Form, TimePicker, InputNumber, Table } from 'antd';
import pageStyle from './UploadCourseware.less';
import { pageIn } from '../utils/index';
const { Option } = Select;
const { TextArea } = Input;
const { Group } = Radio;
class UploadCourseware extends React.Component {
componentDidMount() { // 挂载
}
componentDidUpdate() {
}
componentWillUnmount() { // 卸载
}
uploadCourseMateria = (e) => {
const { dispatch, callback } = this.props;
dispatch({
type: 'uploadcourseware/querysignature',
payload: {
files: e.target.files,
successCallBack(values) {
document.getElementById('uploadcourseware').value = '';
},
},
});
}
save = () => {
const { info, dispatch, callback } = this.props;
callback(JSON.parse(JSON.stringify(info)));
dispatch({
type: 'uploadcourseware/updateState',
payload: {
visible: false,
info: {},
},
});
}
hide = () => {
const { dispatch } = this.props;
dispatch({
type: 'uploadcourseware/updateState',
payload: {
visible: false,
info: {},
},
});
}
delCourseware = () => {
const { dispatch, delCourseware } = this.props;
dispatch({
type: 'uploadcourseware/updateState',
payload: {
info: {},
},
});
delCourseware();
}
render() {
const {
visible,
info,
chooseFromCourseMateria,
} = this.props;
return (
<Modal
visible={visible}
title="添加课件"
okText="保存"
onCancel={this.hide}
onOk={this.save}
className="UploadCoursewareContent"
// confirmLoading={callStudentSubmitting}
zIndex={110}
maskClosable={false}
width={600}
>
<div className={pageStyle.uploadBox} style={{ display: !info.src ? 'block' : 'none' }}>
<div className={pageStyle.uploadBoxTitle}>可将文件直接拖拽到此处上传或者点击上传</div>
<div className={pageStyle.filetypebox}>
<input
type="file"
className={pageStyle.uploadInput}
accept=".ppt, image/*, application/vnd.ms-powerpoint, video/mp4, application/pdf, audio/*"
onChange={this.uploadCourseMateria}
id="uploadcourseware"
/>
<div className={pageStyle.boxotem}>
<img src={`${__IMGCDN__}course/ppt.png`} alt="" />
<div className={pageStyle.boxotemname}>支持ppt</div>
</div>
<div className={pageStyle.boxotem}>
<img src={`${__IMGCDN__}course/mp4.png`} alt="" />
<div className={pageStyle.boxotemname}>支持mp4</div>
</div>
<div className={pageStyle.boxotem}>
<img src={`${__IMGCDN__}course/pdf.png`} alt="" />
<div className={pageStyle.boxotemname}>支持pdf</div>
</div>
</div>
</div>
<div className={pageStyle.uploadBox} style={{ display: info.src ? 'block' : 'none' }}>
{info.type == 1 &&
<div>图片</div>
}
{info.type == 2 &&
<div>视频</div>
}
{info.type == 3 &&
<div>录音</div>
}
{info.type == 4 &&
<div>文件</div>
}
</div>
<div className={pageStyle.uploadbottom}>
<div className={pageStyle.left}>
<div className={pageStyle.uploaddesc}>PPT/PPTX/PDF，大小≦**MB</div>
<div className={pageStyle.uploaddesc}>MOV/MP4格式，大小≦**MB</div>
</div>
<div className={pageStyle.right}>
<div className={pageStyle.btn} onClick={chooseFromCourseMateria}>
<img src={`${__IMGCDN__}course/check.png`} alt="" className={`${pageStyle.btnicon} ${pageStyle.leftbtnicon}`} />
<span>素材库</span>
</div>
{info.src &&
<div className={pageStyle.delbtn} onClick={this.delCourseware}>
<Icon type="delete" className={pageStyle.delIcon} />
<span className={pageStyle.delText}>删除</span>
</div>
}
{/* <div className={pageStyle.btn}>
<img src={`${__IMGCDN__}course/uploadImg.png`} alt="" className={`${pageStyle.btnicon} ${pageStyle.rightbtnicon}`} />
<span>上传</span>
</div> */}
</div>
</div>
</Modal>
);
}
}
function mapStateToProps(state) {
const {
visible,
info,
} = state.uploadcourseware;
return {
visible,
info,
};
}
export default connect(mapStateToProps)(UploadCourseware);
src/components/UploadCourseware.less 0 → 100644
View file @ e7ada6d0
:global {
.UploadCoursewareContent {
.ant-modal-header {
border-bottom: none;
}
}
}
.uploadBox {
width: 100%;
height: 254px;
border-radius: 10px;
border:2px dashed rgba(194,194,194,1);
margin: 0 auto;
.uploadBoxTitle {
color: #575757;
font-size: 16px;
text-align: center;
line-height: 1;
padding: 35px 0 60px 0;
}
.filetypebox {
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
.boxotem {
img {
display: block;
width: 59px;
height: 67px;
margin-bottom: 8px;
}
.boxotemname {
text-align: center;
font-size: 12px;
color: #575757;
line-height: 1;
}
}
}
}
.uploadbottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 24px;
.left {
.uploaddesc {
color: #575757;
font-size: 12px;
line-height: 20px;
}
}
.right {
display: flex;
.btn {
background-color: #F9F9F9;
border-radius: 6px;
width: 94px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.btnicon {
display: block;
&.leftbtnicon {
width: 23px;
height: 22px;
margin-right: 11px;
}
&.rightbtnicon {
width: 23px;
height: 25px;
margin-right: 14px;
}
}
span {
color: #575757;
font-size: 14px;
}
}
}
.delbtn {
height: 43px;
display: flex;
align-items: center;
margin-left: 21px;
cursor: pointer;
.delIcon {
margin-right: 13px;
color: #FA4F53;
font-size: 20px;
}
.delText {
color: #FA4F53;
font-size: 14px;
}
}
}
\ No newline at end of file
src/models/coursemateria.js
View file @ e7ada6d0
......@@ -146,7 +146,7 @@ export default {
fileType,
},
filename,
type: getFileType(fileType),
type: getFileType(fileType).filetype,
uploaderLoading,
},
});
......
src/models/index.js
View file @ e7ada6d0
......@@ -43,6 +43,7 @@ import onlineclassesModal from './onlineclasses';
import coursegatherindex from './coursegatherindex';
import coursemateria from './coursemateria';
import coursegatherdetail from './coursegatherdetail';
import uploadcourseware from './uploadcourseware';
export default {
loginModel,
indexstaicModel,
......@@ -80,4 +81,5 @@ export default {
coursemateria,
coursegatherindex,
coursegatherdetail,
uploadcourseware,
};
src/models/onlineclasses.js
View file @ e7ada6d0
......@@ -10,6 +10,7 @@ import {
} from '../utils/index';
import errorcode from '../common/errorcode';
import * as onlineAjax from '../services/onlineclasses';
import * as courseMateriaAjax from '../services/courseMateria';
import * as uploader from '../services/uploader';
export default {
namespace: 'onlineclasses',
......@@ -39,13 +40,58 @@ export default {
addLoading: false,
editLoading: false,
materialVisible: false,
materialVisible2: false,
courseChartData: {},
coursewareInfo: {},
queryParams: {
type: '',
page: 1,
perPage: 20,
},
materiaList: [],
materiaListTotal: 0,
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
* querymaterialist({ payload }, { call, put, select }) {
const { params } = payload;
const { queryParams } = yield select(state => state.coursemateria);
const { sid } = yield select(state => state.webapp);
const querymaterialistData = yield call(courseMateriaAjax.getMateriaList, {
school_id: sid,
...queryParams,
...params,
});
const { code, msg, data } = querymaterialistData;
if (data.total != undefined) {
yield put({
type: 'updateState',
payload: {
materiaListTotal: data.total,
},
});
}
if (code == 200) {
yield put({
type: 'updateState',
payload: {
materiaList: data.list,
queryParams: {
...queryParams,
...params,
},
},
});
} else {
message.error(msg, 1);
}
yield put({
type: 'updateState',
});
},
* selectCourseList({ payload }, { call, put, select }) {
const { params } = payload;
const { sid } = yield select(state => state.webapp);
......@@ -150,6 +196,7 @@ export default {
audio: data.data.audio,
content: data.data.content,
},
coursewareInfo: JSON.parse(data.data.content),
},
});
yield put({
......@@ -233,7 +280,7 @@ export default {
},
* editCourse({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const { editLoading, addCourseObj } = yield select(state => state.onlineclasses);
const { editLoading, addCourseObj, coursewareInfo } = yield select(state => state.onlineclasses);
if (editLoading) {
return;
}
......@@ -259,9 +306,7 @@ export default {
start_time,
study_count,
school_id: sid,
content: JSON.stringify([
{ type: 'mp4', value: 'clock_video-test/member/12351/2019-11-20/fa939b56ae68b1b0e35734a29284778f' },
]),
content: JSON.stringify(coursewareInfo),
});
const data = yield call(onlineAjax.editCourse, newParams);
yield put({
......
src/models/uploadcourseware.js 0 → 100644
View file @ e7ada6d0
import lodash from 'lodash';
import { routerRedux } from 'dva/router';
import queryString from 'query-string';
import { message } from 'antd';
import * as uploader from '../services/uploader';
import * as courseMateriaAjax from '../services/courseMateria';
import errorcode from '../common/errorcode';
import { getRandomFilename, getFileType, imagify, videoPoster, LocalStorage } from '../utils/index';
export default {
namespace: 'uploadcourseware',
state: {
visible: false,
info: {},
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
* querysignature({ payload }, { call, put, select }) {
const { userInfo, sid } = yield select(state => state.webapp);
const {
files,
successCallBack,
} = payload;
const file = files ? files[0] : null;
if (!file) {
message.error('上传失败', 1);
return;
}
const { name, size, type: fileType } = file;
const typeObject = getFileType(fileType);
let ajax = null;
let params = null;
switch (typeObject.fileSmalltype) {
case 1: // 图片
ajax = uploader.uploadImageSignature;
params = { type: 1, token: userInfo.token, schoolId: sid };
break;
case 2: // 视频
ajax = uploader.uploadVideoSignature;
params = { type: 1, token: userInfo.token, schoolId: sid };
break;
case 3: // 录音
ajax = uploader.uploadVideoSignature;
params = { type: 2, token: userInfo.token, schoolId: sid };
break;
case 4: // ppt
ajax = uploader.uploadVideoSignature;
params = { type: 3, token: userInfo.token, schoolId: sid };
break;
case 5: // pdf
ajax = uploader.uploadVideoSignature;
params = { type: 4, token: userInfo.token, schoolId: sid };
break;
default:
break;
}
if (!ajax || !params) {
return;
}
let signature = {};
const uploaderLoading = message.loading('课件上传中...');
const uploadSignature = yield call(ajax, params);
signature = uploadSignature.data;
if (uploadSignature.code == 200) {
yield put({
type: 'uploadFile',
payload: {
signature,
successCallBack,
file,
uploaderLoading,
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data: uploadSignature,
},
});
}
},
* uploadFile({ payload }, { call, put }) {
const {
signature,
file,
successCallBack,
uploaderLoading,
} = payload;
const filename = `${signature.dir}${getRandomFilename(file.name)}`;
const { name, size, type: fileType } = file;
const params = {
key: filename,
policy: signature.policy,
OSSAccessKeyId: signature.accessid,
signature: signature.signature,
file,
url: signature.host,
};
const uploadFileData = yield call(uploader.uploadImg, params);
setTimeout(uploaderLoading);
yield put({
type: 'createCourseMateria',
payload: {
content: {
name,
size,
fileType,
},
filename,
type: getFileType(fileType).filetype,
},
});
yield put({
type: 'updateState',
payload: {
info: JSON.parse(JSON.stringify({
properties: {
name,
size,
fileType,
},
images: [],
src: filename,
fileType,
type: getFileType(fileType).filetype,
mediaType: getFileType(fileType).fileSmalltype,
})),
},
});
if (successCallBack && (typeof successCallBack == 'function')) {
successCallBack({
// src: filename,
// properties: {
// name,
// size,
// fileType,
// },
// fileType,
// images: [],
});
}
},
* createCourseMateria({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const {
content, filename, type,
} = payload;
yield call(courseMateriaAjax.createMateria, {
school_id: sid,
type,
src: filename,
content: JSON.stringify(content),
});
},
},
reducers: {
updateState(state, { payload }) {
return {
...state,
...payload,
};
},
},
};
src/pages/coursegather/detail/StaticBox.js
View file @ e7ada6d0
......@@ -28,7 +28,7 @@ class StaticBox extends React.Component {
resetStaticTotal,
searchStaticChart,
resetStaticChart,
staticChartInfo,
staticChartInfo, // 图表数据
queryChartParams,
dateChange,
} = this.props;
......
src/pages/onlineclasses/singleclass/CourseDetail.js
View file @ e7ada6d0
......@@ -193,7 +193,7 @@ class CourseDetailForm extends React.Component {
},
});
dispatch({
type: 'coursemateria/querymaterialist',
type: 'onlineclasses/querymaterialist',
payload: {
params: {
type: 1,
......@@ -211,21 +211,21 @@ class CourseDetailForm extends React.Component {
materialVisible: false,
},
});
dispatch({
type: 'coursemateria/querymaterialist',
payload: {
params: {
type: '',
page: 1,
perPage: 20,
},
},
});
// dispatch({
// type: 'onlineclasses/querymaterialist',
// payload: {
// params: {
// type: '',
// page: 1,
// perPage: 20,
// },
// },
// });
}
changeListPagination = (values) => {
const { dispatch } = this.props;
dispatch({
type: 'coursemateria/querymaterialist',
type: 'onlineclasses/querymaterialist',
payload: {
params: {
type: 1,
......@@ -240,17 +240,29 @@ class CourseDetailForm extends React.Component {
dispatch({
type: 'onlineclasses/updateCover',
payload: {
values,
values: {
checkValue: values.checkValue.src,
},
},
});
// dispatch({
// type: 'onlineclasses/querymaterialist',
// payload: {
// params: {
// type: '',
// page: 1,
// perPage: 20,
// },
// },
// });
}
toUploadCourseware = () => {
const { dispatch, coursewareInfo } = this.props;
dispatch({
type: 'coursemateria/querymaterialist',
type: 'uploadcourseware/updateState',
payload: {
params: {
type: '',
page: 1,
perPage: 20,
},
visible: true,
info: { ...coursewareInfo },
},
});
}
......@@ -263,6 +275,7 @@ class CourseDetailForm extends React.Component {
materiaList,
queryParams,
materiaListTotal,
coursewareInfo,
} = this.props;
const formItemModalLineLayout = {
labelCol: {
......@@ -361,6 +374,10 @@ class CourseDetailForm extends React.Component {
placeholder="选择时间"
/>)}
</FormItem>
<div>
<span>课件:</span>
<span>{(coursewareInfo.properties && coursewareInfo.properties.name) || '无'}</span>
</div>
<FormItem {...formItemModalLineLayout} label="语音介绍">
{
addCourseObj.audio ?
......@@ -394,7 +411,7 @@ class CourseDetailForm extends React.Component {
<FormItem {...formItemModalLineLayout}>
<Button loading={editLoading} type="primary" htmlType="submit" style={{ marginRight: 20 }}>保存</Button>
<Button style={{ marginRight: 20 }}>预览</Button>
<Button>上传课件</Button>
<Button onClick={this.toUploadCourseware}>上传课件</Button>
</FormItem>
</Form>
<MaterialModal
......@@ -420,12 +437,16 @@ function mapStateToProps(state) {
addCourseObj,
editLoading,
materialVisible,
} = state.onlineclasses;
const {
coursewareInfo,
materiaList,
queryParams,
materiaListTotal,
} = state.coursemateria;
} = state.onlineclasses;
// const {
// materiaList,
// queryParams,
// materiaListTotal,
// } = state.coursemateria;
return {
addCourseObj,
editLoading,
......@@ -433,6 +454,7 @@ function mapStateToProps(state) {
materiaList,
queryParams,
materiaListTotal,
coursewareInfo,
};
}
export default connect(mapStateToProps)(CourseDetail);
......
src/pages/onlineclasses/singleclass/singleDetail.js
View file @ e7ada6d0
......@@ -18,10 +18,12 @@ import {
} from 'antd';
import moment from 'moment';
import pageStyle from './singleDetail.less';
import { pageIn, hasBtnPower, imagify } from '../../../utils';
import { pageIn, hasBtnPower, imagify, getFileType } from '../../../utils';
import CourseDetail from './CourseDetail';
import CommentList from './CommentList';
import StaticBox from './StaticBox';
import UploadCourseware from '../../../components/UploadCourseware';
import MaterialModal from '../../../components/MaterialModal';
const { TabPane } = Tabs;
const FormItem = Form.Item;
const { Option } = Select;
......@@ -50,10 +52,102 @@ class singleDetailForm extends React.Component {
},
});
}
uploadCourseware = (values) => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/updateState',
payload: {
coursewareInfo: { ...values },
},
});
}
delCourseware = () => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/updateState',
payload: {
coursewareInfo: {},
},
});
}
materialClose2 = () => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/updateState',
payload: {
materialVisible2: false,
},
});
}
materialSave2 = (values) => {
const { dispatch } = this.props;
const { checkValue } = values;
dispatch({
type: 'onlineclasses/updateState',
payload: {
materialVisible2: false,
},
});
dispatch({
type: 'uploadcourseware/updateState',
payload: {
info: JSON.parse(JSON.stringify({
properties: JSON.parse(checkValue.content),
images: [],
src: checkValue.src,
fileType: JSON.parse(checkValue.content).fileType,
type: getFileType(JSON.parse(checkValue.content).fileType).filetype,
mediaType: getFileType(JSON.parse(checkValue.content).fileType).fileSmalltype,
})),
},
});
// dispatch({
// type: 'onlineclasses/updateCover',
// payload: {
// values,
// },
// });
}
changeListPagination2 = (values) => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/querymaterialist',
payload: {
params: {
type: 1,
page: values.page,
perPage: values.perPage,
},
},
});
}
chooseFromCourseMateria = () => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/updateState',
payload: {
materialVisible2: true,
},
});
dispatch({
type: 'onlineclasses/querymaterialist',
payload: {
params: {
type: '',
page: 1,
perPage: 20,
},
},
});
}
render() {
const {
form: { getFieldDecorator, getFieldValue },
addCourseObj,
materiaList,
materiaListTotal,
queryParams,
materialVisible2,
} = this.props;
const formItemModalLineLayout = {
labelCol: {
......@@ -99,7 +193,20 @@ class singleDetailForm extends React.Component {
<CommentList />
</TabPane>
</Tabs>
<UploadCourseware
callback={this.uploadCourseware}
delCourseware={this.delCourseware}
chooseFromCourseMateria={this.chooseFromCourseMateria}
/>
<MaterialModal
visible={materialVisible2}
close={this.materialClose2}
list={materiaList}
queryParams={queryParams}
total={materiaListTotal}
changePagination={this.changeListPagination2}
save={this.materialSave2}
/>
</div>
);
}
......@@ -112,9 +219,17 @@ const singleDetail = Form.create()(singleDetailForm);
function mapStateToProps(state) {
const {
addCourseObj,
materialVisible2,
materiaList,
materiaListTotal,
queryParams,
} = state.onlineclasses;
return {
addCourseObj,
materialVisible2,
materiaList,
materiaListTotal,
queryParams,
};
}
export default connect(mapStateToProps)(singleDetail);
......
src/utils/index.js
View file @ e7ada6d0
......@@ -776,17 +776,27 @@ function getWeekDay(day) {
}
function getFileType(type) {
let filetype = '';
let fileSmalltype = '';
if (/video/.test(type)) {
filetype = 2;
filetype = 2; // 视频
fileSmalltype = 2;
} else if (/audio/.test(type)) {
filetype = 3;
} else if (/image/.test(type)) {
filetype = 1;
} else {
filetype = 3; // 录音
fileSmalltype = 3;
} else if (/image/.test(type)) { // 图片
filetype = 1; // 图片
fileSmalltype = 1;
} else if (type == 'application/vnd.ms-powerpoint') { // ppt + pdf
filetype = 4;
fileSmalltype = 4; // ppt
} else if (type == 'application/pdf') {
filetype = 4;
fileSmalltype = 5; // pdf
}
console.log(filetype, 'type');
return filetype;
return {
filetype,
fileSmalltype,
};
}
export {
pageIn,
......
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