160 lines
3.1 KiB
Vue
160 lines
3.1 KiB
Vue
<template>
|
|
<view v-for="(item, index) in filDataList" :style="itemStyle"
|
|
@click="handleCheckBoxClick(item, index)"
|
|
>
|
|
<slot :item="item" :index="index" :checked="checkedVal.indexOf(item.val)>-1" :handleCheckFun="()=> { handleCheckBoxClick(item, index) }"
|
|
></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { transListKeyTitle } from "@/common/util"
|
|
|
|
const typeEnum = {
|
|
single: 'single',
|
|
multiple: 'multiple'
|
|
}
|
|
|
|
const vdataTypeEnum = {
|
|
string: 'string',
|
|
array: 'array'
|
|
}
|
|
|
|
export default {
|
|
computed: {
|
|
filDataList() {
|
|
let list = this.list || []
|
|
if(this.transKeyVal) {
|
|
list = transListKeyTitle({ ...this.transKeyVal, list: list })
|
|
}
|
|
list.map(t=> {
|
|
t.val = t.val + ''
|
|
})
|
|
return list
|
|
},
|
|
checkedVal() {
|
|
let val = this.value
|
|
let res = []
|
|
if (Array.isArray(val)) {
|
|
res = val
|
|
}
|
|
if (typeof val == 'string' && val !== '') {
|
|
res = val.split(",")
|
|
}
|
|
if (typeof val == 'number') {
|
|
res = [val + '']
|
|
}
|
|
return res
|
|
},
|
|
},
|
|
props: {
|
|
list: {
|
|
default () {
|
|
return []
|
|
}
|
|
},
|
|
checkedList: {
|
|
default () {
|
|
return []
|
|
}
|
|
},
|
|
value: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
text: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
vdataType: {
|
|
default () {
|
|
return vdataTypeEnum.string
|
|
}
|
|
},
|
|
minChecked: {
|
|
default () {
|
|
return 0
|
|
}
|
|
},
|
|
type: {
|
|
default () {
|
|
return typeEnum.multiple // typeEnum | ''; 为空代表不做切换选中功能
|
|
}
|
|
},
|
|
itemStyle: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
transKeyVal: {
|
|
default () {
|
|
return null
|
|
// {
|
|
// // valKey: '',
|
|
// // titleKey: ''
|
|
// }
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
unmounted() {},
|
|
|
|
methods: {
|
|
handleCheckBoxClick(curItem, index) {
|
|
let checkedVal = [].concat(this.checkedVal)
|
|
if (this.type) {
|
|
const curVal = curItem.val
|
|
const hasChked = checkedVal.indexOf(curVal) > -1
|
|
if (hasChked) {
|
|
// 取消选中前，校验最小选中个数
|
|
if(checkedVal.length > this.minChecked) {
|
|
checkedVal = checkedVal.filter(val => val != curVal)
|
|
}
|
|
} else {
|
|
if (this.type == typeEnum.multiple) {
|
|
checkedVal.push(curVal)
|
|
} else {
|
|
checkedVal = [curVal]
|
|
}
|
|
}
|
|
this.changeTabCheck(checkedVal)
|
|
}
|
|
this.$emit('onItemClick', { curItem, index, checked: checkedVal.indexOf(curItem.val)>-1 })
|
|
},
|
|
changeTabCheck(checkedVal) {
|
|
let value = checkedVal
|
|
let allList = this.filDataList.concat(this.checkedList)
|
|
let checkedList = []
|
|
checkedVal.map(val=> {
|
|
let item = allList.filter(t=> t.val == val)[0]
|
|
item && checkedList.push(item)
|
|
})
|
|
let text = checkedList.map(t=> t.title)
|
|
if(this.vdataType == vdataTypeEnum.string) {
|
|
value = value.join(',')
|
|
text = text.join(',')
|
|
}
|
|
this.$emit('onChange', value, text, checkedList)
|
|
this.$emit('update:value', value)
|
|
this.$emit('update:text', text)
|
|
this.$emit('update:checkedList', checkedList)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |