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>

			<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>
			<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>

			<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>
			<button class="btnflex round bg-blue" v-if="isAllowQueryAll" @click="search(1)">查询全部</button>
		</view>

		<view class="margin-top-sm">
			<uni-search-bar class="search" v-model="searchValue" placeholder="面料编码" :radius="100" @confirm="searchBarEnter" @cancel="searchBarCancel"></uni-search-bar>
		</view>

		<view>
			<view class="example-body">
				<uni-pagination :current="current" :total="total" :pageSize="pageSize" :show-icon="true" @change="change" />
			</view>
			<uni-list>
				<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: [],
				searchValue: '',
				fklx: ['YS', 'WG', 'JH'],
				fklxs: [{
						"value": "YS",
						"text": "颜色"
					},
					{
						"value": "WG",
						"text": "外观"
					},
					{
						"value": "JH",
						"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 {
								//弹出提示
								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.list = this.allBills = res.data.data;
							this.total = this.list.length;
							this.current = 1;
						} 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

				//未设置过滤条件时，列表显示全部数据
				if (this.searchValue == '') {
					this.list = this.allBills;
					this.total = this.list.length;
					this.current = 1;
					return;
				}

				//根据面料编码模糊查询
				this.list = this.allBills.filter(item => {
					return item.ynDyeFabCode.indexOf(this.searchValue) > -1;
				});

				this.total = this.list.length;
				this.current = 1;
			},
			searchBarCancel() {
				//列表数据已过滤时，若取消过滤，则列表展示全部单据
				if (this.allBills.length > 0) {
					this.list = this.allBills;
					this.total = this.list.length;
					this.current = 1;
				}
			},
			toDetailPage(bill) {
				//点击列表中某一单据，跳转至明细页面查询单据详情
				let billData = JSON.stringify(bill);
				var json = {
					"isQueryAll": this.isQueyAll,
					"dateRange": this.value,
					"fklx": this.fklx
				}
				let paramData = JSON.stringify(json)
				uni.navigateTo({
					url: '../detail/detail?billData=' + billData + '&isAllowEdit=' + this.isAllowEdit + '&paramData=' + paramData
				});
			},
			change(e) {
				//切换单据列表的当前页面
				this.current = e.current;
			},
		}
	}
</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>