qgb-process 0.2.3 → 0.2.7

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

@@ -1,391 +1,391 @@
-<template>
-  <el-dialog
-    :visible="visible"
-    append-to-body
-    :title="title"
-    @update:visible="$emit('update:visible', $event)"
-    v-if="visible"
-    width="85%"
-    @close='close'
-  >
-    <!-- <el-row type="flex" justify="center">
-      <el-col :span="18" class="preview">
-        <component :is="apps"></component>
-      </el-col>
-    </el-row> -->
-    <ele-form
-      :formDesc="formDesc.default"
-      v-model="formData"
-      :request-fn="handleRequest"
-      @request-success="handleRequestSuccess"
-      :span="22"
-      v-bind="formEndAttr"
-    >
-      <template v-slot:form-content="{ formData, formDesc, formErrorObj }">
-
-        <template v-for="(formItem, field, index) of formDesc">
-          <component
-            :key='index'
-            v-if="formItem.type == 'groupSummary'"
-            :is="formItem._type"
-            :titleStr="formItem.label"
-          />
-
-          <el-form-item
-            :key='index'
-            v-else-if="formItem.type!=='groupTitle'"
-            :error="formErrorObj ? formErrorObj[field] : null"
-            :label="
-                    (formAttr.isShowLabel === false || formItem.isShowLabel === false) ? null : formItem.label
-                  "
-            :prop="field"
-            :label-width="formItem._type.indexOf('columns') == -1  ? formAttr.labelWidth+'px' : '0px'"
-          >
-            <el-tooltip
-              v-if='formItem.attrs && formItem.attrs.summary'
-              class="item"
-              effect="dark"
-              :content="formItem.attrs && formItem.attrs.summary"
-              placement="top"
-            >
-              <i class="el-icon-warning-outline isSummary"></i>
-            </el-tooltip>
-
-            <component
-              v-if="formItem.business !== '888'  && formItem._type !=='upload-file' && formItem._type !=='image-uploader' &&  formItem._type !== 'custom-table' && formItem.type !=='formDep'  && formItem.type !=='person'"
-              :disabled="formAttr.disabled || formItem._disabled"
-              :desc="formItem"
-              :is="formItem._type"
-              :options="formItem._options"
-              :ref="field"
-              :field="field"
-               @input="(res)=>{inputChange(res,formItem.attrs,formItem,field)}"
-              v-model="formItem.default"
-            />
-            <component
-              :key='index'
-              v-if=" formItem._type == 'custom-table'"
-              :disabled="formAttr.disabled || formItem._disabled"
-              :desc="formItem"
-              :is="formItem._type"
-              :options="formItem._options"
-              :ref="field"
-              :field="field"
-              v-model="formItem.default"
-              :flag="'dialog'"
-            />
-            <component
-              v-if="formItem.type =='formDep'"
-              :disabled="formAttr.disabled || formItem._disabled"
-              :desc="formItem"
-              :is="formItem._type"
-              :options="formItem._options"
-              :ref="field"
-              :field="field"
-              :defaultArr="formData[field]"
-              :isMultiple='formItem.attrs?formItem.attrs.multiple:false'
-              @input="(res)=>{inputChange(res,formItem.attrs,formItem,field)}"
-              @dep="(res)=>{dep(res,formItem.attrs,formItem,field)}"
-              v-model="formData[field+'Str']"
-            />
-            <component
-              v-if="formItem.type =='person'"
-              :disabled="formAttr.disabled || formItem._disabled"
-              :desc="formItem"
-              :is="formItem._type"
-              :options="formItem._options"
-              :ref="field"
-              :field="field"
-              :isMultiple='formItem.attrs?formItem.attrs.multiple:false'
-              :defaultArr="formData[field]"
-              @input="(res)=>{inputChange(res,formItem.attrs,formItem,field)}"
-              @dep="(res)=>{dep(res,formItem.attrs,formItem,field)}"
-              v-model="formData[field+'Str']"
-            />
-
-            <div v-if="formItem._type =='upload-file' || formItem._type =='image-uploader'">上传功能请在正式新增页面进行操作</div>
-            <div
-              class="ele-form-tip"
-              v-if="formItem.tip"
-              v-html="formItem.tip"
-            >
-
-            </div>
-
-          </el-form-item>
-          <component
-            :key='index'
-            v-else-if="formItem.type == 'groupTitle'"
-            :is="formItem._type"
-            :titleStr="formItem.label"
-          />
-          <div
-            id="components"
-            :key='formItem.business'
-            class="component-container"
-            v-if="formItem.business == '888'"
-          >
-            <bank-form-heard :isDia='true'></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'"
-          >
-          </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'"
-          >
-          </el-button> -->
-
-        </template>
-      </template>
-
-      <!-- <template v-for="(formItem, field, index) of formDesc.default"> -->
-      <!-- <el-row type="flex" justify="center" :key='index' v-if="formItem.business == '888' ">
-          <el-col :span="18" class="preview">
-            <bank-form-heard :is="apps"></bank-form-heard>
-          </el-col>
-        </el-row> -->
-      <!-- </template> -->
-
-    </ele-form>
-  </el-dialog>
-</template>
-
-<script>
-import _ from "lodash-es";
-import { mapState } from "vuex";
-import bankFormHeard from "./bankFormHeard";
-
-import { getMenuRouter } from "@/formBuilder/menuConfig";
-import GroupTitle from "../components/GroupTitle";
-import GroupSummary from "../components/GroupSummary";
-import postman from "../components/postman";
-import handleCode from "../components/handleCode";
-import formDep from "../components/formDep";
-import person from "../components/person";
-import linkForm from "../components/linkForm";
-export default {
-  name: "PreviewDialog",
-  components: {
-    bankFormHeard,
-    GroupTitle,
-    GroupSummary,
-    postman,
-    handleCode,
-    formDep,
-    person,
-    linkForm
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    formDesc: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      formData: {},
-      apps: "bankFormHeard"
-    };
-  },
-  computed: {
-    ...mapState(["formAttr", "formBuilder", "selectIndex"]),
-    title() {
-      return this.$store.state.formBuilder.name;
-    },
-    isSubIndex() {
-      return this.selSubIndex != null;
-    },
-    formEndAttr() {
-      const formAttr = _.cloneDeep(this.formAttr);
-      formAttr.isShowSubmitBtn = false;
-      formAttr.isShowBackBtn = false;
-      return formAttr;
-    },
-    formType() {
-      return this.$store.state.formBuilder.type;
-    },
-    isLink() {
-      let flg = false;
-      const _this = this;
-      if (this.formDesc.default) {
-        for (const name in _this.formDesc.default) {
-          if (
-            _this.formDesc.default[name].customMode == 1 &&
-            _this.formDesc.default[name].customValue
-          ) {
-            // _this.formDesc.default[name].default = ""
-            flg = true;
-          }
-        }
-      }
-      return flg;
-    }
-  },
-  watch: {
-    visible() {
-      this.formData = {};
-    },
-    formType: {
-      immediate: true,
-      deep: true,
-      handler: function(newVal) {
-        // const route = getMenuRouter(this.$store.state.formBuilder.menuId);
-        // this.apps =
-        //   newVal == "blank"
-        //     ? "bankFormHeard"
-        //     : // : require("@/" + route + ".vue").default;
-        //     "";
-      }
-    },
-    formDesc: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        const _this = this;
-        _this.$delete(_this.formDesc.default, "business");
-      }
-    },
-    formData: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        const _this = this;
-        if (newVal && _this.isLink) {
-          for (const name in _this.formDesc.default) {
-            if (
-              _this.formDesc.default[name].customMode == 1 &&
-              _this.formDesc.default[name].customValue
-            ) {
-              const func = this.formatFunc(
-                _this.formDesc.default[name].customValue,
-                newVal
-              );
-              _this.formData[name] = func;
-              _this.formDesc.default[name].default = func
-
-
-            }
-          }
-        }
-        _this.$delete(_this.formData, "business");
-      }
-    }
-  },
-  methods: {
-    inputChange(res, numbers, formItem, field) {
-      const vm = this;
-      vm.$set(vm.formData, field, res);
-
-    },
-    dep(res, numbers, formItem, field) {
-      const vm = this;
-
-      vm.$set(vm.formData, [field + "Str"], res);
-    },
-    close() {
-      const vm = this;
-      Object.keys(vm.formData).forEach(key => {
-        vm.formData[key] = "";
-      });
-    },
-    handleRequest(data) {
-      return Promise.resolve(data);
-    },
-    handleRequestSuccess(data) {
-      // this.$message.success('发送成功')
-    },
-    // 根据value转化成function
-    formatFunc(customValue, newVal) {
-      const strReg = new RegExp(/\{key_[0-9]+\}/g);
-      const mackReg = new RegExp(/\{[+,\-,*,/]\}/g);
-      const arr = [];
-      let str = customValue.replace(strReg, function(match) {
-        const filed = match.substring(1, match.length - 1);
-        arr.push(newVal[filed]);
-        return newVal[filed] ? newVal[filed] : "";
-      });
-      str = str.replace(mackReg, function(match) {
-        return " " + match.substring(1, match.length - 1) + " ";
-      });
-      // 判断计算相关节点是不是都是''
-      const flg = arr.filter((item, index) => !!item);
-      if (flg.length > 0) {
-        return new Function("return " + "" + str + "")();
-      } else {
-        return "";
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.isSummary {
-  z-index: 2004;
-  cursor: pointer;
-  position: absolute;
-  left: -12px;
-  top: 14px;
-  //   transform: translateY(-50%);
-}
-/deep/ .tables-sub {
-  //   border-top: 1px solid #ebeef5;
-  //   border-right: 1px solid #ebeef5;
-  //   border-bottom: 1px solid #ebeef5;
-  min-height: 80px;
-  width: 100% !important;
-  overflow: auto;
-  max-width: 100% !important;
-  .disoption {
-    &:after {
-      content: " ";
-      display: block;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      position: absolute;
-      z-index: 2;
-      cursor: move;
-    }
-  }
-}
-.preview {
-  /deep/ .section-form-submit {
-    display: none;
-  }
-  /deep/ .el-input {
-    width: 100% !important;
-  }
-  /deep/ .el-form-item {
-    position: relative;
-  }
-  /deep/ .el-autocomplete {
-    width: 100% !important;
-  }
-  /deep/ .el-select {
-    width: 100% !important;
-  }
-  /deep/ .ele-form-upload-file .el-link--inner img {
-    visibility: hidden;
-  }
-}
-</style>
+<template>
+  <el-dialog
+    :visible="visible"
+    append-to-body
+    :title="title"
+    @update:visible="$emit('update:visible', $event)"
+    v-if="visible"
+    width="85%"
+    @close='close'
+  >
+    <!-- <el-row type="flex" justify="center">
+      <el-col :span="18" class="preview">
+        <component :is="apps"></component>
+      </el-col>
+    </el-row> -->
+    <ele-form
+      :formDesc="formDesc.default"
+      v-model="formData"
+      :request-fn="handleRequest"
+      @request-success="handleRequestSuccess"
+      :span="22"
+      v-bind="formEndAttr"
+    >
+      <template v-slot:form-content="{ formData, formDesc, formErrorObj }">
+
+        <template v-for="(formItem, field, index) of formDesc">
+          <component
+            :key='index'
+            v-if="formItem.type == 'groupSummary'"
+            :is="formItem._type"
+            :titleStr="formItem.label"
+          />
+
+          <el-form-item
+            :key='index'
+            v-else-if="formItem.type!=='groupTitle'"
+            :error="formErrorObj ? formErrorObj[field] : null"
+            :label="
+                    (formAttr.isShowLabel === false || formItem.isShowLabel === false) ? null : formItem.label
+                  "
+            :prop="field"
+            :label-width="formItem._type.indexOf('columns') == -1  ? formAttr.labelWidth+'px' : '0px'"
+          >
+            <el-tooltip
+              v-if='formItem.attrs && formItem.attrs.summary'
+              class="item"
+              effect="dark"
+              :content="formItem.attrs && formItem.attrs.summary"
+              placement="top"
+            >
+              <i class="el-icon-warning-outline isSummary"></i>
+            </el-tooltip>
+
+            <component
+              v-if="formItem.business !== '888'  && formItem._type !=='upload-file' && formItem._type !=='image-uploader' &&  formItem._type !== 'custom-table' && formItem.type !=='formDep'  && formItem.type !=='person'"
+              :disabled="formAttr.disabled || formItem._disabled"
+              :desc="formItem"
+              :is="formItem._type"
+              :options="formItem._options"
+              :ref="field"
+              :field="field"
+               @input="(res)=>{inputChange(res,formItem.attrs,formItem,field)}"
+              v-model="formItem.default"
+            />
+            <component
+              :key='index'
+              v-if=" formItem._type == 'custom-table'"
+              :disabled="formAttr.disabled || formItem._disabled"
+              :desc="formItem"
+              :is="formItem._type"
+              :options="formItem._options"
+              :ref="field"
+              :field="field"
+              v-model="formItem.default"
+              :flag="'dialog'"
+            />
+            <component
+              v-if="formItem.type =='formDep'"
+              :disabled="formAttr.disabled || formItem._disabled"
+              :desc="formItem"
+              :is="formItem._type"
+              :options="formItem._options"
+              :ref="field"
+              :field="field"
+              :defaultArr="formData[field]"
+              :isMultiple='formItem.attrs?formItem.attrs.multiple:false'
+              @input="(res)=>{inputChange(res,formItem.attrs,formItem,field)}"
+              @dep="(res)=>{dep(res,formItem.attrs,formItem,field)}"
+              v-model="formData[field+'Str']"
+            />
+            <component
+              v-if="formItem.type =='person'"
+              :disabled="formAttr.disabled || formItem._disabled"
+              :desc="formItem"
+              :is="formItem._type"
+              :options="formItem._options"
+              :ref="field"
+              :field="field"
+              :isMultiple='formItem.attrs?formItem.attrs.multiple:false'
+              :defaultArr="formData[field]"
+              @input="(res)=>{inputChange(res,formItem.attrs,formItem,field)}"
+              @dep="(res)=>{dep(res,formItem.attrs,formItem,field)}"
+              v-model="formData[field+'Str']"
+            />
+
+            <div v-if="formItem._type =='upload-file' || formItem._type =='image-uploader'">上传功能请在正式新增页面进行操作</div>
+            <div
+              class="ele-form-tip"
+              v-if="formItem.tip"
+              v-html="formItem.tip"
+            >
+
+            </div>
+
+          </el-form-item>
+          <component
+            :key='index'
+            v-else-if="formItem.type == 'groupTitle'"
+            :is="formItem._type"
+            :titleStr="formItem.label"
+          />
+          <div
+            id="components"
+            :key='formItem.business'
+            class="component-container"
+            v-if="formItem.business == '888'"
+          >
+            <bank-form-heard :isDia='true'></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'"
+          >
+          </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'"
+          >
+          </el-button> -->
+
+        </template>
+      </template>
+
+      <!-- <template v-for="(formItem, field, index) of formDesc.default"> -->
+      <!-- <el-row type="flex" justify="center" :key='index' v-if="formItem.business == '888' ">
+          <el-col :span="18" class="preview">
+            <bank-form-heard :is="apps"></bank-form-heard>
+          </el-col>
+        </el-row> -->
+      <!-- </template> -->
+
+    </ele-form>
+  </el-dialog>
+</template>
+
+<script>
+import _ from "lodash-es";
+import { mapState } from "vuex";
+import bankFormHeard from "./bankFormHeard";
+
+import { getMenuRouter } from "@/formBuilder/menuConfig";
+import GroupTitle from "../components/GroupTitle";
+import GroupSummary from "../components/GroupSummary";
+import postman from "../components/postman";
+import handleCode from "../components/handleCode";
+import formDep from "../components/formDep";
+import person from "../components/person";
+import linkForm from "../components/linkForm";
+export default {
+  name: "PreviewDialog",
+  components: {
+    bankFormHeard,
+    GroupTitle,
+    GroupSummary,
+    postman,
+    handleCode,
+    formDep,
+    person,
+    linkForm
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    formDesc: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      formData: {},
+      apps: "bankFormHeard"
+    };
+  },
+  computed: {
+    ...mapState(["formAttr", "formBuilder", "selectIndex"]),
+    title() {
+      return this.$store.state.formBuilder.name;
+    },
+    isSubIndex() {
+      return this.selSubIndex != null;
+    },
+    formEndAttr() {
+      const formAttr = _.cloneDeep(this.formAttr);
+      formAttr.isShowSubmitBtn = false;
+      formAttr.isShowBackBtn = false;
+      return formAttr;
+    },
+    formType() {
+      return this.$store.state.formBuilder.type;
+    },
+    isLink() {
+      let flg = false;
+      const _this = this;
+      if (this.formDesc.default) {
+        for (const name in _this.formDesc.default) {
+          if (
+            _this.formDesc.default[name].customMode == 1 &&
+            _this.formDesc.default[name].customValue
+          ) {
+            // _this.formDesc.default[name].default = ""
+            flg = true;
+          }
+        }
+      }
+      return flg;
+    }
+  },
+  watch: {
+    visible() {
+      this.formData = {};
+    },
+    formType: {
+      immediate: true,
+      deep: true,
+      handler: function(newVal) {
+        // const route = getMenuRouter(this.$store.state.formBuilder.menuId);
+        // this.apps =
+        //   newVal == "blank"
+        //     ? "bankFormHeard"
+        //     : // : require("@/" + route + ".vue").default;
+        //     "";
+      }
+    },
+    formDesc: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        const _this = this;
+        _this.$delete(_this.formDesc.default, "business");
+      }
+    },
+    formData: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        const _this = this;
+        if (newVal && _this.isLink) {
+          for (const name in _this.formDesc.default) {
+            if (
+              _this.formDesc.default[name].customMode == 1 &&
+              _this.formDesc.default[name].customValue
+            ) {
+              const func = this.formatFunc(
+                _this.formDesc.default[name].customValue,
+                newVal
+              );
+              _this.formData[name] = func;
+              _this.formDesc.default[name].default = func
+
+
+            }
+          }
+        }
+        _this.$delete(_this.formData, "business");
+      }
+    }
+  },
+  methods: {
+    inputChange(res, numbers, formItem, field) {
+      const vm = this;
+      vm.$set(vm.formData, field, res);
+
+    },
+    dep(res, numbers, formItem, field) {
+      const vm = this;
+
+      vm.$set(vm.formData, [field + "Str"], res);
+    },
+    close() {
+      const vm = this;
+      Object.keys(vm.formData).forEach(key => {
+        vm.formData[key] = "";
+      });
+    },
+    handleRequest(data) {
+      return Promise.resolve(data);
+    },
+    handleRequestSuccess(data) {
+      // this.$message.success('发送成功')
+    },
+    // 根据value转化成function
+    formatFunc(customValue, newVal) {
+      const strReg = new RegExp(/\{key_[0-9]+\}/g);
+      const mackReg = new RegExp(/\{[+,\-,*,/]\}/g);
+      const arr = [];
+      let str = customValue.replace(strReg, function(match) {
+        const filed = match.substring(1, match.length - 1);
+        arr.push(newVal[filed]);
+        return newVal[filed] ? newVal[filed] : "";
+      });
+      str = str.replace(mackReg, function(match) {
+        return " " + match.substring(1, match.length - 1) + " ";
+      });
+      // 判断计算相关节点是不是都是''
+      const flg = arr.filter((item, index) => !!item);
+      if (flg.length > 0) {
+        return new Function("return " + "" + str + "")();
+      } else {
+        return "";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.isSummary {
+  z-index: 2004;
+  cursor: pointer;
+  position: absolute;
+  left: -12px;
+  top: 14px;
+  //   transform: translateY(-50%);
+}
+/deep/ .tables-sub {
+  //   border-top: 1px solid #ebeef5;
+  //   border-right: 1px solid #ebeef5;
+  //   border-bottom: 1px solid #ebeef5;
+  min-height: 80px;
+  width: 100% !important;
+  overflow: auto;
+  max-width: 100% !important;
+  .disoption {
+    &:after {
+      content: " ";
+      display: block;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      position: absolute;
+      z-index: 2;
+      cursor: move;
+    }
+  }
+}
+.preview {
+  /deep/ .section-form-submit {
+    display: none;
+  }
+  /deep/ .el-input {
+    width: 100% !important;
+  }
+  /deep/ .el-form-item {
+    position: relative;
+  }
+  /deep/ .el-autocomplete {
+    width: 100% !important;
+  }
+  /deep/ .el-select {
+    width: 100% !important;
+  }
+  /deep/ .ele-form-upload-file .el-link--inner img {
+    visibility: hidden;
+  }
+}
+</style>