feat(process/detail): 我的流程撤销功能

api/process.js

@@ -158,4 +158,19 @@ export function submitProcessFlow(flow, form, control) {
 			}
 		}
 	})
+}
+
+export function cancelProcessFlow(staffId, cancelRemark, {insId, control}) {return request({
+		url: preUrl,
+		method: 'post',
+		data: {
+			serviceId: 'bpm_20191025BpmClientCancelFlow',
+			params: {
+				staffId,
+				cancelRemark,
+				insId,
+				control
+			}
+		}
+	})
 }

pages/message/index.vue

@@ -14,7 +14,7 @@
 				</template>
 				<view class="process_container">
 					<view class="process_list">
-						<process-list ref="processListRef"  @clickSegment="getProcessData"
+						<process-list ref="processListRef" @clickSegment="getProcessData"
 							@clickItem="handleToProcessDetail" @scrollToBottom="getProcessPage" :current="0" :pSize="5"
 							:pageNo="1" contentHeight="69.5vh"></process-list>
 					</view>
@@ -23,15 +23,14 @@
 		</uni-collapse>
 
 		<!-- 公告列表  -->
-		<message-list  @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail"
-			@scrollToBottom="getNoticePage" :pSize="5" :pageNo="1" :anime="true" :open="false"
-			title="公告"></message-list>
+		<message-list @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail" @scrollToBottom="getNoticePage"
+			:pSize="5" :pageNo="1" :anime="true" :open="false" title="公告"></message-list>
 
 		<!-- 消息列表 -->
-		<message-list ref="msgListRef" @readMsg="setAllMsgRead" :unReadNum="unReadMsgNum" 
-			@clickSegment="getMessageData" @clickItem="handleToMessageDetail" @scrollToBottom="getMessagePage"
-			:defaultCurrent="1" :pSize="5" :pageNo="1" :anime="true" :open="true"
-			:segments="{ '全部': '', '未读': '0', '已读': '1' }" title="消息"></message-list>
+		<message-list ref="msgListRef" @readMsg="setAllMsgRead" :unReadNum="unReadMsgNum" @clickSegment="getMessageData"
+			@clickItem="handleToMessageDetail" @scrollToBottom="getMessagePage" :defaultCurrent="1" :pSize="5"
+			:pageNo="1" :anime="true" :open="true" :segments="{ '全部': '', '未读': '0', '已读': '1' }"
+			title="消息"></message-list>
 
 		<!-- 跳转打卡页按钮 -->
 		<view class="fab_button toClockInBtn">
@@ -49,7 +48,7 @@
 
 <script setup lang="ts">
 import { onBeforeMount, onMounted, onUpdated, ref } from 'vue';
-import { onLoad,onShow } from '@dcloudio/uni-app'
+import { onLoad, onShow } from '@dcloudio/uni-app'
 import { getMessageList, getNoticeList, getUnReadMessageNum, setMsgIsRead } from '@/api/message.js';
 import { getUserProcess, getUnProcessNum } from '@/api/process';
 import $tab from '@/plugins/tab.js';
@@ -72,7 +71,7 @@ onLoad((options) => {
 	// 是否跳转打卡页
 	if (options.to == 'clockIn') toClockIn()
 })
-onShow(()=>{
+onShow(() => {
 	showTabBarBadge();
 })
 onBeforeMount(() => {
@@ -86,7 +85,7 @@ function toClockIn() {
 	// 确认是否跳转打卡页
 	$modal.confirm('当前未打卡，是否前往打卡').then(() => {
 		$tab.navigateTo('/pages/mine/clockIn/clockIn')
-	})
+	}).catch(() => { })
 }
 
 //子组件
@@ -208,12 +207,12 @@ function handleToMessageDetail({ messageid, universalid }) {
 			$tab.navigateTo('/pages/message/detail/index?messageId=' + messageid + '&universalId=' + universalid)
 		} else {
 			$modal.confirm('登录状态失效，您可以继续留在该页面，或者重新登录?').then(res => {
-				const loginInfo=getLoginInfo();
-				userStore.LogOut().then(res=>{
-					uni.setStorageSync('loginInfo',loginInfo)
+				const loginInfo = getLoginInfo();
+				userStore.LogOut().then(res => {
+					uni.setStorageSync('loginInfo', loginInfo)
 					$tab.reLaunch('/pages/login')
 				})
-			})
+			}).catch(() => { })
 		}
 	})
 }
@@ -293,12 +292,12 @@ function setAllMsgRead() {
 							userStore.LogOut().then(res => {
 								uni.reLaunch({ url: '/pages/login' })
 							})
-						})
+						}).catch(()=>{})
 					}
 				})
 			})
 		}
-	})
+	}).catch(()=>{})
 }
 </script>
 

