qgb-process 0.2.3 → 0.2.7

package/src/formBuilder/components/app-main/components/components/columns.vue

@@ -1,393 +1,393 @@
-<template>
-  <div class="wrapper">
-    <div class="tables-sub">
-      <draggable
-        :animation="200"
-        :disabled="!edit"
-        :list="columns"
-        @add="handleAdd"
-        @end="handleMoveEnd"
-        @start="handleMoveStart"
-        :group="{ name: 'form', pull: false, put: columns.length < columnsNum}"
-        style="display: flex;width: 100%;"
-        filter='.nodraggable'
-      >
-        <div
-          class="parts nodraggable"
-          :class="{'editPad': edit, 'form-item-active': (columns.length > 0 && selSubIndex == index && edit && list[activeFormName][selectIndex].field == desc.field)}"
-          v-for="(item,index) in columnsNum"
-          :key="index+1"
-        >
-          <template v-if="columns[index]">
-            <el-form-item
-              @click.native.stop="handleFormItemClick(columns[index],index)"
-              :label="columns[index].label"
-            >
-              <el-switch
-                v-if="columns[index].type == 'switch'"
-                v-model="columns[index].default"
-                active-text="开"
-                inactive-text="关"
-                :class="{'disoption': edit}"
-                v-on="columns[index].on"
-              >
-              </el-switch>
-              <component
-                v-else
-                :desc="columns[index]"
-                :is="(columns[index].type =='datetime' || columns[index].type =='datetimerange' )  ? setType(columns[index].attrs.type): setType(columns[index].type)"
-                :options="columns[index].options"
-                :required='columns[index].attrs.required'
-                v-bind="getAttrs(columns[index])"
-                v-model="value[columns[index].field]"
-                :class="{'disoption': edit}"
-                v-on="columns[index].on"
-              >
-              </component>
-            </el-form-item>
-          </template>
-          <template v-else-if="edit">
-            <div class="blank">从左侧拖拽来添加字段</div>
-          </template>
-          <template v-if="columns[index] ">
-            <!-- 复制按钮 -->
-            <!-- <el-button
-              @click.stop="handleCopy(index)"
-              class="form-item-copy-btn"
-              icon="el-icon-document-copy"
-              size="mini"
-              style="border-radius: 0"
-              type="primary"
-              v-if="selSubIndex === index && edit && list[activeFormName][selectIndex].field == desc.field"
-            ></el-button> -->
-            <!-- 删除按钮 -->
-            <el-button
-              @click.stop="handleDelete(index)"
-              class="form-item-delete-btn"
-              icon="el-icon-delete"
-              size="mini"
-              style="border-radius: 0"
-              type="primary"
-              v-if="selSubIndex === index && edit && list[activeFormName][selectIndex].field == desc.field"
-            ></el-button>
-          </template>
-        </div>
-      </draggable>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as _ from "lodash";
-// import draggable from "vuedraggable";
-import { mapGetters, mapMutations, mapState } from "vuex";
-import handleCode from "../components/handleCode";
-import postman from "../components/postman";
-import formDep from "../components/formDep";
-import person from "../components/person";
-import linkForm from "../components/linkForm";
-const draggable = () => ({
-  // 需要加载的组件 (应该是一个 `Promise` 对象)
-  component: import("vuedraggable"),
-  // 异步组件加载时使用的组件
-  loading: "",
-  // 加载失败时使用的组件
-  error: "",
-  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
-  delay: 200,
-  // 如果提供了超时时间且组件加载也超时了，
-  // 则使用加载失败时使用的组件。默认值是：`Infinity`
-  timeout: 3000
-});
-export default {
-  name: "Columns",
-  extends: {},
-  components: {
-    draggable,
-    postman,
-    handleCode,
-    formDep,
-    person,
-    linkForm
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    desc: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    edit: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {};
-  },
-  watch: {
-    value: {
-      handler(val) {
-        this.$emit("input", this.value);
-      },
-      deep: true
-    }
-  },
-  computed: {
-    ...mapState(["selSubIndex", "activeFormName", "list", "selectIndex"]),
-    ...mapGetters(["currentFormItem"]),
-    columnsNum: function() {
-      return this.desc.rows;
-    }
-  },
-  methods: {
-    ...mapMutations(["updateSelSubIndex", "updateSelectIndex", "updateList"]),
-    getAttrs(item) {
-      return Object.assign({}, item.attrs);
-    },
-    // 点击选中
-    handleFormItemClick(item, index) {
-      if (!this.edit || this.columns.length == 0) return;
-      this.list[this.activeFormName].forEach((i, v) => {
-        if (i.field == this.desc.field) {
-          this.updateSelectIndex(v);
-        }
-      });
-      this.updateSelSubIndex(index);
-    },
-    // 复制
-    handleCopy(index) {
-      const obj = _.cloneDeep(this.columns[index]);
-      obj.field = `key_${Date.now()}`;
-      this.columns.splice(index + 1, 0, obj);
-      this.setListColumns(this.columns);
-      this.updateSelSubIndex(index + 1);
-    },
-    // 删除
-    handleDelete(index) {
-      this.columns.splice(index, 1);
-      this.setListColumns(this.columns);
-      // 如果删除的最后一个, 则重新选择最后一个
-      if (index >= this.columns.length) {
-        this.updateSelSubIndex(this.columns.length - 1);
-      } else if (index - 1 < 1 && this.columns > 1) {
-        this.updateSelSubIndex(1);
-      } else {
-        this.updateSelSubIndex(null);
-      }
-    },
-    // 新增
-    handleAdd(res) {
-      this.$nextTick(() => {
-        res.newIndex =
-          res.newIndex >= this.columns.length
-            ? this.columns.length - 1
-            : res.newIndex;
-        if (
-          this.columns[res.newIndex].type.indexOf("custom-table") > -1 ||
-          this.columns[res.newIndex].type.indexOf("columns") > -1 ||
-          this.columns[res.newIndex].type.indexOf("quill-editor") > -1 ||
-          this.columns[res.newIndex].type.indexOf("groupTitle") > -1 ||
-          this.columns[res.newIndex].type.indexOf("groupSummary") > -1 ||
-          this.columns[res.newIndex].type.indexOf("linkForm") > -1
-        ) {
-          this.$message.error("不支持添加此类型控件，请添加其他类型控件");
-          this.columns.splice(res.newIndex, 1);
-          return;
-        }
-        const obj = this.columns[res.newIndex];
-        // let content = Object.assign(obj,{type:'ele-form-'+obj.type})
-        this.columns[res.newIndex] = obj;
-        this.setListColumns(this.columns);
-        this.list[this.activeFormName].forEach((i, v) => {
-          if (i.field == this.desc.field) {
-            this.updateSelectIndex(v);
-          }
-        });
-        this.updateSelSubIndex(res.newIndex);
-      });
-    },
-    // 移动开始
-    handleMoveStart(res) {
-      this.updateSelSubIndex(res.oldIndex);
-    },
-    // 移动结束
-    handleMoveEnd(res) {
-      this.setListColumns(this.columns);
-      this.updateSelSubIndex(res.newIndex);
-    },
-    setListColumns(columns) {
-      const list = _.cloneDeep(this.list);
-      list[this.activeFormName].forEach(item => {
-        if (item.field == this.desc.field) {
-          item.attrs.columns = columns;
-        }
-      });
-      this.updateList({
-        name: this.activeFormName,
-        newList: list[this.activeFormName]
-      });
-    },
-    setType(type) {
-      const arr = [
-        "linkForm",
-        "image-uploader",
-        "upload-file",
-        "postman",
-        "handleCode",
-        "formDep",
-        "person"
-      ];
-      return arr.indexOf(type) == -1 ? "ele-form-" + type : type;
-    }
-  },
-  created() {},
-  mounted() {}
-};
-</script>
-<style lang="scss" scoped>
-/deep/ .el-upload--picture-card {
-  width: 100% !important;
-  div div {
-    width: 100% !important;
-    height: 50px !important;
-    line-height: 50px !important;
-    text-align: center;
-    i {
-      font-size: 22px;
-      font-weight: bold;
-    }
-    &::after {
-      font-size: 14px;
-      font-family: "Microsoft YaHei";
-      font-weight: 400;
-      color: #bfbfbf;
-      content: "\70B9\51FB\4E0A\4F20";
-      margin-left: 13px;
-    }
-  }
-}
-
-.wrapper {
-  /deep/ .el-form-item {
-    margin-bottom: 0 !important;
-    width: 100%;
-  }
-  /deep/ .el-textarea {
-    width: 100%;
-  }
-  .tables {
-    margin-top: 20px;
-    border-left: 1px solid #ebeef5;
-  }
-  .tables-sub {
-    display: flex;
-    min-height: 80px;
-    .disoption {
-      &:after {
-        content: " ";
-        display: block;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        position: absolute;
-        z-index: 2;
-        cursor: move;
-      }
-    }
-    .el-icon-remove-outline {
-      font-size: 26px;
-    }
-    .parts {
-      display: flex;
-      /* justify-content: unset; */
-      align-items: center;
-      flex: 1;
-      //   overflow: hidden;
-      &:nth-child(1) {
-        min-width: 50px;
-      }
-      .heard {
-        border-bottom: 1px solid #ebeef5;
-        font-weight: 500;
-        height: 40px;
-      }
-      .botom {
-        box-sizing: border-box;
-        padding: 10px 10px 10px 20px;
-        height: 70px;
-      }
-    }
-    .editPad {
-      padding: 20px 20px 20px 20px;
-    }
-  }
-  .form-item-active {
-    border: 1px dashed #409eff !important;
-    background-color: rgba(2, 134, 223, 0.06) !important;
-    position: relative;
-  }
-  /deep/ .el-icon-delete {
-    font-size: 17px !important;
-  }
-  /deep/ .el-icon-document-copy {
-    font-size: 17px !important;
-  }
-  .form-item-delete-btn {
-    background-color: #ff0000;
-    border-color: #ff0000;
-    height: 30px;
-    width: 30px;
-    border-radius: 100% !important;
-    position: absolute;
-    right: 10px;
-    top: -15px;
-    z-index: 3;
-    padding: 4px 6px;
-  }
-  .form-item-copy-btn {
-    position: absolute;
-    height: 30px;
-    width: 30px;
-    border-radius: 100% !important;
-    right: 37px;
-    top: -15px;
-    z-index: 3;
-    margin-right: 10px;
-    padding: 4px 6px;
-  }
-  /deep/ .botom .el-form-item__content > div {
-    display: flex;
-    .el-radio {
-      margin-right: 30px !important;
-    }
-    .el-checkbox {
-      margin-right: 30px !important;
-    }
-  }
-  /deep/ .botom .el-form-item__content {
-    min-width: 150px;
-  }
-  .blank {
-    height: 50px;
-    width: 100%;
-    line-height: 50px;
-    text-align: center;
-    color: #666;
-    &:hover {
-      background-color: #f5f5f5;
-    }
-  }
-}
-</style>
+<template>
+  <div class="wrapper">
+    <div class="tables-sub">
+      <draggable
+        :animation="200"
+        :disabled="!edit"
+        :list="columns"
+        @add="handleAdd"
+        @end="handleMoveEnd"
+        @start="handleMoveStart"
+        :group="{ name: 'form', pull: false, put: columns.length < columnsNum}"
+        style="display: flex;width: 100%;"
+        filter='.nodraggable'
+      >
+        <div
+          class="parts nodraggable"
+          :class="{'editPad': edit, 'form-item-active': (columns.length > 0 && selSubIndex == index && edit && list[activeFormName][selectIndex].field == desc.field)}"
+          v-for="(item,index) in columnsNum"
+          :key="index+1"
+        >
+          <template v-if="columns[index]">
+            <el-form-item
+              @click.native.stop="handleFormItemClick(columns[index],index)"
+              :label="columns[index].label"
+            >
+              <el-switch
+                v-if="columns[index].type == 'switch'"
+                v-model="columns[index].default"
+                active-text="开"
+                inactive-text="关"
+                :class="{'disoption': edit}"
+                v-on="columns[index].on"
+              >
+              </el-switch>
+              <component
+                v-else
+                :desc="columns[index]"
+                :is="(columns[index].type =='datetime' || columns[index].type =='datetimerange' )  ? setType(columns[index].attrs.type): setType(columns[index].type)"
+                :options="columns[index].options"
+                :required='columns[index].attrs.required'
+                v-bind="getAttrs(columns[index])"
+                v-model="value[columns[index].field]"
+                :class="{'disoption': edit}"
+                v-on="columns[index].on"
+              >
+              </component>
+            </el-form-item>
+          </template>
+          <template v-else-if="edit">
+            <div class="blank">从左侧拖拽来添加字段</div>
+          </template>
+          <template v-if="columns[index] ">
+            <!-- 复制按钮 -->
+            <!-- <el-button
+              @click.stop="handleCopy(index)"
+              class="form-item-copy-btn"
+              icon="el-icon-document-copy"
+              size="mini"
+              style="border-radius: 0"
+              type="primary"
+              v-if="selSubIndex === index && edit && list[activeFormName][selectIndex].field == desc.field"
+            ></el-button> -->
+            <!-- 删除按钮 -->
+            <el-button
+              @click.stop="handleDelete(index)"
+              class="form-item-delete-btn"
+              icon="el-icon-delete"
+              size="mini"
+              style="border-radius: 0"
+              type="primary"
+              v-if="selSubIndex === index && edit && list[activeFormName][selectIndex].field == desc.field"
+            ></el-button>
+          </template>
+        </div>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as _ from "lodash";
+// import draggable from "vuedraggable";
+import { mapGetters, mapMutations, mapState } from "vuex";
+import handleCode from "../components/handleCode";
+import postman from "../components/postman";
+import formDep from "../components/formDep";
+import person from "../components/person";
+import linkForm from "../components/linkForm";
+const draggable = () => ({
+  // 需要加载的组件 (应该是一个 `Promise` 对象)
+  component: import("vuedraggable"),
+  // 异步组件加载时使用的组件
+  loading: "",
+  // 加载失败时使用的组件
+  error: "",
+  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
+  delay: 200,
+  // 如果提供了超时时间且组件加载也超时了，
+  // 则使用加载失败时使用的组件。默认值是：`Infinity`
+  timeout: 3000
+});
+export default {
+  name: "Columns",
+  extends: {},
+  components: {
+    draggable,
+    postman,
+    handleCode,
+    formDep,
+    person,
+    linkForm
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    desc: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    edit: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.$emit("input", this.value);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    ...mapState(["selSubIndex", "activeFormName", "list", "selectIndex"]),
+    ...mapGetters(["currentFormItem"]),
+    columnsNum: function() {
+      return this.desc.rows;
+    }
+  },
+  methods: {
+    ...mapMutations(["updateSelSubIndex", "updateSelectIndex", "updateList"]),
+    getAttrs(item) {
+      return Object.assign({}, item.attrs);
+    },
+    // 点击选中
+    handleFormItemClick(item, index) {
+      if (!this.edit || this.columns.length == 0) return;
+      this.list[this.activeFormName].forEach((i, v) => {
+        if (i.field == this.desc.field) {
+          this.updateSelectIndex(v);
+        }
+      });
+      this.updateSelSubIndex(index);
+    },
+    // 复制
+    handleCopy(index) {
+      const obj = _.cloneDeep(this.columns[index]);
+      obj.field = `key_${Date.now()}`;
+      this.columns.splice(index + 1, 0, obj);
+      this.setListColumns(this.columns);
+      this.updateSelSubIndex(index + 1);
+    },
+    // 删除
+    handleDelete(index) {
+      this.columns.splice(index, 1);
+      this.setListColumns(this.columns);
+      // 如果删除的最后一个, 则重新选择最后一个
+      if (index >= this.columns.length) {
+        this.updateSelSubIndex(this.columns.length - 1);
+      } else if (index - 1 < 1 && this.columns > 1) {
+        this.updateSelSubIndex(1);
+      } else {
+        this.updateSelSubIndex(null);
+      }
+    },
+    // 新增
+    handleAdd(res) {
+      this.$nextTick(() => {
+        res.newIndex =
+          res.newIndex >= this.columns.length
+            ? this.columns.length - 1
+            : res.newIndex;
+        if (
+          this.columns[res.newIndex].type.indexOf("custom-table") > -1 ||
+          this.columns[res.newIndex].type.indexOf("columns") > -1 ||
+          this.columns[res.newIndex].type.indexOf("quill-editor") > -1 ||
+          this.columns[res.newIndex].type.indexOf("groupTitle") > -1 ||
+          this.columns[res.newIndex].type.indexOf("groupSummary") > -1 ||
+          this.columns[res.newIndex].type.indexOf("linkForm") > -1
+        ) {
+          this.$message.error("不支持添加此类型控件，请添加其他类型控件");
+          this.columns.splice(res.newIndex, 1);
+          return;
+        }
+        const obj = this.columns[res.newIndex];
+        // let content = Object.assign(obj,{type:'ele-form-'+obj.type})
+        this.columns[res.newIndex] = obj;
+        this.setListColumns(this.columns);
+        this.list[this.activeFormName].forEach((i, v) => {
+          if (i.field == this.desc.field) {
+            this.updateSelectIndex(v);
+          }
+        });
+        this.updateSelSubIndex(res.newIndex);
+      });
+    },
+    // 移动开始
+    handleMoveStart(res) {
+      this.updateSelSubIndex(res.oldIndex);
+    },
+    // 移动结束
+    handleMoveEnd(res) {
+      this.setListColumns(this.columns);
+      this.updateSelSubIndex(res.newIndex);
+    },
+    setListColumns(columns) {
+      const list = _.cloneDeep(this.list);
+      list[this.activeFormName].forEach(item => {
+        if (item.field == this.desc.field) {
+          item.attrs.columns = columns;
+        }
+      });
+      this.updateList({
+        name: this.activeFormName,
+        newList: list[this.activeFormName]
+      });
+    },
+    setType(type) {
+      const arr = [
+        "linkForm",
+        "image-uploader",
+        "upload-file",
+        "postman",
+        "handleCode",
+        "formDep",
+        "person"
+      ];
+      return arr.indexOf(type) == -1 ? "ele-form-" + type : type;
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+<style lang="scss" scoped>
+/deep/ .el-upload--picture-card {
+  width: 100% !important;
+  div div {
+    width: 100% !important;
+    height: 50px !important;
+    line-height: 50px !important;
+    text-align: center;
+    i {
+      font-size: 22px;
+      font-weight: bold;
+    }
+    &::after {
+      font-size: 14px;
+      font-family: "Microsoft YaHei";
+      font-weight: 400;
+      color: #bfbfbf;
+      content: "\70B9\51FB\4E0A\4F20";
+      margin-left: 13px;
+    }
+  }
+}
+
+.wrapper {
+  /deep/ .el-form-item {
+    margin-bottom: 0 !important;
+    width: 100%;
+  }
+  /deep/ .el-textarea {
+    width: 100%;
+  }
+  .tables {
+    margin-top: 20px;
+    border-left: 1px solid #ebeef5;
+  }
+  .tables-sub {
+    display: flex;
+    min-height: 80px;
+    .disoption {
+      &:after {
+        content: " ";
+        display: block;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+        z-index: 2;
+        cursor: move;
+      }
+    }
+    .el-icon-remove-outline {
+      font-size: 26px;
+    }
+    .parts {
+      display: flex;
+      /* justify-content: unset; */
+      align-items: center;
+      flex: 1;
+      //   overflow: hidden;
+      &:nth-child(1) {
+        min-width: 50px;
+      }
+      .heard {
+        border-bottom: 1px solid #ebeef5;
+        font-weight: 500;
+        height: 40px;
+      }
+      .botom {
+        box-sizing: border-box;
+        padding: 10px 10px 10px 20px;
+        height: 70px;
+      }
+    }
+    .editPad {
+      padding: 20px 20px 20px 20px;
+    }
+  }
+  .form-item-active {
+    border: 1px dashed #409eff !important;
+    background-color: rgba(2, 134, 223, 0.06) !important;
+    position: relative;
+  }
+  /deep/ .el-icon-delete {
+    font-size: 17px !important;
+  }
+  /deep/ .el-icon-document-copy {
+    font-size: 17px !important;
+  }
+  .form-item-delete-btn {
+    background-color: #ff0000;
+    border-color: #ff0000;
+    height: 30px;
+    width: 30px;
+    border-radius: 100% !important;
+    position: absolute;
+    right: 10px;
+    top: -15px;
+    z-index: 3;
+    padding: 4px 6px;
+  }
+  .form-item-copy-btn {
+    position: absolute;
+    height: 30px;
+    width: 30px;
+    border-radius: 100% !important;
+    right: 37px;
+    top: -15px;
+    z-index: 3;
+    margin-right: 10px;
+    padding: 4px 6px;
+  }
+  /deep/ .botom .el-form-item__content > div {
+    display: flex;
+    .el-radio {
+      margin-right: 30px !important;
+    }
+    .el-checkbox {
+      margin-right: 30px !important;
+    }
+  }
+  /deep/ .botom .el-form-item__content {
+    min-width: 150px;
+  }
+  .blank {
+    height: 50px;
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    color: #666;
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+}
+</style>