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-if='value1==0 && baseReady'>
				<u-list-item v-for="(item, index) in baseList" :key="getBaseListKey(item, index)">
					<view class="kd-card">
						<view class="card-title">
							<text>{{ Object.values(item)[0] }}</text>
						</view>
						<view>

							<u-grid :border="true">
								<u-grid-item class='grid-item'
									:customStyle="{width:33+'%',height:220+'rpx'}"
									v-for="listItem in getFormsByType(Object.keys(item)[0])" :key="listItem.id || listItem.code || listItem.name"
									@click="handleDetail(listItem,'add')">
									<zui-svg-icon style="position: relative;bottom: -14px" :icon="listItem.icon"
										width="3rem" />
									<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="item.id || item.processInstanceId || 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, 'approve')">处理</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>
				<!-- @click.native="handleDetailView(item)" -->
				<u-list-item v-for="(item, index) in doneList" :key="item.id || item.processInstanceId || index" >
					<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>
									<text v-if="item.status == 1" class="content-2" @click.stop="handleWithdraw(item)">撤回</text>
								</view>
								<view class="card-col-1">
									<!-- <text class="label-1" @click.stop="handleDetail(item,'view','false')">提交记录</text> -->
								</view>
							
							</view>
							<view class="card-footer-1">
								<u-button type="success" @click="handleDetailRecode(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==3' @scrolltolower="scrolltolowerCopy">
				<view v-show="copyList.length === 0" class="no_data">
					<u-empty mode="data" textSize="30"></u-empty>
				</view>
				<!-- @click.native="handleDetailView(item)" -->
				<u-list-item v-for="(item, index) in copyList" :key="item.id || item.processInstanceId || index" >
					<view class="kd-card-2">
						<view class="card-title-1">
							<text><text v-if="item.isRead == 0" class="dot"></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" @click.stop="handleDetail(item,'view','false')">提交记录</text> -->
								</view>
							
							</view>
							<view class="card-footer-1">
								<u-button type="success" @click="handleDetailRecode(item, 'view')">提交记录</u-button>
								<u-button type="info" @click="handleDetailView(item, 'detail')">流程详情</u-button>
							</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,
		getProcessInstanceCopyPage,
		ccReaderTask,
		withdrawTask
	} from '@/api/wt/index.js'
	let [page, size, isEnd] = [1, 10, true]
	let [donePage, doneSize, doneIsEnd] = [1, 10, true]
	let [copyPage, copySize, copyIsEnd] = [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',
					},
					{
						text: '我的抄送',
						icon: 'file-text',
					}
				],
				keyword: '',
				baseReady: false,
				baseList: [],
				defaultList: [],
				list: [],
				doneList: [],
				copyList: []
			}
		},
		computed: {
			colOptions() {
				return [{
						label: '流程节点',
						key: 'name'
					},
					{
						label: '流程发起人',
						key: `startUserNickname`
					}
				]
			}
		},
		onShow() {
			this.getBaseList()
			page = 1
			this.list = []
			this.getList()
			donePage = 1
			this.doneList = []
			this.getDoneList()
			copyPage = 1
			this.copyList = []
			this.getCopyList()
		},
		methods: {
			getBaseListKey(item, index) {
				const key = Object.keys(item || {})[0]
				return key || index
			},
			getFormsByType(dictType) {
				return (this.defaultList || []).filter(item => item.dictType === dictType)
			},
			scrolltolower() {
				if (isEnd) return
				page++
				this.getList()
			},
			scrolltolowerDone() {
				if (doneIsEnd) return
				donePage++
				this.getDoneList()
			},
			scrolltolowerCopy() {
				if (copyIsEnd) return
				copyPage++
				this.getCopyList()
			},
			async getBaseList() {
				this.baseReady = false
				this.defaultList = await getBpmCustomFormList({status: 1})
				console.log(this.defaultList,'this.defaultList')
				this.baseList = await getByCode('collaborative_type')
				this.baseReady = true
			},
			handleDetail(item, type, isEdit = true) {
				//'pages/home' + this.listData.miniHandleRouter
				///wt/components/feeApplication/taskSubmit
				let params = JSON.stringify({
					id: item.id,
					processInstanceId: item.processInstance?.id || item.processDefinitionId || '',
					type: type,
					isEdit: isEdit
				})
				let queryParams = `params=${params}`
				let url = '/pages/home/wt/components/formParser/routerView'
				uni.navigateTo({
					url: `${url}?${queryParams}`
				})
			},
			async handleDetailRecode(item, type, isEdit = false) {
				//'pages/home' + this.listData.miniHandleRouter
				///wt/components/feeApplication/taskSubmit
				console.log('handleDetailRecode~~~', item)
				if(this.value1 == 3) {
					const readStatus = await ccReaderTask({
						id: item.id
					});

					console.log('readStatus~~', readStatus);
					if(readStatus) {
						item.isRead = 1;
					}
				}
				let params = JSON.stringify({
					processInstanceId: this.value1 == 3 ? item.processInstanceId : item.id,
					type: type,
					isEdit: isEdit

				})
				let queryParams = `params=${params}`
				let url = '/pages/home/wt/components/formParser/routerView'
				uni.navigateTo({
					url: `${url}?${queryParams}`
				})
			},
			handleDetailView(item) {
				uni.navigateTo({
					url: `/pages/home/wt/components/detail?processInstanceId=${ this.value1 == 3 ? item.processInstanceId : item.processInstance?.id || item.id}`
				})

			},
			handleWithdraw(row) {
				const processDefinitionKey = row.processDefinitionId.split(':')[0]
				uni.showModal({
					title: '提示',
					content: '是否确认撤回？',
					success: (res) => {
						if (res.confirm) {
							withdrawTask({
								processInstanceId: row.id,
								businessId: row.businessId,
								processDefinitionKey: processDefinitionKey,
							}).then(() => {
								uni.showToast({
									title: '撤回成功',
									icon: 'success'
								})
								// 刷新列表
								donePage = 1
								this.doneList = []
								this.getDoneList()
								page = 1
								this.list = []
								this.getList()
								copyPage = 1
								this.copyList = []
								this.getCopyList()
							}).catch(err => {
								uni.showToast({
									title: err.message || '撤回失败',
									icon: 'error'
								})
							})
						}
					}
				})
			},
			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: donePage,
					pageSize: 8,
					...this.searchData,
					processType: 1
				}
				doneIsEnd = false
				const data = await getProcessInstancePage(params)
				this.doneList.push(...data.list)
				doneIsEnd = this.doneList.length >= data.count
			},
			async getCopyList() {
				const params = {
					pageNo: copyPage,
					pageSize: 8,
					...this.searchData,
					// processType: 1
				}
				copyIsEnd = false
				const data = await getProcessInstanceCopyPage(params)
				this.copyList.push(...data.list)
				copyIsEnd = this.copyList.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;
	}

	.dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: red;
		display: inline-block;
		margin-right: 5rpx;
	}

	.grid-text {
		font-size: 15px;
		color: #333;
		padding: 10rpx 0 20rpx 0rpx;
		margin-top: 10rpx;
		/* #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-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%;
			}

			.content-2 {
				overflow: hidden;
				color: #999;
				font-size: 0.9rem;
			}
		}
	}
</style>