js:

2020-01-12 207 阅读2分钟

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

const useStyles = makeStyles((theme: Theme) => createStyles({ content: { width: '1200px', margin: '0 auto', height: 'auto', fontFamily: 'ArialMT', paddingBottom: '20px', }, flex: { display: 'flex', width: '1200px', flexWrap: 'wrap', }, header: { margin: '24px 0 0px 24px', }, h4: { fontFamily: 'Arial-BoldMT', fontSize: '16px', color: '#2C2C2C', }, span: { fontFamily: 'ArialMT', fontSize: '14px', color: '#000000', lineHeight: '16px', }, red: { color: '#F55753', }, title: { margin: '0 0 0px 24px', border: '1px solid #EAEEF1', }, h5: { background: '#EAEEF1', lineHeight: '40px', paddingLeft: '24px', height: '40px', fontFamily: 'Arial-BoldMT', fontSize: '14px', color: '#626262', margin: '0 0 16px 0', }, rightSave: { fontSize: '12px', color: '#676C73', }, padding: { paddingLeft: '24px', backgroundColor: '#fff', }, paddingButton: { padding: '0 0 24px 6px', }, button: { textTransform: 'capitalize', padding: '3px 10px', }, MuiTouchRippleRoot: { padding: '0 !importal', }, checkbox: { color: '#2BA68C', }, center: { margin: '0 auto', display: 'block', marginTop: '30px', }, button1: { textTransform: 'capitalize', backgroundColor: '#296DDA', width: '108px', height: '40px', }, }), ); const SelectFunction = () => { const classes = useStyles(); const productId = '1214889460873940993'; const deviceTypeId = '1199938732359204866'; // const [actionList, setActionList] = useState([]); // const [eventList, setEventList] = useState([]); // const [propertyList, setPropertyList] = useState([]); const [saveFlag, setSaveFlag] = useState(false); const [serviceModuleData, setServiceModuleData] = useState([]); const [isChange, setIsChange] = useState(false); const [oldServiceModuleData, setOldServiceModuleData] = useState([]); const [isActive, setIsActive] = useState(false); useEffect(() => { const getData = async () => { const result = await getFindServiceSaveFlag(productId, deviceTypeId); setServiceModuleData(result.serviceModuleList); setOldServiceModuleData(result.serviceModuleList); setSaveFlag(result.saveFlag); }; if (productId) { getData(); } }, [productId, deviceTypeId]); const handleChange = useCallback((name: string, index: number, idx: number) => { debugger; const checked = serviceModuleData[index][name][idx]; checked.whetherCheck = !checked.whetherCheck; setServiceModuleData(() => serviceModuleData.map((item: any) => { return item.id === index ? { ...item, whetherCheck: !item.whetherCheck } : item; }), ); setIsChange(()=> oldServiceModuleData !== JSON.parse(JSON.stringify(serviceModuleData)));

setSaveFlag(true);

}, [serviceModuleData,oldServiceModuleData]);

const handleTitleChange = useCallback(() => { setIsActive(!isActive); }, [isActive]); const updataModul = () => { console.log(serviceModuleData.length, '555'); console.log(111); }; const onCancel = useCallback(() => { setOldServiceModuleData(oldServiceModuleData); setIsChange(()=> serviceModuleData !== JSON.parse(JSON.stringify(oldServiceModuleData))); setIsActive(!isActive); }, [oldServiceModuleData,isActive, serviceModuleData]); // useEffect(() => { // // console.log(propertyList, 'propertyList'); // // console.log(actionList, 'actionList'); // // console.log(eventList, 'eventList'); // }, [actionList, eventList, propertyList]);

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

console.log(serviceModuleData, 'serviceModuleData111'); console.log(oldServiceModuleData, 'oldServiceModuleData222'); return ( <Box className={${classes.h4} ${classes.flex}}>

Select Function

{isChange && saveFlag && Content changed. It will be effective after saved. <Button onClick={updataModul} className={${classes.button1}} disabled={!(proStatus === null || proStatus === undefined || proStatus === 1)} > Save <Button onClick={onCancel} className={${classes.button1}}>Cancel }

means default，cannot be unselected.

{serviceModuleData.length > 0 && } {serviceModuleData.map((item: any, index: any) => (

<Button key={item.id} disabled={item.status === 1}> {item.status === 1 && } {item.name}

Attribution

{item.propertyList.length > 0 ? item.propertyList.map((i: any, iIndex: any) => ( {i.name} <Checkbox className={classes.checkbox} value="secondary" color="primary" checked={i.whetherCheck} onChange={ i.propertyStatus === 1 ? () => null : () => { handleChange('propertyList', index, iIndex); } } /> )) :
-
}
Method
{item.actionList.length > 0 ? item.actionList.map((j: any, jIndex: number) => ( {j.actionInfo.name} <Checkbox className={classes.checkbox} value="secondary" color="primary" checked={j.whetherCheck} onChange={ j.propertyStatus === 1 ? () => null : () => { handleChange('actionList', index, jIndex); } } /> )) :

-

}

Event

{item.eventList.length > 0 ? item.eventList.map((t: any, tIndex: number) => ( * {t.eventInfo.name} <Checkbox className={classes.checkbox} value="secondary" color="primary" checked={t.whetherCheck} onChange={ t.propertyStatus === 1 ? () => null : () => { handleChange('eventList', index, tIndex); } } /> )) :

-

}

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

); };

export default SelectFunction;