starfish-editor-custom 1.0.0

package/dist/types/editor/src/type.d.ts

@@ -0,0 +1,224 @@
+import type { UiControl } from "./controller/ui";
+import type { hisContrl } from "./controller/history";
+import type { formContrl } from "./controller/form";
+import type { ActionForm } from "./controller/action";
+import type { shortCut } from "./controller/shortcut";
+import type { FormConfig, fields } from "starfish-form/src/main";
+/**
+ * 组件名称枚举
+ */
+type ComponentListEnum = Omit<keyof typeof window.VApp.$formcomponents, "symbol">;
+interface ColumnWidth {
+    left: number;
+    center: number;
+    right: number;
+}
+export interface UiState {
+    /**
+     * 编辑器各模块宽度
+     */
+    columnWidth: ColumnWidth;
+    /**
+     * 弹窗宽度
+     */
+    dialogWidth: number;
+    /**
+     * 编辑器缩放比例
+     */
+    scale: number;
+    /**
+     * 编辑器是否全屏
+     */
+    isFullscreen: boolean;
+    /**
+     * 页面类型
+     */
+    pageType: string;
+    /**
+     * 右侧配置菜单是否隐藏
+     */
+    rightClose: boolean;
+    /**
+     * 左侧表单列表模块是否隐藏
+     */
+    leftClose: boolean;
+}
+export interface Controls {
+    uiControl: UiControl;
+    hisContrl: hisContrl;
+    formStore: formContrl;
+    actionContrl: ActionForm;
+    store: shortCut;
+}
+export interface setColumnWidth {
+    left?: number;
+    center?: number | "auto";
+    right?: number;
+}
+export interface GetColumnWidth {
+    left: number;
+    center: number;
+    right: number;
+}
+export interface HistoryState {
+    /**
+     * 存储的所有历史行为
+     */
+    historyList: HistoryItem[];
+    /**
+     * 当前所在的历史行为
+     */
+    index: number;
+    /**
+     * 是否正在执行后退或前进,是则阻止进入历史快走中
+     */
+    historyFlag: boolean;
+    /**
+     * 历史回退最大步数
+     */
+    maxStep: number;
+}
+export interface ShortCutState {
+    form: FormState;
+    copyContent: AllFormItem | Record<string, any>;
+    curList: AllFormItem[];
+}
+export interface HistoryItem {
+    allFormList: AllFormItem[];
+    currentIndex: number;
+    currentId: string;
+    curControl: AllFormItem | Record<string, any>;
+}
+export type MenuItem = "delete" | "undo" | "redo" | "tree" | "save" | "preview" | "fullscreen" | "viewport" | "json-export" | "json-import";
+export type MenuRight = "viewport" | "json-export" | "json-import";
+export type MenuBarData = {
+    left: MenuItem[];
+    right: MenuRight[];
+    column: boolean;
+};
+export interface FormState {
+    /**
+     * 存储所有选择的表单控件
+     */
+    allFormList: AllFormItem[];
+    /**
+     * 选中的表单控件
+     */
+    curControl: AllFormItem | Record<string, any>;
+    /**
+     * 选中的控件的id
+     */
+    currentId: string;
+    /**
+     * 选中的控件的索引
+     */
+    currentIndex: number;
+    /**
+     * 开启预览进行表单验证
+     */
+    preview: boolean;
+    /**
+     * 预览是否展示
+     */
+    previewShow: boolean;
+    /**
+     * 保存
+     */
+    save: boolean;
+    /**
+     * 下一次保存的时候判断表单是否变更了，而不用变更就改变save，但是我们监听了save会形成死循环
+     * 判断表单是否更新
+     */
+    formUpdate: boolean;
+    /**
+     * 预览和存储到数据库最终结果
+     */
+    AllFormResult: any[];
+    /**
+     * 用户在动态表单输入的配置结果
+     */
+    formResult: Record<string, any>;
+    /**
+     * 表单全局配置
+     */
+    globalDatas: Record<string, any>;
+    /**
+     * 全局表单配置列表
+     */
+    globalFormList: BaseFormConfig[];
+}
+interface FormRule {
+    fieldName: any[];
+    label: any[];
+}
+export interface AllFormItem {
+    /**
+     * 组件渲染唯一标识
+     */
+    ControlType: ComponentListEnum;
+    /**
+     * 表单配置所需的表单配置列表
+     */
+    controlItems: FormConfig[];
+    /**
+     * 表单配置
+     */
+    data: fields;
+    /**
+     * 获取配置列表和配置方法列表
+     */
+    formConfig: {
+        data: () => fields;
+        morenConfig: () => FormConfig[];
+    };
+    /**
+     * 组件icon图标
+     */
+    icon: string;
+    /**
+     * 组件唯一id
+     */
+    id: string;
+    /**
+     * 组件名称
+     */
+    nameCn: string;
+    /**
+     * 是否是布局表单
+     */
+    layout: boolean;
+    /**
+     * 规则
+     */
+    rules: FormRule;
+}
+export interface BaseComponentItem {
+    /**
+     * 组件渲染唯一标识
+     */
+    ControlType: ComponentListEnum;
+    /**
+     * 组件icon图标
+     */
+    icon: string;
+    /**
+     * 组件名称
+     */
+    nameCn: string;
+    /**
+     * 是否是布局表单
+     */
+    layout: boolean;
+    /**
+     * 规则
+     */
+    rules?: FormRule;
+}
+export type RequiredKey<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]-?: T[P];
+};
+export type PartialKey<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]?: T[P];
+};
+export type BaseFormConfig = FormConfig;
+export {};

