epic-designer-gold 0.0.2 → 0.0.4

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

@@ -0,0 +1,300 @@
+<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" />
+    <button @click="clickBtn">123</button>
+  </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",
+          componentProps: {
+            name: "default",
+            labelWidth: "100px",
+            "label-position": "left",
+          },
+          children: [
+            {
+              label: "输入框",
+              type: "input",
+              field: "input_vwshzbh4",
+              input: true,
+              componentProps: {
+                placeholder: "请输入",
+              },
+              id: "input_vwshzbh4",
+            },
+            {
+              label: "文本域",
+              type: "textarea",
+              field: "textarea_ujrxokhv",
+              input: true,
+              componentProps: {
+                placeholder: "请输入",
+                type: "textarea",
+              },
+              id: "textarea_ujrxokhv",
+            },
+            {
+              label: "签名板",
+              type: "sign",
+              field: "sign_dq9effkl",
+              input: true,
+              componentProps: {
+                placeholder: "请输入",
+                lineWidth: 4,
+                type: "sign",
+                style: {
+                  height: "300px",
+                },
+              },
+              id: "sign_dq9effkl",
+            },
+            {
+              label: "数字输入框",
+              type: "number",
+              field: "number_2gdc2bz4",
+              input: true,
+              componentProps: {
+                placeholder: "请输入",
+              },
+              id: "number_2gdc2bz4",
+            },
+            {
+              label: "单选框",
+              type: "radio",
+              field: "radio_08to6m8k",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+                size: "default",
+              },
+              id: "radio_08to6m8k",
+            },
+            {
+              label: "选择框",
+              type: "select",
+              field: "select_2cujxrch",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+                dynamicId: "",
+                placeholder: "请选择",
+                size: "default",
+                effect: "light",
+                placement: "bottom-start",
+              },
+              id: "select_2cujxrch",
+            },
+            {
+              label: "复选框",
+              type: "checkbox",
+              field: "checkbox_k5fuincx",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+              },
+              id: "checkbox_k5fuincx",
+            },
+            {
+              label: "选择框",
+              type: "select",
+              field: "select_nwnr2gi4",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+                dynamicId: "",
+                placeholder: "请选择",
+                size: "default",
+                effect: "light",
+                placement: "bottom-start",
+              },
+              id: "select_nwnr2gi4",
+            },
+            {
+              label: "级联选择器",
+              type: "cascader",
+              field: "cascader_lkegcxw2",
+              input: true,
+              componentProps: {
+                options: [
+                  {
+                    label: "选项1",
+                    value: "选项1",
+                  },
+                  {
+                    label: "选项2",
+                    value: "选项2",
+                  },
+                ],
+                placeholder: "请选择",
+                props: {
+                  expandTrigger: "click",
+                },
+              },
+              id: "cascader_lkegcxw2",
+            },
+            {
+              label: "日期选择器",
+              type: "date",
+              field: "date_3m3r8yei",
+              input: true,
+              componentProps: {
+                type: "date",
+                valueFormat: "YYYY-MM-DD",
+                format: "YYYY-MM-DD",
+                placeholder: "请选择",
+                startPlaceholder: "请选择",
+                endPlaceholder: "请选择",
+              },
+              id: "date_3m3r8yei",
+            },
+            {
+              label: "上传文件",
+              type: "upload-file",
+              field: "upload-file_p97cle2g",
+              input: true,
+              componentProps: {
+                action: "https://ess-ds.com/prod-api/center-file/file/upload",
+                name: "file",
+                showFileList: true,
+              },
+              id: "upload-file_p97cle2g",
+            },
+            {
+              label: "上传图片",
+              type: "upload-image",
+              field: "upload-image_mgzqosy1",
+              input: true,
+              componentProps: {
+                action: "https://ess-ds.com/prod-api/center-file/file/upload",
+                name: "file",
+                showFileList: true,
+              },
+              id: "upload-image_mgzqosy1",
+            },
+            {
+              label: "开关",
+              type: "switch",
+              field: "switch_402nv37g",
+              input: true,
+              componentProps: {
+                defaultValue: false,
+              },
+              id: "switch_402nv37g",
+            },
+            {
+              label: "颜色选择器",
+              type: "color-picker",
+              field: "color-picker_3op0082n",
+              input: true,
+              id: "color-picker_3op0082n",
+            },
+            {
+              label: "滑块",
+              type: "slider",
+              field: "slider_kvmzt4po",
+              input: true,
+              componentProps: {
+                placement: "top-start",
+                showTooltip: true,
+              },
+              id: "slider_kvmzt4po",
+            },
+            {
+              label: "按钮",
+              type: "button",
+              field: "button_f7f5u73x",
+              input: false,
+              id: "button_f7f5u73x",
+              componentProps: {
+                type: "success",
+                "native-type": "button",
+              },
+              on: {
+                click: [
+                  {
+                    type: "custom",
+                    methodName: "test",
+                    componentId: null,
+                  },
+                ],
+              },
+            },
+          ],
+          id: "form_upyow58j",
+        },
+      ],
+      componentProps: {
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ],
+  script:
+    "const { defineExpose, find } = epic;\n\nfunction test (){\n    console.log('test',find('form_upyow58j').getData())\n    return find('form_upyow58j').getData()\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test\n})",
+});
+async function clickBtn() {
+  console.log(
+    "%c [ ebRef.value.getForms() ]-276",
+    "font-size:13px; background:pink; color:#bf2c9f;",
+    await ebRef.value.validateAll()
+  );
+}
+</script>

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

