starfish-editor-custom 1.0.0

package/src/common/formJson.ts

@@ -0,0 +1,143 @@
+const globalFormList = [
+  {
+    ControlType: "RadioGroup",
+    nameCn: "选择器",
+    data: {
+      fieldName: "labelalign",
+      label: "标签对齐方式",
+      showRule: "{}",
+      rule: "[]",
+      itemConfig: {
+        value: "right",
+        items: [
+          {
+            label: "Top",
+            value: "top",
+            select: true,
+            id: 1,
+          },
+          {
+            label: "Left",
+            value: "left",
+            id: 2,
+          },
+          {
+            label: "Right",
+            value: "right",
+            select: false,
+            id: 4,
+          },
+        ],
+        id: 4,
+      },
+    },
+  },
+  {
+    ControlType: "RadioGroup",
+    nameCn: "选择器",
+    data: {
+      fieldName: "size",
+      label: "组件尺寸",
+      showRule: "{}",
+      rule: "[]",
+      itemConfig: {
+        value: "small",
+        items: [
+          {
+            label: "large",
+            value: "large",
+            select: false,
+            id: 1,
+          },
+          {
+            label: "default",
+            value: "default",
+            select: false,
+            id: 2,
+          },
+          {
+            label: "small",
+            value: "small",
+            select: true,
+            id: 3,
+          },
+        ],
+        id: 3,
+      },
+    },
+  },
+  {
+    ControlType: "InputNumber",
+    data: {
+      fieldName: "labelWidth",
+      label: "标签宽度",
+      tip: "",
+      showRule: "{}",
+      required: false,
+      rule: "[]",
+      default: 100,
+    },
+  },
+  {
+    ControlType: "Text",
+    nameCn: "文本框",
+    data: {
+      fieldName: "suffix",
+      label: "表单项后缀",
+      tip: "",
+      placeholder: "",
+      showRule: "{}",
+      required: false,
+      rule: "[]",
+      default: ":",
+    },
+  },
+  {
+    ControlType: "FormStyle",
+    nameCn: "文本框",
+    data: {
+      fieldName: "styles",
+      label: "表单样式表",
+      tip: "",
+      placeholder: "",
+      showRule: "{}",
+      required: false,
+      rule: "[]",
+      default: "",
+    },
+  },
+  {
+    ControlType: "Selecteds",
+    nameCn: "文本框",
+    dynamic: true,
+    data: {
+      fieldName: "csslist",
+      label: "自定义Class",
+      tip: "",
+      placeholder: "",
+      showRule: "{}",
+      required: false,
+      rule: "[]",
+      itemConfig: {
+        value: [],
+        items: [],
+      },
+    },
+  },
+  // {
+  //   ControlType: "FormAction",
+  //   nameCn: "文本框",
+  //   data: {
+  //     fieldName: "action",
+  //     label: "动作面板",
+  //     tip: "",
+  //     placeholder: "",
+  //     showRule: "{}",
+  //     required: false,
+  //     rule: "[]",
+  //     default: [],
+  //   },
+  // },
+];
+
+export { globalFormList };

