qgb-process 0.2.3 → 0.2.7

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

@@ -1,718 +1,718 @@
-<template>
-  <div class="app-main-center">
-    <h4>{{title}}</h4>
-    <ele-form
-      v-model="formData"
-      :form-desc="formDesc"
-      :request-fn="handleSubmit"
-      @request-success="handleSuccess"
-      ref="ele-form"
-      v-bind="formAttr"
-      title=''
-    >
-      <template
-        v-if="formState"
-        v-slot:form-content="{formData,  formDesc, formErrorObj }"
-      >
-        <!-- <div class="msg " >从左侧拖拽来添加字段</div> -->
-        <draggable
-          :animation="200"
-          v-if="isRenderFinish"
-          :disabled="false"
-          :list="list"
-          ghost-class="ghost"
-          @add="handleAdd"
-          @end="handleMoveEnd"
-          @start="handleMoveStart"
-          :group="{ name: 'form', pull: false, put: true}"
-          tag="el-row"
-          class="form-area"
-        >
-          <!-- 当为空时 -->
-
-          <div
-            class="form-area-placeholder"
-            v-if="list.length === 0"
-          >
-            从左侧拖拽来添加表单项
-          </div>
-          <template v-else>
-            <!-- <div id="components" class="component-container">
-              <component :is="apps" :isEdit="true" :businessType="businessType"
-                @setType="typeChange"></component>
-            </div> -->
-            <template v-for="(formItem, field, index) of formDesc">
-              <el-col
-                :key="field"
-                v-bind="getColAttrs(formItem.layout)"
-                @click.native="handleFormItemClick(index)"
-                v-if="formItem._vif && formItem.type !== 'purchase'"
-                :class="{ 'form-item-active': (selectIndex === index && !isSubIndex && activeFormName == name),'form-item' : editType.indexOf(formItem.type||form.Item.content.type) == -1,'form-item-error':formItem.error,'purchase' : formItem.type == 'purchase'}"
-              >
-                <component
-                  v-if="formItem.type == 'groupSummary'"
-                  :is="formItem._type"
-                  :titleStr="formItem.label"
-                  v-model="formItem.default"
-                  style='height:80px;display:block;line-height:80px;padding-left:20px'
-                />
-                <el-form-item
-                  v-else-if="formItem.type !== 'groupTitle' &&formItem.business !== '888' "
-                  :error="formErrorObj ? formErrorObj[field] : null"
-                  :label="
-                    (formAttr.isShowLabel === false || formItem.isShowLabel === false) ? null : formItem.label
-                  "
-                  :prop="field"
-                  :class="formItem.type=='columns'?'columnsClass':null"
-                  :label-width="formItem._type.indexOf('columns') == -1  ? formAttr.labelWidth+'px' : '0px'"
-                  :style="editType.indexOf(formItem.type) !== -1?'margin:20px':''"
-                >
-                  <el-tooltip
-                    v-if='formItem.attrs.summary'
-                    class="item"
-                    effect="dark"
-                    :content="formItem.attrs.summary"
-                    placement="top"
-                  >
-                    <i class="el-icon-warning-outline isSummary"></i>
-                  </el-tooltip>
-                  <!-- <el-checkbox-group
-                    v-if="formItem._type=='ele-form-checkbox'"
-                    v-model="formItem.default"
-                  >
-                    <el-checkbox
-                      v-for="(item, index) in formItem.options"
-                      :key="index"
-                      :label="item.text"
-                    ></el-checkbox>
-                  </el-checkbox-group>
-                  <el-radio-group
-                    v-if="formItem._type=='ele-form-radio'"
-                    v-model="formItem.default"
-                  >
-                    <el-radio
-                      v-for="(item, index) in formItem.options"
-                      :key="index"
-                      :label="item.text"
-                    ></el-radio>
-                  </el-radio-group> -->
-                  <component
-                    v-if="formItem.business !== '888' && formItem.type != 'groupTitle'"
-                    :disabled="formAttr.disabled || formItem._disabled"
-                    :desc="formItem"
-                    :is="formItem._type"
-                    :options="formItem._options"
-                    :ref="field"
-                    :field="field"
-                    :edit="true"
-                    v-model="formItem.default"
-                  />
-
-                  <div
-                    class="ele-form-tip"
-                    v-if="formItem.tip"
-                    v-html="formItem.tip"
-                  >
-                  </div>
-                </el-form-item>
-
-                <component
-                  v-else-if="formItem.type == 'groupTitle'"
-                  :disabled="formAttr.disabled || formItem._disabled"
-                  :desc="formItem"
-                  :is="formItem._type"
-                  :options="formItem._options"
-                  :ref="field"
-                  :field="field"
-                  :titleStr="formItem.label"
-                  :edit="true"
-                  style='height:80px;display:block;line-height:80px;padding-left:20px'
-                  v-model="formItem.default"
-                />
-
-                <div
-                  id="components"
-                  class="component-container"
-                  v-if="formItem.business == '888'"
-                >
-                  <bank-form-heard
-                    :isEdit="true"
-                    @setType="typeChange"
-                  ></bank-form-heard>
-                </div>
-                <!-- 复制按钮 -->
-                <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="selectIndex === index && !isSubIndex && formItem._type != 'purchase'&& formItem._type != 'bank-form-heard'"
-                >
-                </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="selectIndex === index && !isSubIndex && formItem._type != 'purchase' && formItem._type != 'bank-form-heard'"
-                >
-                </el-button>
-              </el-col>
-            </template>
-          </template>
-        </draggable>
-      </template>
-    </ele-form>
-
-  </div>
-
-</template>
-
-<script>
-import * as _ from "lodash";
-import Vue from "vue";
-// import draggable from "vuedraggable";
-
-const draggable = () => ({
-  // 需要加载的组件 (应该是一个 `Promise` 对象)
-  component: import("vuedraggable"),
-  // 异步组件加载时使用的组件
-  loading: "",
-  // 加载失败时使用的组件
-  error: "",
-  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
-  delay: 200,
-  // 如果提供了超时时间且组件加载也超时了，
-  // 则使用加载失败时使用的组件。默认值是：`Infinity`
-  timeout: 3000
-});
-// const postman = () => ({
-//   // 需要加载的组件 (应该是一个 `Promise` 对象)
-//   component: import("../components/postman"),
-//   // 异步组件加载时使用的组件
-//   loading: "",
-//   // 加载失败时使用的组件
-//   error: "",
-//   // 展示加载时组件的延时时间。默认值是 200 (毫秒)
-//   delay: 200,
-//   // 如果提供了超时时间且组件加载也超时了，
-//   // 则使用加载失败时使用的组件。默认值是：`Infinity`
-//   timeout: 3000
-// });
-// const handleCode = () => ({
-//   component: import("../components/handleCode"),
-//   loading: "",
-//   error: "",
-//   delay: 200,
-//   timeout: 3000
-// });
-// const bankFormHeard = () => ({
-//   component: import("../components/bankFormHeard"),
-//   loading: "",
-//   error: "",
-//   delay: 200,
-//   timeout: 3000
-// });
-import { mapState, mapMutations } from "vuex";
-import GroupTitle from "../components/GroupTitle";
-import bankFormHeard from "../components/bankFormHeard";
-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";
-import GroupSummary from "../components/GroupSummary";
-import { getMenuRouter } from "@/formBuilder/menuConfig";
-import formAttrDefault from "@/store/formBuilder/formAttrDefault";
-import {
-  businessType,
-  business
-} from "@/formBuilder/component/components/data";
-import {
-  goods,
-  Lease,
-  subpack,
-  team
-} from "@/formBuilder/component/components/data";
-export default {
-  name: "Builder",
-  components: {
-    draggable,
-    linkForm,
-    bankFormHeard,
-    GroupTitle,
-    GroupSummary,
-    postman,
-    handleCode,
-    formDep,
-    person
-  },
-  computed: {
-    ...mapState(["selectIndex", "activeFormName", "selSubIndex"]),
-    title() {
-      const title = this.$store.state.formBuilder.name || "";
-      const titleArr = title.split("/");
-      return titleArr[ titleArr.length - 1 ];
-    },
-    formType: function() {
-      return this.$store.state.formBuilder.type;
-    },
-    isSubIndex() {
-      return this.selSubIndex != null;
-    },
-    list() {
-      const list1 = _.cloneDeep(this.$store.state.list);
-      if (
-        list1[this.name] &&
-        _.findIndex(list1[this.name], { business: "888" }) == -1
-      ) {
-        list1[this.name].unshift({
-          attrs: {},
-          business: "888",
-          field: "bank-form-heard",
-          label: null,
-          rules: null,
-          type: "bank-form-heard"
-        });
-      }
-
-      return list1[this.name] ? list1[this.name] : [];
-    },
-    formAttr() {
-      if (JSON.stringify(this.formAttrPart) == "{}") {
-        return this.$store.state.formAttr;
-      } else {
-        return Object.assign(formAttrDefault, this.formAttrPart);
-      }
-    },
-    formDesc() {
-      if (JSON.stringify(this.formDescPart) == "{}") {
-        return _.keyBy(_.cloneDeep(this.list), "field");
-      } else {
-        return this.formDescPart;
-      }
-    },
-    formData: {
-      get() {
-        return this.formDataPart;
-      }
-    }
-  },
-  props: {
-    // businessType: {
-    //   type: String,
-    //   default: "1"
-    // },
-    formDataPart: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    formDescPart: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    formAttrPart: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    formState: {
-      type: Boolean,
-      default: () => {
-        return true;
-      }
-    },
-    name: {
-      type: String,
-      default: "default"
-    }
-  },
-  data() {
-    return {
-      apps: "bankFormHeard",
-      currentErrorArr: [],
-      businessType: "1",
-      // 确保渲染结束
-      isRenderFinish: false,
-      //   editType: ["custom-table", "columns", "purchase"]
-      editType: ["custom-table", "columns", "purchase"]
-    };
-  },
-  watch: {
-    formDesc: {
-      deep: true,
-      handler: function(nv, ov) {}
-    },
-    formType: {
-      immediate: true,
-      deep: true,
-      handler: function(newValue, oldValue) {
-        if (newValue == "blank") {
-          this.apps = "bankFormHeard";
-        } else {
-          const route = getMenuRouter(this.$store.state.formBuilder.menuId);
-          //   this.apps = require("@/" + route + ".vue").default;
-        }
-      }
-    },
-    formData: {
-      deep: true,
-      handler: function(newValue) {
-        this.$emit("getFormData", newValue);
-      }
-    },
-    list: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        const vm = this;
-        if (!newVal) return;
-        const arr = [];
-        // if (!newVal.some(i => i.field == "business")) {
-        //   arr.push(business);
-        // }
-        if (arr.length > 0) {
-          vm.updateList({ newList: [...newVal, ...arr], name: vm.name });
-        } else {
-          //   const type = newVal.filter
-          //     ? newVal.filter(item => item.field == "business")[0].business
-          //     : "";
-          //   type && vm.$emit("setType", type);
-        }
-
-        vm.list.forEach((e, i) => {
-          if (e.label == "" && e.business != "888") {
-            e["error"] = true;
-          } else {
-            e["error"] = false;
-          }
-          // 处理自定义必填
-          if (
-            e.attrs &&
-            Object.prototype.hasOwnProperty.call(e.attrs, "required")
-          ) {
-            e.required = e.attrs.required;
-          }
-        });
-      }
-    }
-    // business: {
-    //   deep: true,
-    //   handler: function(newVal,oldVal){
-    //     console.log(newVal,oldVal)
-    //     if(newVal && newVal != oldVal){
-    //
-    //     }
-    //   }
-    // }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.isRenderFinish = true;
-    });
-  },
-  methods: {
-    ...mapMutations([
-      "deleteItemByIndex",
-      "updateSelectIndex",
-      "updateList",
-      "updateActiveFormName"
-    ]),
-    getCurrentErrorItem() {
-      const vm = this;
-      return new Promise((resolve, reject) => {
-        vm.currentErrorArr = [];
-        vm.list.forEach(e => {
-          if (e.label == "" && e.business != "888") {
-            vm.currentErrorArr.push(e);
-          }
-        });
-        if (vm.currentErrorArr.length > 0) {
-          resolve(0);
-        } else {
-          resolve(1);
-        }
-      });
-    },
-    typeChange(val) {
-      const type = [goods, Lease, subpack, team];
-      this.businessType = val;
-      //   this.list.forEach(item => {
-      //     // if (item.field == "business") {
-      //     //   item.business = val;
-      //     //   item.attrs.columns = type[val - 1] ? type[val - 1] : [];
-      //     // }
-      //   });
-      const name = this.$store.state.activeFormName;
-      this.updateList({ name: name, newList: this.list });
-    },
-    // 复制
-    handleCopy(index) {
-      const copyItem = _.cloneDeep(this.list[index]);
-      copyItem.field = `key_${Date.now()}`;
-      this.list.splice(index + 1, 0, copyItem);
-      this.updateList({ name: this.name, newList: this.list });
-      this.updateSelectIndex(index + 1);
-    },
-    // 删除
-    handleDelete(index) {
-      this.deleteItemByIndex({ name: this.name, index: index });
-
-      // 如果删除的最后一个, 则重新选择最后一个
-      if (index >= this.list.length) {
-        this.updateSelectIndex(this.list.length - 1);
-      }
-    },
-    // 新增
-    handleAdd(res) {
-      const vm = this;
-      for (let i = 0; i < vm.list.length; i++) {
-        const e = vm.list[i];
-        if (
-          i != res.newIndex &&
-          e.type == vm.list[res.newIndex].type &&
-          e.types == vm.list[res.newIndex].types &&
-          vm.list[res.newIndex].types
-        ) {
-          vm.$message.error("已添加此类型控件，请勿重复添加");
-          vm.list.splice(res.newIndex, 1);
-          return;
-        }
-      }
-      this.updateSelectIndex(res.newIndex);
-      this.updateList({ name: this.name, newList: this.list });
-      this.updateActiveFormName(this.name);
-    },
-    // 移动开始
-    handleMoveStart(res) {
-      this.updateSelectIndex(res.oldIndex);
-    },
-    // 移动结束
-    handleMoveEnd(res) {
-      this.updateSelectIndex(res.newIndex);
-      this.updateList({ name: this.name, newList: this.list });
-    },
-    // 点击选中
-    handleFormItemClick(index) {
-      const vm = this;
-      vm.updateActiveFormName(vm.name);
-      vm.updateSelectIndex(index);
-      vm.$nextTick(function() {
-        vm.$parent.$parent.$children.forEach(async child => {
-          if (child.$refs.FormItemConfig) {
-            console.log(vm.$el.textContent); // 可以得到'changed'
-            const res = await child.$refs.FormItemConfig.getlabelFormV();
-          }
-        });
-      });
-    },
-    // 表单提交
-    handleSubmit(data) {
-      console.log(data);
-      this.$emit("getData", data);
-      return Promise.resolve();
-    },
-    // 请求成功
-    handleSuccess() {
-      // this.$message.success('创建成功')
-    },
-    // 获取组件名(调用ele-form内部方法)
-    getColAttrs(layout) {
-      return this.$refs["ele-form"].getColAttrs(layout);
-    }
-  }
-};
-</script>
-<style lang='scss'>
-//  .el-upload--picture-card {
-//   width: 102px !important;
-//   height: 102px !important;
-//   div div {
-//     width: 100% !important;
-//     height: 102px !important;
-//     line-height: 102px !important;
-//     text-align: center !important;
-//     i{
-//         font-size:22px !important;
-//         font-weight: bold !important;
-//     }
-//     &::after {
-//       font-size: 14px;
-//       font-family: "Microsoft YaHei";
-//       font-weight: 400;
-//       color: #bfbfbf;
-//       content: "<br>\70B9\51FB\4E0A\4F20";
-//       margin-left: 13px;
-//     }
-//   }
-// }
-</style>
-<style lang="scss" scoped>
-h4 {
-  margin-top: 0;
-  padding: 15px 10px 10px 15px;
-  display: block;
-  border-bottom: 1px solid #ccc;
-}
-/deep/ .el-icon-delete {
-  font-size: 17px !important;
-}
-/deep/ .el-icon-document-copy {
-  font-size: 17px !important;
-}
-.quill-editor /deep/ .ql-editor {
-  height: 200px;
-}
-.columnsClass {
-  margin-bottom: 0 !important;
-  /deep/ .el-input {
-    position: absolute;
-    top: 50% !important;
-    transform: translateY(-50%) !important;
-  }
-}
-.isSummary {
-  z-index: 2004;
-  cursor: pointer;
-  position: absolute;
-  left: -14px;
-  top: 14px;
-  //   transform: translateY(-50%);
-}
-.app-main-center {
-  //   padding: 0 0 15px 0;
-}
-.pad_10 {
-  padding: 0 10px;
-}
-.border-1 {
-  height: 1px;
-  width: 100%;
-  background-color: #dcdfe6;
-  margin-bottom: 10px;
-}
-.form-area {
-  //   border: 1px dashed #909399;
-  //   padding: 20px;
-  min-height: calc(100vh - 330px);
-}
-/* 当无表单时的占位 */
-.form-area-placeholder {
-  width: 100%;
-  min-height: calc(100vh - 400px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: white;
-  color: #909399;
-  text-align: center;
-}
-
-/* 表单项 */
-.form-item {
-  background: white;
-  cursor: move;
-  position: relative;
-  z-index: 1;
-  padding: 0 !important;
-  border: 1px dashed rgba(0, 0, 0, 0);
-}
-
-.form-item-active {
-  border: 1px dashed #409eff !important;
-  background-color: rgba(2, 134, 223, 0.06) !important;
-  position: relative;
-}
-.form-item-error {
-  border: 1px dashed #726d6d;
-  position: relative;
-}
-/* 遮挡区(遮挡住) */
-.form-item::after {
-  content: " ";
-  display: block;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-  z-index: 2;
-}
-
-.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/ .ele-form .el-col-18 {
-  width: 100%;
-}
-/deep/ .ele-form .el-form-item {
-  display: block;
-}
-/deep/ .ele-form .el-form-item .el-form-item__label {
-  float: left;
-  padding: 0 20px 0 0;
-}
-/deep/ .ele-form .el-form-item .el-form-item__content {
-  display: block;
-}
-/deep/ .section-form-submit {
-  display: none;
-}
-/deep/ .form-area .form-item .el-form-item {
-  margin: 20px;
-}
-.purchase {
-  padding: 20px;
-  .el-form-item {
-    margin: 0;
-  }
-}
-/deep/ .is-justify-center > .el-col {
-  width: 100%;
-}
-// .ghost {
-//   opacity: 0.5;
-//   background: rgb(230,247,255);
-// }
-// .chosen {
-//   opacity: 0.5;
-//   background: blue;
-// }
-// .type-item.ghost {
-//   height: 80px;
-//   width: 100% !important;
-//   background-color: rgb(230,247,255);
-// }
-</style>
-
-
-
+<template>
+  <div class="app-main-center">
+    <h4>{{title}}</h4>
+    <ele-form
+      v-model="formData"
+      :form-desc="formDesc"
+      :request-fn="handleSubmit"
+      @request-success="handleSuccess"
+      ref="ele-form"
+      v-bind="formAttr"
+      title=''
+    >
+      <template
+        v-if="formState"
+        v-slot:form-content="{formData,  formDesc, formErrorObj }"
+      >
+        <!-- <div class="msg " >从左侧拖拽来添加字段</div> -->
+        <draggable
+          :animation="200"
+          v-if="isRenderFinish"
+          :disabled="false"
+          :list="list"
+          ghost-class="ghost"
+          @add="handleAdd"
+          @end="handleMoveEnd"
+          @start="handleMoveStart"
+          :group="{ name: 'form', pull: false, put: true}"
+          tag="el-row"
+          class="form-area"
+        >
+          <!-- 当为空时 -->
+
+          <div
+            class="form-area-placeholder"
+            v-if="list.length === 0"
+          >
+            从左侧拖拽来添加表单项
+          </div>
+          <template v-else>
+            <!-- <div id="components" class="component-container">
+              <component :is="apps" :isEdit="true" :businessType="businessType"
+                @setType="typeChange"></component>
+            </div> -->
+            <template v-for="(formItem, field, index) of formDesc">
+              <el-col
+                :key="field"
+                v-bind="getColAttrs(formItem.layout)"
+                @click.native="handleFormItemClick(index)"
+                v-if="formItem._vif && formItem.type !== 'purchase'"
+                :class="{ 'form-item-active': (selectIndex === index && !isSubIndex && activeFormName == name),'form-item' : editType.indexOf(formItem.type||form.Item.content.type) == -1,'form-item-error':formItem.error,'purchase' : formItem.type == 'purchase'}"
+              >
+                <component
+                  v-if="formItem.type == 'groupSummary'"
+                  :is="formItem._type"
+                  :titleStr="formItem.label"
+                  v-model="formItem.default"
+                  style='height:80px;display:block;line-height:80px;padding-left:20px'
+                />
+                <el-form-item
+                  v-else-if="formItem.type !== 'groupTitle' &&formItem.business !== '888' "
+                  :error="formErrorObj ? formErrorObj[field] : null"
+                  :label="
+                    (formAttr.isShowLabel === false || formItem.isShowLabel === false) ? null : formItem.label
+                  "
+                  :prop="field"
+                  :class="formItem.type=='columns'?'columnsClass':null"
+                  :label-width="formItem._type.indexOf('columns') == -1  ? formAttr.labelWidth+'px' : '0px'"
+                  :style="editType.indexOf(formItem.type) !== -1?'margin:20px':''"
+                >
+                  <el-tooltip
+                    v-if='formItem.attrs.summary'
+                    class="item"
+                    effect="dark"
+                    :content="formItem.attrs.summary"
+                    placement="top"
+                  >
+                    <i class="el-icon-warning-outline isSummary"></i>
+                  </el-tooltip>
+                  <!-- <el-checkbox-group
+                    v-if="formItem._type=='ele-form-checkbox'"
+                    v-model="formItem.default"
+                  >
+                    <el-checkbox
+                      v-for="(item, index) in formItem.options"
+                      :key="index"
+                      :label="item.text"
+                    ></el-checkbox>
+                  </el-checkbox-group>
+                  <el-radio-group
+                    v-if="formItem._type=='ele-form-radio'"
+                    v-model="formItem.default"
+                  >
+                    <el-radio
+                      v-for="(item, index) in formItem.options"
+                      :key="index"
+                      :label="item.text"
+                    ></el-radio>
+                  </el-radio-group> -->
+                  <component
+                    v-if="formItem.business !== '888' && formItem.type != 'groupTitle'"
+                    :disabled="formAttr.disabled || formItem._disabled"
+                    :desc="formItem"
+                    :is="formItem._type"
+                    :options="formItem._options"
+                    :ref="field"
+                    :field="field"
+                    :edit="true"
+                    v-model="formItem.default"
+                  />
+
+                  <div
+                    class="ele-form-tip"
+                    v-if="formItem.tip"
+                    v-html="formItem.tip"
+                  >
+                  </div>
+                </el-form-item>
+
+                <component
+                  v-else-if="formItem.type == 'groupTitle'"
+                  :disabled="formAttr.disabled || formItem._disabled"
+                  :desc="formItem"
+                  :is="formItem._type"
+                  :options="formItem._options"
+                  :ref="field"
+                  :field="field"
+                  :titleStr="formItem.label"
+                  :edit="true"
+                  style='height:80px;display:block;line-height:80px;padding-left:20px'
+                  v-model="formItem.default"
+                />
+
+                <div
+                  id="components"
+                  class="component-container"
+                  v-if="formItem.business == '888'"
+                >
+                  <bank-form-heard
+                    :isEdit="true"
+                    @setType="typeChange"
+                  ></bank-form-heard>
+                </div>
+                <!-- 复制按钮 -->
+                <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="selectIndex === index && !isSubIndex && formItem._type != 'purchase'&& formItem._type != 'bank-form-heard'"
+                >
+                </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="selectIndex === index && !isSubIndex && formItem._type != 'purchase' && formItem._type != 'bank-form-heard'"
+                >
+                </el-button>
+              </el-col>
+            </template>
+          </template>
+        </draggable>
+      </template>
+    </ele-form>
+
+  </div>
+
+</template>
+
+<script>
+import * as _ from "lodash";
+import Vue from "vue";
+// import draggable from "vuedraggable";
+
+const draggable = () => ({
+  // 需要加载的组件 (应该是一个 `Promise` 对象)
+  component: import("vuedraggable"),
+  // 异步组件加载时使用的组件
+  loading: "",
+  // 加载失败时使用的组件
+  error: "",
+  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
+  delay: 200,
+  // 如果提供了超时时间且组件加载也超时了，
+  // 则使用加载失败时使用的组件。默认值是：`Infinity`
+  timeout: 3000
+});
+// const postman = () => ({
+//   // 需要加载的组件 (应该是一个 `Promise` 对象)
+//   component: import("../components/postman"),
+//   // 异步组件加载时使用的组件
+//   loading: "",
+//   // 加载失败时使用的组件
+//   error: "",
+//   // 展示加载时组件的延时时间。默认值是 200 (毫秒)
+//   delay: 200,
+//   // 如果提供了超时时间且组件加载也超时了，
+//   // 则使用加载失败时使用的组件。默认值是：`Infinity`
+//   timeout: 3000
+// });
+// const handleCode = () => ({
+//   component: import("../components/handleCode"),
+//   loading: "",
+//   error: "",
+//   delay: 200,
+//   timeout: 3000
+// });
+// const bankFormHeard = () => ({
+//   component: import("../components/bankFormHeard"),
+//   loading: "",
+//   error: "",
+//   delay: 200,
+//   timeout: 3000
+// });
+import { mapState, mapMutations } from "vuex";
+import GroupTitle from "../components/GroupTitle";
+import bankFormHeard from "../components/bankFormHeard";
+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";
+import GroupSummary from "../components/GroupSummary";
+import { getMenuRouter } from "@/formBuilder/menuConfig";
+import formAttrDefault from "@/store/formBuilder/formAttrDefault";
+import {
+  businessType,
+  business
+} from "@/formBuilder/component/components/data";
+import {
+  goods,
+  Lease,
+  subpack,
+  team
+} from "@/formBuilder/component/components/data";
+export default {
+  name: "Builder",
+  components: {
+    draggable,
+    linkForm,
+    bankFormHeard,
+    GroupTitle,
+    GroupSummary,
+    postman,
+    handleCode,
+    formDep,
+    person
+  },
+  computed: {
+    ...mapState(["selectIndex", "activeFormName", "selSubIndex"]),
+    title() {
+      const title = this.$store.state.formBuilder.name || "";
+      const titleArr = title.split("/");
+      return titleArr[ titleArr.length - 1 ];
+    },
+    formType: function() {
+      return this.$store.state.formBuilder.type;
+    },
+    isSubIndex() {
+      return this.selSubIndex != null;
+    },
+    list() {
+      const list1 = _.cloneDeep(this.$store.state.list);
+      if (
+        list1[this.name] &&
+        _.findIndex(list1[this.name], { business: "888" }) == -1
+      ) {
+        list1[this.name].unshift({
+          attrs: {},
+          business: "888",
+          field: "bank-form-heard",
+          label: null,
+          rules: null,
+          type: "bank-form-heard"
+        });
+      }
+
+      return list1[this.name] ? list1[this.name] : [];
+    },
+    formAttr() {
+      if (JSON.stringify(this.formAttrPart) == "{}") {
+        return this.$store.state.formAttr;
+      } else {
+        return Object.assign(formAttrDefault, this.formAttrPart);
+      }
+    },
+    formDesc() {
+      if (JSON.stringify(this.formDescPart) == "{}") {
+        return _.keyBy(_.cloneDeep(this.list), "field");
+      } else {
+        return this.formDescPart;
+      }
+    },
+    formData: {
+      get() {
+        return this.formDataPart;
+      }
+    }
+  },
+  props: {
+    // businessType: {
+    //   type: String,
+    //   default: "1"
+    // },
+    formDataPart: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    formDescPart: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    formAttrPart: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    formState: {
+      type: Boolean,
+      default: () => {
+        return true;
+      }
+    },
+    name: {
+      type: String,
+      default: "default"
+    }
+  },
+  data() {
+    return {
+      apps: "bankFormHeard",
+      currentErrorArr: [],
+      businessType: "1",
+      // 确保渲染结束
+      isRenderFinish: false,
+      //   editType: ["custom-table", "columns", "purchase"]
+      editType: ["custom-table", "columns", "purchase"]
+    };
+  },
+  watch: {
+    formDesc: {
+      deep: true,
+      handler: function(nv, ov) {}
+    },
+    formType: {
+      immediate: true,
+      deep: true,
+      handler: function(newValue, oldValue) {
+        if (newValue == "blank") {
+          this.apps = "bankFormHeard";
+        } else {
+          const route = getMenuRouter(this.$store.state.formBuilder.menuId);
+          //   this.apps = require("@/" + route + ".vue").default;
+        }
+      }
+    },
+    formData: {
+      deep: true,
+      handler: function(newValue) {
+        this.$emit("getFormData", newValue);
+      }
+    },
+    list: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        const vm = this;
+        if (!newVal) return;
+        const arr = [];
+        // if (!newVal.some(i => i.field == "business")) {
+        //   arr.push(business);
+        // }
+        if (arr.length > 0) {
+          vm.updateList({ newList: [...newVal, ...arr], name: vm.name });
+        } else {
+          //   const type = newVal.filter
+          //     ? newVal.filter(item => item.field == "business")[0].business
+          //     : "";
+          //   type && vm.$emit("setType", type);
+        }
+
+        vm.list.forEach((e, i) => {
+          if (e.label == "" && e.business != "888") {
+            e["error"] = true;
+          } else {
+            e["error"] = false;
+          }
+          // 处理自定义必填
+          if (
+            e.attrs &&
+            Object.prototype.hasOwnProperty.call(e.attrs, "required")
+          ) {
+            e.required = e.attrs.required;
+          }
+        });
+      }
+    }
+    // business: {
+    //   deep: true,
+    //   handler: function(newVal,oldVal){
+    //     console.log(newVal,oldVal)
+    //     if(newVal && newVal != oldVal){
+    //
+    //     }
+    //   }
+    // }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.isRenderFinish = true;
+    });
+  },
+  methods: {
+    ...mapMutations([
+      "deleteItemByIndex",
+      "updateSelectIndex",
+      "updateList",
+      "updateActiveFormName"
+    ]),
+    getCurrentErrorItem() {
+      const vm = this;
+      return new Promise((resolve, reject) => {
+        vm.currentErrorArr = [];
+        vm.list.forEach(e => {
+          if (e.label == "" && e.business != "888") {
+            vm.currentErrorArr.push(e);
+          }
+        });
+        if (vm.currentErrorArr.length > 0) {
+          resolve(0);
+        } else {
+          resolve(1);
+        }
+      });
+    },
+    typeChange(val) {
+      const type = [goods, Lease, subpack, team];
+      this.businessType = val;
+      //   this.list.forEach(item => {
+      //     // if (item.field == "business") {
+      //     //   item.business = val;
+      //     //   item.attrs.columns = type[val - 1] ? type[val - 1] : [];
+      //     // }
+      //   });
+      const name = this.$store.state.activeFormName;
+      this.updateList({ name: name, newList: this.list });
+    },
+    // 复制
+    handleCopy(index) {
+      const copyItem = _.cloneDeep(this.list[index]);
+      copyItem.field = `key_${Date.now()}`;
+      this.list.splice(index + 1, 0, copyItem);
+      this.updateList({ name: this.name, newList: this.list });
+      this.updateSelectIndex(index + 1);
+    },
+    // 删除
+    handleDelete(index) {
+      this.deleteItemByIndex({ name: this.name, index: index });
+
+      // 如果删除的最后一个, 则重新选择最后一个
+      if (index >= this.list.length) {
+        this.updateSelectIndex(this.list.length - 1);
+      }
+    },
+    // 新增
+    handleAdd(res) {
+      const vm = this;
+      for (let i = 0; i < vm.list.length; i++) {
+        const e = vm.list[i];
+        if (
+          i != res.newIndex &&
+          e.type == vm.list[res.newIndex].type &&
+          e.types == vm.list[res.newIndex].types &&
+          vm.list[res.newIndex].types
+        ) {
+          vm.$message.error("已添加此类型控件，请勿重复添加");
+          vm.list.splice(res.newIndex, 1);
+          return;
+        }
+      }
+      this.updateSelectIndex(res.newIndex);
+      this.updateList({ name: this.name, newList: this.list });
+      this.updateActiveFormName(this.name);
+    },
+    // 移动开始
+    handleMoveStart(res) {
+      this.updateSelectIndex(res.oldIndex);
+    },
+    // 移动结束
+    handleMoveEnd(res) {
+      this.updateSelectIndex(res.newIndex);
+      this.updateList({ name: this.name, newList: this.list });
+    },
+    // 点击选中
+    handleFormItemClick(index) {
+      const vm = this;
+      vm.updateActiveFormName(vm.name);
+      vm.updateSelectIndex(index);
+      vm.$nextTick(function() {
+        vm.$parent.$parent.$children.forEach(async child => {
+          if (child.$refs.FormItemConfig) {
+            console.log(vm.$el.textContent); // 可以得到'changed'
+            const res = await child.$refs.FormItemConfig.getlabelFormV();
+          }
+        });
+      });
+    },
+    // 表单提交
+    handleSubmit(data) {
+      console.log(data);
+      this.$emit("getData", data);
+      return Promise.resolve();
+    },
+    // 请求成功
+    handleSuccess() {
+      // this.$message.success('创建成功')
+    },
+    // 获取组件名(调用ele-form内部方法)
+    getColAttrs(layout) {
+      return this.$refs["ele-form"].getColAttrs(layout);
+    }
+  }
+};
+</script>
+<style lang='scss'>
+//  .el-upload--picture-card {
+//   width: 102px !important;
+//   height: 102px !important;
+//   div div {
+//     width: 100% !important;
+//     height: 102px !important;
+//     line-height: 102px !important;
+//     text-align: center !important;
+//     i{
+//         font-size:22px !important;
+//         font-weight: bold !important;
+//     }
+//     &::after {
+//       font-size: 14px;
+//       font-family: "Microsoft YaHei";
+//       font-weight: 400;
+//       color: #bfbfbf;
+//       content: "<br>\70B9\51FB\4E0A\4F20";
+//       margin-left: 13px;
+//     }
+//   }
+// }
+</style>
+<style lang="scss" scoped>
+h4 {
+  margin-top: 0;
+  padding: 15px 10px 10px 15px;
+  display: block;
+  border-bottom: 1px solid #ccc;
+}
+/deep/ .el-icon-delete {
+  font-size: 17px !important;
+}
+/deep/ .el-icon-document-copy {
+  font-size: 17px !important;
+}
+.quill-editor /deep/ .ql-editor {
+  height: 200px;
+}
+.columnsClass {
+  margin-bottom: 0 !important;
+  /deep/ .el-input {
+    position: absolute;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+  }
+}
+.isSummary {
+  z-index: 2004;
+  cursor: pointer;
+  position: absolute;
+  left: -14px;
+  top: 14px;
+  //   transform: translateY(-50%);
+}
+.app-main-center {
+  //   padding: 0 0 15px 0;
+}
+.pad_10 {
+  padding: 0 10px;
+}
+.border-1 {
+  height: 1px;
+  width: 100%;
+  background-color: #dcdfe6;
+  margin-bottom: 10px;
+}
+.form-area {
+  //   border: 1px dashed #909399;
+  //   padding: 20px;
+  min-height: calc(100vh - 330px);
+}
+/* 当无表单时的占位 */
+.form-area-placeholder {
+  width: 100%;
+  min-height: calc(100vh - 400px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  color: #909399;
+  text-align: center;
+}
+
+/* 表单项 */
+.form-item {
+  background: white;
+  cursor: move;
+  position: relative;
+  z-index: 1;
+  padding: 0 !important;
+  border: 1px dashed rgba(0, 0, 0, 0);
+}
+
+.form-item-active {
+  border: 1px dashed #409eff !important;
+  background-color: rgba(2, 134, 223, 0.06) !important;
+  position: relative;
+}
+.form-item-error {
+  border: 1px dashed #726d6d;
+  position: relative;
+}
+/* 遮挡区(遮挡住) */
+.form-item::after {
+  content: " ";
+  display: block;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: 2;
+}
+
+.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/ .ele-form .el-col-18 {
+  width: 100%;
+}
+/deep/ .ele-form .el-form-item {
+  display: block;
+}
+/deep/ .ele-form .el-form-item .el-form-item__label {
+  float: left;
+  padding: 0 20px 0 0;
+}
+/deep/ .ele-form .el-form-item .el-form-item__content {
+  display: block;
+}
+/deep/ .section-form-submit {
+  display: none;
+}
+/deep/ .form-area .form-item .el-form-item {
+  margin: 20px;
+}
+.purchase {
+  padding: 20px;
+  .el-form-item {
+    margin: 0;
+  }
+}
+/deep/ .is-justify-center > .el-col {
+  width: 100%;
+}
+// .ghost {
+//   opacity: 0.5;
+//   background: rgb(230,247,255);
+// }
+// .chosen {
+//   opacity: 0.5;
+//   background: blue;
+// }
+// .type-item.ghost {
+//   height: 80px;
+//   width: 100% !important;
+//   background-color: rgb(230,247,255);
+// }
+</style>
+
+
+