@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnCondition/index.vue

@@ -1,551 +0,0 @@
-<!--
-  @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="bnCon clearFix">
-    <div class="bnCon-setting">
-      <div class="bnCon-setting-left w-flex-gap10">
-        <!--选择组件-->
-        <slot name="selectComponent">
-          <div class="bnCon-setting-column" v-if="!allowSelectColumn" :title="ruleVal[optionProps.name]">
-          {{ ruleVal[optionProps.name] }}
-          </div>
-          <BnDrop v-else v-model="ruleVal[columnKey]" @change="columnChange"
-                  :options="columnList" :optionProps="{value:columnKey,label:optionProps.name}"
-                  :labelInValue="false"/>
-        </slot>
-        <!--设置条件-->
-        <BnDrop @change="searchChange" v-model="ruleVal[optionProps.searchType]"
-                :options="searchOptions" :labelInValue="false" :canUncheck="false"></BnDrop>
-      </div>
-      <!--删除按钮-->
-      <div class="bnCon-del" v-if="allowDel" @click="del">
-        <span class="bnUIcon bnUIcon-delete"></span>
-      </div>
-    </div>
-    <!--设置详细条件-->
-    <div class="bnCon-condition">
-      <div class="bnCon-condition-valType" v-if="allowValueType">
-        <el-select v-model="ruleVal[optionProps.valueType]" placeholder="请选择"
-                   :disabled="[9,10,14,15].includes(parseInt(ruleVal[optionProps.searchType]))"
-                   @change="valueTypeChange">
-          <el-option v-for="item in valueOptions" :value="item.id" :label="item.title" :key="item.id"></el-option>
-        </el-select>
-      </div>
-      <div class="bnCon-condition-valType" v-if="ruleVal.behaviorType == 7 && allowSubType">
-        <el-select v-model="ruleVal[optionProps.subType]" placeholder="请选择"
-                   :disabled="[9,10,14,15].includes(parseInt(ruleVal[optionProps.searchType]))" @change="subTypeChange">
-          <el-option v-for="item in subTypeOptions" :value="item.id" :label="item.title" :key="item.id"></el-option>
-        </el-select>
-      </div>
-      <div class="bnCon-condition-valSet">
-        <BnCondVal v-model="ruleVal" :optionProps="optionProps" :valueOptionProps="valueOptionProps"
-                   @onChange="valueChange" :otherColumnProps="otherColumnProps"
-                   :otherColumns="otherColumns" :columnInfo="columnInfo" :postFunc="postFunc"></BnCondVal>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import {cloneDeep} from 'lodash'
-import {searchList, valueTypeList, subTypeList} from "./util";
-import BnCondVal from "../BnCondVal/BnCondVal.vue";
-
-export default {
-  name: "BnCondition",
-  components: {BnCondVal},
-  props: {
-    //最终选中的value
-    modelValue: [String, Array, Number, Object],
-    // 当传入完整组件数据时，将不会再遍历columnList去取值。
-    columnData: Object,
-    // 组件列表：可供选择的组件列表，仅支持一维数组。请传入符合班牛业务的组件对象汇总的数组。
-    columnList: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    //是否允许选择组件
-    allowSelectColumn: Boolean,
-    //是否允许删除
-    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,
-    //是否开放值类型选择，默认为开启
-    allowValueType: {
-      type: Boolean,
-      default: true
-    },
-    // 每个条件都可以根据自己的类型来设置自己的值类型，比如是否可以设置自定义值、是否可以选择其他组件。这个字段的配置跟searchTypes有些类似
-    // 你可以传入一个map对象 {1:[{id: '0', title: '自定义填写'}, {id: '1', title: '其他组件'}]},这样你就让行为类型为1的组件可以选择其他组件的值了。
-    // 当然你可以根据行为类型来自定义更多组件的值类型
-    valueTypes: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    //有时候可能你需要更加自有的valueTypes定义，比如你想根据一个组件的id或者key这些字段，为他设置特殊的值类型，这个时候我们提供了valueTypeFun方法。
-    //在这个方法中我们会告诉你现在选中的组件的信息以及当前规则条件的值，你可以根据这个组件的任何字段进行判断，返回一个数组[]，我们将会把这个数组作为值类型的列表进行展示。如果你判断出来
-    //这个组件不需要进行特殊值类型列表，你可以返回false。这样我们将采用默认值类型，或者你传入的valueTypes。
-    //valueTypes和valueTypeFun是可以组合使用的，他们的优先级为：默认值类型<valueTypes<valueTypeFun，后者的权重大于前者，当后者找不到匹配项，会自动向上寻找
-    valueTypeFun: Function,
-    //其他组件列表，当你没传的时候会自动使用columnList列表，也就是当前组件的列表
-    otherColumnList: {
-      type: Array,
-    },
-    //当你想要为你的其他组件列表选中一个范围时，比如你的当前组件是单行文本，默认情况下我们选择其他组件时只会让你选择同样是单行文本的类型。
-    //而如果你希望的是，你选择当前组件是单行文本，你选择其他组件时可以选择单选、下拉、甚至联动。那么你可以使用这个这个属性
-    //只要你传入这样的对象{1:[1,2,3,4],3:[5,6,7]}，那么你的单行文本组件就支持选择单行、数值、下拉、单选，你的下拉组件就支持选择多选、联动、时间这些其他组件。
-    otherColumnType: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    //当你选择其他组件的需求很高级，你不得不针对某些组件进行更自由的自定义时，你可以用这个方法。
-    //在这个方法中我们会告诉你现在选中的组件的信息以及当前规则条件的值，你可以根据这个组件的任何字段进行判断，返回一个数组[]，我们将会把这个数组作为其他组件可选列表进行展示。
-    //请注意你返回的数组应该直接是组件列表数组，或者是false，而不是其他什么东西。
-    //请注意返回空数组和false是两种完全不同的处理方式。 如果你返回空数组，其他组件的下拉选项将无数据。
-    //如果你返回false。这样我们将采用默认方式处理，即单行文本只能选择单行文本，如果你传入otherColumnType，我们将会根据这个规则从otherColumnList列表中匹配对应组件。
-    //你没有传otherColumnList，我们就从columnList列表中匹配对应组件。
-    //otherColumnType和otherColumnTypeFun是可以组合使用的，他们的优先级为：默认处理方式<otherColumnType<otherColumnTypeFun，后者的权重大于前者，当后者找不到匹配项，会自动向上寻找
-    otherColumnTypeFun: Function,
-    //是否开发子类型选择，默认为关闭，目前仅支持日期组件
-    allowSubType: {
-      type: Boolean,
-      default: false
-    },
-    subTypes: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    subTypeFun: Function,
-    // value的键值基础结构  relationValue  behaviorType 这两个是固定的，不可更改 subType:日期组件可以使用子类型:0-今天,1-明天,2-昨天,3-过去N天,4-未来N天,5-指定时间
-    optionProps: {
-      default() {
-        return {
-          id: 'columnCode',// 主键
-          name: 'name',//当前组件名字
-          parentCode: 'parentCode',//如果当前组件是子表单内组件，那么拥有父级id
-          valueType: 'valueType',//组件value类型，自定义填写、当前组件选项、其他组件
-          subType: 'subType',//日期组件可以使用子类型:0-今天,1-明天,2-昨天,3-过去N天,4-未来N天,5-指定时间
-          searchType: 'searchType',//计算条件
-          value: 'value',//条件值
-        };
-      }
-    },
-    // value的value如果是下拉或者多选这些，约束他们的value格式
-    valueOptionProps: {
-      default() {
-        return {value: 'code', label: 'title'}
-      }
-    },
-    // 选择其他组件时，约束他们的value格式
-    otherColumnProps: {
-      default() {
-        return {value: 'columnCode', label: 'name'}
-      }
-    },
-    postFunc: Function,
-  },
-  data() {
-    return {
-      //计算条件列表
-      searchList: searchList,
-      //值类型列表
-      valueTypeList: valueTypeList,
-      //子类型
-      subTypeList: subTypeList,
-    }
-  },
-  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()
-    },
-    // 值类型
-    valueOptions() {
-      return this.getValueOptions();
-    },
-    // 当你可以选择其他组件时，返回的列表
-    otherColumns() {
-      return this.getOtherColumns();
-    },
-    // 对比子类型
-    subTypeOptions() {
-      return this.getSubTypeOptions();
-    },
-  },
-  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.id = this.columnInfo.id;
-      value.parentId = this.columnInfo.parentId;
-      value.behaviorType = this.columnInfo.behaviorType;
-      if (this.optionProps.name) {
-        value[this.optionProps.name] = this.columnInfo.name;
-      }
-      if (this.optionProps.parentCode) {
-        value[this.optionProps.parentCode] = this.columnInfo.parentCode || '';
-      }
-      value[this.optionProps.searchType] = this.getSearchOptions(value.behaviorType)[0].id;
-      // 切换组件，初始化value类型的值
-      if (this.allowValueType && this.optionProps.valueType) {
-        value[this.optionProps.valueType] = this.getValueOptions(value)[0].id;
-      }
-      // 根据组件类型、计算条件、值类型来确定规则条件的子类型
-      if (value.behaviorType == 7 && this.allowSubType) {
-        let subTypeList = this.getSubTypeOptions(value.behaviorType);
-        if (this.optionProps.subType && subTypeList.length > 0) {
-          value[this.optionProps.subType] = subTypeList[0].id
-        }
-      }
-      value[this.optionProps.value] = this.setValType(value.behaviorType, value[this.optionProps.searchType], value[this.optionProps.valueType])
-      this.ruleVal = cloneDeep(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.ruleVal[this.optionProps.valueType])
-      this.$emit('searchChange', {
-        type: 'changeSearch',
-        target: this.ruleVal[this.optionProps.searchType],
-        value: this.ruleVal
-      })
-    },
-    /**
-     * 规则值类型发生变化
-     * */
-    valueTypeChange() {
-      // 根据组件类型、计算条件、值类型来确定规则条件的value的类型
-      this.ruleVal[this.optionProps.value] = this.setValType(this.ruleVal.behaviorType, this.ruleVal[this.optionProps.searchType], this.ruleVal[this.optionProps.valueType])
-      this.$emit('change', {
-        type: 'changeValueType',
-        target: this.ruleVal[this.optionProps.valueType],
-        value: this.ruleVal
-      })
-    },
-    /**
-     * 规则值子类型发生变化
-     * */
-    subTypeChange() {
-      // 根据组件类型、计算条件、值类型来确定规则条件的value的类型
-      this.ruleVal[this.optionProps.value] = this.setValType(this.ruleVal.behaviorType, this.ruleVal[this.optionProps.searchType], this.ruleVal[this.optionProps.valueType])
-      this.$emit('change', {
-        type: 'changeSubType',
-        target: this.ruleVal[this.optionProps.valueType],
-        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;
-    },
-    /**
-     * 获取该类型组件支持那些值类型
-     * @param {Number} behaviorType 组件行为类型
-     * */
-    getValueOptions(column) {
-      let optionList = [];
-      let behavior = column ? column.behaviorType : this.columnInfo.behaviorType
-      if (behavior) {
-        //判断是否有自定义 valueTypeFun 方法，如果有优先走这个方法
-        if (this.valueTypeFun) {
-          optionList = this.valueTypeFun(this.columnInfo)
-        }
-        //valueTypeFun 有可能返回false或者空数组，如果走到这里optionList仍然是空，就走另外两个逻辑
-        if (!optionList || optionList.length == 0) {
-          // 先取valueTypes中的值，这个自定义传入的列表权重更高，取不到再取默认值
-          optionList = this.valueTypes[behavior] || this.valueTypeList[behavior];
-        }
-      }
-      return optionList;
-    },
-    /**
-     * 获取该类型组件支持那些值类型
-     * @param {Number} behaviorType 组件行为类型
-     * */
-    getOtherColumns() {
-      let optionList = [];
-      let behavior = this.columnInfo.behaviorType
-      if (behavior) {
-        // 先确定一个准确的组件列表来作为选择其他组件的下拉选项;
-        let columnList = this.otherColumnList || this.columnList;
-        //判断是否有自定义 otherColumnTypeFun 方法，如果有优先走这个方法，这个方法应该返回一个完整的组件列表数组。如果你返回false我们将选择默认
-        if (this.otherColumnTypeFun) {
-          optionList = this.otherColumnTypeFun(this.columnInfo)
-          //otherColumnTypeFun 有可能返回false或者空数组，如果是空数组就按空处理，如果是false就要按照默认逻辑去取组件列表
-          if (!optionList) {
-            // 先取behaviorType数组
-            let types = this.otherColumnType[behavior] || [behavior];
-            optionList = columnList.filter(i => types.includes(i.behaviorType))
-          }
-        } else {
-          // 先取behaviorType数组
-          let types = this.otherColumnType[behavior] || [behavior];
-          optionList = columnList.filter(i => types.includes(i.behaviorType))
-        }
-      }
-      return optionList;
-    },
-
-    /**
-     * 获取该类型组件支持那些子类型列表：目前仅只是时间日期
-     * @param {Number} behaviorType 组件行为类型
-     * */
-    getSubTypeOptions(behaviorType) {
-      let optionList = [];
-      let behavior = behaviorType || this.columnInfo.behaviorType
-      if (behavior) {
-        //判断是否有自定义 valueTypeFun 方法，如果有优先走这个方法
-        if (this.subTypeFun) {
-          optionList = this.subTypeFun(this.columnInfo)
-        }
-        //valueTypeFun 有可能返回false或者空数组，如果走到这里optionList仍然是空，就走另外两个逻辑
-        if (!optionList || optionList.length == 0) {
-          // 先取valueTypes中的值，这个自定义传入的列表权重更高，取不到再取默认值
-          optionList = this.subTypes[behavior] || this.subTypeList[behavior];
-        }
-      }
-      return optionList;
-    },
-    /**
-     * 给组件value赋予默认类型
-     * @param {Number} behaviorType 组件行为类型
-     * @param {String} searchType 规则的计算条件类型：等于、包含、大于、包含任一项等
-     * */
-    setValType(behaviorType, searchType, valueType) {
-      let data = '';
-      if (this.allowValueType && valueType == '1') {
-        return {};
-      }
-      //当组件是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 lang="scss">
-@import "./../font/iconfont.css";
-
-.bnCon {
-  position: relative;
-  width: 100%;
-}
-
-.bnCon-setting {
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.bnCon-setting-column {
-  max-width: calc(100% - 80px);
-  height: 30px;
-  line-height: 32px;
-  font-size: 14px;
-  color: #333;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.bnCon-setting-left {
-  display: flex;
-  position: relative;
-  flex-grow: 1;
-  align-items: center;
-  max-width: 100%;
-}
-
-.bnCon-del {
-  position: relative;
-  flex-grow: 0;
-  width: 28px;
-  text-align: right;
-  line-height: 32px;
-  cursor: pointer;
-  color: #8c8c8c
-}
-
-.bnCon-condition {
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-
-  &-valType {
-    flex-grow: 0;
-    min-width: 120px;
-    width: 120px;
-  }
-
-  &-valSet {
-    position: relative;
-    flex-grow: 1;
-  }
-}
-</style>