@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/editor/CodeJson.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="Fg-code-json">
-    <textarea ref="codemirror" />
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-// 引入CodeMirror和基础样式
-import CodeMirror from "codemirror";
-import "codemirror/lib/codemirror.css";
-// JSON代码高亮需要由JavaScript插件支持
-import "codemirror/mode/javascript/javascript.js";
-// 选择IDEA主题样式，还有其他很多主题可选
-import "codemirror/theme/idea.css";
-// 支持使用Sublime快捷键
-import "codemirror/keymap/sublime.js";
-// 搜索功能的依赖
-import "codemirror/addon/dialog/dialog.js";
-import "codemirror/addon/dialog/dialog.css";
-// 支持搜索功能
-import "codemirror/addon/search/search";
-import "codemirror/addon/search/searchcursor.js";
-// 支持各种代码折叠
-import "codemirror/addon/fold/foldgutter.css";
-import "codemirror/addon/fold/foldcode.js";
-import "codemirror/addon/fold/foldgutter.js";
-import "codemirror/addon/fold/brace-fold.js";
-import "codemirror/addon/fold/comment-fold.js";
-// 支持代码区域全屏功能
-import "codemirror/addon/display/fullscreen.css";
-import "codemirror/addon/display/fullscreen.js";
-// 支持括号自动匹配
-import "codemirror/addon/edit/matchbrackets.js";
-import "codemirror/addon/edit/closebrackets.js";
-// 支持代码自动补全
-import "codemirror/addon/hint/show-hint.css";
-import "codemirror/addon/hint/show-hint.js";
-import "codemirror/addon/hint/anyword-hint.js";
-// 行注释
-import "codemirror/addon/comment/comment.js";
-// JSON错误检查
-import "codemirror/addon/lint/lint.css";
-import "codemirror/addon/lint/lint.js";
-// 需要依赖全局的jsonlint，不是很优雅
-import "codemirror/addon/lint/json-lint.js";
-//及时自动更新，配置里面也需要设置autoRefresh为true
-import "codemirror/addon/display/autorefresh";
-// 引入jsonlint
-import jsonlint from "jsonlint";
-window.jsonlint = jsonlint;
-
-export default {
-  name: "CodeEditor",
-  /* eslint-disable vue/require-prop-types */
-  props: {
-    value: [String, Number, Object, Array],
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      jsonEditor: false,
-    };
-  },
-  // 监听是否数据改变，随时更新json数据
-  watch: {
-    value(value) {
-      // console.log(value);
-      const editorValue = this.jsonEditor.getValue();
-      if (value !== editorValue) {
-        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
-      }
-      this.jsonEditor.refresh();
-    },
-  },
-  mounted() {
-    // CodeMirror的配置项，搜官网看这里的配置项配置
-    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.codemirror, {
-      mode: "application/json", // 接受的类型，json xml....
-      smartIndent: true, // 是否智能缩进
-      styleActiveLine: true, // 当前行高亮
-      lineNumbers: true, // 是否显示行数
-      indentUnit: 2, // 缩进单位，默认2
-      gutters: [
-        "CodeMirror-linenumbers",
-        "CodeMirror-foldgutter",
-        "CodeMirror-lint-markers", // CodeMirror-lint-markers是实现语法报错功能
-      ],
-      lint: true,
-      //lineWrapping: true, // 自动换行
-      matchBrackets: true, // 括号匹配显示
-      autoCloseBrackets: true, // 输入和退格时成对
-      readonly: this.readonly, // 只读
-      foldGutter: true,
-      autoRefresh: true,
-    });
-
-    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
-    this.jsonEditor.on("change", (cm) => {
-      this.$emit("changed", cm.getValue());
-      this.$emit("input", cm.getValue());
-      // 编辑json框里面的内容可以时刻监听到值，通过cm.getValue()获取到
-    });
-  },
-  methods: {
-    getValue() {
-      return this.jsonEditor.getValue();
-    },
-  },
-};
-</script>
-
-<style scoped>
-.Fg-code-json {
-  height: 100%;
-  position: relative;
-  overflow: auto;
-}
-.Fg-code-json >>> .CodeMirror {
-  height: 100%;
-  min-height: 300px;
-}
-.Fg-code-json >>> .CodeMirror-scroll {
-  height: 100%;
-  min-height: 300px;
-}
-</style>

