搜索公共組件增加筛选功能

yangfeng

2023-11-02 76fdc4851d86abbf90cd153ba6f1c87acba07fc7

 src/components/makepager/SearchCommonView.vue

@@ -2,7 +2,9 @@
  <div class="search-list">
    <div class="search-top">
      <div class="left">
        <el-button v-if="showAdd" :disabled="isDisabled" type="primary" size="mini" @click="addBtn">{{ addTitle }}</el-button>
        <el-button v-if="showAdd" :disabled="isDisabled" type="primary" size="mini" @click="addBtn">{{
          addTitle
        }}</el-button>
        <el-button v-if="showDiscard" size="mini" @click="discardBtn" style="margin-left: 0px">{{ "取消" }}</el-button>
        <div class="download" @click="downloadClick" :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }">
          <img src="@/assets/img/xiazai.png" style="width: 13px" />
@@ -49,19 +51,55 @@
            @change="searchClick"
            @clear="clearClick"
          >
            <template v-if="selectArr?.length > 0" slot="prepend">
              <div style="display: flex">
                <div v-for="(val, i) in selectArr" :key="i" class="pre-views">
                  <span style="margin-left: 5px">{{ val }}</span>
                  <i @click="delSelectClick(val)" class="el-icon-close" style="margint: 0 5px"></i>
                </div>
              </div>
            </template>
            <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="searchClick"></i>
          </el-input>
        </template>
        <div class="search-Btn">
          <div class="common">
            <img src="@/assets/img/shaixuan.png" style="width: 10px" />
            <span>筛选</span>
          </div>
          <div class="common">
          <el-dropdown
            style="
              cursor: pointer;
              font-weight: 500;
              font-size: 16px;
              line-height: 1;
              letter-spacing: 0.09px;
              color: #202224;
            "
            trigger="click"
            :hide-on-click="false"
            placement="bottom"
            @command="switchStatusKeywords($event, selList)"
          >
            <div class="common yes-cursor">
              <img src="@/assets/img/shaixuan.png" style="width: 10px" />
              <span>筛选</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, key) in taskStatusMap"
                :key="key"
                :command="item.title"
                :class="{ selected: status == item.title }"
              >
                <div class="dropdown-view">
                  <i v-show="getClass(selList, item)" class="el-icon-check icon-view"></i>
                  {{ item.title }}
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="common no-cursor">
            <i class="el-icon-s-fold"></i>
            <span>分组</span>
          </div>
          <div class="common">
          <div class="common no-cursor">
            <i class="el-icon-star-on"></i>
            <span>收藏</span>
          </div>
@@ -83,9 +121,9 @@
      type: Boolean,
      default: true
    },
    isDisabled:{
      type:Boolean,
      default:false
    isDisabled: {
      type: Boolean,
      default: false
    },
    showDiscard: {
      default: false
@@ -184,10 +222,24 @@
      this.searchInput = val
    }
  },
  computed: {
    getClass() {
      return function (row, i) {
        return row.includes(i.title) ? "selected" : null
      }
    }
  },
  data() {
    return {
      searchInput: "",
      searchSelValue: this.searchSel
      searchSelValue: this.searchSel,
      status: "",
      taskStatusMap: [
        { value: "0", type: "default", title: "完成" },
        { value: "1", type: "default", title: "就緒" }
      ],
      selList: [],
      selectArr: []
    }
  },
  methods: {
@@ -218,6 +270,29 @@
    // 模具-检查配置
    inspectionConfigClick() {
      this.$emit("inspectionConfigClick")
    },
    switchStatusKeywords(command, item) {
      console.log("index", command)
      this.status = command
      const oldValue = item
      console.log(oldValue)
      this.selectArr = oldValue
      if (item.includes(command)) {
        oldValue.splice(
          oldValue.findIndex((e) => e === command),
          1
        )
      } else {
        oldValue.push(command)
      }
    },
    // 删除筛选内容
    delSelectClick(item) {
      console.log(item)
      this.selectArr.splice(
        this.selectArr.findIndex((e) => e === item),
        1
      )
    }
  }
}
@@ -301,7 +376,7 @@
      margin-right: 20px;
      margin-left: 20px;
      .el-icon-search {
        margin-top: 22px;
        margin-top: 10px;
      }
      .search-Btn {
        display: flex;
@@ -313,7 +388,16 @@
        .common {
          width: 50px;
          text-align: center;
          cursor: no-drop;
        }
      }
      .pre-views {
        border: 1px solid #ccc;
        font-size: 12px;
        margin-right: 5px;
        border-radius: 3px;
        background: #f0f0f0;
        &:last-child {
          margin-right: 0px;
        }
      }
    }
@@ -323,6 +407,17 @@
  }
  .yellow {
    background: #e6a23c;
  }
}
.selected {
  color: #409eff;
}
.dropdown-view {
  position: relative;
  .icon-view {
    position: absolute;
    left: -15px;
    top: 11px;
  }
}

@@ -343,7 +438,8 @@
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #da2323;
      padding: 0 10px;
      background-color: #ffffff;
    }
    // .el-input__suffix {
    //   // 处理前缀图标不垂直居中的问题
@@ -363,5 +459,8 @@
      padding-right: 20px;
    }
  }
  .el-dropdown-menu__item {
    padding-left: 20px;
  }
}
</style>