编辑器修改

zyd_public/components/lowCodeEdit/EditDrawer.js

@@ -6,134 +6,136 @@ import ButtonDiy from '@/baseComponent/ButtonDiy';
 const { TextArea } = Input;
 
 function EditDrawer(props) {
-	const { dispatch, templateData, TEMPLATE } = props;
+  const { dispatch, templateData, TEMPLATE } = props;
 
-	const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development');
-	const saveTimeOut = useRef();
-	const [lowCodeEdit, setLowCodeEdit] = useState({});
+  const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development');
+  const saveTimeOut = useRef();
+  const [lowCodeEdit, setLowCodeEdit] = useState({});
 
-	useEffect(
-		() => {
-			if (templateData) {
-				setLowCodeEdit({ ...templateData });
-			}
-		},
-		[templateData],
-	);
+  useEffect(
+    () => {
+      if (templateData) {
+        setLowCodeEdit({ ...templateData });
+      }
+    },
+    [templateData],
+  );
 
-	const onClose = () => {
-		setShowEdit(!showEdit);
-	};
+  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);
-	};
+  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 不是最新的.
+  // 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);
-				}
-			}
-		}
-	};
+  const handleLocalStorageSave = (e) => {
+    if (e.key === 'save-low-code-local') {
+      const newV = e.newValue;
+      if (newV && newV.length > 20) {
+        changeKey(newV, 'beforeShow');
+        if (!saveTimeOut.current) {
+          saveTimeOut.current = window.setTimeout(() => {
+            message.info('正在保存');
+            handleSaveTemplate();
+          }, 500);
+        }
+      }
+    }
+  };
 
-	useEffect(
-		() => {
-			if (lowCodeEdit?.beforeShow) {
-				window.addEventListener('storage', handleLocalStorageSave);
-			}
-			return () => {
-				window.removeEventListener('storage', handleLocalStorageSave);
-			};
-		},
-		[lowCodeEdit.beforeShow],
-	);
+  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');
+  const editFullScreen = () => {
+    localStorage.setItem('edit-low-code-local', JSON.stringify(lowCodeEdit));
+    if(process.env.NODE_ENV === 'development'){
+      window.open('http://scjoyedu.eicp.net:51352/wisdomSchool/#/quanPingBianji?id=' + lowCodeEdit.TEMPLATE);
     }
-		window.open(window.location.origin + '/wisdomSchool/#/quanPingBianji');
-	};
+    window.open(window.location.origin + '/wisdomSchool/#/quanPingBianji?id=' + lowCodeEdit.TEMPLATE);
+  };
 
-	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);
-				}}
-			/>
-		</>
-	);
+  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 || ''}
+          readOnly={true}
+          // 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,
-	};
+  return {
+    templateData: lowCode_design.templateData,
+  };
 })(EditDrawer);