123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <template>
- <el-autocomplete v-model.trim="keyWord" :fetch-suggestions="querySearchAsync"
- placeholder="请输入关键词/拼音/首字母" @select="handleSelect" style="width: 360px" class="reset-input">
- <i slot="prefix" class="el-input__icon el-icon-search"></i>
- <!-- <template slot-scope="{ item }">
- <div v-if="item.objectType == 'brand'" class="name">
- {{ item.BrandCname }}{{ item.BrandName?`(${item.BrandName})`:'' }}
- </div>
- <div v-else class="name">
- {{ item.AliasName }}{{ `(${item.AliasCode})` }}
- </div>
- </template> -->
- </el-autocomplete>
- </template>
- <script>
- import { dictionBrandQuery } from "@/api/dictionary"
- import { mapGetters } from "vuex"
- export default {
- data() {
- return {
- keyWord: '',
- };
- },
- computed: {
- ...mapGetters('layout', ['dictionary']),
- },
- mounted() {
- },
- methods: {
- querySearchAsync(queryString, cb) {
- if (queryString) {
- let params = {
- Keyword: queryString,
- Type: this.dictionary.dictionaryType,
- GroupId: this.dictionary.groupId,
- ProjectId: this.dictionary.projectId,
- PageSize: 5,
- }
- dictionBrandQuery(params, res => {
- this.$nextTick(() => {
- let brandList = res.Content[0].Brand.map(item => {
- return Object.assign(item, {
- value: `${item.BrandCname}${item.BrandName?`(${item.BrandName})`:''}`,
- objectType: 'brand'
- })
- })
- let prodTypeList = res.Content[0].ProdType.map(item => {
- return Object.assign(item, {
- value: `${item.DefMajor[0].DefClass[0].AliasName}(${item.DefMajor[0].DefClass[0].AliasCode})`,
- objectType: 'prodType'
- })
- })
- let results = [...brandList, ...prodTypeList]
- cb(results)
- })
- })
- } else {
- cb([])
- }
- },
- handleSelect(item) {
- if (item.objectType == 'brand') {
- this.$router.push({
- path: '/brand/brandDetail',
- query: {
- BrandCname: item.BrandCname,
- BrandID:item.BrandID,
- BrandName: item.BrandName
- }
- })
- } else {
- this.$router.push({
- path: '/product/productDetail',
- query: {
- major: item.Name,
- system: item.DefMajor[0].AliasName,
- class: item.DefMajor[0].DefClass[0].AliasName,
- code: item.DefMajor[0].DefClass[0].Code
- }
- })
- }
- }
- }
- };
- </script>
- <style scoped lang="scss">
- .reset-input {
- /deep/ .el-input__inner {
- background: #f6f6f6;
- }
- }
- </style>
- <style>
- .el-autocomplete-suggestion li {
- border-bottom: 1px solid #ebebeb;
- }
- </style>
|