作业和日历打卡编辑功能及删除

src/common/api.js

@@ -164,6 +164,7 @@ export default {
     find_subject_detail: `${dakaapi}member/unlock_subject/show`,
     unlockSubjectRelease: `${dakaapi}member/unlock_subject/release`,
     deleteTheme: `${dakaapi}member/subjects`,
+    delete_unlock_subject: `${dakaapi}member/unlock_subject`,
   },
 
 };

src/models/createtheme.js

@@ -9,6 +9,7 @@ import {
   getWeek,
   unique1,
   getWeekDay,
+  getDateStamp,
 } from '../utils/index';
 import errorcode from '../common/errorcode';
 import * as themeAjax from '../services/createtheme';
@@ -20,6 +21,7 @@ export default {
   namespace: 'createtheme',
   state: {
     sid: 0,
+    tabIndex: 1,
     classList: [],
     editorText: '',
     jobParams: {
@@ -119,6 +121,13 @@ export default {
             },
           },
         });
+        yield put({
+          type: 'updateState',
+          payload: {
+            tabIndex: record.subject_type,
+            record,
+          },
+        });
       } else if (record.subject_type === 2) {
         yield put({
           type: 'updateState',
@@ -129,19 +138,37 @@ export default {
             },
           },
         });
-        // yield put({
-        //   type: 'chooseWeek',
-        //   payload: {
-        //   },
-        // });
+        yield put({
+          type: 'updateState',
+          payload: {
+            tabIndex: record.subject_type,
+            record,
+          },
+        });
+        let editDates = [];
+        if (record.calendar_set.rest_dates != '') { editDates = record.calendar_set.rest_dates.split(','); }
+        let day = [];
+        for (let i = 0; i < editDates.length; i++) {
+          editDates[i] = getDateStamp(editDates[i]);
+          editDates[i] = moment(editDates[i]).format('YYYY-MM-DD');
+          day = Number(getWeekDay(editDates[i]));
+          console.log(day, 'day');
+          yield put({
+            type: 'chooseWeek',
+            payload: {
+              day,
+              start_time: moment(record.start_time).format('YYYY-MM-DD'),
+              end_time: moment(record.end_time).format('YYYY-MM-DD'),
+            },
+          });
+          yield put({
+            type: 'updateState',
+            payload: {
+              rest_dates: [...editDates],
+            },
+          });
+        }
       }
