123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <template>
- <el-cascader
- class="selector-cascader buyer-class-cascader no-select"
- v-if="useDefaultCascader"
- v-model="value"
- :options="optionsList"
- :props="propsData"
- :append-to-body="false"
- collapse-tags
- @change="onChange"
- clearable></el-cascader>
- <el-popover
- v-else
- class="selector-cascader buyer-class-cascader no-select"
- :append-to-body="false"
- :visible-arrow="false"
- @show="onPopoverShow"
- @hide="onPopoverHide"
- trigger="click">
- <el-cascader-panel
- v-model="value"
- :options="optionsList"
- :props="propsData"
- @change="onChange"
- ></el-cascader-panel>
- <div class="el-cascader virtual-cascader" slot="reference">
- <div class="el-input virtual-input el-input--suffix" :class="{ 'is-focus': popover.show }">
- <div class="el-input__inner ellipsis" v-html="inputValue"></div>
- <span class="el-input__suffix">
- <span class="el-input__suffix-inner">
- <i class="el-input__icon el-icon-arrow-down" :class="{ 'is-reverse': popover.show }"></i>
- </span>
- </span>
- </div>
- </div>
- </el-popover>
- </template>
- <script>
- import { industryListMapExp } from '@/assets/js/selector.js'
- import { cascaderMixin } from '@/utils/mixins/selector-cascader'
- import { selectorVModelMixin } from '@/utils/mixins/selector-v-model'
- export default {
- name: 'IndustryCascader',
- mixins: [cascaderMixin, selectorVModelMixin],
- props: {
- useDefaultCascader: {
- type: Boolean,
- default: false
- },
- placeholder: {
- type: String,
- default: '行业'
- },
- // 数据结构和industryListMapExp相同
- showOptions: {
- type: Object,
- default () {
- return {}
- }
- }
- },
- data () {
- return {
- value: '',
- industryListMapExp,
- propsData: {
- expandTrigger: 'hover',
- multiple: true
- }
- }
- },
- computed: {
- inputValue () {
- const length = this.value.length
- if (this.value.length) {
- return `${this.placeholder} <span class="highlight-text">${length}</span>个`
- } else {
- return `${this.placeholder}`
- }
- },
- optionsMap () {
- const optMap = this.showOptions
- if (optMap && Object.keys(optMap).length) {
- return optMap
- } else {
- return this.industryListMapExp
- }
- },
- optionsList () {
- const map = this.optionsMap
- const arr = []
- for (const key in map) {
- const item = map[key]
- if (item.length) {
- const children = item.map(t => {
- return {
- label: t,
- value: t
- }
- })
- arr.push({
- label: key,
- value: key,
- children
- })
- } else {
- arr.push({
- label: key,
- value: key
- })
- }
- }
- return arr
- }
- },
- methods: {
- // 根据子集name获得父级name
- getParentNameFromChildrenName (name) {
- for (const key in this.optionsMap) {
- const item = this.optionsMap[key]
- if (item.includes(name)) {
- return key
- }
- }
- },
- // 设置页面状态
- // data = ['xxx']
- setState (data = []) {
- if (!Array.isArray(data)) {
- return
- }
- if (data.length === 0) {
- this.value = []
- } else {
- const valueArr = []
- data.forEach(item => {
- const parentKey = this.getParentNameFromChildrenName(item)
- if (parentKey) {
- valueArr.push([parentKey, item])
- } else {
- valueArr.push([item])
- }
- })
- this.value = valueArr
- }
- },
- // 获取数据,并整理成前端标准格式
- getState (value = this.value) {
- const map = {}
- // 把value转map
- if (Array.isArray(value)) {
- value.forEach(item => {
- const key = item[0]
- const value = item[1]
- if (map[key]) {
- map[key].push(value)
- } else {
- map[key] = [value]
- }
- })
- }
- return map
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import '~@/assets/style/selector-cascader-common.scss'
- </style>
|