fix:hook。。。。。

b0efcce5 · maolipeng · a648b7d4 · b0efcce5
Commit b0efcce5 authored Aug 01, 2021 by maolipeng
Hide whitespace changes
Inline Side-by-side

Showing with 135 additions and 125 deletions

src/modules/course-manage/components/CreateWorkWXCourse.tsx
+135 -125

No files found.
--- a/src/modules/course-manage/components/CreateWorkWXCourse.tsx
+++ b/src/modules/course-manage/components/CreateWorkWXCourse.tsx
@@ -6,7 +6,7 @@
 * @Description: 大班互动-添加/编辑直播课
 */
-import React, { useEffect, useState } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import { withRouter } from 'react-router-dom';
 import { Button, message, Modal } from 'antd';
@@ -30,7 +30,7 @@ import './CreateWorkWXCourse.less';
 const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
 interface BasicInfo {
-  courseName: string; // 课程名称
+  [courseName: string]: string; // 课程名称
  coverUrl: string;
  coverId: string;
  categoryId: string;
@@ -52,9 +52,12 @@ interface ClassInfo {
  liveDate: number;
  timeHorizonStart: number;
  timeHorizonEnd: number;
-  calendarTime: number[];
+  calendarTime?: number[];
  startTime: number;
  endTime: number;
+  nickname?: string;
+  assistantStoreUserId?: string[];
+  assistantNames?: string[];
 };
 const defaultClassInfo: ClassInfo = {
@@ -68,20 +71,20 @@ const defaultClassInfo: ClassInfo = {
  startTime: new Date().getTime() + 300000,
  endTime: new Date().getTime() + 300000,
 };
+interface CourseMedia {
+  contentType?: string;
+  mediaContent?: string;
+  mediaType?: string;
+  mediaUrl?: string;
+  key?: number;
+}
 interface IntroInfo {
-  needRecord: string,
+  needRecord?: string,
-  whetherVisitorsJoin: string,
+  whetherVisitorsJoin?: string,
-  liveCourseWarmMedia: any,
+  liveCourseWarmMedia?: CourseMedia,
+  introduce?: string;
  // 讲师简介
-  liveCourseMediaRequests: [
+  liveCourseMediaRequests?: CourseMedia[],
-    {
-      contentType: string,
-      mediaType: string,
-      mediaContent: string,
-      key: number,
-    },
-  ],
 };
 const defaultIntroInfo: IntroInfo = {
@@ -99,6 +102,24 @@ const defaultIntroInfo: IntroInfo = {
  ],
 };
+interface CourseDetail {
+  teacherId: string;
+  teacherName: string;
+  courseName: string;
+  startTime: number;
+  endTime: number;
+  courseMediaVOS: CourseMedia[];
+  nickname?: string;
+  needRecord: string,
+  whetherVisitorsJoin: string;
+  warmMedia?: string;
+  categoryId: string;
+  categoryName: string;
+  admins: any[],
+  courseState: string;
+}
 function CreateWorkWXCourse() {
    const [id, setId] = useState(getParameterByName('id'))
    const [type,setType] = useState(getParameterByName('type'))
@@ -106,42 +127,45 @@ function CreateWorkWXCourse() {
    const [isEdit, setIsEdit] = useState(true)
    const [courseState, setCourseState] = useState('UN_START')
    const [editorTextLength, setEditorTextLength] = useState(0)
-    const [] = useState()
+    const [loadintroduce, setLoadintroduce] = useState(false)
-    const [] = useState()
+    const [addLiveBasicInfo, setAddLiveBasicInfo] = useState<BasicInfo>({courseName:'',coverUrl:'',coverId:'',categoryId:'',categoryName:''})
-    this.state = {
+    const [addLiveClassInfo, setAddLiveClassInfo] = useState<any>()
-      // 直播课基本信息
+    const [addLiveIntroInfo, setAddLiveIntroInfo] = useState<any>({})
-      addLiveBasicInfo: {
+    const [previewLiveCourseModal, setPreviewLiveCourseModal] = useState<ReactElement|null>()
-        courseName: null, // 课程名称
+    // this.state = {
-        coverUrl: defaultCover,
+    //   // 直播课基本信息
-        coverId: null,
+    //   addLiveBasicInfo: {
-        categoryId: null,
+    //     courseName: null, // 课程名称
-        categoryName: null,
+    //     coverUrl: defaultCover,
-      },
+    //     coverId: null,
+    //     categoryId: null,
-      // 直播课上课信息
+    //     categoryName: null,
-      addLiveClassInfo: {
+    //   },
-        teacherId: null,
-        teacherName: null,
+    //   // 直播课上课信息
-        assistant: [],
+    //   addLiveClassInfo: {
-        assistantStoreUserId: [],
+    //     teacherId: null,
-        assistantNames: [],
+    //     teacherName: null,
-        liveDate: null,
+    //     assistant: [],
-        timeHorizonStart: null,
+    //     assistantStoreUserId: [],
-        timeHorizonEnd: null,
+    //     assistantNames: [],
-        calendarTime: [], // 批量排课
+    //     liveDate: null,
-        startTime: new Date().getTime() + 300000, // 批量开始时分
+    //     timeHorizonStart: null,
-        endTime: new Date().getTime() + 300000, // 批量结束时分
+    //     timeHorizonEnd: null,
-      },
+    //     calendarTime: [], // 批量排课
+    //     startTime: new Date().getTime() + 300000, // 批量开始时分
-      // 直播课简介
+    //     endTime: new Date().getTime() + 300000, // 批量结束时分
-      addLiveIntroInfo: {
+    //   },
-        needRecord: 'YES',
-        whetherVisitorsJoin: 'NO',
+    //   // 直播课简介
-        liveCourseWarmMedia: {},
+    //   addLiveIntroInfo: {
-        introduce: '',
+    //     needRecord: 'YES',
-        liveCourseMediaRequests: [],
+    //     whetherVisitorsJoin: 'NO',
-      },
+    //     liveCourseWarmMedia: {},
-    };
+    //     introduce: '',
+    //     liveCourseMediaRequests: [],
+    //   },
+    // };
  useEffect(()=> {
    routeHook.addSaveCase();
@@ -173,13 +197,13 @@ function CreateWorkWXCourse() {
        categoryName,
        admins,
        courseState,
-      } = res.result;
+      } = res.result as CourseDetail;
-      let coverId;
+      let coverId: string|undefined = '';
      let coverUrl;
      let liveCourseMediaRequests: any[] = [];
      let liveCourseWarmMedia;
      let hasIntro = false;
-      courseMediaVOS.map((item:any) => {
+      courseMediaVOS.map((item:CourseMedia) => {
        switch (item.contentType) {
          case 'COVER':
            coverId = item.mediaContent;
@@ -190,7 +214,7 @@ function CreateWorkWXCourse() {
            break;
          case 'INTRO':
            hasIntro = true;
-            getTextDetail('introduce', item.mediaUrl);
+            getIntroduce('introduce', item.mediaUrl);
            break;
          default:
            break;
@@ -199,7 +223,7 @@ function CreateWorkWXCourse() {
        return item;
      });
-      const addLiveBasicInfo = {
+      const addLiveBasicInfo: BasicInfo = {
        courseName,
        coverUrl: coverUrl || defaultCover,
        coverId,
@@ -213,7 +237,7 @@ function CreateWorkWXCourse() {
      const assistant = _.pluck(admins, 'adminId');
      const assistantStoreUserId = _.pluck(admins, 'adminStoreUserId'); //编辑时的选中的助教的查询用storeUserId查询
      const assistantNames = _.pluck(admins, 'adminName');
-      const addLiveClassInfo = {
+      const addLiveClassInfo: ClassInfo = {
        assistant,
        liveDate,
        nickname,
@@ -227,7 +251,7 @@ function CreateWorkWXCourse() {
        assistantStoreUserId,
      };
-      const addLiveIntroInfo = {
+      const addLiveIntroInfo: IntroInfo = {
        liveCourseWarmMedia,
        needRecord,
        whetherVisitorsJoin,
@@ -236,28 +260,28 @@ function CreateWorkWXCourse() {
      // 晚于开课前30分钟
      if (new Date().getTime() > startTime - 1800000) {
-        isEdit = false;
+        setIsEdit(false)
      }
-      this.setState({
+      setLoadintroduce(!hasIntro)
-        loadintroduce: !hasIntro,
+      setLoading(false)
-        isEdit,
+      setAddLiveBasicInfo(addLiveBasicInfo)
-        loading: false,
+      setAddLiveClassInfo(addLiveClassInfo)
-        courseState,
+      setAddLiveIntroInfo(addLiveIntroInfo)
-        addLiveIntroInfo,
+      setCourseState(courseState)
-        addLiveClassInfo,
-        addLiveBasicInfo,
-      });
    });
  };
-  function getTextDetail(key: string, url: string) {
+  function getIntroduce(key: string, url: string|undefined) {
    $.ajax({
      data: {},
      type: 'GET',
      url,
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
      success: (res) => {
-        this.setState({ addLiveIntroInfo: { ...this.state.addLiveIntroInfo, [key]: res }, [`load${key}`]: true });
+        let intro = addLiveIntroInfo
+        intro.introduce = res
+        setLoadintroduce(true)
+        setAddLiveIntroInfo(intro)
      },
      error: () => {
        message.warning('获取简介失败');
@@ -267,45 +291,35 @@ function CreateWorkWXCourse() {
  // 修改基本信息
  // 修改基本信息
-  handleChangeBasicInfo = (field, value) => {
+  function handleChangeBasicInfo(field: string, value: string) {
-    const { coverUrl } = this.state.addLiveBasicInfo;
+    let binfo = {...addLiveBasicInfo}
-    this.setState({
+    binfo[field] = value
-      addLiveBasicInfo: {
+    setAddLiveBasicInfo(binfo)
-        ...this.state.addLiveBasicInfo,
-        [field]: value,
-      },
-    });
  };
  // 修改上课信息
-  handleChangeClassInfo = (field, value, type, optionValue) => {
+  function handleChangeClassInfo(field: string, value: any, type: any, optionValue: any) {
    const _value = value ? value.valueOf() : null;
-    const { teacherName } = this.state.addLiveClassInfo;
+    const { teacherName, assistantNames, assistantStoreUserId } = addLiveClassInfo;
-    const { assistantNames } = this.state.addLiveClassInfo;
+    let _addLiveClassInfo = {
-    const { assistantStoreUserId } = this.state.addLiveClassInfo;
+        addLiveClassInfo,
-    this.setState({
-      addLiveClassInfo: {
-        ...this.state.addLiveClassInfo,
        [field]: _value,
        teacherName: type === 'teacherType' ? optionValue : teacherName,
        assistantNames: type === 'assistantType' ? _.pluck(optionValue, 'children') : assistantNames,
        assistantStoreUserId: type === 'assistantType' ? _.pluck(optionValue, 'key') : assistantStoreUserId,
-      },
+    }
-    });
+    setAddLiveClassInfo(_addLiveClassInfo)
  };
  // 修改简介
-  handleChangeIntroInfo = (field, value) => {
+  function handleChangeIntroInfo(field: string, value: any) {
-    this.setState({
+    let introinfo = {...addLiveIntroInfo}
-      addLiveIntroInfo: {
+    introinfo[field] = value
-        ...this.state.addLiveIntroInfo,
+    setAddLiveIntroInfo(introinfo)
-        [field]: value,
-      },
-    });
  };
  // 完成创建/编辑
-  handleSubmit = () => {
+  function handleSubmit() {
    //过期判断
    if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
      Modal.warning({
@@ -319,7 +333,7 @@ function CreateWorkWXCourse() {
    const { liveDate, timeHorizonStart } = addLiveClassInfo;
    const _liveDate = moment(liveDate).format('YYYY-MM-DD');
    const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
-    const startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
+    const startTime = Number(moment(_liveDate + ' ' + _timeHorizonStart).format('x'));
    if (type === 'edit' && isEdit && new Date().getTime() > startTime - 1800000) {
      Modal.info({
        title: '提示',
@@ -327,26 +341,25 @@ function CreateWorkWXCourse() {
        content: '晚于开课前30分钟，部分信息不可修改',
        okText: '我知道了',
        onOk: () => {
-          this.getCourseDetail();
+          getCourseDetail();
        },
      });
      return;
    }
-    this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, editorTextLength).then((res) => {
+    // this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, editorTextLength).then((res) => {
-      if (!res) return;
+      // if (!res) return;
      Upload.uploadTextToOSS(
        addLiveIntroInfo.introduce,
        `${randomString()}.txt`,
-        (introduceId) => {
+        (introduceId:any) => {
-          this.submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
+          submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
        },
        () => message.warning('上传课程简介失败')
      );
-    });
+    // });
  };
-  submitRemote = ({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id }) => {
+  function submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id }) {
-    const { type } = this.state;
    const { courseName, coverUrl, coverId, categoryId } = addLiveBasicInfo;
    const { liveDate, teacherId, assistant, timeHorizonEnd, timeHorizonStart, calendarTime } = addLiveClassInfo;
@@ -423,7 +436,7 @@ function CreateWorkWXCourse() {
      });
    }
  };
+/*
  handleValidate = (addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, editorTextLength) => {
    return new Promise((resolve) => {
      const { type } = this.state;
@@ -519,10 +532,11 @@ function CreateWorkWXCourse() {
      resolve(true);
    });
  };
+  */
  // 显示预览课程弹窗
-  handleShowPreviewModal = () => {
+  function handleShowPreviewModal() {
-    const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, type, courseState } = this.state;
+    // const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, type, courseState } = this.state;
    const previewLiveCourseModal = (
      <PreviewCourseModal
        courseBasicInfo={addLiveBasicInfo}
@@ -531,20 +545,18 @@ function CreateWorkWXCourse() {
        type={type}
        courseState={courseState}
        close={() => {
-          this.setState({
+          setPreviewLiveCourseModal(null)
-            previewLiveCourseModal: null,
-          });
        }}
      />
    );
-    this.setState({ previewLiveCourseModal });
+    setPreviewLiveCourseModal(previewLiveCourseModal)
  };
  // 取消编辑并返回上一级路由
-  handleGoBack = () => {
+  function handleGoBack() {
    // 比较state的addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo和默认数据是否相等
-    const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo } = this.state;
+    // const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo } = this.state;
    if (!_.isEqual(addLiveBasicInfo, defaultBasicInfo) || !_.isEqual(addLiveClassInfo, defaultClassInfo) || !_.isEqual(addLiveIntroInfo, defaultIntroInfo)) {
      console.log('ghjklkjh')
      window.RCHistory.push({
@@ -558,11 +570,11 @@ function CreateWorkWXCourse() {
    }
  };
-  render() {
-    const { id, type, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, loadintroduce } = this.state;
+    // const { id, type, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, loadintroduce } = this.state;
    return (
      <div className='page add-live-page'>
-        <Breadcrumbs navList={type == 'add' ? '新建直播课' : '编辑直播课'} goBack={this.handleGoBack} />
+        <Breadcrumbs navList={type == 'add' ? '新建直播课' : '编辑直播课'} goBack={handleGoBack} />
        <div className='box'>
          <div className='show-tips'>
            <ShowTips message='请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利' />
@@ -570,33 +582,31 @@ function CreateWorkWXCourse() {
          <div className='add-live-page__form'>
            <div className='basic-info__wrap'>
              <div className='title'>基本信息</div>
-              <AddLiveBasic isEdit={isEdit} pageType={type} data={addLiveBasicInfo} onChange={this.handleChangeBasicInfo} />
+              <AddLiveBasic isEdit={isEdit} pageType={type} data={addLiveBasicInfo} onChange={handleChangeBasicInfo} />
            </div>
            <div className='class-info__wrap'>
              <div className='title'>上课信息</div>
-              <AddLiveClass isEdit={isEdit} pageType={type} data={{ ...addLiveClassInfo, id }} onChange={this.handleChangeClassInfo} />
+              <AddLiveClass isEdit={isEdit} pageType={type} data={{ ...addLiveClassInfo, id }} onChange={handleChangeClassInfo} />
            </div>
            <div className='intro-info__wrap'>
              <div className='title'>更多信息</div>
-              <AddLiveIntro isEdit={isEdit} data={{ ...addLiveIntroInfo, loadintroduce, id }} onChange={this.handleChangeIntroInfo} />
+              <AddLiveIntro isEdit={isEdit} data={{ ...addLiveIntroInfo, loadintroduce, id }} onChange={handleChangeIntroInfo} />
            </div>
          </div>
        </div>
        <div className='footer shrink-footer'>
-          <Button onClick={this.handleGoBack}>取消</Button>
+          <Button onClick={handleGoBack}>取消</Button>
-          <Button onClick={this.handleShowPreviewModal}>预览</Button>
+          <Button onClick={handleShowPreviewModal}>预览</Button>
-          <Button type='primary' onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>
+          <Button type='primary' onClick={_.debounce(() => handleSubmit(), 3000, true)}>
            保存
          </Button>
        </div>
-        {this.state.previewLiveCourseModal}
+        {previewLiveCourseModal}
-        {this.state.lackConsumeStudentModal}
      </div>
    );
-  }
 }
 export default withRouter(CreateWorkWXCourse);