starfish-editor-custom 1.0.0

package/src/components/Workspace.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="editor_pages_center" @click="onEditorCenter" tabindex="1">
+    <div
+      class="canvasBox"
+      ref="canvasBox"
+      :class="[
+        fullScreen ? 'fullScreenBox' : '',
+        pageType + '_layout',
+        globalDatas.csslist?.join(' '),
+      ]"
+      :style="`--scale:${scale} `"
+    >
+      <div
+        class="draggable_container"
+        ref="dragDom"
+        @contextmenu="handleNoDraggable"
+      >
+        <div class="editForm" ref="editForm" v-show="pasteShow">
+          <span @click="handlePaste">粘贴</span>
+        </div>
+        <draggable
+          class="dragArea"
+          animation="300"
+          ghostClass="itemGhost"
+          v-model="allmainList"
+          @add="addControl"
+          group="starfish-form"
+          @choose="chooseClick"
+          item-key="id"
+          @update="changePos"
+        >
+          <template #item="{ element, index }">
+            <Shape
+              :active="currentId == element.id"
+              :currentIndex="index"
+              :currentId="element.id"
+              :item="element"
+              :len="allmainList.length"
+            >
+              <component
+                :is="element.ControlType"
+                :drag="true"
+                :item="element"
+                :data="{}"
+                v-bind="globalDatas"
+              ></component>
+            </Shape>
+          </template>
+        </draggable>
+        <div class="form-empty" v-if="allmainList.length == 0">
+          从左侧拖拽来添加字段
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  nextTick,
+  computed,
+  getCurrentInstance,
+  inject,
+} from "vue";
+// import { formcomponents } from "@/pages/Editor";
+// import formStore from "@/store/form";
+// import store from "@/store/index";
+import { paste } from "@/utils/formKeycon";
+import type { Controls, AllFormItem, BaseFormConfig } from "@/type";
+export default defineComponent({
+  setup() {
+    const { proxy } = getCurrentInstance() as any;
+    const { uiControl, store, formStore } = inject<Controls>("control") || {};
+    const formcomponents = proxy.$formcomponents;
+    // 画布dom
+    const canvasBox = ref();
+    // 页面默认大小
+    const canvasSize = ref(1);
+    // 移动的dom
+    const dragDom = ref();
+    // 粘贴模块是否显示
+    const pasteShow = ref(false);
+    const editForm = ref();
+
+    const globalDatas = computed(() => formStore?.get("globalDatas"));
+
+    const fullScreen = computed(() => uiControl?.get("isFullscreen"));
+
+    const pageType = computed(() => uiControl?.get("pageType"));
+
+    /**
+     * dynamic: true
+     * 代表全局配置可以定义到组件配置中
+     */
+    const dynamicList = computed(() =>
+      formStore?.get("globalFormList")?.filter((item: BaseFormConfig) => {
+        if (item.dynamic) {
+          return item;
+        }
+      })
+    );
+
+    const allmainList = computed({
+      get() {
+        return formStore?.get("allFormList");
+      },
+      set(value: AllFormItem[]) {
+        // 防止引用类型污染
+        value = value.map((item: AllFormItem) => {
+          console.log(formcomponents[item.ControlType as any]);
+          if (!item.data && !item.controlItems) {
+            item = proxy.$Flex.deepClone(item);
+            const currentComponent = formcomponents[item.ControlType as any];
+            item.formConfig = currentComponent.formConfig;
+            item.data = item.formConfig.data();
+            if (!item.data.fieldName) {
+              item.data.fieldName =
+                item.ControlType + "_" + proxy.$Flex.generateMixed();
+            }
+            item.id = proxy.$Flex.generateMixed();
+            let controlItems = (
+              item.formConfig.morenConfig() as Array<any>
+            ).concat(dynamicList.value);
+            /**
+             * 兼容动作面板,不同表单可能需要的事件不一样
+             */
+            if (
+              currentComponent.actionType &&
+              currentComponent.actionType.length > 0
+            ) {
+              console.log(controlItems);
+              controlItems.find((item) => {
+                if (item.ControlType == "Action") {
+                  item.data.formConfig = {
+                    value: {},
+                    items: [],
+                  };
+                  currentComponent.actionType.forEach(
+                    (action: string, index: number) => {
+                      item.data.formConfig.items.push({
+                        label: action,
+                        value: action,
+                        id: index + 1,
+                      });
+                    }
+                  );
+                }
+              });
+            } else {
+              controlItems = controlItems.filter((item) => {
+                if (item.ControlType !== "Action") {
+                  return item;
+                }
+              });
+            }
+            item.rules = proxy.$Flex.controlFormRule(controlItems, item);
+            item.controlItems = controlItems;
+          }
+          // delete item.formConfig;
+          // delete item.icon;
+          return item;
+        });
+        console.log("value", value);
+        formStore?.updateAllFormList(value);
+      },
+    });
+    const currentId = computed(() => {
+      return formStore?.get("currentId");
+    });
+
+    const handleCanvasScale = () => {
+      // 处理页面的放大缩小
+      canvasBox.value.style.transform = `scale(${canvasSize.value})`;
+    };
+    const handleCanvasSize = (size: string) => {
+      if (proxy.$Flex.clickCountLimit()) {
+        // 限制放大缩小指定范围
+        if (size === "add" && canvasSize.value < 1.5) {
+          canvasSize.value = Number((canvasSize.value + 0.1).toFixed(2));
+        } else if (size === "cut" && canvasSize.value > 0.5) {
+          canvasSize.value = Number((canvasSize.value - 0.1).toFixed(2));
+        } else if (size === "restore") {
+          canvasSize.value = 1;
+        }
+        handleCanvasScale();
+      }
+    };
+    const chooseClick = (e: any) => {
+      formStore?.setFormCurrentId(allmainList.value[e.oldIndex]?.id);
+      formStore?.setFormCurrentIndex(e.oldIndex);
+      store?.set("curList", allmainList.value);
+    };
+    const changePos = (e: any) => {
+      formStore?.setFormCurrentId(allmainList.value[e.newIndex]?.id);
+      formStore?.setFormCurrentIndex(e.newIndex);
+      store?.set("curList", allmainList.value);
+    };
+    const addControl = (e: any) => {
+      formStore?.setFormCurrentId(allmainList.value[e.newIndex]?.id);
+      formStore?.setFormCurrentIndex(e.newIndex);
+      store?.set("curList", allmainList.value);
+    };
+    const handlePaste = () => {
+      pasteShow.value = false;
+      paste();
+    };
+    const handleNoDraggable = (e: any) => {
+      if (pasteShow.value) {
+        pasteShow.value = false;
+      }
+      e.preventDefault();
+      const path = e.path;
+      for (let i = 0; i < path.length; i++) {
+        if (
+          path[i].getAttribute &&
+          path[i].getAttribute("class") &&
+          path[i].getAttribute("class").indexOf("shape") >= 0
+        ) {
+          return;
+        }
+      }
+      const x = e.offsetX;
+      const y = e.offsetY;
+      nextTick(() => {
+        editForm.value.style.left = x + "px";
+        editForm.value.style.top = y + "px";
+        pasteShow.value = true;
+      });
+    };
+    return {
+      scale: computed(() => uiControl?.get<number>("scale")),
+      globalDatas,
+      canvasBox,
+      editForm,
+      handleCanvasSize,
+      pageType,
+      canvasSize,
+      dragDom,
+      chooseClick,
+      addControl,
+      changePos,
+      allmainList,
+      currentId,
+      handleNoDraggable,
+      handlePaste,
+      pasteShow,
+      fullScreen,
+      onEditorCenter: (e: any) => {
+        if (e && e.path && e.path[0].className == "editor_pages_center") {
+          formStore?.setFormCurrentId("");
+          pasteShow.value = false;
+        }
+      },
+    };
+  },
+});
+</script>

