epic-designer-gold 1.0.1 → 1.0.2

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

@@ -1,179 +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
-      id="1"
-      @change="change"
-      ref="ebRef"
-      :disabled="false"
-      :formData="formData"
-      :pageSchema="pageSchema"
-      sourceDateUrl="http://192.168.28.205:3000/dev-api/data-source"
-    >
-    </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 { nextTick, 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: "form",
-      id: "root",
-      label: "页面",
-      children: [
-        {
-          label: "选择框",
-          type: "select",
-          field: "select_cwkfzuxf",
-          input: true,
-          componentProps: {
-            options: [
-              {
-                label: "选项1",
-                value: "选项1",
-              },
-              {
-                label: "选项2",
-                value: "选项2",
-              },
-            ],
-            dynamicId: "",
-            placeholder: "请选择",
-            size: "default",
-            effect: "light",
-            placement: "bottom-start",
-            defaultValue: [],
-            multiple: true,
-            allowCreate: true,
-            filterable: true,
-          },
-          id: "select_cwkfzuxf",
-        },
-      ],
-      componentProps: {
-        name: "default",
-        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({});
-async function clickBtn() {
-  console.log(
-    "%c [ ebRef.value.getForms() ]-276",
-    "font-size:13px; background:pink; color:#bf2c9f;",
-    await ebRef.value?.getData()
-  );
-}
-// nextTick(() => {
-//   console.log("%c [  ]-100", "font-size:13px; background:pink; color:#bf2c9f;", ebRef.value);
-//   ebRef.value?.setData(
-//     {
-//       "upload-image_yslaary4": [
-//         {
-//           name: "documenterSign.png",
-//           percentage: 100,
-//           status: "success",
-//           size: 6969,
-//           raw: {
-//             uid: 1732875316968,
-//           },
-//           uid: 1732875316968,
-//           url: "blob:http://192.168.28.205:5173/fb631f23-9bab-4927-8447-53a2a3f0ea74",
-//           response: {
-//             code: 200,
-//             msg: null,
-//             data: {
-//               delFlag: null,
-//               createBy: "null",
-//               createTime: "2024-11-29 10:15:19",
-//               updateBy: null,
-//               updateTime: null,
-//               remark: null,
-//               params: null,
-//               id: 64614,
-//               name: "documenterSign.png",
-//               url: "https://ess-ds.com/statics/2024/11/29/20241129101519A676_b16da3d7ecec458a8ec4fb9dbdfdb2e6.png",
-//               application: null,
-//             },
-//           },
-//         },
-//         {
-//           name: "financialAuditor.png",
-//           percentage: 100,
-//           status: "success",
-//           size: 5433,
-//           raw: {
-//             uid: 1732875319711,
-//           },
-//           uid: 1732875319711,
-//           url: "blob:http://192.168.28.205:5173/9765c9df-b6b9-4503-80fe-5eaa64e92799",
-//           response: {
-//             code: 200,
-//             msg: null,
-//             data: {
-//               delFlag: null,
-//               createBy: "null",
-//               createTime: "2024-11-29 10:15:22",
-//               updateBy: null,
-//               updateTime: null,
-//               remark: null,
-//               params: null,
-//               id: 64615,
-//               name: "financialAuditor.png",
-//               url: "https://ess-ds.com/statics/2024/11/29/20241129101522A677_b3d63db0000546e092595ea04738a4b8.png",
-//               application: null,
-//             },
-//           },
-//         },
-//       ],
-//       "upload-file_ontvw8vj": [
-//         {
-//           name: "20241112102045A169_732d1d64b9834392bf03029146d0b415.txt",
-//           percentage: 100,
-//           status: "success",
-//           size: 9,
-//           raw: {
-//             uid: 1732875408734,
-//           },
-//           uid: 1732875408734,
-//           response: {
-//             code: 200,
-//             msg: null,
-//             data: {
-//               delFlag: null,
-//               createBy: "null",
-//               createTime: "2024-11-29 10:16:51",
-//               updateBy: null,
-//               updateTime: null,
-//               remark: null,
-//               params: null,
-//               id: 64616,
-//               name: "20241112102045A169_732d1d64b9834392bf03029146d0b415.txt",
-//               url: "https://ess-ds.com/statics/2024/11/29/20241129101651A678_984af2cdeffb4ead9a86fb92715ff15d.txt",
-//               application: null,
-//             },
-//           },
-//         },
-//       ],
-//     },
-//     "default",
-//     pageSchema.value
-//   );
-// });
-</script>

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

@@ -1,238 +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 :updateSourceId="updateSourceId" :source="sourceData"
-          @saveSourceData="saveSourceData" @deleteSourceData="deleteSourceData" @updateSourceData="updateSourceData"
-          @save="handleSubmit" title="EpicDesigner">
-          <template #header-prefix>
-            <div @click="handleClick">欢迎使用EpicDesigner设计器</div>
-          </template>
-        </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 updateSourceId = ref("");
-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: "gold",
-      page: 1,
-      size: 20,
-    },
-  });
-  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/21",
-    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,
-      user_id: "664",
-      form_id: 21,
-      companyCode: "gold",
-    },
-  });
-  updateSourceId.value = res.data.data.id;
-  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>

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

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