github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-11 17:32:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆕 优化表单组件, 添加一键导入json文件功能,可以基于json一键生成页面

Browse Source
This commit is contained in:
xujiang 2020-11-12 20:31:28 +08:00
parent 4523394462
commit 255d24f80f
6 changed files with 103 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BasicShop/BasicComponents/Form/schema.ts
View File

@ -110,7 +110,7 @@ const Form: IFormSchema = {
titColor: 'rgba(60,60,60,1)',
titWeight: '400',
bgColor: 'rgba(255,255,255,1)',
btnColor: 'rgba(129,173,173,1)',
btnColor: 'rgba(20,54,226,100)',
btnTextColor: 'rgba(255,255,255,1)',
api: '',
formControls: [

8
src/pages/editor/Container.tsx
View File

@ -188,6 +188,13 @@ const Container = (props: {
};
}, [dispatch]);
const importTpl = data => {
dispatch({
type: 'editorModal/importTplData',
payload: data,
});
};
useEffect(() => {
if (window.innerWidth < 1024) {
props.history.push('/mobileTip');
@ -440,6 +447,7 @@ const Container = (props: {
pointData={context.theme === 'h5' ? pointData : cpointData}
clearData={clearData}
location={props.location}
importTpl={importTpl}
/>
<div className={styles.container}>
<div

104
src/pages/editor/SourceBox.tsx
View File

@ -89,55 +89,70 @@ const SourceBox = memo((props: SourceBoxProps) => {
const dragStop: ItemCallback = useMemo(() => {
return (layout, oldItem, newItem, placeholder, e, element) => {
if (context.theme === 'h5') {
const curPointData = pointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorModal/modPointData',
payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
});
} else {
const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorPcModal/modPointData',
payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
});
}
const curPointData = pointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorModal/modPointData',
payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
});
// if (context.theme === 'h5') {
// const curPointData = pointData.filter(item => item.id === newItem.i)[0];
// dispatch({
// type: 'editorModal/modPointData',
// payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
// });
// } else {
// const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
// dispatch({
// type: 'editorPcModal/modPointData',
// payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
// });
// }
};
}, [context.theme, cpointData, dispatch, pointData]);
const onDragStart: ItemCallback = useMemo(() => {
return (layout, oldItem, newItem, placeholder, e, element) => {
if (context.theme === 'h5') {
const curPointData = pointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorModal/modPointData',
payload: { ...curPointData, status: 'inToCanvas' },
});
} else {
const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorPcModal/modPointData',
payload: { ...curPointData, status: 'inToCanvas' },
});
}
const curPointData = pointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorModal/modPointData',
payload: { ...curPointData, status: 'inToCanvas' },
});
// if (context.theme === 'h5') {
// const curPointData = pointData.filter(item => item.id === newItem.i)[0];
// dispatch({
// type: 'editorModal/modPointData',
// payload: { ...curPointData, status: 'inToCanvas' },
// });
// } else {
// const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
// dispatch({
// type: 'editorPcModal/modPointData',
// payload: { ...curPointData, status: 'inToCanvas' },
// });
// }
};
}, [context.theme, cpointData, dispatch, pointData]);
const onResizeStop: ItemCallback = useMemo(() => {
return (layout, oldItem, newItem, placeholder, e, element) => {
if (context.theme === 'h5') {
const curPointData = pointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorModal/modPointData',
payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
});
} else {
const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorPcModal/modPointData',
payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
});
}
const curPointData = pointData.filter(item => item.id === newItem.i)[0];
dispatch({
type: 'editorModal/modPointData',
payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
});
// if (context.theme === 'h5') {
// const curPointData = pointData.filter(item => item.id === newItem.i)[0];
// dispatch({
// type: 'editorModal/modPointData',
// payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
// });
// } else {
// const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
// dispatch({
// type: 'editorPcModal/modPointData',
// payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
// });
// }
};
}, [context.theme, cpointData, dispatch, pointData]);
const initSelect: any = (data: any = []) => {
@ -249,17 +264,6 @@ const SourceBox = memo((props: SourceBoxProps) => {
data-grid={value.point}
>
<DynamicEngine {...value.item} isTpl={false} />
{/* <div
className={styles.tooltip}
style={{ display: value.isMenu ? 'block' : 'none' }}
>
<div className="tooltipRow1">
<a>恢复</a>
</div>
<div className="tooltipRow2">
<a>删除</a>
</div>
</div> */}
</div>
))}
</GridLayout>

5
src/pages/editor/components/Header/index.less
View File

@ -35,7 +35,7 @@
text-align: center;
}
.btnArea {
width: 390px;
width: 250px;
margin-left: 20px;
text-align: right;
}
@ -53,8 +53,5 @@
.controlArea {
width: auto;
}
.btnArea {
width: 30%;
}
}
}

36
src/pages/editor/components/Header/index.tsx
View File

@ -1,5 +1,5 @@
import React, { useRef, memo, useContext, useState, useEffect } from 'react';
import { Button, Input, Modal, Select } from 'antd';
import React, { useRef, memo, useMemo, useContext, useState, useEffect } from 'react';
import { Button, Input, Modal, Select, Upload } from 'antd';
import {
ArrowLeftOutlined,
MobileOutlined,
@ -11,6 +11,7 @@ import {
FileAddOutlined,
CodeOutlined,
SketchOutlined,
UploadOutlined,
} from '@ant-design/icons';
import { history } from 'umi';
import QRCode from 'qrcode.react';
@ -31,10 +32,11 @@ interface HeaderComponentProps {
clearData: any;
undohandler: any;
redohandler: any;
importTpl: any;
}
const HeaderComponent = memo((props: HeaderComponentProps) => {
const { pointData, location, clearData, undohandler, redohandler } = props;
const { pointData, location, clearData, undohandler, redohandler, importTpl } = props;
const [showModalIframe, setShowModalIframe] = useState(false);
const iptRef = useRef<Input>(null);
@ -185,6 +187,24 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
setShowModalIframe(false);
};
}, []);
const uploadprops = useMemo(
() => ({
name: 'file',
showUploadList: false,
beforeUpload(file, fileList) {
// 解析并提取excel数据
let reader = new FileReader();
reader.onload = function(e: Event) {
let data = (e as any).target.result;
importTpl && importTpl(JSON.parse(data));
};
reader.readAsText(file);
},
}),
[],
);
const { setTheme } = useContext(dooringContext);
return (
<div className={styles.header}>
@ -206,6 +226,11 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
>
保存模版
</Button>
<Upload {...uploadprops}>
<Button type="link" style={{ marginRight: '8px' }}>
<UploadOutlined />
</Button>
</Upload>
<Button
type="link"
style={{ marginRight: '9px' }}
@ -277,7 +302,8 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
</Button>
</div>
<div className={styles.btnArea}>
<Select
{/* 隐藏pc端切换, 保证代码纯粹 */}
{/* <Select
defaultValue="h5"
style={{ width: 100, marginRight: 20 }}
onChange={e => {
@ -286,7 +312,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
>
<Select.Option value="h5">h5模式</Select.Option>
<Select.Option value="pc">pc模式</Select.Option>
</Select>
</Select> */}
<Button type="primary" ghost onClick={toOnlineCoding} style={{ marginRight: '12px' }}>
<CodeOutlined />
在线编程

8
src/pages/editor/models/editorModal.js
View File

@ -44,6 +44,14 @@ export default {
curPoint: payload,
};
},
importTplData(state, { payload }) {
overSave('userData', payload);
return {
...state,
pointData: payload,
curPoint: null,
};
},
copyPointData(state, { payload }) {
const { id } = payload;
const pointData = [];