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" :class="queryParams.type?'check-picker-p':''">{{queryParams.type?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.data1}}</view>
				<view class="text-p">{{item.data2}}</view>
				<view class="text-p">申请权限类型：{{item.data3}}</view>
				<view class="text-p">申请人：{{item.data4}}</view>
				<view class="text-p">申请时间：{{item.data5}}</view>
				<view class="text-p">审核人：{{item.data6}}</view>
				<view class="text-p">审核时间：{{item.data7}}</view>
				<view class="position-p" :class="item.data8==3?'colorB':'colorA'">{{item.data8==1?'待审批':(item.data8==2?'审批通过':(item.data8==3?'驳回':''))}}</view>
				<view class="button-p-1" @click="throughButton()">通过</view>
				<view class="button-p-2" @click="rejectionButton(1)">驳回</view>
			</view>
		</scroll-view>
		<view 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 {
		demo1,
		demo2
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				typeList:[
					{ value: 1, label: "全部" },
					{ value: 2, label: "待审批" },
					{ value: 3, label: "已通过" },
					{ value: 4, label: "驳回" },
				],
				// 查询参数
				getDataType: false,
				queryParams: {
					page: 1,
					pageSize: 10,
					type:1,
				},
				typeIndex:0,
				total: 0,
				dataList: [],
				dialogType:false,
				dialogText:'',
			}
		},
		onLoad(option) {
			
		},
		onShow() {

		},
		mounted() {
			this.$set(this,'dataList',[
				{
					data1:'植物营养实验室（A201）',
					data2:'资源环境学院-农科楼- A201',
					data3:'回收报备、称重登记',
					data4:'张三（2020110010）',
					data5:'2025-11-03 10:10:09',
					data6:'王二小',
					data7:'2025-11-04 10:10:09',
					data8:'1',
				},
				{
					data1:'植物营养实验室（A201）',
					data2:'资源环境学院-农科楼- A201',
					data3:'回收报备、称重登记',
					data4:'张三（2020110010）',
					data5:'2025-11-03 10:10:09',
					data6:'王二小',
					data7:'2025-11-04 10:10:09',
					data8:'2',
				},
				{
					data1:'植物营养实验室（A201）',
					data2:'资源环境学院-农科楼- A201',
					data3:'回收报备、称重登记',
					data4:'张三（2020110010）',
					data5:'2025-11-03 10:10:09',
					data6:'王二小',
					data7:'2025-11-04 10:10:09',
					data8:'3',
				},
			]);
		},
		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));
				const {
					data
				} = await laboratoryAppletSubList(obj);
				if (data.code == 200) {
					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,'type',this.typeList[e.detail.value].value);
				this.$set(this,'typeIndex',e.detail.value);
			},
			//通过
			throughButton(){
				let self = this;
				uni.showModal({
					content: '是否确认通过?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							
						} else if (res.cancel) {}
					}
				});
			},
			//驳回
			rejectionButton(type){
				if(type == 1){
					this.$set(this,'dialogText','');
					this.$set(this,'dialogType',true);
				}else{
					this.$set(this,'dialogType',false);
				}
			},
			//弹窗按钮
			dialogButton(type){
				if(type == 1){
					this.$set(this,'dialogType',false);
				}else if(type == 2){
					this.$set(this,'dialogType',false);
				}
			},
			goPage(){
				uni.navigateTo({
					url: "/pages_hazardousWasteRecycling/views/permissionApply/index",
				});
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.permissionApplyListPage{
		height: 100%;
		display flex;
		flex-direction column;
		.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 #0183FA;
						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>