@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnRelation/BnRelation.vue

@@ -0,0 +1,120 @@
+<!--
+具有级联属性的条件设置，入联动组件、地址组件
+参数列表：
+选传: collapseTags:Boolean //多选模式下是否折叠Tag
+选传: disabled:Boolean //是否禁止输入
+选传: propsParams:{} //级联配置
+选传: clearable:Boolean //是否支持清空选项
+选传: filterable:Boolean //是否支持筛选
+选传: showAllLevels:Boolean //输入框中是否显示选中值的完整路径/物流需求：联动组件必须选到最后一级
+
+ -->
+<template>
+  <el-cascader :size="size" popper-class="bnRelation" ref="cascader" v-model="value" :placeholder="placeholder"
+			   :options="options" :props="relationProps" @visible-change="visibleChange" :filterable="filterable"
+			   :collapse-tags="collapseTags" :separator="separator" :disabled="disabled"
+			   :clearable="clearable" :show-all-levels="showAllLevels">
+  </el-cascader>
+</template>
+
+<script>
+  export default {
+	name: "bnRelation",
+	props: {
+	  // value数据绑定
+	  modelValue: [Array],
+	  // size大小
+	  size: String,
+	  // 联动选项列表默认层级嵌套[{label,value,children:[]}]
+	  options: {
+		type: Array,
+		default() {
+		  return []
+		}
+	  },
+	  // 是否多选
+	  multiple: Boolean,
+	  // 可以选择任意层级
+	  checkStrictly: Boolean,
+	  // 级联数据对象结构
+	  optionProps: Object,
+	  // 联动组件的配置项
+	  props: {
+		type: Object,
+	  },
+	  // 收起展示选中的数据
+	  collapseTags: {
+		type: Boolean,
+		default: true
+	  },
+	  // 禁用
+	  disabled: {
+		type: Boolean,
+		default: false
+	  },
+	  // 可清空
+	  clearable: {
+		type: Boolean,
+		default: true
+	  },
+	  // 可清空
+	  filterable: {
+		type: Boolean,
+		default: false
+	  },
+	  // 选择框中是否展示完整路径
+	  showAllLevels: {
+		type: Boolean,
+		default: true
+	  },
+	  // 分隔符
+	  separator: {default: '-'},
+	  //提示
+	  placeholder: {
+		type: String,
+		default: '请选择'
+	  },
+	},
+	data() {
+	  return {
+	  }
+	},
+	methods: {
+	  /**
+	   * 打开关闭弹框
+	   * */
+	  visibleChange(e) {
+		if (!e) {
+		  this.$emit("update:modelValue", this.value);
+		}
+		this.$emit('visibleChange', e)
+	  },
+	},
+	computed: {
+	  // select的value
+	  value: {
+		get() {
+		  return this.modelValue || []
+		},
+		set(v) {
+		  this.$emit("update:modelValue", v);
+		},
+	  },
+	  // 属性配置
+	  relationProps() {
+		return {
+		  ...this.props,
+		  ...this.optionProps,
+		  multiple: this.multiple || this.props?.multiple,
+		  checkStrictly: this.checkStrictly || this.props?.checkStrictly,
+		};
+	  }
+	},
+  }
+</script>
+
+<style>
+  .bnRelation .el-scrollbar__wrap {
+	max-height: 300px;
+  }
+</style>

package/packages/BnSelect/BnSelect.vue

