gypsy-crm-frontend-vu/uni_modules/uni-table/components/uni-table/uni-table.vue

<template>
	<view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
		<!-- #ifdef H5 -->
		<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }">
			<slot></slot>
			<tr v-if="noData" class="uni-table-loading">
				<td class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</td>
			</tr>
			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }">
				<div class="uni-table--loader"></div>
			</view>
		</table>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="uni-table" :class="{ 'table--stripe': stripe }">
			<slot></slot>
			<view v-if="noData" class="uni-table-loading">
				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
			</view>
			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }">
				<div class="uni-table--loader"></div>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
/**
 * Table 表格
 * @description 用于展示多条结构类似的数据
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
 * @property {Boolean} 	border 				是否带有纵向边框
 * @property {Boolean} 	stripe 				是否显示斑马线
 * @property {Boolean} 	type 					是否开启多选
 * @property {String} 	emptyText 			空数据时显示的文本内容
 * @property {Boolean} 	loading 			显示加载中
 * @event {Function} 	selection-change 	开启多选时，当选择项发生变化时会触发该事件
 */
export default {
	name: 'uniTable',
	options: {
		// #ifdef MP-TOUTIAO
		virtualHost: false,
		// #endif
		// #ifndef MP-TOUTIAO
		virtualHost: true
		// #endif
	},
	emits: ['selection-change'],
	props: {
		data: {
			type: Array,
			default() {
				return []
			}
		},
		// 是否有竖线
		border: {
			type: Boolean,
			default: false
		},
		// 是否显示斑马线
		stripe: {
			type: Boolean,
			default: false
		},
		// 多选
		type: {
			type: String,
			default: ''
		},
		// 没有更多数据
		emptyText: {
			type: String,
			default: '没有更多数据'
		},
		loading: {
			type: Boolean,
			default: false
		},
		rowKey: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			noData: true,
			minWidth: 0,
			multiTableHeads: []
		}
	},
	watch: {
		loading(val) { },
		data(newVal) {
			let theadChildren = this.theadChildren
			let rowspan = 1
			if (this.theadChildren) {
				rowspan = this.theadChildren.rowspan
			}

			// this.trChildren.length - rowspan
			this.noData = false
			// this.noData = newVal.length === 0
		}
	},
	created() {
		// 定义tr的实例数组
		this.trChildren = []
		this.thChildren = []
		this.theadChildren = null
		this.backData = []
		this.backIndexData = []
	},

	methods: {
		isNodata() {
			let theadChildren = this.theadChildren
			let rowspan = 1
			if (this.theadChildren) {
				rowspan = this.theadChildren.rowspan
			}
			this.noData = this.trChildren.length - rowspan <= 0
		},
		/**
		 * 选中所有
		 */
		selectionAll() {
			let startIndex = 1
			let theadChildren = this.theadChildren
			if (!this.theadChildren) {
				theadChildren = this.trChildren[0]
			} else {
				startIndex = theadChildren.rowspan - 1
			}
			let isHaveData = this.data && this.data.length > 0
			theadChildren.checked = true
			theadChildren.indeterminate = false
			this.trChildren.forEach((item, index) => {
				if (!item.disabled) {
					item.checked = true
					if (isHaveData && item.keyValue) {
						const row = this.data.find(v => v[this.rowKey] === item.keyValue)
						if (!this.backData.find(v => v[this.rowKey] === row[this.rowKey])) {
							this.backData.push(row)
						}
					}
					if (index > (startIndex - 1) && this.backIndexData.indexOf(index - startIndex) === -1) {
						this.backIndexData.push(index - startIndex)
					}
				}
			})
			// this.backData = JSON.parse(JSON.stringify(this.data))
			this.$emit('selection-change', {
				detail: {
					value: this.backData,
					index: this.backIndexData
				}
			})
		},
		/**
		 * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
		 */
		toggleRowSelection(row, selected) {
			// if (!this.theadChildren) return
			row = [].concat(row)

			this.trChildren.forEach((item, index) => {
				// if (item.keyValue) {

				const select = row.findIndex(v => {
					//
					if (typeof v === 'number') {
						return v === index - 1
					} else {
						return v[this.rowKey] === item.keyValue
					}
				})
				let ischeck = item.checked
				if (select !== -1) {
					if (typeof selected === 'boolean') {
						item.checked = selected
					} else {
						item.checked = !item.checked
					}
					if (ischeck !== item.checked) {
						this.check(item.rowData || item, item.checked, item.rowData ? item.keyValue : null, true)
					}
				}
				// }
			})
			this.$emit('selection-change', {
				detail: {
					value: this.backData,
					index: this.backIndexData
				}
			})
		},

		/**
		 * 用于多选表格，清空用户的选择
		 */
		clearSelection() {
			let theadChildren = this.theadChildren
			if (!this.theadChildren) {
				theadChildren = this.trChildren[0]
			}
			// if (!this.theadChildren) return
			theadChildren.checked = false
			theadChildren.indeterminate = false
			this.trChildren.forEach(item => {
				// if (item.keyValue) {
				item.checked = false
				// }
			})
			this.backData = []
			this.backIndexData = []
			this.$emit('selection-change', {
				detail: {
					value: [],
					index: []
				}
			})
		},
		/**
		 * 用于多选表格，切换所有行的选中状态
		 */
		toggleAllSelection() {
			let list = []
			let startIndex = 1
			let theadChildren = this.theadChildren
			if (!this.theadChildren) {
				theadChildren = this.trChildren[0]
			} else {
				startIndex = theadChildren.rowspan - 1
			}
			this.trChildren.forEach((item, index) => {
				if (!item.disabled) {
					if (index > (startIndex - 1)) {
						list.push(index - startIndex)
					}
				}
			})
			this.toggleRowSelection(list)
		},

		/**
		 * 选中\取消选中
		 * @param {Object} child
		 * @param {Object} check
		 * @param {Object} rowValue
		 */
		check(child, check, keyValue, emit) {
			let theadChildren = this.theadChildren
			if (!this.theadChildren) {
				theadChildren = this.trChildren[0]
			}



			let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
			if (childDomIndex < 0) {
				childDomIndex = this.data.findIndex(v => v[this.rowKey] === keyValue) + 1
			}
			const dataLen = this.trChildren.filter(v => !v.disabled && v.keyValue).length
			if (childDomIndex === 0) {
				check ? this.selectionAll() : this.clearSelection()
				return
			}

			if (check) {
				if (keyValue) {
					this.backData.push(child)
				}
				this.backIndexData.push(childDomIndex - 1)
			} else {
				const index = this.backData.findIndex(v => v[this.rowKey] === keyValue)
				const idx = this.backIndexData.findIndex(item => item === childDomIndex - 1)
				if (keyValue) {
					this.backData.splice(index, 1)
				}
				this.backIndexData.splice(idx, 1)
			}

			const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled)
			if (!domCheckAll) {
				theadChildren.indeterminate = false
				theadChildren.checked = true
			} else {
				theadChildren.indeterminate = true
				theadChildren.checked = false
			}

			if (this.backIndexData.length === 0) {
				theadChildren.indeterminate = false
			}

			if (!emit) {
				this.$emit('selection-change', {
					detail: {
						value: this.backData,
						index: this.backIndexData
					}
				})
			}
		}
	}
}
</script>

