|
@@ -1,14 +1,28 @@
|
|
|
<template>
|
|
|
- <Layout :type="type" :placeholder="placeholder" :trigger="trigger" :value="computedVal">
|
|
|
+ <Layout
|
|
|
+ :type="type"
|
|
|
+ :placeholder="placeholder"
|
|
|
+ :trigger="trigger"
|
|
|
+ :value="computedVal"
|
|
|
+ >
|
|
|
<div class="cascade-content" slot="empty">
|
|
|
<div class="cascade-content-module">
|
|
|
- <header class="module-header" v-if="showHeader">{{ 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"
|
|
|
- :key="first.name">
|
|
|
- <el-checkbox v-model="first.checked" :indeterminate="first.indeterminate"
|
|
|
- @change="onFirstChange($event, first, fIndex)">
|
|
|
+ <li
|
|
|
+ class="module-item"
|
|
|
+ :class="{ active: fActive === fIndex }"
|
|
|
+ v-for="(first, fIndex) in firstList"
|
|
|
+ :key="first.name"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ v-model="first.checked"
|
|
|
+ :indeterminate="first.indeterminate"
|
|
|
+ @change="onFirstChange($event, first, fIndex)"
|
|
|
+ >
|
|
|
</el-checkbox>
|
|
|
<span class="item-name">{{ first.label }}</span>
|
|
|
</li>
|
|
@@ -46,7 +60,7 @@ export default {
|
|
|
default: () => []
|
|
|
},
|
|
|
value: {
|
|
|
- type: [Array,Object],
|
|
|
+ type: [Array, Object],
|
|
|
default: () => {
|
|
|
return null
|
|
|
}
|
|
@@ -71,15 +85,15 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
// 源数据是否带有【全部】选项
|
|
|
- hadAll () {
|
|
|
- return this.options.find(item => item.label === '全部') || false
|
|
|
+ hadAll() {
|
|
|
+ return this.options.find((item) => item.label === '全部') || false
|
|
|
},
|
|
|
// 源数据带有选项【全部】选项的值
|
|
|
- hadAllValue () {
|
|
|
+ hadAllValue() {
|
|
|
let result = ''
|
|
|
- if(this.hadAll) {
|
|
|
- this.options.forEach(item => {
|
|
|
- if( item.label === '全部') {
|
|
|
+ if (this.hadAll) {
|
|
|
+ this.options.forEach((item) => {
|
|
|
+ if (item.label === '全部') {
|
|
|
result = item.value
|
|
|
}
|
|
|
})
|
|
@@ -88,11 +102,12 @@ export default {
|
|
|
},
|
|
|
computedVal() {
|
|
|
let result = ''
|
|
|
- if(Array.isArray(this.value) && this.value.length) {
|
|
|
- if(this.hadAllValue && this.value.includes(this.hadAllValue)) {
|
|
|
+ const value = this.value.filter((r) => !!r)
|
|
|
+ if (Array.isArray(value) && value.length) {
|
|
|
+ if (this.hadAllValue && value.includes(this.hadAllValue)) {
|
|
|
result = ''
|
|
|
} else {
|
|
|
- result = `${this.placeholder}${this.value.length}个`
|
|
|
+ result = `${this.placeholder}${value.length}个`
|
|
|
}
|
|
|
}
|
|
|
return result
|
|
@@ -109,7 +124,7 @@ export default {
|
|
|
methods: {
|
|
|
getArray() {
|
|
|
const options = this.options
|
|
|
- const toArray = options.map(item => {
|
|
|
+ const toArray = options.map((item) => {
|
|
|
const resultObj = {
|
|
|
value: item.value,
|
|
|
label: item.label,
|
|
@@ -117,17 +132,17 @@ export default {
|
|
|
indeterminate: false,
|
|
|
disabled: false
|
|
|
}
|
|
|
- if(this.hadAll && item.label === '全部') {
|
|
|
+ if (this.hadAll && item.label === '全部') {
|
|
|
resultObj.all = true
|
|
|
}
|
|
|
- return resultObj
|
|
|
+ return resultObj
|
|
|
})
|
|
|
return toArray
|
|
|
},
|
|
|
initData() {
|
|
|
const sourceList = this.getArray()
|
|
|
// 数据源无全部的时候,手动在数据头部插入一组全部数据
|
|
|
- if(!this.hadAll) {
|
|
|
+ if (!this.hadAll) {
|
|
|
sourceList.unshift({
|
|
|
label: '全部',
|
|
|
value: '全部',
|
|
@@ -138,7 +153,7 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
this.firstList = sourceList
|
|
|
- if(!this.value || this.value?.length === 0) {
|
|
|
+ if (!this.value || this.value?.length === 0) {
|
|
|
this.setState(null)
|
|
|
} else {
|
|
|
this.setState(this.value)
|
|
@@ -146,7 +161,7 @@ export default {
|
|
|
},
|
|
|
onFirstChange(checked, first, fIndex) {
|
|
|
if (first.all) {
|
|
|
- this.firstList.forEach(item => {
|
|
|
+ this.firstList.forEach((item) => {
|
|
|
item.checked = checked
|
|
|
item.indeterminate = false
|
|
|
})
|
|
@@ -163,32 +178,37 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
restState() {
|
|
|
- this.firstList.forEach(item => {
|
|
|
+ this.firstList.forEach((item) => {
|
|
|
item.checked = false
|
|
|
item.indeterminate = false
|
|
|
})
|
|
|
},
|
|
|
checkFirstAllStatus() {
|
|
|
- const allFistList = this.firstList.filter(item => !item.all)
|
|
|
- const selectedFirstList = this.firstList.filter(item => !item.all && item.checked)
|
|
|
- const allHalfSelected = this.firstList.filter(item => !item.all && item.indeterminate)
|
|
|
+ const allFistList = this.firstList.filter((item) => !item.all)
|
|
|
+ const selectedFirstList = this.firstList.filter(
|
|
|
+ (item) => !item.all && item.checked
|
|
|
+ )
|
|
|
+ const allHalfSelected = this.firstList.filter(
|
|
|
+ (item) => !item.all && item.indeterminate
|
|
|
+ )
|
|
|
if (allFistList.length === selectedFirstList.length) {
|
|
|
this.firstList[0].checked = true
|
|
|
this.firstList[0].indeterminate = false
|
|
|
} else {
|
|
|
this.firstList[0].checked = false
|
|
|
- this.firstList[0].indeterminate = selectedFirstList.length > 0 || allHalfSelected.length > 0
|
|
|
+ this.firstList[0].indeterminate =
|
|
|
+ selectedFirstList.length > 0 || allHalfSelected.length > 0
|
|
|
}
|
|
|
},
|
|
|
getState() {
|
|
|
const list = JSON.parse(JSON.stringify(this.firstList))
|
|
|
let arr = []
|
|
|
- list.forEach(item => {
|
|
|
+ list.forEach((item) => {
|
|
|
if (item.checked) {
|
|
|
arr.push(item.value)
|
|
|
}
|
|
|
})
|
|
|
- if(this.hadAll && arr.includes(this.hadAllValue)){
|
|
|
+ if (this.hadAll && arr.includes(this.hadAllValue)) {
|
|
|
return [this.hadAllValue]
|
|
|
} else if (arr.includes('全部')) {
|
|
|
return []
|
|
@@ -199,20 +219,23 @@ export default {
|
|
|
setState(value) {
|
|
|
this.restState()
|
|
|
if (!value) {
|
|
|
- this.firstList.forEach(item => {
|
|
|
+ this.firstList.forEach((item) => {
|
|
|
item.checked = false
|
|
|
item.indeterminate = false
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
- if(Array.isArray(value)) {
|
|
|
- if(value.length === 0 || (value.length === 1 && value[0] === this.hadAllValue)) {
|
|
|
- this.firstList.forEach(item => {
|
|
|
+ if (Array.isArray(value)) {
|
|
|
+ if (
|
|
|
+ value.length === 0 ||
|
|
|
+ (value.length === 1 && value[0] === this.hadAllValue)
|
|
|
+ ) {
|
|
|
+ this.firstList.forEach((item) => {
|
|
|
item.checked = true
|
|
|
item.indeterminate = false
|
|
|
})
|
|
|
} else {
|
|
|
- this.firstList.forEach(item => {
|
|
|
+ this.firstList.forEach((item) => {
|
|
|
if (value.includes(item.value)) {
|
|
|
item.checked = true
|
|
|
item.indeterminate = false
|