package/src/components/globalFormList.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div
+      v-for="(item, index) in globalFormLists"
+      :key="index"
+      class="form_tab3_list"
+    >
+      <component
+        :is="item.ControlType"
+        :item="item"
+        :data="globalDatas"
+        :controlItems="globalFormLists"
+      ></component>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, computed, inject } from "vue";
+import type { Controls } from "@/type";
+export default defineComponent({
+  setup() {
+    const { formStore } = inject<Controls>("control") || {};
+    const globalFormLists = computed(() => formStore?.get("globalFormList"));
+    const globalDatas = computed(() => formStore?.get("globalDatas"));
+    return {
+      globalFormLists,globalDatas
+    };
+  },
+});
+</script>

package/src/components/jsonEditor.vue

@@ -0,0 +1,41 @@
+<template>
+  <div ref="jsonCenter"></div>
+</template>
+<script>
+import { defineComponent, ref, computed, inject, toRaw, onMounted } from "vue";
+import JSONEditor from "jsoneditor";
+export default defineComponent({
+  setup(props, context) {
+    const jsonCenter = ref();
+    let jsonEditor = undefined;
+    const { formStore } = inject("control") || {};
+    const allmainList = computed(() => formStore?.get("allFormList"));
+    const initFormToJson = (formlist) => {
+      return window.VueContext.$Flex.initFormToJson(toRaw(formlist));
+    };
+    onMounted(() => {
+      const result = initJsonCenter();
+      context.emit("editor", result);
+    });
+    function initJsonCenter() {
+      const jsonDom = jsonCenter.value;
+      if (jsonEditor) {
+        jsonEditor?.set(initFormToJson(allmainList.value));
+      } else {
+        const options = {
+          modes: ["text", "code", "view"],
+          mode: "code",
+          search: false,
+        };
+        jsonEditor = new JSONEditor(jsonDom, options);
+        jsonEditor?.set(initFormToJson(allmainList.value));
+      }
+      return jsonEditor;
+    }
+    return {
+      initJsonCenter,
+      jsonCenter,
+    };
+  },
+});
+</script>

