From 76fdc4851d86abbf90cd153ba6f1c87acba07fc7 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 02 十一月 2023 19:18:24 +0800
Subject: [PATCH] 搜索公共組件增加筛选功能
---
src/components/makepager/SearchCommonView.vue | 127 +++++++++++++++++++++++++++++++++++++----
1 files changed, 113 insertions(+), 14 deletions(-)
diff --git a/src/components/makepager/SearchCommonView.vue b/src/components/makepager/SearchCommonView.vue
index 205de19..758e664 100644
--- a/src/components/makepager/SearchCommonView.vue
+++ b/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>
--
Gitblit v1.8.0