pages/process/detail/index.vue

@@ -56,30 +56,34 @@
 				<attachment-list :attachments="item.files"></attachment-list>
 			</uni-card>
 		</view>
-		<view class="flow_step_container">
+		<view>
 			<uni-card>
-				<uni-section titleFontSize="1.3rem" title="流转过程" type="line"></uni-section>
-				<up-steps :current="stepActive" activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
-					<view v-for="(step, index) in options">
-						<up-steps-item v-if="step.state == 3" :title="step.title" :desc="step.desc" :key="index" error>
-						</up-steps-item>
-						<up-steps-item v-else-if="index == stepActive" :title="step.title" :desc="step.desc"
-							:key="index">
-							<template #icon>
-								<view class="active_step_circle">
-									<text class="active_step_text">{{ index + 1 }}</text>
-								</view>
-							</template>
-						</up-steps-item>
-						<up-steps-item v-else :title="step.title" :desc="step.desc" :key="index"></up-steps-item>
-					</view>
-				</up-steps>
+				<view class="flow_step_container">
+					<uni-section titleFontSize="1.3rem" title="流转过程" type="line"></uni-section>
+					<up-steps :current="stepActive" activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
+						<view v-for="(step, index) in options">
+							<up-steps-item v-if="step.state == 3" :title="step.title + ' 退回'" :desc="step.desc"
+								:key="index" error></up-steps-item>
+							<up-steps-item v-else-if="step.state == 0" :title="step.title + ' 撤销'" :desc="step.desc"
+								:key="index" error></up-steps-item>
+							<up-steps-item v-else-if="index == stepActive" :title="step.title" :desc="step.desc"
+								:key="index">
+								<template #icon>
+									<view class="active_step_circle">
+										<text class="active_step_text">{{ index + 1 }}</text>
+									</view>
+								</template>
+							</up-steps-item>
+							<up-steps-item v-else :title="step.title" :desc="step.desc" :key="index"></up-steps-item>
+						</view>
+					</up-steps>
+				</view>
 			</uni-card>
 		</view>
 		<view v-if="processInfo.tinsId">
 			<view class="remark_container">
 				<uni-card>
-					<uni-section titleFontSize="1.3rem" title="备注" type="line"></uni-section>
+					<uni-section titleFontSize="1.3rem" title="环节备注" type="line"></uni-section>
 					<view class="remark_content">
 						<uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入"></uni-easyinput>
 					</view>
@@ -88,7 +92,7 @@
 		</view>
 		<view v-if="processInfo.tinsId" class="approve_button">
 			<uni-card spacing="0" padding="0">
-				<button :loading="!button_state" type="primary" @click="submitProcess('1')">通过</button>
+				<button :loading="!button_state" type="primary" @click="handleSubmitProcess('1')">通过</button>
 			</uni-card>
 		</view>
 	</view>
@@ -97,16 +101,31 @@
 			<uni-card spacing="0" padding="0" :is-shadow="false" :border="false">
 				<uni-row>
 					<uni-col :span="11">
-						<button :loading="!button_state" type="warn" @click="submitProcess('0')">退回上一级</button>
+						<button :loading="!button_state" type="warn" @click="handleSubmitProcess('0')">退回上一级</button>
 					</uni-col>
 					<uni-col :span="11" :offset="2">
-						<button :loading="!button_state" type="warn" @click="submitProcess('2')">退回发起人</button>
+						<button :loading="!button_state" type="warn" @click="handleSubmitProcess('2')">退回发起人</button>
 					</uni-col>
 				</uni-row>
 			</uni-card>
 		</view>
 	</view>
-	<view style="height: 5px; margin-top: 10px;"></view>
+	<view v-else-if="processInfo.username == userStore.user.name">
+		<view class="remark_container">
+			<uni-card>
+				<uni-section titleFontSize="1.3rem" title="撤销备注" type="line"></uni-section>
+				<view class="remark_content">
+					<uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入"></uni-easyinput>
+				</view>
+			</uni-card>
+		</view>
+		<view class="cancel_button_container">
+			<uni-card spacing="0" padding="0">
+				<button :loading="!button_state" type="warn" @click="handleCancelProcess">撤销</button>
+			</uni-card>
+		</view>
+	</view>
+	<view style="height: 5px; margin-top: 20px;"></view>
 </template>
 
 <script setup lang="ts">
@@ -115,21 +134,23 @@ import { onLoad } from '@dcloudio/uni-app'
 import attachmentList from '@/components/ygoa/attachmentList.vue'
 import $tab from '@/plugins/tab.js'
 import $modal from '@/plugins/modal.js'
