@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnDrop/BnDrop.vue

@@ -1,917 +0,0 @@
-<template>
-  <el-popover ref="popover" :placement="placement" trigger="click" :show-arrow="false" :hide-after="0"
-              popper-class="bnDrop" @show="open" :disabled="disabled">
-    <!-- 触发下拉的内容 -->
-    <template #reference>
-      <slot v-if="$slots.default"></slot>
-      <div v-else class="bnDrop-select" :class="{'simple':!border,'disabled':disabled,'is-multiple-tags':multiple && collapseTags && val.length > 0}">
-        <!--multiple && value.length == 0:判断多选情况下是否value长度为0
-         !multiple && (!labelInValue && value === '') || (labelInValue && !value[optionProps.value])：单选情况下value有数值 0 字符 ‘’ 和对象 {} 两种形态。判断value是否为空并且不等0 -->
-        <span class="bnDrop-placeholder"
-              v-if="(multiple && val.length == 0) || (!multiple && ((!labelInValue && val === '') || (labelInValue && !val[optionProps.value])))">
-          {{ placeholder }}
-        </span>
-        <!--value不为空-->
-        <template v-else>
-          <!--单选-->
-          <span v-if="!multiple" :title="singleTitle">{{ singleTitle }}</span>
-          <!--多选：collapseTags 展示 tag 列表-->
-          <div v-else-if="collapseTags" class="bnDrop-tags">
-            <span v-for="tag in visibleTags" :key="tag.index" class="bnDrop-tag">
-              <span class="bnDrop-tag-text" :title="tag.label">{{ tag.label }}</span>
-              <span
-                v-if="!disabled"
-                class="bnDrop-tag-close bnUIcon bnUIcon-close"
-                @click.stop="removeTag(tag.index)"
-              ></span>
-            </span>
-            <el-tooltip
-              v-if="collapsedCount > 0"
-              :disabled="!collapseTagsTooltip"
-              effect="dark"
-              placement="top"
-            >
-              <template #content>
-                <div class="bnDrop-collapse-tooltip">
-                  <div v-for="tag in collapsedTags" :key="tag.index">{{ tag.label }}</div>
-                </div>
-              </template>
-              <span class="bnDrop-tag bnDrop-tag--collapse">+ {{ collapsedCount }}</span>
-            </el-tooltip>
-          </div>
-          <!--多选：默认逗号分隔-->
-          <span v-else :title="multipleTitle">{{ multipleTitle }}</span>
-          <span class="bnUIcon bnUIcon-clear bnDrop-select-clear" v-if="clearable" @click.stop="clear"></span>
-        </template>
-        <span class="bnUIcon bnUIcon-down bnDrop-select-down" v-loading="loading"></span>
-      </div>
-    </template>
-    <div class="bnDrop-body" :style="{width:width+'px'}">
-      <el-input v-model="queryValue" ref="searchInput" class="bnDrop-body-input" placeholder="输入名称搜索"
-                v-show="pathUrl || options.length > 10"
-                @input="filterMethod" clearable></el-input>
-      <!-- 下拉内容 -->
-      <el-scrollbar max-height="260px" class="bnDrop-body-list" @end-reached="scrollMore">
-        <!-- 下拉弹窗选项 -->
-        <div class="bnDrop-body-list-item w-flex-center w-flex-column-gap6"
-             @click="chooseItem(item)" v-for="(item,index) in optionList" :key="index">
-          <BnCheck v-if="multiple" v-model="val" :key="item[optionProps.value]" stop
-                   :true-data="item[optionProps.value]" :is-checked="isChecked"/>
-          <span :title="item[optionProps.label]">{{ item[optionProps.label] }}</span>
-        </div>
-        <div class="bnDrop-body-list-empty" v-if="optionList.length == 0 && !loading">
-          {{ noDataText }}
-        </div>
-        <div class="bnDrop-body-list-empty" v-if="loading">加载中</div>
-      </el-scrollbar>
-      <div v-if="multiple && checkedAll"
-           class="bnDrop-body-footer w-flex-center w-padding-lr10 w-padding-tb8 w-border-solid-top">
-        <BnCheck :true-data="999" :is-checked="isCheckedAll" @click="checkAll">
-          <div class="w-flex-center w-flex-column-gap4 w-text-over">
-            <span class="w-margin-left4">{{ val.length == 0 ? '全选' : `已选${val.length-fixedFrontOptions.length}项` }}</span>
-            <span class="">已加载{{ optionList.length }}/{{ total }}项</span>
-          </div>
-        </BnCheck>
-      </div>
-      <!-- 自有扩展插槽 -->
-      <slot name="dropdown-bottom"></slot>
-    </div>
-  </el-popover>
-</template>
-
-<script>
-import {cloneDeep, debounce} from "lodash";
-
-export default {
-  name: "BnDrop",
-  props: {
-    //最终选中的value
-    modelValue: {
-      type: [String, Array, Number, Object],
-      default() {
-        return {}
-      }
-    },
-    //选项列表
-    options: {
-      type: Array,
-      default: function () {
-        return []
-      }
-    },
-    // 占位符
-    placeholder: {
-      type: String,
-      default: "请选择"
-    },
-    // option基础结构
-    optionProps: {
-      default() {
-        return {
-          value: 'id',
-          label: 'title'
-        };
-      }
-    },
-    // 数据结构
-    valueProps: {
-      type: Array,
-    },
-    // 位置
-    placement: {
-      type: String,
-      default: 'bottom-start'
-    },
-    width: {default: 200},
-    // 是否禁用
-    disabled: Boolean,
-    // 是否显示边框
-    border: Boolean,
-    // 是否可以清空选项
-    clearable: Boolean,
-    // 支持外部查询的方法，使用者传进来
-    postFunc: Function,
-    // 搜索的请求参数
-    postData: {
-      type: Object,
-    },
-    // 通过外部传入的链接进行参数请求
-    pathUrl: {
-      type: String,
-      default: ''
-    },
-    // 查询条件列表的key名 内部数据源且分页情况下才有用
-    searchKey: {
-      type: String,
-      default: 'title'
-    },
-    // 无数据提示
-    noDataText: {
-      type: String,
-      default: '无数据'
-    },
-    // 搜索是否是分页
-    isPage: {
-      type: Boolean,
-      default: true
-    },
-    // 分页器参数配置
-    pageProps: {
-      default() {
-        return {
-          pageNum: 'pageNum',
-          pageSize: 'pageSize',
-        };
-      }
-    },
-    // 是否多选
-    multiple: Boolean,
-    // 多选 tag 是否折叠超出部分（对齐 Element Plus collapse-tags）
-    collapseTags: Boolean,
-    // 折叠 tag 的 +N 是否启用 tooltip 展示全部
-    collapseTagsTooltip: {
-      type: Boolean,
-      default: true
-    },
-    // collapseTags 为 true 时，收起时默认展示几个 tag
-    maxCollapseTags: {
-      type: Number,
-      default: 1
-    },
-    // 单选模式 是否允许取消选中
-    canUncheck: {
-      type: Boolean,
-      default: true
-    },
-    // 多选时用户最多可以选择的项目数，为 0 则不限制
-    multipleLimit: {
-      type: Number,
-      default: 0
-    },
-    checkedAll: {// 是否支持全选
-      type: Boolean,
-      default: true
-    },
-    // 在返回选项时，是否将 label 和 value 一并返回
-    labelInValue: {
-      type: Boolean,
-      default: true
-    },
-    // 是否在组件初始化的时候加载options，反之在打开弹框时加载
-    isInitOptions: {
-      type: Boolean,
-      default: true
-    },
-    // 不绑定v-model，仅在点击的时候回传点击事件
-    noValue: {
-      type: Boolean,
-      default: false
-    },
-    // 固定在可选项前面，value全选的时候和清空的时候都会在value前面加上去
-    fixedFrontOptions: {
-      type: Array,
-      default(){
-        return []
-      }
-    },
-    // 是否将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: [],
-    };
-  },
-  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, // 组件初始化时立即执行
-    },
-  },
-  mounted() {
-    if (this.isInitOptions) {
-      this.initRemote();
-    }
-  },
-  methods: {
-    /**
-     * 初始化远程数据
-     * */
-    initRemote() {
-      if (this.pathUrl) {
-        this.pageData.pageNum = 1;
-        this.isInit = true;
-        this.loadOptions()
-      }
-    },
-    /**
-     * 下拉框打开关闭
-     * */
-    open(e) {
-      // 打开弹框时
-      // 设置了远程获取选项
-      // 并且设置了点击弹框再初始化选项
-      // 并且没有被初始化过，
-      if (e && this.pathUrl && (!this.isInit || !this.isInitOptions)) {
-        // 初始化远程数据
-        this.initRemote()
-      }
-    },
-    /**
-     * 清空value
-     * */
-    clear() {
-      if (this.multiple) {
-        this.val = []
-      } else {
-        this.val = this.labelInValue ? {} : ''
-      }
-    },
-    /**
-     * 滚动加载
-     * */
-    scrollMore: debounce(function () {
-      if (this.optionList.length < this.total && !this.loading) {
-        // 远程获取
-        if (this.pathUrl) {
-          if (this.isPage) {
-            this.pageData.pageNum++;
-            this.loadOptions();
-          }
-        } else {
-          // 本地分页
-          this.pageData.pageNum++;
-          this.staticOptions = [...this.staticOptions, ...this.catchPage()]
-        }
-      }
-    }, 400),
-    /**
-     * 快速搜索选项
-     * @param {String} val 搜索的值
-     */
-    filterMethod: debounce(function (val) {
-      this.queryValue = val;
-      // 选项列表被初始化过
-      if (this.pathUrl && this.isPage) {
-        this.pageData.pageNum = 1;
-        this.loadOptions();
-      }
-    }, 400),
-    /**
-     * 多选时判断全部选中
-     * */
-    isCheckedAll() {
-      let val = this.val || []
-      let option = this.optionList.map(i => i[this.optionProps.value])
-      let fixedFrontOptions = this.fixedFrontOptions || []
-
-      if (this.labelInValue) {
-        val = this.val.map(i => i[this.optionProps.value])
-        fixedFrontOptions = this.fixedFrontOptions.map(i => i[this.optionProps.value])
-      }
-      if(fixedFrontOptions.length>0){
-        val = val.filter(i=>!fixedFrontOptions.includes(i))
-      }
-      // 长度不同或为空，直接返回 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();
-      let value = cloneDeep(this.val)
-
-      if (isAllChecked) {
-        // 如果已经全选，则取消全选
-        value = [...this.fixedFrontOptions];
-      } else {
-        // 如果未全选，则全选当前已加载的所有选项
-        if (this.labelInValue) {
-          // labelInValue 为 true 时，返回完整的对象数组
-          value = [...this.fixedFrontOptions,...this.optionList];
-        } else {
-          // labelInValue 为 false 时，只返回 value 数组
-          value = [...this.fixedFrontOptions,...this.optionList.map(i => i[this.optionProps.value])];
-        }
-      }
-      // 不绑定value
-      if (!this.noValue) {
-        this.val = value;
-      }
-      this.$emit('change', value, isAllChecked);
-    },
-    /**
-     * 多选判断是否选中 选中返回true，未选中返回false
-     * @param {Object} item 选项的对象数据
-     * */
-    isChecked({trueData}) {
-      let check = false;
-      if (this.labelInValue) {
-        check = this.val.find(i => i[this.optionProps.value] == trueData) != undefined
-      } else {
-        check = this.val && this.val.includes(trueData);
-      }
-      return check;
-    },
-    /**
-     * 单选判断是否选中 选中返回true，未选中返回false
-     * @param {Object} item 选项的对象数据
-     * */
-    isChoose(item) {
-      let check = false;
-      // value是对象时
-      if (this.labelInValue) {
-        check = this.val[this.optionProps.value] == item[this.optionProps.value]
-      } else {
-        check = this.val == item[this.optionProps.value]
-      }
-      return check;
-    },
-    /**
-     * 点击下拉菜单中的某一项，选中或取消选中
-     * @param {Object} item 选项的对象数据
-     * */
-    chooseItem(item) {
-      let value = this.val;
-      this.$emit("checkItem", item)
-      // 多选模式
-      if (this.multiple) {
-        if (this.labelInValue) {
-          let flag = false;
-          for (let i in this.val) {
-            if (this.val[i][this.optionProps.value] == item[this.optionProps.value]) {
-              // 如果之前已经选中，则取消掉
-              value.splice(i, 1)
-              flag = true;
-              break;
-            }
-          }
-          // 如果之前没有选中 并且目前数量小于最大多选数量，则选中
-          if (!flag && (!this.multipleLimit || this.multipleLimit < value.length)) {
-            value.push(item)
-          }
-        } else {
-          let index = this.val && this.val.indexOf(item[this.optionProps.value])
-          if (index && index == -1 && (!this.multipleLimit || this.multipleLimit < value.length)) {
-            value.push(item[this.optionProps.value])
-          } else {
-            value.splice(index, 1)
-          }
-        }
-      }
-      // 单选模式
-      else {
-        this.$refs.popover.hide()
-        let choose = this.isChoose(item);
-        // 如果不能取消选中，并且当前是选中状态 直接return
-        if (choose && !this.canUncheck) {
-          return;
-        }
-        // 如果要返回整个对象
-        if (this.labelInValue) {
-          if (this.val[this.optionProps.value] == item[this.optionProps.value]) {
-            // 取消选中
-            value = {}
-          } else {
-            // 选中
-            value = item;
-          }
-        } else {
-          if (this.val == item[this.optionProps.value]) {
-            // 取消选中
-            value = ''
-          } else {
-            // 选中
-            value = item[this.optionProps.value]
-          }
-        }
-      }
-      // 不绑定value
-      if (!this.noValue) {
-        this.val = value;
-      }
-      this.$emit('change', value)
-    },
-    /**
-     * 远程加载options
-     * */
-    loadOptions(post) {
-      if (!this.postFunc) {
-        console.log("selectPro：没有远程调用的方法")
-        this.loading = false;
-        return false;
-      }
-      this.loading = true;
-      let postData = post || this.postParams;
-      // 查询条件列表的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) {
-          // 计算静态列表搜索后的长度
-          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 + this.options.length + staticLength;
-            let arr = res.data.results || [];
-            if (this.pageData.pageNum == 1) {
-              this.remoteOptions = [...arr]
-            } else {
-              this.remoteOptions = [...this.remoteOptions, ...arr]
-            }
-          } else {
-            this.remoteOptions = res.data || [];
-            this.total = this.remoteOptions.length + staticLength;
-          }
-        }
-      })
-    },
-    /**
-     * 前端手动分页
-     * */
-    catchPage(page) {
-      this.pageData.pageNum = page || this.pageData.pageNum;
-      return this.options.slice((this.pageData.pageNum - 1) * this.pageData.pageSize, this.pageData.pageNum * this.pageData.pageSize)
-    },
-    /**
-     * 如果value是对象，然会value的时候把对象组装好再返回。
-     * */
-    getValObj(val) {
-      if (this.valueProps) {
-        let obj = {};
-        this.valueProps.forEach(key => {
-          obj[key] = val[key];
-        });
-        return obj
-      } else {
-        return val;
-      }
-    },
-    /**
-     * 从一个数组中通过id找到名字，并返回给调用者
-     * @param {Array} list 数组
-     * @param {String} id 需要匹配的id
-     * */
-    foundTitle(list, id) {
-      let title = ''
-      for (let i in list) {
-        if (list[i][this.optionProps.value] == id) {
-          title = list[i][this.optionProps.label]
-          break;
-        }
-      }
-      return title;
-    },
-    /**
-     * 从一个数组中通过id和ids数组的匹配找到标题，并返回给调用者
-     * @param {Array} list 数组
-     * @param {String} ids 需要匹配的id数组[1,2,3]
-     * @return {Array} values 返回所有匹配项组成的数组
-     * */
-    foundValue(list, ids) {
-      let value = [];
-      for (let i in list) {
-        if (ids.includes(list[i][this.optionProps.value])) {
-          value.push(list[i][this.optionProps.label])
-        }
-      }
-      return value;
-    },
-    /**
-     * 手动关闭
-     * */
-    close() {
-      this.$refs.popover.hide()
-    },
-    /** 删除多选 tag */
-    removeTag(index) {
-      if (this.disabled || !this.multiple || !Array.isArray(this.val)) {
-        return;
-      }
-      const next = [...this.val];
-      next.splice(index, 1);
-      this.val = next;
-    }
-  },
-  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 ? [] : (this.labelInValue ? {} : '');
-          }
-        }
-        if (this.multiple && (!value || !Array.isArray(value))) {
-          return []
-        } else {
-          return value;
-        }
-      },
-      set(val) {
-        let result;
-        if (this.labelInValue) {
-          if (this.multiple) {
-            result = val.map(item => {
-              return this.getValObj(item)
-            })
-          } else {
-            result = this.getValObj(val)
-          }
-        } else {
-          result = val;
-        }
-        this.$emit("update:modelValue", this.valueToJson ? JSON.stringify(result) : result);
-      },
-    },
-    // 远程搜索时，入参的拼接
-    postParams: {
-      get() {
-        if (this.pathUrl) {
-          let post = {...this.postData};
-          // 每当参数变化，重置初始化options的开关
-          this.isInit = false;
-          return post;
-        } else {
-          return {...this.pageData}
-        }
-      },
-      set(val) {
-        return val;
-      }
-    },
-    // 最终展示的下拉列表
-    optionList: {
-      get() {
-        let options = [...this.staticOptions, ...this.remoteOptions];
-        if (this.queryValue && !(this.pathUrl && this.isPage)) {
-          options = [...this.options, ...this.remoteOptions].filter(item => item[this.optionProps.label].indexOf(this.queryValue) > -1)
-        }
-        return options;
-      },
-      set(val) {
-        return val;
-      }
-    },
-    // 单选时，展示value的值
-    singleTitle() {
-      let title = ''
-      if (this.labelInValue) {
-        title = this.val[this.optionProps.label]
-      } else {
-        title = this.foundTitle(this.options, this.val) || this.val;
-      }
-      return title
-    },
-    //  多选时的 tag 列表
-    multipleTags() {
-      const value = this.val;
-      if (!Array.isArray(value) || !value.length) {
-        return [];
-      }
-      if (this.labelInValue) {
-        return value.map((v, index) => ({
-          index,
-          label: v[this.optionProps.label] || ''
-        }));
-      }
-      return value.map((id, index) => ({
-        index,
-        label: this.foundTitle(this.options, id) || id
-      }));
-    },
-    //  多选时的 value 展示文本
-    multipleTitle() {
-      return this.multipleTags.map(tag => tag.label).join(',');
-    },
-    // 多选 collapseTags 模式下可见 tag
-    visibleTags() {
-      if (!this.collapseTags || this.multipleTags.length <= this.maxCollapseTags) {
-        return this.multipleTags;
-      }
-      return this.multipleTags.slice(0, this.maxCollapseTags);
-    },
-    // 多选 collapseTags 模式下被折叠的 tag
-    collapsedTags() {
-      if (!this.collapseTags || this.multipleTags.length <= this.maxCollapseTags) {
-        return [];
-      }
-      return this.multipleTags.slice(this.maxCollapseTags);
-    },
-    collapsedCount() {
-      return this.collapsedTags.length;
-    },
-  },
-}
-</script>
-<style>
-.bnDrop.el-popover {
-  padding: 0 !important;
-  width: auto !important;
-}
-</style>
-<style scoped lang="scss">
-@import "./../font/iconfont.css";
-
-.bnDrop {
-  &-select {
-    display: inline-block;
-    position: relative;
-    max-width: 100%;
-    min-width: 110px;
-    height: 32px;
-    line-height: 32px;
-    padding-right: 28px;
-    padding-left: 12px;
-    font-size: 14px;
-    color: rgba(0, 0, 0, .85);
-    border: 1px solid rgba(0, 0, 0, .15);
-    border-radius: 2px;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &-clear {
-      background: #fff;
-      display: none;
-      position: absolute;
-      font-size: 14px;
-      right: 8px;
-      color: #888;
-      cursor: pointer;
-    }
-
-    &-down {
-      position: absolute;
-      font-size: 12px;
-      right: 8px;
-      color: #888;
-
-      :deep(.el-loading-mask) {
-        .el-loading-spinner {
-          padding-top: 6px;
-        }
-
-        svg {
-          width: 17px;
-          height: 17px;
-        }
-      }
-    }
-
-    &.disabled {
-      color: rgba(0, 0, 0, .25);
-      background: rgba(0, 0, 0, .04);
-      border-color: rgba(0, 0, 0, .15) !important;
-      cursor: not-allowed;
-
-      .bnDrop-select-clear {
-        display: none !important;
-      }
-    }
-
-    &:hover {
-      border-color: #1890ff;
-
-      .bnDrop-select-clear {
-        z-index: 1;
-        display: inline-block;
-      }
-    }
-
-    &.simple {
-      padding-left: 0;
-      color: #1890ff;
-      border: 1px solid rgba(0, 0, 0, 0) !important;
-
-      &.disabled {
-        color: rgba(24, 144, 255, 0.35);
-        background: none;
-      }
-    }
-
-    &.is-multiple-tags {
-      display: inline-flex;
-      align-items: center;
-      height: auto;
-      min-height: 32px;
-      line-height: normal;
-      padding-top: 1px;
-      padding-bottom: 1px;
-      white-space: normal;
-      overflow: visible;
-    }
-  }
-
-  &-tags {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 6px;
-    padding: 2px 0;
-    flex: 1;
-    min-width: 0;
-  }
-
-  &-tag {
-    display: inline-flex;
-    align-items: center;
-    max-width: 100%;
-    height: 24px;
-    padding: 0 8px;
-    font-size: 12px;
-    color: #909399;
-    background: #f0f2f5;
-    border-radius: 4px;
-    box-sizing: border-box;
-
-    &--collapse {
-      cursor: default;
-    }
-  }
-
-  &-tag-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &-tag-close {
-    margin-left: 4px;
-    font-size: 12px;
-    color: #909399;
-    cursor: pointer;
-    border-radius: 50%;
-    flex-shrink: 0;
-
-    &:hover {
-      color: #409eff;
-      background: #ecf5ff;
-    }
-  }
-
-  &-collapse-tooltip {
-    max-width: 280px;
-    line-height: 1.6;
-  }
-
-  &-placeholder {
-    color: rgba(0, 0, 0, .25);
-  }
-
-  &-body {
-    position: relative;
-
-    &-input {
-      padding: 8px;
-
-      :deep(.el-input__wrapper) {
-        border-radius: 0;
-      }
-    }
-
-    &-list {
-      position: relative;
-      width: 100%;
-      background: #fff;
-      min-height: 68px;
-      //max-height: 260px;
-      //overflow-y: auto;
-
-      &-item {
-        position: relative;
-        height: 36px;
-        font-size: 14px;
-        padding: 0 10px;
-        color: rgba(0, 0, 0, .85);
-        cursor: pointer;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &.disabled {
-          color: rgba(0, 0, 0, .25);
-          background: rgba(0, 0, 0, .04);
-          border-color: rgba(0, 0, 0, .15) !important;
-          cursor: not-allowed;
-        }
-
-        &:hover {
-          color: #2783F2;
-          background-color: rgba(0, 0, 0, 0.04);
-        }
-      }
-
-      &-empty {
-        height: 48px;
-        line-height: 48px;
-        text-align: center;
-        font-size: 12px;
-        color: #999;
-      }
-    }
-
-    &-footer {
-      width: 100%;
-      overflow: hidden;
-
-      :deep(.bnChecked) {
-        width: 100%;
-        max-width: 100%;
-      }
-    }
-  }
-}
-</style>