package/src/controller/action.ts

@@ -0,0 +1,37 @@
+import { reactive } from "vue";
+
+const state = reactive({
+  action: [
+    {
+      funcName: "mounted",
+      type: "mounted",
+      methods: 'mounted',
+      funcStr: "",
+      disabled: true,
+    },
+    {
+      funcName: "updated",
+      type: "updated",
+      methods: 'updated',
+      funcStr: "",
+      disabled: true,
+    },
+  ],
+  currentAction: null,
+});
+
+class Action {
+  set(name: keyof typeof state, value: any) {
+    (state as any)[name] = value;
+  }
+
+  get(name: keyof typeof state) {
+    return (state as any)[name];
+  }
+}
+
+export {state};
+
+export type ActionForm =  Action;
+ 
+export default new Action();

package/src/controller/form.ts

@@ -0,0 +1,207 @@
+import { reactive } from "vue";
+import history from "@/controller/history";
+import { AllFormItem, FormState, BaseFormConfig } from "@/type";
+import type {fieldTds, fieldsTrs} from 'starfish-form/src/utils/fieldConfig';
+const state = reactive<FormState>({
+  allFormList: [], // 存储所有选择的表单控件
+  curControl: {}, // 选中的表单控件
+  currentIndex: -1, // 选中的控件的索引
+  currentId: "",
+  preview: false, // 开启预览进行表单验证
+  previewShow: false, // 预览是否展示
+  save: true, // 保存
+  // 下一次保存的时候判断表单是否变更了，而不用变更就改变vuex的save，但是我们监听了save会形成死循环
+  formUpdate: false, // 判断表单是否更新
+  AllFormResult: [], // 预览和存储到数据库最终结果
+  formResult: {}, // 用户在动态表单输入的配置结果
+  globalDatas: {},
+  globalFormList: [],
+});
+
+export { state };
+
+class Form {
+  updateAllFormList(allFormList: AllFormItem[]) {
+    console.log("allForm", allFormList);
+    state.allFormList = allFormList;
+    // 解决属性面板表单和jsontab切换后,数据不同步问题
+    if (state.currentIndex != -1) {
+      state.curControl = allFormList[state.currentIndex];
+    }
+  }
+  setHistory() {
+    history?.setValue({
+      allFormList: window.VueContext.$Flex.deepClone(state.allFormList),
+      currentIndex: state.currentIndex,
+      currentId: state.currentId,
+      curControl: window.VueContext.$Flex.deepClone(state.allFormList[state.currentIndex]),
+    });
+  }
+  setFormCurrentIndex(index: number) {
+    state.currentIndex = index;
+  }
+  setFormCurrentId(id: string) {
+    state.currentId = id;
+    if (id) {
+      const result = this.getCurrentItem(id);
+      state.curControl = result || {};
+    } else {
+      state.curControl = {};
+    }
+  }
+  getCurrentItem(id: string) {
+    let result;
+    state.allFormList.find((item) => {
+      if (item.id == id) {
+        result = item;
+        return item;
+      } else if (item.layout) {
+        const res = this.getLayoutCurCtrol(item, id);
+        if (res) {
+          result = res;
+          return item;
+        }
+      }
+    });
+    return result;
+  }
+  getLayoutCurCtrol(item: AllFormItem, id: string): AllFormItem | undefined {
+    let result;
+    if (item.ControlType == "TableLayout") {
+      const trs = item.data.trs;
+      if (trs && trs.length > 0) {
+        trs.find((trItem: fieldsTrs) => {
+          return trItem.tds.find((tdItem: fieldTds) => {
+            return tdItem.list.find((listItem: AllFormItem) => {
+              if (listItem.layout) {
+                if (listItem.id == id) {
+                  result = listItem;
+                } else {
+                  result = this.getLayoutCurCtrol(listItem, id);
+                }
+                return result;
+              } else if (listItem.id == id) {
+                result = listItem;
+                return result;
+              }
+            });
+          });
+        });
+      }
+    } else if (item.ControlType == "Grid") {
+      const columns = item.data.columns;
+      if (columns && columns.length > 0) {
+        columns.find((colItem: any) => {
+          return colItem.list.find((listItem: any) => {
+            if (listItem.layout) {
+              if (listItem.id == id) {
+                result = listItem;
+              } else {
+                result = this.getLayoutCurCtrol(listItem, id);
+              }
+              return result;
+            } else if (listItem.id == id) {
+              result = listItem;
+              return result;
+            }
+          });
+        });
+      }
+    } else if (item.ControlType == "Collapse" || item.ControlType == "Tabs") {
+      const items = item.data.items;
+      if (items && items.length > 0) {
+        items.find((colItem: any) => {
+          return colItem.list.find((listItem: any) => {
+            if (listItem.layout) {
+              if (listItem.id == id) {
+                result = listItem;
+              } else {
+                result = this.getLayoutCurCtrol(listItem, id);
+              }
+              return result;
+            } else if (listItem.id == id) {
+              result = listItem;
+              return result;
+            }
+          });
+        });
+      }
+    }
+    return result;
+  }
+  // 获取默认值和键名组成新对象
+  handleDynamicForm() {
+    state.formResult = this.getDynamicForm(state.AllFormResult);
+    console.log("formResult", state.formResult);
+  }
+  getDynamicForm(list: BaseFormConfig[]) {
+    const data: Record<string, any> = {};
+    list.forEach((item: BaseFormConfig) => {
+      if (item.layout) {
+        if (item.ControlType == "Grid" && item.data.columns) {
+          item.data.columns.forEach((colItem: { list: any }) => {
+            Object.assign(data, this.getDynamicForm(colItem.list));
+          });
+        } else if (item.ControlType == "TableLayout") {
+          const trs = item.data.trs;
+          if (trs && trs.length > 0) {
+            trs.forEach((trItem: any) => {
+              trItem.tds.forEach((tdItem: { list: BaseFormConfig[] }) => {
+                Object.assign(data, this.getDynamicForm(tdItem.list));
+              });
+            });
+          }
+        } else if (item.ControlType == "Collapse" || item.ControlType == "Tabs") {
+          const items = item.data.items;
+          if(items){
+            items.forEach((colItem: { list: any }) => {
+              Object.assign(data, this.getDynamicForm(colItem.list));
+            });
+          }
+        }
+      } else if (!item.layout) {
+        if (item.data.itemConfig) {
+          if (typeof item.data.itemConfig.value == "string") {
+            data[item.data.fieldName] = item.data.itemConfig.value;
+          } else {
+            // 防止对数据进行劫持监听
+            data[item.data.fieldName] = [...item.data.itemConfig.value];
+          }
+        } else {
+          data[item.data.fieldName] = item.data.default;
+        }
+      }
+    });
+    return data;
+  }
+  openPreview(preview: boolean) {
+    state.preview = preview;
+  }
+  setSave(type: boolean) {
+    state.save = type;
+  }
+  setFormUpdate(type: boolean) {
+    state.formUpdate = type;
+  }
+  getControlItems(): AllFormItem[] {
+    return state.curControl && state.curControl.controlItems;
+  }
+  getAllFormList(): AllFormItem[] {
+    return state.allFormList;
+  }
+  setAllFormList(item: AllFormItem): void {
+    state.allFormList.push(item);
+  }
+  set(name: keyof typeof state, value: any) {
+    (state as any)[name] = value;
+  }
+
+  get(name: keyof typeof state) {
+    return (state as any)[name];
+  }
+}
+
+
+export type formContrl = Form;
+
+export default new Form();