package/src/common/formStyle.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="starfish-formitem">
+    <div class="label">
+      <label>{{ item.data.label }}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip
+        v-if="item.data.tip"
+        class="item"
+        effect="dark"
+        :content="item.data.tip"
+        placement="top"
+      >
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control">
+      <el-button
+        style="width: 100%"
+        @click="onStyleSet"
+        :type="code ? 'primary' : ''"
+        >{{ code ? "已设置" : "设置" }}</el-button
+      >
+      <custom-dialog ref="codeDialog" dialogclass="codeDialog" width="1000">
+        <div class="custom_code">
+          <codemirror
+            v-model="code"
+            placeholder=".starfish-form-css{}"
+            :style="{ height: '400px' }"
+            :autofocus="true"
+            :extensions="extensions"
+            :indent-with-tab="true"
+            :tab-size="2"
+          />
+        </div>
+        <el-footer class="my-Footer" style="text-align: center">
+          <el-button type="primary" @click="saveCssStyle">确定</el-button>
+          <el-button @click="closeCodeDialog">关闭</el-button>
+        </el-footer>
+      </custom-dialog>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, getCurrentInstance } from "vue";
+import { css } from "@codemirror/lang-css";
+import {Codemirror} from 'vue-codemirror';
+export default defineComponent({
+  ControlType: "FormStyle", // 必须与文件名匹配
+  isHide: true,
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    controlItems: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    Codemirror,
+  },
+  setup(props) {
+    const extensions = [css()];
+    const codeDialog = ref();
+    const code = ref();
+    const { proxy } = getCurrentInstance() as any;
+    return {
+      code,
+      extensions,
+      codeDialog,
+      onStyleSet() {
+        codeDialog.value.init("表单样式表", "icon-biaodan");
+        codeDialog.value.show();
+      },
+      saveCssStyle() {
+        props.data[props.item.data.fieldName] = code.value;
+        proxy.extractCssClass();
+        proxy.insertCustomCssToHead(code.value);
+        codeDialog.value.close();
+      },
+      closeCodeDialog() {
+        codeDialog.value.close();
+      },
+      extractCssClass() {
+        const regExp = /\..*{/g;
+        const result = code.value.match(regExp);
+        const cssNameArray: any[] = [];
+        if (!!result && result.length > 0) {
+          result.forEach((rItem: any) => {
+            const classArray = rItem.split(","); //切分逗号分割的多个class
+            if (classArray.length > 0) {
+              classArray.forEach((cItem: any) => {
+                const caItem = cItem.trim();
+                if (caItem.indexOf(".", 1) !== -1) {
+                  //查找第二个.位置
+                  const newClass = caItem.substring(
+                    caItem.indexOf(".") + 1,
+                    caItem.indexOf(".", 1)
+                  ); //仅截取第一、二个.号之间的class
+                  if (newClass) {
+                    cssNameArray.push(newClass.trim());
+                  }
+                } else if (caItem.indexOf(" ") !== -1) {
+                  //查找第一个空格位置
+                  const newClass = caItem.substring(
+                    caItem.indexOf(".") + 1,
+                    caItem.indexOf(" ")
+                  ); //仅截取第一、二个.号之间的class
+                  if (newClass) {
+                    cssNameArray.push(newClass.trim());
+                  }
+                } else {
+                  if (caItem.indexOf("{") !== -1) {
+                    //查找第一个{位置
+                    const newClass = caItem.substring(
+                      caItem.indexOf(".") + 1,
+                      caItem.indexOf("{")
+                    );
+                    cssNameArray.push(newClass.trim());
+                  } else {
+                    const newClass = caItem.substring(caItem.indexOf(".") + 1);
+                    cssNameArray.push(newClass.trim());
+                  }
+                }
+              });
+            }
+          });
+        }
+        props.controlItems.find((item: any) => {
+          if (item.data.fieldName == "csslist") {
+            item.data.itemConfig.items = [];
+            cssNameArray.forEach((cssName: string, index: number) => {
+              item.data.itemConfig.items.push({
+                label: cssName,
+                value: cssName,
+                select: false,
+                id: index + 1,
+              });
+            });
+            return item;
+          }
+        });
+      },
+      insertCustomCssToHead(cssCode: string) {
+        const head = document.getElementsByTagName("head")[0];
+        const oldStyle = document.getElementById("starfish-custom-css");
+        if (oldStyle) {
+          head.removeChild(oldStyle); //先清除后插入！！
+        }
+        const newStyle: any = document.createElement("style");
+        newStyle.type = "text/css";
+        newStyle.rel = "stylesheet";
+        newStyle.id = "starfish-custom-css";
+        try {
+          newStyle.appendChild(document.createTextNode(cssCode));
+        } catch (ex) {
+          newStyle.styleSheet.cssText = cssCode;
+        }
+
+        head.appendChild(newStyle);
+      },
+    };
+  },
+});
+</script>

package/src/common/jsonCode.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <codemirror
+      v-model="internalValue"
+      @input="onUpdateValue($event.target.innerText)"
+      placeholder="json导入"
+      mode="text/json"
+      :style="{ height: '400px' }"
+      :extensions="extensions"
+    />
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+import { json } from "@codemirror/lang-json";
+import {Codemirror} from "vue-codemirror";
+export default defineComponent({
+  components: {
+    Codemirror,
+  },
+  props: {
+    value: String, // 接收外部传递的值
+  },
+  emits: ["update:value"], // 定义emit事件名称
+  setup(props, context) {
+    const extensions = [json()];
+    const internalValue = ref(props.value); // 内部状态变量
+
+    function updateInternalValue(newVal) {
+      internalValue.value = newVal;
+
+      if (context.attrs["onUpdate"]) {
+        context.attrs["onUpdate"](newVal); // 调用外部传递的onUpdate函数
+      } else {
+        context.emit("update:value", newVal); // 或者直接触发emit事件
+      }
+    }
+    return {
+      extensions,
+      internalValue,
+      onUpdateValue: updateInternalValue,
+    };
+  },
+});
+</script>

