epic-designer-gold 0.0.0 → 0.0.1

package/examples/src/views/builder/disableDisplay copy/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="epic-page-main p-2">
+    <EBuilder ref="ebRef" :pageSchema="pageSchema" @ready="handleReady">
+    </EBuilder>
+    <div @click="handleGetData">
+      获取数据
+    </div>
+    {{ data }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { EBuilder, PageManager, PageSchema } from '@epic-designer/core'
+
+const ebRef = ref<any>(null)
+const data = ref({})
+async function handleGetData() {
+  const values = await ebRef.value?.getData()
+  data.value = values
+}
+const pageSchema = ref<PageSchema>({
+  "schemas": [
+    {
+      "type": "page",
+      "id": "root",
+      "label": "页面",
+      "children": [
+        {
+          "label": "表单",
+          "type": "form",
+          "icon": "epic-icon-daibanshixiang",
+          "componentProps": {
+            "name": "default",
+            "labelWidth": 100,
+            "labelCol": {
+              "span": 5
+            },
+            "wrapperCol": {
+              "span": 19
+            },
+            "hideRequiredMark": false,
+            "labelPlacement": "left",
+            "labelAlign": "right",
+            "requireMarkPlacement": "right",
+            "size": "medium"
+          },
+          "children": [
+            {
+              "label": "输入框22",
+              "type": "input",
+              "field": "input_sb6jhfb8",
+              "icon": "epic-icon-write",
+              "input": true,
+              "componentProps": {
+                "defaultValue": "",
+                "placeholder": "请输入",
+                "type": "text",
+                "size": "medium",
+                "disabled": false
+              },
+              "id": "input_sb6jhfb8"
+            },
+            {
+              "label": "按钮",
+              "type": "button",
+              "field": "button_ks9jbmym",
+              "icon": "epic-icon-button-remove",
+              "input": false,
+              "componentProps": {
+                "bordered": true,
+                "type": "default",
+                "size": "medium"
+              },
+              "id": "button_ks9jbmym",
+              "on": {
+                "click": [
+                  {
+                    "type": "custom",
+                    "methodName": "test",
+                    "componentId": null
+                  }
+                ]
+              }
+            }
+          ],
+          "id": "form_18vemlk8"
+        }
+      ],
+      "componentProps": {
+        "style": {
+          "padding": "16px"
+        }
+      }
+    }
+  ],
+  "script": "const { defineExpose, find } = epic;\n\nfunction test (){\n    console.log('test')\n    find('input_sb6jhfb8').setAttr('disabled',!find('input_sb6jhfb8').getAttr('disabled'))\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test \n})"
+})
+
+
+function handleReady(pageManager: PageManager) {
+  console.log(pageManager)
+}
+// 表单赋值
+onMounted(async () => {
+  const data = await ebRef.value?.validate()
+  console.log(data)
+})
+
+
+</script>

package/examples/src/views/builder/loadData/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="epic-page-main p-2 h-full flex flex-col">
+    <h2 class="pt-4 pl-8 text-24px block">数据回显</h2>
+    <EBuilder ref="ebRef" :pageSchema="pageSchema"> </EBuilder>
+    <Divider orientation="left">页面结构数据</Divider>
+    <MonacoEditor class="flex-1" :modelValue="pageSchema" autoToggleTheme readOnly valueFormat="json" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { EBuilder, PageSchema } from "@epic-designer/core";
+import { pluginManager } from "@epic-designer/utils";
+import { Divider } from "ant-design-vue";
+
+const MonacoEditor = pluginManager.getComponent("monacoEditor");
+const ebRef = ref<InstanceType<typeof EBuilder>>();
+
+const pageSchema = ref<PageSchema>({
+  schemas: [
+    {
+      type: "page",
+      id: "root",
+      label: "页面",
+      children: [
+        {
+          label: "签名板",
+          type: "sign",
+          field: "sign_d8nxq6ja",
+          input: true,
+          componentProps: {
+            placeholder: "请输入",
+            type: "sign",
+            style: {
+              width: "600px",
+              height: "600px",
+              margin: "40px",
+            },
+          },
+          id: "sign_d8nxq6ja",
+        },
+      ],
+      componentProps: {
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ],
+  script:
+    "const { defineExpose, find } = epic;\n\nfunction test (){\n    console.log('test')\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test\n})",
+});
+
+onMounted(() => {
+  ebRef.value?.setData({
+    radio_shndnr9b: "女",
+    input_2drzm924: "芷音",
+    number_x4t431jb: 18,
+    checkbox_1l91io8k: ["唱", "跳", "rap", "篮球"],
+    textarea_1ihmowjl: "Two and a half years of practice as a programmer",
+  });
+
+  setTimeout(() => {
+    ebRef.value?.setData({
+      input_2drzm924: "妮泰梅",
+    });
+  }, 3000);
+});
+</script>

package/examples/src/views/builder/loadFormData/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="epic-page-main p-2 h-full flex flex-col">
+    <h2 class="pt-4 pl-8 text-24px block">数据回显</h2>
+    <EBuilder :pageSchema="pageSchema" :formData="formData">
+    </EBuilder>
+    <Divider orientation="left">页面结构数据</Divider>
+    <MonacoEditor class="flex-1" :modelValue="pageSchema" autoToggleTheme readOnly valueFormat="json" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { EBuilder, PageSchema } from '@epic-designer/core'
+import { pluginManager } from '@epic-designer/utils'
+import { Divider } from 'ant-design-vue'
+
+const MonacoEditor = pluginManager.getComponent('monacoEditor')
+
+const pageSchema = ref<PageSchema>({
+  "schemas": [
+    {
+      "type": "page",
+      "id": "root",
+      "label": "页面",
+      "children": [
+        {
+          "label": "表单",
+          "type": "form",
+          "icon": "epic-icon-daibanshixiang",
+          "componentProps": {
+            "layout": "horizontal",
+            "name": "default",
+            "labelWidth": 100,
+            "labelLayout": "fixed",
+            "labelCol": {
+              "span": 5
+            },
+            "wrapperCol": {
+              "span": 19
+            },
+            "hideRequiredMark": false,
+            "colon": true,
+            "labelAlign": "right",
+            "size": "middle",
+            "style": {
+              "width": "600px"
+            }
+          },
+          "children": [
+            {
+              "label": "栅格布局",
+              "type": "row",
+              "icon": "epic-icon-zhage",
+              "children": [
+                {
+                  "type": "col",
+                  "children": [
+                    {
+                      "label": "姓名",
+                      "type": "input",
+                      "field": "input_2drzm924",
+                      "icon": "epic-icon-write",
+                      "input": true,
+                      "componentProps": {
+                        "bordered": true,
+                        "placeholder": "请输入"
+                      },
+                      "id": "input_2drzm924"
+                    }
+                  ],
+                  "componentProps": {
+                    "span": 12
+                  },
+                  "id": "col_m17ttkgz"
+                },
+                {
+                  "type": "col",
+                  "children": [
+                    {
+                      "label": "年龄",
+                      "type": "number",
+                      "icon": "epic-icon-number",
+                      "field": "number_x4t431jb",
+                      "input": true,
+                      "componentProps": {
+                        "style": {
+                          "width": "100%"
+                        },
+                        "placeholder": "请输入"
+                      },
+                      "id": "number_x4t431jb"
+                    }
+                  ],
+                  "componentProps": {
+                    "span": 12
+                  },
+                  "id": "col_6uvxdrme"
+                }
+              ],
+              "id": "row_fpuoo21a"
+            },
+            {
+              "label": "性别",
+              "type": "radio",
+              "icon": "epic-icon-danxuan-cuxiantiao",
+              "field": "radio_shndnr9b",
+              "input": true,
+              "componentProps": {
+                "options": [
+                  {
+                    "label": "男",
+                    "value": "男"
+                  },
+                  {
+                    "label": "女",
+                    "value": "女"
+                  }
+                ],
+                "optionType": "default",
+                "defaultValue": "男"
+              },
+              "id": "radio_shndnr9b"
+            },
+            {
+              "label": "兴趣",
+              "type": "checkbox",
+              "icon": "epic-icon-duoxuan1",
+              "field": "checkbox_1l91io8k",
+              "input": true,
+              "componentProps": {
+                "options": [
+                  {
+                    "label": "唱",
+                    "value": "唱"
+                  },
+                  {
+                    "label": "跳",
+                    "value": "跳"
+                  },
+                  {
+                    "label": "rap",
+                    "value": "rap"
+                  },
+                  {
+                    "label": "篮球",
+                    "value": "篮球"
+                  }
+                ]
+              },
+              "id": "checkbox_1l91io8k"
+            },
+            {
+              "label": "个人简介",
+              "type": "textarea",
+              "field": "textarea_1ihmowjl",
+              "icon": "epic-icon-edit",
+              "input": true,
+              "componentProps": {
+                "placeholder": "请输入",
+                "autoSize": {
+                  "minRows": 4
+                }
+              },
+              "id": "textarea_1ihmowjl"
+            }
+          ],
+          "id": "form_eifo73no"
+        }
+      ],
+      "componentProps": {
+        "style": {
+          "padding": "16px"
+        }
+      }
+    }
+  ],
+  "script": "const { defineExpose, find } = epic;\n\nfunction test (){\n    console.log('test')\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test \n})"
+})
+
+const formData = ref(
+  {
+    "radio_shndnr9b": "女",
+    "input_2drzm924": "芷音",
+    "number_x4t431jb": 18,
+    "checkbox_1l91io8k": [
+      "唱",
+      "跳",
+      "rap",
+      "篮球"
+    ],
+    "textarea_1ihmowjl": "Two and a half years of practice as a programmer"
+  }
+)
+
+</script>

package/examples/src/views/builder/sum/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="epic-page-main p-2 h-full flex flex-col">
+    <h2 class="pt-4 pl-8 text-24px block">计算求和</h2>
+
+    <EBuilder ref="ebRef" :pageSchema="pageSchema">
+    </EBuilder>
+    <Divider orientation="left">页面结构数据</Divider>
+    <MonacoEditor class="flex-1" :modelValue="pageSchema" autoToggleTheme readOnly valueFormat="json" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { EBuilder, PageSchema } from '@epic-designer/core'
+import { pluginManager } from '@epic-designer/utils'
+import { Divider } from 'ant-design-vue'
+
+const MonacoEditor = pluginManager.getComponent('monacoEditor')
+const ebRef = ref<InstanceType<typeof EBuilder>>()
+
+const pageSchema = ref<PageSchema>({
+  "schemas": [
+    {
+      "type": "page",
+      "id": "root",
+      "label": "页面",
+      "children": [
+        {
+          "label": "表单",
+          "type": "form",
+          "icon": "icon-daibanshixiang",
+          "name": "default",
+          "componentProps": {
+            "labelWidth": 100,
+            "labelCol": {
+              "span": 5
+            },
+            "wrapperCol": {
+              "span": 19
+            },
+            "hideRequiredMark": false,
+            "labelPosition": "right",
+            "size": "default",
+            "requireAsteriskPosition": "left",
+            "labelLayout": "fixed",
+            "style": {
+              "width": "600px"
+            }
+          },
+          "children": [
+            {
+              "label": "数值1",
+              "type": "number",
+              "icon": "icon-number",
+              "field": "number_9m5zzib6",
+              "input": true,
+              "componentProps": {
+                "style": {
+                  "width": "100%"
+                },
+                "placeholder": "请输入"
+              },
+              "id": "1",
+              "on": {
+                "change": [
+                  {
+                    "type": "custom",
+                    "methodName": "test",
+                    "componentId": null
+                  }
+                ]
+              }
+            },
+            {
+              "label": "数值2",
+              "type": "number",
+              "icon": "icon-number",
+              "field": "number_szitefkr",
+              "input": true,
+              "componentProps": {
+                "style": {
+                  "width": "100%"
+                },
+                "placeholder": "请输入"
+              },
+              "id": "2",
+              "on": {
+                "change": [
+                  {
+                    "type": "custom",
+                    "methodName": "test",
+                    "componentId": null
+                  }
+                ]
+              }
+            },
+            {
+              "label": "总值",
+              "type": "number",
+              "icon": "icon-number",
+              "field": "number_bs7n1wpv",
+              "input": true,
+              "componentProps": {
+                "style": {
+                  "width": "100%"
+                },
+                "placeholder": "请输入"
+              },
+              "id": "3"
+            }
+          ],
+          "id": "3543akxhdum00"
+        }
+      ],
+      "componentProps": {
+        "style": {
+          "padding": "16px"
+        }
+      }
+    }
+  ],
+  "script": "const { defineExpose, getComponent } = this;\n\nfunction test (e){\n    const sum = (getComponent('1').getValue()??0)+ (getComponent('2').getValue()??0)\n    getComponent('3').setValue(sum)\n    \n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test \n})"
+})
+
+
+
+</script>

package/examples/src/views/designer/basic/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <EDesigner
+    ref="designerRef"
+    :source="sourceData"
+    @saveSourceData="saveSourceData"
+    @deleteSourceData="deleteSourceData"
+    @updateSourceData="updateSourceData"
+    @save="handleSubmit"
+    title="EpicDesigner基础用法示例"
+  >
+    <template #header-prefix>
+      <div>欢迎使用EpicDesigner设计器</div>
+    </template>
+  </EDesigner>
+</template>
+<script lang="ts" setup>
+import { EDesigner, type PageSchema } from "@epic-designer/core";
+import { ref } from "vue";
+import axios from "axios";
+
+const designerRef = ref<InstanceType<typeof EDesigner>>();
+const sourceData = ref();
+/**
+ * 点击保存按钮操作
+ * @param e
+ */
+function handleSubmit(e: PageSchema) {
+  console.log(e);
+}
+// 保存数据源
+async function saveSourceData(e: any) {
+  let res = await axios({
+    method: "post",
+    url: "/process/data-source",
+    data: e,
+  });
+  getSourceData();
+}
+async function getSourceData() {
+  let res = await axios({
+    url: "/process/data-source/1",
+    method: "get",
+  });
+  sourceData.value = !!res.data.data ? res.data.data : [];
+}
+getSourceData();
+async function deleteSourceData(e: string) {
+  let res = await axios({
+    url: `/process/data-source/${e}`,
+    method: "delete",
+  });
+  getSourceData();
+}
+async function updateSourceData(e: any) {
+  let res = await axios({
+    method: "put",
+    url: `/process/data-source/${e.id}`,
+    data: e,
+  });
+  getSourceData();
+}
+</script>

package/examples/src/views/designer/formMode/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <EDesigner ref="designerRef" formMode @save="handleSubmit" title="表单模式示例">
+    <template #header-prefix>
+      <div>
+        欢迎使用EpicDesigner设计器
+      </div>
+    </template>
+  </EDesigner>
+</template>
+<script lang="ts" setup>
+import { EDesigner, type PageSchema } from '@epic-designer/core'
+import { ref } from 'vue'
+
+const designerRef = ref<InstanceType<typeof EDesigner>>()
+/**
+ * 点击保存按钮操作
+ * @param e
+ */
+function handleSubmit(e: PageSchema) {
+  console.log(e)
+}
+</script>

package/examples/src/views/designer/loadData/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <EDesigner ref="designerRef" @save="handleSubmit" title="EpicDesigner数据回显示例">
+    <template #header-prefix>
+      <div>欢迎使用EpicDesigner设计器</div>
+    </template>
+  </EDesigner>
+</template>
+<script lang="ts" setup>
+import { EDesigner, type PageSchema } from "@epic-designer/core";
+import { ref, onMounted } from "vue";
+const designerRef = ref<InstanceType<typeof EDesigner>>();
+
+const pageSchema = {
+  schemas: [
+    {
+      type: "form",
+      id: "root",
+      label: "页面",
+      children: [
+        {
+          label: "复选框",
+          type: "checkbox",
+          field: "checkbox_0hjcltp8",
+          input: true,
+          componentProps: {
+            options: [
+              {
+                label: "选项1",
+                value: "选项1",
+              },
+              {
+                label: "选项2",
+                value: "选项2",
+              },
+            ],
+          },
+          id: "checkbox_0hjcltp8",
+        },
+      ],
+      componentProps: {
+        name: "表单",
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ],
+  script:
+    "const { defineExpose, find } = epic;\n\nfunction test (){\n    console.log('test')\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test\n})",
+};
+
+onMounted(() => {
+  designerRef.value?.setData(pageSchema);
+});
+
+/**
+ * 点击保存按钮操作
+ * @param e
+ */
+function handleSubmit(e: PageSchema) {
+  console.log(e);
+}
+</script>

package/examples/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/examples/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/examples/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}