添加品牌选择和品牌筛选

tanghaolin

2022-08-30 e6c7099b1f642c63822f8288471bfd9fbfeb5625

 src/views/Select/SelParams.vue

@@ -5,7 +5,7 @@
      <template #left>
        <div @click="pageBack" style="display: flex; align-items: center">
          <van-icon name="arrow-left" size="18" />
          <span>{{$t('selectPage.index.TR')}}</span>
          <span>{{ $t("selectPage.index.TR") }}</span>
        </div>
      </template>
      <template #title>
@@ -19,6 +19,7 @@
      </template>
    </van-nav-bar>
    <div class="selectParm_main">
      <!-- 流量 -->
      <van-field
        center
        clearable
@@ -30,7 +31,7 @@
        style="padding: 10px 26px"
      >
        <template #label>
          <span style="font-size: 14px">{{$t('ebookPage.flow.TR')}}</span>
          <span style="font-size: 14px">{{ $t("ebookPage.flow.TR") }}</span>
        </template>
        <template #button>
          <van-button
@@ -41,6 +42,7 @@
          >
        </template>
      </van-field>
      <!-- 扬程 -->
      <van-field
        center
        clearable
@@ -52,7 +54,7 @@
        style="padding: 10px 26px"
      >
        <template #label>
          <span style="font-size: 14px">{{$t('ebookPage.head.TR')}}</span>
          <span style="font-size: 14px">{{ $t("ebookPage.head.TR") }}</span>
        </template>
        <template #button>
          <van-button
@@ -63,6 +65,7 @@
          >
        </template>
      </van-field>
      <!-- 设置频率 -->
      <van-field
        readonly
        clickable
@@ -78,6 +81,7 @@
          <van-button disabled size="small" type="primary">Hz</van-button>
        </template>
      </van-field>
      <!-- 消防泵 -->
      <van-field
        readonly
        center
@@ -94,6 +98,7 @@
          </van-button>
        </template>
      </van-field>
      <!-- 转速 -->
      <van-field
        readonly
        center
@@ -102,7 +107,7 @@
        v-if="m_DeviceTpyeValue != 3"
        :label="$t('selectPage.speed.TR')"
        label-align="center"
        style="margin-bottom: 10px; padding: 10px 26px"
        style="padding: 10px 26px"
        @click="m_ShowMotorPolePicker = true"
      >
        <template #button>
@@ -111,11 +116,30 @@
          </van-button>
        </template>
      </van-field>
      <!-- 品牌 -->
      <van-field
        readonly
        center
        clearable
        v-model="m_BrandShowValue"
        label="品牌"
        label-align="center"
        style="margin-bottom: 10px; padding: 10px 26px"
        @click="getBrandData"
      >
        <template #button>
          <van-button disabled size="small" type="primary">
            <van-icon name="arrow" />
          </van-button>
        </template>
      </van-field>
      <van-collapse v-model="m_activeNames">
        <!-- 更多条件 -->
        <van-collapse-item name="moreTrade" style="margin-bottom: 10px">
          <template #title>
            <span style="font-size: 14px; font-weight: 600">{{$t('selectPage.drivingConditions.TR')}}</span>
            <span style="font-size: 14px; font-weight: 600">{{
              $t("selectPage.drivingConditions.TR")
            }}</span>
          </template>
          <van-field
            readonly
@@ -149,7 +173,9 @@
        <!-- 参数范围 -->
        <van-collapse-item name="paramLimit" style="margin-bottom: 10px">
          <template #title>
            <span style="font-size: 14px; font-weight: 600">{{$t('detailPage.medium.TR')}}</span>
            <span style="font-size: 14px; font-weight: 600">{{
              $t("detailPage.medium.TR")
            }}</span>
          </template>
          <van-field
            readonly
@@ -208,7 +234,9 @@
        <!-- 容差范围 -->
        <van-collapse-item name="tolerances">
          <template #title>
            <span style="font-size: 14px; font-weight: 600">{{$t('selectPage.toleranceRange.TR')}}</span>
            <span style="font-size: 14px; font-weight: 600">{{
              $t("selectPage.toleranceRange.TR")
            }}</span>
          </template>
          <van-field
            readonly
@@ -382,6 +410,17 @@
          @confirm="onChangeMotorPoleConfirm"
        />
      </van-popup>
      <!-- 品牌 -->
      <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_BrandColumns" :key="brand_index">
            <span>{{brand_item.ShortName}}</span>
          </div>
        </div>
      </van-action-sheet>
      <!-- 电机功率标准 -->
      <van-popup
        v-model:show="m_ShowMotorStdPicker"
