From 231c90ad9b6bcbb1a3f9fc40251921ee6568297a Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Fri, 11 Jun 2021 23:56:24 +0800
Subject: [PATCH] ADD TableSelect

---
 src/api/index.js                       |   7 ++
 src/components/scTableSelect/index.vue | 104 +++++++++++++++++--------
 src/main.js                            |   2 +
 src/views/vab/tableselect.vue          |  42 ++++++----
 4 files changed, 106 insertions(+), 49 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 3adc09c3..7f375899 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -119,6 +119,13 @@ const api = {
 		}
 	},
 	demo: {
+		page: {
+			url: `${config.MOCK_URL}/page`,
+			name: "分页列表",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		},
 		upload: {
 			url: `${config.MOCK_URL}/upload`,
 			name: "文件上传接口",
diff --git a/src/components/scTableSelect/index.vue b/src/components/scTableSelect/index.vue
index b8c07fdf..e39cfa89 100644
--- a/src/components/scTableSelect/index.vue
+++ b/src/components/scTableSelect/index.vue
@@ -1,5 +1,5 @@
 <!--
- * @Descripttion: 分页下拉组件
+ * @Descripttion: 表格选择器组件
  * @version: 1.0
  * @Author: sakuya
  * @Date: 2021年6月10日10:04:07
@@ -8,14 +8,15 @@
 -->
 
 <template>
-
-	<el-select ref="select" v-model="defaultValue" clearable multiple filterable placeholder="请选择" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
+	<el-select ref="select" v-model="defaultValue" clearable :multiple="multiple" filterable :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
 		<template #empty>
-			<div class="sc-table-select__table" style="width: 500px;" v-loading="loading">
-				<el-table ref="table" :data="tableData" :height="245" stripe @select="select" @select-all="selectAll">
-					<el-table-column type="selection" width="45"></el-table-column>
-					<el-table-column prop="id" label="ID" width="150"></el-table-column>
-					<el-table-column prop="user" label="姓名"></el-table-column>
+			<div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading">
+				<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="45"></el-table-column>
+					<el-table-column v-else type="index" width="45">
+						<template #default="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 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="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
@@ -29,7 +30,13 @@
 	export default {
 		props: {
 			modelValue: null,
+			apiObj: { type: Object, default: () => {} },
+			placeholder: { type: String, default: "请选择" },
+			multiple: { type: Boolean, default: false },
+			disabled: { type: Boolean, default: false },
+			tableWidth: {type: Number, default: 400},
 			mode: { type: String, default: "popover" },
+			props: { type: Object, default: () => {} }
 		},
 		data() {
 			return {
@@ -40,9 +47,12 @@
 				pageSize: 20,
 				total: 0,
 				currentPage: 1,
-				props: {
-					label: 'user',
-					value: 'id'
+				defaultProps: {
+					label: 'label',
+					value: 'value',
+					page: 'page',
+					pageSize: 'pageSize',
+					keyword: 'keyword'
 				}
 			}
 		},
@@ -55,10 +65,11 @@
 				this.autoCurrentLabel()
 			},
 			defaultValue(){
-				this.$emit('update:modelValue', this.defaultValue);
+
 			}
 		},
 		mounted() {
+			this.defaultProps = Object.assign(this.defaultProps, this.props);
 			this.defaultValue =  this.modelValue
 			this.autoCurrentLabel()
 		},
@@ -68,28 +79,36 @@
 				if(visible){
 					this.currentPage = 1
 					this.getData()
+				}else{
+					this.autoCurrentLabel()
 				}
 			},
 			//获取表格数据
 			async getData(){
 				this.loading = true;
 				var reqData = {
-					page: this.currentPage,
-					pageSize: this.pageSize,
-					keyword: this.keyword
+					[this.defaultProps.page]: this.currentPage,
+					[this.defaultProps.pageSize]: this.pageSize,
+					[this.defaultProps.keyword]: this.keyword
 				}
-				var res = await this.$API.log.list.get(reqData);
-				this.tableData = res.data;
-				this.total =  res.count;
+				var res = await this.apiObj.get(reqData);
+				this.tableData = res.data.rows;
+				this.total =  res.data.total;
 				this.loading = false;
 				//表格默认赋值
 				this.$nextTick(() => {
-					this.defaultValue.forEach(row => {
-						var setrow = this.tableData.filter(item => item[this.props.value]===row[this.props.value] )
-						if(setrow.length > 0){
-							this.$refs.table.toggleRowSelection(setrow[0], true);
-						}
-					})
+					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]);
+					}
+
 				})
 			},
 			//分页刷新表格
