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

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: [

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}
       />
       <div className={styles.container}>
         <div

src/pages/editor/SourceBox.tsx

@@ -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 {
+      // if (context.theme === 'h5') {
-        const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
+      //   const curPointData = pointData.filter(item => item.id === newItem.i)[0];
-        dispatch({
+      //   dispatch({
-          type: 'editorPcModal/modPointData',
+      //     type: 'editorModal/modPointData',
-          payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
+      //     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 {
+      // if (context.theme === 'h5') {
-        const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
+      //   const curPointData = pointData.filter(item => item.id === newItem.i)[0];
-        dispatch({
+      //   dispatch({
-          type: 'editorPcModal/modPointData',
+      //     type: 'editorModal/modPointData',
-          payload: { ...curPointData, status: 'inToCanvas' },
+      //     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 {
+      // if (context.theme === 'h5') {
-        const curPointData = cpointData.filter(item => item.id === newItem.i)[0];
+      //   const curPointData = pointData.filter(item => item.id === newItem.i)[0];
-        dispatch({
+      //   dispatch({
-          type: 'editorPcModal/modPointData',
+      //     type: 'editorModal/modPointData',
-          payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
+      //     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>

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%;
-    }
   }
 }

src/pages/editor/components/Header/index.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, memo, useContext, useState, useEffect } from 'react';
+import React, { useRef, memo, useMemo, useContext, useState, useEffect } from 'react';
-import { Button, Input, Modal, Select } from 'antd';
+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 />
           在线编程

src/pages/editor/models/editorModal.js

@@ -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 = [];