aiot-app/pages/internalManagement/apply/index.vue

<template>
	<view class="blacklog-container">
		<uni-nav-bar  height="100rpx" fixed="true" statusBar="true" left-icon="back" :title="title" @clickLeft="back"
			background-color="#157A2C" color="#fff"></uni-nav-bar>
		<!-- <div>
			<u-search placeholder="搜索模板名称" shape="square" v-model="keyword"></u-search>
		</div> -->
		<view class="list-container">
			<u-list v-show='value1==0'>
				<u-list-item v-for="(item, index) in baseList" :key="index">
					<view class="kd-card">
						<view class="card-title">
							<text>{{ Object.values(item)[0] }}</text>
						</view>
						<view>

							<u-grid :border="true">
								<u-grid-item v-if='listItem.dictType== Object.keys(item)[0]' class='grid-item'
									:customStyle="{width:33+'%',height:220+'rpx'}"
									v-for="(listItem,listIndex) in defaultList" :key="listIndex"
									@click="handleDetail(listItem,'add')">
									<zui-svg-icon style="position: relative;bottom: -14px" :icon="listItem.icon"
										width="2rem" />
									<text class="grid-text">{{listItem.name}}</text>
								</u-grid-item>
							</u-grid>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<u-list v-show='value1==1' @scrolltolower="scrolltolower">
				<view v-show="list.length === 0" class="no_data">
						  	<u-empty mode="data" textSize="30"></u-empty>
				</view>
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="kd-card-1">
						<view class="card-title-1">
							<text>{{ item.processInstance.name }}</text>
							<text class="card-time-1">{{ item.createTime }}</text>
						</view>
						<view>
							<view class="card-body-1">
								<view class="card-col-1" v-for="itm in colOptions">
									<text class="label-1">{{ itm.label }}</text>
									<text class="content-1">{{ item[itm.key] }}</text>
								</view>
							</view>
							<view class="card-footer-1">
								<u-button type="success" @click="handleDetail(item, 'view')">处理</u-button>

								<u-button type="info" @click="handleDetailView(item, 'detail')">流程详情</u-button>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<u-list v-show='value1==2' @scrolltolower="scrolltolowerDone">
				<view v-show="doneList.length === 0" class="no_data">
						  	<u-empty mode="data" textSize="30"></u-empty>
				</view>
				<u-list-item v-for="(item, index) in doneList" :key="index" @click.native="handleDetailView(item)">
					<view class="kd-card-2">
						<view class="card-title-1">
							<text>{{ item.name }}</text>
							<text :class="resultClass[item.result]">{{ handleResult[item.result] }}</text>
						</view>
						<view>
							<view class="card-body-1">
								<view class="card-col-1">
									<text class="label-1">审批意见</text>
									<text class="content-1">{{ item.reason }}</text>
								</view>
								<view class="card-col-1">
									<text class="label-1">处理时间</text>
									<text class="content-1">{{ item.endTime }}</text>
								</view>
                                <view class="card-col-1">
									<text class="label-1">处理时间</text>
									<text class="content-1">{{ item.endTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		   
		</view>
		<u-tabbar class="tabbarBox" :value="value1" @change="change1" :fixed="true" :placeholder='false'
			:safeAreaInsetBottom="true">
			<u-tabbar-item class='tabbarItem' v-for="item in tabbarItems" :text="item.text" :icon="item.icon"
				@click="click1"></u-tabbar-item>
		</u-tabbar>

	</view>
</template>

<script>
	import {
		getTodoTaskPage,
		getProcessInstancePage
	} from '@/api/wt/index.js'
	let [page, size, isEnd] = [1, 10, true]
	let [donePage, doneSize, doneIsEnd] = [1, 10, true]
	import {
		getBpmCustomFormList
	} from '@/api/wt/index.js'
	import {
		getByCode
	} from '@/api/pda/common.js'
	import svgIcon from '@/components/svg-icon.vue'
	export default {
		components: {
			svgIcon
		},
		data() {
			return {
				value1: 0,
				title: '申请',
				handleResult: {
					1: '处理中',
					2: '通过',
					3: '不通过',
					4: '已取消',
				},
				resultClass: {
					1: 'text-warning',
					2: 'text-primary',
					3: 'text-danger',
					4: 'text-normal',
				},
				tabbarItems: [{
						text: '申请',
						icon: 'file-text',
					},
					{
						text: '我审批的',
						icon: 'edit-pen',
					},
					{
						text: '我提交的',
						icon: 'arrow-upward',
					}
				],
				keyword: '',
				baseList: [],
				defaultList: [],
				list: [],
				doneList: [],
			}
		},
		computed: {
			colOptions() {
				return [{
						label: '流程节点',
						key: 'name'
					},
					{
						label: '流程发起人',
						key: `startUserNickname`
					}
				]
			}
		},
		onShow() {
			this.getBaseList()
			page = 1
			this.list = []
			this.getList()
			donePage = 1
			this.doneList = []
			this.getDoneList()
		},
		methods: {
			scrolltolower() {
				if (isEnd) return
				page++
				this.getList()
			},
			scrolltolowerDone() {
				if (doneIsEnd) return
				donePage++
				this.getDoneList()
			},
			async getBaseList() {
				this.defaultList = await getBpmCustomFormList()
				this.baseList = await getByCode('collaborative_type')
			},
			handleDetail(item, type) {
				//'pages/home' + this.listData.miniHandleRouter
				///wt/components/feeApplication/taskSubmit
				let params = JSON.stringify({
					id: item.id,
					processInstanceId: item.processInstance?.id|| '',
					type: type
				})
				let queryParams = `params=${params}`
				let url = '/pages/home/wt/components/formParser/routerView'
				uni.navigateTo({
					url: `${url}?${queryParams}`
				})
			},
			handleDetailView(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/home/wt/components/detail?processInstanceId=${item.processInstance?.id||item.id}`
				})

			},
			async getList() {
				let paging = {
					pageNo: page,
					pageSize: size,
					processType: 1
				}
				let par = Object.assign(paging, this.params)
				isEnd = false
				const data = await getTodoTaskPage(par)
				this.list.push(...data.list)
				this.list.forEach(item => {
					item.startUserNickname = item.processInstance.startUserNickname
				})
				isEnd = this.list.length >= data.count
			},
			async getDoneList() {
				const params = {
					pageNo: page,
					pageSize: 8,
					...this.searchData,
					processType: 1
				}
				doneIsEnd = false
				const data = await getProcessInstancePage(params)
				this.doneList.push(...data.list)
				doneIsEnd = this.doneList.length >= data.count
			},
			change1(index) {
				console.log(index)
				this.value1 = index
				this.title = this.tabbarItems[index].text
			},
			click1(index) {
				this.value1 = index
				this.title = this.tabbarItems[index].text
			},
		}
	}
</script>

<style scoped lang="scss">
	.blacklog-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.grid-item {
		display: flex;
		justify-content: space-evenly;
		border-right: 1px solid #f3f3f3;
		border-bottom: 1px solid #f3f3f3;
	}

	.list-container {
		height: 80%;
		padding: 24rpx;
		background: $page-bg;
		overflow: hidden;
		// position: absolute;
		// top: 88rpx;
		// bottom: 0;
		// left: 0;
		// right: 0;

		/deep/ .u-list {
			height: 100% !important;
		}

	}

	.no_data {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #999;
		font-size: 50rpx;
	}

	.kd-card {
		font-size: 34rpx;
		color: #333;
		background-color: #fff;
		border-radius: 10rpx;
		word-break: break-all;
		margin-bottom: 24rpx;
		min-height: 220rpx;

		.status {
			font-weight: normal;
		}

		.card-title {
			font-size: 0.9rem;
			font-weight: bold;
			border-bottom: 1px solid #f1f1f1;
			padding: 10rpx 30rpx;
			color: #353535;
		}

	}

	.tabbarBox {
		height: 30rpx;
	}

	::v-deep .tabbarItem {

		.uicon-file-text,
		.uicon-edit-pen,
		.uicon-arrow-upward {
			font-size: 20px !important;
			top: 2px !important;
			line-height: 14px !important;
		}
	}

	.navBarBox {
		height: 140rpx;
	}

	.blacklog-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.kd-card-1 {
		font-size: 34rpx;
		color: #333;
		background-color: #fff;
		border-radius: 10rpx;
		word-break: break-all;
		margin-bottom: 24rpx;

		.status-1 {
			font-weight: normal;
		}

		.card-title-1 {
			font-size: 0.9rem;
			font-weight: bold;

			.card-time-1 {
				font-weight: normal;
				color: #bfbfbf;
				font-size: 0.9rem;
				align-self: center;
			}
		}

		.card-footer-1,
		.card-title-1 {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx;
		}

		.card-footer-1 {
			padding: 10rpx 30rpx 18rpx 30rpx;
			font-size: 0.8rem;

			/deep/ .u-button {
				width: 48%;
			}
		}

		.card-body-1 {
			padding: 0 28rpx;
			position: relative;
			min-height: 150rpx;
		}

		.card-body-1:after {
			content: '';
			position: absolute;
			left: auto;
			top: auto;
			bottom: 10rpx;
			right: auto;
			height: 1rpx;
			width: 91%;
			background-color: #f1f1f1;
		}

		.card-col-1 {
			padding: 8rpx 0;
			display: flex;

			// line-height: ;

			.content-1 {
				flex: 1;
				overflow: hidden;
				font-size: 0.9rem;
			}

			.label-1 {
				font-size: 0.9rem;
				color: #999;
				width: 25%;
			}
		}
	}

	.kd-card-2 {
		font-size: 34rpx;
		color: #333;
		background-color: #fff;
		border-radius: 10rpx;
		word-break: break-all;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;

		.status-1 {
			font-weight: normal;
		}

		.card-title-1 {
			font-size: 0.9rem;
			font-weight: bold;

			.card-time-1 {
				font-weight: normal;
				color: #bfbfbf;
				font-size: 0.9rem;
				align-self: center;
			}
		}

		.card-footer-1,
		.card-title-1 {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx;
		}

		.card-footer-1 {
			padding: 10rpx 30rpx 18rpx 30rpx;
			font-size: 0.8rem;

			/deep/ .u-button {
				width: 48%;
			}
		}

		.card-body-1 {
			padding: 0 28rpx;
			position: relative;
			min-height: 150rpx;
		}



		.card-col-1 {
			padding: 8rpx 0;
			display: flex;

			// line-height: ;

			.content-1 {
				flex: 1;
				overflow: hidden;
				font-size: 0.9rem;
			}

			.label-1 {
				font-size: 0.9rem;
				color: #999;
				width: 25%;
			}
		}
	}
</style>