<style lang="scss">
$border-color: #ebeef5;

.uni-table-scroll {
	width: 100%;
	/* #ifndef APP-NVUE */
	overflow-x: auto;
	/* #endif */
}

.uni-table {
	position: relative;
	width: 100%;
	border-radius: 5px;
	// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	background-color: var(--color-white);
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	display: table;
	overflow-x: auto;

	::v-deep .uni-table-tr:nth-child(n + 2) {
		&:hover {
			background-color: #f5f7fa;
		}
	}

	::v-deep .uni-table-thead {
		.uni-table-tr {

			// background-color: #f5f7fa;
			&:hover {
				background-color: #fafafa;
			}
		}
	}

	/* #endif */
}

.table--border {
	border: 1px $border-color solid;
	border-right: none;
}

.border-none {
	/* #ifndef APP-NVUE */
	border-bottom: none;
	/* #endif */
}

.table--stripe {

	/* #ifndef APP-NVUE */
	::v-deep .uni-table-tr:nth-child(2n + 3) {
		background-color: #fafafa;
	}

	/* #endif */
}

/* 表格加载、无数据样式 */
.uni-table-loading {
	position: relative;
	/* #ifndef APP-NVUE */
	display: table-row;
	/* #endif */
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	box-sizing: border-box;
}

.empty-border {
	border-right: 1px $border-color solid;
}

.uni-table-text {
	position: absolute;
	right: 0;
	left: 0;
	text-align: center;
	font-size: 14px;
	color: #999;
}

.uni-table-mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 99;
	/* #ifndef APP-NVUE */
	display: flex;
	margin: auto;
	transition: all 0.5s;
	/* #endif */
	justify-content: center;
	align-items: center;
}

.uni-table--loader {
	width: 30px;
	height: 30px;
	border: 2px solid #aaa;
	// border-bottom-color: transparent;
	border-radius: 50%;
	/* #ifndef APP-NVUE */
	animation: 2s uni-table--loader linear infinite;
	/* #endif */
	position: relative;
}

@keyframes uni-table--loader {
	0% {
		transform: rotate(360deg);
	}

	10% {
		border-left-color: transparent;
	}

	20% {
		border-bottom-color: transparent;
	}

	30% {
		border-right-color: transparent;
	}

	40% {
		border-top-color: transparent;
	}

	50% {
		transform: rotate(0deg);
	}

	60% {
		border-top-color: transparent;
	}

	70% {
		border-left-color: transparent;
	}

	80% {
		border-bottom-color: transparent;
	}

	90% {
		border-right-color: transparent;
	}

	100% {
		transform: rotate(-360deg);
	}
}
</style>