111Content changed. It will be effective after saved. means

import React, { useCallback, useEffect, useState } from 'react'; import { Box, Button, Checkbox, createStyles, makeStyles, Theme, Tooltip, } from '@material-ui/core'; import { useProduct } from '../../store'; import { getFindServiceSaveFlag } from '../../services/product'; import { ProjectService } from '../../services';

const [saveFlag, setSaveFlag] = useState(false); const [serviceModuleData, setServiceModuleData] = useState([]); const [isChange, setIsChange] = useState(false); const [toggle, setToggle] = useState(true); useEffect(() => { const getData = async () => { const result = await getFindServiceSaveFlag(productInfo.id, productInfo.deviceTypeId); oldServiceModuleData = JSON.stringify(result.serviceModuleList); setServiceModuleData(result.serviceModuleList); setSaveFlag(result.saveFlag); }; if (productInfo.id) { getData(); } }, [productInfo]);

const handleGroupChange = useCallback((group: any) => { const item = serviceModuleData.find((i: any) => i.id === group.id); if (item.status !== 1) { // 功能组的status为1表示必选 item.whetherCheck = !item.whetherCheck; } setServiceModuleData(JSON.parse(JSON.stringify(serviceModuleData))); // setServiceModuleData(JSON.parse(oldServiceModuleData)); setToggle(() => oldServiceModuleData !== serviceModuleData); setIsChange(!isChange); }, [serviceModuleData, isChange]);

const updataModul = useCallback(() => { if (toggle) { const serviceModuleListParams = []; let actionList: any[]; let propertyList: any[]; let eventList: any[];

  serviceModuleData.forEach((item: any) => {
    if (item.whetherCheck || item.status === 1) {
      actionList = [];
      propertyList = [];
      eventList = [];
      item.actionList.forEach((v: any) => {
        if (v.whetherCheck || v.actionInfo.propertyStatus === 1) {
          actionList.push(v);
        }
      });
      item.propertyList.forEach((v: any) => {
        if (v.whetherCheck || v.propertyStatus === 1) {
          propertyList.push(v);
        }
      });
      item.eventList.forEach((v: any) => {
        if (v.whetherCheck || v.eventInfo.propertyStatus === 1) {
          eventList.push(v);
        }
      });
      if (eventList.length > 0 || propertyList.length > 0 || actionList.length > 0 || item.status === 1) {
        const parames = {
          serviceModuleId: item.id,
          parentServiceModuleId: item.parentId,
          actionList,
          propertyList,
          eventList,
        };
        serviceModuleListParams.push(parames);
      }
    }
  });
} else {
  return false;
}
console.log(serviceModuleData, 'serviceModuleData');

}, [serviceModuleData, toggle]);

const onCancel = useCallback(() => { // debugger; setServiceModuleData(JSON.parse(oldServiceModuleData)); setIsChange(false); if (!toggle) { setToggle(!toggle); } }, [toggle]);

const onClass = (whetherCheck: boolean) => whetherCheck ? ${classes.active} : ${classes.default}; const onDisplay = (whetherCheck: boolean) => whetherCheck ? ${classes.flex} ${classes.marginL70} ${classes.show} : ${classes.flex} ${classes.marginL70} ${classes.hide};

// TODO // const proDetail = storage.get('productDetail') || {}; const proStatus = 1;

} ); };

return ( <Box className={${classes.h4} ${classes.buttonFlex}}>

Select common function

{isChange && saveFlag && <Box className={(proStatus === 1 || proStatus === 2) ? ${classes.rightSave} : ${classes.buttonDefault}}> Content changed. It will be effective after saved. <Button onClick={updataModul} // disabled={proStatus === 1 || proStatus === 2} // 审核通过或者审核中，无法保存 > Save Cancel }

means default，cannot be unselected.

{serviceModuleData.map((group: any, index: any) => (

<Checkbox className={classes.checkbox} value="secondary" color="primary" disabled={group.status === 1} checked={group.whetherCheck} onChange={() => handleGroupChange(group)} /> <Button key={group.id} disabled={group.status === 1}> {group.status === 1 && } {group.name}

Attribution

{ getFeature(group, 'propertyList', index) }

Method

{ getFeature(group, 'actionList', index) }

Event

{ getFeature(group, 'eventList', index) }

      ))}
    </div>
  </div>
  {!saveFlag &&
    <Button
      variant="contained"
      color="primary"
      className={`${classes.center} ${classes.button1}`}
      onClick={updataModul}
    >
      Confirm
    </Button>
  }
</Box>

); };

export default SelectFunction;