@zhijiancloud/bpm 0.0.5 → 0.0.7

package/components/lib/bpmField/src/main.vue

@@ -2,17 +2,18 @@
   <component
     v-if="curComponent"
     class="bpm-field"
+    ref="inner-component"
     v-model="curVal"
     :is="curComponent"
     :type="type"
     :fieldConf="fieldConf"
     :row="row"
-    :mode="mode"
+    :mode="fieldMode"
     :uiType="uiType"
     :formDefId="formDefId"
     :orgInfo="orgInfo"
     :clearable="clearable"
-    :disabled="disabled"
+    :disabled="fieldDisabled"
     :isMultiple="isMul"
     v-bind="$attrs" 
     v-on="$listeners"
@@ -20,154 +21,11 @@
   </component>
 </template>
 <script>
-import _ from "lodash";
-import BpmText from "../../bpmText";
-import BpmSelect from "../../bpmSelect";
-import BpmTime from "../../bpmTime";
-import BpmNumber from "../../bpmNumber";
-import BpmDateTime from "../../bpmDateTime";
-import BpmMulFile from "../../bpmMulFile";
-import BpmSelectCheckItem from "../../bpmSelectCheckItem";
-import BpmSelectFromField from "../../bpmSelectFromField";
-import BpmMulImage from "../../bpmMulImage";
-import BpmSelectFromForm from "../../bpmSelectFromForm";
-import BpmSelectFromId from "../../bpmSelectFromId";
-import BpmSubForm from '../../bpmSubForm';
 
-const bpmComponents = {
-  BpmText,
-  BpmSelect,
-  BpmTime,
-  BpmNumber,
-  BpmDateTime,
-  BpmMulFile,
-  BpmSelectCheckItem,
-  BpmSelectFromField,
-  BpmMulImage,
-  BpmSelectFromForm,
-  BpmSelectFromId,
-  BpmSubForm,
-  'BpmSignature': BpmMulImage,
-  'BpmSerialNumber': BpmText,
-  'BpmDate': BpmDateTime,
-  'BpmTextArea': BpmText,
-  'BpmMulSelect': BpmSelect,
-  'BpmStatus': BpmSelect,
-  'BpmMulImg': BpmMulFile,
-  'BpmMulSelectCheckItem': BpmSelectCheckItem,
-  'BpmMulSelectFromField': BpmSelectFromField,
-  'BpmSelectUser': BpmSelectFromField,
-  'BpmMulSelectUser': BpmSelectFromField,
-  'BpmSelectPartner': BpmSelectFromField,
-  'BpmMulSelectPartner': BpmSelectFromField,
-  'BpmSelectProject': BpmSelectFromField,
-  'BpmMulSelectProject': BpmSelectFromField,
-  'BpmSelectOrg': BpmSelectFromField,
-  'BpmMulSelectOrg': BpmSelectFromField,
-  'BpmMulSelectFromForm': BpmSelectFromForm,
-  'BpmMulSelectFromId': BpmSelectFromId,
-  'BpmMulSelectUrUser': BpmSelectFromField,
-  'BpmSelectUrUser': BpmSelectFromField,
-  'BpmSelectRootCategory': BpmSelectFromField,
-  'BpmMulSelectSort': BpmSelectCheckItem,
-  'BpmSelectSort': BpmSelectCheckItem,
-  'BpmXSubForm': BpmSubForm,
-  'BpmOrderSubform': BpmSubForm
-};
+import fieldBaseMixin from "../../../mixins/field_base_mixin.vue"
 
 export default {
   name: "BpmField",
-  components: bpmComponents,
-  props: {
-    value: {
-      type: [String, Array, Number, Object],
-      
-    },
-    type: {
-      type: String,
-      default: 'Text'
-    },
-    fieldConf: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    row: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    mode: {
-      type: String,
-      default: 'view' // view, edit
-    },
-    uiType: {
-      type: String,
-      default: 'default' // default,table,form,search
-    },
-    formDefId: {
-      type: String,
-      default: ''
-    },
-    orgInfo: {
-      type: Object,
-      default () {
-        return {
-          level: 'group', // group,team,project
-          level_id: 0,
-          group_id: 0
-        }
-      }
-    },
-    clearable: { // 仅对mode=edit有效
-      type: Boolean,
-      default: false
-    },
-    disabled: { // 仅对mode=edit有效
-      type: Boolean,
-      default: false
-    },
-    isMultiple: {
-      type: Boolean,
-      default() {
-        return false;
-      },
-    }
-  },
-  data () {
-    return {
-      curVal: ""
-    }
-  },
-  watch: {
-    curVal(val){
-      this.$emit("input", val)
-      this.$emit("change", val)
-    },
-    value(){
-      this.curVal = this.value
-    }
-  },
-  computed: {
-    curComponent() {
-      let componentType = _.get(this.fieldConf, "type");
-      if (!bpmComponents[`Bpm${componentType}`]) return
-      return `Bpm${componentType}`;
-    },
-    componentType(){
-      return _.get(this.fieldConf, "type")
-    },
-    isMul() {
-      let type = this.componentType
-      let isContainMul = type && type.indexOf("Mul") > -1;
-      return this.isMultiple || isContainMul
-    },
-  },
-  mounted () {
-    this.curVal = this.value
-    this.$bpm.orgInfo = this.orgInfo
-  }
+  mixins:[fieldBaseMixin]
 };
 </script>

