remoteSearch.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <el-autocomplete v-model.trim="keyWord" :fetch-suggestions="querySearchAsync"
  3. placeholder="请输入关键词/拼音/首字母" @select="handleSelect" style="width: 360px" class="reset-input">
  4. <i slot="prefix" class="el-input__icon el-icon-search"></i>
  5. <!-- <template slot-scope="{ item }">
  6. <div v-if="item.objectType == 'brand'" class="name">
  7. {{ item.BrandCname }}{{ item.BrandName?`(${item.BrandName})`:'' }}
  8. </div>
  9. <div v-else class="name">
  10. {{ item.AliasName }}{{ `(${item.AliasCode})` }}
  11. </div>
  12. </template> -->
  13. </el-autocomplete>
  14. </template>
  15. <script>
  16. import { dictionBrandQuery } from "@/api/dictionary"
  17. import { mapGetters } from "vuex"
  18. export default {
  19. data() {
  20. return {
  21. keyWord: '',
  22. };
  23. },
  24. computed: {
  25. ...mapGetters('layout', ['dictionary']),
  26. },
  27. mounted() {
  28. },
  29. methods: {
  30. querySearchAsync(queryString, cb) {
  31. if (queryString) {
  32. let params = {
  33. Keyword: queryString,
  34. Type: this.dictionary.dictionaryType,
  35. GroupId: this.dictionary.groupId,
  36. ProjectId: this.dictionary.projectId,
  37. PageSize: 5,
  38. }
  39. dictionBrandQuery(params, res => {
  40. this.$nextTick(() => {
  41. let brandList = res.Content[0].Brand.map(item => {
  42. return Object.assign(item, {
  43. value: `${item.BrandCname}${item.BrandName?`(${item.BrandName})`:''}`,
  44. objectType: 'brand'
  45. })
  46. })
  47. let prodTypeList = res.Content[0].ProdType.map(item => {
  48. return Object.assign(item, {
  49. value: `${item.DefMajor[0].DefClass[0].AliasName}(${item.DefMajor[0].DefClass[0].AliasCode})`,
  50. objectType: 'prodType'
  51. })
  52. })
  53. let results = [...brandList, ...prodTypeList]
  54. cb(results)
  55. })
  56. })
  57. } else {
  58. cb([])
  59. }
  60. },
  61. handleSelect(item) {
  62. if (item.objectType == 'brand') {
  63. this.$router.push({
  64. path: '/brand/brandDetail',
  65. query: {
  66. BrandCname: item.BrandCname,
  67. BrandID:item.BrandID,
  68. BrandName: item.BrandName
  69. }
  70. })
  71. } else {
  72. this.$router.push({
  73. path: '/product/productDetail',
  74. query: {
  75. major: item.Name,
  76. system: item.DefMajor[0].AliasName,
  77. class: item.DefMajor[0].DefClass[0].AliasName,
  78. code: item.DefMajor[0].DefClass[0].Code
  79. }
  80. })
  81. }
  82. }
  83. }
  84. };
  85. </script>
  86. <style scoped lang="scss">
  87. .reset-input {
  88. /deep/ .el-input__inner {
  89. background: #f6f6f6;
  90. }
  91. }
  92. </style>
  93. <style>
  94. .el-autocomplete-suggestion li {
  95. border-bottom: 1px solid #ebebeb;
  96. }
  97. </style>