@@ -497,6 +536,13 @@
        { text: "12p", value: 12, disabled: false },
      ], //转速等级

      m_ShowBrandPicker: false, //显示品牌弹框
      m_BrandValue: null, //选择的品牌的值
      m_BrandShowValue: "全部", //展示品牌选择后的值
      m_BrandColumns: [], //品牌选择数
      isInitBrandData:false,//是否获取了品牌数据
      brandSelectAll:false,

      m_DieselSpeed: "", //柴油机转速

      m_ShowMotorStdPicker: false, //转速等级选择弹框
@@ -542,9 +588,8 @@
  mounted() {
    this.m_Title =  this.getSoftName();
    // console.log(this.$i18n.locale,554)
    this.translateParamsToLang()
    this.translateParamsToLang();
    this.getParaPageInfo();


    this.m_DpQuText = UnitHelper.GetUnitNameQ(
      this.$globalConfig.UnitDefault.UnitQ.value
@@ -559,9 +604,9 @@
  methods: {
    getParaPageInfo() {
      let _this = this;
      let Toast = _this.$toast
      let Toast = _this.$toast;
      Toast.loading({
        message: 'loading...',
        message: "loading...",
        forbidClick: true,
      });
      _this
@@ -570,22 +615,22 @@
            _this.$globalConfig.WebApiUrl.MainUrl +
            "/v1/Mobile/SelectByParas/GetParaPageInfo",
            params:{
              Lang:_this.getCurrentLanguageType()
            }
            Lang: _this.getCurrentLanguageType(),
          },
        })
        .then((res) => {
          Toast.clear()
          Toast.clear();
          let result = res.data;
           console.log(res,575)
          // console.log(res, 575);
          if (result.Code != 0) {
            Toast.fail(result.Message)
            Toast.fail(result.Message);
            return;
          }
          if (result.Data.DriveTypeList) {
            _this.m_DeviceTpyeValue = result.Data.DriveTypeList[0].Value;
            _this.m_DeviceTpyeShowValue = result.Data.DriveTypeList[0].Text;

            console.log(_this.m_DeviceTpyeValue,_this.m_DeviceTpyeShowValue )
            // console.log(_this.m_DeviceTpyeValue, _this.m_DeviceTpyeShowValue);
            //获取驱动类型
            let deviceTpyeColumns = [];
            result.Data.DriveTypeList.forEach((element) => {
@@ -601,7 +646,8 @@
          if (result.Data.FireTypeList) {
            //获取消防泵类型
            _this.m_FireTypeValue = _this.$globalConfig.FireTypeDefault.value;
            _this.m_FireTypeShowValue = _this.$globalConfig.FireTypeDefault.text;
            _this.m_FireTypeShowValue =
              _this.$globalConfig.FireTypeDefault.text;
            let fireTypeColumns = [];
            result.Data.FireTypeList.forEach((element) => {
              let columns = {
@@ -610,7 +656,7 @@
                disable: !element.Enable,
              };
              if(element.Value == _this.m_FireTypeValue){
                _this.m_FireTypeShowValue = element.Text
                _this.m_FireTypeShowValue = element.Text;
              }
              fireTypeColumns.push(columns);
            });
@@ -635,21 +681,71 @@
          _this.getToleranceDefaultValue();
          _this.buildToleranceRangData();
          //console.log(res, 344);

          
        })
        .catch((err) => {
          console.log(err);
        });
    },
    translateParamsToLang(){
      let currentLang = this.$i18n.locale
      if(currentLang == 'en'){
        this.m_JieZhiNameColumns[0].text = `${this.$t('selectPage.cleanWater.TR')}`
        this.m_JieZhiNameShowValue = this.m_JieZhiNameColumns[0].text
    //获取品牌数据
    getBrandData() {
      this.m_ShowBrandPicker = true;
      console.log(this.isInitBrandData,987)
      if(this.isInitBrandData)return
      this.getBrandList();
    },

        this.m_MotorPoleColumns[0].text = `${this.$t('selectPage.unlimited.TR')}`
        this.m_MotorPoleShowValue = this.m_MotorPoleColumns[0].text
    //获取品牌列表
    getBrandList() {
      let _this = this;
      _this
        .$axios({
          methods: "get",
          url: _this.$globalConfig.WebApiUrl.MainUrl + "v1/Web/Corp/GetList",
          params: {
            lang: _this.getCurrentLanguageType(),
          },
        })
        .then(function (res) {
          _this.isInitBrandData = true
          //  console.log(res,"类型列表");
          let result = res.data;
          if (result.Code != 0) {
            return;
          }
          if (result.Data) {
            // console.log(result.Data, 158);
            let brandList = [];
            result.Data.forEach((element) => {
              let brandNode = {
                Description: element.Description,
                FullName: element.FullName,
                ID: element.ID,
                LogoPath:
                  _this.$globalConfig.WebApiUrl.FileUrl + element.LogoPath,
                ShortName: element.ShortName,
                IsSelect: false,
              };
              brandList.push(brandNode);
            });
            _this.m_BrandColumns = brandList;
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    translateParamsToLang() {
      let currentLang = this.$i18n.locale;
      if (currentLang == "en") {
        this.m_JieZhiNameColumns[0].text = `${this.$t(
          "selectPage.cleanWater.TR"
        )}`;
        this.m_JieZhiNameShowValue = this.m_JieZhiNameColumns[0].text;

        this.m_MotorPoleColumns[0].text = `${this.$t(
          "selectPage.unlimited.TR"
        )}`;
        this.m_MotorPoleShowValue = this.m_MotorPoleColumns[0].text;
      }
    },
    //获取上次填写表单的记录
@@ -675,16 +771,25 @@
        prvePathDataObj.DesignInfo.UnitQ
      );

      this.m_ToleranceStandardValue = prvePathDataObj.DesignInfo.ToleranceStandard //容差标准
      this.m_ToleranceLevelValue = prvePathDataObj.DesignInfo.PointTolerance.ToleranceGrade //容差等级
      this.m_ToleranceStandardValue =
        prvePathDataObj.DesignInfo.ToleranceStandard; //容差标准
      this.m_ToleranceLevelValue =
        prvePathDataObj.DesignInfo.PointTolerance.ToleranceGrade; //容差等级
      if(this.m_ToleranceLevelValue == 0){
          this.isToleranceLevelCustom = true
        this.isToleranceLevelCustom = true;
      }
      this.m_MinFlowPerecent =  parseFloat(prvePathDataObj.DesignInfo.PointTolerance.RatioMinQ * 100).toFixed(1); //最小流量百分比
      this.m_MaxFlowPerecent =  parseFloat(prvePathDataObj.DesignInfo.PointTolerance.RatioMaxQ * 100).toFixed(1); //最大流量百分比
      this.m_MinHeadPerecent =  parseFloat(prvePathDataObj.DesignInfo.PointTolerance.RatioMinH * 100).toFixed(1); //最小扬程百分比
      this.m_MaxHeadPerecent =  parseFloat(prvePathDataObj.DesignInfo.PointTolerance.RatioMaxH * 100).toFixed(1); //最大扬程百分比

      this.m_MinFlowPerecent = parseFloat(
        prvePathDataObj.DesignInfo.PointTolerance.RatioMinQ * 100
      ).toFixed(1); //最小流量百分比
      this.m_MaxFlowPerecent = parseFloat(
        prvePathDataObj.DesignInfo.PointTolerance.RatioMaxQ * 100
      ).toFixed(1); //最大流量百分比
      this.m_MinHeadPerecent = parseFloat(
        prvePathDataObj.DesignInfo.PointTolerance.RatioMinH * 100
      ).toFixed(1); //最小扬程百分比
      this.m_MaxHeadPerecent = parseFloat(
        prvePathDataObj.DesignInfo.PointTolerance.RatioMaxH * 100
      ).toFixed(1); //最大扬程百分比

      this.m_PinLvValue = prvePathDataObj.FilterInfo.MotorFrequence; //电机频率
      this.m_PinLvShowValue = prvePathDataObj.FilterInfo.MotorFrequence; //电机频率显示文字
@@ -704,18 +809,22 @@
      let defauleValueObj = this.pointToleranceConfig.DefaultValue;
      let currentDefauleValue = {
        Standard:"",
        ToleranceGrade:""
        ToleranceGrade: "",
      };
      // console.log(this.m_ToleranceStandardValue,this.m_ToleranceLevelValue,689)
      if(this.m_ToleranceStandardValue == "" || this.m_ToleranceStandardValue == undefined || this.m_ToleranceStandardValue == null){
      if (
        this.m_ToleranceStandardValue == "" ||
        this.m_ToleranceStandardValue == undefined ||
        this.m_ToleranceStandardValue == null
      ) {
        Object.keys(defauleValueObj).forEach((item) => {
          if (item == currentLangType) {
            currentDefauleValue = defauleValueObj[item];
          }
        });
      } else {
        currentDefauleValue.Standard = this.m_ToleranceStandardValue
        currentDefauleValue.ToleranceGrade = this.m_ToleranceLevelValue
        currentDefauleValue.Standard = this.m_ToleranceStandardValue;
        currentDefauleValue.ToleranceGrade = this.m_ToleranceLevelValue;
      }

      let selectList = this.pointToleranceConfig.Standard4PumpSelectList;
@@ -727,8 +836,13 @@
          if (grade.Value == currentDefauleValue.ToleranceGrade) {
            this.m_ToleranceLevelShowValue = grade.Name;
          }
          if (grade.Value != currentDefauleValue.ToleranceGrade && currentDefauleValue.ToleranceGrade == 0) {
            this.m_ToleranceLevelShowValue = `${this.$t('selectPage.custom.TR')}`;
          if (
            grade.Value != currentDefauleValue.ToleranceGrade &&
            currentDefauleValue.ToleranceGrade == 0
          ) {
            this.m_ToleranceLevelShowValue = `${this.$t(
              "selectPage.custom.TR"
            )}`;
          }
        });
      });
@@ -743,7 +857,7 @@
      let SelectList = this.pointToleranceConfig.Standard4PumpSelectList;
      SelectList.forEach((item,index) => {
        if(item.Value == this.m_ToleranceStandardValue){
            this.m_ToleranceStandardIndex = index
          this.m_ToleranceStandardIndex = index;
        }
        let standColumn = {
          text: "",
@@ -759,7 +873,7 @@
            item.Value == this.m_ToleranceStandardValue &&
            grade.Value == this.m_ToleranceLevelValue
          ) {
            this.m_ToleranceLevelIndex = gradeIndex
            this.m_ToleranceLevelIndex = gradeIndex;
            this.m_MinFlowPerecent = parseFloat(
              grade.Tol.RatioMinQ * 100
            ).toFixed(1); //最小流量百分比
@@ -786,12 +900,12 @@
        });
      });
      ToleranceLevelColumns.push({
        text: `${this.$t('selectPage.custom.TR')}`,
        text: `${this.$t("selectPage.custom.TR")}`,
        value: 0,
        disable: false,
      });
      if(this.m_ToleranceStandardValue == 0){
          this.m_ToleranceLevelIndex = ToleranceLevelColumns.length - 1
        this.m_ToleranceLevelIndex = ToleranceLevelColumns.length - 1;
      }
      this.m_ToleranceStandardColumns = ToleranceStandardColumns;
      this.m_ToleranceLevelColumns = ToleranceLevelColumns;
@@ -852,6 +966,51 @@
      this.m_MotorPoleValue = e.value;
      this.m_MotorPoleShowValue = e.text;
    },
    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 currentBrandSelectArr= []
      let currentBrandSelectName = []
      this.m_BrandColumns.forEach(item=>{
        if(item.ID == e.ID){
          item.IsSelect = !item.IsSelect
        }
        if(item.IsSelect){
         currentBrandSelectArr.push(item.ID)
         currentBrandSelectName.push(item.ShortName)
        }
      })

      this.m_BrandShowValue = currentBrandSelectName.join(',')
      this.m_BrandValue = currentBrandSelectArr
      //判断当前是否是全选
      if(this.m_BrandValue.length != this.m_BrandColumns.length){
        this.brandSelectAll = false
      }else {
        this.brandSelectAll = true
      }
      
    },
    //监听电机功率标准选择
    onChangeMotorStdConfirm(e) {
      this.m_ShowMotorStdPicker = false;
@@ -867,7 +1026,7 @@
    //监听校验容差标准的选择
    onChangeToleranceStandardConfirm(e,index) {
      this.isToleranceLevelCustom = false;
      this.m_ToleranceStandardIndex = index
      this.m_ToleranceStandardIndex = index;
      this.m_ToleranceStandardPicker = false;
      this.m_ToleranceStandardValue = e.value;
      this.m_ToleranceStandardShowValue = e.text;
@@ -887,11 +1046,11 @@
      this.isToleranceLevelCustom = false;
      this.m_ToleranceLevelPicker = false;
      this.m_ToleranceLevelValue = e.value;
      this.m_ToleranceLevelIndex = index
      this.m_ToleranceLevelIndex = index;
      this.m_ToleranceLevelShowValue = e.text;
      if (e.value == 0) {
        this.isToleranceLevelCustom = true;
        return
        return;
      }
      this.buildToleranceRangData();
    },
@@ -968,11 +1127,11 @@
        //select 表示vuex的文件名
        filterData: groupPageData,
      });
        this.gotoPage("/Select/PumpCategory","",null)
      this.gotoPage("/Select/PumpCategory", "", null);
    },
    //返回上一页
    pageBack() {
        this.gotoPage("/Index","",null)
      this.gotoPage("/Index", "", null);
    },
  },
};
@@ -1008,6 +1167,39 @@
    }
    .van-field__control {
      text-indent: 5.5em;
      text-overflow: ellipsis;
    }
    .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
      }
    }
  }
}