qgb-process 0.2.3 → 0.2.7

package/src/formBuilder/components/app-main/components/main-right/components/form-item-attrs.vue

@@ -1,407 +1,407 @@
-<!--
- * @Author: Yxj
- * @LastEditors: Yxj
- * @Date: 2020-09-25 11:36:41
- * @LastEditTime: 2021-09-07 19:44:30
- * @Description: file content
- * @FilePath: \src\formBuilder\components\app-main\components\main-right\components\form-item-attrs.vue
- TODO: 1.处理关联表单禁止拖入一行两列和一行三列 以及子表  2.处理字段对照时的子表内容和一行两列\一行3列内部的字段
--->
-
-<template>
-  <div>
-    <template v-if="isShow">
-      <ele-form
-        :formData="currentFormItem.attrs"
-        :formDesc="filterFormDesc"
-        :isShowBackBtn="false"
-        :isShowSubmitBtn="false"
-        :span="20"
-        labelPosition="top"
-      >
-
-        <template
-          v-if="currentFormItem.type == 'linkForm'"
-          v-slot:formLink="{ desc, data, field, formData }"
-        >
-          <!-- 如果需要更自由定义表单项，且不需要el-form-item的包裹，可以使用formItem的key加上[-wrapper] -->
-          <!-- 例如：age-wrapper 或者 name-wrapper 等 -->
-          <!-- <el-select
-            v-model="formData.formLink"
-            placeholder="请选择关联表单"
-            filterable
-            @change='formLinkChange'
-          >
-            <el-option
-              v-for="item in formLinkOptions"
-              :key="item.value"
-              :label="item.text"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select> -->
-          <el-cascader
-            :options="formLinkOptions"
-            v-model="formData.formLink"
-            filterable
-            :props="cascaderProps"
-            clearable
-            placeholder="请选择关联表单"
-            @change='formLinkChange'
-          >
-          </el-cascader>
-        </template>
-        <template
-          v-if="currentFormItem.type == 'linkForm'"
-          v-slot:dataRules="{ desc, data, field, formData }"
-        >
-          <!-- 如果需要更自由定义表单项，且不需要el-form-item的包裹，可以使用formItem的key加上[-wrapper] -->
-          <!-- 例如：age-wrapper 或者 name-wrapper 等 -->
-          <el-input
-            :placeholder="'已填充'+ruleDataItemLength+'项'"
-            @focus="dataRulesOpen = true"
-          ></el-input>
-          <el-input
-            style="display:none"
-            v-model="currentFormItem.attrs.dataRules"
-          ></el-input>
-        </template>
-      </ele-form>
-
-    </template>
-    <div
-      class="form-item-placeholder"
-      v-else
-    >
-      从左侧拖拽添加表单项并点选
-    </div>
-      <!-- :before-close="handleClose" -->
-    <el-dialog
-      title="填充规则"
-      :visible.sync="dataRulesOpen"
-      width="50%"
-    >
-      <div class='rulesBody'>
-        <div class="top">
-          <span>选择关联的表单后，将依照下方规则给当前表单填充数据</span>
-        </div>
-        <div class="content">
-          <el-button
-            type="text"
-            @click="addRule"
-          >添加规则</el-button>
-          <div
-            v-for="(item,index) of ruleData"
-            :key='index'
-            class="rulesItem"
-          >
-            <el-select
-              v-model="item.itemRemote"
-              placeholder="关联表单字段"
-              clearable
-              size='small'
-            >
-              <el-option
-                v-for="item in itemRemoteArr"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-            的值填充到
-            <el-select
-              v-model="item.itemSource"
-              placeholder="当前表单字段"
-              clearable
-              size='small'
-            >
-              <el-option
-                v-for="item in itemSourceArr"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-
-            <el-button
-              type="text"
-              style='margin-left:10px;color:red'
-              v-show='index>0'
-              @click="ruleData.splice(index,1)"
-            >删除</el-button>
-          </div>
-        </div>
-      </div>
-
-      <span
-        slot="footer"
-        class="dialog-footer"
-      >
-        <el-button @click="dataRulesOpen = false">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="submit"
-        >确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-
-</template>
-
-<script>
-import { mapGetters, mapMutations } from "vuex";
-import configList from "@/formBuilder/config";
-import { changeFormLabel } from "@/formBuilder/tool.js";
-import SearchMixin from "./components/searchMixin";
-import {
-  queryList,
-  deleteFormDataById,
-  queryFormByMenu,
-  queryListdesign
-} from "@/api/apiFormBuilder/menu.js";
-export default {
-  name: "AppFormItemAttrs",
-  mixins: [SearchMixin],
-  components: {},
-  data() {
-    return {
-      cascaderProps: {
-        value: "id",
-        label: "name",
-        checkStrictly: true,
-        children: "subMenu"
-      },
-      formDesign: [],
-      dataRulesOpen: false,
-      itemSourceArr: [],
-      formLinkOptions: [],
-      itemRemoteArr: [],
-      ruleData: [
-        {
-          itemRemote: "",
-          itemSource: ""
-        }
-      ]
-    };
-  },
-  computed: {
-    ...mapGetters(["currentFormItem"]),
-
-    ruleDataItemLength() {
-      let num = 0;
-      if (this.ruleData) {
-        this.ruleData.forEach((e, i) => {
-          233;
-          if (e.itemRemote != "" && e.itemSource != "") {
-            num++;
-          }
-        });
-      }
-
-      return num;
-    },
-    list() {
-      return this.$store.state.list.default;
-    },
-    isShow() {
-      return this.currentFormItem && this.currentFormItem.attrs;
-    },
-    config() {
-      const type = this.currentFormItem.type.replace("ele-form-", "");
-
-      return configList[type];
-    },
-    attrLink() {
-      return this.config.url;
-    },
-    formDesc() {
-      const vm = this;
-      const type = this.currentFormItem.type.replace("ele-form-", "");
-      const formDesc =
-        this.config && this.config.attrs ? this.config.attrs : {};
-      if (type == "linkForm") {
-        const arr = _.cloneDeep(vm.$store.state.menuList);
-        const arr2 = [];
-        vm.config.attrs.formLink.options = arr;
-
-        arr.forEach((e, i) => {
-          const iterator = data => {
-
-            if (data.subMenu && data.subMenu.length > 0) {
-              data.subMenu.forEach((item, i2) => {
-                if (item.subMenu && item.subMenu.length > 0) {
-                  iterator(item);
-                } else {
-                  delete item.subMenu;
-                }
-              });
-            } else {
-              delete data.subMenu;
-            }
-          };
-          iterator(e);
-        });
-
-        arr.forEach((e, i) => {
-          const iterator = data => {
-            if (data.type == 1 && !data.subMenu) {
-              data.disabled = true;
-              data.disabled = true
-            }
-            if (data.subMenu && data.subMenu.length > 0) {
-              data.subMenu.forEach((item, i2) => {
-                if (item.type == 1 && !item.subMenu) {
-                  item.disabled = true;
-                  data.disabled = true
-                }
-                if (item.subMenu && item.subMenu.length > 0) {
-                  iterator(item);
-                } else {
-                  delete item.subMenu;
-                  console.log("删除了" + item.name + "的submenu", "层级是" + i + "-" + i2);
-                }
-              });
-            } else {
-              delete data.subMenu;
-            }
-          };
-          iterator(e);
-        });
-        // arr = JSON.parse(JSON.stringify(arr).replace(/name/g, "text"));
-        // arr = JSON.parse(JSON.stringify(arr).replace(/id/g, "value"));
-
-        vm.$set(this, "formLinkOptions", arr);
-        // vm.$set(this, "formLinkOptions", arr);
-        if (vm.currentFormItem.attrs && vm.currentFormItem.attrs.formLink) {
-          if (vm.currentFormItem.attrs.dataRules) {
-            vm.$set(vm, "ruleData", vm.currentFormItem.attrs.dataRules);
-          }
-          vm.formLinkChange();
-        } else {
-          vm.$set(vm, "ruleData", [{ itemRemote: "", itemSource: "" }]);
-          vm.$set(vm, "itemRemoteArr", []);
-          vm.$set(vm, "itemSourceArr", []);
-        }
-
-        // arr = JSON.parse(JSON.stringify(arr).replace(/id/g, "value"))
-        console.log(arr, "@@@@@@@@@@@");
-      }
-      return vm.config && vm.config.assistProperty
-        ? changeFormLabel(formDesc, vm.config.assistProperty)
-        : changeFormLabel(formDesc);
-    }
-  },
-  created() {
-    this.initData();
-  },
-  methods: {
-    ...mapMutations(["updateCurrentItem"]),
-    submit() {
-      const vm = this;
-
-      const item = vm.ruleData;
-      const curItemDeep = _.cloneDeep(vm.$store.getters.currentFormItem);
-      curItemDeep.attrs["dataRules"] = vm.ruleData;
-      vm.ruleData.forEach((e, i) => {
-        if (
-          vm.ruleData[i + 1] &&
-          e.itemSource == vm.ruleData[i + 1].itemSource
-        ) {
-          vm.$message.error("当前表单字段对照重复");
-          throw new Error("当前表单字段对照重复");
-        }
-      });
-      vm.updateCurrentItem(curItemDeep);
-      vm.dataRulesOpen = false;
-    },
-
-    initData() {
-      const vm = this;
-      setTimeout(() => {
-        vm.list.forEach((e, i) => {
-          if (
-            e.type == "input" ||
-            e.type == "input-number" ||
-            e.type == "textarea"
-          ) {
-            vm.itemSourceArr.push({ value: e.field, label: e.label });
-          }
-        });
-        if (vm.currentFormItem.attrs && vm.currentFormItem.attrs.formLink) {
-          //   vm.currentFormItem.attrs.dataRules;
-          if (vm.currentFormItem.attrs.dataRules) {
-            vm.$set(vm, "ruleData", vm.currentFormItem.attrs.dataRules);
-          }
-          vm.formLinkChange();
-        }
-      }, 1000);
-    },
-    async formLinkChange() {
-      const vm = this;
-      vm.$set(vm, "itemRemoteArr", []);
-      vm.$set(vm, "itemSourceArr", []);
-      vm.list.forEach((e, i) => {
-        if (
-          e.type == "input" ||
-          e.type == "input-number" ||
-          e.type == "textarea"
-        ) {
-          vm.itemSourceArr.push({ value: e.field, label: e.label });
-        }
-      });
-
-      const { data } = await queryFormByMenu({
-        menuId: this.currentFormItem.attrs.formLink[this.currentFormItem.attrs.formLink.length - 1],
-        companyNo: this.$store.state.user.cno
-      });
-      if (data.state == "ok" && data.data.content) {
-        // this.formId = data.data.id;
-        const formDesc = data.data.content.formDesc;
-        Object.keys(formDesc).forEach(item => {
-          if (formDesc[item].type.indexOf("columns") > -1) {
-            Object.assign(
-              formDesc,
-              _.keyBy(formDesc[item].attrs.columns, "field")
-            );
-          }
-          if (
-            formDesc[item].type == "input" ||
-            formDesc[item].type == "input-number" ||
-            formDesc[item].type == "textarea"
-          ) {
-            vm.itemRemoteArr.push({
-              value: item,
-              label: formDesc[item].label
-            });
-          }
-
-          const newArr = _.uniqBy(vm.itemRemoteArr, function(r) {
-            return r.value;
-          });
-          vm.$set(vm, "itemRemoteArr", newArr);
-        });
-        // this.formDesign = formDesc;
-
-        // this.getList();
-        // this.getConfig();
-      }
-    },
-    addRule() {
-      this.ruleData.push({
-        itemRemote: "",
-        itemSource: ""
-      });
-    },
-    handleClose(done) {}
-  }
-};
-</script>
-
-
-<style lang="scss" scoped>
-.rulesItem {
-  margin-bottom: 15px;
-}
-</style>
+<!--
+ * @Author: Yxj
+ * @LastEditors: Yxj
+ * @Date: 2020-09-25 11:36:41
+ * @LastEditTime: 2021-09-07 19:44:30
+ * @Description: file content
+ * @FilePath: \src\formBuilder\components\app-main\components\main-right\components\form-item-attrs.vue
+ TODO: 1.处理关联表单禁止拖入一行两列和一行三列 以及子表  2.处理字段对照时的子表内容和一行两列\一行3列内部的字段
+-->
+
+<template>
+  <div>
+    <template v-if="isShow">
+      <ele-form
+        :formData="currentFormItem.attrs"
+        :formDesc="filterFormDesc"
+        :isShowBackBtn="false"
+        :isShowSubmitBtn="false"
+        :span="20"
+        labelPosition="top"
+      >
+
+        <template
+          v-if="currentFormItem.type == 'linkForm'"
+          v-slot:formLink="{ desc, data, field, formData }"
+        >
+          <!-- 如果需要更自由定义表单项，且不需要el-form-item的包裹，可以使用formItem的key加上[-wrapper] -->
+          <!-- 例如：age-wrapper 或者 name-wrapper 等 -->
+          <!-- <el-select
+            v-model="formData.formLink"
+            placeholder="请选择关联表单"
+            filterable
+            @change='formLinkChange'
+          >
+            <el-option
+              v-for="item in formLinkOptions"
+              :key="item.value"
+              :label="item.text"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select> -->
+          <el-cascader
+            :options="formLinkOptions"
+            v-model="formData.formLink"
+            filterable
+            :props="cascaderProps"
+            clearable
+            placeholder="请选择关联表单"
+            @change='formLinkChange'
+          >
+          </el-cascader>
+        </template>
+        <template
+          v-if="currentFormItem.type == 'linkForm'"
+          v-slot:dataRules="{ desc, data, field, formData }"
+        >
+          <!-- 如果需要更自由定义表单项，且不需要el-form-item的包裹，可以使用formItem的key加上[-wrapper] -->
+          <!-- 例如：age-wrapper 或者 name-wrapper 等 -->
+          <el-input
+            :placeholder="'已填充'+ruleDataItemLength+'项'"
+            @focus="dataRulesOpen = true"
+          ></el-input>
+          <el-input
+            style="display:none"
+            v-model="currentFormItem.attrs.dataRules"
+          ></el-input>
+        </template>
+      </ele-form>
+
+    </template>
+    <div
+      class="form-item-placeholder"
+      v-else
+    >
+      从左侧拖拽添加表单项并点选
+    </div>
+      <!-- :before-close="handleClose" -->
+    <el-dialog
+      title="填充规则"
+      :visible.sync="dataRulesOpen"
+      width="50%"
+    >
+      <div class='rulesBody'>
+        <div class="top">
+          <span>选择关联的表单后，将依照下方规则给当前表单填充数据</span>
+        </div>
+        <div class="content">
+          <el-button
+            type="text"
+            @click="addRule"
+          >添加规则</el-button>
+          <div
+            v-for="(item,index) of ruleData"
+            :key='index'
+            class="rulesItem"
+          >
+            <el-select
+              v-model="item.itemRemote"
+              placeholder="关联表单字段"
+              clearable
+              size='small'
+            >
+              <el-option
+                v-for="item in itemRemoteArr"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            的值填充到
+            <el-select
+              v-model="item.itemSource"
+              placeholder="当前表单字段"
+              clearable
+              size='small'
+            >
+              <el-option
+                v-for="item in itemSourceArr"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <el-button
+              type="text"
+              style='margin-left:10px;color:red'
+              v-show='index>0'
+              @click="ruleData.splice(index,1)"
+            >删除</el-button>
+          </div>
+        </div>
+      </div>
+
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="dataRulesOpen = false">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="submit"
+        >确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import configList from "@/formBuilder/config";
+import { changeFormLabel } from "@/formBuilder/tool.js";
+import SearchMixin from "./components/searchMixin";
+import {
+  queryList,
+  deleteFormDataById,
+  queryFormByMenu,
+  queryListdesign
+} from "@/api/apiFormBuilder/menu.js";
+export default {
+  name: "AppFormItemAttrs",
+  mixins: [SearchMixin],
+  components: {},
+  data() {
+    return {
+      cascaderProps: {
+        value: "id",
+        label: "name",
+        checkStrictly: true,
+        children: "subMenu"
+      },
+      formDesign: [],
+      dataRulesOpen: false,
+      itemSourceArr: [],
+      formLinkOptions: [],
+      itemRemoteArr: [],
+      ruleData: [
+        {
+          itemRemote: "",
+          itemSource: ""
+        }
+      ]
+    };
+  },
+  computed: {
+    ...mapGetters(["currentFormItem"]),
+
+    ruleDataItemLength() {
+      let num = 0;
+      if (this.ruleData) {
+        this.ruleData.forEach((e, i) => {
+          233;
+          if (e.itemRemote != "" && e.itemSource != "") {
+            num++;
+          }
+        });
+      }
+
+      return num;
+    },
+    list() {
+      return this.$store.state.list.default;
+    },
+    isShow() {
+      return this.currentFormItem && this.currentFormItem.attrs;
+    },
+    config() {
+      const type = this.currentFormItem.type.replace("ele-form-", "");
+
+      return configList[type];
+    },
+    attrLink() {
+      return this.config.url;
+    },
+    formDesc() {
+      const vm = this;
+      const type = this.currentFormItem.type.replace("ele-form-", "");
+      const formDesc =
+        this.config && this.config.attrs ? this.config.attrs : {};
+      if (type == "linkForm") {
+        const arr = _.cloneDeep(vm.$store.state.menuList);
+        const arr2 = [];
+        vm.config.attrs.formLink.options = arr;
+
+        arr.forEach((e, i) => {
+          const iterator = data => {
+
+            if (data.subMenu && data.subMenu.length > 0) {
+              data.subMenu.forEach((item, i2) => {
+                if (item.subMenu && item.subMenu.length > 0) {
+                  iterator(item);
+                } else {
+                  delete item.subMenu;
+                }
+              });
+            } else {
+              delete data.subMenu;
+            }
+          };
+          iterator(e);
+        });
+
+        arr.forEach((e, i) => {
+          const iterator = data => {
+            if (data.type == 1 && !data.subMenu) {
+              data.disabled = true;
+              data.disabled = true
+            }
+            if (data.subMenu && data.subMenu.length > 0) {
+              data.subMenu.forEach((item, i2) => {
+                if (item.type == 1 && !item.subMenu) {
+                  item.disabled = true;
+                  data.disabled = true
+                }
+                if (item.subMenu && item.subMenu.length > 0) {
+                  iterator(item);
+                } else {
+                  delete item.subMenu;
+                  console.log("删除了" + item.name + "的submenu", "层级是" + i + "-" + i2);
+                }
+              });
+            } else {
+              delete data.subMenu;
+            }
+          };
+          iterator(e);
+        });
+        // arr = JSON.parse(JSON.stringify(arr).replace(/name/g, "text"));
+        // arr = JSON.parse(JSON.stringify(arr).replace(/id/g, "value"));
+
+        vm.$set(this, "formLinkOptions", arr);
+        // vm.$set(this, "formLinkOptions", arr);
+        if (vm.currentFormItem.attrs && vm.currentFormItem.attrs.formLink) {
+          if (vm.currentFormItem.attrs.dataRules) {
+            vm.$set(vm, "ruleData", vm.currentFormItem.attrs.dataRules);
+          }
+          vm.formLinkChange();
+        } else {
+          vm.$set(vm, "ruleData", [{ itemRemote: "", itemSource: "" }]);
+          vm.$set(vm, "itemRemoteArr", []);
+          vm.$set(vm, "itemSourceArr", []);
+        }
+
+        // arr = JSON.parse(JSON.stringify(arr).replace(/id/g, "value"))
+        console.log(arr, "@@@@@@@@@@@");
+      }
+      return vm.config && vm.config.assistProperty
+        ? changeFormLabel(formDesc, vm.config.assistProperty)
+        : changeFormLabel(formDesc);
+    }
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    ...mapMutations(["updateCurrentItem"]),
+    submit() {
+      const vm = this;
+
+      const item = vm.ruleData;
+      const curItemDeep = _.cloneDeep(vm.$store.getters.currentFormItem);
+      curItemDeep.attrs["dataRules"] = vm.ruleData;
+      vm.ruleData.forEach((e, i) => {
+        if (
+          vm.ruleData[i + 1] &&
+          e.itemSource == vm.ruleData[i + 1].itemSource
+        ) {
+          vm.$message.error("当前表单字段对照重复");
+          throw new Error("当前表单字段对照重复");
+        }
+      });
+      vm.updateCurrentItem(curItemDeep);
+      vm.dataRulesOpen = false;
+    },
+
+    initData() {
+      const vm = this;
+      setTimeout(() => {
+        vm.list.forEach((e, i) => {
+          if (
+            e.type == "input" ||
+            e.type == "input-number" ||
+            e.type == "textarea"
+          ) {
+            vm.itemSourceArr.push({ value: e.field, label: e.label });
+          }
+        });
+        if (vm.currentFormItem.attrs && vm.currentFormItem.attrs.formLink) {
+          //   vm.currentFormItem.attrs.dataRules;
+          if (vm.currentFormItem.attrs.dataRules) {
+            vm.$set(vm, "ruleData", vm.currentFormItem.attrs.dataRules);
+          }
+          vm.formLinkChange();
+        }
+      }, 1000);
+    },
+    async formLinkChange() {
+      const vm = this;
+      vm.$set(vm, "itemRemoteArr", []);
+      vm.$set(vm, "itemSourceArr", []);
+      vm.list.forEach((e, i) => {
+        if (
+          e.type == "input" ||
+          e.type == "input-number" ||
+          e.type == "textarea"
+        ) {
+          vm.itemSourceArr.push({ value: e.field, label: e.label });
+        }
+      });
+
+      const { data } = await queryFormByMenu({
+        menuId: this.currentFormItem.attrs.formLink[this.currentFormItem.attrs.formLink.length - 1],
+        companyNo: this.$store.state.user.cno
+      });
+      if (data.state == "ok" && data.data.content) {
+        // this.formId = data.data.id;
+        const formDesc = data.data.content.formDesc;
+        Object.keys(formDesc).forEach(item => {
+          if (formDesc[item].type.indexOf("columns") > -1) {
+            Object.assign(
+              formDesc,
+              _.keyBy(formDesc[item].attrs.columns, "field")
+            );
+          }
+          if (
+            formDesc[item].type == "input" ||
+            formDesc[item].type == "input-number" ||
+            formDesc[item].type == "textarea"
+          ) {
+            vm.itemRemoteArr.push({
+              value: item,
+              label: formDesc[item].label
+            });
+          }
+
+          const newArr = _.uniqBy(vm.itemRemoteArr, function(r) {
+            return r.value;
+          });
+          vm.$set(vm, "itemRemoteArr", newArr);
+        });
+        // this.formDesign = formDesc;
+
+        // this.getList();
+        // this.getConfig();
+      }
+    },
+    addRule() {
+      this.ruleData.push({
+        itemRemote: "",
+        itemSource: ""
+      });
+    },
+    handleClose(done) {}
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.rulesItem {
+  margin-bottom: 15px;
+}
+</style>