diff --git a/src/components/BasicShop/BasicComponents/Form/schema.ts b/src/components/BasicShop/BasicComponents/Form/schema.ts index 2327cf3..08ede67 100644 --- a/src/components/BasicShop/BasicComponents/Form/schema.ts +++ b/src/components/BasicShop/BasicComponents/Form/schema.ts @@ -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: [ diff --git a/src/pages/editor/Container.tsx b/src/pages/editor/Container.tsx index 2660185..31cd7c7 100644 --- a/src/pages/editor/Container.tsx +++ b/src/pages/editor/Container.tsx @@ -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} />
{ 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} > - {/*
-
- 恢复 -
-
- 删除 -
-
*/}
))} diff --git a/src/pages/editor/components/Header/index.less b/src/pages/editor/components/Header/index.less index a4aae39..3b58168 100644 --- a/src/pages/editor/components/Header/index.less +++ b/src/pages/editor/components/Header/index.less @@ -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%; - } } } diff --git a/src/pages/editor/components/Header/index.tsx b/src/pages/editor/components/Header/index.tsx index 0cf5adc..c84cf9e 100644 --- a/src/pages/editor/components/Header/index.tsx +++ b/src/pages/editor/components/Header/index.tsx @@ -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(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 (
@@ -206,6 +226,11 @@ const HeaderComponent = memo((props: HeaderComponentProps) => { > 保存模版 + + +
- + */}