优化代码结构

zyd_public/components/lowCodeEdit/EditDrawer.js

+import { Button, Drawer, Input, message } from 'antd';
+import React, { useEffect, useState, useRef } from 'react';
+import { connect } from 'dva';
+import ButtonDiy from '@/baseComponent/ButtonDiy';
+
+const { TextArea } = Input;
+
+function EditDrawer(props) {
+	const { dispatch, templateData, TEMPLATE } = props;
+
+	const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development');
+	const saveTimeOut = useRef();
+	const [lowCodeEdit, setLowCodeEdit] = useState({});
+
+	useEffect(
+		() => {
+			if (templateData) {
+				setLowCodeEdit({ ...templateData });
+			}
+		},
+		[templateData],
+	);
+
+	const onClose = () => {
+		setShowEdit(!showEdit);
+	};
+
+	const handleSaveTemplate = () => {
+		const content = JSON.stringify(lowCodeEdit);
+		message.info('正在保存数据,请耐心等待');
+		dispatch({
+			type: 'lowCode_design/saveTemplateApi',
+			payload: {
+				name: lowCodeEdit.name,
+				content,
+				TEMPLATE,
+			},
+			callback: () => {
+				saveTimeOut.current = null;
+			},
+		});
+	};
+	const changeKey = (value, key) => {
+		let newCodeEdit = lowCodeEdit;
+		newCodeEdit[key] = value;
+		setLowCodeEdit(newCodeEdit);
+	};
+
+	// TODO localStorage 事件中获取的state 不是最新的.
+
+	const handleLocalStorageSave = (e) => {
+		if (e.key === 'edit-low-code-local') {
+			const newV = e.newValue;
+			if (newV && newV.length > 20) {
+				changeKey(newV, 'beforeShow');
+				if (!saveTimeOut.current) {
+					// saveTimeOut.current = window.setTimeout(() => {
+					//   handleSaveTemplate();
+					// }, 500);
+				}
+			}
+		}
+	};
+
+	useEffect(
+		() => {
+			if (lowCodeEdit?.beforeShow) {
+				window.addEventListener('storage', handleLocalStorageSave);
+			}
+			return () => {
+				window.removeEventListener('storage', handleLocalStorageSave);
+			};
+		},
+		[lowCodeEdit.beforeShow],
+	);
+
+	const editFullScreen = () => {
+		localStorage.setItem('edit-low-code-local', lowCodeEdit['beforeShow']);
+		if(process.env.NODE_ENV === 'development'){
+      window.open('http://scjoyedu.eicp.net:51352/wisdomSchool/#/quanPingBianji');
+    }
+		window.open(window.location.origin + '/wisdomSchool/#/quanPingBianji');
+	};
+
+	return (
+		<>
+			<Drawer
+				title="编辑"
+				placement="right"
+				onClose={onClose}
+				visible={showEdit}
+				width={700}
+				maskClosable={false}>
+				<TextArea
+					autoSize={{
+						minRows: 5,
+						maxRows: 10,
+					}}
+					value={JSON.stringify(templateData, null, '\t')}
+					disabled={true}
+					style={{ marginBottom: '20px' }}
+				/>
+				挂载前执行
+				<ButtonDiy name={'全屏编辑'} handleClick={editFullScreen} type={'danger'} />
+				<TextArea
+					autoSize={{
+						minRows: 10,
+						maxRows: 20,
+					}}
+					defaultValue={lowCodeEdit?.beforeShow || ''}
+					onChange={(e) => {
+						changeKey(e.target.value, 'beforeShow');
+					}}
+					// readOnly={true}
+					style={{ marginBottom: '20px' }}
+				/>
+				<Button onClick={handleSaveTemplate} type={'primary'}>
+					保存
+				</Button>
+			</Drawer>
+			<div
+				style={{
+					height: '10px',
+					width: '10px',
+					cursor: 'pointer',
+				}}
+				onClick={() => {
+					setShowEdit(!showEdit);
+				}}
+			/>
+		</>
+	);
+}
+
+export default connect(({ lowCode_design }) => {
+	return {
+		templateData: lowCode_design.templateData,
+	};
+})(EditDrawer);