package/components/lib/bpmFieldsFilter/index.js

@@ -0,0 +1,7 @@
+import BpmFieldsFilter from './src/main.vue'
+
+BpmFieldsFilter.install = function(Vue) {
+    Vue.component(BpmFieldsFilter.name , BpmFieldsFilter);
+}
+
+export default BpmFieldsFilter

package/components/lib/bpmFieldsFilter/src/main.vue

@@ -0,0 +1,324 @@
+<template>
+<div class="search-board">
+  <el-form ref="form" label-width="150px" :inline="false">
+    <el-form-item v-for="searchField in pElements" :key="searchField.id" :label="searchField.name">
+      <bpm-field
+        v-model="formData[searchField.id]"
+        :type="searchField.type"
+        :field-conf="searchField"
+        :form-name="formDefId"
+        :form-def-id="formDefId"
+        :orgInfo="orgInfo"
+        mode="edit"
+        ui-type="search"
+      ></bpm-field>
+    </el-form-item>
+    <template v-for="searchField in gridElements">
+      <el-form-item v-show="showAllSearchItem || index < showDefaultCount" :key="searchField.id" :label="searchField.name">
+        <bpm-field
+          v-model="formData[searchField.id]"
+          :type="searchField.type"
+          :field-conf="searchField"
+          :form-name="formDefId"
+          :form-def-id="formDefId"
+          :orgInfo="orgInfo"
+          mode="edit"
+          ui-type="search"
+        ></bpm-field>
+      </el-form-item>
+    </template>
+  </el-form>
+
+  <!-- 操作按钮区域 -->
+  <slot></slot>
+</div>
+</template>
+
+<script>
+import { Algorithm } from "@antv/g6";
+import Ajv from 'ajv'
+
+const ajv = new Ajv({
+  useDefaults: true,
+  coerceTypes: true,
+  allErrors: true,
+  jsonPointers: true,
+  errorDataPath: true
+})
+
+export default {
+  name: 'BpmFieldsFilter',
+  props: {
+    searchSchema: { // 接口返回 definition.search
+      type: Object,
+      default () {
+        return {
+          elements: []
+        }
+      }
+    },
+    verifySchema: { // 接口返回 schema.search
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    orgInfo: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    formDefId: {
+      type: String,
+      default: ''
+    },
+    //是否全部显示
+    showAll: {
+      type: Boolean,
+      default: false,
+    },
+    //默认显示个数
+    showDefaultCount: {
+      type: Number,
+      default: 6,
+    },
+    queryExclude: { // 是否排除全文搜索，有些场景要把搜索单独拿出来，筛选需要点开，如 MulSelectEntranceForm
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      formData: {},
+      formErrors: {},
+      elementIdList: [],
+      eleMap: {},
+      relyGraphData: {
+        nodes: [],
+        edges: [],
+      },
+    }
+  },
+  computed: {
+    formatedSchema () {
+      const searchSchema = this.searchSchema || {}
+      const verifySchemaDef = this.verifySchema
+      let searchVerifySchema = null
+      try {
+        searchVerifySchema = ajv.compile(verifySchemaDef)
+      } catch (err) {
+        console.error(`构建VerifySchema出错`, err)
+      }
+
+      return {
+        elements: searchSchema.elements || [],
+        verifySchema: searchVerifySchema
+      }
+    },
+    enableSearchText () {
+      const searchSchema = this.searchSchema || {}
+      const searchElm = searchSchema.elements ? _.find(searchSchema.elements, { id: 'q__contains' }) : false
+      return searchSchema.enable_search_text && searchElm
+    },
+    gridElements() {
+      const searchSchema = this.searchSchema || {}
+      if (!searchSchema.elements) return []
+      return searchSchema.elements.filter(element => {
+        return !(element.type === 'MulSelect' && element.style === 'button') &&
+          !(this.queryExclude && element.id === 'q__contains')
+      })
+    },
+    pElements () {
+      const searchSchema = this.searchSchema || {}
+      if (!searchSchema.elements) return []
+      return searchSchema.elements.filter(element => {
+        return element.type === 'MulSelect' && element.style === 'button'
+      })
+    },
+    showAllSearchItem: {
+      get () {
+        return this.showAll
+      },
+      set () {}
+    }
+  },
+  mounted() {
+    this.$emit("beforeDataLoad");
+    this.penetrationZList = [];
+    this.relyArr = [];
+    this.addStackArr(this.searchSchema.elements);
+    this.createTopoGraph(this.searchSchema.elements);
+    _.each(this.penetrationZList, (penetrationZ) => {
+      this.relyGraphData.edges.push({
+        source: "bpmListSearch",
+        target: penetrationZ,
+      });
+    });
+    this.$emit("dataLoaded");
+
+    let { relyHandleList, firstId } = this.getRelyHandleList("bpmListSearch");
+    this.relyHandleList = relyHandleList;
+    if (_.isEmpty(this.relyHandleList)) {
+      this.$bpm.$emit("initRelyComplete", this);
+    }
+    if (firstId) {
+      this.$bpm.$emit("handeInitRely", {
+        id: firstId,
+      });
+    }
+  },
+  methods: {
+    reset() {
+      this.formData = {};
+    },
+    search() {
+      this.submit();
+    },
+    async submit() {
+      let errors = await this.$bpm.handleVerifySchema({
+        mode: "list",
+        data: this.formData,
+        verifySchema: this.formatedSchema.verifySchema,
+      });
+      this.formErrors = errors;
+      console.log("errors", errors);
+      if (errors) return;
+      
+      let formData = this.formData;
+      formData = _.pickBy(formData, (val, key) => {
+        return val != "";
+      });
+      this.$emit("search", formData)
+
+      return formData
+    },
+
+    handleNextRely(rowIndex) {
+      this.relyHandleList.shift();
+      if (_.isEmpty(this.relyHandleList)) {
+        this.$bpm.$emit("initRelyComplete", this);
+      }
+      let id = _.head(this.relyHandleList);
+      if (id) {
+        this.$bpm.$emit("handeInitRely", {
+          id,
+          rowIndex,
+        });
+      }
+    },
+    handleRelyById(id, rowIndex) {
+      let { relyHandleList, firstId } = this.getRelyHandleList(id);
+      this.relyHandleList = relyHandleList;
+      if (firstId) {
+        this.$bpm.$emit("handeRelyById", {
+          id: firstId,
+          rowIndex,
+        });
+      }
+    },
+    handleNextRelyById(rowIndex) {
+      this.relyHandleList.shift();
+      if (_.isEmpty(this.relyHandleList)) {
+        this.$bpm.$emit("initRelyComplete", this);
+      }
+      let id = _.head(this.relyHandleList);
+      if (id) {
+        this.$bpm.$emit("handeRelyById", {
+          id,
+          rowIndex,
+        });
+      }
+    },
+    getRelyHandleList(id) {
+      //根据拓扑图的顺序触发初始的默认值、联动、范围拉取
+      let relyHandleList = [];
+      const { breadthFirstSearch } = Algorithm;
+      let firstId = null;
+      breadthFirstSearch(this.relyGraphData, id, {
+        enter: ({ current, previous }) => {},
+        leave: ({ current, previous }) => {
+          if (!firstId && current != id) {
+            firstId = current;
+          }
+          if (current != id) {
+            relyHandleList.push(current);
+          }
+        },
+      });
+      return {
+        relyHandleList,
+        firstId,
+      };
+    },
+    addStackArr(elements, parentId) {
+      _.each(elements, (elem) => {
+        if (parentId) _.set(elem, "parentId", parentId);
+        _.set(this.eleMap, elem.id, elem);
+        this.elementIdList.push(elem.id);
+        let valDependIds = _.get(elem, "linkage.depends", []);
+        let scopeDependIds = _.get(elem, "scope.depends", []);
+        let selectDependIds = _.get(elem, "range_remote.depends", []);
+        let dependIds = _.concat(valDependIds, scopeDependIds);
+        dependIds = _.concat(dependIds, selectDependIds);
+        if (!parentId)
+          this.penetrationZList = _.concat(this.penetrationZList, dependIds);
+        if (elem.elements) {
+          this.addStackArr(elem.elements, elem.id);
+        }
+      });
+    },
+    createTopoGraph(elements) {
+      _.each(elements, (elem) => {
+        let valDependIds = _.get(elem, "linkage.depends", []);
+        let scopeDependIds = _.get(elem, "scope.depends", []);
+        let selectDependIds = _.get(elem, "range_remote.depends", []);
+        let dependIds = _.concat(valDependIds, scopeDependIds);
+        dependIds = _.concat(dependIds, selectDependIds);
+        let _dependIds = _.cloneDeep(dependIds);
+        let curElem = _.get(this.eleMap, elem.id);
+        _.each(_dependIds, (dependId) => {
+          let dependElem = _.get(this.eleMap, dependId);
+
+          if (!dependElem) {
+            _.pullAll(dependIds, [dependId]);
+            dependIds = _.cloneDeep(dependIds);
+          }
+        });
+        if (dependIds.length || curElem.parentId) {
+          let result = _.pullAll(this.penetrationZList, [elem.id]);
+          this.penetrationZList = _.cloneDeep(result);
+        }
+        _.each(dependIds, (dependId) => {
+          if (dependId && elem.id && _.includes(this.elementIdList, dependId)) {
+            let dependElem = _.get(this.eleMap, dependId);
+            // if(!dependElem && !curElem) return
+            if (!dependElem) return;
+            if (dependElem.parentId && !curElem.parentId)
+              dependId = dependElem.parentId; //依赖的是子表单中的某个字段。则替换成依赖整个子表单
+            let target =
+              curElem.parentId && !dependElem.parentId
+                ? curElem.parentId
+                : curElem.id;
+            if (dependElem.parentId && curElem.parentId) return;
+            this.relyArr.push([dependId, target]);
+            this.relyGraphData.nodes.push(elem);
+            this.relyGraphData.nodes.push(dependElem);
+            this.relyGraphData.edges.push({
+              source: dependId,
+              target: target,
+            });
+          }
+        });
+        if (elem.elements) {
+          this.createTopoGraph(elem.elements);
+        }
+      });
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

package/components/lib/bpmFormField/index.js

@@ -0,0 +1,7 @@
+import BpmFormField from './src/main.vue'
+
+BpmFormField.install = function(Vue) {
+    Vue.component(BpmFormField.name , BpmFormField);
+}
+
+export default BpmFormField