发起报价增加搜索物资功能

supplier/components/wyb-table/wyb-table.vue

@@ -95,7 +95,8 @@
 				</view>
 			</view>
 			<view class="wyb-table-content">
-				<view class="wyb-table-content-line" v-for="(content, cIndex) in contentsSort" :key="contentLineKey(content, cIndex)"
+				<view class="wyb-table-content-line" :class="'wyb-table-content-line-'+ cIndex"
+				  v-for="(content, cIndex) in contentsSort" :key="contentLineKey(content, cIndex)"
 				 :style="{borderTop: cIndex === 0 ? 'none' : '1px solid' + borderColor}">
 					<view class="wyb-table-content-item" v-if="enableCheck" :style="{
 						 minWidth: checkColWidth + 'rpx',
@@ -148,7 +149,8 @@
 						 borderRight: hIndex === headers.length - 1 || (!showVertBorder && hIndex !== 0) ? 'none' : '1px solid' + borderColor,
 						 zIndex: hIndex === 0 ? 20 : 0,
 						 left: enableCheck ? checkColWidth + 'rpx' : 0,
-						 position: hIndex === 0 && firstLineFixed ? 'sticky' : 'static'}">
+						 position: hIndex === 0 && firstLineFixed ? 'sticky' : 'static',
+						 ...content.searchStyle }">
 						<input class="lf-w-100" placeholder="请输入.." 
 							:disabled="content.disabled || false"
 							v-if="isObject(autoContentItem(cIndex, hIndex), 'edit')" 
@@ -256,7 +258,7 @@
 			// 自动分配单元格内容key值
 			contentItemKey() {
 				return function(header, hIndex) {
-					return this.randomString(16, this.chars)
+					return this.randomString(16, this.chars);
 				}
 			},
 			// 获取表格内容，每一个格子
@@ -747,6 +749,10 @@
 			scrollToInput: {
 				type: Boolean, // 是否自动滚动到含有input的位置
 				default: true
+			},
+			searchKey: {
+				type: String,
+				default: '' // 表格搜索内容
 			}
 		},
 		watch: {
@@ -763,6 +769,37 @@
 					this.onload = false
 				}
 				this.$forceUpdate()
+			},
+			searchKey(val){
+				console.log("搜索：", val);
+				let positionIndex = null;
+				// 处理被模糊匹配的item背景颜色变化
+				this.contentsSort.map((c_item, c_index) => {
+					this.$set(c_item, 'searchStyle', {});
+					this.headers.map(h_item => {
+						if(h_item.search){
+							let contentLine = c_item[h_item.key];
+							if(val && contentLine.indexOf(val) >= 0){
+								if(positionIndex == null){
+									positionIndex = c_index; // 拿到第一个被匹配的table item
+								}
+								this.$set(c_item, 'searchStyle', {backgroundColor: '#ffdede'});
+							}
+						}
+					})
+				})
+				// 处理匹配到item时滚动至第一个item
+				if(positionIndex != null){
+					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-'+ positionIndex); // 获取第三层，获取内容列
+					let tabViewTop = tabView.offsetTop; // table距离页面高度
+					let offsetHeight = contentLine.offsetHeight; // table行高度
+					let offsetTop = contentLine.offsetTop; // table行距离页面高度
+					tabView.scrollTop = offsetTop - tabViewTop - offsetHeight;
+				}else if(val){
+					this.$msg('该关键字没有搜索到物资哦')
+				}
 			}
 		},
 		mounted() {
@@ -770,7 +807,6 @@
 				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)
@@ -790,13 +826,14 @@
 							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;
+							let offsetWidth = contentItem.offsetParent.offsetWidth;
+							let offsetLeft = contentItem.offsetParent.offsetLeft - offsetWidth - 20;
 							timer = setInterval(function(){
-								tabView.scrollLeft += 10;
+								tabView.scrollLeft += 2;
 								if(tabView.scrollLeft >= offsetLeft){
 									clearInterval(timer);
 								}
-							}, 10);
+							}, 2);
 						}, 1000)
 					}
 					// #endif

supplier/pages/offer/index.vue

@@ -43,13 +43,17 @@
 		
 		<!-- 物料table -->
 		<view class="box">
-			<view class="lf-font-32 lf-color-black lf-font-bold lf-m-b-20">报价明细</view>
+			<view class="lf-m-b-20 lf-row-between">
+				<view class="lf-font-32 lf-color-black lf-font-bold">报价明细</view>
+				<input placeholder="搜索物资" confirm-type="search" :value="searchValue" @input="inputChange" @confirm="inputConfirm" style="background: pink;" />
+			</view>
 			<wyb-table :first-line-fixed="true" 
 				contentBgColor="#eef6fe" 
 				:headers="headers" 
 				:contents="contents" 
 				:scrollToInput="true"
 				:loading="table_loading"
+				:searchKey="searchValue"
 				@onInputChange="onInputChange" 
 				@onButtonClick="onButtonClick"
 				width="100%" height="80vh"></wyb-table>
@@ -66,6 +70,7 @@
 <script>
 	import wybTable from '@/components/wyb-table/wyb-table';
 	let app = getApp();
+	let timer = null;
 	
 	export default {
 		components: {
@@ -75,7 +80,8 @@
 			return {
 				headers: [{
 					label: '物资名称',
-					key: 'name'
+					key: 'name',
+					search: true
 				},{
 					label: '规格',
 					key: 'spec'
@@ -115,7 +121,8 @@
 				type: 0,
 				deadline_start: '',
 				deadline_end: '',
-				table_loading: true
+				table_loading: true,
+				searchValue: '' // 搜索内容
 			}
 		},
 		computed: {
@@ -166,6 +173,20 @@
 			}
 		},
 		methods: {
+			// 搜索input值被改变
+			inputChange(event){
+				if(timer){
+					clearTimeout(timer);
+					timer = null;
+				}
+				timer = setTimeout(() => {
+					this.searchValue = event.detail.value;
+				}, 1000);
+			},
+			// 搜索按下回车
+			inputConfirm(event){
+				this.searchValue = event.detail.value;
+			},
 			// 日期选择器值被改变
 			pickerChange(event, current_name){
 				console.log(current_name)