-      yield put({
-        type: 'updateState',
-        payload: {
-          tabIndex: record.subject_type,
-          record,
-        },
-      });
       yield put(routerRedux.push('/sjd/newtheme'));
     },
     * createThemeModalAdd({ payload }, { call, put, select }) {
@@ -158,30 +185,6 @@ export default {
         message.error('标题长度不能超过20个字！', 1);
         return;
       }
-      if (payload.subject_type === 1) {
-        jobParams.content.push({
-          type: 'text',
-          value: editorText,
-        });
-        yield put({
-          type: 'updateState',
-          payload: {
-            jobParams: { ...jobParams },
-          },
-        });
-      }
-      if (payload.subject_type === 2) {
-        calendarParams.content.push({
-          type: 'text',
-          value: calendarText,
-        });
-        yield put({
-          type: 'updateState',
-          payload: {
-            calendarParams: { ...calendarParams },
-          },
-        });
-      }
       if (themeAddLoading) {
         return;
       }
@@ -218,18 +221,13 @@ export default {
         supplement_num,
         callBack,
       } = payload;
-      console.log(jobParams, 'jobParams11111111111111');
       let new_rest_dates = [];
       const loadmessage = message.loading('保存中...', 0);
       let newParams = {};
       if (subject_type === 1) {
         newParams = {
           ...jobParams,
-          content: jobParams.content,
         };
-        console.log(jobParams.content, 'jobParams.content');
-        console.log(newParams.content, 'newParams');
-        console.log(newParams, '4444444444444444444444444444444444');
       } else if (subject_type === 2) {
         new_rest_dates = [...new Set(new_rest_dates.concat(...rest_dates))];
         for (let i = 0; i < new_rest_dates.length; i++) {
@@ -237,12 +235,8 @@ export default {
         }
         newParams = {
           ...calendarParams,
-          content: calendarParams.content,
         };
       }
-      console.log(newParams, 'newJobParams');
-      console.log(payload, 'payload1111111111111111');
-      console.log(Object.assign(newParams, payload), '1111111111111111111111111111222222');
       const postFunction = (newParams.id != undefined) && newParams.id !== 0 ? themeAjax.editTheme : themeAjax.addTheme;
       const data = yield call(postFunction, Object.assign(newParams, {
         is_cheat,
@@ -270,7 +264,7 @@ export default {
         clock_end_time,
         supplement_status,
         supplement_num,
-        content: newParams.content ? JSON.stringify(newParams.content) : JSON.stringify([]),
+        content: subject_type === 1 ? JSON.stringify(jobParams.content) : JSON.stringify(calendarParams.content),
         // eslint-disable-next-line prefer-spread
         rest_dates: rest_dates && rest_dates.length > 0 ? new_rest_dates.join(',') : '',
       }));
@@ -519,7 +513,6 @@ export default {
       });
       setTimeout(loadmessage);
       if (data.code === 200) {
-        console.log(data, 'data');
         yield put({
           type: 'updateState',
           payload: {
@@ -798,21 +791,59 @@ export default {
         },
       });
     },
-    * changeText({ payload }, { call, put, select }) {
+    * jobChangeSize({ payload }, { call, put, select }) {
+      const { textValue, index } = payload;
+      const { jobParams } = yield select(state => state.createtheme);
+      jobParams.content[index] = {
+        type: 'text',
+        value: textValue,
+      };
+      yield put({
+        type: 'updateState',
+        payload: {
+          jobParams: { ...jobParams },
+        },
+      });
+    },
+    * changeJobText({ payload }, { call, put, select }) {
       const { textValue } = payload;
+      const { jobParams } = yield select(state => state.createtheme);
+      jobParams.content.push({
+        type: 'text',
+        value: '',
+      });
       yield put({
         type: 'updateState',
         payload: {
-          editorText: textValue,
+          jobParams: { ...jobParams },
         },
       });
     },
-    * changeCalendarText({ payload }, { call, put, select }) {
+    * calendarChangeSize({ payload }, { call, put, select }) {
+      const { textValue, index } = payload;
+      const { calendarParams } = yield select(state => state.createtheme);
+      calendarParams.content[index] = {
+        type: 'text',
+        value: textValue,
+      };
+      yield put({
+        type: 'updateState',
+        payload: {
+          calendarParams: { ...calendarParams },
+        },
+      });
+    },
+    * addCalendarText({ payload }, { call, put, select }) {
       const { textValue } = payload;
+      const { calendarParams } = yield select(state => state.createtheme);
+      calendarParams.content.push({
+        type: 'text',
+        value: '',
+      });
       yield put({
         type: 'updateState',
         payload: {
-          calendarText: textValue,
+          calendarParams: { ...calendarParams },
         },
       });
     },
@@ -1055,6 +1086,7 @@ export default {
           sid: 0,
           classList: [],
           editorText: '',
+          tabIndex: 1,
           jobParams: {
             is_cheat: 0,
             title: '',

src/models/thememgt.js

@@ -185,7 +185,7 @@ export default {
     * deleteTheme({ payload }, { call, put, select }) {
       const { id, record } = payload;
       const { sid } = yield select(state => state.webapp);
-      const postFunction = record.subject_type == 3 ? '' : themeAjax.deleteTheme;
+      const postFunction = record.subject_type == 3 ? themeAjax.deleteSubject : themeAjax.deleteTheme;
       const goodsdelete = yield call(postFunction, {
         id,
         school_id: sid,

src/pages/newtheme/ThemeEditor.js

@@ -31,6 +31,10 @@ 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 {
@@ -41,10 +45,18 @@ class ThemeEditor extends React.Component {
       deleteThemeImg,
       deleteThemeVideo,
       editorText,
+      editorAddText,
     } = this.props;
     return (
       <div className={pageStyle.container}>
-        <TextArea value={editorText} onChange={e => editorChange(e)} placeholder="请输入内容" style={{ width: 560 }} maxLength={500} rows={6} />
+        {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) => (
@@ -70,6 +82,7 @@ class ThemeEditor extends React.Component {
           </div>
         </div>
         <div className={pageStyle.uploadflex}>
+          <div className={pageStyle.uploadimg} onClick={editorAddText}><Icon style={{ marginRight: 10 }} type="font-size" />添加文字</div>
           <div className={pageStyle.uploadimg}><input type="file" id="uploadImg" className={pageStyle.fileuploadinput} onChange={editorUploadImg} accept="image/*" /><Icon style={{ marginRight: 10 }} type="picture" />添加图片</div>
           <div className={pageStyle.uploadimg}><input type="file" id="uploadVideo" className={pageStyle.fileuploadinput} onChange={editorUploadAudio} accept="video/*" /><Icon style={{ marginRight: 10 }} type="video-camera" />添加视频</div>
         </div>

src/pages/newtheme/ThemeEditor.less

+.textWrap {
+  width: 560px;
+  height: auto;
+  position: relative;
+  :global {
+    .ant-input {
+      padding: 6px 15px 20px;
+    }
+  }
+  .sizeNumber {
+    position: absolute;
+    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;

src/pages/newtheme/calendarclock/index.js

@@ -129,17 +129,18 @@ class CalendarClockForm extends React.Component {
       },
     });
   }
-  editorChange = (e) => {
+  editorChange = (e, index) => {
     const { dispatch } = this.props;
     const textValue = e.target.value;
-    if (textValue.length >= 500) {
+    if (textValue.length > 500) {
       message.error('最多500字', 0.5);
       return;
     }
     dispatch({
-      type: 'createtheme/changeCalendarText',
+      type: 'createtheme/calendarChangeSize',
       payload: {
         textValue,
+        index,
       },
     });
   }
@@ -218,6 +219,14 @@ class CalendarClockForm extends React.Component {
       calendarShow: false,
     });
   }
+  calendarAddText = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createtheme/addCalendarText',
+      payload: {
+      },
+    });
+  }
   render() {
     const { isShow, calendarShow, title } = this.state;
     const {
@@ -225,7 +234,6 @@ class CalendarClockForm extends React.Component {
       themeAddLoading,
       classList,
       calendarParams,
-      calendarText,
       dateArray,
       rest_dates,
       calendarData,
@@ -271,7 +279,7 @@ class CalendarClockForm extends React.Component {
       },
     };
     const selectBefore = (
-      <div>{title.length || 0}/20</div>
+      <div>{calendarParams.title ? calendarParams.title.length : title.length || 0}/20</div>
     );
     const dateFormat = 'YYYY/MM/DD HH:mm';
     return (
@@ -516,7 +524,7 @@ class CalendarClockForm extends React.Component {
                 </FormItem>
                 {getFieldValue('audio_require_status') === true ? (
                   <FormItem {...formItemverticalLayout} labelAlign="right" label="学员打卡最少">
-                    {getFieldDecorator('audio_require_num', { initialValue: calendarParams.audio_require_status })(
+                    {getFieldDecorator('audio_require_num', { initialValue: calendarParams.audio_require_num })(
                       <InputNumber placeholder="请输入" min={0} max={600} style={{ width: 100 }} />,
                     )}
                     <span className="ant-form-text">秒录音</span>
@@ -598,7 +606,7 @@ class CalendarClockForm extends React.Component {
             editorUploadAudio={this.jobUploadAudio}
             editorChange={this.editorChange}
             deleteThemeImg={this.deleteCalendarImg}
-            editorText={calendarText}
+            editorAddText={this.calendarAddText}
           />
           <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
             <Button type="primary" htmlType="submit" loading={themeAddLoading}>

src/pages/newtheme/index.js

@@ -18,10 +18,10 @@ class NewThemeForm extends React.Component {
   }
   tabChange=(key) => {
     const { dispatch, tabIndex } = this.props;
-    // if (Number(key) === 3) {
-    //   message.warning('功能即将开放，敬请期待', 1);
-    //   return;
-    // }
+    if (Number(key) === 3) {
+      message.warning('功能即将开放，敬请期待', 1);
+      return;
+    }
     dispatch({
       type: 'createtheme/tabChange',
       payload: {

src/pages/newtheme/jobclock/index.js

@@ -121,17 +121,18 @@ class JobClockForm extends React.Component {
       },
     });
   }
-  editorChange = (e) => {
+  jobChangeSize = (e, index) => {
     const { dispatch } = this.props;
     const textValue = e.target.value;
-    if (textValue.length >= 500) {
+    if (textValue.length > 500) {
       message.error('最多500字', 0.5);
       return;
     }
     dispatch({
-      type: 'createtheme/changeText',
+      type: 'createtheme/jobChangeSize',
       payload: {
         textValue,
+        index,
       },
     });
   }
@@ -166,6 +167,14 @@ class JobClockForm extends React.Component {
   disabledDate = (current) => {
     return current && current < moment(new Date(new Date().getTime() - (24 * 3600 * 1000)));
   }
+  jobAddText = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createtheme/changeJobText',
+      payload: {
+      },
+    });
+  }
   render() {
     const { isShow, title } = this.state;
     const {
@@ -212,7 +221,7 @@ class JobClockForm extends React.Component {
       },
     };
     const selectBefore = (
-      <div>{title.length || 0}/20</div>
+      <div>{jobParams.title ? jobParams.title.length : title.length || 0}/20</div>
     );
     const dateFormat = 'YYYY/MM/DD HH:mm';
     return (
@@ -353,7 +362,7 @@ class JobClockForm extends React.Component {
                 </FormItem>
                 {getFieldValue('video_require_status') === true ? (
                   <FormItem {...formItemverticalLayout} labelAlign="right" label="学员打卡最少">
-                    {getFieldDecorator('video_require_num', { initialValue: jobParams.video_require_status })(
+                    {getFieldDecorator('video_require_num', { initialValue: jobParams.video_require_num })(
                       <InputNumber placeholder="请输入" min={0} max={9} style={{ width: 100 }} />,
                     )}
                     <span className="ant-form-text">个视频</span>
@@ -433,9 +442,9 @@ class JobClockForm extends React.Component {
             commentParams={jobParams}
             editorUploadImg={this.jobUploadImg}
             editorUploadAudio={this.jobUploadAudio}
-            editorChange={this.editorChange}
+            editorChange={this.jobChangeSize}
             deleteThemeImg={this.deleteJobImg}
-            editorText={editorText}
+            editorAddText={this.jobAddText}
           />
           <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
             <Button type="primary" htmlType="submit" loading={themeAddLoading}>

src/pages/thememgt/index.js

@@ -137,6 +137,10 @@ class ThemeMgt extends React.Component {
   }
   editTheme = (record) => {
     const { dispatch } = this.props;
+    if (record.subject_type == 3) {
+      message.error('闯关打卡暂时不支持编辑哟', 1);
+      return;
+    }
     dispatch({
       type: 'createtheme/editGoTheme',
       payload: {
@@ -147,7 +151,6 @@ class ThemeMgt extends React.Component {
   deleteTheme = (record) => {
     const me = this;
     const { dispatch } = me.props;
-    console.log(record, 'record1111111');
     Modal.confirm({
       title: `确定删除“${record.title}”?`,
       content: '删除后不可恢复，请谨慎操作！',

src/services/createtheme.js

@@ -23,6 +23,12 @@ export function deleteTheme({ id }) {
     method: 'DELETE',
   });
 }
+export function deleteSubject({ id }) {
+  return request({
+    url: `${api.createtheme.delete_unlock_subject}/${id}`,
+    method: 'DELETE',
+  });
+}
 export function addEmigrated(params) {
   const data = qs.stringify(params);
   return request({

src/utils/index.js

@@ -816,4 +816,5 @@ export {
   getWeek,
   unique1,
   getWeekDay,
+  getDateStamp,
 };