update: uni-th 支持 date 日期筛选范围

Author: hdx-w

docs/components/table.md

@@ -109,7 +109,7 @@ selection-change	| 开启多选时，当选择项发生变化时会触发该事
 |:-:			|:-:		|:-:			|	:-:				|:-:|
 |width		|String	| -				|-					| 单元格宽度|
 |align		|String	| left		|left/center/right	| 表头对齐方式|
-|filter-type		|String	| 	|search/select/range	| 筛选类型，search关键字搜索，select类别选择|
+|filter-type		|String	| 	|search/select/range/date	| 筛选类型，search关键字搜索，select类别选择|
 |filter-data		|Array	| 	|| 筛选数据|
 |sortable |Boolean| false		|- 	| 是否启用排序|
 

uni_modules/uni-table/changelog.md

@@ -1,3 +1,5 @@
+## 1.0.7（2021-07-08）
+- 新增 uni-th 支持 date 日期筛选范围
 ## 1.0.6（2021-07-05）
 - 新增 uni-th 支持 range 筛选范围
 ## 1.0.5（2021-06-28）

uni_modules/uni-table/components/uni-th/filter-dropdown.vue

@@ -1,12 +1,15 @@
 <template>
 	<view class="uni-filter-dropdown">
 		<view class="dropdown-btn" @click="onDropdown">
-			<view class="icon-select" :class="{active: canReset}"
-				v-if="filterType == 'select' || filterType == 'range'"></view>
-			<view class="icon-search" :class="{active: canReset}" v-if="filterType == 'search'">
+			<view class="icon-select" :class="{active: canReset}" v-if="isSelect || isRange"></view>
+			<view class="icon-search" :class="{active: canReset}" v-if="isSearch">
 				<view class="icon-search-0"></view>
 				<view class="icon-search-1"></view>
 			</view>
+			<view class="icon-calendar" :class="{active: canReset}" v-if="isDate">
+				<view class="icon-calendar-0"></view>
+				<view class="icon-calendar-1"></view>
+			</view>
 		</view>
 		<view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
 		<view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
@@ -47,6 +50,11 @@
 				<view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{resource.submit}}</view>
 			</view>
 			<!-- date -->
+			<view v-if="isDate">
+				<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
+					<view></view>
+				</uni-datetime-picker>
+			</view>
 		</view>
 	</view>
 </template>
@@ -60,14 +68,16 @@
 		"submit": "确定",
 		"filter": "筛选",
 		"gt": "大于等于",
-		"lt": "小于等于"
+		"lt": "小于等于",
+		"date": "日期范围"
 	}
 
 	const DropdownType = {
 		Select: "select",
 		Search: "search",
 		Range: "range",
-		Date: "date"
+		Date: "date",
+		Timestamp: "timestamp"
 	}
 
 	export default {
@@ -114,6 +124,9 @@
 				if (this.isRange) {
 					return (this.gtValue.length > 0 && this.ltValue.length > 0)
 				}
+				if (this.isDate) {
+					return this.dateSelect.length > 0
+				}
 				return false
 			},
 			isSelect() {
@@ -126,7 +139,7 @@
 				return this.filterType === DropdownType.Range
 			},
 			isDate() {
-				return this.filterType === DropdownType.Date
+				return (this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp)
 			}
 		},
 		watch: {
@@ -146,7 +159,9 @@
 				filterValue: '',
 				checkedValues: [],
 				gtValue: '',
-				ltValue: ''
+				ltValue: '',
+				dateRange: [],
+				dateSelect: []
 			};
 		},
 		created() {
@@ -164,13 +179,26 @@
 			},
 			openPopup() {
 				this.isOpened = true
+				if (this.isDate) {
+					this.$nextTick(() => {
+						if (!this.dateRange.length) {
+							this.resetDate()
+						}
+						this.$refs.datetimepicker.show()
+					})
+				}
 			},
 			closePopup() {
 				this.isOpened = false
 			},
 			handleClose(e) {
 				this.closePopup()
 			},
+			resetDate() {
+				let date = new Date()
+				let dateText = date.toISOString().split('T')[0]
+				this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59']
+			},
 			onDropdown(e) {
 				this.openPopup()
 			},
@@ -192,6 +220,18 @@
 				}
 				this.checkedValues = checkvalues
 			},
+			datetimechange(e) {
+				this.closePopup()
+				this.dateRange = e
+				this.dateSelect = e
+				this.$emit('change', {
+					filterType: this.filterType,
+					filter: e
+				})
+			},
+			timepickerclose(e) {
+				this.closePopup()
+			},
 			handleSelectSubmit() {
 				this.closePopup()
 				this.$emit('change', {
@@ -309,6 +349,53 @@
 		background-color: #1890ff;
 	}
 
+	.icon-calendar {
+		color: #ddd;
+		width: 14px;
+		height: 16px;
+	}
+
+	.icon-calendar-0 {
+		height: 4px;
+		margin-top: 3px;
+		margin-bottom: 1px;
+		background-color: #ddd;
+		border-radius: 2px 2px 1px 1px;
+		position: relative;
+	}
+	.icon-calendar-0:before, .icon-calendar-0:after {
+		content: '';
+		position: absolute;
+		top: -3px;
+		width: 4px;
+		height: 3px;
+		border-radius: 1px;
+		background-color: #ddd;
+	}
+	.icon-calendar-0:before {
+		left: 2px;
+	}
+	.icon-calendar-0:after {
+		right: 2px;
+	}
+
+	.icon-calendar-1 {
+		height: 9px;
+		background-color: #ddd;
+		border-radius: 1px 1px 2px 2px;
+	}
+
+	.icon-calendar.active {
+		color: #1890ff;
+	}
+
+	.icon-calendar.active .icon-calendar-0,
+	.icon-calendar.active .icon-calendar-1,
+	.icon-calendar.active .icon-calendar-0:before,
+	.icon-calendar.active .icon-calendar-0:after {
+		background-color: #1890ff;
+	}
+
 	.uni-filter-dropdown {
 		position: relative;
 		font-weight: normal;

uni_modules/uni-table/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-table",
   "displayName": "uni-table 表格",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "用于展示多条结构类似的数据",
   "keywords": [
     "uni-ui",
@@ -40,7 +40,7 @@
     "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
   },
   "uni_modules": {
-    "dependencies": [],
+    "dependencies": ["uni-datetime-picker"],
     "encrypt": [],
     "platforms": {
       "cloud": {

uni_modules/uni-table/readme.md

@@ -107,7 +107,7 @@ selection-change	| 开启多选时，当选择项发生变化时会触发该事
 |:-:			|:-:		|:-:			|	:-:				|:-:|
 |width		|String	| -				|-					| 单元格宽度|
 |align		|String	| left		|left/center/right	| 表头对齐方式|
-|filter-type		|String	| 	|search/select/range	| 筛选类型，search关键字搜索，select类别选择|
+|filter-type		|String	| 	|search/select/range/date	| 筛选类型，search关键字搜索，select类别选择|
 |filter-data		|Array	| 	|| 筛选数据|
 |sortable |Boolean| false		|- 	| 是否启用排序|