@@ -0,0 +1,227 @@
+<template>
+  <div class="main">
+    <h2 class="pt-4 pl-8 text-24px block">自定义表单</h2>
+    <!-- <EBuilder ref="ebRef" :pageSchema="pageSchema"> </EBuilder> -->
+    <div class="form-table">
+      <div class="form-table-btn">
+        <el-button type="primary" @click="addForm"> 新建表单</el-button>
+      </div>
+      <div class="form-table-main">
+        <div class="table" v-if="formType === 'dataList'">
+          <div class="table-item" v-for="item in formData" :key="item.id">
+            <div class="table-item-content">
+              <div>{{ item.formName }}</div>
+              <div>{{ item.createTime }}</div>
+            </div>
+            <div class="table-item-btn">
+              <el-button type="primary" text @click="editForm(item)"> 编辑</el-button>
+              <el-button type="danger" text @click="deleteForm(item)"> 删除</el-button>
+            </div>
+          </div>
+        </div>
+        <EDesigner
+          ref="designerRef"
+          v-else
+          :source="sourceData"
+          @saveSourceData="saveSourceData"
+          @deleteSourceData="deleteSourceData"
+          @updateSourceData="updateSourceData"
+          @save="handleSubmit"
+          title="EpicDesigner"
+        >
+        </EDesigner>
+      </div>
+    </div>
+    <!-- <Divider orientation="left">页面结构数据</Divider>
+    <MonacoEditor class="flex-1" :modelValue="pageSchema" autoToggleTheme readOnly valueFormat="json" /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref } from "vue";
+import { EBuilder, PageSchema, EDesigner } from "@epic-designer/core";
+import { pluginManager } from "@epic-designer/utils";
+import { Divider } from "ant-design-vue";
+import { ElButton } from "element-plus";
+import axios from "axios";
+const formType = ref("dataList");
+const designerRef = ref<InstanceType<typeof EDesigner>>();
+const sourceData = ref();
+const formId = ref("");
+function addForm() {
+  // isAdd.value = !isAdd.value;
+  formType.value = "addForm";
+}
+/**
+ * 点击保存按钮操作
+ * @param e
+ */
+function handleSubmit(e: PageSchema) {
+  console.log(e);
+  saveForm(e);
+}
+async function saveForm(data: any) {
+  if (formType.value === "editForm") {
+    let res = await axios({
+      method: "put",
+      url: `/process/custom-form/${formId.value}`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {
+        companyCode: "1",
+        formName: "表单名称",
+        formClassify: 1,
+        user_id: "1",
+        sourceId: sourceData.value.map((el: Record<string, string>) => +el.id),
+        formStruct: JSON.stringify(data),
+      },
+    });
+    if (res.data.code === 200) {
+      getFormData();
+      formType.value = "dataList";
+    }
+  } else {
+    let res = await axios({
+      method: "post",
+      url: "/process/custom-form",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {
+        companyCode: "1",
+        formName: "表单名称",
+        formClassify: 1,
+        user_id: "1",
+        sourceId: sourceData.value.map((el: Record<string, string>) => +el.id),
+        formStruct: JSON.stringify(data),
+      },
+    });
+    if (res.data.code === 200) {
+      getFormData();
+      formType.value = "dataList";
+    }
+  }
+}
+
+async function editForm(e: any) {
+  formType.value = "editForm";
+  formId.value = e.id;
+  nextTick(() => {
+    designerRef.value?.setData(JSON.parse(e.formStruct));
+  });
+
+  // let res = await axios({
+  //   method: "put",
+  //   url: `/process/custom-form/${e.id}`,
+  // });
+}
+async function deleteForm(e: any) {
+  let res = await axios({
+    method: "delete",
+    url: `/process/custom-form/${e.id}`,
+  });
+  if (res.data.code === 200) {
+    getFormData();
+  }
+}
+async function getFormData() {
+  let res = await axios({
+    method: "get",
+    url: "/process/custom-form/list",
+    params: {
+      companyCode: "1",
+      formName: "",
+      formClassify: "",
+      // page: 1,
+      // size: 10,
+    },
+  });
+  if (res.data.code === 200) {
+    formData.value = res.data.data.list ? res.data.data.list : [];
+  }
+}
+const formData = ref<any>([]);
+getFormData();
+// 保存数据源
+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>
+<style lang="less" scoped>
+.main {
+  height: 100%;
+}
+.form-table {
+  height: calc(100% - 56px);
+  &-btn {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 18px;
+  }
+  &-main {
+    height: calc(100% - 50px);
+    width: 100%;
+    padding: 16px;
+    .table {
+      height: calc(100% - 32px);
+      width: calc(100% - 32px);
+      &-item {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: space-between;
+        &-content {
+          width: calc(100% - 200px);
+          padding: 16px;
+          display: flex;
+          > div {
+            flex: 1;
+            &:first-child {
+              // font-weight: bold;
+              font-size: 14px;
+              font-weight: 500;
+            }
+          }
+        }
+        &-btn {
+          width: 160px;
+          display: flex;
+        }
+        &:hover {
+          background: #f5f7fa;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,153 @@
+<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",
+          "componentProps": {
+            "size": "default",
+            "labelWidth": 100,
+            "labelCol": {
+              "span": 5
+            },
+            "wrapperCol": {
+              "span": 19
+            },
+            "style": {
+              "width": "600px"
+            },
+            "hideRequiredMark": false,
+            "labelPosition": "right",
+            "requireAsteriskPosition": "left",
+            "labelLayout": "fixed"
+          },
+          "id": "3543akxhdum00",
+          "name": "default",
+          "children": [
+            {
+              "label": "栅格布局",
+              "type": "row",
+              "icon": "icon-zhage",
+              "children": [
+                {
+                  "type": "col",
+                  "children": [
+                    {
+                      "label": "禁用姓名",
+                      "type": "switch",
+                      "icon": "icon-kaiguan3",
+                      "field": "switch_vhzz40mc",
+                      "input": true,
+                      "componentProps": {
+                        "disabled": false
+                      },
+                      "id": "switch_vhzz40mc",
+                      "on": {
+                        "change": [
+                          {
+                            "type": "custom",
+                            "methodName": "setDisabled",
+                            "componentId": null
+                          }
+                        ]
+                      }
+                    }
+                  ],
+                  "componentProps": {
+                    "span": 12
+                  },
+                  "id": "col_fmqw6vre"
+                },
+                {
+                  "type": "col",
+                  "children": [
+                    {
+                      "label": "隐藏姓名",
+                      "type": "switch",
+                      "icon": "icon-kaiguan3",
+                      "field": "switch_k561x18z",
+                      "input": true,
+                      "componentProps": {},
+                      "id": "switch_k561x18z",
+                      "on": {
+                        "change": [
+                          {
+                            "type": "custom",
+                            "methodName": "test",
+                            "componentId": null
+                          }
+                        ]
+                      }
+                    }
+                  ],
+                  "componentProps": {
+                    "span": 12
+                  },
+                  "id": "col_i5q4prg6"
+                }
+              ],
+              "id": "row_w2fw9pkw"
+            },
+            {
+              "label": "姓名",
+              "type": "input",
+              "icon": "icon-write",
+              "field": "input_ho0tpt7i7tc00",
+              "input": true,
+              "componentProps": {
+                "placeholder": "请输入",
+                "defaultValue": "",
+                "size": "default",
+                "type": "text",
+                "hidden": false,
+                "disabled": false
+              },
+              "id": "ho0tpt7i7tc00",
+              "on": {
+                "input": [
+                  {
+                    "type": "custom",
+                    "methodName": "test",
+                    "componentId": null
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ],
+      "componentProps": {
+        "style": {
+          "padding": "16px"
+        }
+      }
+    }
+  ],
+  "script": "const { defineExpose, getComponent } = this;\n\nfunction test (e){\n    getComponent('ho0tpt7i7tc00').setAttr('hidden',e)\n}\n\nfunction setDisabled (e){\n    getComponent('ho0tpt7i7tc00').setAttr('disabled',e)\n}\n\n// 通过defineExpose暴露的函数或者属性\ndefineExpose({\n test,\n setDisabled\n})"
+})
+
+</script>