@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/formGenerator/formGenerator.vue

@@ -1,401 +0,0 @@
-<template>
-  <div class="Fg-gener" :style="{'--themeColor':themeColor,'--selectedColor':selectedColor}">
-    <div class="Fg-gener-left" :class="toLeft?'Fg-gener-side-close':''">
-      <!-- <div class="Fg-gener-left-title">组件库</div> -->
-      <el-tabs v-model="leftTab" stretch>
-        <el-tab-pane label="组件" name="coms" />
-        <el-tab-pane label="模板" name="temps" v-if="!hideTemps" />
-        <el-tab-pane label="大纲" name="outline" v-if="!hideOutline" />
-      </el-tabs>
-      <!-- 左侧组件 -->
-      <div class="Fg-gener-left-cont">
-        <FormGeneratorCom
-          v-show="leftTab=='coms'"
-          :formConf="formAttrData"
-          @add="handleAdd"
-          @drag="handleDrag"
-        />
-        <FormGeneratorOutline :list.sync="drawingList" v-show="leftTab=='outline'" />
-        <FormGeneratorTemp v-if="leftTab=='temps'" @change="handleTemp" />
-      </div>
-    </div>
-    <div class="Fg-gener-content" :style="contentStyle">
-      <div class="Fg-gener-button">
-        <div class="Fg-gener-button-left">
-          <FormExport :value="formObj" />
-          <FormImport :value="formObj" @confirm="handleImport" />
-
-          <!-- <el-button type="text" icon="el-icon-refresh-left"></el-button>
-          <el-button type="text" icon="el-icon-refresh-right"></el-button>-->
-        </div>
-        <div>
-          <el-button
-            v-if="!hideSaveBtn"
-            type="success"
-            plain
-            icon="el-icon-folder-checked"
-            size="mini"
-            @click="handleSave"
-          >保存</el-button>
-          <el-button type="primary" plain size="mini" icon="el-icon-view" @click="handleView">预览</el-button>
-          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClear">清空</el-button>
-        </div>
-      </div>
-      <!-- 中间表单内容 -->
-      <el-form
-        class="Fg-gener-form"
-        :ref="formAttrData.formRef"
-        :size="formAttrData.size"
-        :label-position="formAttrData.labelPosition"
-        :disabled="formAttrData.disabled"
-        :label-width="formAttrData.labelWidth + 'px'"
-      >
-        <form-row-container
-          :enabled="enabled"
-          :list.sync="drawingList"
-          :formConf="formAttrData"
-          height="100%"
-          @clone="handleClone"
-        />
-        <el-empty class="form-empty" v-show="!drawingList.length" description="从左侧拖入或点选组件进行表单设计"></el-empty>
-      </el-form>
-      <i class="el-icon-arrow-left toLeft" @click="toLeft=!toLeft" />
-      <i class="el-icon-arrow-right toRight" @click="toRight=!toRight" />
-    </div>
-    <div class="Fg-gener-right" :class="toRight?'Fg-gener-side-close':''">
-      <!-- 右侧表单属性 -->
-      <el-tabs v-model="rightTab" stretch>
-        <el-tab-pane label="组件属性" name="field" />
-        <el-tab-pane label="表单属性" name="form" />
-      </el-tabs>
-      <div class="Fg-gener-attr-cont">
-        <FormGeneratorAttrField v-show="rightTab == 'field'" :formConf="formAttrData" />
-        <FormGeneratorAttrForm v-show="rightTab == 'form'" :formConf.sync="formAttrData" />
-      </div>
-    </div>
-
-    <FormPreview ref="FormPreview" :hidePhone="hidePhone" />
-  </div>
-</template>
-
-<script>
-import FormGeneratorCom from "./components/formGeneratorCom.vue";
-import FormGeneratorOutline from "./components/formGeneratorOutline.vue";
-import FormGeneratorAttrField from "./components/formGeneratorAttrField.vue";
-import FormGeneratorAttrForm from "./components/formGeneratorAttrForm.vue";
-import FormGeneratorTemp from "./components/formGeneratorTemp.vue";
-import FormPreview from "./components/formPreview.vue";
-import FormExport from "./components/formExport.vue";
-import FormImport from "./components/formImport.vue";
-import { formConf } from "./utils/config";
-import { Message, MessageBox } from "element-ui";
-import { deepClone, validateForm, getUuiKey, formTreeToArray } from "./utils";
-import store from "@/store";
-export default {
-  components: {
-    FormGeneratorCom,
-    FormGeneratorOutline,
-    FormGeneratorAttrField,
-    FormGeneratorAttrForm,
-    FormGeneratorTemp,
-    FormPreview,
-    FormExport,
-    FormImport,
-  },
-
-  props: {
-    // 用于回显的旧数据表单列表
-    formLists: {
-      type: Array,
-      default: () => [],
-    },
-    // 用于回显的旧数据表单属性
-    formAttrs: {
-      type: Object,
-      default: () => {},
-    },
-    // 隐藏保存按钮
-    hideSaveBtn: {
-      type: Boolean,
-      default: false,
-    },
-    // 编辑器时是否可以点击操作
-    enabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 主题色:只支持rgb和hex格式
-    themeColor: {
-      type: String,
-      default: "#409EFF", // #409EFF
-    },
-    hideOutline: {
-      type: Boolean,
-      default: false,
-    },
-    hideTemps: {
-      type: Boolean,
-      default: false,
-    },
-    hidePhone: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      drawingList: this.formLists, // 初始化时默认选中表单组件
-      formAttrData: {
-        ...{ ...formConf, formId: getUuiKey(), formCode: "form" + getUuiKey() },
-        ...this.formAttrs,
-      }, // 当前的表单属性
-      leftTab: "coms",
-      rightTab: "field",
-      toLeft: false,
-      toRight: false,
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  computed: {
-    contentStyle() {
-      const left = this.toLeft ? 0 : 260;
-      const right = this.toRight ? 0 : 350;
-      return {
-        width: `calc(100% - ${left}px - ${right}px)`,
-      };
-    },
-    selectedColor() {
-      return store.state.app.selectedColor;
-    },
-    formObj() {
-      return { ...this.formAttrData, list: this.drawingList };
-    },
-  },
-  methods: {
-    init() {
-      // 给初始值表单设置表单项id formId
-      store.commit("SET_ACTIVEDATA", this.drawingList[0] || {});
-      store.commit("SET_THEMECOLOR", this.themeColor);
-    },
-
-    // 校验
-    validate(cb) {
-      // 1. 不允许为空
-      if (!this.drawingList.length) {
-        cb(false, ["表单为空，请添加组件"]);
-        return;
-      }
-      // 2. 表单名称不能为空
-      const obj = validateForm(this.drawingList);
-      cb(obj.valid, obj.errorMsg);
-    },
-
-    // 导入
-    handleImport(formConfig, list) {
-      this.formAttrData = formConfig;
-      this.drawingList = list;
-    },
-
-    // 从左侧控件点击某一控件添加表单项
-    handleAdd(item) {
-      this.drawingList.push(item);
-      store.commit("SET_ACTIVEDATA", item);
-    },
-    // 从左侧控件拖拽某一控件添加表单项，拖拽会自动添加，无须手动添加表单项，只需要更新当前选中表单项
-    handleDrag(item) {
-      store.commit("SET_ACTIVEDATA", deepClone(item));
-    },
-    // 选择模板
-    handleTemp(temp) {
-      this.drawingList = deepClone(temp);
-    },
-    // 清空表单
-    handleClear() {
-      // 平铺表单
-      const list = formTreeToArray(this.drawingList);
-      // 获取表单中被锁定的表单
-      const lockForm = list.find((item) => item.isLock);
-      if (lockForm) return Message.error("存在已锁定组件，无法清空！");
-      MessageBox.confirm("确定要清空所有组件吗？", {
-        type: "warning",
-      }).then(() => {
-        this.drawingList = [];
-        store.commit("SET_ACTIVEDATA", {});
-      });
-    },
-    // 预览表单
-    handleView() {
-      if (!this.drawingList.length) {
-        return Message.error("请选择表单组件！");
-      }
-      this.$refs.FormPreview.open(this.drawingList, this.formAttrData);
-    },
-    // 预览表单(移动端)
-    handleViewPhone() {
-      if (!this.drawingList.length) {
-        return Message.error("请选择表单组件！");
-      }
-      this.$refs.FormPhoneDialog.open(this.drawingList, this.formAttrData);
-    },
-    handleClone(clone) {
-      this.drawingList.push(clone);
-    },
-    // 保存
-    handleSave() {
-      if (!this.drawingList.length) {
-        return Message.error("请选择表单组件！");
-      }
-      // MessageBox.confirm("确定保存该表单吗？", {
-      //   type: "warning",
-      // }).then(() => {
-      // Message.success("保存成功！");
-      const list = deepClone(this.drawingList);
-      const attrs = deepClone(this.formAttrData);
-      this.$emit("save", list, attrs);
-      // });
-    },
-  },
-  watch: {
-    drawingList(newValue) {
-      this.$emit("update:formLists", newValue);
-      this.$emit("update", this.drawingList, this.formAttrData);
-    },
-    formAttrData(newValue) {
-      this.$emit("update:formAttrs", newValue);
-      this.$emit("update", this.drawingList, this.formAttrData);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "./styles/index.scss";
-@import "./styles/generator.scss";
-@import "./styles/theme.scss";
-
-.Fg-gener {
-  font-size: 14px;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-between;
-  .el-tabs__header {
-    margin: 0;
-  }
-  .el-tabs__item {
-    height: 44px;
-  }
-  .Fg-gener-left,
-  .Fg-gener-right {
-    background-color: #fff;
-    z-index: 1;
-    overflow: hidden;
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
-    transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-  }
-
-  .Fg-gener-left {
-    width: 260px;
-    box-shadow: 0 0 8px $shadowColor;
-    .Fg-gener-left-title {
-      height: 42px;
-      line-height: 42px;
-      text-align: center;
-      font-size: 14px;
-      color: $themeColor;
-    }
-    .Fg-gener-left-cont {
-      height: calc(100% - 43px);
-      overflow: auto;
-    }
-  }
-  .Fg-gener-content {
-    flex: 1;
-    position: relative;
-    > .toLeft,
-    > .toRight {
-      display: inline-block;
-      // box-shadow: 2px 0 12px $shadowColor;
-      border-radius: 0 6px 6px 0;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-16px);
-      color: #666;
-      outline: none;
-      height: 32px;
-      width: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-    }
-    > .toLeft {
-      left: 0;
-      box-shadow: 3px 0 3px $shadowColor;
-      -webkit-transform: perspective(10px) rotateY(9deg);
-      transform: perspective(10px) rotateY(9deg);
-    }
-    > .toRight {
-      -webkit-transform: perspective(10px) rotateY(-9deg);
-      transform: perspective(10px) rotateY(-9deg);
-      right: 0;
-      box-shadow: -3px 0 3px $shadowColor;
-    }
-    .Fg-gener-button {
-      height: 42px;
-      box-shadow: 0 0 8px $shadowColor;
-      padding: 0 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      // // border-bottom: 1px solid $borderColor;
-      .Fg-gener-button-left {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-    .Fg-gener-form {
-      padding: 16px;
-      height: calc(100% - 43px);
-      overflow-y: auto;
-      box-sizing: border-box;
-      position: relative;
-    }
-    .form-empty {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  .Fg-gener-right {
-    // border-left: 1px solid $borderColor;
-    box-shadow: 0 0 8px $shadowColor;
-    width: 350px;
-    height: 100%;
-
-    .Fg-gener-attr-cont {
-      height: calc(100% - 44px);
-      padding: 16px;
-      box-sizing: border-box;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-  }
-  .Fg-gener-side-close {
-    width: 0;
-  }
-}
-</style>

package/src/components/formGenerator/styles/generator.scss

@@ -1,271 +0,0 @@
-$themeColor:var(--themeColor);
-$selectedColor: var(--selectedColor);
-$borderColor:#f1e8e8;
-$shadowColor:#0000001a;
-$shadow:0 0 4px $shadowColor;
-
-$grey-light:#93969e;
-
-.Fg-Blue {
-  color: $themeColor;
-}
-
-@mixin Fg-drop-here() {
-  background: #f2f8ff;
-  // border: 1px dashed #ccc;
-}
-.Fg-form-item {
-  overflow: hidden;
-  .el-table .el-table__header {
-    line-height: 23px;
-  }
-}
-.drawing-board {
-
-  .Fg-form-item {
-    // background-color: #fff;
-    .el-form-item {
-      background: transparent !important; 
-    }
-    .el-input__inner {
-      // background: transparent;
-    }
-  }
-  .el-input__inner,.el-textarea__inner {
-    background: transparent;
-  }
-
- 
-  .Fg-active {
-    position: relative;
-    border: 2px solid $themeColor !important;
-  }
-  height: 100%;
-  // min-height: 60px;
-  position: relative;
-  .sortable-ghost {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    &::before {
-      content: " ";
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      height: 3px;
-      background: $themeColor;
-      z-index: 2;
-    }
-  }
-  .components-item.sortable-ghost {
-    width: 100%;
-    height: 60px;
-    // background-color: $selectedColor;
-  }
-  .drawing-item-edit:last-child{
-    margin-bottom: 0;
-  }
-}
-.drawing-item-edit{
-  position: relative;
-  cursor: move;
-  // margin-bottom: 16px;
-  padding: 8px;
-  &.unfocus-bordered:not(.active-from-item) > div:first-child {
-    border: 1px dashed #ccc;
-  }
-  .el-form-item{
-    // padding: 12px 10px;
-    margin-bottom: 0;
-    background-color: #fff;
-  }
-  .Fg-table-container {
-    td {
-      height: 60px;
-      box-sizing: border-box;
-      background-color: #f2f8ff;
-      >.Fg-tips {
-        >.Fg-tips-content {
-          border-width: 0;
-        }
-      }
-    }
-  }
-  .Fg-com-mini, .Fg-com-small,.Fg-com-medium {
-    margin-bottom: 0;
-  }
-
-  .form-row-container {
-    padding: 8px;
-  }
-  .Fg-table-container {
-    .form-row-container {
-      padding: 0;
-    }
-  }
-
-  .Fg-tabs-container {
-    .el-tabs__content {
-      @include Fg-drop-here();
-    }
-    &.el-tabs--border-card>.el-tabs__content {
-      padding: 0;
-    }
-  }
-  .Fg-card {
-    .el-card__body {
-      @include Fg-drop-here();
-      padding: 0;
-    }
-  }
-  
-  .Fg-collapse {
-    .el-collapse-item__content {
-      @include Fg-drop-here();
-      padding-bottom: 0;
-    }
-  }
-  .Fg-sub {
-    .Fg-sub-item {
-      @include Fg-drop-here();
-    }
-  }
-  .Fg-steps {
-    .Fg-steps--content {
-      @include Fg-drop-here();
-    }
-  }
-  .Fg-tips {
-    position: relative;
-    .Fg-tips-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  
-}
-
-.form-row-container {
-  font-size: 14px;
-  input,textarea {
-    // background: transparent;
-  }
-  .el-form-item__label {
-    // color: inherit;
-    // font-size: inherit;
-    // text-decoration-line: inherit;
-    // text-decoration-color:inherit;
-    // text-decoration-style:inherit;
-  }
-}
-.drawing-border {
-  @include Fg-drop-here()
-}
-.drawing-row-item{
-  position: relative;
-  cursor: move;
-  box-sizing: border-box;
-  border: 1px dashed #ccc;
-  // border-radius: 3px;
-  .drag-wrapper{
-    min-height: 80px;
-  }
-  .component-name{
-    position: absolute;
-    top: 0;
-    left: 10px;
-    font-size: 12px;
-    color: #bbb;
-    display: inline-block;
-    padding: 0 6px;
-  }
-  .el-input-number,
-  .el-autocomplete {
-    width: 100%;
-  }
-
-}
-
-.drawing-item-hover {
-  &:hover {
-    border: 1px dashed $themeColor ;
-  } 
-}
-
-.drawing-item-edit, .drawing-row-item{
-  .Fg-form-item--topIcon {
-    position: absolute;
-    top: 5px;
-    left:5px;
-    z-index: 1;
-  }
-  .Fg-form-item--icon {
-    position: absolute;
-    // top: -10px;
-    // right: 24px;
-    bottom: 1px;
-    right: 1px;
-  }
-}
-
-.Fg-bottom-0 {
-  margin-bottom: 0;
-}
-
-.Fg-com-mini {
-  margin-bottom: 18px;
-}
-
-.Fg-com-small {
-  margin-bottom: 18px;
-}
-.Fg-com-medium {
-  margin-bottom: 22px;
-}
-
-.Fg-cursor {
-  cursor: pointer;
-}
-
-.Fg-upload-tips {
-  color: $grey-light;
-}
-
-// 组件文字行高 
-@mixin FgTextLH($lh) {
-  // 富文本行高
-  .rich-text-show {
-    line-height: $lh !important;
-    .ql-editor {
-      padding: 0 !important;
-      line-height: $lh !important;
-    }
-  }
-  // 附件行高
-  .Fg-file-item {
-    line-height: $lh !important;
-  }
-  // 
-}
-
-.el-form-item--mini {
-  @include FgTextLH(28px);
-  .Fg-tree {
-    margin: 1px 0;
-  }
-}
-.el-form-item--small {
-  @include FgTextLH(32px);
-  .Fg-tree {
-    margin: 3px 0;
-  }
-}
-.el-form-item--medium {
-  @include FgTextLH(36px);
-  .Fg-tree {
-    margin: 5px 0;
-  }
-}
-