package/dist/types/editor/src/utils/_.d.ts

@@ -0,0 +1,33 @@
+import { AllFormItem } from '../type';
+declare class Flex {
+    lastClickTime: number;
+    openTanc: boolean;
+    constructor();
+    clickCountLimit(): boolean;
+    generateMixed(size?: number): string;
+    controlFormRule(controlItems: any[]): any;
+    deepClone(target: any): any;
+    tryParseJson(json: string): any;
+    open(message: string, title?: string, type?: any): void;
+    getJsonValidate(): any;
+    getDataType(data: any): any;
+    /**
+     * json转标准数据格式进行收口
+     */
+    jsonToForm(item: AllFormItem): AllFormItem;
+    /**
+     * 完整的表单列表数据进行删减,方便展示
+     */
+    initFormToJson(formlist: AllFormItem[]): PartialKey<BaseComponentItem, "icon">[];
+    funcExec(action: string, proxy: any, argus?: any): void;
+    getField(methods: string): "" | "value, oldValue, subFormData" | "field";
+    /**
+     * 获取显示条件所有字段列表
+     * item: 其他表单数据
+     * result 最终的结果
+     * fieldName 过滤当前选中表单的字段(显示规则不能根据自身的值进行展示)
+     */
+    getFormDataList(item: AllFormItem, result: any, fieldName: string): void;
+}
+declare const _default: Flex;
+export default _default;

package/dist/types/editor/src/utils/formKeycon.d.ts

@@ -0,0 +1,18 @@
+export declare function clearCanvas(): void;
+export declare function copy(): void;
+export declare function paste(): void;
+export declare function cut(): void;
+export declare function onDelete(): void;
+export declare function onTop(): void;
+export declare function onBottom(): void;
+declare const result: {
+    copy: typeof copy;
+    paste: typeof paste;
+    cut: typeof cut;
+    delete: typeof onDelete;
+    onTop: typeof onTop;
+    onBottom: typeof onBottom;
+    clearCanvas: typeof clearCanvas;
+};
+export type shortCutType = typeof result;
+export default result;

package/dist/types/editor/src/utils/shortcutKey.d.ts

@@ -0,0 +1,3 @@
+import KeyController from "keycon";
+import type { shortCutType } from './formKeycon';
+export declare function listenGlobalKeyDown(list: shortCutType, dom: HTMLDivElement | any): KeyController;

package/dist/types/editor/src/utils/vm.d.ts

@@ -0,0 +1,3 @@
+import type { Emitter, EventType } from 'mitt';
+declare const _default: Emitter<Record<EventType, unknown>>;
+export default _default;

package/dist/types/starfish-editor.d.ts

