epic-designer-gold 0.0.4 → 0.0.5

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

@@ -1,300 +0,0 @@
-<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

@@ -1,227 +0,0 @@
-<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

@@ -1,153 +0,0 @@
-<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>