From e6c7099b1f642c63822f8288471bfd9fbfeb5625 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期二, 30 八月 2022 13:20:38 +0800
Subject: [PATCH] 添加品牌选择和品牌筛选
---
src/views/Select/SelSeries.vue | 170 +++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 147 insertions(+), 23 deletions(-)
diff --git a/src/views/Select/SelSeries.vue b/src/views/Select/SelSeries.vue
index bbffac8..ea10884 100644
--- a/src/views/Select/SelSeries.vue
+++ b/src/views/Select/SelSeries.vue
@@ -9,7 +9,7 @@
</div>
</template>
<template #title>
- <label>{{$t("selectPage.seriesRange.TR")}}</label>
+ <label>{{m_currentCatalogName}}</label>
</template>
<template #right>
<div @click="toSelPumpList" style="display: flex; align-items: center">
@@ -20,6 +20,15 @@
</van-nav-bar>
<div class="selectSeriews_main">
<van-row class="select_title_style" type="flex">
+ <van-col
+ span="6"
+ @click="m_ShowBrandPicker = true"
+ >
+ <div :class="m_ShowBrandPicker?'brand-filter':''">
+ <van-icon name="filter-o" />
+ <span style="font-size:14px">鍝佺墝</span>
+ </div>
+ </van-col>
<van-col
v-if="m_setSeriesMethod.byCatalog.isVisible"
class="select_btn"
@@ -57,14 +66,14 @@
</van-col>
</van-row>
<!-- 鎸夌被鍨嬪垎绫诲垪琛� -->
- <div style="height: calc(100% - 42px); overflow: auto" v-if="m_selectIndex == 1">
+ <div class="select-series-continer" style="height: calc(100% - 42px); overflow: auto" v-if="m_selectIndex == 1">
<van-cell
v-for="(item, index) in m_VisibleSeriesList"
clickable
title-style="color:#808080"
:key="item.ID"
:label="item.CatalogName"
- @click="toggle(item.ID, index)"
+ @click="toggle(index)"
>
<template #title>
<span style="font-weight: 700; font-size: 16px;">{{item.Name}}</span>
@@ -80,13 +89,13 @@
v-model="item.isCheck"
checked-color="#528abe"
:name="item"
- ref="checkboxes"
+ @click="toggle(index)"
/>
</template>
</van-cell>
</div>
<!-- 鎸夎涓氬垎绫诲垪琛� -->
- <div style="height: calc(100% - 42px); overflow: auto" v-if="m_selectIndex == 2">
+ <div clas style="height: calc(100% - 42px); overflow: auto" v-if="m_selectIndex == 2">
<van-radio-group v-model="m_currentSelectHY">
<van-cell-group>
<van-cell
@@ -132,6 +141,17 @@
</van-radio-group>
</div>
</div>
+ <!-- 鍝佺墝 -->
+ <van-action-sheet v-model:show="m_ShowBrandPicker" title="鍝佺墝閫夋嫨">
+ <div class="brand-content">
+ <div class="brand-item" @click="onChangeBrandSelectAll" :class="brandSelectAll?'brand-item-active':''">
+ <span>鍏ㄩ儴</span>
+ </div>
+ <div class="brand-item" @click="onChangeBrandSelect(brand_item)" :class="brand_item.isSelect?'brand-item-active':''" v-for="(brand_item,brand_index) in m_allBrandList" :key="brand_index">
+ <span>{{brand_item.name}}</span>
+ </div>
+ </div>
+ </van-action-sheet>
<transition name="van-slide-left">
<div class="poptips" v-show="showPopover">{{$t('selectPage.seriesRangTips.TR')}}</div>
</transition>
@@ -151,6 +171,7 @@
m_userID:0,
m_pumpCategoryID:"",//娉靛瀷ID
m_pageTitle: "",
+ m_currentCatalogName:"",//褰撳墠绫诲瀷鐨勫悕绉�
m_SeriesList: [], //鍘熷绯诲垪鍒楄〃
m_currentSelectHY: "", //褰撳墠閫変腑鐨勮涓�
@@ -158,7 +179,8 @@
m_currentSelectJZ: "",
m_allJZList: [], //鎵�鏈変粙璐ㄥ垪琛�
-
+ m_allBrandList:[],//褰撳墠鎵�鏈夊搧鐗�
+ brandSelectAll:false,//鏄惁閫夋嫨鎵�鏈夊搧鐗�
m_VisibleSeriesList: [], //鐢ㄤ簬椤甸潰灞曠ず鐨勭郴鍒楀垪琛�
m_prevPageData: {}, //涓婁釜椤甸潰浼犲叆鐨勬暟鎹�
@@ -166,7 +188,7 @@
m_SelectSeriesID: [], //鍌ㄥ瓨閫夋嫨鐨勭郴鍒楃殑id
m_pinlv: "", //鐢垫満棰戠巼
m_SelectAllList: false,
-
+ m_ShowBrandPicker:false,//鏄剧ず鍝佺墝閫夋嫨寮规
m_setSeriesMethod: {
byCatalog: {
isDisable: true,
@@ -185,25 +207,23 @@
};
},
mounted() {
- let _this = this;
-
+ let _this = this;
let userType = this.$store.state.instante.account.UserType;
let userID = this.$store.state.instante.account.UserID;
this.m_userType = userType;
this.m_userID = userID;
this.m_pageTitle = this.getSoftName();
document.title = this.m_pageTitle
-
+ this.m_currentCatalogName = this.$route.query.catalogName
let prvePathDataObj = this.$store.state.instante.select.ByParas.filterData;
+ // console.log(prvePathDataObj,198)
if (prvePathDataObj) {
this.m_prevPageData = prvePathDataObj;
this.m_pinlv = prvePathDataObj.FilterInfo.MotorFrequence;
this.m_pumpCategoryID = prvePathDataObj.FilterInfo.CatalogID
if (prvePathDataObj.FilterInfo.SeriesID) {
//console.log(prvePathDataObj.FilterInfo.SeriesID,104)
- this.m_SelectSeriesID = prvePathDataObj.FilterInfo.SeriesID.split(
- ","
- ).map(Number);
+ this.m_SelectSeriesID = prvePathDataObj.FilterInfo.SeriesID.split(",");
}
}
if (this.m_SelectSeriesID.length == 0) {
@@ -249,7 +269,7 @@
}
})
.then(res => {
- // console.log(res);
+ console.log(res);
let result = res.data;
if (result.Code != 0) {
myToast.clear();
@@ -262,13 +282,19 @@
}
if (result.Data) {
myToast.clear();
- _this.m_setSeriesMethod.byCatalog.isVisible = true;
+ let brandList = []
let seriesList = result.Data;
seriesList.forEach(element => {
element.isCheck = false;
+ let brandObj = {
+ name:element.CorpName,
+ isSelect:false
+ }
+ brandList.push(brandObj)
});
_this.m_SeriesList = seriesList;
-
+ _this.m_allBrandList = _this.uniqueCorpList(brandList)
+ // console.log(_this.m_allBrandList,287)
if (_this.m_SelectSeriesID) {
_this.m_SelectSeriesID.forEach(item => {
_this.m_SeriesList.forEach(seriesItem => {
@@ -350,18 +376,15 @@
// console.log(this.m_VisibleSeriesList,186)
},
//鎸夌被鍨嬪閫� checkbox 閫夋嫨鐘舵�佸垏鎹�
- toggle(ID, index) {
- this.m_VisibleSeriesList[index].isCheck = !this.m_VisibleSeriesList[index]
- .isCheck;
-
+ toggle(index) {
+ this.m_VisibleSeriesList[index].isCheck = !this.m_VisibleSeriesList[index].isCheck;
let ser_id = [];
this.m_VisibleSeriesList.forEach(ser_item => {
if (ser_item.isCheck) {
ser_id.push(ser_item.ID);
}
});
- if (ser_id.length > 0) this.m_SelectSeriesID = ser_id;
- // console.log(this.m_SelectSeriesID, 239);
+ this.m_SelectSeriesID = ser_id;
},
//鎸夎涓氶�夋嫨
clickHYItem(item) {
@@ -498,7 +521,7 @@
IsVisCorrect: this.m_prevPageData.DesignInfo.IsVisCorrect //鏄惁淇绮樺害 榛樿false
}
};
-
+ console.log(groupPageData,497)
//灏嗙瓫閫夋暟鎹瓨鍌ㄥ埌vuex涓�
this.$store.commit("instante/select/ByParas", {
//select 琛ㄧずvuex鐨勬枃浠跺悕
@@ -507,6 +530,63 @@
this.gotoPage("/Select/PumpList", "", null);
//console.log(groupPageData);
//console.log(this.m_SelectSeriesID);
+ },
+ // 鍏ㄩ��
+ onChangeBrandSelectAll(){
+ this.brandSelectAll = !this.brandSelectAll
+ let currentBrandSelectArr= []
+ let currentBrandSelectName = []
+ this.m_BrandColumns.forEach(item=>{
+ if(this.brandSelectAll){
+ item.IsSelect = true
+ }else {
+ item.IsSelect = false
+ }
+
+ if(item.IsSelect){
+ currentBrandSelectArr.push(item.ID)
+ currentBrandSelectName.push(item.ShortName)
+ }
+ })
+
+ this.m_BrandShowValue = currentBrandSelectName.join(',')
+ this.m_BrandValue = currentBrandSelectArr
+ },
+ //鐩戝惉鍝佺墝閫夋嫨
+ onChangeBrandSelect(e){
+ console.log(e,965)
+ let showSeriesList = [];
+ this.m_allBrandList.forEach(item=>{
+ if(item.name == e.name){
+ item.isSelect = !item.isSelect
+ }
+ if(item.IsSelect){
+ this.m_SeriesList.forEach(series_item=>{
+ if(item.name = series_item.CorpName){
+ showSeriesList.push(series_item)
+ }
+ })
+ }
+ })
+
+ this.m_VisibleSeriesList = showSeriesList
+ //鍒ゆ柇褰撳墠鏄惁鏄叏閫�
+ // if(this.m_BrandValue.length != this.m_BrandColumns.length){
+ // this.brandSelectAll = false
+ // }else {
+ // this.brandSelectAll = true
+ // }
+
+ },
+ //鍏徃绛涢�夊垪琛ㄥ幓閲�
+ uniqueCorpList (arr) {
+ let map = new Map();
+ for (let item of arr) {
+ if (!map.has(item.name)) {
+ map.set(item.name, item);
+ }
+ }
+ return [...map.values()];
}
}
};
@@ -584,7 +664,51 @@
color: #fff;
}
}
+ .select-series-continer{
+ .van-tag{
+ position: absolute;
+ top: 3px;
+ right: 15px;
+ }
+ }
}
+ .brand-filter{
+ i,span{
+ color: #578ebe;
+ }
+ }
+ .brand-content {
+ height: 50vh;
+ padding: 0px 5px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-content: flex-start;
+ }
+ .brand-item {
+ display: flex;
+ flex-direction: column;
+ width: 120px;
+ height: 32px;
+ justify-content: center;
+ align-items: center;
+ background-color: #f1f2f3;
+ border-radius: 20px;
+ margin-bottom: 10px;
+ margin-right: 5px;
+ box-sizing: border-box;
+ span{
+ font-size: 12px;
+ }
+ }
+ .brand-item-active{
+ border: 1px solid #578ebe;
+ background-color: #ecf5ff;
+ span{
+ font-size: 12px;
+ color:#578ebe
+ }
+ }
.poptips {
// width: 135px;
height: 18px;
--
Gitblit v1.9.3