|
@@ -2,7 +2,7 @@
|
|
|
<Layout :type="type" :placeholder="placeholder" :trigger="trigger" :value="computedVal">
|
|
|
<div class="cascade-content" slot="empty">
|
|
|
<div class="cascade-content-module">
|
|
|
- <header class="module-header">{{ placeholder }}</header>
|
|
|
+ <header class="module-header" v-if="showHeader">{{ placeholder }}</header>
|
|
|
<div class="module-main">
|
|
|
<ul>
|
|
|
<li class="module-item" :class="{ 'active': fActive === fIndex }" v-for="(first, fIndex) in firstList"
|
|
@@ -46,8 +46,14 @@ export default {
|
|
|
default: () => []
|
|
|
},
|
|
|
value: {
|
|
|
- type: [Object, Array],
|
|
|
- default: () => []
|
|
|
+ type: [Array,Object],
|
|
|
+ default: () => {
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showHeader: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
@@ -64,13 +70,37 @@ export default {
|
|
|
event: 'change'
|
|
|
},
|
|
|
computed: {
|
|
|
+ // 源数据是否带有【全部】选项
|
|
|
+ hadAll () {
|
|
|
+ return this.options.find(item => item.label === '全部') || false
|
|
|
+ },
|
|
|
+ // 源数据带有选项【全部】选项的值
|
|
|
+ hadAllValue () {
|
|
|
+ let result = ''
|
|
|
+ if(this.hadAll) {
|
|
|
+ this.options.forEach(item => {
|
|
|
+ if( item.label === '全部') {
|
|
|
+ result = item.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ },
|
|
|
computedVal() {
|
|
|
- return this.value.length ? `${this.placeholder}${this.value.length}个` : ''
|
|
|
+ let result = ''
|
|
|
+ if(Array.isArray(this.value) && this.value.length) {
|
|
|
+ if(this.hadAllValue && this.value.includes(this.hadAllValue)) {
|
|
|
+ result = ''
|
|
|
+ } else {
|
|
|
+ result = `${this.placeholder}${this.value.length}个`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
value(val) {
|
|
|
- // this.setState(val)
|
|
|
+ this.setState(val)
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -80,39 +110,57 @@ export default {
|
|
|
getArray() {
|
|
|
const options = this.options
|
|
|
const toArray = options.map(item => {
|
|
|
- return {
|
|
|
+ const resultObj = {
|
|
|
value: item.value,
|
|
|
label: item.label,
|
|
|
checked: false,
|
|
|
indeterminate: false,
|
|
|
disabled: false
|
|
|
}
|
|
|
+ if(this.hadAll && item.label === '全部') {
|
|
|
+ resultObj.all = true
|
|
|
+ }
|
|
|
+ return resultObj
|
|
|
})
|
|
|
return toArray
|
|
|
},
|
|
|
initData() {
|
|
|
const sourceList = this.getArray()
|
|
|
- sourceList.unshift({
|
|
|
- label: '全部',
|
|
|
- value: '全部',
|
|
|
- checked: false,
|
|
|
- disabled: false,
|
|
|
- indeterminate: false,
|
|
|
- all: true
|
|
|
- })
|
|
|
+ // 数据源无全部的时候,手动在数据头部插入一组全部数据
|
|
|
+ if(!this.hadAll) {
|
|
|
+ sourceList.unshift({
|
|
|
+ label: '全部',
|
|
|
+ value: '全部',
|
|
|
+ checked: false,
|
|
|
+ disabled: false,
|
|
|
+ indeterminate: false,
|
|
|
+ all: true
|
|
|
+ })
|
|
|
+ }
|
|
|
this.firstList = sourceList
|
|
|
- this.setState(this.value)
|
|
|
+ if(!this.value || this.value?.length === 0) {
|
|
|
+ this.setState(null)
|
|
|
+ } else {
|
|
|
+ this.setState(this.value)
|
|
|
+ }
|
|
|
},
|
|
|
onFirstChange(checked, first, fIndex) {
|
|
|
if (first.all) {
|
|
|
this.firstList.forEach(item => {
|
|
|
item.checked = checked
|
|
|
+ item.indeterminate = false
|
|
|
})
|
|
|
} else {
|
|
|
first.checked = checked
|
|
|
}
|
|
|
this.checkFirstAllStatus()
|
|
|
- this.$emit('change', this.getState())
|
|
|
+
|
|
|
+ // 会返回null和array两种数据类型!!!!!!
|
|
|
+ if (first.all) {
|
|
|
+ this.$emit('change', first.checked ? this.getState() : null)
|
|
|
+ } else {
|
|
|
+ this.$emit('change', this.getState())
|
|
|
+ }
|
|
|
},
|
|
|
restState() {
|
|
|
this.firstList.forEach(item => {
|
|
@@ -140,7 +188,9 @@ export default {
|
|
|
arr.push(item.value)
|
|
|
}
|
|
|
})
|
|
|
- if (arr.includes('全部')) {
|
|
|
+ if(this.hadAll && arr.includes(this.hadAllValue)){
|
|
|
+ return [this.hadAllValue]
|
|
|
+ } else if (arr.includes('全部')) {
|
|
|
return []
|
|
|
} else {
|
|
|
return arr
|
|
@@ -148,11 +198,18 @@ export default {
|
|
|
},
|
|
|
setState(value) {
|
|
|
this.restState()
|
|
|
- if (!value || value.length === 0) {
|
|
|
+ if (!value) {
|
|
|
this.firstList.forEach(item => {
|
|
|
item.checked = false
|
|
|
item.indeterminate = false
|
|
|
})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(Array.isArray(value) && value.length === 0) {
|
|
|
+ this.firstList.forEach(item => {
|
|
|
+ item.checked = true
|
|
|
+ item.indeterminate = false
|
|
|
+ })
|
|
|
} else {
|
|
|
this.firstList.forEach(item => {
|
|
|
if (value.includes(item.value)) {
|
|
@@ -162,6 +219,7 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
this.checkFirstAllStatus()
|
|
|
+ this.firstLoad = false
|
|
|
}
|
|
|
}
|
|
|
}
|