FE-lab-xcx/pages_hazardousWasteRecycling/views/permissionApply/listPage.vue

<!-- 权限申请列表 -->
<template>
	<view class="permissionApplyListPage">
		<view class="top-picker-box">
			<picker @change="typeChange" :value="typeIndex" :range="typeList" :range-key="'label'">
				<view class="picker-p check-picker-p">
				{{typeList[typeIndex].label}}
				</view>
			</picker>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
			<view class="for-box" v-for="(item,index) in dataList" :key="index">
				<view class="title-p">{{item.subName}}({{item.roomNum}})</view>
				<view class="text-p">{{item.deptName}} - {{item.buildName}}</view>
				<view class="text-p">申请权限类型：{{item.perm}}</view>
				<view class="text-p">申请人：{{item.userName}}({{item.userNum}})</view>
				<view class="text-p">申请时间：{{item.submitTime}}</view>
				<view class="text-p" v-if="item.status!=0&&item.approveBy">审核人：{{item.approveBy}}</view>
				<view class="text-p" v-if="item.status!=0&&item.approveTime">审核时间：{{item.approveTime}}</view>
				<view class="position-p" :class="item.status==2?'colorB':'colorA'">{{item.status==0?'待审批':(item.status==1?'审批通过':(item.status==2?'驳回':''))}}</view>
				<view class="button-p-1" v-if="item.status==0&&hazardousWasteUserType==1" @click="throughButton(item)">通过</view>
				<view class="button-p-2" v-if="item.status==0&&hazardousWasteUserType==1" @click="rejectionButton(1,item)">驳回</view>
			</view>
			<view class="get-null-box" v-if="getDataType">暂无更多数据</view>
		</scroll-view>
		<view v-if="hazardousWasteUserType == 0" class="add-button" @click="goPage()">新申请</view>
		<view class="shade-max-big-box" v-if="dialogType">
			<view class="shade-null-1" @click="rejectionButton(2)"></view>
			<view class="shade-big-box">
				<view class="shade-title-p">驳回申请</view>
				<textarea class="textarea" placeholder="请输入驳回原因及说明" 
				maxlength="100" v-model="dialogText"></textarea>
				<view class="shade-button-box">
					<view @click="dialogButton(1)">取消</view>
					<view @click="dialogButton(2)">驳回</view>
				</view>
			</view>
			<view class="shade-null-2" @click="rejectionButton(2)"></view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		hwmsAppRegisterApprovalApplyList,
		hwmsAppRegisterApprovalApply,
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				hazardousWasteUserType:uni.getStorageSync('hazardousWasteUserType'),
				typeList:[
					{ value: "", label: "全部" },
					{ value: "0", label: "待审批" },
					{ value: "1", label: "已通过" },
					{ value: "2", label: "驳回" },
				],
				// 查询参数
				getDataType: false,
				queryParams: {
					page: 1,
					pageSize: 10,
					status:"",
				},
				typeIndex:0,
				total: 0,
				dataList: [],
				dialogData:{},
				dialogType:false,
				dialogText:'',
			}
		},
		onLoad(option) {
			if(option.skipType){
				uni.setStorageSync('permissionApply',true);
			}
		},
		onShow() {
			this.getList();
		},
		mounted() {
			
		},
		methods: {
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//获取实验室列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				obj.type = this.hazardousWasteUserType == 1?'2':'1'
				const {
					data
				} = await hwmsAppRegisterApprovalApplyList(obj);
				if (data.code == 200) {
					for(let i=0;i<data.data.records.length;i++){
						data.data.records[i].approveTime = parseTime(data.data.records[i].approveTime, "{y}-{m}-{d} {h}:{i}:{s}");
						data.data.records[i].submitTime = parseTime(data.data.records[i].submitTime, "{y}-{m}-{d} {h}:{i}:{s}");
					}
					if(self.queryParams.page == 1){
						this.$set(this, 'dataList', data.data.records);
						this.$set(this, 'total', data.data.total);
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}else{
						this.$set(this, 'dataList', [...this.dataList, ...data.data.records]);
						this.$set(this, 'total', data.data.total);
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
			//选择器
			typeChange(e){
				this.$set(this.queryParams,'status',this.typeList[e.detail.value].value);
				this.$set(this,'typeIndex',e.detail.value);
				this.$set(this.queryParams, 'page', 1);
				this.$set(this, 'dataList', []);
				this.$set(this, 'getDataType', true);
				this.getList();
			},
			//通过
			throughButton(item){
				let self = this;
				this.$set(this,'dialogData',item);
				uni.showModal({
					content: '是否确认通过?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.hwmsAppRegisterApprovalApply(1);
						} else if (res.cancel) {}
					}
				});
			},
			//驳回
			rejectionButton(type,item){
				if(type == 1){
					this.$set(this,'dialogData',item);
					this.$set(this,'dialogText','');
					this.$set(this,'dialogType',true);
				}else{
					this.$set(this,'dialogType',false);
				}
			},
			//弹窗按钮
			dialogButton(type){
				if(type == 1){
					this.hwmsAppRegisterApprovalApply(1);
				}else if(type == 2){
					if(!this.dialogText){
						uni.showToast({
							title: '请输入备注',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
					this.hwmsAppRegisterApprovalApply(2);
				}
			},
			async hwmsAppRegisterApprovalApply(type){
				let self = this;
				let obj = {
					id:this.dialogData.id,
					status:type,
				};
				if(type == 2){
					obj.rejectReason = this.dialogText;
				}
				const {
					data
				} = await hwmsAppRegisterApprovalApply(obj)
				if (data.code == 200) {
					for(let i=0;i<self.dataList.length;i++){
						if(self.dialogData.id == self.dataList[i].id){
							self.dataList[i].status = type;
						}
					}
					uni.showToast({
						title: '提交成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					this.$set(this,'dialogType',false);
				}
			},
			goPage(){
				uni.navigateTo({
					url: "/pages_hazardousWasteRecycling/views/permissionApply/addPage",
				});
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.permissionApplyListPage{
		height: 100%;
		display flex;
		flex-direction column;
		.get-null-box {
			height: 100rpx;
			line-height: 100rpx;
			color: #999;
			text-align center;
		}
		.top-picker-box{
			.picker-p{
				border:1px solid #dedede;
				background-color: #fff;
				margin:20rpx 20rpx;
				padding:0 40rpx;
				line-height:60rpx;
				border-radius:10rpx;
				color:#999;
			}
			.check-picker-p{
				color:#333;
			}
		}
		.for-max-box{
			flex: 1;
			overflow-y scroll;
			padding:0 20rpx;
			.for-box{
				background-color: #fff;
				border-radius:10rpx;
				border:1rpx solid #dedede;
				width:666rpx;
				overflow: hidden;
				margin-bottom:20rpx;
				padding:20rpx;
				position: relative;
				view{
					font-size:30rpx;
					line-height:50rpx;
				}
				.title-p{
					font-weight:700;
				}
				.text-p{
					
				}
				.position-p{
					position: absolute;
					top:20rpx;
					right:20rpx;
					width:140rpx;
					text-align: center;
				}
				.colorA{
					color:#0183FA;
				}
				.colorB{
					color:#FF6A6A;
				}
				.button-p-1{
					position: absolute;
					bottom:120rpx;
					right:20rpx;
					background-color: #0183FA;
					border: 1rpx solid #0183FA;
					border-radius:10rpx;
					text-align: center;
					height:60rpx;
					line-height:58rpx;
					width:140rpx;
					color:#fff;
				}
				.button-p-2{
					position: absolute;
					bottom:20rpx;
					right:20rpx;
					background-color: #fff;
					border: 1rpx solid #FF6A6A;
					border-radius:10rpx;
					text-align: center;
					height:60rpx;
					line-height:58rpx;
					width:140rpx;
					color:#FF6A6A;
				}
			}
		}
		.add-button{
			width:650rpx;
			height:80rpx;
			margin:30rpx 50rpx 40rpx;
			line-height:80rpx;
			color:#fff;
			background-color: #0183FA;
			text-align: center;
			border-radius:10rpx;
		}
		.shade-max-big-box{
			position: fixed;
			height:100%;
			width:100%;
			background-color: rgba(0,0,0,0.5);
			display: flex;
			flex-direction: column;
			overflow: hidden
			.shade-null-1{
				flex:3;
			}
			.shade-null-2{
				flex:5;
			}
			.shade-big-box{
				width: 550rpx;
				margin: 0 auto;
				// height:500rpx;
				background-color: #fff;
				border-radius:10rpx;
				overflow: hidden;
				.shade-title-p{
					text-align: center;
					font-size: 34rpx;
					color: #0183fa;
					border-bottom: 1rpx solid #dedede;
					line-height: 80rpx;
				}
				.textarea{
					width: 450rpx;
					height: 200rpx;
					margin: 40rpx auto;
					border:1rpx solid #dededede;
					border-radius:10rpx;
					padding:20rpx;
				}
				.shade-button-box{
					display: flex;
					view:nth-child(1){
						flex:1;
						border-top:1px solid #dedede;
						background-color: #FFF;
						color:#0183FA;
						text-align: center;
						line-height:58rpx;
						height:60rpx;
						width:100rpx;
					}
					view:nth-child(2){
						flex:1;
						border:1px solid #0183FA;
						background-color: #0183FA;
						color:#fff;
						text-align: center;
						line-height:58rpx;
						height:60rpx;
						width:100rpx;
					}
				}
			}
		}
	}
</style>