@@ -0,0 +1,3 @@
+export * from './editor/src/main'
+import StarfishEditor from './editor/src/main'
+export default StarfishEditor

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "starfish-editor-custom",
+  "version": "1.0.0",
+  "main": "dist/starfish-editor.umd.js",
+  "style": "dist/style.css",
+  "module": "dist/starfish-editor.es.js",
+  "types": "dist/types/starfish-editor.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/starfish-editor.es.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@babel/core": "^7.18.5",
+    "@codemirror/lang-css": "6.0.0",
+    "@codemirror/lang-html": "6.1.0",
+    "@codemirror/lang-javascript": "6.0.2",
+    "@codemirror/lang-json": "6.0.0",
+    "clipboard": "^2.0.11",
+    "codemirror": "6.0.1",
+    "core-js": "^3.6.5",
+    "element-plus": "^2.2.12",
+    "gesto": "^1.9.0",
+    "jsoneditor": "^9.9.0",
+    "keycon": "^1.1.2",
+    "mitt": "^3.0.0",
+    "nanoid": "^4.0.0",
+    "starfish-form": "^1.2.9",
+    "vue": "^3.2.37",
+    "vue-codemirror": "6.1.1",
+    "vuedraggable": "^4.1.0",
+    "wangeditor": "^4.7.15"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
+    "cross-env": "^7.0.3",
+    "live-server": "^1.2.2",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "sass": "^1.42.1",
+    "typescript": "^4.3.4",
+    "vite": "^2.9.12",
+    "vite-plugin-dts": "^1.2.0",
+    "vue-tsc": "^0.34.7"
+  }
+}

