dev/dcp-web-gate/src_old/components/searchNew.vue

<template>
  <div>
    <div class="box1">
      <div class="box2">
        <div class="title">
<!--          <div class="statistics">-->
<!--            {{ $t('common.Searchin')}}-->
<!--            <span> {{informationTotal}} </span>-->
<!--            {{ $t('common.SearchInInformation')}}-->
<!--          </div>-->
          <div class="input-box">
            <el-autocomplete
              class="input-with-select"
              :placeholder="$t('common.LookingSearch')"
              maxlength="50"
              show-word-limit
              @keyup.enter.native="toView('WholeStationSearch',select,homeInput)"
              v-model="homeInput"
              :fetch-suggestions="querySearchAsync"
              @select="handleSelect"
            >
              <template slot-scope="{ item }">
                  <div class="innerHead" v-if="item.value!=='暂无匹配内容'">
                      <div>
                          <p>
                              <span v-html="item.nameStr"/>
                          </p>
                      </div>
                  </div>
                  <div v-else>
                      <!--<span v-if="$i18n.locale=='zh'">暂无匹配内容</span>
                      <span v-if="$i18n.locale=='en'">No match is found</span> -->
	                  <span style="display: inline-block;">&nbsp;</span>
                  </div>
              </template>
              <el-select v-model="select" slot="prepend" style="text-align: center !important;">
                <el-option class="beforecontent" :label="$t('common.WholeStation')" value="all"></el-option>
                <el-option class="beforecontent" :label="$t('common.Project')" value="project"></el-option>
                 <el-option class="beforecontent" :label="$t('common.MemberUnit')" value="member_unit"></el-option>
                <el-option class="beforecontent" :label="$t('common.Enterprise')" value="unit"></el-option>
                <el-option class="beforecontent" :label="$t('common.News')" value="information"></el-option>
                <el-option class="beforecontent" :label="$t('common.Events')" value="activity"></el-option>
                <el-option class="beforecontent" :label="$t('common.Conference')" value="meeting"></el-option>
                <el-option class="beforecontent" :label="$t('common.Publications')" value="journal"></el-option>
                <el-option class="beforecontent" :label="$t('common.Country')" value="country"></el-option>
              </el-select>
              <!-- <el-button slot="append" >搜索</el-button> -->
              <!-- <template slot="prepend">{{serch}}</template> -->
            </el-autocomplete>
