@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/formGenerator/components/formGeneratorAttrForm.vue

@@ -1,98 +0,0 @@
-<template>
-  <!-- 表单属性 -->
-  <el-form size="small" label-width="90px">
-    <el-form-item label="表单标识符">
-      <el-input v-model="formData.formCode" placeholder="请输入表单标识符" />
-    </el-form-item>
-    <!-- <el-form-item label="表单名">
-      <el-input v-model="formData.formRef" placeholder="请输入表单名（ref）" />
-    </el-form-item>-->
-    <el-form-item label="表单模型">
-      <el-input v-model="formData.formModel" placeholder="请输入数据模型" />
-    </el-form-item>
-    <el-form-item label="校验模型">
-      <el-input v-model="formData.formRules" placeholder="请输入校验模型" />
-    </el-form-item>
-    <el-form-item label="表单尺寸">
-      <el-radio-group v-model="formData.size">
-        <el-radio-button label="medium">中等</el-radio-button>
-        <el-radio-button label="small">较小</el-radio-button>
-        <el-radio-button label="mini">迷你</el-radio-button>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="标签对齐">
-      <el-radio-group v-model="formData.labelPosition">
-        <el-radio-button label="left">左对齐</el-radio-button>
-        <el-radio-button label="right">右对齐</el-radio-button>
-        <el-radio-button label="top">顶部对齐</el-radio-button>
-      </el-radio-group>
-    </el-form-item>
-
-    <el-form-item label="禁用表单">
-      <el-switch v-model="formData.disabled" />
-    </el-form-item>
-    <!-- <el-form-item label="表单按钮">
-      <el-switch v-model="formData.formBtns" />
-    </el-form-item>-->
-    <el-form-item label="显示未选中组件边框">
-      <el-switch v-model="formData.unFocusedComponentBorder" />
-    </el-form-item>
-    <el-form-item label="表单全局CSS" v-if="formData.cssList">
-      <el-button type="primary" @click="$refs.CssEditor.open(formData.cssList)">编写代码</el-button>
-      <CssEditor ref="CssEditor" v-model="formData.cssList" />
-    </el-form-item>
-    <el-form-item label="表单全局事件" v-if="formData.eventList">
-      <el-button type="primary" @click="$refs.EventEditor.open(formData.eventList)">编写代码</el-button>
-      <EventEditor ref="EventEditor" v-model="formData.eventList" />
-    </el-form-item>
-  </el-form>
-</template>
-
-<script>
-import CssEditor from "@/components/editor/CssEditor.vue";
-import EventEditor from "@/components/editor/EventEditor.vue";
-import store from "@/store";
-
-export default {
-  components: {
-    CssEditor,
-    EventEditor,
-  },
-  props: {
-    // 表单属性
-    formConf: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  mounted() {
-    store.commit("SET_CSSLIST", this.formConf.cssList);
-    store.commit("SET_EVENTLIST", this.formConf.eventList);
-  },
-  computed: {
-    // 当前选中的表单组件
-    formData: {
-      get() {
-        let that = this;
-        return new Proxy(that.formConf, {
-          get(obj, key) {
-            return key in obj ? obj[key] : undefined;
-          },
-          set(obj, key, val) {
-            that.$emit("update:formConf", {
-              ...obj,
-              [key]: val,
-            });
-            return true;
-          },
-        });
-      },
-      set(val) {
-        this.$emit("update:formConf", val);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/formGenerator/components/formGeneratorCom.vue

@@ -1,108 +0,0 @@
-<template>
-  <!-- 左侧组件 -->
-  <el-collapse v-model="activeNames" class="Fg-coms-list">
-    <template v-for="(item, index) in leftComponents">
-      <el-collapse-item
-        v-if="item && item.list?.length"
-        :title="item.title"
-        :key="index"
-        :name="index"
-      >
-        <template slot="title">
-          <div class="Fg-coms-title">
-            <svg-icon icon-class="component" />
-            {{ item.title }}
-          </div>
-        </template>
-        <draggable
-          :list="item.list"
-          :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-          :clone="cloneComponent"
-          draggable=".Fg-coms-item"
-          :sort="false"
-          @end="onEnd"
-        >
-          <div
-            v-for="(element, index) in item.list"
-            :key="index"
-            class="Fg-coms-item"
-            @click="addComponent(element)"
-          >
-            <div class="Fg-coms-body">
-              <svg-icon :icon-class="element.__config__.tagIcon" />
-              {{ element.__config__.label }}
-            </div>
-          </div>
-        </draggable>
-      </el-collapse-item>
-    </template>
-  </el-collapse>
-</template>
-
-<script>
-import draggable from "vuedraggable";
-import {
-  inputComponents,
-  selectComponents,
-  layoutComponents,
-  assistComponents,
-} from "../utils/config";
-import { createFormItem, deepClone } from "../utils/index";
-export default {
-  components: {
-    draggable,
-  },
-  props: {
-    // 表单属性
-    formConf: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      activeNames: [0, 1, 2, 3],
-      leftComponents: [
-        { title: "输入型组件", list: inputComponents },
-        { title: "选择型组件", list: selectComponents },
-        { title: "布局型组件", list: layoutComponents },
-        { title: "辅助型组件", list: assistComponents },
-      ],
-      tempActiveData: {}, // 当前进行拖拽的组件
-    };
-  },
-  methods: {
-    // 拖拽完成
-    onEnd(obj) {
-      // from 拖拽开始组件，to 拖拽结束组件
-      if (obj.from !== obj.to) {
-        // 判断是否为动态数据，即 dataType === "dynamic",选择动态数据需要进行处理
-        // this.fetchData(this.tempActiveData);
-        this.$emit("drag", this.tempActiveData);
-      }
-    },
-    addComponent(item) {
-      const clone = this.cloneComponent(item);
-      // this.fetchData(clone);
-      // this.drawingList.push(clone);
-      // 直接通过点击控件添加表单项，点击控件需要手动添加
-      this.$emit("add", clone);
-    },
-    // 对控件进行拖拽，拖拽会自动添加控件，无须手动添加
-    cloneComponent(origin) {
-      const clone = deepClone(origin); // 对选中的控件进行深度克隆
-      const config = clone.__config__;
-      config.span = this.formConf.span || config.span; // 生成代码时，会根据span做精简判断
-      // 给需要添加的控件添加自定义属性,即补充完整属性
-      createFormItem(clone);
-      clone.placeholder !== undefined && clone.placeholder;
-      this.tempActiveData = clone; // 当前进行拖拽的组件
-      return clone;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "../styles/left-coms.scss";
-</style>

package/src/components/formGenerator/components/formGeneratorOutline.vue

@@ -1,159 +0,0 @@
-<template>
-  <!-- 左侧组件 -->
-  <div class="Fg-outline" :key="JSON.stringify(list)">
-    <el-tree
-      :data="layoutTree"
-      draggable
-      default-expand-all
-      :allow-drop="allowDrop"
-      :allow-drag="allowDrag"
-      @node-click="handleActive"
-    >
-      <div slot-scope="{ node, data }" class="Fg-outline--item">
-        <div :class="activeId==data?.__config__?.formId?'Fg-Blue':''">
-          <svg-icon
-            v-if="data.__config__"
-            style="margin-right:8px"
-            :icon-class="data.__config__.tagIcon"
-          />
-          <span>{{ data.__config__?.label ||data.__config__?.componentName ||data.label || data.id}}</span>
-        </div>
-        <div>
-          <i v-if="data.isLock" class="el-icon-lock" />
-          <!-- <div class="Fg-cursor" style="margin-right:8px" @click.stop="handleLock(data)">
-            <i :class="data.isLock?'el-icon-lock':'el-icon-unlock'" />
-          </div>-->
-          <!-- <div class="Fg-cursor" style="margin-right:8px" @click.stop="handleHide(data)">
-            <svg-icon :icon-class="data.isHide?'noview':'view'" />
-          </div>
-          <el-dropdown
-            placement="bottom-start"
-            trigger="click"
-            @command="handleSelect($event,data)"
-          >
-            <div class="Fg-cursor">
-              <svg-icon icon-class="ellipsis" />
-            </div>
-            <el-dropdown-menu slot="dropdown" class="Fg-dropdown-menu">
-              <el-dropdown-item command="Copy">复制</el-dropdown-item>
-              <el-dropdown-item command="Delete">删除</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>-->
-        </div>
-      </div>
-    </el-tree>
-  </div>
-</template>
-
-<script>
-import { traverseTree, deepClone, cleanTree } from "../utils/index";
-import store from "@/store";
-import { MessageBox } from "element-ui";
-export default {
-  components: {},
-  props: {
-    // 表单列表
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    layoutTree() {
-      let list = [];
-      this.list.forEach((item) => {
-        const tree = cleanTree([deepClone(item)]);
-        traverseTree(tree, (node) => {
-          node.children = node?.children;
-        });
-        list = list.concat(tree);
-      });
-      return list;
-    },
-    activeId() {
-      return store.state.app.activeId;
-    },
-  },
-  methods: {
-    handleSelect(command, item) {
-      this[`handle${command}`](item);
-    },
-
-    // 锁定
-    handleLock(item) {
-      // const message = item.isLock
-      //   ? "解锁后改组件可以修改任何配置"
-      //   : "锁定后该组件将无法再修改任何配置";
-      // MessageBox.confirm(
-      //   message,
-      //   `确定要${item.isLock ? "解锁" : "锁定"}该组件吗？`,
-      //   {
-      //     type: "warning",
-      //   }
-      // ).then(() => {
-      //   item.isLock = !item.isLock;
-      // });
-    },
-
-    // 复制
-    handleCopy(item) {
-      // const clone = createFormItem(item);
-      // this.list.push(clone);
-      // this.$emit('update:list',)
-    },
-    // 删除
-    handleDelete(item) {
-      // this.drawingList.splice(index, 1);
-      // if (this.drawingList.length) {
-      //   this.activeFormItem(this.drawingList[0]);
-      // } else {
-      //   this.activeFormItem({});
-      // }
-    },
-    // 是否隐藏
-    handleHide(item) {
-      // item.isHide = !item.isHide;
-    },
-    // 选中
-    handleActive(item) {
-      if (item.__config__) store.commit("SET_ACTIVEDATA", item);
-    },
-    allowDrop(draggingNode, dropNode, type) {
-      return false; // 暂时改为全部不可拖拽
-      if (dropNode.data.allowDrop && type == "inner") return true;
-      if (dropNode.data.__config__ && type !== "inner") return true;
-      return false;
-    },
-    allowDrag(draggingNode) {
-      return false; // 暂时改为全部不可拖拽
-      return draggingNode.data.__config__ ? true : false;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "../styles/generator.scss";
-.Fg-outline {
-  .el-tree-node__content {
-    height: 36px;
-  }
-  .Fg-outline--item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding-right: 24px;
-    .svg-icon {
-      font-size: 20px;
-    }
-    > div {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-</style>

package/src/components/formGenerator/components/formGeneratorTemp.vue

@@ -1,77 +0,0 @@
-<template>
-  <!-- 模板 -->
-  <div class="Fg-temps">
-    <template v-for="(item,i) in temps">
-      <div :key="i" class="Fg-temps-item">
-        <!-- 模板图片预览 -->
-        <!-- <el-popover placement="right" width="600" trigger="hover">
-          <el-image :src="item.image" slot="reference"></el-image>
-          <el-image :src="item.image" style='margin-bottom: 8px;'></el-image>
-        </el-popover>-->
-        <div class="Fg-temps-item--footer">
-          <span>#{{i+1}} {{item.name}}</span>
-          <span @click="handleLoad(item)">加载此模板</span>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { MessageBox } from "element-ui";
-// 模板数据
-import temps from "../utils/temps";
-import { createFormItem, deepClone } from "../utils";
-export default {
-  data() {
-    return {
-      temps,
-    };
-  },
-  methods: {
-    // 加载此模板
-    handleLoad(item) {
-      MessageBox.confirm("是否加载这个模板？加载后会覆盖设计器当前表单。", {
-        type: "warning",
-        title: "提示",
-      }).then(() => {
-        const temps = [];
-        item.form.forEach((formItem) => {
-          temps.push(createFormItem(deepClone(formItem)));
-        });
-        this.$emit("change", temps);
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../styles/generator.scss";
-.Fg-temps {
-  padding: 8px;
-  font-size: 14px;
-  .Fg-temps-item {
-    margin-bottom: 8px;
-    border: 1px solid $borderColor;
-    border-radius: 4px;
-    padding: 12px 16px;
-    .el-image {
-      width: 100%;
-    }
-    .Fg-temps-item--footer {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      span:first-child {
-        font-weight: 700;
-      }
-      span:last-child {
-        color: $themeColor;
-        cursor: pointer;
-      }
-    }
-  }
-}
-</style>

package/src/components/formGenerator/components/formImport.vue

@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <el-button type="text" size="mini" @click="handleOpen">
-      <el-tooltip content="点击此处导入JSON数据生成表单" placement="top">
-        <i class="el-icon-download" style="font-size:14px"></i>
-      </el-tooltip>
-    </el-button>
-    <JsonDialog title="导入JSON" ref="JsonDialog" :value="defaultValue">
-      <template slot="footer">
-        <el-button size="small" @click="$refs.JsonDialog.close()">取消</el-button>
-        <ImportJson btnText="导入文件" style="margin:0 10px" @confirm="handleImport" />
-        <el-button type="primary" size="small" @click="onConfirm">确认</el-button>
-      </template>
-    </JsonDialog>
-  </div>
-</template>
-
-<script>
-import JsonDialog from "@/components/editor/JsonDialog";
-import { deepClone } from "../utils";
-import ImportJson from "@/components/fileComs/ImportJson.vue";
-
-export default {
-  components: {
-    JsonDialog,
-    ImportJson,
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      defaultValue: this.value,
-    };
-  },
-
-  methods: {
-    onConfirm() {
-      this.$refs.JsonDialog.confirm((value) => {
-        const formAttrs = deepClone(value);
-        delete formAttrs.list;
-        const formList = value.list;
-        this.$emit("confirm", formAttrs, formList);
-      });
-    },
-    handleOpen() {
-      this.defaultValue = this.value;
-      this.$refs.JsonDialog.open();
-    },
-    handleImport(data) {
-      this.defaultValue = data;
-      this.$refs.JsonDialog.jsonContent = data;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

package/src/components/formGenerator/components/formPreview.vue

@@ -1,102 +0,0 @@
-<template>
-  <el-dialog
-    class="form-dialog form-preview"
-    :visible.sync="visible"
-    v-if="visible"
-    modal-append-to-body
-    append-to-body
-    destroy-on-close
-    width="1000px"
-    z-index="1000"
-  >
-    <template #title>
-      <el-radio-group v-model="active" size="mini">
-        <el-radio-button label="pc">
-          <i class="el-icon-monitor" />
-        </el-radio-button>
-        <el-radio-button label="phone" v-if="!hidePhone">
-          <i class="el-icon-mobile" />
-        </el-radio-button>
-      </el-radio-group>
-    </template>
-    <template v-if="formList && formList.length">
-      <div v-if="active=='pc'" ref="PCFormImg">
-        <PCForm ref="PCForm" :formList="formList" :formConf="formConf" isPreview />
-      </div>
-      <div class="hu-form-phone" v-if="active=='phone'">
-        <div class="hu-form-phone-cont">
-          <PhoneForm :formList="formList" :formConf="formConf" />
-        </div>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-import PCForm from "../formComponents/pcForm.vue";
-import PhoneForm from "../formComponents/phoneForm.vue";
-export default {
-  components: {
-    PCForm,
-    PhoneForm,
-  },
-  props: {
-    hidePhone: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      formList: [],
-      formConf: {},
-      visible: false,
-      active: "pc",
-    };
-  },
-  mounted() {},
-  methods: {
-    open(list, conf) {
-      this.visible = true;
-      this.formList = [];
-      this.formConf = {};
-      if (list) this.formList = this.$utils.deepClone(list);
-      if (conf) this.formConf = this.$utils.deepClone(conf);
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.form-preview {
-  .el-dialog__header {
-    text-align: center;
-  }
-}
-.hu-form-phone {
-  margin: -25px auto;
-  height: calc(100% + 30px);
-  aspect-ratio: 4/7;
-  position: relative;
-
-  background-image: url("../../../images/phone_bg.png");
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  .hu-form-phone-cont {
-    z-index: 1;
-    background: #fff;
-    position: absolute;
-    top: 10%;
-    left: 18%;
-    right: 18%;
-    bottom: 16%;
-    overflow: auto;
-  }
-}
-.pho-dialog {
-  .el-dialog .el-dialog__body {
-    overflow: hidden;
-  }
-}
-</style>