合并dev

zuozhengqing

2024-02-05 75954b2d3519560691726fd043b99737524491fb

 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" 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,60 @@
            @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?.title ?? 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">
          <div v-if="showSreen" class="common no-cursor">
            <img src="@/assets/img/shaixuan.png" style="width: 10px" />
            <span>筛选</span>
          </div>
          <div class="common">
          <el-dropdown
            v-else
            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="switchKeywords($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 screenArray"
                :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>
@@ -82,6 +125,10 @@
    showAdd: {
      type: Boolean,
      default: true
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    showDiscard: {
      default: false
@@ -173,6 +220,18 @@
    inputName: {
      type: String,
      default: ""
    },
    showSreen: {
      type: Boolean,
      default: true
    },
    searchTaskMap: {
      type: Array,
      default: () => []
    },
    screenArray: {
      type: Array,
      default: () => []
    }
  },
  watch: {
@@ -180,11 +239,28 @@
      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: "",
      selList: [],
      selectArr: []
    }
  },
  mounted() {
    this.searchTaskMap.forEach((ele) => {
      this.selList.push(ele.title)
    })
    this.selectArr = this.searchTaskMap
    this.searchInput = this.inputName
  },
  methods: {
    // 搜索
@@ -214,6 +290,31 @@
    // 模具-检查配置
    inspectionConfigClick() {
      this.$emit("inspectionConfigClick")
    },
    switchKeywords(command, item) {
      console.log("index", command, item)
      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)
      }
      this.$emit("switchKeywords", item)
    },
    // 删除筛选内容
    delSelectClick(item) {
      console.log(item)
      this.selectArr.splice(
        this.selectArr.findIndex((e) => e === item),
        1
      )
      this.$emit("delSelectClick", item)
    }
  }
}
@@ -297,7 +398,7 @@
      margin-right: 20px;
      margin-left: 20px;
      .el-icon-search {
        margin-top: 22px;
        margin-top: 10px;
      }
      .search-Btn {
        display: flex;
@@ -309,7 +410,16 @@
        .common {
          width: 50px;
          text-align: center;
          cursor: no-drop;
        }
      }
      .pre-views {
        border: 1px solid #c0c0c0;
        font-size: 12px;
        margin-right: 5px;
        border-radius: 3px;
        background: #f0f0f0;
        &:last-child {
          margin-right: 0px;
        }
      }
    }
@@ -319,6 +429,17 @@
  }
  .yellow {
    background: #e6a23c;
  }
}
.selected {
  color: #606266;
}
.dropdown-view {
  position: relative;
  .icon-view {
    position: absolute;
    left: -15px;
    top: 11px;
  }
}

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