@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/views/demo/table.js

@@ -1,321 +0,0 @@
-import { getUuiKey } from "../../components/formGenerator/utils";
-export function defaultCell() {
-  return {
-    label: 'td_' + getUuiKey(),
-    width: 25,
-    colspan: 1,
-    rowspan: 1,
-    children: []
-  }
-}
-
-// 合并单元格，得到一个新的单元格,keyName为不变的值
-export function mergeCells(array, keyName) {
-  // 初始化一个空对象作为合并后的结果
-  const mergedObject = { label: getUuiKey(), width: 0, colspan: 0, rowspan: 0, children: [] };
-  // 遍历数组中的每个对象
-  array.forEach(item => {
-    if (item) {
-      mergedObject.children = mergedObject.children.concat(item.children)
-      mergedObject.colspan += item.colspan;
-      mergedObject.rowspan += item.rowspan;
-      if (keyName == 'rowspan') mergedObject.width += item.width;
-      else mergedObject.width = array[0].width
-    }
-  });
-  if (keyName)
-    mergedObject[keyName] = array[0][keyName]
-  return mergedObject;
-}
-
-// 拆分单元格,按照属性keyName拆分，keyName为rowspan/colspan
-export function splitCell(original, keyName = 'colspan') {
-  // 确保num可以被整除
-  if (original[keyName] % 1 !== 0) {
-    throw new Error(keyName + '的值必须能够整除');
-  }
-  // 创建一个新数组，填充与原对象属性相同的新对象
-  const newArray = new Array(original[keyName]).fill(null).map(() => {
-    return { ...original };
-  });
-  // 将新数组中每个对象的num属性设置为1
-  newArray.forEach(obj => {
-    obj[keyName] = 1;
-    obj.children = []
-    obj.label = getUuiKey()
-    if (keyName == 'colspan') obj.width = original.width / newArray.length
-    else obj.width = original.width
-  });
-  newArray[0].children = original.children
-  return newArray;
-}
-
-// 给定 rIndex 和 dIndex 找到距离对应表格左侧最近(包括自身)且不为 null 的表格
-export function getLeftTd(list, rIndex, dIndex) {
-  let td = null;
-  let index = 0;
-  for (let i = dIndex; i >= 0; i--) {
-    td = list[rIndex].children[i];
-    index = i;
-    if (td) break;
-  }
-  return { td, index };
-}
-// 给定 rIndex 和 dIndex 找到距离对应表格右侧最近(包括自身)且不为 null 的表格
-export function getRightTd(list, rIndex, dIndex) {
-  const tr = list[rIndex].children;
-  let td = null;
-  let index = 0;
-  for (let i = dIndex; i < tr.length; i++) {
-    td = tr[i];
-    index = i;
-    if (td) break;
-  }
-  return { td, index };
-}
-
-export function getTopTd(list, rIndex, dIndex) {
-  let td = null;
-  let index = 0;
-  for (let i = rIndex; i >= 0; i--) {
-    td = list[i].children[dIndex];
-    index = i;
-    if (td) break;
-  }
-  return { td, index };
-}
-
-export function getBottomTd(list, rIndex, dIndex) {
-  let td = null;
-  let index = 0;
-  for (let i = rIndex; i < list.length; i++) {
-    td = list[i].children[dIndex];
-    index = i;
-    if (td) break;
-  }
-  return { td, index };
-}
-
-// 操作列表
-export function defaultOptions(list, rIndex, dIndex) {
-  const tr = list[rIndex].children
-  const td = tr[dIndex]
-  // let topTd, bottomTd, leftTd, rightTd = {};
-  // for (let i = rIndex + 1; i < list.length; i++) {
-  //   bottomTd = list[i].children[dIndex];
-  //   if (bottomTd) break;
-  // }
-  // for (let i = rIndex - 1; i >= 0; i--) {
-  //   topTd = list[i].children[dIndex];
-  //   if (topTd) break;
-  // }
-
-  // for (let i = dIndex - 1; i >= 0; i--) {
-  //   leftTd = list[rIndex].children[i]
-  //   if (leftTd) break
-  // }
-  // for (let i = dIndex + 1; i < tr.length; i++) {
-  //   rightTd = tr[i]
-  //   if (rightTd) break
-  // }
-  const { td: leftTd } = getLeftTd(list, rIndex, dIndex - 1)
-  const { td: rightTd } = getRightTd(list, rIndex, dIndex + 1)
-  const { td: topTd } = getTopTd(list, rIndex - 1, dIndex)
-  const { td: bottomTd } = getBottomTd(list, rIndex + 1, dIndex)
-  return [
-    { value: "leftColumn", label: "左插入列" },
-    { value: "rightColumn", label: "右插入列" },
-    { value: "topRow", label: "上插入行" },
-    { value: "bottomRow", label: "下插入行" },
-    {
-      divided: true,
-      value: "leftMerge",
-      label: "向左合并",
-      disabled: !(leftTd?.rowspan == td.rowspan)
-    },
-    {
-      value: "rightMerge",
-      label: "向右合并",
-      disabled: !(rightTd?.rowspan == td.rowspan)
-    },
-    {
-      value: "mergeRow",
-      label: "合并整行",
-      disabled: !tr.every(item => item?.rowspan === td.rowspan || item === null)
-    },
-    {
-      divided: true,
-      value: "topMerge",
-      label: "向上合并",
-      disabled: !(topTd?.colspan == td.colspan)
-    },
-    {
-      value: "bottomMerge",
-      label: "向下合并",
-      disabled: !(bottomTd?.colspan == td.colspan)
-    },
-    {
-      value: "mergeColumn",
-      label: "合并整列",
-      disabled: !list.every(item => (item.children[dIndex]?.colspan == td.colspan || item.children[dIndex] === null))
-    },
-    {
-      divided: true,
-      value: "deleteRow",
-      label: "删除整行",
-      disabled: list.length <= 1 || !tr.every(item => item?.rowspan === td.rowspan || item === null)
-    },
-    {
-      value: "deleteColumn",
-      label: "删除整列",
-      disabled: list[0].children.length <= 1 || !list.every(item => item.children[dIndex]?.colspan == td.colspan || item.children[dIndex] === null)
-    },
-    { divided: true, value: "splitRow", label: "拆分成行", disabled: td.rowspan == 1 },
-    { value: "splitColumn", label: "拆分成列", disabled: td.colspan == 1 }
-  ];
-}
-
-export function leftColumn(list, rIndex, dIndex) {
-  // 左插入列
-  list.forEach(item => {
-    item.children.splice(dIndex, 0, defaultCell());
-  });
-}
-export function rightColumn(list, rIndex, dIndex) {
-  // 右插入列
-  list.forEach(item => {
-    item.children.splice(dIndex + 1, 0, defaultCell());
-  });
-}
-export function deleteColumn(list, rIndex, dIndex) {
-  // 删除整列
-  list.forEach(item => {
-    const td = item.children.splice(dIndex, 1);
-    const width = td[0].width / item.children.length
-    item.children.forEach(td => {
-      td.width += width
-    })
-  });
-}
-export function topRow(list, rIndex, dIndex) {
-  // 上插入行
-  const length = list[rIndex].children.length;
-  list.splice(rIndex, 0, {
-    children: Array(length).fill(defaultCell())
-  });
-}
-export function bottomRow(list, rIndex, dIndex) {
-  // 下插入行
-  const td = list[rIndex].children[dIndex];
-  const length = list[rIndex].children.length;
-  list.splice(rIndex + td.rowspan, 0, {
-    children: Array(length).fill(defaultCell())
-  });
-}
-export function deleteRow(list, rIndex, dIndex) {
-  // 删除整行
-  list.splice(rIndex, 1);
-}
-export function leftMerge(list, rIndex, dIndex) {
-  // 向左合并
-  const tr = list[rIndex].children;
-  for (let i = dIndex - 1; i >= 0; i--) {
-    if (tr[i]) {
-      const array = [tr[i], tr[dIndex]];
-      const newCell = mergeCells(array, "rowspan");
-      tr.splice(i, 1, newCell);
-      tr.splice(dIndex, 1, null);
-      break;
-    }
-  }
-}
-export function rightMerge(list, rIndex, dIndex) {
-  // 向右合并
-  const tr = list[rIndex].children;
-  for (let i = dIndex + 1; i < tr.length; i++) {
-    if (tr[i]) {
-      const array = [tr[i], tr[dIndex]];
-      const newCell = mergeCells(array, "rowspan");
-      tr.splice(dIndex, 1, newCell);
-      tr.splice(i, 1, null);
-      break;
-    }
-  }
-}
-export function mergeRow(list, rIndex, dIndex) {
-  // 合并整行
-  const tr = list[rIndex].children;
-  const newCell = mergeCells(tr, "rowspan");
-  list[rIndex].children = tr.map(item => null);
-  list[rIndex].children.splice(0, 1, newCell);
-}
-export function
-  topMerge(list, rIndex, dIndex) {
-  // 向上合并
-  for (let i = rIndex - 1; i >= 0; i--) {
-    const td = list[i].children[dIndex];
-    if (td && td.colspan && td.rowspan) {
-      const array = [td, list[rIndex].children[dIndex]];
-      const newCell = mergeCells(array, "colspan");
-      list[i].children.splice(dIndex, 1, newCell);
-      list[rIndex].children.splice(dIndex, 1, null);
-      break;
-    }
-  }
-}
-export function bottomMerge(list, rIndex, dIndex) {
-  // 向下合并
-  for (let i = rIndex + 1; i < list.length; i++) {
-    const td = list[i].children[dIndex];
-    if (td && td.colspan && td.rowspan) {
-      const array = [td, list[rIndex].children[dIndex]];
-      const newCell = mergeCells(array, "colspan");
-      list[rIndex].children.splice(dIndex, 1, newCell);
-      list[i].children.splice(dIndex, 1, null);
-      break;
-    }
-  }
-}
-export function mergeColumn(list, rIndex, dIndex) {
-  // 合并整列
-  const tds = list.map(item => {
-    return item.children[dIndex];
-  });
-  const newCell = mergeCells(tds, "colspan");
-  list.forEach(item => {
-    item.children.splice(dIndex, 1, null);
-  });
-  list[0].children.splice(dIndex, 1, newCell);
-}
-export function splitRow(list, rIndex, dIndex) {
-  // 拆分成行
-  const newCells = splitCell(list[rIndex].children[dIndex], "rowspan");
-  newCells.forEach((item, i) => {
-    list[rIndex + i].children.splice(dIndex, 1, item);
-  });
-}
-export function splitColumn(list, rIndex, dIndex) {
-  // 拆分成列
-  const newCells = splitCell(list[rIndex].children[dIndex]);
-  list[rIndex].children.splice(dIndex, newCells.length, ...newCells);
-}
-
-export const tableData = []
-const row = 2, col = 3
-for (let i = 0; i < row; i++) {
-  const obj = {
-    label: 'tr_' + getUuiKey(),
-    children: []
-  }
-  for (let j = 0; j < col; j++) {
-    obj.children.push({
-      colspan: 1,
-      rowspan: 1,
-      children: [`${i}-${j}`],
-      label: 'td_' + getUuiKey(),
-      width: 100 / row
-    })
-  }
-  tableData.push(obj)
-}
-

