复制

src/common/menuconfig.js

@@ -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/webapp.js

@@ -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

@@ -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

@@ -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

@@ -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

 .container {
   background-color: #fff;
-  padding: 0 20px;
+  padding:  20px;
   position: relative;
 }
 .title {

src/pages/newtheme/index.less

@@ -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

@@ -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

 .container {
   background-color: #fff;
-  padding: 0 20px;
+  padding: 20px;
   position: relative;
 }
 .title {

src/pages/thememgt/index.js

@@ -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

@@ -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

 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({