feat: 新增表单预览能力

config/routes/index.ts

@@ -38,6 +38,24 @@ const homeRoute = {
   component: '@/pages/home',
 };
 
+const indexComRoute = {
+  path: `/memberCenter/formView`,
+  icon: 'home',
+  name: '表单能力',
+  routes: [
+    {
+      path: `/memberCenter/formView/form`,
+      name: '表单预览',
+      component: '@/pages/formView/form',
+    },
+    {
+      path: `/memberCenter/formView/formDesign`,
+      name: '表单设计',
+      component: '@/pages/formView/formDesign',
+    }
+  ]
+}
+
 const srmPurchaserHomeRoute = {
   path: `/memberCenter/srmPurchaserHome`,
   name: 'srmPurchaserHome',
@@ -48,7 +66,7 @@ const srmPurchaserHomeRoute = {
 
 // isDev ? [ homeRoute, OrderRoute ] :
 // const routes = asyncRoutes;
-const routes = isDev ? [ homeRoute, contracRoute, CommodityRoute] : asyncRoutes;
+const routes = isDev ? [homeRoute, indexComRoute, contracRoute, CommodityRoute] : asyncRoutes;
 
 const memberCenterRoute = {
   path: '/memberCenter',
@@ -102,6 +120,7 @@ const memberCenterRoute = {
     // marketingRoute,
     // DealAbilityRoute,
     // ...asyncRoutes,
+    indexComRoute,
     ...routes,
     {
       path: '/memberCenter/noAuth',

package.json

@@ -74,6 +74,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@linkseeks/designable-component": "1.0.0",
     "@ant-design/icons": "^4.2.1",
     "@ant-design/pro-layout": "^5.0.16",
     "@antv/data-set": "^0.11.5",

src/pages/formView/form/index.tsx

+import React, { useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { SchemaForm } from '@linkseeks/designable-component';
+
+const FormLayout = () => {
+
+  const normalSchema = {
+    "type": "object",
+    "properties": {
+      "lg14okvuk25": {
+        "type": "void",
+        "x-component": "LXCard",
+        "x-component-props": {
+          "title": "基本信息",
+          "layout": 2
+        },
+        "x-designable-id": "lg14okvuk25",
+        "x-index": 0,
+        "properties": {
+          "name": {
+            "type": "string",
+            "title": "名称",
+            "x-decorator": "FormItem",
+            "x-component": "Input",
+            "x-validator": [],
+            "x-component-props": {},
+            "x-decorator-props": {
+              "colon": false,
+              "labelAlign": "left"
+            },
+            "x-designable-id": "vumg6d2f3d7",
+            "x-index": 0,
+            "name": "name",
+            "description": "",
+            "required": true
+          },
+          "age": {
+            "type": "string",
+            "title": "年龄",
+            "x-decorator": "FormItem",
+            "x-component": "Input",
+            "x-validator": [],
+            "x-component-props": {},
+            "x-decorator-props": {
+              "colon": false,
+              "labelAlign": "left"
+            },
+            "x-designable-id": "x63in1if66b",
+            "x-index": 1,
+            "name": "age"
+          }
+        }
+      }
+    },
+  }
+
+  return (
+    <PageHeaderWrapper>
+      <SchemaForm schema={normalSchema} />
+    </PageHeaderWrapper>
+  )
+}
+export default FormLayout

src/pages/formView/formDesign/index.tsx

+import React from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Button, Card, Form } from 'antd';
+
+const FormDesignLayout = () => {
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <Form.Item label='表单设计'>
+          <Button type="primary" href='http://lx-designable.lingxi0518.com/' target='_blank'>进入</Button>
+        </Form.Item>
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+export default FormDesignLayout