<!--            <ul class="quick-search-list">-->
<!--              <li v-for="(item,index) in hotSerch" @click="toView('WholeStationSearch',select,item.label,2)">-->
<!--                {{$t(item.label)}}-->
<!--              </li>-->
<!--            </ul>-->
          </div>
          <el-button type="warning" @click="toView('WholeStationSearch',select,homeInput)">{{$i18n.locale=='en'? 'Search': '搜索'}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Bus from "@/api/bus"; //注意引入
import { getDcpSearchWordsBeforeLogin,getDcpSearchWordsAfterLogin } from "@/api/dataBroadcastInfos";
export default {
  name: "Search",
  data() {
    return {
      title: "项目资源",
      serch: "项目",
      select: "all",
      homeInput: "",
      placeHolder: "",
      label: "",
      hotSerch:[{
        label:'common.cleanenergy'
      },{
        label:'common.Smartgrid'
      },{
        label:'common.Energystorage'
      },{
        label:'common.UHV'
      },{
        label:'common.GEI'
      }],
      restaurants: [],
      state: '',
      timeout:  null
    };
  },
  watch: {
	"$i18n.locale"() {
	  //区分登录与未登录的下拉框信息
    if(this.$Cookies.get('token')){
      this.MygetDcpSearchWordsAfterLogin()
    }else{
      this.MygetDcpSearchWordsBeforeLogin();
    }
	},
	videoUrl: function (val) {
	  // const myPlayer = this.$refs.videoPlayer.player
	  if (val !== "") {
		this.$refs.videoPlayer.player.src(val);
	  }
	},
	state: function (val) {
	  if (val) {
		this.$refs.videoPlayer.player.pause();
	  }
	},
  },
  created() {
    // this.lookingChange();
    Bus.$on("title", (val) => {
      this.title = val.label;
    });
    Bus.$on("serch", (val) => {
      this.serch = val.label;
    });
    // let that = this;
    // document.onkeypress = (e) =>{
    //   var keycode = document.all ? event.keyCode : e.which;
    //   if (keycode == 13) {
    //     that.toView('WholeStationSearch',that.select,that.homeInput)
    //     return false;
    //   }
    // };
    //区分登录与未登录的下拉框信息
    if(this.$Cookies.get('token')){
      this.MygetDcpSearchWordsAfterLogin()
    }else{
      this.MygetDcpSearchWordsBeforeLogin();
    }
  },

  props: {
    informationTotal: {
      type: String,
      default: "",
    },
  },
  methods: {
    // lookingChange(){
    //   this.placeHolder=$t('common.LookingSearch');
    // }
    toView(router, select, input,num) {
      if(num){
        input=this.$t(input);
      }
      if (!input) {
        this.$message({
          message: this.$t("common.Theinputboxcannotbeempty"),
          type: "warning",
        });
      } else {
        this.$store.commit("modify", router);
        window.localStorage.setItem("router", router);
        const { href } = this.$router.resolve({
          name: router,
          query: {
            select: select,
            input: input,
          },
        });
        window.open(href, "_blank");
      }
    },
    MygetDcpSearchWordsBeforeLogin(){
      getDcpSearchWordsBeforeLogin(this.$i18n.locale).then((res)=>{
        this.restaurants = res.data.dcpSearchWordsBeforeLogin;
        // this.restaurants = this.loadAll();
        var arr = [];
        res.data.dcpSearchWordsBeforeLogin.forEach(element => {
          arr.push({"value":element.searchWordsName})
        });
        this.restaurants = arr;
      })
    },
    MygetDcpSearchWordsAfterLogin(){
      getDcpSearchWordsAfterLogin().then((res)=>{
        var arr = [];
        res.data.dcpSearchWordsAfterLogin.forEach(element => {
          arr.push({"value":element.searchName})
        });
        this.restaurants = arr;
      })
    },
    // querySearchAsync(queryString, cb) {
    //   var restaurants = this.restaurants;
    //   var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
    //   clearTimeout(this.timeout);
    //   this.timeout = setTimeout(() => {
    //     cb(results);
    //   }, 500 * Math.random());
    //   console.log('111111111111111111',queryString)
    // },
    querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          results = results.map(res => {
            res.nameStr = res.value.replace(queryString, `<span style="color: red;">${queryString}</span>`)
            return res
          })

          if (results.length === 0) {
            results[0] = {
              value: '暂无匹配内容'
            }
          }
          console.log(results);
          cb(results);
        }, 500 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.toView('WholeStationSearch',this.select,item.value)
    }
  },
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.box1 {
  width:100%;
  background: #0E4891;
  height: 60px;
}
.box2 {
  width: 1180px;
  margin: 0 auto;
  padding-top: 11px;
}
.box1 .title {
  font-size: 15px;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  color: #666;
  width: 1180px;
  display: flex;
  margin-top: 2px;
}
.box1 .statistics{
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 40px;
}
.box1 .statistics span{
  font-size: 24px;
  color: #FFAA05;
}
.box1 .input-box{
  flex: 1;
  margin: 0 10px 0 20px;
  margin-top: -8px;
}
.box1 >>> .el-input--suffix .el-input__inner {
  text-align: center;
}
.box2>>>.el-input__inner {
  height: 36px;
}
.box1 .title >>> .el-input-group__prepend {
  width: 70px;
  background: #fff;
  font-size: 16px;
  font-weight: bold;
  color: #2573E0;
  line-height: 22px;
}
.box1 >>>.el-button{
  height: 36px;
  width: 80px;
  font-size: 16px;
}

.box1 .header1 >>> .el-input-group__prepend {
  background-color: #fff;
  color: #000;
}
.box1 .title >>> .el-input-group {
  border-radius: 20px;
}

.quick-search-list{
  font-size: 12px;
  color: #fff;
  line-height: 26px;
  margin-left: 87px;
}
.quick-search-list li{
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.quick-search-list li:hover{
  color: #dd531b;
}
.beforecontent {
  padding-left: 20px;
}
.el-autocomplete{
  width: 100%;
}
</style>