@xfu0401/form-generator 1.0.1 → 1.0.2

package/src/components/formGenerator/formComponents/pcComponents/inputComs/formRichText.vue

@@ -1,138 +0,0 @@
-<template>
-  <!-- 富文本控件 -->
-  <div class="form-components" :style="{...newStyle,scale:'none'}">
-    <template v-if="!$attrs.onlyShow">
-      <div v-if="readonly" class="form-readonly"></div>
-      <div v-if="disabled" class="form-disabled"></div>
-      <RichEditor
-        v-if="!loading"
-        class="el-textarea"
-        v-model="formValue"
-        :readonly="readonly || disabled"
-        :placeholder="placeholder"
-        :maxlength="maxlength"
-        :height="height"
-        :transcoding="transcoding"
-        @input="changeValue"
-        @blur="onBlur"
-        @focus="onFocus"
-      />
-    </template>
-    <div v-else v-rich-text="value" class="rich-text-show"></div>
-  </div>
-</template>
-<script>
-// 富文本
-import RichEditor from "@/plugins/richEditor/richEditorPc";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-rich-text",
-  components: {
-    RichEditor,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      default: "",
-    },
-
-    // 是否只读
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 占位语
-    placeholder: {
-      type: String,
-      default: "请输入",
-    },
-    // 最大输入长度
-    maxlength: {
-      type: String,
-      default: "20000",
-    },
-    height: {
-      type: [String, Number],
-      default: "",
-    },
-    // 是否开启转码
-    transcoding: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      formValue: this.value,
-      loading: false,
-    };
-  },
-  computed: {
-    // 需要监听变化的数据
-    changeObj() {
-      return {
-        maxlength: this.maxlength,
-        placeholder: this.placeholder,
-        disabled: this.disabled,
-        readonly: this.readonly,
-      };
-    },
-  },
-
-  watch: {
-    // 监听数据的变化
-    value: {
-      handler(nd, od) {
-        if (nd !== this.formValue) {
-          this.formValue = nd;
-        }
-      },
-    },
-    changeObj: {
-      handler(nd, od) {
-        if (JSON.stringify(nd) != JSON.stringify(od)) {
-          this.loading = true;
-          this.$nextTick(() => {
-            this.loading = false;
-          });
-        }
-      },
-    },
-  },
-  methods: {
-    // 数据变化就传递更新
-    changeValue(val) {
-      this.$emit("update", val);
-      this.$emit("input", val);
-      this.onInput(val);
-    },
-  },
-  directives: {
-    richText(el, binding) {
-      if (binding.value) {
-        let html = binding.value;
-        try {
-          html = decodeURIComponent(html.replace(/%(?!\d|[ABCDEF]+)/g, "%25"));
-        } catch (e) {}
-        html = "<div class='ql-editor'>" + html + "</div>";
-        html = html.replace(/position: fixed;/g, "position: relative;");
-        html = html.replace(/position: absolute;/g, "position: relative;");
-        el.innerHTML = html;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-</style>

package/src/components/formGenerator/formComponents/pcComponents/layoutComs/formCard.vue

@@ -1,35 +0,0 @@
-<template>
-  <el-card class="Fg-card" v-bind="$attrs" :style="newStyle">
-    <form-row-container :list.sync="list" :font="newStyle.font" v-bind="$attrs" :border="false" />
-  </el-card>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-card",
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      deepClone,
-      toCamelCase,
-    };
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-.Fg-card {
-  .el-card__body {
-    overflow: auto;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/layoutComs/formCollapse.vue

@@ -1,79 +0,0 @@
-<template>
-  <el-collapse v-model="activeNames" class="Fg-collapse" v-on="$listeners" :style="newStyle">
-    <el-collapse-item
-      class="Fg-tips"
-      v-for="item in list"
-      :key="item.value"
-      :name="item.value"
-      :title="item.label"
-    >
-      <form-row-container
-        :list.sync="item.children"
-        :font="newStyle.font"
-        v-bind="$attrs"
-        :border="false"
-      />
-    </el-collapse-item>
-  </el-collapse>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-collapse",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      activeNames: [],
-      deepClone,
-      toCamelCase,
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        try {
-          this.activeNames = newValue.split(",");
-        } catch (error) {
-          console.log(error);
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-.Fg-collapse {
-  color: #303133;
-  font-size: 13px;
-  font-weight: 500;
-  .el-collapse-item__content {
-    padding-bottom: 0;
-  }
-  .el-collapse-item__header {
-    background: transparent;
-    font-size: inherit;
-    color: inherit;
-    font-weight: inherit;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/layoutComs/formRowContainer.vue

@@ -1,333 +0,0 @@
-<template>
-  <!-- 中间表单内容 -->
-  <el-row
-    :gutter="$attrs.gutter"
-    class="form-row-container Fg-tips"
-    :class="border?'drawing-border':''"
-    :style="{ height: isEdit?height:'' ,marginLeft:0,marginRight:0,...newStyle}"
-  >
-    <EmptyTips v-if="drawingList.length==0 " />
-    <draggable
-      :disabled="!isEdit || onlyShow"
-      class="Fg-form-draggable"
-      :class="flexClass"
-      :list="drawingList"
-      :animation="340"
-      :style="{minHeight:drawingList.length ==0 && isEdit?'60px':0}"
-      group="componentsGroup"
-      @start="dragStart"
-      @end="dragEnd"
-    >
-      <el-col
-        class="Fg-form-item"
-        v-for="(item, index) in drawingList"
-        v-show="!item.isHide || isEdit"
-        :key="item.__config__.formId"
-        :class="isEdit ? changClass(item, currentData, formConf) : ''"
-        :span="item.__config__.span"
-        @click.native.stop="activeFormItem(item,$event )"
-      >
-        <div class="Fg-form-item--topIcon" v-if="isEdit">
-          <svg-icon v-if="item.isHide" :iconClass="item.isHide?'noview':'view'" />
-          <i v-if="item.isLock" :class="item.isLock?'el-icon-lock':'el-icon-unlock'" />
-        </div>
-        <div
-          class="Fg-form-item--icon"
-          v-if="isEdit && !onlyShowFun(item) && activeId==item.__config__.formId"
-        >
-          <!-- <MenuButton icon="el-icon-back" @click="toLeft(item, index)" /> -->
-          <MenuButton v-if="index>0" icon="el-icon-top" @click="toTop(item, index)" />
-          <MenuButton
-            v-if="index!==drawingList.length-1"
-            icon="el-icon-bottom"
-            @click="toBottom(item, index)"
-          />
-          <MenuButton
-            v-if="!item.isLock"
-            icon="el-icon-copy-document"
-            @click="drawingItemCopy(item)"
-          />
-          <MenuButton
-            v-if="!item.isLock"
-            icon="el-icon-delete"
-            type="danger"
-            @click="drawingItemDelete(item, index)"
-          />
-        </div>
-        <component
-          v-if="['layout','assist'].includes(item.__config__.tagType)"
-          v-model="item.__config__.defaultValue"
-          :is="item.__config__.tag"
-          v-bind="toCamelCase(deepClone(item))"
-          :disabled="item.disabled || formConf.disabled"
-          :formConf="formConf"
-          :list.sync="item.children"
-          :isEdit="isEdit"
-          :enabled="enabled"
-          :font="newStyle.font"
-          :onlyShow="onlyShowFun(item)"
-          :border="isEdit"
-          @active="activeFormItem"
-          @clone="handleClone"
-        />
-        <el-form-item
-          v-else
-          :class="{
-            'mask-layer': ((!enabled && item.__config__.tag !== 'form-row-container') ||item.readonly)&&!onlyShowFun(item),
-          }"
-          :label="item.__config__.showLabel ? item.__config__.label : ''"
-          :label-width="
-            item.__config__.tag == 'form-row-container' ||
-            !item.__config__.showLabel
-              ? '0px'
-              : item.__config__.labelWidth
-              ? item.__config__.labelWidth + 'px'
-              : ''
-          "
-          :required="
-            item.__config__.required && !item.disabled && !item.readonly && !item.isHide && !onlyShowFun(item)
-          "
-          :rules="formRules({...item,onlyShow:onlyShowFun(item)})"
-          :prop="isEdit ? '' : item.__vModel__"
-        >
-          <span
-            v-if="item.__config__.showLabel"
-            :style="newStyle.font"
-            slot="label"
-          >{{item.__config__.label}}</span>
-          <!-- toCamelCase 需要将所有属性名更改为驼峰命名法，不然无法生效 -->
-          <component
-            v-model="item.__config__.defaultValue"
-            :is="item.__config__.tag"
-            v-bind="toCamelCase(deepClone(item))"
-            :disabled="item.disabled || formConf.disabled"
-            :formConf="formConf"
-            :list.sync="item.children"
-            :isEdit="isEdit"
-            :enabled="enabled"
-            :font="newStyle.font"
-            :onlyShow="onlyShowFun(item)"
-            @active="activeFormItem"
-            @clone="handleClone"
-            @validate="$emit('validate',item)"
-          />
-        </el-form-item>
-      </el-col>
-    </draggable>
-  </el-row>
-</template>
-
-<script>
-import draggable from "vuedraggable";
-import {
-  deepClone,
-  toCamelCase,
-  createFormItem,
-  updateForm,
-  changClass,
-  formRules,
-  handleEvent,
-  swapArray,
-} from "../../../utils/index";
-import MenuButton from "@/components/huComponents/MenuButton";
-import EmptyTips from "../components/emptyTips.vue";
-import store from "@/store";
-
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-row-container",
-  components: {
-    draggable,
-    MenuButton,
-    EmptyTips,
-  },
-  props: {
-    // 表单属性
-    formConf: {
-      type: Object,
-      default: () => {},
-    },
-    // 表单列表
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    __config__: {
-      type: Object,
-      default: () => {},
-    },
-    // 是否为编辑模式
-    isEdit: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否为显示模式
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-    isPreview: {
-      type: Boolean,
-      default: false,
-    },
-    height: {
-      type: String,
-      default: "",
-    },
-    enabled: {
-      type: Boolean,
-      default: false,
-    },
-    border: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      drawingList: [], // 初始化时默认选中表单组件
-      activeData: {}, // 选中值
-      formModel: {},
-    };
-  },
-
-  computed: {
-    flexClass() {
-      let className = `el-row--flex is-align-${this.$attrs.align} is-justify-${this.$attrs.justify}`;
-      return `${this.isEdit ? "drawing-board" : ""} ${
-        this.$attrs.type == "flex" ? className : ""
-      }`;
-    },
-    // 当前选中表单组件
-    currentData() {
-      return store.state.app.activeData;
-    },
-    activeId() {
-      return store.state.app.activeId;
-    },
-  },
-
-  watch: {
-    // 当前选中的表单项数据
-    currentData: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          this.activeData = deepClone(newValue);
-          updateForm(this.drawingList, newValue);
-        }
-      },
-    },
-
-    list: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          this.drawingList = newValue;
-          // this.drawingList = deepClone(newValue);
-          // 当列表中的数据发生变化时，需要同步更改右侧属性
-          const currentData = this.drawingList.find(
-            (item) =>
-              item.__config__.formId == this.activeData?.__config__?.formId
-          );
-          if (
-            JSON.stringify(currentData) !== JSON.stringify(this.currentData)
-          ) {
-            this.activeFormItem(currentData);
-          }
-        }
-      },
-    },
-    drawingList: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (JSON.stringify(newValue) !== JSON.stringify(this.list)) {
-          this.$emit("update:list", newValue);
-        }
-      },
-    },
-  },
-
-  methods: {
-    toCamelCase,
-    deepClone,
-    changClass,
-    formRules,
-    handleEvent,
-    onlyShowFun(item) {
-      return this.onlyShow || item?.onlyShow;
-    },
-
-    // 选中某一表单项
-    activeFormItem(currentItem, event) {
-      // 只有在表单编辑器模式下才执行后续逻辑
-      if (!this.isEdit) return;
-      event?.stopPropagation();
-      // 需要将当前页所有数据渲染完了之后再更新当前选中
-      this.$nextTick(() => {
-        if (currentItem && !this.isPreview) {
-          this.activeData = currentItem;
-          store.commit("SET_ACTIVEDATA", currentItem);
-          this.$emit("active", currentItem, event);
-        }
-      });
-    },
-    // 复制表单项
-    drawingItemCopy(item) {
-      let clone = deepClone(item);
-      clone = createFormItem(clone);
-      this.handleClone(clone);
-      // this.activeFormItem(clone);
-    },
-    handleClone(clone) {
-      this.drawingList.push(clone);
-    },
-    // 删除表单项
-    drawingItemDelete(item, index) {
-      this.drawingList.splice(index, 1);
-      if (this.drawingList.length) {
-        this.activeFormItem(this.drawingList[0]);
-      } else {
-        this.activeFormItem({});
-      }
-    },
-    // 开始拖拽
-    dragStart(obj) {
-      // console.log("开始拖拽", obj);
-    },
-    // 结束拖拽
-    dragEnd(obj) {
-      // console.log("结束拖拽", obj);
-    },
-    // 键盘事件
-    handleKeyPress(item, index, event) {
-      // 获取按下的键的ASCII码
-      const keyCode = event.keyCode || event.which;
-      // 输出按键信息
-      console.log("Pressed key code:", keyCode);
-    },
-    // 左移
-    toLeft(item, index) {
-      console.log("左移:", item, index);
-    },
-    // 上移
-    toTop(item, index) {
-      swapArray(this.drawingList, index - 1, index);
-    },
-    // 下移
-    toBottom(item, index) {
-      swapArray(this.drawingList, index, index + 1);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.form-row-container {
-  overflow: auto;
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/layoutComs/formSteps.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="Fg-steps" :style="{...newStyle,'--color':newStyle.color}">
-    <el-steps :active="active" finish-status="success" v-bind="$attrs" v-on="$listeners">
-      <el-step class="Fg-tips" v-for="item in list" :key="item.value" :title="item.label"></el-step>
-    </el-steps>
-    <div class="Fg-steps--content" v-for="(item,i) in list" :key="item.value" v-show="i==active">
-      <form-row-container
-        :list.sync="item.children"
-        :font="newStyle.font"
-        v-bind="$attrs"
-        :border="false"
-      />
-    </div>
-    <div class="Fg-steps--button">
-      <el-button v-show="active!==0" size="small" @click="pre">上一步</el-button>
-      <el-button v-show="active!==list.length-1" size="small" @click="next">下一步</el-button>
-    </div>
-  </div>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-steps",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      active: 0,
-      deepClone,
-      toCamelCase,
-    };
-  },
-  methods: {
-    pre() {
-      this.active--;
-    },
-    next() {
-      this.active++;
-    },
-  },
-
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.active = this.list.findIndex((item) => item.value == newValue);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-.Fg-steps {
-  // color: #303133;
-  .Fg-steps--button {
-    margin-top: 10px;
-    display: flex;
-    justify-content: space-around;
-  }
-  .el-step__title.is-wait {
-    color: var(--color);
-  }
-  .el-step__head.is-wait {
-    // color: var(--color);
-  }
-  display: flex;
-  flex-direction: column;
-  .Fg-steps--content {
-    overflow: auto;
-  }
-}
-</style>