package/src/controller/history.ts

@@ -0,0 +1,57 @@
+import { reactive } from "vue";
+import { HistoryState, HistoryItem } from "@/type";
+import formStore from "./form";
+
+const state = reactive<HistoryState>({
+  historyList: [],
+  index: -1,
+  maxStep: 20,
+  historyFlag: false,
+});
+
+class History {
+  public setValue(value: HistoryItem) {
+    state.historyList.push(value);
+    if(state.historyList.length > state.maxStep){
+      state.historyList = state.historyList.slice(state.historyList.length - state.maxStep);
+    }
+    state.index = state.historyList.length - 1;
+  }
+  public back() {
+    if(state.index == -1)return;
+    state.index -= 1;
+    if (state.index > -1) {
+      state.historyFlag = true;
+      formStore?.set("allFormList", state.historyList[state.index].allFormList);
+      formStore?.set("currentIndex", state.historyList[state.index].currentIndex);
+      formStore?.set("curControl", state.historyList[state.index].curControl);
+      formStore?.set("currentId", state.historyList[state.index].currentId);
+    }else{
+      state.historyFlag = true;
+      formStore?.set("allFormList", []);
+      formStore?.set("currentIndex", -1);
+      formStore?.set("curControl", {});
+      formStore?.set("currentId", '');
+    }
+  }
+  public go() {
+    if (state.index >= state.historyList.length -1) {
+      return;
+    }
+    state.index += 1;
+    state.historyFlag = true;
+    formStore?.set("allFormList", state.historyList[state.index].allFormList);
+    formStore?.set("currentIndex", state.historyList[state.index].currentIndex);
+    formStore?.set("curControl", state.historyList[state.index].curControl);
+  }
+  public get<T>(name: keyof typeof state):T {
+    return (state as any)[name];
+  }
+  public set(name: keyof typeof state, value: any) {
+    (state as any)[name] = value;
+  }
+}
+
+export type hisContrl = History;
+
+export default new History();