Skip to content

B
biz.qingxiao.com
Commit 179bd7e0 authored by baixian's avatar baixian
Browse files
Options

复制

parent 734ef405
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 529 additions and 144 deletions
src/common/menuconfig.js
View file @ 179bd7e0
......@@ -37,7 +37,7 @@ export default {
activeurl: `${__IMGCDN__}menu/classactive.png`,
notactiveurl: `${__IMGCDN__}menu/class.png`,
path: '/sjd/classmgt',
relativePath: ['/sjd/classmgt', '/sjd/classdetail/:classid'],
relativePath: ['/sjd/classmgt', '/sjd/classdetail/:classid', '/sjd/newtheme/jobclock/:id', '/sjd/newtheme/calendarclock/:id', '/sjd/newtheme/jobclock/:id/:isCopy', '/sjd/newtheme/calendarclock/:id/:isCopy'],
},
{
id: '4',
......
src/models/createtheme.js
View file @ 179bd7e0
This diff is collapsed.
src/models/webapp.js
View file @ 179bd7e0
......@@ -482,6 +482,160 @@ export default {
},
});
}
const jobClockActive = pathToRegexp('/sjd/newtheme/jobclock/:id').exec(pathname);
if (jobClockActive) {
dispatch({
type: 'createtheme/createThemeModalFind',
payload: {
id: jobClockActive[1],
},
});
dispatch({
type: 'createtheme/queryClassList',
payload: {
},
});
dispatch({
type: 'createtheme/pageInit',
payload: {
},
});
dispatch({
type: 'webapp/updateState',
payload: {
breadcrumbList: [
{
path: 'sjd/classmgt',
name: '班级管理',
},
{
path: pathname,
name: '主题管理',
},
{
path: pathname,
name: '编辑作业打卡',
},
],
},
});
}
const jobClockCopyActive = pathToRegexp('/sjd/newtheme/jobclock/:id/:isCopy').exec(pathname);
if (jobClockCopyActive) {
dispatch({
type: 'createtheme/createThemeModalFind',
payload: {
id: jobClockCopyActive[1],
isCopy: jobClockCopyActive[2],
},
});
dispatch({
type: 'createtheme/queryClassList',
payload: {
},
});
dispatch({
type: 'createtheme/pageInit',
payload: {
},
});
dispatch({
type: 'webapp/updateState',
payload: {
breadcrumbList: [
{
path: 'sjd/classmgt',
name: '班级管理',
},
{
path: pathname,
name: '主题管理',
},
{
path: pathname,
name: '复制作业打卡',
},
],
},
});
}
const CalendarClockActive = pathToRegexp('/sjd/newtheme/calendarclock/:id').exec(pathname);
if (CalendarClockActive) {
dispatch({
type: 'createtheme/createThemeModalFind',
payload: {
id: CalendarClockActive[1],
},
});
dispatch({
type: 'createtheme/queryClassList',
payload: {
},
});
dispatch({
type: 'createtheme/pageInit',
payload: {
},
});
dispatch({
type: 'webapp/updateState',
payload: {
breadcrumbList: [
{
path: 'sjd/classmgt',
name: '班级管理',
},
{
path: pathname,
name: '主题管理',
},
{
path: pathname,
name: '编辑日历打卡',
},
],
},
});
}
const CalendarClockCopyActive = pathToRegexp('/sjd/newtheme/calendarclock/:id/:isCopy').exec(pathname);
if (CalendarClockCopyActive) {
dispatch({
type: 'createtheme/createThemeModalFind',
payload: {
id: CalendarClockCopyActive[1],
isCopy: CalendarClockCopyActive[2],
},
});
dispatch({
type: 'createtheme/queryClassList',
payload: {
},
});
dispatch({
type: 'createtheme/pageInit',
payload: {
},
});
dispatch({
type: 'webapp/updateState',
payload: {
breadcrumbList: [
{
path: 'sjd/classmgt',
name: '班级管理',
},
{
path: pathname,
name: '主题管理',
},
{
path: pathname,
name: '复制作业打卡',
},
],
},
});
}
const clockmgtactive = pathToRegexp('/sjd/clockmgt/:themetype/:classid/:themeid').exec(pathname);
if (clockmgtactive) {
dispatch({
......
src/pages/newtheme/ThemeEditor.js
View file @ 179bd7e0
......@@ -3,6 +3,7 @@ import React from 'react';
import { Icon, Divider, Tabs, Select, Form, Upload, Row, Col, Input, Radio, Modal, message } from 'antd';
import pageStyle from './ThemeEditor.less';
import { pageIn, hasBtnPower, imagify, ossVideofy } from '../../utils/index';
import upImg from '../../../image/subjectUp.png';
const { TabPane } = Tabs;
const { TextArea } = Input;
class ThemeEditor extends React.Component {
......@@ -31,10 +32,6 @@ class ThemeEditor extends React.Component {
previewVisible: false,
});
}
change = (e, index) => {
console.log(e.target.value, 'textValue12');
console.log(index, 'index');
}
render() {
const { previewVisible, previewImage } = this.state;
const {
......@@ -46,40 +43,64 @@ class ThemeEditor extends React.Component {
deleteThemeVideo,
editorText,
editorAddText,
moveContent,
} = this.props;
return (
<div className={pageStyle.container}>
{commentParams.content.map((item, index) => (
item.type === 'text' &&
<div className={pageStyle.textWrap}>
<TextArea autosize={{ minRows: 4, maxRows: 10 }} value={item.value} onChange={e => editorChange(e, index)} placeholder="请输入内容" style={{ width: 560 }} maxLength={500} />
<div className={pageStyle.sizeNumber}>{item.value.length}/500</div>
<div onClick={() => deleteThemeImg(index)} className={pageStyle.delete}><Icon type="close-circle" theme="filled" /></div>
</div>
))}
<div className={pageStyle.editorwrap}>
<div className={pageStyle.uploadimgbox}>
{commentParams.content.map((item, index) => (
item.type === 'img' &&
<div className={pageStyle.imgwrap}>
<img alt={item.type} className={pageStyle.teacheruploadimg} src={imagify(item.value)} />
<div className={pageStyle.imghide}>
<a title="预览文件" onClick={() => this.priviewImg(item.value)} href="javascript:;" ><Icon style={{ color: '#fff' }} type="eye" /> 预览</a>
<Divider type="vertical" />
<a title="删除文件" onClick={() => deleteThemeImg(index)} href="javascript:;"> <Icon style={{ color: '#fff' }} type="delete" />删除</a>
</div>
</div>
))}
{commentParams.content.map((item, index) => (
item.type === 'video' &&
<div className={pageStyle.videowrap}>
<video controls="controls" className={pageStyle.videoPoster} src={ossVideofy(item.value)} />
<div className={pageStyle.videohide}>
<a title="删除文件" onClick={() => deleteThemeImg(index)} href="javascript:;"> <Icon style={{ color: '#fff' }} type="delete" />删除</a>
</div>
</div>
))}
</div>
{/* eslint-disable-next-line array-callback-return,consistent-return */}
{commentParams.content.map((item, index) => {
// eslint-disable-next-line default-case
switch (item.type) {
case 'text':
return (
<div className={pageStyle.textWrap}>
<TextArea autosize={{ minRows: 4, maxRows: 10 }} value={item.value} onChange={e => editorChange(e, index)} placeholder="请输入内容" style={{ width: 560 }} maxLength={500} />
<div className={pageStyle.sizeNumber}>{item.value.length}/500</div>
<div className={pageStyle.toolList}>
{ index === 0 && <div aria-disabled="true" className={pageStyle.noup}><img src={upImg} alt="" /> </div> }
{ index > 0 && <div className={pageStyle.up} onClick={() => moveContent(index, 'up')}><img src={upImg} alt="" /> </div> }
{ index === (commentParams.content.length - 1) && <div className={pageStyle.nodown}><img src={upImg} alt="" /> </div> }
{ index < (commentParams.content.length - 1) && <div className={pageStyle.down} onClick={() => moveContent(index, 'down')}><img src={upImg} alt="" /> </div> }
<div className={pageStyle.delete} onClick={() => deleteThemeImg(index)}><Icon type="delete" theme="filled" /></div>
</div>
</div>
);
case 'img':
return (
<div className={pageStyle.uploadimgbox}>
<div className={pageStyle.imgwrap}>
<img alt={item.type} className={pageStyle.teacheruploadimg} src={imagify(item.value)} />
<div className={pageStyle.imghide}>
<a title="预览文件" onClick={() => this.priviewImg(item.value)} href="javascript:;" ><Icon style={{ color: '#fff' }} type="eye" /> 预览</a>
</div>
<div className={pageStyle.toolList}>
{ index === 0 && <div aria-disabled="true" className={pageStyle.noup}><img src={upImg} alt="" /> </div> }
{ index > 0 && <div className={pageStyle.up} onClick={() => moveContent(index, 'up')}><img src={upImg} alt="" /> </div> }
{ index === (commentParams.content.length - 1) && <div className={pageStyle.nodown}><img src={upImg} alt="" /> </div> }
{ index < (commentParams.content.length - 1) && <div className={pageStyle.down} onClick={() => moveContent(index, 'down')}><img src={upImg} alt="" /> </div> }
<div className={pageStyle.delete} onClick={() => deleteThemeImg(index)}><Icon type="delete" theme="filled" /></div>
</div>
</div>
</div>
);
case 'video':
return (
<div className={pageStyle.videowrap}>
<video controls="controls" className={pageStyle.videoPoster} src={ossVideofy(item.value)} />
<div className={pageStyle.toolList}>
{ index === 0 && <div aria-disabled="true" className={pageStyle.noup}><img src={upImg} alt="" /> </div> }
{ index > 0 && <div className={pageStyle.up} onClick={() => moveContent(index, 'up')}><img src={upImg} alt="" /> </div> }
{ index === (commentParams.content.length - 1) && <div className={pageStyle.nodown}><img src={upImg} alt="" /> </div> }
{ index < (commentParams.content.length - 1) && <div className={pageStyle.down} onClick={() => moveContent(index, 'down')}><img src={upImg} alt="" /> </div> }
<div className={pageStyle.delete} onClick={() => deleteThemeImg(index)}><Icon type="delete" theme="filled" /></div>
</div>
</div>
);
}
},
)}
</div>
<div className={pageStyle.uploadflex}>
<div className={pageStyle.uploadimg} onClick={editorAddText}><Icon style={{ marginRight: 10 }} type="font-size" />添加文字</div>
......
src/pages/newtheme/ThemeEditor.less
View file @ 179bd7e0
......@@ -2,6 +2,7 @@
width: 560px;
height: auto;
position: relative;
margin-bottom:10px;
:global {
.ant-input {
padding: 6px 15px 20px;
......@@ -12,31 +13,55 @@
bottom: 8px;
right: 10px;
}
.delete {
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
color:#FF7373;
:global {
.anticon {
font-size: 20px;
}
}
}
}
.editorwrap {
width: 563px;
margin-top: 15px;
.videowrap {
width: 100%;
height: 120px;
position: relative;
margin-bottom: 10px;
.videoPoster {
width: 100%;
height: 100%;
}
}
.videowrap:hover {
cursor: pointer;
.videohide {
opacity: 1;
background-color: rgba(0,0,0,0.5);
transition: all .3s;
z-index: 1;
color: #fff;
}
}
.videohide {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
color: #fff;
z-index: -1;
a {
color: #fff;
}
}
.uploadimgbox {
display: flex;
align-items: flex-end;
margin-bottom: 18px;
flex-wrap: wrap;
.imgwrap {
width: 135px;
height: 135px;
width: 100%;
height: 120px;
border-radius: 4px;
margin-right: 6px;
position: relative;
......@@ -75,41 +100,6 @@
.teacheruploadimg:nth-child(4n){
margin-right: 0;
}
.videowrap {
width: 150px;
height: 150px;
position: relative;
.videoPoster {
width: 100%;
height: 100%;
}
}
.videowrap:hover {
cursor: pointer;
.videohide {
opacity: 1;
background-color: rgba(0,0,0,0.5);
transition: all .3s;
z-index: 1;
color: #fff;
}
}
.videohide {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
color: #fff;
z-index: -1;
a {
color: #fff;
}
}
}
}
......@@ -139,3 +129,48 @@
}
}
}
.toolList {
position: absolute;
right: -30px;
top: 0;
width: 30px;
height: 90px;
display: flex;
flex-direction: column;
background-color: #D3D3D3;
opacity: 0;
border-radius: 2px;
z-index: -1;
div {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
cursor: pointer;
}
div>img {
width: 14px;
height: 14px;
}
.up:hover {
background-color: #1890FF;
}
.down,.nodown {
transform: rotate(180deg);
}
.down:hover {
background-color: #1890FF;
}
.delete:hover {
background-color: #FF6060;
}
}
.textWrap:hover,.imgwrap:hover,.videowrap:hover {
.toolList {
opacity: 1;
z-index: 1;
}
}
src/pages/newtheme/calendarclock/index.js
View file @ 179bd7e0
......@@ -102,6 +102,7 @@ class CalendarClockForm extends React.Component {
form.resetFields();
this.setState({
title: '',
calendarShow: false,
});
},
},
......@@ -227,6 +228,16 @@ class CalendarClockForm extends React.Component {
},
});
}
calendarMoveContent = (index, direction) => {
const { dispatch } = this.props;
dispatch({
type: 'createtheme/calendarMoveContent',
payload: {
index,
direction,
},
});
}
render() {
const { isShow, calendarShow, title } = this.state;
const {
......@@ -239,6 +250,7 @@ class CalendarClockForm extends React.Component {
calendarData,
currentTimestamp,
selectPlanDays,
isCopy,
} = this.props;
let new_rest_dates = [];
new_rest_dates = [...new Set(new_rest_dates.concat(...rest_dates))];
......@@ -309,7 +321,7 @@ class CalendarClockForm extends React.Component {
},
],
})(
<Select disabled={!!calendarParams.class_id} placeholder="请选择班级" style={{ width: 174 }} showSearch onChange={this.handleStudentChange}>
<Select disabled={(calendarParams.class_id && calendarParams.class_id != undefined) && (isCopy === 0)} placeholder="请选择班级" style={{ width: 174 }} showSearch onChange={this.handleStudentChange}>
{classList.map(ele => <Option value={ele.id}>{ele.title}</Option>)}
</Select>,
)}
......@@ -607,6 +619,7 @@ class CalendarClockForm extends React.Component {
editorChange={this.editorChange}
deleteThemeImg={this.deleteCalendarImg}
editorAddText={this.calendarAddText}
moveContent={this.calendarMoveContent}
/>
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
<Button type="primary" htmlType="submit" loading={themeAddLoading}>
......@@ -633,6 +646,7 @@ function mapStateToProps(state) {
calendarData,
currentTimestamp,
selectPlanDays,
isCopy,
} = state.createtheme;
return {
themeAddLoading,
......@@ -644,6 +658,7 @@ function mapStateToProps(state) {
calendarData,
currentTimestamp,
selectPlanDays,
isCopy,
};
}
export default connect(mapStateToProps)(CalendarClock);
......
src/pages/newtheme/calendarclock/index.less
View file @ 179bd7e0
.container {
background-color: #fff;
padding: 0 20px;
padding: 20px;
position: relative;
}
.title {
......
src/pages/newtheme/index.less
View file @ 179bd7e0
......@@ -13,6 +13,9 @@
.ant-tabs .ant-tabs-left-bar .ant-tabs-tab, .ant-tabs .ant-tabs-right-bar .ant-tabs-tab {
padding: 0;
}
.ant-tabs-bar {
margin-top: 20px;
}
.ant-tabs-nav-scroll {
border-right: 1px solid rgba(0, 0, 0, .1);
padding-right: 30px;
......
src/pages/newtheme/jobclock/index.js
View file @ 179bd7e0
......@@ -175,6 +175,16 @@ class JobClockForm extends React.Component {
},
});
}
jobMoveContent = (index, direction) => {
const { dispatch } = this.props;
dispatch({
type: 'createtheme/jobMoveContent',
payload: {
index,
direction,
},
});
}
render() {
const { isShow, title } = this.state;
const {
......@@ -183,6 +193,7 @@ class JobClockForm extends React.Component {
classList,
jobParams,
editorText,
isCopy,
} = this.props;
const formItemModalLineLayout = {
labelCol: {
......@@ -251,7 +262,7 @@ class JobClockForm extends React.Component {
},
],
})(
<Select disabled={!!jobParams.class_id} placeholder="请选择班级" style={{ width: 174 }} showSearch onChange={this.handleStudentChange}>
<Select disabled={(jobParams.class_id && jobParams.class_id != undefined) && (isCopy === 0)} placeholder="请选择班级" style={{ width: 174 }} showSearch onChange={this.handleStudentChange}>
{classList.map(ele => <Option value={ele.id}>{ele.title}</Option>)}
</Select>,
)}
......@@ -444,6 +455,7 @@ class JobClockForm extends React.Component {
editorUploadAudio={this.jobUploadAudio}
editorChange={this.jobChangeSize}
deleteThemeImg={this.deleteJobImg}
moveContent={this.jobMoveContent}
editorAddText={this.jobAddText}
/>
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
......@@ -466,12 +478,14 @@ function mapStateToProps(state) {
classList,
jobParams,
editorText,
isCopy,
} = state.createtheme;
return {
themeAddLoading,
classList,
jobParams,
editorText,
isCopy,
};
}
export default connect(mapStateToProps)(JobClock);
......
src/pages/newtheme/jobclock/index.less
View file @ 179bd7e0
.container {
background-color: #fff;
padding: 0 20px;
padding: 20px;
position: relative;
}
.title {
......
src/pages/thememgt/index.js
View file @ 179bd7e0
......@@ -138,7 +138,7 @@ class ThemeMgt extends React.Component {
editTheme = (record) => {
const { dispatch } = this.props;
if (record.subject_type == 3) {
message.error('闯关打卡暂时不支持编辑哟', 1);
message.warning('功能即将开放，敬请期待', 1);
return;
}
dispatch({
......@@ -148,6 +148,20 @@ class ThemeMgt extends React.Component {
},
});
}
copyClockMgt = (record, isCopy) => {
const { dispatch } = this.props;
if (record.subject_type == 3) {
message.warning('功能即将开放，敬请期待', 1);
return;
}
dispatch({
type: 'createtheme/copyGoTheme',
payload: {
record,
isCopy,
},
});
}
deleteTheme = (record) => {
const me = this;
const { dispatch } = me.props;
......@@ -279,6 +293,8 @@ class ThemeMgt extends React.Component {
<div className={pageStyle.tablecell}>
<a href="javascript:;" onClick={() => this.editTheme(record)}>编辑</a>
<Divider type="vertical" />
<a href="javascript:;" onClick={() => this.copyClockMgt(record, 1)}>复制</a>
<Divider type="vertical" />
<a href="javascript:;" onClick={() => this.goClockMgt(record)}>点评</a>
<Divider type="vertical" />
<a href="javascript:;" onClick={() => this.deleteTheme(record)}>删除</a>
......
src/router.js
View file @ 179bd7e0
......@@ -175,6 +175,16 @@ const RechargeDesc = props => (
{ RechargeDesc => (<RechargeDesc {...props} />) }
</Bundle>
);
const JobClock = props => (
<Bundle load={() => import(/* webpackChunkName:"JobClock" */'./pages/newtheme/jobclock/index')}>
{ JobClock => (<JobClock {...props} />) }
</Bundle>
);
const CalendarClock = props => (
<Bundle load={() => import(/* webpackChunkName:"JobClock" */'./pages/newtheme/calendarclock/index')}>
{ CalendarClock => (<CalendarClock {...props} />) }
</Bundle>
);
function RouterConfig({ history }) {
return (
<LocaleProvider locale={zhCN}>
......@@ -204,6 +214,10 @@ function RouterConfig({ history }) {
<Route path="/sjd/studentclass/:id" exact component={StudentClass} />
<Route path="/sjd/institutions" exact component={Institutions} />
<Route path="/sjd/schooledit" exact component={SchoolEdit} />
<Route path="/sjd/newtheme/jobclock/:id" exact component={JobClock} />
<Route path="/sjd/newtheme/jobclock/:id/:isCopy" exact component={JobClock} />
<Route path="/sjd/newtheme/calendarclock/:id" exact component={CalendarClock} />
<Route path="/sjd/newtheme/calendarclock/:id/:isCopy" exact component={CalendarClock} />
</SjdIndex>
)}
/>
......
src/services/createtheme.js
View file @ 179bd7e0
import qs from 'qs';
import request from '../utils/request';
import api from '../common/api';
export function findTheme(params) {
const data = qs.stringify(params);
return request({
url: `${api.createtheme.addTheme}/${params.id}`,
method: 'GET',
data,
});
}
export function addTheme(params) {
const data = qs.stringify(params);
return request({
......
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