@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/views/config/config.vue

@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <h1>配置属性参数说明</h1>
-    <el-card header="操作右侧的属性面板，可以看到数据变动">
-      <ConfigCell />
-    </el-card>
-    <el-card header="组件参数对照表">
-      <el-table :data="configTable" style="width: 100%" size="medium" border>
-        <el-table-column prop="param" label="属性" width="300"></el-table-column>
-        <el-table-column prop="required" label="是否必填" width="100" align="center" />
-        <el-table-column prop="remark" label="说明">
-          <template slot-scope="scope">
-            <span v-html="scope.row.remark"></span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-    <!-- 右侧表单属性 -->
-    <el-card header="表单参数对照表">
-      <el-row :gutter="20">
-        <el-col :span="16">
-          <el-table :data="formTable" style="width: 100%" size="medium" border>
-            <el-table-column prop="param" label="属性" width="300"></el-table-column>
-            <el-table-column prop="required" label="是否必填" width="100" align="center" />
-            <el-table-column prop="remark" label="说明"></el-table-column>
-            <!-- <el-table-column prop="value" label="默认值"></el-table-column> -->
-          </el-table>
-        </el-col>
-        <el-col :span="8">
-          <FormGeneratorAttrForm :formConf.sync="formAttrData" />
-        </el-col>
-      </el-row>
-    </el-card>
-
-    <el-card header="完整配置数据">
-      <div class="introduce">在config.js以json的形式声明：</div>
-      <Code :code="jsonData" />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import Code from "@/components/code/Code";
-import ConfigCell from "./components/configCell";
-import { configTable, formTable } from "@/utils/comsData";
-import {
-  formConf,
-  inputComponents,
-  selectComponents,
-  layoutComponents,
-  assistComponents
-} from "@/components/formGenerator/utils/config";
-
-import FormGeneratorAttrField from "@/components/formGenerator/components/formGeneratorAttrField.vue";
-import FormGeneratorAttrForm from "@/components/formGenerator/components/formGeneratorAttrForm.vue";
-import { deepClone } from "../../components/formGenerator/utils";
-export default {
-  components: {
-    Code,
-    ConfigCell,
-    FormGeneratorAttrField,
-    FormGeneratorAttrForm
-  },
-  data() {
-    return {
-      jsonData: deepClone({
-        ...formConf,
-        list: [
-          ...inputComponents,
-          ...selectComponents,
-          ...layoutComponents,
-          ...assistComponents
-        ]
-      }),
-      activeConfig: inputComponents[0],
-      formAttrData: formConf,
-      configTable,
-      formTable
-    };
-  }
-};
-</script>
-
-<style></style>

package/src/views/demo/demo.vue

