fix:新增取消返回弹窗提示

src/modules/task-center/train-task/AddTrainTask.jsx

@@ -2,13 +2,13 @@
  * @Author: yuananting
  * @Date: 2021-07-29 13:57:03
  * @LastEditors: yuananting
- * @LastEditTime: 2021-08-17 19:14:55
+ * @LastEditTime: 2021-08-18 10:53:45
  * @Description: 任务中心-培训任务-新建页面
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, message } from 'antd';
+import { Button, message, Modal } from 'antd';
 import ShowTips from '@/components/ShowTips';
 import Breadcrumbs from '@/components/Breadcrumbs';
 import BasicInfo from './components/BasicInfo';
@@ -37,7 +37,7 @@ function AddTrainTask() {
     helpStoreUserIds: [
       {
         checkedId: User.getStoreUserId(),
-        checkedName: User.getStoreUserName()
+        checkedName: User.getStoreUserName(),
       },
     ], // 指定协同者id
     timeType: 'FOREVER', // 培训时间，默认永久有效
@@ -58,6 +58,15 @@ function AddTrainTask() {
     },
   ];
 
+  const DEFAULT_ORIGIN_STAGE_LIST = [
+    {
+      stageName: '阶段一',
+      contentList: [],
+      check: false,
+      sequence: 1,
+    },
+  ];
+
   const [activeStep, setActiveStep] = useState('BASIC_INFO');
   const [basicInfo, setBasicInfo] = useState(DEFAULT_BASIC_INFO);
   const [stageList, setStageList] = useState(DEFAULT_STAGE_LIST);
@@ -67,6 +76,14 @@ function AddTrainTask() {
   const [startCheck, setStartCheck] = useState(false); // 是否启动校验
   const basicInfoRef = useRef(null);
 
+  const [originBasicInfo, setOriginBasicInfo] = useState(DEFAULT_BASIC_INFO);
+
+  const [originStageList, setOriginStageList] = useState(DEFAULT_ORIGIN_STAGE_LIST);
+
+  const [originPercentCompleteLive, setOriginPercentCompleteLive] = useState(80); // 完成百分比
+  const [originPercentCompleteVideo, setOriginPercentCompleteVideo] = useState(80); // 完成百分比
+  const [originPercentCompletePicture, setOriginPercentCompletePicture] = useState(80); // 完成百分比
+
   useEffect(() => {
     basicInfoRef.current = basicInfo;
   }, [basicInfo]);
@@ -137,13 +154,19 @@ function AddTrainTask() {
             return item;
           });
 
+          const _originStageList = _stageList.map((item) => Object.assign({}, item));
+
           const introduceInfo = courseMediaVOS.filter((item) => item.contentType === 'INTRO')[0];
           setBasicInfo({ ...basicInfoRef.current, ...ITEM_BASIC_INFO, loadintroduce: !introduceInfo });
+          setOriginBasicInfo({ ...basicInfoRef.current, ...ITEM_BASIC_INFO, loadintroduce: !introduceInfo });
           setPercentCompleteLive(percentCompleteLive);
           setPercentCompleteVideo(percentCompleteVideo);
           setPercentCompletePicture(percentCompletePicture);
-
+          setOriginPercentCompleteLive(percentCompleteLive);
+          setOriginPercentCompleteVideo(percentCompleteVideo);
+          setOriginPercentCompletePicture(percentCompletePicture);
           setStageList(_stageList);
+          setOriginStageList(_originStageList);
 
           introduceInfo && getTextDetail('introduce', introduceInfo);
         });
@@ -165,6 +188,11 @@ function AddTrainTask() {
             [key]: res,
             [`load${key}`]: true,
           });
+          setOriginBasicInfo({
+            ...basicInfoRef.current,
+            [key]: res,
+            [`load${key}`]: true,
+          });
         },
       });
     } else if (info.mediaType === 'TEXT') {
@@ -173,6 +201,11 @@ function AddTrainTask() {
         [key]: info.mediaContent,
         [`load${key}`]: true,
       });
+      setOriginBasicInfo({
+        ...basicInfoRef.current,
+        [key]: info.mediaContent,
+        [`load${key}`]: true,
+      });
     }
   }
 
@@ -348,9 +381,41 @@ function AddTrainTask() {
     }
   }
 
+  // 判断基本信息是否修改
+  function isEqualBasicInfo() {
+    return Object.entries(originBasicInfo).toString() === Object.entries(basicInfo).toString();
+  }
+
+  // 判断培训内容是否修改
+  function isEqualStageList() {
+    return JSON.stringify(originStageList) === JSON.stringify(stageList);
+  }
+
+  // 判断完成标准是否修改
+  function isFinishedStandard() {
+    return (
+      percentCompleteLive === originPercentCompleteLive &&
+      percentCompleteVideo === originPercentCompleteVideo &&
+      percentCompletePicture === originPercentCompletePicture
+    );
+  }
+
   // 返回、取消
   function handleGoBack() {
-    window.RCHistory.goBack();
+    if (!isEqualBasicInfo() || !isEqualStageList() || !isFinishedStandard()) {
+      Modal.confirm({
+        title: '确认要返回吗?',
+        content: '返回后，本次编辑的内容将不被保存。',
+        okText: '确认返回',
+        cancelText: '留在本页',
+        icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
+        onOk: () => {
+          window.RCHistory.goBack();
+        },
+      });
+    } else {
+      window.RCHistory.goBack();
+    }
   }
 
   function handleChangeBasicInfo(field, value) {

src/modules/task-center/train-task/components/TrainList.less

@@ -71,6 +71,11 @@
           cursor: pointer;
         }
       }
+      .disabled {
+        color: #ccc !important;
+        cursor: not-allowed !important;
+        pointer-events: none !important;
+      }
     }
 
     .tip {