@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnAdvancedFilter/index.vue

@@ -0,0 +1,345 @@
+<!--
+  @Auther:辛巴
+  @Date:2023/5/26
+  @Description:小程序高级功能，规则配置通用组件,目前暂不支持的组件有：日期区间、收寄信息
+  @change：触发change事件发送事件上报返回{type,target,value}
+           type,data
+           @param {String} type change事件触发的位置,有以下四种
+           changeColumn：选择组件，
+           changeSearch：计算条件变化，
+           changeValueType：value类型发生变化，
+           changeValue：value发生变化
+           @param {Object} target change事件触发时的变动数据
+           @param {Object} value change事件触发时条件的value
+  @VERSION:1.0-->
+<template>
+  <div class="bnAdvance clearFix">
+    <div class="bnAdvance-setting">
+      <div class="bnAdvance-setting-left" :class="{'bnAdvance-setting-left-min':allowDel}">
+        <!--选择组件-->
+        <slot name="selectComponent">
+          <div class="bnAdvance-setting-column" v-if="!allowSelectColumn" :title="ruleVal[optionProps.name]">
+            {{ ruleVal[optionProps.name] }}
+          </div>
+          <BnDrop v-else v-model="ruleVal[optionProps.id]" @change="columnChange"
+                  :options="columnList" :optionProps="{value:optionProps.id,label:optionProps.name}"
+                  :labelInValue="false"/>
+        </slot>
+        <!--设置条件-->
+        <BnDrop @change="searchChange" v-if="allowSearchType" v-model="ruleVal[optionProps.searchType]"
+                :options="searchOptions" :labelInValue="false" :canUncheck="false"></BnDrop>
+      </div>
+      <!--删除按钮-->
+      <div class="bnAdvance-del" v-if="allowDel" @click="del">
+        <span class="bnUIcon bnUIcon-delete"></span>
+      </div>
+    </div>
+    <!--设置详细条件-->
+    <div class="bnAdvance-condition">
+      <BnCondVal v-model="ruleVal" :optionProps="optionProps" @onChange="valueChange"
+                 :columnInfo="columnInfo" :postFunc="postFunc"></BnCondVal>
+    </div>
+  </div>
+</template>
+<script>
+import {cloneDeep} from 'lodash';
+import {searchList} from "./util";
+import BnCondVal from "../BnCondVal/BnCondVal.vue";
+
+export default {
+  name: "BnAdvancedFilter",
+  components: {BnCondVal},
+  props: {
+    //最终选中的value
+    modelValue: [String, Array, Number, Object],
+    // 当传入完整组件数据时，将不会再遍历columnList去取值。
+    columnData: Object,
+    // 组件列表：可供选择的组件列表，仅支持一维数组。请传入符合班牛业务的组件对象汇总的数组。
+    columnList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    //是否允许选择组件
+    allowSelectColumn: Boolean,
+    //是否允许选择筛选条件
+    allowSearchType: {
+      type: Boolean,
+      default: true
+    },
+    //是否允许删除
+    allowDel: {
+      type: Boolean,
+      default: true
+    },
+    // 每个组件类型都会有自己的计算规则列表，也就是等于、不等于、包含、不包含这类条件。我们提供一组默认的计算规则条件，但是也同样欢迎你自定义自己的计算类型
+    // 你可以传入一个map对象 {1:[{title:'等于'，id:1}]},这样，你就把行为类型为1的组件的计算规则设置为，只能选择等于。当然你可以根据行为类型来自定义更多组件的计算类型
+    // 比如{1:[{title:'等于'，id:1}],2:[{title:'包含'，id:3}，{title:'不包含'，id:4}]}
+    searchTypes: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    //有时候可能你需要更加自由的searchTypes定义，比如你想根据一个组件的id或者key这些字段，为他设置特殊的计算条件，这个时候我们提供了searchTypeFun方法。
+    //在这个方法中我们会告诉你现在选中的组件的信息以及当前规则条件的值，你可以根据这个组件的任何字段进行判断，返回一个数组[]，我们将会把这个数组作为计算条件的列表进行展示。如果你判断出来
+    //这个组件不需要进行特殊计算条件，你可以返回false。这样我们将采用默认计算条件，或者你传入的searchTypc。
+    //searchTypes和searchTypeFun是可以组合使用的，他们的优先级为：默认计算条件<searchTypes<searchTypeFun，后者的权重大于前者，当后者找不到匹配项，会自动向上寻找
+    searchTypeFun: Function,
+    // value的键值基础结构  relationValue  behaviorType 这两个是固定的，不可更改 subType:日期组件可以使用子类型:0-今天,1-明天,2-昨天,3-过去N天,4-未来N天,5-指定时间
+    optionProps: {
+      default() {
+        return {
+          id: 'columnCode',// 主键
+          name: 'name',//当前组件名字
+          parentCode: 'parentCode',//如果当前组件是子表单内组件，那么拥有父级id
+          searchType: 'searchType',//计算条件
+          value: 'value',//条件值
+        };
+      }
+    },
+    postFunc: Function,
+  },
+  data() {
+    return {
+      //计算条件列表
+      searchList: searchList,
+      //多行文本获取焦点
+      openInput: false,
+    }
+  },
+  computed: {
+    // 组件的主key
+    columnKey() {
+      return this.optionProps.id;
+    },
+    //拷贝value的值，这样就可以避免直接修改props
+    ruleVal: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+    // 组件详细信息
+    columnInfo: {
+      get() {
+        let columnDefault = {
+          parentCode: "",
+          ...this.modelValue,
+          extraInfo: {},
+          moduleDefinition: [],
+        }
+        if (this.columnData) {
+          return {...columnDefault, ...this.columnData}
+        } else if (this.modelValue[this.columnKey] && this.columnList.length > 0) {
+          let column = null;
+          for (let i in this.columnList) {
+            if (this.columnList[i][this.columnKey] == this.modelValue[this.columnKey]) {
+              column = JSON.parse(JSON.stringify(this.columnList[i]));
+              break;
+            }
+          }
+          return column || columnDefault;
+        } else {
+          return columnDefault
+        }
+      },
+      set(val) {
+        return val;
+      },
+    },
+    // 规则中的计算设置条件
+    searchOptions() {
+      return this.getSearchOptions()
+    },
+  },
+  methods: {
+    /**
+     * 选择组件发生变化,当组件发生了变化，后续的行为都要进行初始化
+     * @param {Any} e select发生变化返回的值
+     * */
+    columnChange(e) {
+      let column = this.columnList.filter(i => i[this.columnKey] == e)
+      this.columnInfo = column[0] || {};
+      let value = cloneDeep(this.modelValue);
+      value.behaviorType = this.columnInfo.behaviorType;
+      if (this.optionProps.name) {
+        value[this.optionProps.name] = this.columnInfo.name;
+      }
+      if (this.optionProps.parentCode && this.columnInfo.parentCode) {
+        value[this.optionProps.parentCode] = this.columnInfo.parentCode;
+      }
+      value[this.optionProps.searchType] = this.getSearchOptions(value.behaviorType)[0].id;
+      value[this.optionProps.value] = this.setValType(value.behaviorType, value[this.optionProps.searchType])
+      this.$emit('input', value)
+      this.$emit('update:value', value)
+      this.$emit('change', {type: 'columnChange', target: this.columnInfo, value: value})
+    },
+    /**
+     * 计算条件发生change
+     * */
+    searchChange() {
+      // 根据组件类型、计算条件、值类型来确定规则条件的value的类型
+      this.ruleVal[this.optionProps.value] = this.setValType(this.ruleVal.behaviorType, this.ruleVal[this.optionProps.searchType])
+      this.$emit('searchChange', {
+        type: 'changeSearch',
+        target: this.ruleVal[this.optionProps.searchType],
+        value: this.ruleVal
+      })
+    },
+    /**
+     * 规则的value发生变化
+     * */
+    valueChange(target) {
+      this.$emit('valueChange', {
+        type: 'value',
+        target: target,
+        value: this.ruleVal
+      })
+    },
+    /**
+     * 获取该类型组件支持那些计算条件
+     * @param {Number} behaviorType 组件行为类型
+     * */
+    getSearchOptions(behaviorType) {
+      let optionList = [];
+      let behavior = behaviorType || this.columnInfo.behaviorType
+      // 先确定是否选择过组件，拥有组件类型
+      if (behavior) {
+        //判断是否有自定义searchTypeFun方法，如果有优先走这个方法
+        if (this.searchTypeFun) {
+          optionList = this.searchTypeFun(this.columnInfo)
+        }
+        //searchTypeFun有可能返回false或者空数组，如果走到这里optionList仍然是空，就走另外两个逻辑
+        if (!optionList || optionList.length == 0) {
+          // 先取searchTypes中的值，这个自定义传入的列表权重更高，取不到再取默认值
+          optionList = this.searchTypes[behavior] || this.searchList[behavior];
+        }
+      }
+      return optionList;
+    },
+    /**
+     * 给组件value赋予默认类型
+     * @param {Number} behaviorType 组件行为类型
+     * @param {String} searchType 规则的计算条件类型：等于、包含、大于、包含任一项等
+     * */
+    setValType(behaviorType, searchType) {
+      let data = '';
+      //当组件是1，2，9，11时，不需要处理，不管searchType是多少value默认值都是空字符‘’
+      switch (behaviorType) {
+        case 2://数值
+        case 7://日期
+        case 9://评分
+        {
+          if (searchType == '8') {
+            data = {start: '', end: ''};
+          }
+          break;
+        }
+        case 8://日期区间
+        {
+          if (searchType == '3' || searchType == '4') {
+            data = "";
+          } else {
+            data = {start: '', end: ''};
+          }
+          break;
+        }
+          //当组件时单选、下拉组件时，需要根据searchType判断value的类型
+        case 3:
+        case 4: {
+          //当计算条件是等于、不等于、为空、不为空时，值都是空对象
+          if ((!searchType || ['1', '2', '9', '10'].includes(searchType))) {
+            data = {}
+          } else {
+            data = []
+          }
+          break;
+        }
+          //当组件是多选、联动、地址时，不管searchType是多少value默认值都是空数组[]
+        case 5:
+        case 6:
+        case 20: {
+          data = [];
+          break;
+        }
+        case 14:
+        case 15: {
+          data = this.columnInfo.value
+          break;
+        }
+      }
+      return data;
+    },
+    /**
+     * 删除
+     * */
+    del() {
+      this.$emit('del', {
+        type: 'delete',
+        value: this.ruleVal
+      })
+    },
+  },
+}
+</script>
+
+<style scoped>
+@import "./../font/iconfont.css";
+
+.bnAdvance {
+  position: relative;
+  width: 100%;
+}
+
+.bnAdvance-setting {
+  position: relative;
+  float: left;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.bnAdvance-setting-column {
+  max-width: calc(100% - 80px);
+  font-size: 14px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bnAdvance-setting-left {
+  display: flex;
+  column-gap: 5px;
+  position: relative;
+  flex-grow: 1;
+  align-items: center;
+  max-width: 100%;
+}
+
+.bnAdvance-setting-left-min {
+  max-width: calc(100% - 30px);
+}
+
+.bnAdvance-del {
+  position: relative;
+  flex-grow: 0;
+  width: 28px;
+  text-align: right;
+  line-height: 32px;
+  cursor: pointer;
+  color: #8c8c8c
+}
+
+.bnAdvance-condition {
+  position: relative;
+  float: left;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+</style>

package/packages/BnAdvancedFilter/util.js

@@ -0,0 +1,171 @@
+export const searchTypeMap = {
+  '1': '等于',
+  '2': '不等于',
+  '3': '包含',
+  '4': '不包含',
+  '5': '包含任一项',
+  '6': '不包含任一项',
+  '7': '包含所有项',
+  '8': '范围',
+  '9': '为空',
+  '10': '不为空',
+  '11': '属于',
+  '12': '有交集',
+  '13': '无交集',
+  '14': '不重复',
+  '15': '重复',
+  '16': '大于',
+  '17': '小于',
+  '18': '大于等于',
+  '19': '小于等于',
+}
+
+export const searchList = {
+  1: [
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '包含任一项', id: '5'},
+    // {title: '包含任一项(模糊)', id: '28'},
+    // {title: '不包含任一项(模糊)', id: '29'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+    {title: '不重复', id: '14'},
+    {title: '重复', id: '15'},
+  ],
+  2: [
+    {title: '范围', id: '8'},
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含任一项', id: '5'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+  ],
+  3: [
+    {title: '包含任一项', id: '5'},
+    {title: '不包含任一项', id: '6'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'}
+  ],
+  4: [
+    {title: '包含任一项', id: '5'},
+    {title: '不包含任一项', id: '6'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'}
+  ],
+  5: [
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含任一项', id: '5'},
+    {title: '不包含任一项', id: '6'},
+    {title: '包含所有项', id: '7'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+  ],
+  6: [
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '包含任一项', id: '5'},
+    {title: '不包含任一项', id: '6'},
+    {title: '包含所有项', id: '7'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+    // {title: '重复', id: '15'}
+  ],
+  20: [
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '包含任一项', id: '5'},
+    {title: '不包含任一项', id: '6'},
+    // {title: '包含所有项', id: '7'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+    // {title: '重复', id: '15'}
+  ],
+  7: [
+    {title: '范围', id: '8'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+  ],
+  8: [
+    {title: '范围', id: '8'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+    {title: '属于', id: '11'},
+    {title: '有交集', id: '12'},
+    {title: '无交集', id: '13'},
+  ],
+  9: [
+    {title: '范围', id: '8'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+  ],
+  10: [
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+  ],
+  11: [
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '包含任一项', id: '5'},
+    {title: '不包含任一项', id: '6'},
+    {title: '包含所有项', id: '7'},
+    {title: '范围', id: '8'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+    {title: '属于', id: '11'},
+    {title: '有交集', id: '12'},
+    {title: '无交集', id: '13'},],
+  12: [
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '包含任一项', id: '5'},
+    {title: '不包含任一项', id: '6'},
+    {title: '包含所有项', id: '7'},
+    {title: '范围', id: '8'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+    {title: '属于', id: '11'},
+    {title: '有交集', id: '12'},
+    {title: '无交集', id: '13'},],
+  13: [
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '包含任一项', id: '5'},
+    {title: '不包含任一项', id: '6'},
+    {title: '包含所有项', id: '7'},
+    {title: '范围', id: '8'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'},
+    {title: '属于', id: '11'},
+    {title: '有交集', id: '12'},
+    {title: '无交集', id: '13'},],
+  14: [
+    {title: '等于', id: '1'},
+    {title: '不等于', id: '2'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'}
+  ],
+  15: [
+    {title: '等于', id: '1'},
+    {title: '包含', id: '3'},
+    {title: '不包含', id: '4'},
+    {title: '为空', id: '9'},
+    {title: '不为空', id: '10'}
+  ],
+};