package/src/common/ConditionSelect/ConditionGroup.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="conditionSelect" :class="result.type">
+    <!-- {{ result.type }} -->
+    <div class="control" v-show="result.result && result.result.length > 0 && result.type !== 'data'">
+      <span class="iconfontui icon-jiahao" v-if="!result.control" @click="handleControl(true)"></span>
+      <span class="iconfontui icon-jianhao" v-else @click="handleControl(false)"></span>
+    </div>
+    <el-select v-model="result.type" placeholder="请选择" @change="onChange">
+      <el-option v-for="item in groupSelect" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+    </el-select>
+    <el-button type="primary" @click="onAddItem" size="small" :disabled="!result.type || result.type == 'data'">增加条件</el-button>
+    <el-button type="danger" @click="onDeleteItem" size="small">删除</el-button>
+    <el-button type="primary" v-if="result.type == 'data'" @click="onEditData" size="small">编辑</el-button>
+    <Transition>
+      <div v-show="result.type && result.type !== 'data' && result.control" class="moreCondition">
+        <div v-for="(item, index) in result.result" :key="index" class="selectList">
+          <ConditionGroup :result="item" @update="handleUpdateForce" @delete="handleDelete" :index="index" :fieldList="fieldList" />
+        </div>
+        <div class="line" :class="result.type" v-if="result.result && result.result.length >= 2"></div>
+      </div>
+    </Transition>
+    <div v-show="result.type && result.type == 'data'">
+      <ConditionTanc ref="ConditionTanc" :data="result.data" :fieldList="fieldList" @end="handleUpdateForce"></ConditionTanc>
+    </div>
+  </div>
+</template>
+<script>
+  import ConditionTanc from "./ConditionTanc.vue";
+  export default {
+    name: "ConditionGroup",
+    components: {
+      ConditionTanc,
+    },
+    props: {
+      result: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+      index: {
+        type: Number,
+        default: 0,
+      },
+      fieldList: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+      rightField: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+
+      request: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+    },
+    data() {
+      return {
+        groupSelect: [
+          {
+            value: "andgroup",
+            label: "+并组",
+          },
+          {
+            value: "orgroup",
+            label: "+或组",
+          },
+          {
+            value: "data",
+            label: "条件",
+          },
+        ],
+      };
+    },
+    watch: {
+      result: {
+        handler() {
+          this.$forceUpdate();
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      onAddItem() {
+        if (!this.result.type) return;
+        if (!this.result.result && this.result.type != "data") {
+          this.result.result = [];
+        }
+        if (this.result.type == "data" && !this.result.data) {
+          this.result.data = {};
+        }
+        this.result.control = true;
+
+        switch (this.result.type) {
+          case "orgroup":
+            this.result.result.push({ type: "orgroup", result: [] });
+            break;
+          case "andgroup":
+            this.result.result.push({ type: "andgroup", result: [] });
+            break;
+          case "data":
+            this.result.result.push({ type: "data", data: {} });
+            break;
+        }
+        this.handleUpdateForce();
+      },
+      handleControl(bool) {
+        this.result.control = bool;
+        this.handleUpdateForce();
+      },
+      onDeleteItem() {
+        if (this.index == 0) {
+          delete this.result.data;
+          delete this.result.result;
+          delete this.result.type;
+          this.handleUpdateForce();
+        } else {
+          this.$emit("delete", this.index);
+        }
+      },
+      handleDelete(index) {
+        this.result.result.splice(index, 1);
+        this.handleUpdateForce();
+      },
+      onChange(a) {
+        this.result.type = a;
+        if (a == "andgroup") {
+          this.result.result = [];
+          if (this.result.data) {
+            delete this.result.data;
+          }
+        } else if (a == "orgroup") {
+          this.result.result = [];
+          if (this.result.data) {
+            delete this.result.data;
+          }
+        } else {
+          this.result.data = {};
+          if (this.result.result) {
+            delete this.result.result;
+          }
+          // this.$nextTick(() => {
+          //   if (this.$refs.ConditionTanc) {
+          //     this.$refs.ConditionTanc.show();
+          //   }
+          // });
+        }
+        this.handleUpdateForce();
+      },
+      handleUpdateForce() {
+        this.$forceUpdate();
+        this.$emit("update");
+      },
+      onEditData() {
+        this.$refs.ConditionTanc.show(this.result.data);
+      },
+    },
+  };
+</script>

package/src/common/ConditionSelect/ConditionModule.vue

@@ -0,0 +1,118 @@
+<template>
+  <CustomDialog ref="maxJsonDialog" dialogclass="conditionModule">
+    <el-main style="padding: 0">
+      <el-container style="height: 100%">
+        <el-main class="my-pageMain">
+          <div class="tipContent">满足以下所有条件时,此组件可用</div>
+          <div class="conditionContainer">
+            <ConditionGroup :result="result" @update="handleUpdateForce" :fieldList="leftField" />
+            <!-- :rightField="rightField"
+              :request="request" -->
+
+            <div class="stringlist"><pre v-html="stringLink"></pre></div>
+          </div>
+        </el-main>
+
+        <el-footer class="my-Footer" style="height: 60px; padding-top: 10px">
+          <el-button type="primary" @click="saveJson">保存</el-button>
+          <el-button @click="closeDialog">关闭</el-button>
+        </el-footer>
+      </el-container>
+    </el-main>
+  </CustomDialog>
+</template>
+<script>
+  import ConditionGroup from "./ConditionGroup.vue";
+  import formStore from "@/controller/form";
+  import { toRaw } from "vue";
+  export default {
+    components: {
+      ConditionGroup,
+    },
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+      item: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+    },
+    data() {
+      return {
+        result: {},
+        stringLink: "",
+        leftField: [],
+        rightField: [],
+        condition: [],
+        request: [],
+      };
+    },
+    watch: {
+      result: {
+        handler() {
+          console.log(this.result);
+          this.$forceUpdate();
+        },
+        deep: true,
+      },
+    },
+    emits: ["change"],
+    methods: {
+      async show() {
+        this.$refs.maxJsonDialog.init("可用条件", "icon-icon-bianji");
+        this.$refs.maxJsonDialog.show();
+        await this.$nextTick();
+        const allFormList = formStore?.get("allFormList");
+        const fieldResult = [];
+        toRaw(allFormList)?.forEach((item) => {
+          window.VueContext.$Flex.getFormDataList(item, fieldResult, this.data.fieldName);
+        });
+        this.result = typeof this.data[this.item.data.fieldName] == "string" ? JSON.parse(this.data[this.item.data.fieldName]) : this.data[this.item.data.fieldName];
+        console.log(fieldResult);
+        this.leftField = fieldResult;
+      },
+      handleUpdateForce() {
+        this.$forceUpdate();
+        this.stringLink = this.filterCondition(this.result);
+      },
+      filterCondition(result) {
+        if (result.type == "andgroup" || result.type == "orgroup") {
+          const b = result.result.map((item) => this.filterCondition(item)).join(result.type == "andgroup" ? '<span class="and">and</span>' : '<span class="or">or</span>');
+          const a = `<span class='kh ${result.type}'>(${b})</span>`;
+          return a;
+        } else if (result.type == "data") {
+          return `<span class='data kh'>${this.getDataConditionRelate(result)}</span>`;
+        } else {
+          return "";
+        }
+      },
+      getDataConditionRelate(data) {
+        if (Object.keys(data.data).length == 0) return "空";
+        const fieldData = data.data;
+        const field = fieldData.field;
+        let value;
+        if (fieldData.type == "选项") {
+          const rightField = fieldData.value;
+          value = `${JSON.stringify(rightField)}`;
+        } else if (fieldData.type == "常量" || fieldData.type == "布尔") {
+          value = fieldData.value;
+        }
+        return `${field} ${fieldData.logic} ${value}`;
+      },
+      closeDialog() {
+        this.$refs.maxJsonDialog.close();
+      },
+      saveJson() {
+        this.$emit("change", this.result);
+        // this.data[this.item.data.fieldName] = this.result;
+        this.closeDialog();
+      },
+    },
+  };
+</script>