productBrand.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import { productBrandQuery } from '@/api/productBrand'
  2. const ProductBrand = {
  3. template: `
  4. <a-select
  5. :placeholder="placeholder"
  6. :id="id"
  7. allowClear
  8. :value="defaultVal"
  9. :showSearch="true"
  10. :disabled="disabled"
  11. @change="handleChange"
  12. option-filter-prop="children"
  13. :filter-option="filterOption">
  14. <a-select-option v-for="item in productBrandList" :key="item.brandSn" :value="item.brandSn">{{ item.brandName }}</a-select-option>
  15. </a-select>
  16. `,
  17. props: {
  18. value: {
  19. type: String,
  20. defatut: ''
  21. },
  22. id: {
  23. type: String,
  24. default: ''
  25. },
  26. placeholder:{
  27. type: String,
  28. default: '请选择产品品牌'
  29. },
  30. brandType: {
  31. type: String,
  32. default: ''
  33. },
  34. disabled: {
  35. type: Boolean,
  36. default: false
  37. },
  38. // 是否显示全品牌
  39. showAllBrand:{
  40. type: Boolean,
  41. default: false
  42. }
  43. },
  44. data() {
  45. return {
  46. defaultVal: this.value,
  47. productBrandList: []
  48. };
  49. },
  50. mounted() {
  51. const a = this.$store.state.app.productBrandAllList
  52. // 有缓存
  53. if(a){
  54. this.setBrandData(a||[])
  55. }else{
  56. this.getProductBrand()
  57. }
  58. },
  59. watch: {
  60. value(newValue, oldValue) {
  61. this.defaultVal = newValue
  62. },
  63. brandType(newValue,oldValue){
  64. this.handleChange(undefined)
  65. const a = this.$store.state.app.productBrandAllList
  66. // 有缓存
  67. if(a){
  68. this.setBrandData(a||[])
  69. }else{
  70. this.getProductBrand()
  71. }
  72. }
  73. },
  74. methods: {
  75. filterOption (input, option) {
  76. return (
  77. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  78. )
  79. },
  80. handleChange(value) {
  81. this.defaultVal = value;
  82. const row = this.productBrandList.find(item => item.brandSn == value)
  83. this.$emit('input', value);
  84. this.$emit('change', value, this.id, row);
  85. },
  86. setBrandData(data){
  87. // brandType: 1 自主品牌 2 代理品牌
  88. if(this.brandType!=''){
  89. this.productBrandList = data.filter(item => item.brandType == this.brandType)
  90. }else{
  91. this.productBrandList = data
  92. }
  93. // 是否显示全品牌
  94. const hasAll = this.productBrandList.find(item => item.brandSn == 'ALL')
  95. if(this.showAllBrand && !hasAll){
  96. this.productBrandList.unshift({brandSn:'ALL',brandName:'全品牌'})
  97. }
  98. },
  99. // 产品品牌列表,
  100. getProductBrand () {
  101. productBrandQuery({}).then(res => {
  102. let ret = []
  103. if (res.status == 200) {
  104. ret = res.data
  105. } else {
  106. ret = []
  107. }
  108. // 缓存数据
  109. this.$store.state.app.productBrandAllList = ret
  110. this.setBrandData(ret)
  111. })
  112. },
  113. },
  114. };
  115. export default ProductBrand