@@ -1,235 +0,0 @@
-<template>
-  <div class="table-container">
-    <!-- 表格拖拽列宽 -->
-    <div class="video-wrap-hls">
-      <div style="width:100px">拖动</div>
-    </div>
-    <table id="tb_3" border="1" cellpadding="0" cellspacing="0" align="center">
-      <tr v-for="(tr,rIndex) in list" :key="rIndex">
-        <template v-for="(td,dIndex) in tr.children">
-          <td :key="dIndex" style="height:80px">
-            <div v-if="td &&td.colspan">colspan:{{td.colspan}}</div>
-            <div v-if="td && td.rowspan">rowspan:{{td.rowspan}}</div>
-          </td>
-        </template>
-      </tr>
-    </table>
-    <div style="height:100px"></div>
-    <table id="tb_3" border="1" cellpadding="0" cellspacing="0" align="center">
-      <tr v-for="(tr,rIndex) in list" :key="rIndex" :id="tr.label">
-        <template v-for="(td,dIndex) in tr.children">
-          <td
-            v-if="td && td.colspan && td.rowspan"
-            :key="dIndex"
-            :colspan="td.colspan"
-            :rowspan="td.rowspan"
-            :id="td.label"
-            :style="{ width: td.width  + '%' }"
-            @mousedown="dragStart($event, dIndex,rIndex)"
-          >
-            <div style="margin-right:16px;">
-              <div style="font-size:12px;color:#f56c6c;margin-bottom:5px">{{rIndex}}x{{dIndex}}</div>
-              <div>{{td}}</div>
-              <el-dropdown @command="handleSelect($event,list,rIndex,dIndex,tr,td)" trigger="click">
-                <el-button icon="el-icon-edit" si ze="mini" />
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item
-                    v-for="item in defaultOptions(list,rIndex,dIndex,tr,td)"
-                    :command="item.value"
-                    :key="item.value"
-                    :divided="item.divided"
-                    :disabled="item.disabled"
-                  >{{item.label}}</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </div>
-          </td>
-        </template>
-      </tr>
-    </table>
-    <!-- <div v-if="dragging" class="resize-guide" :style="{ left: guideLeft + 'px' }"></div>
-    {{dragging}}-->
-  </div>
-</template>
-
-<script>
-import { deepClone } from "../../components/formGenerator/utils";
-import * as table from "./table";
-import { defaultOptions, tableData, getLeftTd, getRightTd } from "./table";
-export default {
-  data() {
-    return {
-      list: tableData,
-      defaultCell: {
-        colspan: 1,
-        rowspan: 1,
-        children: []
-      },
-      dragging: null,
-      guideLeft: 0 // 引导线距离左侧窗口的距离
-    };
-  },
-  watch: {
-    list: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        console.log("newValue", newValue);
-      }
-    }
-  },
-  mounted() {
-    // this.init();
-  },
-
-  methods: {
-    defaultOptions,
-    handleSelect(value, list, rIndex, dIndex) {
-      table[value](list, rIndex, dIndex);
-    },
-    dragStart(event, dIndex, rIndex) {
-      const { td } = getLeftTd(this.list, rIndex, dIndex);
-      const tdEl = document.getElementById(td.label);
-      // 只有在边界时允许移动
-      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("tb_3");
-      // 整个表格的宽度
-      const tableWidth = table.getBoundingClientRect().width;
-      // 移动的宽度 / 表格宽度 = 移动的百分比
-      const percent = (this.dragging.moveWidth / tableWidth) * 100;
-      console.log("移动的百分比：", percent);
-      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 (index - 1 + td.colspan == this.dragging.column) {
-          const tdEl = document.getElementById(td.label);
-          tdEl.setAttribute("style", "background: pink;");
-          const tdEl2 = document.getElementById(td2.label);
-          tdEl2.setAttribute("style", "background: green;");
-          // 相邻两个表格的整体宽度
-          // 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);
-    },
-
-    init() {
-      let tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
-      const table = document.getElementById("tb_3");
-      for (let j = 0; j < table.rows[0].cells.length; j++) {
-        table.rows[0].cells[j].onmousedown = function() {
-          //记录单元格
-          tTD = this;
-          if (event.offsetX > tTD.offsetWidth - 10) {
-            tTD.mouseDown = true;
-            tTD.oldX = event.x;
-            tTD.oldWidth = tTD.offsetWidth;
-          }
-          //记录Table宽度
-          //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
-          //tTD.tableWidth = table.offsetWidth;
-        };
-        table.rows[0].cells[j].onmouseup = function() {
-          //结束宽度调整
-          if (tTD == undefined) tTD = this;
-          tTD.mouseDown = false;
-          tTD.style.cursor = "default";
-        };
-        table.rows[0].cells[j].onmousemove = function() {
-          //更改鼠标样式
-          if (event.offsetX > this.offsetWidth - 10)
-            this.style.cursor = "col-resize";
-          else this.style.cursor = "default";
-          //取出暂存的Table Cell
-          if (tTD == undefined) tTD = this;
-          //调整宽度
-          if (tTD.mouseDown != null && tTD.mouseDown == true) {
-            tTD.style.cursor = "default";
-            if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
-              tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
-            //调整列宽
-            tTD.style.width = tTD.width;
-            tTD.style.cursor = "col-resize";
-            //调整该列中的每个Cell
-            table = tTD;
-            while (table.tagName != "TABLE") table = table.parentElement;
-            for (j = 0; j < table.rows.length; j++) {
-              table.rows[j].cells[tTD.cellIndex].width = tTD.width;
-            }
-            //调整整个表
-            table.width = tTD.tableWidth + (tTD.offsetWidth - tTD.oldWidth);
-            table.style.width = table.width;
-          }
-        };
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-td {
-  position: relative;
-  // height: 200px;
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 5px;
-    height: 100%;
-    background: green;
-    cursor: ew-resize;
-  }
-}
-.table-container {
-  position: relative;
-  width: 100%;
-  padding: 20px;
-  table {
-    width: 100%;
-  }
-}
-.resize-guide {
-  position: fixed;
-  border-left: 1px dashed #000; /* dashed line */
-  height: 100%;
-  top: 0;
-}
-</style>

package/src/views/demo/demo2.vue

@@ -1,131 +0,0 @@
-<template>
-  <div>
-    <div class="box"></div>
-    <el-tree :data="data" :props="defaultProps"></el-tree>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      defaultProps: {
-        label(data) {
-          if (data.__config__?.componentName)
-            return data.__config__?.componentName;
-          if (data.__config__?.label || data.__config__?.formId)
-            return `${data.__config__.label}: ${data.__config__.formId}`;
-          if (data.id) return data.id;
-          return data.label;
-        },
-      },
-      data: [
-        {
-          __config__: {
-            tag: "form-table-container",
-            tagType: "layout",
-            tagIcon: "table-edit",
-            layoutTree: true,
-            formId: "field57uiw5bbhhw0",
-            formKey: "field57uiw5bbhhw0",
-            componentName: "表格布局",
-          },
-          borderWidth: 1,
-          isHide: false,
-          cellpadding: 8,
-          tableAlign: "center",
-          borderColor: "#ebeef5",
-          children: [
-            {
-              id: "25tm2uif3jcw",
-              style: {},
-              children: [
-                {
-                  id: "248i5famnwtc",
-                  style: {},
-                  width: 100,
-                  colspan: 2,
-                  rowspan: 1,
-                  children: [],
-                },
-                null,
-              ],
-            },
-            {
-              id: "2jdazye4e7y0",
-              style: {},
-              children: [
-                {
-                  colspan: 1,
-                  rowspan: 1,
-                  children: [],
-                  id: "6tgrmpb3gu80",
-                  width: 50,
-                  style: {},
-                  allowDrop: true,
-                },
-                {
-                  colspan: 1,
-                  rowspan: 1,
-                  children: [],
-                  id: "31vwn91e6zm0",
-                  width: 50,
-                  style: {},
-                  allowDrop: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.box {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  background-color: #f0f0f0;
-}
-
-.box::before,
-.box::after {
-  content: "";
-  position: absolute;
-  width: 2px;
-  height: 100px;
-  background-color: #000;
-}
-
-.box::before {
-  left: 0;
-  top: 0;
-}
-
-.box::after {
-  right: 0;
-  top: 0;
-}
-
-.box::top,
-.box::bottom {
-  content: "";
-  position: absolute;
-  width: 100px;
-  height: 2px;
-  background-color: #000;
-}
-
-.box::top {
-  left: 0;
-  top: 0;
-}
-
-.box::bottom {
-  left: 0;
-  bottom: 0;
-}
-</style>