@@ -0,0 +1,485 @@
+<template>
+  <el-select v-model="val" :placeholder="placeholder" filterable reserveKeyword ref="selectRef"
+             :value-on-clear="''" @visible-change="openChange" :no-data-text="noDataText"
+             :value-key="optionProps.value" :multiple="multiple" :collapseTags="collapseTags"
+             :collapse-tags-tooltip="collapseTagsTooltip" @popup-scroll="scrollMore"
+             :max-collapse-tags="maxCollapseTags"
+             :multipleLimit="multipleLimit" :filter-method="filterMethod"
+             :props="optionProps" :size="size" :disabled="disabled" :clearable="clearable">
+    <el-option v-for="item in temporaryOption"
+               :value="labelInValue?item:item[optionProps.value]"
+               :key="`temporary-${item[optionProps.value]}`" v-show="false"
+               :label="item[optionProps.label]"></el-option>
+    <el-option v-for="item in optionList" :key="item[optionProps.value]" :label="item[optionProps.label]"
+               :disabled="item.disabled"
+               :value="labelInValue?item:item[optionProps.value]"/>
+    <div class="emptyLoading" v-show="loading">加载中</div>
+    <div class="w-text-center w-padding-tb10 w-color-gray" v-show="!loading && optionList.length == 0">未搜索到数据
+    </div>
+    <template #footer v-if="multiple && checkedAll">
+      <div class="bnDrop-body-footer w-flex-center">
+        <BnCheck :true-data="999" :is-checked="isCheckedAll" @click="checkAll">
+          <div class="w-flex-center w-flex-column-gap4 w-text-over w-font14 w-color-black6">
+            <span class="w-margin-left4">{{ !val || val?.length == 0 ? '全选' : `已选${val?.length}项` }}</span>
+            <span class="">已加载{{ optionList.length }}/{{ total }}项</span>
+          </div>
+        </BnCheck>
+      </div>
+    </template>
+  </el-select>
+</template>
+
+<script>
+import {cloneDeep, debounce, isEmpty} from "lodash";
+
+export default {
+  name: "BnSelect",
+  props: {
+    //最终选中的value
+    modelValue: {},
+    //选项列表
+    options: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      default: "请选择"
+    },
+    // option基础结构
+    optionProps: {
+      default() {
+        return {
+          value: 'id',
+          label: 'title'
+        };
+      }
+    },
+    // 输入框尺寸
+    size: {},
+    // 是否禁用
+    disabled: Boolean,
+    // 是否可以清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 支持外部查询的方法，使用者传进来
+    postFunc: Function,
+    // 搜索的请求参数
+    postData: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 通过外部传入的链接进行参数请求
+    pathUrl: {
+      type: String,
+      default: ''
+    },
+    // 查询条件列表的key名 内部数据源且分页情况下才有用
+    searchKey: {
+      type: String,
+      default: 'condition'
+    },
+    // 无数据提示
+    noDataText: {
+      type: String,
+      default: '无数据'
+    },
+    // 搜索是否是分页
+    isPage: {
+      type: Boolean,
+      default: true
+    },
+    // 分页器参数配置
+    pageProps: {
+      default() {
+        return {
+          pageNum: 'pageNum',
+          pageSize: 'pageSize',
+        };
+      }
+    },
+    // 是否多选
+    multiple: Boolean,
+    // 多选时用户最多可以选择的项目数，为 0 则不限制
+    multipleLimit: {
+      type: Number,
+      default: 0
+    },
+    // 多选时是否将选中值收起展示
+    collapseTags: {
+      type: Boolean,
+      default: true
+    },
+    // 收起时默认展示几个tag
+    maxCollapseTags: {
+      type: Number,
+      default: 1
+    },
+    // 鼠标悬浮展示所有收起的内容
+    collapseTagsTooltip: {
+      type: Boolean,
+      default: false
+    },
+    checkedAll: {// 是否支持全选
+      type: Boolean,
+      default: true
+    },
+    // 在返回选项时，是否将 label 和 value 一并返回
+    labelInValue: {
+      type: Boolean,
+      default: true
+    },
+    // 数据结构,当labelInValue=true时，返回的对象中都需要那些字段。不传就返回全部
+    valueProps: {
+      type: Array,
+    },
+    // 是否在组件初始化的时候加载options，反之在打开弹框时加载
+    isInitOptions: {
+      type: Boolean,
+      default: true
+    },
+    // 是否将value以json字符串形式与外部交互
+    valueToJson: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      // 是否加载过options
+      isInit: false,
+      // 加载动画
+      loading: false,
+      // 查询
+      queryValue: '',
+      // 分页信息
+      pageData: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      // 总长度
+      total: 0,
+      // 接口远程获取的options
+      remoteOptions: [],
+      // 静态下拉列表，前端分页
+      staticOptions: [],
+    };
+  },
+  mounted() {
+    if (this.isInitOptions) {
+      this.initRemote();
+    }
+  },
+  watch: {
+    // 监控选项变化
+    options: {
+      handler(newVal) {
+        // 重新计算总数
+        this.total = newVal.length;
+        // 如果总数大于 40，进行分页
+        if (this.total > 40 && !this.pathUrl) {
+          this.pageData.pageNum = 1; // 重置页码
+          this.staticOptions = this.catchPage(); // 重新计算分页
+        } else {
+          // 否则直接赋值
+          this.staticOptions = [...newVal];
+        }
+      },
+      deep: true, // 深度监听
+      immediate: true, // 组件初始化时立即执行
+    },
+    postData:{
+      handler(n,o) {
+        this.initRemote()
+      },
+      deep: true,
+    }
+  },
+  methods: {
+    /**
+     * 初始化远程数据
+     * */
+    initRemote() {
+      if (this.pathUrl) {
+        this.pageData.pageNum = 1;
+        this.remoteOptions = []
+        this.isInit = true;
+        this.loadOptions()
+      }
+    },
+    /**
+     * 下拉框打开关闭
+     * */
+    openChange(e) {
+      // 打开弹框时
+      // 设置了远程获取选项
+      // 并且设置了点击弹框再初始化选项
+      // 并且没有被初始化过，
+      if (e && this.pathUrl && (!this.isInit || !this.isInitOptions)) {
+        // 初始化远程数据
+        this.initRemote()
+      }
+    },
+    /**
+     * 多选时判断全部选中
+     * */
+    isCheckedAll() {
+      let val = this.val || []
+      let option = this.optionList.map(i => i[this.optionProps.value])
+
+      if (this.labelInValue) {
+        val = this.val ? this.val.map(i => i[this.optionProps.value]) : []
+      }
+
+      // 长度不同或为空，直接返回 false
+      if (option.length !== val.length || option.length === 0) {
+        return false;
+      }
+
+      // 使用 Set 优化性能：将 val 转为 Set，has() 查找是 O(1)，比 includes() 的 O(n) 快很多
+      const valSet = new Set(val);
+      return option.every(item => valSet.has(item));
+    },
+    /**
+     * 全选/取消全选
+     * */
+    checkAll() {
+      // 判断当前是否全选
+      const isAllChecked = this.isCheckedAll();
+
+      if (isAllChecked) {
+        // 如果已经全选，则取消全选
+        this.val = [];
+      } else {
+        // 如果未全选，则全选当前已加载的所有选项
+        if (this.labelInValue) {
+          // labelInValue 为 true 时，返回完整的对象数组
+          this.val = [...this.optionList];
+        } else {
+          // labelInValue 为 false 时，只返回 value 数组
+          this.val = this.optionList.map(i => i[this.optionProps.value]);
+        }
+      }
+    },
+    /**
+     * 滚动加载
+     * */
+    scrollMore: debounce(function (e) {
+      let scrollTop = 0;
+      try {
+        scrollTop = this.$refs.selectRef.popperRef.querySelector('.el-select-dropdown__wrap').scrollTop-50;
+      }catch (e) {
+        console.log('未获取到select的列表DOM')
+      }
+      if (this.optionList.length < this.total && !this.loading && e.scrollTop>0 && e.scrollTop>scrollTop) {
+        // 远程获取
+        if (this.pathUrl) {
+          if (this.isPage) {
+            this.pageData.pageNum++;
+            this.loadOptions();
+          }
+        } else {
+          // 本地分页
+          this.pageData.pageNum++;
+          this.staticOptions = [...this.staticOptions, ...this.catchPage()]
+        }
+      }
+    }, 500),
+    /**
+     * 快速搜索选项
+     * @param {String} val 搜索的值
+     */
+    filterMethod: debounce(function (val) {
+      if (this.queryValue != val) {
+        this.queryValue = val;
+        // 选项列表被初始化过
+        this.pageData.pageNum = 1;
+        if (this.pathUrl && this.isPage) {
+          this.loadOptions();
+        }
+      }
+    }, 500),
+    /**
+     * 远程加载options
+     * @param Object post 组件外部传入的筛选条件
+     * */
+    loadOptions() {
+      if (!this.postFunc) {
+        console.log("selectPro：没有远程调用的方法")
+        this.loading = false;
+        return false;
+      }
+      this.loading = true;
+      let postData = cloneDeep(this.postData);
+      // 查询条件列表的key名 内部数据源且分页情况下才有用
+      postData[this.searchKey] = this.queryValue;
+      if (this.isPage) {
+        postData[this.pageProps.pageNum] = this.pageData.pageNum;
+        postData[this.pageProps.pageSize] = this.pageData.pageSize;
+      }
+      this.postFunc(this.pathUrl, postData).then(res => {
+        this.loading = false;
+        if (!res.code && res.data) {
+          // 计算静态列表搜索后的长度
+          let staticLength = 0
+          if(this.queryValue && this.options?.length>0){
+            let s = this.options.filter(item => item[this.optionProps.label].indexOf(this.queryValue) > -1);
+            staticLength = s?s.length:0
+          }
+          if (this.isPage) {
+            this.total = res.data.total + staticLength;
+            let list = res.data.results || []
+            let arr = list.map(i => {
+              let opt = {...i}
+              if (!i[this.optionProps.value] && i.id) {
+                opt[this.optionProps.value] = i.id
+              }
+              return opt
+            });
+            if (this.pageData.pageNum == 1) {
+              this.remoteOptions = [...arr]
+            } else {
+              this.remoteOptions = [...this.remoteOptions, ...arr]
+            }
+          } else {
+            this.remoteOptions = res.data.map(i => {
+              let opt = {...i}
+              if (!i[this.optionProps.value] && i.id) {
+                opt[this.optionProps.value] = i.id
+              }
+              return opt
+            });
+            this.total = this.remoteOptions.length + staticLength;
+          }
+        } else {
+          // 请求失败，下次进来重新继续请求
+          this.isInit = false;
+          this.remoteOptions = []
+          this.total = 0
+          this.pageData.pageNum = 1
+        }
+      })
+    },
+    /**
+     * 前端手动分页
+     * */
+    catchPage(page) {
+      this.loading = true
+      this.pageData.pageNum = page || this.pageData.pageNum;
+      let start = (this.pageData.pageNum - 1) * this.pageData.pageSize;
+      let end = this.pageData.pageNum * this.pageData.pageSize;
+      let setTime = setTimeout(() => {
+        this.loading = false
+        clearTimeout(setTime)
+        setTime = null;
+      }, 300)
+      return this.options.slice(start, end);
+    },
+    /**
+     * 如果value是对象，然会value的时候把对象组装好再返回。
+     * */
+    getValObj(val) {
+      if (this.valueProps) {
+        let obj = {};
+        this.valueProps.forEach(key => {
+          obj[key] = val[key];
+        });
+        return obj
+      } else {
+        return val;
+      }
+    },
+  },
+  computed: {
+    // select的value
+    val: {
+      get() {
+        let value = this.modelValue;
+        if (this.valueToJson && value != null && value !== '') {
+          try {
+            value = typeof value === 'string' ? JSON.parse(value) : value;
+          } catch (e) {
+            value = this.multiple ? [] : null;
+          }
+        }
+        // value为空 处理为null
+        if (this.labelInValue && isEmpty(value)) {
+          return null;
+        } else {
+          // value不为空，但是多选缺传入了其他类型，处理为[]
+          if (this.multiple && !Array.isArray(value)) {
+            return []
+          }
+          // 其他情况直接返回value
+          return value
+        }
+      },
+      set(v) {
+        let result;
+        if (this.labelInValue) {
+          if (this.multiple) {
+            result = v.map(item => {
+              return this.getValObj(item)
+            })
+          } else {
+            result = this.getValObj(v)
+          }
+        } else {
+          result = v;
+        }
+        this.$emit("update:modelValue", this.valueToJson ? JSON.stringify(result) : result);
+      },
+    },
+    // 最终展示的下拉列表
+    optionList: {
+      get() {
+        let options = [...this.staticOptions, ...this.remoteOptions];
+        if (this.queryValue) {
+          options = [...this.options, ...this.remoteOptions].filter(item => item[this.optionProps.label].indexOf(this.queryValue) > -1)
+        }
+        return options;
+      },
+      set(val) {
+        return val;
+      }
+    },
+    // 隐藏展示的下拉列表
+    temporaryOption: {
+      get() {
+        if (!isEmpty(this.modelValue)) {
+          if (this.labelInValue) {
+            let values = Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue];
+            return values.filter(item => !this.optionList.some(option =>
+                option[this.optionProps.value] === (this.labelInValue ? item[this.optionProps.value] : item)
+            ));
+          } else if (this.options && this.options.length) {
+            return this.options.filter(item => this.modelValue.includes(item[this.optionProps.value]));
+          }
+        } else {
+          return []
+        }
+      },
+      set(val) {
+        return val;
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.emptyLoading {
+  height: 32px;
+  line-height: 32px;
+  color: #888;
+  font-size: 12px;
+  text-align: center;
+}
+</style>