qgb-process 0.1.52 → 0.1.53

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

@@ -1,718 +0,0 @@
-<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>
-
-
-