package/src/components/ComponentList.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-scrollbar class="editor_pages_left">
+    <div class="filter">
+      <el-input
+        placeholder="请输入关键词进行过滤"
+        size=""
+        v-model="filterContent"
+      />
+    </div>
+    <el-button text v-if="newcomponentlist.length > 0">基础控件</el-button>
+    <draggable
+      class="dragArea list-group"
+      :list="newcomponentlist"
+      :group="{ name: 'starfish-form', pull: 'clone', put: false }"
+      :sort="false"
+      item-key="id"
+    >
+      <template #item="{ element }">
+        <div
+          class="list-group-item"
+          :alt="element.nameCn"
+          @click.stop="clickAddControl(element)"
+        >
+          <div class="form-item">
+            <span class="iconfontui" :class="element.icon"></span>
+          </div>
+          <div class="item-text">{{ element.nameCn }}</div>
+        </div>
+      </template>
+    </draggable>
+    <el-button text v-if="layoutList.length > 0">布局控件</el-button>
+    <draggable
+      class="dragArea list-group"
+      :list="layoutList"
+      :group="{ name: 'starfish-form', pull: 'clone', put: false }"
+      :sort="false"
+      item-key="id"
+    >
+      <template #item="{ element }">
+        <div
+          class="list-group-item"
+          :alt="element.nameCn"
+          @click.stop="clickAddControl(element)"
+        >
+          <div class="form-item">
+            <span class="iconfontui" :class="element.icon"></span>
+          </div>
+          <div class="item-text">{{ element.nameCn }}</div>
+        </div>
+      </template>
+    </draggable>
+  </el-scrollbar>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import formStore from "@/controller/form";
+import { BaseComponentItem } from "@/type";
+export default defineComponent({
+  props: {
+    basicFields: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    layoutFields: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    const formcomponents: any = this.$formcomponents;
+    const lastFormComponents = [];
+    for (const key in formcomponents) {
+      const item = formcomponents[key];
+      if (item.isHide) {
+        continue;
+      }
+      const model: BaseComponentItem | Record<string, any> = {};
+      model.ControlType = item.ControlType;
+      model.icon = item.icon;
+      model.nameCn = item.nameCn;
+      model.layout = !!item.layout;
+      // 有json编辑器时，验证格式有固定的规则
+      if (item.rule) {
+        model.rule = item.rule;
+      }
+      lastFormComponents.push(model);
+    }
+    return {
+      formcomponents: lastFormComponents,
+      filterContent: "",
+    };
+  },
+  computed: {
+    newcomponentlist() {
+      return (this as any).formcomponents.filter((item: BaseComponentItem) => {
+        if (
+          item.nameCn &&
+          item.nameCn.indexOf(this.filterContent) != -1 &&
+          !item.layout
+        ) {
+          if (this.basicFields.length == 0) {
+            return true;
+          } else if (this.basicFields.length > 0) {
+            let isHave = false;
+            this.basicFields.find((fieldItem: any) => {
+              if (
+                fieldItem.toLocaleLowerCase() ==
+                (item.ControlType as string).toLocaleLowerCase()
+              ) {
+                isHave = true;
+                return fieldItem;
+              }
+            });
+            return isHave;
+          }
+        }
+      });
+    },
+    layoutList() {
+      return (this as any).formcomponents.filter((item: any) => {
+        if (
+          item.nameCn &&
+          item.nameCn.indexOf(this.filterContent) != -1 &&
+          item.layout
+        ) {
+          if (this.layoutFields.length == 0) {
+            return true;
+          } else if (this.layoutFields.length > 0) {
+            let isHave = false;
+            this.layoutFields.find((fieldItem: any) => {
+              if (
+                fieldItem.toLocaleLowerCase() ==
+                item.ControlType.toLocaleLowerCase()
+              ) {
+                isHave = true;
+                return fieldItem;
+              }
+            });
+            return isHave;
+          }
+        }
+      });
+    },
+  },
+  methods: {
+    clickAddControl(item: any) {
+      formStore.setAllFormList((this as any).$Flex.jsonToForm(item));
+    },
+  },
+});
+</script>
+

package/src/components/FormPreview.vue

