Skip to content

W
WebPublic
提交 d6e75447 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

编辑器修改

上级 e08cf547
隐藏空白字符变更
内嵌 并排
正在显示 包含 119 行增加 和 117 行删除
zyd_public/components/lowCodeEdit/EditDrawer.js
浏览文件 @ d6e75447
...@@ -6,134 +6,136 @@ import ButtonDiy from '@/baseComponent/ButtonDiy'; ...@@ -6,134 +6,136 @@ import ButtonDiy from '@/baseComponent/ButtonDiy';
const { TextArea } = Input; const { TextArea } = Input;
function EditDrawer(props) { function EditDrawer(props) {
const { dispatch, templateData, TEMPLATE } = props; const { dispatch, templateData, TEMPLATE } = props;
const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development'); const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development');
const saveTimeOut = useRef(); const saveTimeOut = useRef();
const [lowCodeEdit, setLowCodeEdit] = useState({}); const [lowCodeEdit, setLowCodeEdit] = useState({});
useEffect( useEffect(
() => { () => {
if (templateData) { if (templateData) {
setLowCodeEdit({ ...templateData }); setLowCodeEdit({ ...templateData });
} }
}, },
[templateData], [templateData],
); );
const onClose = () => { const onClose = () => {
setShowEdit(!showEdit); setShowEdit(!showEdit);
}; };
const handleSaveTemplate = () => { const handleSaveTemplate = () => {
const content = JSON.stringify(lowCodeEdit); const content = JSON.stringify(lowCodeEdit);
message.info('正在保存数据,请耐心等待'); message.info('正在保存数据,请耐心等待');
dispatch({ dispatch({
type: 'lowCode_design/saveTemplateApi', type: 'lowCode_design/saveTemplateApi',
payload: { payload: {
name: lowCodeEdit.name, name: lowCodeEdit.name,
content, content,
TEMPLATE, TEMPLATE,
}, },
callback: () => { callback: () => {
saveTimeOut.current = null; saveTimeOut.current = null;
}, },
}); });
}; };
const changeKey = (value, key) => { const changeKey = (value, key) => {
let newCodeEdit = lowCodeEdit; let newCodeEdit = lowCodeEdit;
newCodeEdit[key] = value; newCodeEdit[key] = value;
setLowCodeEdit(newCodeEdit); setLowCodeEdit(newCodeEdit);
}; };
// TODO localStorage 事件中获取的state 不是最新的. // TODO localStorage 事件中获取的state 不是最新的.
const handleLocalStorageSave = (e) => { const handleLocalStorageSave = (e) => {
if (e.key === 'edit-low-code-local') { if (e.key === 'save-low-code-local') {
const newV = e.newValue; const newV = e.newValue;
if (newV && newV.length > 20) { if (newV && newV.length > 20) {
changeKey(newV, 'beforeShow'); changeKey(newV, 'beforeShow');
if (!saveTimeOut.current) { if (!saveTimeOut.current) {
// saveTimeOut.current = window.setTimeout(() => { saveTimeOut.current = window.setTimeout(() => {
// handleSaveTemplate(); message.info('正在保存');
// }, 500); handleSaveTemplate();
} }, 500);
} }
} }
}; }
};
useEffect( useEffect(
() => { () => {
if (lowCodeEdit?.beforeShow) { if (lowCodeEdit?.beforeShow) {
window.addEventListener('storage', handleLocalStorageSave); window.addEventListener('storage', handleLocalStorageSave);
} }
return () => { return () => {
window.removeEventListener('storage', handleLocalStorageSave); window.removeEventListener('storage', handleLocalStorageSave);
}; };
}, },
[lowCodeEdit.beforeShow], [lowCodeEdit.beforeShow],
); );
const editFullScreen = () => { const editFullScreen = () => {
localStorage.setItem('edit-low-code-local', lowCodeEdit['beforeShow']); localStorage.setItem('edit-low-code-local', JSON.stringify(lowCodeEdit));
if(process.env.NODE_ENV === 'development'){ if(process.env.NODE_ENV === 'development'){
window.open('http://scjoyedu.eicp.net:51352/wisdomSchool/#/quanPingBianji'); 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 ( return (
<> <>
<Drawer <Drawer
title="编辑" title="编辑"
placement="right" placement="right"
onClose={onClose} onClose={onClose}
visible={showEdit} visible={showEdit}
width={700} width={700}
maskClosable={false}> maskClosable={false}>
<TextArea <TextArea
autoSize={{ autoSize={{
minRows: 5, minRows: 5,
maxRows: 10, maxRows: 10,
}} }}
value={JSON.stringify(templateData, null, '\t')} value={JSON.stringify(templateData, null, '\t')}
disabled={true} disabled={true}
style={{ marginBottom: '20px' }} style={{ marginBottom: '20px' }}
/> />
挂载前执行 挂载前执行
<ButtonDiy name={'全屏编辑'} handleClick={editFullScreen} type={'danger'} /> <ButtonDiy name={'全屏编辑'} handleClick={editFullScreen} type={'danger'} />
<TextArea <TextArea
autoSize={{ autoSize={{
minRows: 10, minRows: 10,
maxRows: 20, maxRows: 20,
}} }}
defaultValue={lowCodeEdit?.beforeShow || ''} defaultValue={lowCodeEdit?.beforeShow || ''}
onChange={(e) => { readOnly={true}
changeKey(e.target.value, 'beforeShow'); // onChange={(e) => {
}} // changeKey(e.target.value, 'beforeShow');
// readOnly={true} // }}
style={{ marginBottom: '20px' }} // readOnly={true}
/> style={{ marginBottom: '20px' }}
<Button onClick={handleSaveTemplate} type={'primary'}> />
保存 <Button onClick={handleSaveTemplate} type={'primary'}>
</Button> 保存
</Drawer> </Button>
<div </Drawer>
style={{ <div
height: '10px', style={{
width: '10px', height: '10px',
cursor: 'pointer', width: '10px',
}} cursor: 'pointer',
onClick={() => { }}
setShowEdit(!showEdit); onClick={() => {
}} setShowEdit(!showEdit);
/> }}
</> />
); </>
);
} }
export default connect(({ lowCode_design }) => { export default connect(({ lowCode_design }) => {
return { return {
templateData: lowCode_design.templateData, templateData: lowCode_design.templateData,
}; };
})(EditDrawer); })(EditDrawer);
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论