-import { getProcessFlowInfo, getProcessFormInfo, getProcessFormInfoInFlow, getProcessFlow, submitProcessFlow } from '@/api/process.js'
+import { getProcessFlowInfo, getProcessFormInfo, getProcessFormInfoInFlow, getProcessFlow, submitProcessFlow, cancelProcessFlow } from '@/api/process.js'
 import { useUserStore } from '@/store/user.js'
 const userStore = useUserStore()
 const processInfo = reactive({
 	insId: '',
 	insName: '',
 	control: 1,
+	username: '',
 	tinsId: undefined
 })
-onLoad(({ insId, tinsId, insName, control }) => {
+onLoad(({ username, insId, tinsId, insName, control }) => {
 	// 获取传入的标题参数
 	const title = insName || '流程信息';
 	processInfo.insId = insId
 	processInfo.insName = insName
 	processInfo.control = control
+	processInfo.username = username
 	if (tinsId) {
 		processInfo['tinsId'] = tinsId
 	}
@@ -228,8 +249,16 @@ function handlerepeatingForm() {
 
 const button_state = ref(true)
 const remark = ref('')
+function handleSubmitProcess(result) {
+	let content = '确认退回'
+	if (result == "1") {
+		content = '确认通过'
+	}
+	$modal.confirm(content).then(() => {
+		submitProcess(result)
+	}).catch(() => { })
+}
 function submitProcess(result) {
-	console.log('formElements: ', formElements);
 	formInfo.value.formElements = formElements.value.map(({ tableField, defaultValue }) => {
 		return {
 			name: tableField,
@@ -253,13 +282,35 @@ function submitProcess(result) {
 		} else {
 			$modal.msgSuccess(returnMsg)
 			// 通知列表刷新数据
-			uni.$emit('ReloadProcessData', '测试$emit');
+			uni.$emit('ReloadProcessData');
 			setTimeout(() => {
 				$tab.navigateBack();
 			}, 1000)
 		}
 	})
 }
+
+function handleCancelProcess() {
+	$modal.confirm('确认撤销').then(() => {
+		cancelProcess()
+	}).catch(() => { })
+}
+function cancelProcess() {
+	cancelProcessFlow(userStore.user.useId, remark.value, processInfo).then(({ returnMsg }) => {
+		if (returnMsg.includes('success')) {
+			$modal.msgSuccess('撤销成功')
+			// 通知列表刷新数据
+			uni.$emit('ReloadProcessData');
+			setTimeout(() => {
+				$tab.navigateBack();
+			}, 1000)
+		} else {
+			// 启用按钮
+			button_state.value = true
+			$modal.msgError(returnMsg)
+		}
+	})
+}
 </script>
 
 <style lang="scss">
@@ -304,6 +355,8 @@ function submitProcess(result) {
 	}
 
 	.flow_step_container {
+		min-height: 200px;
+
 		.u-steps {
 			.u-steps-item {
 				padding-bottom: 11px;
@@ -365,8 +418,8 @@ function submitProcess(result) {
 	}
 
 	.reject_button {
-		.uni-card {
-			background-color: transparent;
+		::v-deep uni-card {
+			background-color: #f5f5f5;
 		}
 	}
 }

pages/process/index.vue

@@ -46,7 +46,7 @@
 <script setup lang="ts">
 import processList from '@/components/ygoa/processList.vue'
 import { onShow } from '@dcloudio/uni-app'
-import { reactive, ref,onMounted, onUpdated } from 'vue';
+import { reactive, ref, onMounted, onUpdated } from 'vue';
 import $tab from '@/plugins/tab.js'
 import { getUserProcess, getUserProcessed, getUserProcessing, getUserAllProcess } from '@/api/process';
 import { useUserStore } from '@/store/user';
@@ -54,12 +54,11 @@ import { useUserStore } from '@/store/user';
 
 onMounted(() => {
 	uni.$on('ReloadProcessData', (res) => {
-		console.log('res: ',res);
 		processListRef.value.onClickItem()
 	})
 })
-onShow(()=>{
-		uni.$emit('showTabBarBadge')
+onShow(() => {
+	uni.$emit('showTabBarBadge')
 })
 const userStore = useUserStore();
 // 分段器选项
@@ -151,10 +150,12 @@ function getProcessPage({ pageNo, pSize }, callback) {
 	})
 }
 // 跳转到流程详情页
-function handleToProcessDetail({ insId, tinsId, insName, control }) {
+function handleToProcessDetail({ username, insId, tinsId, insName, control }) {
 	let url = '/pages/process/detail/index?insId=' + insId + '&insName=' + insName + '&control=' + control
 	if (tinsId) {
 		url = url + '&tinsId=' + tinsId
+	} else if (current.value != 3) {
+		url = url + '&username=' + username
 	}
 	$tab.navigateTo(url)
 }