@@ -99,9 +118,13 @@
 			//自动模拟options赋值
 			autoCurrentLabel(){
 				this.$nextTick(() => {
-					this.$refs.select.selected.forEach(item => {
-						item.currentLabel = item.value[this.props.label]
-					})
+					if(this.multiple){
+						this.$refs.select.selected.forEach(item => {
+							item.currentLabel = item.value[this.defaultProps.label]
+						})
+					}else{
+						this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label]
+					}
 				})
 			},
 			//表格勾选事件
@@ -110,42 +133,55 @@
 				if(isSelect){
 					this.defaultValue.push(row)
 				}else{
-					this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.props.value] == row[this.props.value]), 1)
+					this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
 				}
 				this.autoCurrentLabel()
+				this.$emit('update:modelValue', this.defaultValue);
 			},
 			//表格全选事件
 			selectAll(rows){
 				var isAllSelect = rows.length > 0
 				if(isAllSelect){
 					rows.forEach(row => {
-						var isHas = this.defaultValue.find(item => item[this.props.value] == row[this.props.value])
+						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.props.value] == row[this.props.value])
+						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.props.value] == row[this.props.value]), 1)
+							this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
 						}
 					})
 				}
 				this.autoCurrentLabel()
+				this.$emit('update:modelValue', this.defaultValue);
+			},
+			click(row){
+				if(this.multiple){
+					//处理多选点击行
+				}else{
+					this.defaultValue = row
+					this.$refs.select.blur()
+					this.autoCurrentLabel()
+					this.$emit('update:modelValue', this.defaultValue);
+				}
 			},
 			//tags删除后回调
 			removeTag(tag){
-				var row = this.findRowByKey(tag[this.props.value])
+				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);
+				this.$emit('update:modelValue', this.defaultValue);
 			},
 			// 关键值查询表格数据行
 			findRowByKey (value) {
-				return this.tableData.find(item => item[this.props.value] === value)
+				return this.tableData.find(item => item[this.defaultProps.value] === value)
 			},
 			filterMethod(keyword){
 				if(!keyword){
diff --git a/src/main.js b/src/main.js
index ebe158c1..4d2734a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,7 @@ import scFilterBar from './components/scFilterBar'
 import scUpload from './components/scUpload'
 import scUploadMultiple from './components/scUpload/multiple'
 import scFormTable from './components/scFormTable'
+import scTableSelect from './components/scTableSelect'
 
 const app = createApp(App);
 
@@ -34,5 +35,6 @@ app.component('scFilterBar', scFilterBar);
 app.component('scUpload', scUpload);
 app.component('scUploadMultiple', scUploadMultiple);
 app.component('scFormTable', scFormTable);
+app.component('scTableSelect', scTableSelect);
 
 app.mount('#app');
diff --git a/src/views/vab/tableselect.vue b/src/views/vab/tableselect.vue
index 59167432..7c39ac4b 100644
--- a/src/views/vab/tableselect.vue
+++ b/src/views/vab/tableselect.vue
@@ -9,36 +9,48 @@
 
 <template>
 	<el-main>
-		<el-card shadow="never">
-			<sc-table-select v-model="value" style="width: 400px;">
-
+		<el-alert title="select深度改造的表格选择器, 非常适用于大量数据选择的场景" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-card shadow="never" header="单选">
+			<sc-table-select v-model="value2" :apiObj="apiObj" :table-width="600" :props="props">
+				<el-table-column prop="id" label="ID" width="150"></el-table-column>
+				<el-table-column prop="user" label="姓名"></el-table-column>
+			</sc-table-select>
+		</el-card>
+		<div style="height:15px"></div>
+		<el-card shadow="never" header="多选">
+			<sc-table-select v-model="value" :apiObj="apiObj" multiple :props="props">
+				<el-table-column prop="id" label="ID" width="150"></el-table-column>
+				<el-table-column prop="user" label="姓名"></el-table-column>
 			</sc-table-select>
-			<p>{{value}}</p>
 		</el-card>
 	</el-main>
 </template>
 
 <script>
-
-	import scTableSelect from '@/components/scTableSelect';
-
 	export default {
 		name: 'tableselect',
-		components: {
-			scTableSelect
-		},
 		data() {
 			return {
+				apiObj: this.$API.demo.page,
 				value: [
 					{
-						id: "10",
-						user: "王小虎"
+						id: "410000199512025445",
+						user: "魏磊"
 					},
 					{
-						id: "2",
-						user: "曹操"
+						id: "520000198407304275",
+						user: "史平"
 					}
-				]
+				],
+				value2: {
+					id: "520000198407304275",
+					user: "史平"
+				},
+				props: {
+					label: 'user',
+					value: 'id',
+					keyword: "keyword"
+				}
 			}
 		},
 		computed: {