zhihuixiaoyuan2-ui/work/pages/menu/list.vue

<template>
  <view class="menu">
	  <view class="stutoa mtop">
	  	<view class="stutoap">
	  		<picker mode="date" @change="bindDateChange">
	  			<view class="flexc">
	  				<view class=" f15 co16 f500">{{time||'请选择时间'}}</view>
	  				<image :src="upimg"></image>
	  			</view>
	  		</picker>
	  	</view>
	  </view>
	  
	  <view class="pl6">
		  <xl-list :datype='datype'   :datalist="list" :wtdt="wtdt" @getDel="getDel" @getPreimg='getPreimg' :dintype='diningrange' @getDetail="getDetail"></xl-list>
	  </view>
	  <image :src="addimg" class="addimg" @click="getAdd" v-if="checkPermi(['system:recipe:add'])"></image>
	  <pop-up :type='type' @getClose='getClose' :imgobj='imgobj'></pop-up>
  </view>
</template>

<script>
	import xlList from "@/work/components/list/list.vue"
	import popUp from "@/work/components/popup/popup.vue"
	import {getRecipelistFn,getRecipedelFn} from "@/api/work/menu.js"
	import {getDictionaryFn} from '@/api/mine/register.js'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
  export default {
	  components:{
		  xlList,popUp
	  },
	data(){
		return{
			searchimg: require("@/mine/static/score/search.png"),
			addimg: require("@/static/images/tadd.png"),
			upimg: require("@/mine/static/score/up.png"),
			list:[],
			datype:2,
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			wtdt: '',
			time:'',
			type:0,
			imgobj:{},
			diningrange:[]
		}
	},
	onUnload() {
		uni.$off('refreshleavelist')
	},
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	onLoad: function(e) {
		uni.$on('refreshmenulist', (e) => {
			this.reachflag = true;
			this.pageNum = 1;
			this.list = [];
			this.getDataFn();
		})
		this.init()
		this.getDataFn()
	},
	methods:{
		checkPermi,checkRole,
		init(){
			//就餐类型
			getDictionaryFn('dining_type').then(res=>{
				if(res.code==200){
					this.diningrange = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getClose(){
			this.type=0
		},
		getPreimg(data){
			this.type=1
			this.imgobj=JSON.parse(JSON.stringify(data))
		},
		getDel(id){
			var that=this;
			getRecipedelFn(id).then(res=>{
				if (res.code == 200) {
					that.$toast('删除成功')
					setTimeout(function(){
						that.reachflag = true;
						that.pageNum = 1;
						that.list = [];
						that.getDataFn();
					},1500)
				} else {
					that.$toast(res.msg)
				} 
			})
		},
		toTree2(arr){
			var list=this.list;
			let newA = JSON.parse(JSON.stringify(arr));
			if(list&&list.length){
				list.forEach(ite=>{
					for(var i =0;i<newA.length;i++){
						if(ite.ayear === newA[i].ayear&&ite.amonth === newA[i].amonth){
							ite.children.push(newA[i])
						}else{
							var obj={
								ayear:newA[i].ayear,
								amonth:newA[i].amonth,
								check:true,
								children:[]
							}
							obj.children.push(newA[i])
							list.push(obj)
						}
					}
				})
				return list
			}else{
				var newArrs = [];
				var larr=[]
				const map = new Map();
				newArrs = newA.filter(v => !map.has(v.ayear)&&!map.has(v.amonth) && map.set(v.ayear, 1)&& map.set(v.amonth, 1));
				newArrs.forEach(ite=>{
					var obj={
						ayear:ite.ayear,
						amonth:ite.amonth,
						check:true
					}
					larr.push(obj)
				})
				larr.forEach(ite=>{
					ite.children = newA.filter(e => {
					    return ite.ayear === e.ayear&&ite.amonth === e.amonth
					})
				})
				return larr
			}
		},
		bindDateChange(e){
			var val=e.detail.value;
			this.time=val;
			this.reachflag = true;
			this.pageNum = 1;
			this.list = [];
			this.getDataFn();
		},
		getAdd(){
			this.$tab.navigateTo(`/work/pages/menu/add`)
		},
		getDetail(id){
			this.$tab.navigateTo(`/work/pages/menu/add?id=`+id)
		},
		getDataFn(a) {
			var params = {
				pageSize: this.pageSize,
				pageNum: this.pageNum,
			}
			if(this.time){
				params.createDate=this.time
			}
			getRecipelistFn(params).then(res => {
				if (res.code == 200) {
					this.total = res.total;
					if (res.rows.length < this.pageSize) {
						this.reachflag = false
						this.wtdt = '到底了~';
					} else {
						var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -1)
						if (num < res.total) {
							this.reachflag = true
							this.wtdt = '上拉加载更多'
						} else {
							this.reachflag = false
							this.wtdt = '到底了~';
						}
					}
					// 数据处理
					var newArr=res.rows;
					if(newArr&&newArr.length){
						var timeArr=[];
						Object.keys(newArr).some((key) => {
							if(newArr[key].urls){
								newArr[key].urls=newArr[key].urls.split(',')
							}else{
								newArr[key].urls=[]
							}
							if(newArr[key].createDate){
								var time=newArr[key].createDate.split('-');
								// var a=time[0].split('-')
								newArr[key].ayear=time[0];
								newArr[key].amonth=time[1];
							}
							
						})
						
						this.list=this.toTree2(newArr)
					}else{
						this.list=[]
					}
				} else {
					this.$toast(res.msg)
				}
			})
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.menu{padding: 96rpx 24rpx 0rpx;min-height: 100vh;background-color: #ffffff;box-sizing: border-box;
	.mtop{position: fixed;left: 0;right: 0;top: 0;padding:12rpx 24rpx;background: #ffffff;z-index: 1;}
	.addimg{width: 136rpx;height: 136rpx;position: fixed;right: 24rpx;bottom: 44rpx;border-radius: 50%;z-index: 1;}
	
}
.stutoa{font-size: 28rpx;font-weight: bold;color: #666666;
	text{color: #4775EA;padding: 0 8rpx;}
	image{width: 22rpx;height: 12rpx;margin-left: 24rpx;}
	.stutoap{padding: 16rpx 0;margin: 0 6rpx;}
}

</style>