emis-app/components/tpx-checkitems/tpx-checkitems.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>