From 90e1165836a15c0a114426379148a2e4552e6131 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Fri, 6 Aug 2021 15:28:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=9B=E5=BA=94=E5=95=86=E7=94=B3=E8=AF=B7?=
 =?UTF-8?q?=E6=8A=A5=E4=BB=B7table=E5=A2=9E=E5=8A=A0loading=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=88=B0?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E6=89=80=E5=9C=A8=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 supplier/components/wyb-table/wyb-table.vue | 63 ++++++++++++++++-----
 supplier/pages/offer/index.vue              |  8 ++-
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/supplier/components/wyb-table/wyb-table.vue b/supplier/components/wyb-table/wyb-table.vue
index 6106439..1011f82 100644
--- a/supplier/components/wyb-table/wyb-table.vue
+++ b/supplier/components/wyb-table/wyb-table.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="wyb-table-box">
+		<!-- loading加载框 -->
 		<view v-if="loading" class="wyb-table-loading-box" :style="{
 			'max-width': width === 'auto' ? screenWidth : width,
 			'max-height': height === 'auto' ? '300rpx' : height,
@@ -16,6 +17,7 @@
 				 borderBottom: '3px solid ' + loadingColor.bottom,
 				 borderLeft: '3px solid ' + loadingColor.left}" />
 		</view>
+		<!-- table主体 -->
 		<view v-if="!loading" class="wyb-table-scroll-view" :style="{
 			'max-width': width,
 			'max-height': height}">
@@ -206,6 +208,7 @@
 <script>
 	import Pinyin from './js/characterToPinyin.js'
 	import {isEqual} from './js/objEqual.js'
+	let timer = null;
 	export default {
 		data() {
 			return {
@@ -229,6 +232,7 @@
 			}
 		},
 		computed: {
+			// 加载颜色
 			loadingColor() {
 				let color = this.loaderColor.slice()
 				let rgbList = this.hexToRgb(color)
@@ -243,16 +247,19 @@
 					left
 				}
 			},
+			// content每一项key值
 			contentLineKey() {
 				return function(content, cIndex) {
 					return this.randomString(32, this.chars)
 				} 
 			},
+			// 自动分配单元格内容key值
 			contentItemKey() {
 				return function(header, hIndex) {
 					return this.randomString(16, this.chars)
 				}
 			},
+			// 获取表格内容，每一个格子
 			autoContentItem() {
 				return function(cIndex, hIndex) {
 					let content = this.contentsSort[cIndex]
@@ -318,6 +325,7 @@
 					return result
 				}
 			},
+			// 判断单元格为链接，显示文字下划线
 			autoTextDecoration() {
 				return function(cIndex, hIndex) {
 					let result = 'auto'
@@ -337,6 +345,7 @@
 					return result
 				}
 			},
+			// 分配表格内容背景颜色
 			autoContentBgColor() {
 				return function(cIndex, hIndex) {
 					let result = this.contentBgColor
@@ -413,6 +422,7 @@
 					}
 				}
 			},
+			// 分配表格内容字体颜色
 			autoContentColor() {
 				return function(cIndex, hIndex) {
 					let result = this.contentFtColor
@@ -490,6 +500,7 @@
 					return result
 				}
 			},
+			// 显示筛选排序
 			autoSortShow() {
 				return function(hIndex) {
 					let result = false
@@ -512,6 +523,7 @@
 					return result
 				}
 			},
+			// 获取屏幕可用宽度
 			screenWidth() {
 				return `${uni.getSystemInfoSync()['screenWidth']}px`
 			}
@@ -731,6 +743,10 @@
 			checkerCellBgColor: {
 				type: String,
 				default: '#f1f1f1'
+			},
+			scrollToInput: {
+				type: Boolean, // 是否自动滚动到含有input的位置
+				default: true
 			}
 		},
 		watch: {
@@ -754,27 +770,40 @@
 				this.$set(item, 'checked', false)
 			})
 			this.oContentsSort = this.contentsSort.slice()