package/src/views/document/index.vue

@@ -1,140 +0,0 @@
-<template>
-  <div>
-    <h1>介绍与安装</h1>
-    <el-card header="介绍">
-      <div class="introduce">
-        <div>
-          基于 Vue2 +
-          <ELink />+
-          <VLink />开发的可视化表单编辑器插件，功能包括：表单的设计、填报及已填报表单的显示，适用于各种动态表单项目；生成表单预览样式支持PC端（
-          <ELink />）及移动端（
-          <VLink />）两种形式。
-        </div>
-        <div>该插件包含五个组件，分为两个阶段：</div>
-        <el-tree class="introduce-item" :data="data" default-expand-all>
-          <span slot-scope="{ node, data }">
-            <el-link
-              :type="data.type"
-              :href="data.link"
-              :icon="data.icon"
-              :underline="false"
-            >{{ data.label }}</el-link>
-          </span>
-        </el-tree>
-      </div>
-    </el-card>
-    <!-- <el-card header>
-      <div class="introduce">
-        gitee地址：
-        <el-link
-          target="_blank"
-          href="https://gitee.com/deer_bambi_hly/form-generator"
-          type="primary"
-          :underline="false"
-        >https://gitee.com/deer_bambi_hly/form-generator</el-link>
-      </div>
-      <div class="introduce">
-        npm地址：
-        <el-link
-          target="_blank"
-          href="https://www.npmjs.com/package/@huliuyu/form-generator?activeTab=readme"
-          type="primary"
-          :underline="false"
-        >https://www.npmjs.com/package/@huliuyu/form-generator?activeTab=readme</el-link>
-      </div>
-    </el-card>-->
-    <el-card header="npm 安装">
-      <Code code="npm install @huliuyu/form-generator" />
-    </el-card>
-    <el-card header="引入">
-      <div class="introduce">在 main.js 中写入以下内容：</div>
-      <Code
-        :code="`import FG from '@huliuyu/form-generator'
-import '@huliuyu/form-generator/form-generator.css'
-Vue.use(FG)`"
-      />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import Code from "@/components/code/Code";
-import ELink from "@/views/coms/components/ELink";
-import VLink from "@/views/coms/components/VLink";
-
-export default {
-  components: {
-    Code,
-    ELink,
-    VLink
-  },
-  data() {
-    return {
-      data: [
-        {
-          label: "设计阶段",
-          icon: "el-icon-price-tag",
-          children: [
-            {
-              label:
-                "表单设计：可以通过拖拽的方式，将单个的组件组合成一个完整的表单，生成JSON数据",
-              children: [
-                {
-                  label: "FGDesigner",
-                  icon: "el-icon-link",
-                  link: "#/comsDesiger",
-                  type: "primary"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          label: "用户阶段",
-          icon: "el-icon-price-tag",
-          children: [
-            {
-              label:
-                "表单填报：传入从表单设计组件得到的JSON表单数据，可以实现表单的显示及填报",
-              children: [
-                {
-                  label: "FGPcForm",
-                  icon: "el-icon-link",
-                  link: "#/comsFormPc",
-                  type: "primary"
-                },
-                {
-                  label: "FGPhoneForm",
-                  icon: "el-icon-link",
-                  link: "#/comsFormPhone",
-                  type: "primary"
-                }
-              ]
-            },
-            {
-              label: "详情显示：完成表单填报后的表单详情数据的显示",
-              children: [
-                {
-                  label: "FGPcShow",
-                  icon: "el-icon-link",
-                  link: "#/comsShowPc",
-                  type: "primary"
-                },
-                {
-                  label: "FGPhoneShow",
-                  icon: "el-icon-link",
-                  link: "#/comsShowPhone",
-                  type: "primary"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    };
-  }
-};
-</script>
-
-<style lang='scss' scope>
-</style>

package/src/views/form/create.vue

@@ -1,44 +0,0 @@
-<template>
-  <div style="height: 100%">
-    <!-- <el-button type="primary" @click="handlePublish">发布</el-button>
-    <el-button type="primary" @click="handleValidate">校验</el-button>-->
-    <FGDesigner ref="FGDesigner" v-model="formConf" :enabled="true" />
-  </div>
-</template>
-
-<script>
-import { list, form, config } from "@/utils/drawingDefalut.js";
-import FGDesigner from "@/package/FGDesigner";
-export default {
-  name: "create",
-  components: {
-    FGDesigner
-  },
-
-  data() {
-    return {
-      formConf: {},
-      defaultConfig: config
-    };
-  },
-
-  methods: {
-    handleValidate() {
-      this.$refs.FGDesigner.validate((valid, message) => {
-        console.log(valid, message);
-        if (valid) {
-        } else {
-          this.$message.error(message);
-        }
-      });
-    },
-    handlePublish() {
-      this.$refs.FGDesigner.submit(value => {
-        console.log(value);
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>

package/vue.config.js

@@ -1,72 +0,0 @@
-'use strict'
-const path = require('path')
-const webpack = require("webpack");
-
-function resolve(dir) {
-  return path.join(__dirname, dir)
-}
-
-// All configuration item explanations can be find in https://cli.vuejs.org/config/
-module.exports = {
-  publicPath: './',
-  outputDir: 'dist',
-  assetsDir: 'static',
-  lintOnSave: false,
-  parallel: false,
-  devServer: {
-    port: 9528,
-    headers: {
-      'Access-Control-Allow-Origin': '*'
-    },
-    proxy: 'http://192.168.119.21:10160/'
-  },
-  configureWebpack: {
-    // provide the app's title in webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
-    plugins: [
-      // 忽略 moment.js的所有本地文件 
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    ],
-    name: '',
-    resolve: {
-      alias: {
-        '@': resolve('src')
-      }
-    },
-  },
-  chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
-    // 忽略的打包文件
-    // config.externals({
-    //   "vue-json-editor": "vueJsonEditor"
-    // })
-    // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end()
-    config.module
-      .rule('icons')
-      .test(/\.svg$/)
-      .include.add(resolve('src/icons'))
-      .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
-      .options({
-        symbolId: 'icon-[name]'
-      })
-      .end()
-
-    // set preserveWhitespace
-    config.module
-      .rule('vue')
-      .use('vue-loader')
-      .loader('vue-loader')
-      .tap(options => {
-        options.compilerOptions.preserveWhitespace = true
-        return options
-      })
-      .end()
-  }
-}