@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnRelation/BnRelation.vue

@@ -1,120 +0,0 @@
-<!--
-具有级联属性的条件设置，入联动组件、地址组件
-参数列表：
-选传: 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

@@ -1,485 +0,0 @@
-<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>