erp-el-element/CommonInput/selectbtn.vue

<template>
  <el-dropdown
    ref="messageDrop"
    szie="mini"
    trigger="click"
    :hide-on-click="false"
    @click.native="checkeddown"
    :class="{ 'el-dropdown_active': !down }"
    @visible-change="dropdownchange"
  >
    <span class="el-dropdown-link">
      <span>
        <span :class="{ color: selectvalue.length }">{{ dropdownvalue }}</span
        ><span class="list-length" v-if="valuelength >= 1"
          >+ {{ valuelength }}</span
        ></span
      ><i
        v-if="dropdownvalue == dropdowntitle"
        class="el-icon-arrow-up el-icon--right"
        :class="{ 'rotate-arrow': down }"
      ></i>
      <i v-else class="el-icon-close el-icon--right" @click="clear"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-input
        placeholder="请输入内容"
        v-model="seek"
        size="small"
        class="el_input"
        @input="inputblur"
        @keydown.enter.prevent="confirm"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>

      <div v-if="dataList && dataList.length" class="checkbox-group">
        <div v-if="dataList && dataList.length > 1" class="all-checked">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          /
          <span @click="invert" class="invertstatus">反选</span>
        </div>
        <el-checkbox-group
          class="checked-list"
          :class="{ 'top-height': dataList && dataList.length <= 1 }"
          v-model="checkedList"
          @change="handleCheckedCitiesChange"
        >
          <div v-for="(el, id) in dataList" :key="id" class="setScore">
            <el-checkbox :label="el.value">{{ el.label }}</el-checkbox>
            <span @click="confirm(el, 'only')">仅筛选此项</span>
          </div>
        </el-checkbox-group>
      </div>
      <div v-else class="nothing">暂无数据</div>
      <div class="btnbox">
        <div>
          <el-button size="mini" @click="cancel">取消</el-button>
          <el-button size="mini" type="primary" plain @click="confirm"
            >确定</el-button
          >
        </div>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  props: ["SourceData", "dropdowntitle", "value", "selectAll"],
  data() {
    return {
      seek: "",
      dropdownvalue: this.dropdowntitle,
      valuelength: 0,
      down: true,
      checkAll: false,
      checkedList: [],
      dataList: [], //渲染数据
      isIndeterminate: false,
      retract: false,
      selectvalue: [], //最终接口接收数据
    };
  },
  components: {},
  watch: {
    SourceData: {
      handler(val) {
        this.dataList = val;
        this.checkedList = [];  //清空旧值-解决出现累加问题
        if (this.selectAll && this.dataList) {
          this.dataList.map((e) => {
            this.checkedList.push(e.value);
          });
          this.confirm();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //点击选择状态恢复到原始值
    checkeddown() {
      if (this.checkedList.length) {
        this.checkedList =Object.assign([],this.selectvalue) ;
      } else {
        this.checkedList = [];
      }
      this.checkedstatus();
    },
    dropdownchange() {
      this.down = !this.down;
    },
    inputblur(queryString) {
      this.dataList = queryString
        ? this.SourceData.filter(this.createFilter(queryString))
        : this.SourceData;
      this.checkedstatus();
    },
    createFilter(queryString) {
      return (restaurant) => {
        const lowerCaseQuery = queryString.toLowerCase();
        const lowerCaseLabel = restaurant.label.toLowerCase();

        // 支持任意位置的匹配
        return lowerCaseLabel.includes(lowerCaseQuery);
      };
    },
    // 可用于将结果按照匹配度排序的函数
    sortByMatch(queryString, a, b) {
      const lowerCaseQuery = queryString.toLowerCase();
      const scoreA = this.calculateMatchScore(lowerCaseQuery, a.label);
      const scoreB = this.calculateMatchScore(lowerCaseQuery, b.label);

      // 根据匹配度得分进行排序
      return scoreB - scoreA;
    },
    calculateMatchScore(query, label) {
      const lowerCaseLabel = label.toLowerCase();
      return lowerCaseLabel.includes(query)
        ? lowerCaseLabel.indexOf(query)
        : Infinity;
    },

    handleCheckAllChange() {
      this.isIndeterminate = false;

      if (this.checkAll) {
        this.dataList.map((item) => {
          this.checkedList.push(item.value);
        });
        this.checkedList = [...new Set(this.checkedList)];
      } else {
        if (this.seek) {
          this.checkedList = this.checkedList.filter((item) => {
            const matchingItem = this.dataList.find((el) => el.value === item);
            return !matchingItem;
          });
        } else {
          this.checkedList = [];
        }
      }
    },
    //判断按钮状态
    checkedstatus() {
      let every = this.dataList.every((item) => {
        return this.checkedList.includes(item.value);
      });
      let some = this.dataList.some((item) => {
        return this.checkedList.includes(item.value);
      });
      if (every && some) {
        this.checkAll = true;
        this.isIndeterminate = false;
      } else if (!every && some) {
        this.isIndeterminate = true;
      } else {
        this.checkAll = false;
        this.isIndeterminate = false;
      }
    },
    invert() {
      this.dataList.forEach((item) => {
        if (this.checkedList.includes(item.value)) {
          this.checkedList = this.checkedList.filter(
            (value) => value !== item.value
          );
        } else {
          this.checkedList.push(item.value);
        }
      });
      this.checkedstatus();
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.dataList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.dataList.length;
      this.checkedstatus();
    },
    cancel() {
      if (this.selectvalue.length == this.dataList.length) {
        this.checkAll = true;
        this.isIndeterminate = false;
      } else {
        this.isIndeterminate = true;
      }
      if (!this.selectvalue.length) {
        this.checkedList = [];
        this.checkAll = false;
        this.isIndeterminate = false;
      }
      this.seek = "";
      this.inputblur();
      this.checkedList = this.selectvalue;
      this.$refs.messageDrop.hide();
    },
    confirm(val, name) {
      if (name == "only") {
        this.checkedList = [];
        this.checkedList.push(val.value);
      }
      let arr = [];
      arr = this.SourceData.filter((el, id) => {
        return this.checkedList.includes(el.value);
      });
      if (arr.length) {
        this.dropdownvalue = arr[0].label;
      } else {
        this.dropdownvalue = this.dropdowntitle;
        this.valuelength = 0;
      }
      this.selectvalue = this.checkedList;
      this.valuelength = this.checkedList.length - 1;
      let params = { [this.value]: this.selectvalue };
      this.cancel();
      this.$emit("search", params);
    },
    clear() {
      this.dropdownvalue = this.dropdowntitle;
      this.valuelength = 0;
      this.seek = "";
      this.selectvalue = [];
      this.checkedList = [];
      this.checkAll = false;
      this.isIndeterminate = false;
      this.inputblur();
      this.$refs.messageDrop.hide();
    },
  },
};
</script>

<style scoped lang='scss'>
.el-dropdown {
  width: 100%;
  height: 32px;
  line-height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.el-dropdown:hover {
  border: 1px solid #c0c4cc;
}
.el-dropdown_active {
  border: 1px solid #409eff;
}
.el-dropdown_active:hover {
  border: 1px solid #409eff;
}
.el-icon-arrow-up {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.rotate-arrow {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
::v-deep .el_input {
  padding: 0 10px;
  .el-input__inner {
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid #dcdfe6;
  }
  .el-input__inner:hover {
    border-bottom: 1px solid #409eff;
  }
}
.el-dropdown-menu {
  min-width: 400px;
  padding: 10px 0 0 0;
}
.checkbox-group {
  overflow: hidden;
  padding: 5px 0px 0;
  box-sizing: border-box;
}
.all-checked {
  position: fixed;
  span {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
    cursor: pointer;
  }
  .invertstatus:hover {
    color: #409eff;
  }
}
.checked-list {
  max-height: 180px;
  margin-top: 25px;
  overflow-y: auto;
  padding: 5px 0;
  box-sizing: border-box;
}
.top-height {
  margin-top: 0px;
}
.el-checkbox-group {
  display: flex;
  flex-direction: column;
}
.el-checkbox {
  margin-right: 0px !important;
  padding: 5px 0px 5px 10px;
  box-sizing: border-box;
}
.btnbox {
  padding: 5px;
  display: flex;
  justify-content: right;
  border-top: 1px solid #dcdfe6;
}
.el-dropdown-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 180px;
  font-size: 13px;
  font-weight: 500;
  color: #c0c4cc;
  cursor: pointer;
}
.list-length {
  padding: 3px 7px;
  margin-left: 10px;
  border-radius: 4px;
  color: #33333379;
  background-color: #dcdfe6;
}
.color {
  color: #333;
  font-weight: normal;
}
:focus-visible {
  outline: none;
}
.nothing {
  min-height: 80px;
  line-height: 80px;
  text-align: center;
  color: #c0c4cc;
}
.el-icon-close {
  opacity: 0;
}
.el-icon-close:hover {
  opacity: 1;
}
.setScore {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 14px;
  span {
    display: none;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    cursor: pointer;
  }
}
.setScore:hover {
  background-color: rgba(192, 196, 204, 0.267);
  span {
    display: block;
    color: #409eff;
    height: 100%;
  }
}
</style>