uniapp-yzcj-zlfk/pages/billlist/billlist.vue

<template>
	<view class="uni-flex uni-column">

		<!--反馈日期范围控件组-->
		<view class="flex cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text>反馈日期
			</view>
			<!--dateRange()设置是否展示日期选择面板为true -->
			<view class="fkrq-range" @click="dateRange">
				<view class="padding-sm">{{range[0]}}</view>
				<view class="padding-sm">至</view>
				<view class="padding-sm">{{range[1]}}</view>
			</view>
			<!--日期面板，show显示方式-->
			<mx-date-picker :show="showPicker" type="range" format="yyyy-mm-dd" :value="value" @confirm="confirmDate" @cancel="cancelDate">
			</mx-date-picker>
		</view>

		<!--反馈类型复选框控件组-->
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text>反馈类型
			</view>
			<!--multiple是否多选 -->
			<uni-data-checkbox mode="button" :multiple="true" v-model="fklx" :localdata="fklxs">
			</uni-data-checkbox>
		</view>

		<!--查询按钮及查询全部按钮-->
		<view class="padding-sm text-center querybtn margin-top-sm">
			<button class="btnflex round bg-blue" @click="search(0)">查询</button>
			<!-- v-if条件渲染，当条件为false时，不渲染该控件，因此界面中未显示 -->
			<button class="btnflex round bg-blue" v-if="isAllowQueryAll" @click="search(1)">查询全部</button>
		</view>

		<!--面料编码过滤框-->
		<view class="margin-top-sm">
			<!-- placeholder背景文字 -->
			<uni-search-bar class="search" v-model="searchValue" placeholder="面料编码" :radius="100" @confirm="searchBarEnter" @cancel="searchBarCancel"></uni-search-bar>
		</view>

		<!--筛选控件组，用于过滤有图无图的数据-->
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text>筛选
			</view>
			<uni-data-checkbox mode="button" :multiple="false" v-model="filterImg" :localdata="filterImgs" @change="filterItemChange">
			</uni-data-checkbox>
		</view>

		<!--数据列表-->
		<view>
			<view class="example-body">
				<!-- 分页器 current当前页、total总页数、pageSize每页行数、@change点击左右箭头时 -->
				<uni-pagination :current="current" :total="total" :pageSize="pageSize" :show-icon="true" @change="change" />
			</view>
			<view class="text-center">总数据量：{{total}}</view>
			<uni-list>
				<!-- 列表项目 title标题列、note第二行内容、show-badge是否显示角标、badge-text角标内容，当前面料有反馈照片时显示照片数量、clickable表示该列表可点击 -->
				<uni-list-item v-for="(bill,index) in list" v-if="index >= (current-1)*pageSize && index < current*pageSize" :title="'面料编码：'+bill.ynDyeFabCode" :note="getNote(bill)" :show-badge="bill.imgCount>0" :badge-text="bill.imgCount+''" :showArrow="true" clickable @click="toDetailPage(bill)">
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPicker: false, //控制日期选择面板是否显示
				range: [], //页面显示的反馈日期范围
				value: [], //反馈日期的控件值
				isQueyAll: 0, //是否查询全部，0：查询个人单据；1：查询全部单据，默认为0，即查询个人单据
				isAllowEdit: false, //编辑权限，用于设置是否允许用户上传图片
				isAllowQueryAll: false, //查询全部按钮权限
				list: [], //界面数据
				allBills: [], //数据库中取出的所有数据，经过滤后成为List
				searchValue: '', //面料编码过滤框内容
				fklx: ['YS', 'WG', 'JH'], //反馈类型复选框默认值
				fklxs: [{ //反馈类型复选框绑定的数据源
						"value": "YS",
						"text": "颜色"
					},
					{
						"value": "WG",
						"text": "外观"
					},
					{
						"value": "JH",
						"text": "计划"
					}
				],
				filterImg: 'ALL', //筛选单选框默认值
				filterImgs: [{ //筛选单选框绑定的数据源
						"value": "ALL",
						"text": "全部"
					},
					{
						"value": "HAVE",
						"text": "有图"
					},
					{
						"value": "NONE",
						"text": "无图"
					}
				],
				current: 1, //当前页
				total: 0, //总页数
				pageSize: 5, //每页行数
			}
		},
		onLoad(param) {
			//若加载页面时未提供参数，则默认查询个人反馈单据；否则，根据参数查询相应反馈单据
			if (Object.keys(param).length > 0) {
				var paramData = JSON.parse(param.paramData);
				this.isQueyAll = paramData.isQueryAll;
				this.value = this.range = paramData.dateRange;
				this.fklx = paramData.fklx;
			} else {

				//加载页面时，设置默认的日期范围
				var currDate = new Date();
				var currYear = currDate.getFullYear();
				var currMonth = currDate.getMonth() + 1; //getMonth() 返回0-11
				if (currMonth < 10) {
					currMonth = '0' + currMonth
				}
				var currDay = currDate.getDate(); //getDate()：获取一月的某一天；getDay()：获取星期几
				if (currDay < 10) {
					currDay = '0' + currDay
				}
				var defalutDate = currYear + "-" + currMonth + "-" + currDay;
				this.value = this.range = [defalutDate, defalutDate]; //默认查询当天的单据
			}

			//添加请求拦截器
			var vm = this
			uni.getStorage({
				key: 'token',
				success: function(res) {
					//请求拦截器
					uni.addInterceptor('request', {
						invoke(args) {
							args.header = {
								'token': res.data
							}
						}
					})

					//访问网络获取权限
					uni.request({
						url: 'https://api.lttc.cn/mes/yzcj/qualityFeedback/checkPermission',
						success: (res) => {
							if (res.data.code == 0) {
								vm.isAllowQueryAll = res.data.data.QueryAll;
								vm.isAllowEdit = res.data.data.EditRight;

								//根据反馈日期、反馈类型及是否查询全部获取反馈单据
								vm.search(vm.isQueyAll);
							} else if (res.data.code == 101) { //未登录
								//清空token缓存
								uni.removeStorage({
									key: 'token',
									success: function(res) {
										//从redis缓存中未获取到token失败时跳转登录界面
										uni.navigateTo({
											url: '../login/login?isback=1'
										})
									},
									fail() {
										//从清空token缓存失败时提示
										uni.showToast({
											title: '登录已过期时，清空token缓存失败！',
											icon: 'none'
										})
									}
								});
							} else {
								//弹出提示
								uni.showToast({
									title: '获取权限失败！原因是：' + res.data.msg,
									icon: 'none'
								})
							}
						},
						fail: (res) => {
							uni.showToast({
								title: '访问网络检查权限失败！原因是：' + res.errMsg,
								icon: 'none'
							})
						}
					});
				},
				fail() {
					//从缓存中未获取到token失败时跳转登录界面
					uni.navigateTo({
						url: '../login/login?isback=1'
					})
				}
			});
		},
		onBackPress(e) {
			//返回菜单页面
			uni.navigateTo({
				url: '../menu/menu'
			})
			return true
		},
		methods: {

			//反馈日期选择面板相关控制
			dateRange() {
				this.showPicker = true; //显示日期选择控件
				this.value = this.range;
			},
			confirmDate(e) {
				this.showPicker = false; //隐藏日期选择控件
				this.value = this.range = e.value;
			},
			cancelDate() {
				this.showPicker = false; //隐藏日期选择控件
			},

			//获取列表项的note属性值
			getNote(bill) {
				return '反馈日期：' + bill.fkrq + '\n反馈类型：' + bill.fklx + '\n通报标记：' + bill.fktbbj + '\n客户名称：' + bill.khmc + '\n统计米：' + bill.tjslm + '\n颜色米：' + bill.tjsly + '\n反馈原因：' + bill.fkyy + '\n反馈人：' + bill.fkr + '\n验装结论：' + bill.yzgccljl + '\n品管最终结论：' + bill.pgbzzcljl
			},

			/* 查询按钮点击方法 */
			search(isAll) {
				//记录是查询个人反馈单据还是查询全部反馈单据
				this.isQueyAll = isAll;

				//拼接反馈类型
				var fklxStr = ''
				for (let v of this.fklx) {
					fklxStr += v + ','
				}
				fklxStr = fklxStr.length > 0 ? fklxStr.substring(0, fklxStr.length - 1) : fklxStr

				//访问网络获取反馈单据列表
				uni.request({
					url: 'https://api.lttc.cn/mes/yzcj/qualityFeedback/getData',
					data: {
						startDate: this.value[0],
						endDate: this.value[1],
						fklx: fklxStr,
						isSearchAll: this.isQueyAll,
					},
					success: (res) => {
						//获取数据成功后，界面绑定数据
						if (res.data.code == 0) {
							this.allBills = res.data.data;
							var vm = this;
							this.list = this.allBills.filter(item => {
								var flag = vm.filterImg == 'ALL' ? true : vm.filterImg == 'HAVE' ? item.imgCount > 0 : item.imgCount == 0;
								return item.ynDyeFabCode.indexOf(vm.searchValue) > -1 && flag;
							});
							this.total = this.list.length;
							this.current = 1;
						} else if (res.data.code == 101) { //未登录
							//清空token缓存
							uni.removeStorage({
								key: 'token',
								success: function(res) {
									//从redis缓存中未获取到token失败时跳转登录界面
									uni.navigateTo({
										url: '../login/login?isback=1'
									})
								},
								fail() {
									//从清空token缓存失败时提示
									uni.showToast({
										title: '登录已过期时，清空token缓存失败！',
										icon: 'none'
									})
								}
							});
						} else {
							//弹出提示
							uni.showToast({
								title: '获取质量反馈单据列表失败！原因是：' + res.data.msg,
								icon: 'none'
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '访问网络获取质量反馈单据列表失败！原因是：' + res.errMsg,
							icon: 'none'
						})
					}
				});
			},

			/* 面料编码控件过滤方法 */
			searchBarEnter() {
				//若列表单据为空时，直接返回
				if (this.allBills.length == 0) return

				//根据面料编码模糊查询，并筛选数据(全部、有图、无图)
				this.list = this.allBills.filter(item => {
					var flag = this.filterImg == 'ALL' ? true : this.filterImg == 'HAVE' ? item.imgCount > 0 : item.imgCount == 0;
					return item.ynDyeFabCode.indexOf(this.searchValue) > -1 && flag;
				});
				this.total = this.list.length;
				this.current = 1;
			},

			/* 面料编码控件取消按钮方法 */
			searchBarCancel() {
				//列表数据已过滤时，若取消过滤，则列表展示全部单据
				if (this.allBills.length > 0) {
					if (this.filterImg == 'ALL') {
						this.list = this.allBills;
					} else if (this.filterImg == 'HAVE') {
						this.list = this.allBills.filter(item => {
							return item.imgCount > 0
						})
					} else {
						this.list = this.allBills.filter(item => {
							return item.imgCount == 0
						})
					}
					this.total = this.list.length;
					this.current = 1;
				}
			},

			/* 跳转至明细页面方法 */
			toDetailPage(bill) {
				//点击列表中某一单据，跳转至明细页面查询单据详情
				let billData = JSON.stringify(bill); //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串
				var json = {
					"isQueryAll": this.isQueyAll,
					"dateRange": this.value,
					"fklx": this.fklx
				}
				let paramData = JSON.stringify(json)
				billData = encodeURIComponent(billData) //数据中可能包括?、&这些特殊符号，需要通过encodeURIComponent编码
				uni.navigateTo({
					url: '../detail/detail?billData=' + billData + '&isAllowEdit=' + this.isAllowEdit + '&paramData=' + paramData
				});
			},
			change(e) {
				//切换单据列表的当前页面
				this.current = e.current;
			},

			/* 筛选控件切换方法 */
			filterItemChange() {
				//若列表单据为空时，直接返回
				if (this.allBills.length == 0) return

				//根据面料编码模糊查询，并筛选数据(全部、有图、无图)
				this.list = this.allBills.filter(item => {
					var flag = this.filterImg == 'ALL' ? true : this.filterImg == 'HAVE' ? item.imgCount > 0 : item.imgCount == 0;
					return item.ynDyeFabCode.indexOf(this.searchValue) > -1 && flag;
				});
				this.total = this.list.length;
				this.current = 1;
			}
		}
	}
</script>

<style>
	.fkrq-range {
		display: flex;
		flex-direction: row;
		flex: 1;
		justify-content: center;
		align-items: center;
		font-size: large;
	}

	.search {
		font-size: 20px;
		background-color: #ffffff;
	}

	.querybtn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		background-color: #ffffff;
	}

	.btnflex {
		flex: 1;
		padding: 0 40upx;
		font-size: 32upx;
		height: 80upx;
		margin: 5upx;
	}
</style>