cxc-szcx-uniapp/pages/task/handle.vue
yangzhq68909 d650513a5d 1
2025-01-23 08:15:11 +08:00

391 lines
8.4 KiB
Vue

<template>
<view :class="['content',{'gray':store.isgray==1}]">
<customNav>
<view class="f-row aic box">
<view class="back" @click="back">
<uni-icons type="left" size="20" color="#fff"></uni-icons>
</view>
<view class="avatar">
<image :src="imgUrl(store.userinfo.avatar)" mode=""></image>
</view>
<view class="name">
{{taskInfo.processApplyUserName}}{{taskInfo.processDefinitionName}}
</view>
<view class="status" v-if="type==0">
待审批
</view>
<view class="status" v-if="type==1" style="background-color: #7AC756;">
已处理
</view>
</view>
</customNav>
<component :is="comp" :dataId="dataId"></component>
<view v-if="ifShow" style="display: block; margin: 10px;">
温馨提示:目前APP暂不支持电子签章审批,请登录PC端厂综合管理平台(https://10.75.166.6),在个人办公-我的任务中审批。</view>
<view class="btn f-row aic jcb" v-if="type == 0 && !ifShow">
<view class="refuse" @click="openpop(1)">
拒绝
</view>
<view class="agree" @click="openpop(2)">
同意
</view>
</view>
<uni-popup ref="popup" type="center">
<view class="popup">
<view class="title">
审批意见
</view>
<view class="f-col aic">
<view class="input f-col">
<textarea v-model="reason" name="" id="" maxlength="200" placeholder="请输入"></textarea>
<view class="">
{{reason.length}}/200
</view>
</view>
</view>
<view v-if="status==2" class="agree_operate f-row aic" @click="chooseNextPerson=!chooseNextPerson">
<image v-if="chooseNextPerson" src="../../static/login/checked.png" mode=""></image>
<image v-else src="../../static/login/nocheck.png" mode=""></image>
<view class="">
指定下一步操作人
</view>
</view>
<view class="" v-else>
<picker :value="currentnode" :range="stepNode" range-key="NAME_" @change="nodeChange">
<view class="node">{{currentnode!=null?stepNode[currentnode].NAME_:'请选择驳回节点'}}</view>
</picker>
</view>
<view class="popbtn f-row aic">
<view class="cancel" @click="closepop">
取消
</view>
<view class="confirm" @click="handleProcess">
确定
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {
ref,
getCurrentInstance
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import {
getProcessNodeInfoApi,
processCompleteApi,
getProcessTaskTransInfoApi,
getHisProcessNodeInfoApi,
} from '@/api/api.js';
import {
beforeJump
} from '@/utils/index.js';
import customNav from '../../bpm/customNav.vue';
import {
imgUrl
} from '@/utils/index.js';
import {
useStore
} from '@/store';
const store = useStore()
const {
proxy
} = getCurrentInstance()
const popup = ref(null)
const reason = ref('')
/**拒绝(1)||同意(2)*/
const status = ref(null)
const openpop = (val) => {
status.value = val
popup.value.open()
reason.value = val == 2 ? '同意' : ''
}
const closepop = () => {
popup.value.close()
}
const comp = ref(null)
const dataId = ref('')
const ifShow = ref(false) //20250122 判断是否是签章业务 提示文字
const getProcessNodeInfo = (taskId) => {
getProcessNodeInfoApi({
taskId
}).then((res) => {
if (res.success) {
dataId.value = res.result.dataId
comp.value = res.result.formUrlMobile
}
})
}
const back = () => {
uni.navigateBack()
}
/**是否指定下一步操作人*/
const chooseNextPerson = ref(false)
let nextnode = null
/**流程办理判断*/
const handleProcess = () => {
// if (!reason.value.trim()) return proxy.$toast('请输入审批意见')
let params = {}
if (status.value == 1) { // 拒绝
if (currentnode.value == null) return proxy.$toast('请选择驳回节点')
params.processModel = 3
params.rejectModelNode = stepNode.value[currentnode.value].TASK_DEF_KEY_
processComplete(params)
} else { // 同意
if (chooseNextPerson.value) { //去选下一步操作人
beforeJump('/pages/userlist/index', () => {
closepop()
uni.navigateTo({
url: `/pages/userlist/index?id=${taskInfo.value.id}&isradio=1&nextnode=${JSON.stringify(nextnode)}&reason=${reason.value}`
})
})
} else {
params.processModel = 1
processComplete(params)
}
}
}
/**流程办理接口*/
const processComplete = (params) => {
processCompleteApi({
taskId: taskInfo.value.id,
reason: reason.value,
...params
}).then((res) => {
if (res.success) {
proxy.$toast(res.message)
setTimeout(() => {
uni.navigateBack()
}, 2000)
}
})
}
/**审批流程节点*/
const stepNode = ref([])
/**当前选择的节点*/
const currentnode = ref(null)
/**切换节点*/
const nodeChange = (e) => {
currentnode.value = e.detail.value
}
const getProcessTaskTransInfo = (e) => {
getProcessTaskTransInfoApi({
taskId: taskInfo.value.id
}).then((res) => {
if (res.success) {
stepNode.value = res.result.histListNode
nextnode = res.result.transitionList
}
})
}
/**历史任务详情*/
const getHisProcessNodeInfo = (procInstId) => {
getHisProcessNodeInfoApi({
procInstId
}).then((res) => {
if (res.success) {
dataId.value = res.result.dataId
comp.value = res.result.formUrlMobile
}
})
}
/**判断是否是电子签章节点任务,是则显示温馨提示并隐藏审批按钮*/
const getIfShow = () => {
if (taskInfo.value.taskId == 'task1705482211321' || taskInfo.value.taskId == 'task1705482639673' ||
taskInfo.value.taskId == 'task1714092890849' || taskInfo.value.taskId == 'task1714092955682' ||
taskInfo.value.taskId == 'task1689151174324' || taskInfo.value.taskId == 'task1677809773570' ||
taskInfo.value.taskId == 'task1689579219152')
{ // 签章业务:非常规 承包商资质审查 招标采购 公务接待 房屋租赁
ifShow.value = true;
} else {
ifShow.value = false;
}
}
const taskInfo = ref(null)
let type = null
onLoad((options) => {
taskInfo.value = JSON.parse(options.info)
type = options.type
if (type == 1 || type == 2) {
return getHisProcessNodeInfo(taskInfo.value.processInstanceId)
}
getProcessNodeInfo(taskInfo.value.id)
getProcessTaskTransInfo()
getIfShow()
})
</script>
<style>
page {
background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.popup {
width: 690rpx;
background: #FFFFFF;
border-radius: 8rpx;
.node {
margin: 24rpx;
font-size: 28rpx;
color: #333333;
padding: 0 20rpx;
}
.agree_operate {
padding: 24rpx;
font-size: 28rpx;
color: #333333;
image {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
.title {
font-size: 32rpx;
color: #000000;
text-align: center;
padding: 40rpx 0;
}
.input {
width: 582rpx;
height: 226rpx;
background: #F8F8F8;
border-radius: 8rpx;
padding: 24rpx;
textarea {
flex: 1;
width: 100%;
}
view {
text-align: right;
font-size: 28rpx;
color: #999999;
}
}
.popbtn {
font-size: 32rpx;
border-top: 1px solid #E5E5E5;
margin-top: 40rpx;
position: relative;
&::after {
position: absolute;
content: ' ';
height: 100rpx;
width: 1px;
background-color: #E5E5E5;
left: 50%;
transform: translateX(-50%);
}
view {
flex: 1;
text-align: center;
height: 100rpx;
line-height: 100rpx;
}
.cancel {
color: #000000;
}
.confirm {
color: #007FFF;
}
}
}
.content {
// margin-top: 88rpx;
padding-bottom: 120rpx;
}
.btn {
position: fixed;
bottom: 0;
width: 690rpx;
height: 120rpx;
background: #FFFFFF;
padding: 0 30rpx;
view {
width: 330rpx;
height: 88rpx;
font-size: 28rpx;
border-radius: 16rpx;
text-align: center;
line-height: 88rpx;
}
.refuse {
box-sizing: border-box;
background: #FFFFFF;
border: 2rpx solid #01508B;
color: #01508B;
}
.agree {
background: #01508B;
color: #FFFFFF;
}
}
.box {
position: absolute;
bottom: 12rpx;
left: 0;
}
.back {
padding-left: 30rpx;
}
image {
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
background-color: #fff;
margin-right: 16rpx;
margin-left: 50rpx;
}
.name {
font-size: 28rpx;
color: #FFFFFF;
}
.status {
padding: 4rpx 8rpx;
display: inline-block;
background-color: #FE4600;
color: #FFFFFF;
font-size: 20rpx;
margin-left: 8rpx;
border-radius: 8rpx;
}
</style>