@xfu0401/form-generator 1.0.21 → 1.0.22

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

@@ -1,219 +0,0 @@
-<template>
-  <div class="Fg-sub">
-    <!-- <span>{{$attrs.__config__.componentName}}</span> -->
-    <div class="Fg-sub-item" v-if="$attrs.isEdit" style="margin-bottom:0" :style="newStyle">
-      <form-row-container
-        :list.sync="list[0].children"
-        :font="newStyle.font"
-        v-bind="$attrs"
-        :border="false"
-      />
-    </div>
-    <template v-else>
-      <div v-if="$attrs.subType=='form'">
-        <div class="Fg-sub-item" v-for="(item,i) in formLists" :key="i" :style="newStyle">
-          <div class="Fg-sub-item--top">
-            第{{i+1}}项
-            <i
-              class="el-icon-close"
-              @click="handleDelete(i)"
-              v-if="!$attrs.onlyShow && formLists.length>1"
-            ></i>
-          </div>
-          <form-row-container
-            :list.sync="item.children"
-            :font="newStyle.font"
-            v-bind="$attrs"
-            :border="false"
-          />
-        </div>
-      </div>
-      <div v-if="$attrs.subType=='table'">
-        <el-table
-          :header-cell-style="{background:'#f5f7fa'}"
-          :data="formLists"
-          style="width: 100%"
-          v-bind="$attrs"
-          border
-          :style="newStyle"
-        >
-          <el-table-column type="index" :index="indexMethod"></el-table-column>
-          <template v-for="(item,i) in labels">
-            <el-table-column
-              :label="item.label"
-              :key="i"
-              align="center"
-              v-if="!item.isHide || $attrs.isEdit"
-            >
-              <template slot-scope="scope">
-                <component
-                  v-if="['layout','assist'].includes(scope.row.children[i].__config__.tagType)"
-                  :is="scope.row.children[i].__config__.tag"
-                  v-model="scope.row.children[i].__config__.defaultValue"
-                  v-bind="{...$attrs,...$utils.toCamelCase($utils.deepClone(scope.row.children[i]))}"
-                  :formConf="$attrs.formConf"
-                  :isEdit="$attrs.isEdit"
-                  :list.sync="scope.row.children[i].children"
-                  :disabled="scope.row.children[i].disabled || $attrs.formConf.disabled"
-                  :font="newStyle.font"
-                  :onlyShow="onlyShowFun(scope.row.children[i])"
-                />
-                <el-form-item
-                  v-else
-                  label-width="0px"
-                  :required="scope.row.children[i].__config__.required && !scope.row.children[i].disabled && !scope.row.children[i].readonly && !onlyShowFun(scope.row.children[i])"
-                  :rules="$utils.formRules({...scope.row.children[i],onlyShow:onlyShowFun(scope.row.children[i])})"
-                  :prop="scope.row.children[i].__vModel__"
-                >
-                  <component
-                    :is="scope.row.children[i].__config__.tag"
-                    v-model="scope.row.children[i].__config__.defaultValue"
-                    v-bind="{...$attrs,...$utils.toCamelCase($utils.deepClone(scope.row.children[i]))}"
-                    :formConf="$attrs.formConf"
-                    :isEdit="$attrs.isEdit"
-                    :list.sync="scope.row.children[i].children"
-                    :disabled="scope.row.children[i].disabled || $attrs.formConf.disabled"
-                    :onlyShow="onlyShowFun(scope.row.children[i])"
-                    :font="newStyle.font"
-                  />
-                </el-form-item>
-              </template>
-            </el-table-column>
-          </template>
-          <el-table-column v-if="!$attrs.onlyShow" label="操作" align="center" width="150px">
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="danger"
-                :disabled="formLists.length<=1"
-                @click="handleDelete(scope.$index)"
-              >删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <el-button
-        v-if="!$attrs.onlyShow"
-        icon="el-icon-plus"
-        style="margin-top:10px"
-        @click="handleAdd"
-        size="small"
-        :disabled="formLists.length==$attrs.maxSize"
-      >添加数据</el-button>
-    </template>
-  </div>
-</template>
- 
-<script>
-import { handleEvent } from "../../../utils";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-sub",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      formLists: this.list.slice(1, this.list.length),
-    };
-  },
-  computed: {
-    labels() {
-      return this.list[0]?.children.map((item) => {
-        return {
-          label: item.__config__.label,
-          isHide: item.isHide,
-        };
-      });
-    },
-  },
-  mounted() {
-    if (this.list.length <= 1 && !this.$attrs.isEdit) {
-      this.handleAdd();
-    }
-  },
-  methods: {
-    handleEvent,
-    indexMethod(index) {
-      return index + 1;
-    },
-    onlyShowFun(item) {
-      return this.$attrs.onlyShow || item?.onlyShow;
-    },
-    handleAdd() {
-      const newItem = this.list[0]?.children.map((item) => {
-        return this.$utils.createFormItem(this.$utils.deepClone(item));
-      });
-      this.formLists.push({
-        // label: `第${this.formLists.length + 1}项`,
-        value: this.$utils.getUuiKey(),
-        children: newItem,
-      });
-    },
-    handleDelete(i) {
-      this.formLists.splice(i, 1);
-    },
-  },
-  watch: {
-    formLists: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue && this.list.length) {
-          const list = [this.list[0]].concat(newValue);
-          this.$emit("update:list", list);
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-@import "@/style/color";
-
-.Fg-sub {
-  .Fg-sub-item {
-    padding: 5px;
-    margin-bottom: 10px;
-    border-left: 3px solid #409eff !important;
-    border-radius: 5px;
-    background: #fafafa;
-    font-size: 14px;
-    color: $gray-7;
-    overflow: auto;
-    .Fg-sub-item--top {
-      position: relative;
-      padding: 10px 40px;
-      text-align: right;
-      .el-icon-close {
-        position: absolute;
-        top: 13px;
-        right: 10px;
-        z-index: 1;
-        cursor: pointer;
-      }
-    }
-  }
-  .el-table {
-    .cell {
-      > .el-form-item {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,277 +0,0 @@
-<template>
-  <div class="Fg-table-container" :style="newStyle">
-    <table
-      :id="id"
-      :border="$attrs.borderWidth"
-      :cellpadding="0"
-      :cellspacing="0"
-      :align="$attrs.tableAlign"
-      :style="{borderColor:$attrs.borderColor}"
-    >
-      <tr v-for="(tr,rIndex) in list" :key="rIndex">
-        <template v-for="(td,dIndex) in tr.children">
-          <!-- <td
-            class="Fg-tips"
-            v-if="td && td.colspan && td.rowspan"
-            :key="dIndex"
-            :colspan="td.colspan"
-            :rowspan="td.rowspan"
-            :id="td.id"
-            :style="{ width: td.width  + '%',...td.style ,borderWidth:$attrs.borderWidth+'px',borderColor:$attrs.borderColor}"
-            @click.stop="handleClick(td.id)"
-          >-->
-          <td
-            class="Fg-tips"
-            v-if="td && td.colspan && td.rowspan"
-            :key="dIndex"
-            :colspan="td.colspan"
-            :rowspan="td.rowspan"
-            :id="td.id"
-            :style="{ width:100/tr.children.length+'%',...td.style ,borderWidth:$attrs.borderWidth+'px',borderColor:$attrs.borderColor}"
-            @click.stop="handleClick(td.id)"
-          >
-            <div
-              :class="activeId==td.id && $attrs.isEdit?'Fg-active Fg-td-active':''"
-              :style="{'--cellpadding':$attrs.cellpadding * 2+'px',padding:$attrs.cellpadding+'px'}"
-            >
-              <!-- {{td.width}} -->
-              <form-row-container
-                height="100%"
-                :list.sync="td.children"
-                v-bind="$attrs"
-                :border="false"
-                :font="newStyle.font"
-              />
-            </div>
-            <template v-if="$attrs.isEdit && activeId==td.id">
-              <!-- <MenuButton
-                v-if="dIndex+td.colspan!==tr.children.length"
-                icon="el-icon-rank"
-                class="Fg-table-move"
-                @click="dragStart($event, dIndex,rIndex)"
-              />-->
-
-              <div class="Fg-table-options">
-                <!-- <TableStyle v-model="td.style" /> -->
-                <TableOptions
-                  :list="list"
-                  :rIndex="rIndex"
-                  :dIndex="dIndex"
-                  @command="handleSelect($event,list,rIndex,dIndex)"
-                />
-              </div>
-            </template>
-          </td>
-        </template>
-      </tr>
-    </table>
-    <div v-if="dragging" class="Fg-resize-guide" :style="{ left: guideLeft + 'px' }"></div>
-  </div>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import * as table from "../../../utils/table";
-import { getLeftTd, getRightTd } from "../../../utils/table";
-import store from "@/store";
-import { comMixin } from "../../../utils/comMixins";
-import TableOptions from "../components/tableOptions";
-export default {
-  mixins: [comMixin],
-  name: "form-table-container",
-  components: {
-    TableOptions,
-  },
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    scale: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      deepClone,
-      toCamelCase,
-      id: this.$attrs.__config__.formId,
-      dragging: null,
-      guideLeft: 0, // 引导线距离左侧窗口的距离
-    };
-  },
-  computed: {
-    activeId() {
-      return store.state.app.activeId;
-    },
-  },
-  methods: {
-    handleSelect(value, list, rIndex, dIndex) {
-      table[value](list, rIndex, dIndex);
-      this.isInput = true;
-    },
-    handleClick(key) {
-      // 只有在表单编辑器模式下才执行后续逻辑
-      if (!this.$attrs.isEdit) return;
-      store.commit("SET_ACTIVEID", key);
-    },
-
-    // 开始移动
-    dragStart(event, dIndex, rIndex) {
-      if (this.dragging) return (this.dragging = null);
-      this.setWidth();
-      const { td } = getLeftTd(this.list, rIndex, dIndex);
-      // const tdEl = document.getElementById(td.id);
-      // // 只有在边界时允许移动
-      // if (tdEl.getBoundingClientRect().right - event.clientX > 6) return;
-      this.dragging = {
-        column: dIndex - 1 + td.colspan,
-        startX: event.clientX, // 点击处距离左侧窗口距离
-        moveWidth: 0, // 移动的距离
-      };
-      this.guideLeft = event.clientX; // 引导线的位置
-      document.addEventListener("mousemove", this.drag);
-      document.addEventListener("mouseup", this.dragEnd);
-    },
-    // 正在移动
-    drag(event) {
-      if (!this.dragging) return;
-      this.guideLeft = event.clientX;
-      // 移动的距离
-      this.dragging.moveWidth = this.guideLeft - this.dragging.startX;
-    },
-    // 移动结束
-    dragEnd() {
-      const table = document.getElementById(this.id);
-      // 整个表格的宽度
-      const tableWidth = table.getBoundingClientRect().width;
-      // 移动的宽度 / 表格宽度 = 移动的百分比
-      const percent = (this.dragging.moveWidth / tableWidth) * 100;
-      this.list.forEach((tr, rIndex) => {
-        const { td, index } = getLeftTd(
-          this.list,
-          rIndex,
-          this.dragging.column
-        );
-        const { td: td2 } = getRightTd(
-          this.list,
-          rIndex,
-          this.dragging.column + 1
-        );
-        if (td && td2 && index - 1 + td.colspan == this.dragging.column) {
-          // 相邻两个表格的整体宽度
-          td.width += percent;
-          td2.width -= percent;
-          // const width = td.width + percent;
-          // const width2 = td2.width - percent;
-          // const minWidth = (200 / tableWidth) * 100;
-          // if (width > minWidth && width2 > minWidth) {
-          //   td.width = width;
-          //   td2.width = width2;
-          // }
-        }
-      });
-      // 移动结束
-      this.dragging = null;
-      document.removeEventListener("mousemove", this.drag);
-      document.removeEventListener("mouseup", this.dragEnd);
-    },
-    // 获取正式单元格列宽比例
-    setWidth() {
-      const table = document.getElementById(this.id);
-      // 整个表格的宽度
-      const tableWidth = table.getBoundingClientRect().width;
-      this.list.forEach((tr) => {
-        tr.children.forEach((td) => {
-          if (td) {
-            const tdEl = document.getElementById(td.id);
-            const tdWidth = tdEl.getBoundingClientRect().width;
-            td.width = (tdWidth / tableWidth) * 100;
-          }
-        });
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-.Fg-table-container {
-  width: 100%;
-  overflow-x: auto;
-  // margin-bottom: 22px;
-  > table {
-    height: 100%;
-    width: 100%;
-    // border: 1px solid #ebeef5;
-    border-style: solid;
-    border-color: #ebeef5;
-    border-collapse: collapse; /* 折叠边框，使其看起来更整洁 */
-    position: relative;
-    table-layout: fixed;
-
-    td {
-      position: relative;
-      // overflow-x: auto;
-      border: 1px solid #ebeef5;
-      border-style: solid !important;
-      .Fg-form-item {
-        overflow: auto;
-      }
-    }
-
-    .Fg-table-options {
-      position: absolute;
-      right: 1px;
-      bottom: 1px;
-      z-index: 1;
-
-      > div {
-        & + div {
-          margin-left: 10px;
-        }
-      }
-    }
-    .Fg-table-move {
-      position: absolute;
-      right: -10px;
-      // bottom: 34px;
-      top: 50%;
-      transform: translateY(-10px);
-    }
-
-    .form-row-container {
-      .Fg-form-draggable {
-        > .Fg-form-item:last-child {
-          > .el-form-item {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-.Fg-resize-guide {
-  position: fixed;
-  border-left: 1px dashed #000;
-  height: 100%;
-  top: 0;
-  z-index: 1000;
-}
-.Fg-resize-box {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  z-index: 1;
-}
-
-.Fg-active.Fg-td-active {
-  height: calc(100% - var(--cellpadding) - 2px);
-}
-</style>
-

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

@@ -1,65 +0,0 @@
-<template>
-  <el-tabs class="Fg-tabs-container" :type="type" :value="activeName" :style="newStyle">
-    <el-tab-pane
-      class="Fg-tips"
-      v-for="item in list"
-      :key="item.value"
-      :label="item.label"
-      :name="item.value"
-    >
-      <span slot="label" :style="newStyle.font">{{item.label}}</span>
-      <form-row-container
-        :list.sync="item.children"
-        :font="newStyle.font"
-        v-bind="$attrs"
-        :border="false"
-      />
-    </el-tab-pane>
-  </el-tabs>
-</template>
- 
-<script>
-import { deepClone, toCamelCase } from "../../../utils/index";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-tabs-container",
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      activeName: this.value || this.list[0]?.value,
-      deepClone,
-      toCamelCase,
-    };
-  },
-
-  watch: {
-    value(newValue) {
-      this.activeName = newValue;
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import "../../../styles/generator.scss";
-.Fg-tabs-container {
-  .el-tabs__content {
-    height: calc(100% - 44px);
-    overflow: auto;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/selectComs/formCascader.vue

@@ -1,62 +0,0 @@
-<template>
-  <div :style="newStyle">
-    <span v-if="$attrs.onlyShow">{{getCascaderText($attrs)}}</span>
-    <el-cascader
-      style="width:100%"
-      v-else
-      v-model="formValue"
-      v-bind="$attrs"
-      @blur="onBlur"
-      @focus="onFocus"
-      @clear="onClear"
-      @change="$emit('validate',$event)"
-      :options="resData"
-      :props="{...dataObj.props,multiple:$attrs.multiple,checkStrictly:$attrs.checkStrictly}"
-    ></el-cascader>
-  </div>
-</template>
-
-<script>
-import { treeToArray } from "../../../utils";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-cascader",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: ["value"],
-  computed: {
-    formValue: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("update", val);
-        this.onChange(val);
-      },
-    },
-  },
-  methods: {
-    // 根据级联的值获取级联的显示文本
-    getCascaderText(formItem) {
-      const props = this.dataObj.props;
-      const formValue = this.value;
-      const options = treeToArray(this.resData, props.children);
-      let path = [];
-      formValue?.forEach((value) => {
-        const active = options.find((item) => item[props.value] == value);
-        if (active) path.push(active[props.label]);
-      });
-      // 间隔符
-      const separator = formItem.separator;
-      // 是否展示全路径
-      const showAllLevels = formItem["showAllLevels"];
-      return showAllLevels ? path.join(separator) : path[path.length - 1];
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/formGenerator/formComponents/pcComponents/selectComs/formCheckboxGroup.vue

@@ -1,70 +0,0 @@
-<template>
-  <div :style="newStyle">
-    <span v-if="$attrs.onlyShow">{{getOptionsText(value,resData,props)}}</span>
-    <el-checkbox-group
-      v-else
-      v-model="formValue"
-      v-bind="$attrs"
-      :min="$attrs.min||0"
-      :max="$attrs.max!==null?$attrs.max:resData.length"
-    >
-      <template v-if="$attrs.__config__.optionType == 'button'">
-        <el-checkbox-button
-          v-for="item in resData"
-          :key="item[props.value]"
-          :label="item[props.value]"
-          :value="item[props.value]"
-          :disabled="item.disabled"
-          :border="$attrs.__config__.border"
-        >{{ item[props.label] }}</el-checkbox-button>
-      </template>
-      <template v-else>
-        <el-checkbox
-          v-for="item in resData"
-          :key="item[props.value]"
-          :label="item[props.value]"
-          :value="item[props.value]"
-          :disabled="item.disabled"
-          :border="$attrs.__config__.border"
-        >{{ item[props.label] }}</el-checkbox>
-      </template>
-    </el-checkbox-group>
-  </div>
-</template>
-
-<script>
-import { getOptionsText } from "../../../utils";
-
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-checkbox-group",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-  },
-  computed: {
-    formValue: {
-      get() {
-        return this.value ? this.value.split(",") : [];
-      },
-      set(val) {
-        const value = val ? val.join(",") : "";
-        this.$emit("update", value);
-        this.onChange(value);
-      },
-    },
-  },
-  methods: {
-    getOptionsText,
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>