cmc-oa/oa-ui-app/pages/message/index.vue

<!--
 * @Author: ysh
 * @Date: 2025-01-21 10:01:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-19 16:21:31
-->
<template>
	<view class="u-page container">
		<view class="send" @click="openSendFlow">
			<!-- <uv-icon name="bell-fill" color="#2979ff" size="50"></uv-icon> -->
			<uni-icons type="paperplane-filled" size="50" color="#2979ff"></uni-icons>
		</view>
		<scroll-view class="scroll-list" scroll-y="true">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-media-list" @click="$tab.navigateTo('/pages/message/apply/apply')">
						<view style="margin-right: 20rpx;">
							<u-image :fade="false" src="@/static/images/message/apply.png" width="40px" height="40px"></u-image>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top"><span>待办任务</span>
							</view>
							<view class="uni-media-list-text-bottom">
								<uni-text><span>您有新流程待办</span></uni-text>
							</view>
						</view>
						<view class="info">
							<span style="font-size: 26rpx;color: #999999;">{{ acceptTime }}</span>
							<u-badge class="info-badge" type="error" count="2" :max="99" :value="detail"></u-badge>
						</view>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-media-list" @click="$tab.navigateTo('/pages/message/completed/index')">
						<view style="margin-right: 20rpx;">
							<u-image :fade="false" src="@/static/images/message/completed.png" width="40px" height="40px"></u-image>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top"><span>已办任务</span>
							</view>
							<view class="uni-media-list-text-bottom">
								<uni-text><span>您的已办任务，在此进行撤回或查看已办任务等操作</span></uni-text>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-media-list" @click="$tab.navigateTo('/pages/message/myProcess/index')">
						<view style="margin-right: 20rpx;">
							<u-image :fade="false" src="@/static/images/message/flowable.png" width="40px" height="40px"></u-image>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top"><span>我的流程</span>
							</view>
							<view class="uni-media-list-text-bottom">
								<uni-text><span>您发起的流程，在此可取消流程</span></uni-text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<uv-popup ref="popup" mode="bottom">
			<view class="bottom-popup">
				<view v-for="item, index in sendFlowList" :key="index">
					<u-button @click="sendFlow(item)">{{ item.name }}</u-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
import { Snowflake } from '@/utils/snowFlake.js';
import { getNextFlowNodeByStart, todoList } from "@/api/flowable/todo";
import { listDefinition, definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
export default {
	data() {
		return {
			todoList: [],
			detail: 0,
			acceptTime: '',
			flowList: ['借款审批', '用车审批', '设备审批', '工作填报'],
			sendFlowList: [],
			queryProcessParams: {
				pageNum: 1,
				pageSize: 9999,
				name: null,
				category: null,
				key: null,
				tenantId: null,
				deployTime: null,
				derivedFrom: null,
				derivedFromRoot: null,
				parentDeploymentId: null,
				engineVersion: null
			},
		};
	},
	created() {
		this.getTodoList();
		this.getDefinitionList();
	},
	onLoad: function (options) {
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		this.getTodoList();
	},
	methods: {
		getTodoList() {
			todoList({
				pageNum: 1,
				pageSize: 999,
				name: null
			}).then(response => {
				this.detail = response.data.total;
				this.todoList = response.data.records;
				if (response.data.records.length != 0) {
					this.acceptTime = response.data.records[0].createTime;
				}
				uni.stopPullDownRefresh();
			});
		},
		getDefinitionList() {
			listDefinition(this.queryProcessParams).then(response => {
				this.definitionList = response.data.records;
				this.processTotal = response.data.total;
				this.processLoading = false;
				let list = []
				for (let i of this.definitionList) {
					if (this.flowList.includes(i.name)) {
						list.push(i)
					}
				}
				this.sendFlowList = list;
			});
		},
		openSendFlow() {
			this.$refs.popup.open();
		},
		sendFlow(row) {
			uni.showModal({
				title: '提示',
				content: '是否发起《'+row.name+'》流程？',
				success: (res) => {
					if (!res.confirm) {
						return;
					}
					// 继续执行后续代码
					this.sendFlowFun(row);
				}
			});
		},
		sendFlowFun(row) {
			let formId = new Snowflake(1n, 1n, 0n).nextId().toString();
			getNextFlowNodeByStart({ deploymentId: row.deploymentId, variables: { formId: formId } }).then(res => {
				let data = res.data;
				const variables = {};
				const formData = {};
				formData.disabled = true;
				formData.formBtns = false;
				formData.formId = formId
				if (row.id) {
					variables.variables = formData;
					definitionStart(row.id, JSON.stringify(variables)).then(res => {
						this.$modal.msgSuccess(res.msg);
						let procInstanceId = res.data;
						todoList({
							pageNum: 1,
							pageSize: 99999999, processInsId: procInstanceId
						}).then(toDoRes => {
							let records = toDoRes.data.records;
							if (records.length == 1) {
								records = records[0]
							}
							const query = {
								procInsId: records.procInsId,
								executionId: records.executionId,
								deployId: records.deployId,
								taskId: records.taskId,
								taskName: records.taskName,
								startUserName: records.startUserName + '-' + records.startDeptName,
								formId: formData.formId,
								procDefName: records.procDefName
							}
							const encodedParams = encodeURIComponent(JSON.stringify(query));
							uni.navigateTo({
								url: `/pages/message/apply/detail?params=${encodedParams}`
							})
							this.$refs.popup.close();
						})
					})
				}
			})
		}
	},
};
</script>
<style lang="scss">
@import '../common/uni.css';

.info {
	position: relative;

	.info-badge {
		position: absolute;
		right: 0;
		top: 45rpx;
	}
}

.container {
	// position: relative;
}

.send {
	position: absolute;
	right: 0px;
	bottom: 10px;
	width: 50px;
	height: 50px;
	background-color: #fff;
	border-radius: 4px;
}

.bottom-popup {
	max-height: 50vh;
	margin-bottom: 65px;
	padding: 10px;
	text-align: center;

	.popup-item {}
}
</style>
<style>
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>