+			console.log("this.sortCol", this.sortCol);
 			if (this.sortCol.length !== 0) {
 				this.sortActiveKey = this.sortCol[0].key
 				uni.setStorageSync('lastSortActiveKey', this.sortActiveKey)
 				this.doSort(this.sortCol[0].key, this.sortWays[this.sortWay], this.sortCol[0].isNumber)
 			}
+			this.autoScrollView();
 		},
 		methods: {
-			// 校验数据格式，如果不是数组则转为数组
-			// toArray(val){
-			// 	if(Array.isArray(val)){
-			// 		console.log("ssssss=======")
-			// 		return val.slice();
-			// 	}else{
-			// 		let contents = {...val};
-			// 		let arr = [];
-			// 		for(let i in contents){
-			// 			arr.push(contents[i]);
-			// 		}
-			// 		return arr;
-			// 	}
-			// },
+			// 页面初次加载，判断是否自动滚动至input输入框所在的位置
+			autoScrollView(){
+				try{
+					// #ifdef H5
+					if(this.$props.scrollToInput){
+						setTimeout(function(){
+							//  完整选取dom .wyb-table-scroll-view .wyb-table-content .wyb-table-content-line .wyb-table-content-item input
+							let tabView = document.querySelector('.wyb-table-scroll-view'); // 获取第一层大对象，table
+							let tabContent = tabView.querySelector('.wyb-table-content'); // 获取第二层，table的content部分
+							let contentLine = tabContent.querySelector('.wyb-table-content-line'); // 获取第三层，获取内容列
+							let contentItem = contentLine.querySelector('.wyb-table-content-item input'); // 获取第四层，内容单元格
+							let offsetLeft = contentItem.offsetParent.offsetLeft - 90;
+							timer = setInterval(function(){
+								tabView.scrollLeft += 10;
+								if(tabView.scrollLeft >= offsetLeft){
+									clearInterval(timer);
+								}
+							}, 10);
+						}, 1000)
+					}
+					// #endif
+				}catch(e){
+					console.log(e);
+				}
+			},
 			inputBlur(cIndex, hIndex, event){
 				let event_obj = {};
 				let value = event.detail.value;
@@ -1127,6 +1156,12 @@
 			    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]
 			    return result
 			}
+		},
+		destroyed(){
+			if(timer){
+				clearInterval(timer);
+				timer = null;
+			}
 		}
 	}
 </script>
diff --git a/supplier/pages/offer/index.vue b/supplier/pages/offer/index.vue
index 5796447..bafe6ef 100644
--- a/supplier/pages/offer/index.vue
+++ b/supplier/pages/offer/index.vue
@@ -48,6 +48,8 @@
 				contentBgColor="#eef6fe" 
 				:headers="headers" 
 				:contents="contents" 
+				:scrollToInput="true"
+				:loading="table_loading"
 				@onInputChange="onInputChange" 
 				@onButtonClick="onButtonClick"
 				width="100%" height="80vh"></wyb-table>
@@ -112,7 +114,8 @@
 				code: '', // 订单号，批次号，如果有
 				type: 0,
 				deadline_start: '',
-				deadline_end: ''
+				deadline_end: '',
+				table_loading: true
 			}
 		},
 		computed: {
@@ -201,6 +204,7 @@
 						}
 					})
 					this.contents = contents;
+					this.table_loading = false;
 					this.getCanteenList();
 				})
 			},
@@ -235,6 +239,7 @@
 						return obj;
 					})
 					this.contents = contents;
+					this.table_loading = false;
 					// 处理报价生效、失效时间
 					let deadline_start = '';
 					let deadline_end = '';
@@ -276,6 +281,7 @@
 						}
 					})
 					this.contents = contents;
+					this.table_loading = false;
 					// 处理报价生效、失效时间
 					let deadline_start = '';
 					let deadline_end = '';