package/src/components/editor/CssEditor.vue

@@ -1,84 +0,0 @@
-<template>
-  <FGDialog
-    class="Fg-Editor-Dialog"
-    ref="FGDialog"
-    width="900px"
-    title="全局样式"
-    top="10vh"
-    @confirm="onConfirm"
-  >
-    <el-row>
-      <el-col :span="8" :style="{padding:'0 16px'}">
-        <EditorLeft v-model="active" :list.sync="list" />
-      </el-col>
-      <el-col :span="16">
-        <template v-for="(item,i) in list">
-          <CodeEditor
-            v-if="active==i && list[active]"
-            :key="i"
-            v-model="list[active].code"
-            :name="list[active].name"
-            mode="text/css"
-            placeholder="// 你的初始代码，如color:red"
-          />
-        </template>
-      </el-col>
-    </el-row>
-  </FGDialog>
-</template>
-
-<script>
-import CodeEditor from "./CodeEditor";
-import EditorLeft from "./components/EditorLeft.vue";
-import store from "@/store";
-import { deepClone } from "../formGenerator/utils";
-export default {
-  components: {
-    CodeEditor,
-    EditorLeft,
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  data() {
-    return {
-      active: this.value.length ? 0 : "",
-      list: deepClone(this.value),
-    };
-  },
-
-  methods: {
-    open() {
-      this.$refs.FGDialog.open();
-      this.list = deepClone(this.value);
-      store.commit("SET_CSSLIST", this.list);
-    },
-    onConfirm() {
-      this.$refs.FGDialog.close();
-      this.$emit("input", this.list);
-      this.$emit("confirm", this.list);
-      store.commit("SET_CSSLIST", this.list);
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "@/components/formGenerator/styles/generator.scss";
-.Fg-Editor-Dialog {
-  .el-row {
-    height: 100%;
-    border: 1px solid $borderColor;
-    .el-col {
-      height: 100%;
-    }
-    .el-col:first-child {
-      border-right: 1px solid $borderColor;
-    }
-  }
-}
-</style>

package/src/components/editor/EventEditor.vue

@@ -1,84 +0,0 @@
-<template>
-  <FGDialog
-    class="Fg-Editor-Dialog"
-    ref="FGDialog"
-    width="900px"
-    title="全局事件"
-    top="10vh"
-    @confirm="onConfirm"
-  >
-    <el-row>
-      <el-col :span="8" :style="{padding:'0 16px'}">
-        <EditorLeft v-model="active" :list.sync="list" disabled />
-      </el-col>
-      <el-col :span="16">
-        <template v-for="(item,i) in list">
-          <CodeEditor
-            v-if="active==i && list[active]"
-            :key="i"
-            v-model="list[active].code"
-            :name="list[active].name"
-            mode="text/javascript"
-            :placeholder="item.placeholder"
-          />
-        </template>
-      </el-col>
-    </el-row>
-  </FGDialog>
-</template>
-
-<script>
-import CodeEditor from "./CodeEditor";
-import EditorLeft from "./components/EditorLeft.vue";
-import store from "@/store";
-import { deepClone } from "../formGenerator/utils";
-export default {
-  components: {
-    CodeEditor,
-    EditorLeft,
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  data() {
-    return {
-      active: this.value.length ? 0 : "",
-      list: deepClone(this.value),
-    };
-  },
-
-  methods: {
-    open() {
-      this.$refs.FGDialog.open();
-      this.list = deepClone(this.value);
-      store.commit("SET_EVENTLIST", this.list);
-    },
-    onConfirm() {
-      this.$refs.FGDialog.close();
-      this.$emit("input", this.list);
-      this.$emit("confirm", this.list);
-      store.commit("SET_EVENTLIST", this.list);
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "@/components/formGenerator/styles/generator.scss";
-.Fg-Editor-Dialog {
-  .el-row {
-    height: 100%;
-    border: 1px solid $borderColor;
-    .el-col {
-      height: 100%;
-    }
-    .el-col:first-child {
-      border-right: 1px solid $borderColor;
-    }
-  }
-}
-</style>

package/src/components/editor/JsonDialog.vue

@@ -1,55 +0,0 @@
-<template>
-  <FGDialog ref="FGDialog" top="8vh" width="900px" :title="title" @confirm="confirm">
-    <!-- <JsonEditor v-model="jsonContent" /> -->
-    <CodeJson v-model="jsonContent" />
-    <template slot="footer">
-      <slot name="footer"></slot>
-    </template>
-  </FGDialog>
-</template>
-
-<script>
-// import JsonEditor from "./JsonEditor";
-import CodeJson from "./CodeJson.vue";
-export default {
-  name: "JsonDialog",
-  components: {
-    // JsonEditor,
-    CodeJson,
-  },
-  props: {
-    value: {},
-    title: {
-      type: String,
-      default: "编辑数据",
-    },
-  },
-  data() {
-    return {
-      jsonContent: {},
-    };
-  },
-  methods: {
-    open() {
-      this.jsonContent = this.value;
-      this.$refs.FGDialog.open();
-    },
-    close() {
-      this.$refs.FGDialog.close();
-    },
-    confirm(cb) {
-      let value = this.jsonContent;
-      try {
-        value = JSON.parse(this.jsonContent || "{}");
-      } catch (error) {}
-      if (cb) cb(value);
-      this.$emit("input", value);
-      this.$emit("confirm", value);
-      this.$refs.FGDialog.close();
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-</style>

package/src/components/editor/JsonEditor.vue

@@ -1,58 +0,0 @@
-<template>
-  <vue-json-editor
-    class="Fg-Json-Editor"
-    v-model="jsonContent"
-    :showBtns="false"
-    mode="code"
-    lang="zh"
-    :expanded-on-start="true"
-    @json-change="onJsonChange"
-    @json-save="onJsonSave"
-  />
-</template>
-
-<script>
-// import vueJsonEditor from "vue-json-editor";
-export default {
-  name: "JsonEditor",
-  components: {
-    vueJsonEditor: () => import("vue-json-editor"),
-  },
-  props: {
-    value: {},
-  },
-  data() {
-    return {
-      jsonContent: this.value || {},
-    };
-  },
-  // async mounted() {
-  //   const vueJsonEditor = await import("vue-json-editor");
-  // },
-  watch: {
-    jsonContent() {
-      this.$emit("input", this.jsonContent);
-      this.$emit("change", this.jsonContent);
-    },
-  },
-  methods: {
-    onJsonChange() {
-      // console.log("jsonContent", this.jsonContent);
-    },
-    onJsonSave(value) {
-      this.jsonContent = value;
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-Json-Editor {
-  width: 100%;
-  height: 100%;
-  .jsoneditor-vue {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

package/src/components/editor/components/EditorLeft.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="Fg-ED-left" :style="{'--themeColor':themeColor,'--selectedColor':selectedColor,}">
-    <div v-if="!disabled">
-      <el-button type="text" icon="el-icon-plus" @click="onAdd">创建{{title}}</el-button>
-    </div>
-    <div class="FG-ED-list">
-      <div
-        class="FG-ED-item"
-        :class="value==i?'FG-ED-item--active':''"
-        v-for="(item,i) in list"
-        :key="i"
-        @click="onClick(i)"
-      >
-        <span :style="{color:themeColor}">
-          <span style="color:#9d238c">{{preText}}</span>
-          <span>{{item.name}}</span>
-        </span>
-        <div class="FG-ED-button" v-if="!disabled">
-          <i class="el-icon-delete" style="margin-left:5px;color:#f56c6c" @click="onDelete(i)"></i>
-        </div>
-      </div>
-
-      <div class="FG-ED-item" v-if="cell">
-        <el-input v-model="cell.name" size="mini"></el-input>
-        <div class="FG-ED-button">
-          <i class="el-icon-check" :style="{color:themeColor}" @click="onSave"></i>
-          <i class="el-icon-delete" style="margin-left:5px;color:#f56c6c" @click="cell=null"></i>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getUuiKey } from "@/components/formGenerator/utils";
-import store from "@/store";
-
-export default {
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    preText: {
-      type: String,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      cell: null,
-    };
-  },
-  computed: {
-    themeColor() {
-      return store.state.app.themeColor;
-    },
-    selectedColor() {
-      return store.state.app.selectedColor;
-    },
-  },
-  methods: {
-    onAdd() {
-      if (this.cell) return;
-      this.cell = { name: getUuiKey(), code: "" };
-    },
-    onSave() {
-      if (!this.cell.name) return;
-      this.list.push(this.cell);
-      this.cell = null;
-      this.onEmit(this.list.length - 1);
-      this.$emit("update:list", this.list);
-      this.$emit("onList", this.list);
-    },
-    onClick(i) {
-      this.onEmit(i);
-    },
-    onDelete(i) {
-      this.list.splice(i, i + 1);
-      if (this.value == i) this.onEmit(0);
-      if (this.list.length == 0) this.onEmit("");
-    },
-    onEmit(i) {
-      this.$emit("input", i);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-ED-left {
-  height: 100%;
-  overflow: auto;
-}
-.FG-ED-list {
-  .FG-ED-item {
-    border: 1px solid var(--selectedColor);
-    border-radius: 5px;
-    // color: var(--themeColor);
-    cursor: pointer;
-    padding: 10px 16px;
-    margin: 10px 0;
-    padding-right: 60px;
-    &:hover {
-      background: var(--selectedColor);
-    }
-    position: relative;
-    .FG-ED-button {
-      position: absolute;
-      right: 14px;
-      top: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 16px;
-    }
-    .el-input__inner {
-      border: none;
-    }
-  }
-  .FG-ED-item--active {
-    background: var(--selectedColor);
-  }
-}
-</style>

package/src/components/fileComs/ExportExcel.vue

@@ -1,49 +0,0 @@
-<template>
-  <!-- 导出excel -->
-  <el-button type="primary" size="small" @click="exportToExcel">{{btnText}}</el-button>
-</template>
- 
-<script>
-import { utils, write } from "xlsx";
-import { saveAs } from "file-saver";
-
-export default {
-  props: {
-    name: {
-      type: String,
-      default: "EXCEL",
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    btnText: {
-      type: String,
-      default: "导出Excel",
-    },
-  },
-  methods: {
-    exportToExcel() {
-      if (!this.data.length) return this.$message.error("没有可以导出的数据！");
-      // 将数据转换为工作表
-      const worksheet = utils.aoa_to_sheet(this.data);
-      // 创建工作簿并添加工作表
-      const workbook = utils.book_new();
-      utils.book_append_sheet(workbook, worksheet, "Sheet1");
-
-      // 生成Excel文件
-      const excelBuffer = write(workbook, {
-        bookType: "xlsx",
-        type: "array",
-      });
-
-      // 使用blob和FileReader创建一个URL然后下载
-      const dataBlob = new Blob([excelBuffer], {
-        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
-      });
-      const name = (this.name || "文件下载") + ".xlsx";
-      saveAs(dataBlob, name);
-    },
-  },
-};
-</script>

package/src/components/fileComs/ExportJson.vue

@@ -1,52 +0,0 @@
-<template>
-  <!-- 导出json -->
-  <el-button type="primary" size="small" @click="exportToJson">{{btnText}}</el-button>
-</template>
- 
-<script>
-import { saveAs } from "file-saver";
-import { MessageBox } from "element-ui";
-export default {
-  props: {
-    name: {
-      type: String,
-      default: "",
-    },
-    data: {
-      type: [Array, Object],
-      default: () => {},
-    },
-    btnText: {
-      type: String,
-      default: "导出Json",
-    },
-  },
-  methods: {
-    exportToJson() {
-      if (!this.data) return this.$message.error("没有可以导出的数据！");
-
-      const handleExport = (name) => {
-        // 将数据转换为JSON字符串
-        const data = JSON.stringify(this.data, null, 2);
-        // 创建Blob对象
-        const blob = new Blob([data], { type: "application/json" });
-        // 使用saveAs保存文件
-        saveAs(blob, name + ".json");
-      };
-      if (!this.name) {
-        MessageBox.prompt("请输入文件名", "保存为文件", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          inputPattern: /.+/,
-          inputErrorMessage: "文件名不能为空",
-        }).then(({ value }) => {
-          if (!value) return this.$message.error("文件名不能为空");
-          handleExport(value);
-        });
-      } else {
-        handleExport(this.name);
-      }
-    },
-  },
-};
-</script>