@@ -0,0 +1,197 @@
+<template>
+  <CustomDialog
+    ref="previewDialog"
+    :showDialog="previewShow"
+    @close="handlePreviewShow"
+    dialogclass="previewDialog"
+  >
+    <!-- <div class="previewList">
+        <div> -->
+    <!-- </div> -->
+    <!-- <div>
+          <div ref="JsonViewerDialog" ></div>
+        </div> -->
+    <!-- </div> -->
+    <div class="page_box" :class="pageType + '_layout'">
+      <dynamicform
+        :formResult="formResult"
+        :allFormList="allFormList"
+        :globalConfig="globalDatas"
+        ref="dynamicform"
+      />
+    </div>
+    <el-footer class="my-Footer" style="text-align: center">
+      <el-button type="primary" @click="resetForm">重置表单</el-button>
+      <el-button type="primary" @click="getData">获取数据</el-button>
+      <el-button @click="closeDialog">关闭</el-button>
+    </el-footer>
+    <custom-dialog ref="codeDialog" dialogclass="codeDialog" width="1000">
+      <div class="custom_code">
+        <!-- <codemirror
+          v-model="code"
+          placeholder="Code goes here..."
+          mode="text/json"
+          :style="{ height: '400px' }"
+          :extensions="extensions"
+          :autofocus="true"
+          :indent-with-tab="true"
+          :tab-size="2"
+        /> -->
+        <JsonCode v-model:value="code" />
+      </div>
+      <el-footer
+        class="my-Footer"
+        style="
+          text-align: center;
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          display: flex;
+          align-items: center;
+        "
+      >
+        <el-button
+          type="primary"
+          @click="copyJson"
+          class="copy_btn"
+          data-clipboard-action="copy"
+          :data-clipboard-text="code"
+          >复制json</el-button
+        >
+        <el-button type="primary" @click="saveFile">保存为文件</el-button>
+        <el-button @click="closeCodeDialog">关闭</el-button>
+      </el-footer>
+    </custom-dialog>
+  </CustomDialog>
+</template>
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  defineAsyncComponent,
+  ref,
+  watch,
+} from "vue";
+import formStore from "@/controller/form";
+import { Dynamicform } from "starfish-form";
+import uiControl from "@/controller/ui";
+import Clipboard from "clipboard";
+// import { json } from "@codemirror/lang-json";
+// import Codemirror from 'vue-codemirror'
+export default defineComponent({
+  components: {
+    Dynamicform,
+    // Codemirror,
+    JsonCode: defineAsyncComponent(() => import("@/common/jsonCode.vue")),
+  },
+  setup() {
+    const previewShow = computed(() => formStore.get("previewShow"));
+    const allFormList = computed(() => formStore.get("AllFormResult"));
+    const formResult = computed(() => formStore.get("formResult"));
+    const globalDatas = computed(() => formStore?.get("globalDatas"));
+    const pageType = computed(() => uiControl?.get("pageType"));
+    // const extensions = [json()];
+    const codeDialog = ref();
+    const code = ref();
+    let clipboard: Clipboard;
+    const dynamicform = ref();
+    const previewDialog = ref<any>();
+    // let editor: any = null;
+    const handlePreviewShow = () => {
+      formStore.set("previewShow", false);
+    };
+
+    watch(previewShow, async () => {
+      if (!previewShow.value) {
+        previewDialog.value.close();
+      } else {
+        previewDialog.value.init("表单预览", "icon-biaodan");
+        previewDialog.value.show();
+        previewDialog.value.isFullScreen = true;
+      }
+    });
+    const JsonViewerDialog = ref();
+    return {
+      // extensions,
+      code,
+      pageType,
+      codeDialog,
+      globalDatas,
+      dialogWidth: computed(() => uiControl?.get("dialogWidth")),
+      previewShow,
+      previewDialog,
+      handlePreviewShow,
+      JsonViewerDialog,
+      allFormList,
+      formResult,
+      dynamicform,
+      resetForm() {
+        dynamicform.value.reset();
+      },
+      closeDialog() {
+        previewDialog.value.close();
+      },
+      getData() {
+        dynamicform.value?.getValidate().then((valide: boolean) => {
+          if (valide) {
+            console.log("formResult", formResult.value);
+            code.value = JSON.stringify(formResult?.value || {}, null, 4);
+            codeDialog.value.show();
+            codeDialog.value.init("表单数据", "icon-biaodan");
+          } else {
+            ElMessage({
+              type: "error",
+              message: "校验失败",
+            });
+          }
+        });
+      },
+      closeCodeDialog() {
+        codeDialog.value.close();
+      },
+      copyJson() {
+        if (!clipboard) {
+          clipboard = new Clipboard(".copy_btn");
+        }
+        clipboard.on("success", () => {
+          ElMessage({
+            type: "success",
+            message: "复制成功",
+          });
+        });
+        clipboard.on("error", () => {
+          ElMessage({
+            type: "error",
+            message: "复制失败",
+          });
+        });
+        setTimeout(() => {
+          // 销毁实例
+          clipboard.destroy();
+        }, 20000);
+      },
+      saveFile(fileName = "demo.json") {
+        let content = "data:application/json;charset=utf-8,";
+        try {
+          const result = code.value;
+          content += result;
+          const encodedUri = encodeURI(content);
+          const actions = document.createElement("a");
+          actions.setAttribute("href", encodedUri);
+          actions.setAttribute("download", fileName);
+          actions.click();
+          ElMessage({
+            type: "success",
+            message: "文件保存成功",
+          });
+        } catch (e) {
+          ElMessage({
+            type: "error",
+            message: "文件保存失败",
+          });
+        }
+      },
+    };
+  },
+});
+</script>