x-php-Admin/src/components/scTableSelect/index.vue

<!--
 * @Descripttion: 表格选择器组件
-->
<template>
	<el-select ref="select" v-model="defaultValue" :size="size" :clearable="clearable" :multiple="multiple" :collapse-tags="collapseTags" :collapse-tags-tooltip="collapseTagsTooltip" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
		<template #empty>
			<div class="sc-table-select__table" v-loading="loading">
				<div class="sc-table-select__header">
					<slot name="header" :data="formData" :form="form" :submit="formSubmit"></slot>
				</div>
				<el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll">
					<el-table-column v-if="multiple" type="selection" width="55"></el-table-column>
					<el-table-column v-else type="index" width="55">
						<template #default="scope"><span>{{scope.$index+(currentPage - 1) * limit + 1}}</span></template>
					</el-table-column>
					<slot></slot>
				</el-table>
				<div class="sc-table-select__page">
					<el-pagination small background layout="prev, pager, next" :total="total" :page-size="limit" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
				</div>
			</div>
		</template>
	</el-select>
</template>

<script>
	import config from "@/config/tableSelect";

	export default {
		props: {
			modelValue: null,
			api: { type: String, default: '' },
			params: { type: Object, default: () => {} },
			form: { type: Array, default: () => [] },
			placeholder: { type: String, default: "请选择" },
			size: { type: String, default: "default" },
			clearable: { type: Boolean, default: false },
			multiple: { type: Boolean, default: false },
			filterable: { type: Boolean, default: false },
			collapseTags: { type: Boolean, default: false },
			collapseTagsTooltip: { type: Boolean, default: false },
			disabled: { type: Boolean, default: false },
			mode: { type: String, default: "popover" },
			props: { type: Object, default: () => {} }
		},
		data() {
			return {
				loading: false,
				keyword: null,
				defaultValue: [],
				tableData: [],
				limit: config.limit,
				total: 0,
				currentPage: 1,
				defaultProps: {
					label: config.props.label,
					value: config.props.value,
					page: config.request.page,
					limit: config.request.limit,
					keyword: config.request.keyword
				},
				formData: {}
			}
		},
		computed: {

		},
		watch: {
			modelValue:{
				handler(){
					this.defaultValue = this.modelValue
					this.autoCurrentLabel()
				},
				deep: true
			}
		},
		mounted() {
			this.defaultProps = Object.assign(this.defaultProps, this.props);
			this.defaultValue =  this.modelValue
			this.autoCurrentLabel()
		},
		methods: {
			//表格显示隐藏回调
			visibleChange(visible){
				if(visible){
					this.currentPage = 1
					this.keyword = null
					this.formData = {}
					this.getData()
				}else{
					this.autoCurrentLabel()
				}
			},
			//获取表格数据
			async getData(){
				this.loading = true;
				var reqData = {
					[this.defaultProps.page]: this.currentPage,
					[this.defaultProps.limit]: this.limit,
					[this.defaultProps.keyword]: this.keyword
				}
				Object.assign(reqData, this.params, this.formData)
				var res = await this.$http.get(this.api, reqData, {cacheparameters:1});
				var parseData = config.parseData(res)
				this.tableData = parseData.rows;
				this.total = parseData.total;
				this.loading = false;
				//表格默认赋值
				this.$nextTick(() => {

					if(typeof this.defaultValue === 'undefined'){
						this.defaultValue = {};
					}


					if(this.multiple){
						this.defaultValue.forEach(row => {
							var setrow = this.tableData.filter(item => item[this.defaultProps.value]===row[this.defaultProps.value] )
							if(setrow.length > 0){
								this.$refs.table.toggleRowSelection(setrow[0], true);
							}
						})
					}else{
						var setrow = this.tableData.filter(item => item[this.defaultProps.value]===this.defaultValue[this.defaultProps.value] )
						this.$refs.table.setCurrentRow(setrow[0]);
					}
					this.$refs.table.setScrollTop(0)
				})
			},
			//插糟表单提交
			formSubmit(){
				this.currentPage = 1
				this.keyword = null
				this.getData()
			},
			//分页刷新表格
			reload(){
				this.getData()
			},
			//自动模拟options赋值
			autoCurrentLabel(){
				this.$nextTick(() => {
					if(this.multiple){
						this.$refs.select.selected.forEach(item => {
							item.currentLabel = item.value[this.defaultProps.label]
						})
						return ;
					}

					this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label]: this.defaultValue
				})
			},
			//表格勾选事件
			select(rows, row){
				var isSelect = rows.length && rows.indexOf(row) !== -1
				if(isSelect){
					this.defaultValue.push(row)
				}else{
					this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
				}
				this.autoCurrentLabel()
				this.$emit('update:modelValue', this.defaultValue);
				this.$emit('change', this.defaultValue);
			},
			//表格全选事件
			selectAll(rows){
				var isAllSelect = rows.length > 0
				if(isAllSelect){
					rows.forEach(row => {
						var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
						if(!isHas){
							this.defaultValue.push(row)
						}
					})
				}else{
					this.tableData.forEach(row => {
						var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
						if(isHas){
							this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
						}
					})
				}
				this.autoCurrentLabel()
				this.$emit('update:modelValue', this.defaultValue);
				this.$emit('change', this.defaultValue);
			},
			click(row){
				if(this.multiple){
					//处理多选点击行
				}else{
					this.defaultValue = row
					this.$refs.select.blur()
					this.autoCurrentLabel()
					this.$emit('update:modelValue', this.defaultValue);
					this.$emit('change', this.defaultValue);
				}
			},
			//tags删除后回调
			removeTag(tag){
				var row = this.findRowByKey(tag[this.defaultProps.value])
				this.$refs.table.toggleRowSelection(row, false);
				this.$emit('update:modelValue', this.defaultValue);
			},
			//清空后的回调
			clear(){
				this.$emit('update:modelValue', this.defaultValue);
			},
			// 关键值查询表格数据行
			findRowByKey (value) {
				return this.tableData.find(item => item[this.defaultProps.value] === value)
			},
			filterMethod(keyword){
				if(!keyword){
					this.keyword = null;
					return false;
				}
				this.keyword = keyword;
				this.getData()
			},
			// 触发select隐藏
			blur(){
				this.$refs.select.blur();
			},
			// 触发select显示
			focus(){
				this.$refs.select.focus();
			}
		}
	}
</script>

<style scoped>
	.sc-table-select__table {padding:12px;}
	.sc-table-select__page {padding-top: 12px;}
</style>