Commit 389e6e2c authored by wangxuelai's avatar wangxuelai

''

parent 28459874
......@@ -14,6 +14,7 @@
"axios": "^0.18.0",
"babel-plugin-import": "^1.6.7",
"babel-polyfill": "^6.26.0",
"base64toblob": "^0.0.2",
"bizcharts": "^3.5.5",
"bizcharts-plugin-slider": "^2.1.1-beta.1",
"blueimp-md5": "^2.10.0",
......
This diff is collapsed.
......@@ -141,8 +141,8 @@ class ClockItem extends React.Component {
}
{clock.review[1].img && clock.review[1].img.length > 0 &&
<div className={pageStyle.teacherimgbox}>
{clock.review[1].img.map(ele => (
<img className={pageStyle.teacherimg} src={imagify(ele.src, 'image/resize,w_320/format,jpg/quality,q_50')} alt="" />
{clock.review[1].img.map((ele, index) => (
<img className={pageStyle.teacherimg} onClick={() => imgPreview(index, clock.review[1].img.filter(ele => ele.type == 'image'))} src={imagify(ele.src, 'image/resize,w_320/format,jpg/quality,q_50')} alt="" />
))}
</div>
}
......
import React from 'react';
import { connect } from 'dva';
import { Table, Button, Rate, Input, Switch, Modal } from 'antd';
import { Table, Button, Rate, Input, Switch, Modal, Icon } from 'antd';
import pageStyle from './commenteditorbox.less';
import { imagify } from '../../utils/index';
import { addShortWords } from '../../services/clockmgt';
......@@ -18,6 +18,10 @@ class CommentEditorBox extends React.Component {
}
componentWillUnmount() { // 卸载
}
goDrawImage = (clockDetail) => {
const { goDrawImage } = this.props;
goDrawImage(clockDetail);
}
render() {
const {
......@@ -42,10 +46,25 @@ class CommentEditorBox extends React.Component {
saveSubjectReviewTemplate,
tempScoreArr,
smallScoreChange,
commentBoxtype,
batchCommentImgObj,
closeDrawer,
gobackDraw,
delTeacherCommentImage,
clockdetail,
} = this.props;
return (
<div className={pageStyle.commenteditorbox} id="commenteditorbox" style={style}>
<div className={pageStyle.commenteditoroperatebox}>
{commentBoxtype == 2 && batchCommentImgObj && batchCommentImgObj.length > 0 &&
<div className={pageStyle.gobackdraw}>
<div onClick={() => gobackDraw()} >
<Icon type="left" className={pageStyle.gobackicon} />
<a href="javascript:;">返回涂鸦</a>
</div>
<Icon type="close" onClick={() => closeDrawer()} className={pageStyle.closeicon} />
</div>
}
<div className={pageStyle.starbox}>
<div className={pageStyle.startitle}>打分</div>
<Button type="primary" ghost onClick={totempUpdate}>修改打分模板</Button>
......@@ -89,13 +108,21 @@ class CommentEditorBox extends React.Component {
</div>
<div className={pageStyle.uploadimgbox}>
<div className={pageStyle.uploadimglist}>
{commentParams.common.img.map(ele => (
<img alt={ele.src} className={pageStyle.teacheruploadimg} src={imagify(ele.src)} />
{commentParams.common.img.map((ele, index) => (
<div className={pageStyle.uploadimgitem}>
<img alt={ele.src} className={pageStyle.teacheruploadimg} src={imagify(ele.src)} />
<div className={pageStyle.delmask} onClick={() => delTeacherCommentImage(index)}>删除</div>
</div>
))}
</div>
<div className={pageStyle.operatebox}>
<div className={pageStyle.uploadimg}><input type="file" id="teachercommentupload" className={pageStyle.fileuploadinput} onChange={commentuploadImg} accept="image/*" />添加图片</div>
<div className={pageStyle.uploadimg}>标记</div>
{commentBoxtype == 1 && clockdetail && JSON.parse(clockdetail.video).length > 0 && JSON.parse(clockdetail.video).filter(ele => ele.type == 'image').length > 0 &&
<div className={pageStyle.uploadimg} onClick={() => this.goDrawImage(clockdetail)}>标记</div>
}
{commentBoxtype == 3 && clockdetail && JSON.parse(clockdetail.video).length > 0 && JSON.parse(clockdetail.video).filter(ele => ele.type == 'image').length > 0 &&
<div className={pageStyle.uploadimg} onClick={() => this.goDrawImage(clockdetail)}>标记</div>
}
</div>
</div>
<div className={pageStyle.prztitle}>
......
.commenteditorbox {
// border-left: 1px solid rgba(0,0,0,0.05);
// border-bottom: 1px solid rgba(0,0,0,0.05);
.gobackdraw {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.gobackicon {
cursor: pointer;
color: #4DA1FF;
}
a {
color: #4DA1FF;
padding-left: 10px;
}
.closeicon {
cursor: pointer;
// color:
font-size: 16px;
}
}
.commenteditoroperatebox {
padding: 19px 0 0 0;
.starbox {
......@@ -76,12 +95,39 @@
margin-bottom: 18px;
.uploadimglist {
margin-bottom: 10px;
display: flex;
flex-wrap: nowrap;
}
.teacheruploadimg {
width: 100px;
height: 100px;
border-radius: 4px;
margin: 0 10px 10px 0;
.uploadimgitem {
width: 100px;
height: 100px;
border-radius: 4px;
margin: 0 10px 10px 0;
overflow: hidden;
position: relative;
&:hover {
.delmask {
bottom: 0;
}
}
.teacheruploadimg {
width: 100px;
height: 100px;
}
.delmask {
width: 100%;
position: absolute;
z-index: 2;
color: #fff;
background-color: rgba(0,0,0,0.5);
font-size: 14px;
left: 0;
bottom: -20px;
line-height: 20px;
text-align: center;
transition: 0.2s;
cursor: pointer;
}
}
.operatebox {
display: flex;
......
This diff is collapsed.
......@@ -296,4 +296,10 @@
background-color: #945AFC;
}
}
}
.finaldrawcanvas {
position: fixed;
left: 0;
top: -2000px;
z-index: 1000;
}
\ No newline at end of file
......@@ -257,6 +257,20 @@ class ClockMgt extends React.Component {
},
});
}
uploadDrawImgToOss = (file, callback, error) => {
const { dispatch } = this.props;
dispatch({
type: 'clockmgt/queryimagesignature',
payload: {
files: {
files: [file],
},
uploadtype: 'uploadDrawImgToOss',
success: callback,
error,
},
});
}
quickPrivitecommentSwitch = (checked) => {
const { dispatch } = this.props;
dispatch({
......@@ -424,7 +438,7 @@ class ClockMgt extends React.Component {
dispatch({
type: 'clockmgt/startSingleComment',
payload: {
clock,
clock: JSON.parse(JSON.stringify(clock)),
},
});
}
......@@ -626,6 +640,78 @@ class ClockMgt extends React.Component {
},
});
}
closeDrawImageModal = () => {
const { dispatch, tabIndex } = this.props;
dispatch({
type: 'clockmgt/closeDrawImageModal',
payload: {
tabIndex,
},
});
}
completeAllDraw = (arr) => {
const { dispatch } = this.props;
dispatch({
type: 'clockmgt/completeAllDraw',
payload: {
value: arr,
},
});
}
skipDraw = (arr) => {
const { dispatch } = this.props;
dispatch({
type: 'clockmgt/skipDraw',
payload: {
value: arr,
},
});
}
gobackDraw = () => {
const { dispatch } = this.props;
dispatch({
type: 'clockmgt/gobackDraw',
});
}
delQuickTeacherCommentImage = (index) => {
const { dispatch } = this.props;
dispatch({
type: 'clockmgt/delTeacherCommentImage',
payload: {
index,
type: 'quick',
},
});
}
delSingleTeacherCommentImage = (index) => {
const { dispatch } = this.props;
dispatch({
type: 'clockmgt/delTeacherCommentImage',
payload: {
index,
type: 'single',
},
});
}
delBatchTeacherCommentImage = (index) => {
const { dispatch } = this.props;
dispatch({
type: 'clockmgt/delTeacherCommentImage',
payload: {
index,
type: 'batch',
},
});
}
goDrawImage = (clockDetail) => {
const { tabIndex, dispatch } = this.props;
dispatch({
type: 'clockmgt/goDrawImage',
payload: {
clockDetail,
},
});
}
render() {
const {
themetype,
......@@ -669,8 +755,10 @@ class ClockMgt extends React.Component {
copyTempArr,
tempUpdateShow,
tempScoreArr,
// currentdrawImage,
drawImageShow,
commentBoxtype,
batchCommentImgObj,
singleClock,
} = this.props;
return (
<div className={`${pageStyle.classmgtcontainer} clockmgtcontainer`}>
......@@ -883,6 +971,10 @@ class ClockMgt extends React.Component {
closeTempUpdate={this.closeTempUpdate}
saveSubjectReviewTemplate={this.saveSubjectReviewTemplate}
tempScoreArr={tempScoreArr}
commentBoxtype={commentBoxtype}
delTeacherCommentImage={this.delQuickTeacherCommentImage}
clockdetail={tabCClockDetail}
goDrawImage={this.goDrawImage}
/>
<Row type="flex" justify="end" className={pageStyle.quickcommentbox}>
<Button type="primary" style={{ marginRight: '15px' }} onClick={this.quickCommentPost}>{quickCommentSubmiting ? '点评中...' : '提交点评'}</Button>
......@@ -899,8 +991,9 @@ class ClockMgt extends React.Component {
title="老师点评"
placement="right"
onClose={this.closeCommentDrawer}
// header={null}
visible={commentDrawerShow}
zIndex={1100}
zIndex={499}
mask={false}
width={600}
bodyStyle={{ paddingTop: '0' }}
......@@ -927,6 +1020,10 @@ class ClockMgt extends React.Component {
closeTempUpdate={this.closeTempUpdate}
saveSubjectReviewTemplate={this.saveSubjectReviewTemplate}
tempScoreArr={tempScoreArr}
commentBoxtype={commentBoxtype}
delTeacherCommentImage={this.delSingleTeacherCommentImage}
clockdetail={singleClock}
goDrawImage={this.goDrawImage}
/>
<Row type="flex" justify="end" className={pageStyle.quickcommentbox}>
<Button type="primary" style={{ marginRight: '15px' }} onClick={this.singleCommentPost} loading={singleCommentSubmiting}>{singleCommentSubmiting ? '点评中...' : '提交点评'}</Button>
......@@ -934,16 +1031,18 @@ class ClockMgt extends React.Component {
</Row>
</Drawer>
<Drawer
title="老师批量点评"
title={batchCommentImgObj.length == 0 ? '老师批量点评' : ''}
placement="right"
onClose={this.closeBatchCommentDrawer}
closable={batchCommentImgObj.length == 0}
visible={batchcommentDrawerShow}
zIndex={1100}
zIndex={499}
mask={false}
width={600}
bodyStyle={{ paddingTop: '0' }}
>
<CommentEditorBox
closeDrawer={this.closeBatchCommentDrawer}
commentParams={batchCommentParams}
privitecommentOpen={batchPrivitecommentOpen}
contentChange={this.batchContentChange}
......@@ -965,6 +1064,10 @@ class ClockMgt extends React.Component {
closeTempUpdate={this.closeTempUpdate}
saveSubjectReviewTemplate={this.saveSubjectReviewTemplate}
tempScoreArr={tempScoreArr}
commentBoxtype={commentBoxtype}
batchCommentImgObj={batchCommentImgObj}
gobackDraw={this.gobackDraw}
delTeacherCommentImage={this.delBatchTeacherCommentImage}
/>
<Row type="flex" justify="end" className={pageStyle.quickcommentbox}>
<Button type="primary" style={{ marginRight: '15px' }} onClick={this.batchCommentPost}>{batchCommentSubmiting ? '点评中...' : '提交点评'}</Button>
......@@ -988,6 +1091,12 @@ class ClockMgt extends React.Component {
<BackTop style={{ right: '10px' }} />
<DrawImg
batchCommentImgObj={batchCommentImgObj}
uploadImage={this.uploadDrawImgToOss}
visible={drawImageShow}
closeModal={this.closeDrawImageModal}
completeAllDraw={this.completeAllDraw}
skipDraw={this.skipDraw}
tabIndex={tabIndex}
/>
</div>
);
......@@ -1043,6 +1152,8 @@ function mapStateToProps(state) {
tempScoreArr,
currentdrawImage,
batchCommentImgObj,
drawImageShow,
commentBoxtype,
} = state.clockmgt;
const {
audio,
......@@ -1093,6 +1204,8 @@ function mapStateToProps(state) {
tempScoreArr,
currentdrawImage,
batchCommentImgObj,
drawImageShow,
commentBoxtype,
};
}
export default connect(mapStateToProps)(ClockMgt);
......
......@@ -1949,6 +1949,10 @@ base64-js@^1.0.2:
version "1.3.1"
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
base64toblob@^0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/base64toblob/-/base64toblob-0.0.2.tgz#16453f87fbe3447ce14edbbe285b46c70b9811b5"
base@^0.11.1:
version "0.11.2"
resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
......
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