IndustryCascader.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <el-cascader
  3. class="selector-cascader buyer-class-cascader no-select"
  4. v-if="useDefaultCascader"
  5. v-model="value"
  6. :options="optionsList"
  7. :props="propsData"
  8. :append-to-body="false"
  9. collapse-tags
  10. @change="onChange"
  11. clearable></el-cascader>
  12. <el-popover
  13. v-else
  14. class="selector-cascader buyer-class-cascader no-select"
  15. :append-to-body="false"
  16. :visible-arrow="false"
  17. @show="onPopoverShow"
  18. @hide="onPopoverHide"
  19. trigger="click">
  20. <el-cascader-panel
  21. v-model="value"
  22. :options="optionsList"
  23. :props="propsData"
  24. @change="onChange"
  25. ></el-cascader-panel>
  26. <div class="el-cascader virtual-cascader" slot="reference">
  27. <div class="el-input virtual-input el-input--suffix" :class="{ 'is-focus': popover.show }">
  28. <div class="el-input__inner ellipsis" v-html="inputValue"></div>
  29. <span class="el-input__suffix">
  30. <span class="el-input__suffix-inner">
  31. <i class="el-input__icon el-icon-arrow-down" :class="{ 'is-reverse': popover.show }"></i>
  32. </span>
  33. </span>
  34. </div>
  35. </div>
  36. </el-popover>
  37. </template>
  38. <script>
  39. import { industryListMapExp } from '@/assets/js/selector.js'
  40. import { cascaderMixin } from '@/utils/mixins/selector-cascader'
  41. import { selectorVModelMixin } from '@/utils/mixins/selector-v-model'
  42. export default {
  43. name: 'IndustryCascader',
  44. mixins: [cascaderMixin, selectorVModelMixin],
  45. props: {
  46. useDefaultCascader: {
  47. type: Boolean,
  48. default: false
  49. },
  50. placeholder: {
  51. type: String,
  52. default: '行业'
  53. },
  54. // 数据结构和industryListMapExp相同
  55. showOptions: {
  56. type: Object,
  57. default () {
  58. return {}
  59. }
  60. }
  61. },
  62. data () {
  63. return {
  64. value: '',
  65. industryListMapExp,
  66. propsData: {
  67. expandTrigger: 'hover',
  68. multiple: true
  69. }
  70. }
  71. },
  72. computed: {
  73. inputValue () {
  74. const length = this.value.length
  75. if (this.value.length) {
  76. return `${this.placeholder} <span class="highlight-text">${length}</span>个`
  77. } else {
  78. return `${this.placeholder}`
  79. }
  80. },
  81. optionsMap () {
  82. const optMap = this.showOptions
  83. if (optMap && Object.keys(optMap).length) {
  84. return optMap
  85. } else {
  86. return this.industryListMapExp
  87. }
  88. },
  89. optionsList () {
  90. const map = this.optionsMap
  91. const arr = []
  92. for (const key in map) {
  93. const item = map[key]
  94. if (item.length) {
  95. const children = item.map(t => {
  96. return {
  97. label: t,
  98. value: t
  99. }
  100. })
  101. arr.push({
  102. label: key,
  103. value: key,
  104. children
  105. })
  106. } else {
  107. arr.push({
  108. label: key,
  109. value: key
  110. })
  111. }
  112. }
  113. return arr
  114. }
  115. },
  116. methods: {
  117. // 根据子集name获得父级name
  118. getParentNameFromChildrenName (name) {
  119. for (const key in this.optionsMap) {
  120. const item = this.optionsMap[key]
  121. if (item.includes(name)) {
  122. return key
  123. }
  124. }
  125. },
  126. // 设置页面状态
  127. // data = ['xxx']
  128. setState (data = []) {
  129. if (!Array.isArray(data)) {
  130. return
  131. }
  132. if (data.length === 0) {
  133. this.value = []
  134. } else {
  135. const valueArr = []
  136. data.forEach(item => {
  137. const parentKey = this.getParentNameFromChildrenName(item)
  138. if (parentKey) {
  139. valueArr.push([parentKey, item])
  140. } else {
  141. valueArr.push([item])
  142. }
  143. })
  144. this.value = valueArr
  145. }
  146. },
  147. // 获取数据,并整理成前端标准格式
  148. getState (value = this.value) {
  149. const map = {}
  150. // 把value转map
  151. if (Array.isArray(value)) {
  152. value.forEach(item => {
  153. const key = item[0]
  154. const value = item[1]
  155. if (map[key]) {
  156. map[key].push(value)
  157. } else {
  158. map[key] = [value]
  159. }
  160. })
  161. }
  162. return map
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="scss" scoped>
  168. @import '~@/assets/style/selector-cascader-common.scss'
  169. </style>