商品选择已选择列增加筛选

src/components/ProductsSelector/index.vue

@@ -12,7 +12,7 @@
           <el-input v-model="queryParams.titleZh" :placeholder="$t('产品关键字')" style="width:120px" clearable  :disabled="loading"/>
           <el-button type="primary" @click="reLoad" :loading="loading">{{$t('搜索')}}</el-button>
 
-          <div>
+          <div style="height: 36px; display: flex; align-items: center">
             <el-checkbox :label="$t('全选') + `(${$t('{total}个', {total})})`" @change="toggleAll" :disabled="isAllProduct || loading"></el-checkbox>
           </div>
         </div>
@@ -27,18 +27,28 @@
     </div>
     <div class="flex-1 ml-10">
       <el-card style="height:100%">
-        <div slot="header" class="header flex">
-          <div class="flex-1 flex items-center">{{$t('已选{cnt}个产品', {cnt: choosedList.length})}}</div>
+        <div slot="header" class="header">
+          <el-select v-model="selectedFilterParams.typeId" :placeholder="$t('选择类型')" style="width:120px" clearable :disabled="loading">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.titleZh" :value="item.id" />
+          </el-select>
+          <el-select v-model="selectedFilterParams.attrId" :placeholder="$t('选择属性')" style="width:120px" clearable :disabled="loading">
+            <el-option v-for="item in attrList" :key="item.id" :label="item.attrName" :value="item.id" />
+          </el-select>
+          <el-input v-model="selectedFilterParams.titleZh" :placeholder="$t('产品关键字')" style="width:120px" clearable  :disabled="loading"/>
+          <!--<el-button type="primary" @click="reLoad" :loading="loading">{{$t('搜索')}}</el-button>-->
 
-          <el-button :disabled="!choosedList.length" type="text" @click="clearAll">{{$t('全部清除')}}</el-button>
+          <div class="flex">
+            <div class="flex-1 flex items-center">{{$t('已选{cnt}个产品', {cnt: choosedList.length})}}</div>
+            <el-button :disabled="!choosedList.length" type="text" @click="clearAll">{{$t('全部清除')}}</el-button>
+          </div>
         </div>
         <div class="list">
-          <div class="item" v-for="(choosed) in selectedList" :key="choosed.id" :data-data="JSON.stringify(choosed)">
+          <div class="item" v-for="(choosed) in selectedList" :key="choosed.id">
             <el-link class="el-icon-delete" @click="remove(choosed)" :disabled="isAllProduct"/> {{choosed.titleZh}}
             <div>{{choosed.titleEn}}</div>
           </div>
         </div>
-				<el-pagination :total="choosedList.length" :page-sizes="[100, 200, 300, 500]" :page-size="pageSize" @current-change="rightPage = $event" layout="prev, pager, next, total, sizes" :current-page="rightPage" />
+				<el-pagination :total="filteredList.length" :page-sizes="[100, 200, 300, 500]" :page-size="pageSize" @current-change="rightPage = $event" layout="prev, pager, next, total, sizes" :current-page="rightPage" />
       </el-card>
     </div>
   </div>
@@ -75,6 +85,11 @@ export default {
         titleZh: null,
         typeId: null
       },
+      selectedFilterParams:{
+        attrId: null,
+        titleZh: null,
+        typeId: null
+      },
       choosedList: [],
       typeList: [],
       attrList: [],
@@ -110,9 +125,24 @@ export default {
     currentList(){
       return this.list.slice((this.leftPage - 1) * this.pageSize, this.leftPage * this.pageSize)
     },
-    // 已勾选的显示列表
+    // 已选中 且符合筛选的
+    filteredList(){
+      return this.choosedList.filter(item => {
+        if(this.selectedFilterParams.typeId && item.typeId != this.selectedFilterParams.typeId){
+          return false
+        }
+        if(this.selectedFilterParams.attrId && item.attrId != this.selectedFilterParams.attrId){
+          return false
+        }
+        if(this.selectedFilterParams.titleZh && item.titleZh.indexOf(this.selectedFilterParams.titleZh) == -1){
+          return false
+        }
+        return true
+      })
+    },
+    // 已勾选的显示列表，当前分页显示的
     selectedList(){
-      return this.choosedList.slice((this.rightPage - 1) * this.pageSize, this.rightPage * this.pageSize)
+      return this.filteredList.slice((this.rightPage - 1) * this.pageSize, this.rightPage * this.pageSize)
     }
   },
   watch: {