<template>
<view>
<cu-custom bgColor="bg-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">{{title}}</block>
</cu-custom>
<!-- 菜单 -->
<view class="bg-white nav fixed flex text-center" :style="[{top:CustomBar + 'px'}]">
<view class="cu-item flex-sub" :class="0==tabIndex?'text-blue cur':''" @tap="tabSelect" data-id="0">
表单信息
</view>
<view class="cu-item flex-sub" v-if="procInsId" :class="2==tabIndex?'text-blue cur':''" @tap="tabSelect" data-id="2">
流转记录
</view>
<!-- <view class="cu-item flex-sub" :class="1==tabIndex?'text-blue cur':''" @tap="tabSelect" data-id="1">
流程图
</view> -->
</view>
<view v-show="0 === tabIndex">
<scroll-view scroll-y class="page">
<view class=" bg-white margin-top">
<TestActivitiLeaveForm v-if="formUrl.endsWith('TestActivitiAuditForm')" :formReadOnly="formReadOnly" :class="formReadOnly?'readonly':''" ref="form" :businessId="businessId"></TestActivitiLeaveForm>
<!-- <component :formReadOnly="formReadOnly" :class="formReadOnly?'readonly':''" ref="form" :businessId="businessId" :is="form"></component> -->
<PreviewForm :formData="formData" v-if="formType !== '2'" :processDefinitionId="procDefId" :edit="true" ref="form"></PreviewForm>
</view>
<view class=" bg-white margin-top" v-if="!procInsId || taskId">
<form @submit="formSubmit">
<view class="cu-list menu">
<view class="cu-form-group" v-if="!procInsId" >
<view class="title">
<text class="red-color">* </text> 标题
</view>
<input placeholder="请输入流程标题" maxlength="200" v-model="title" name="title"></input>
</view>
<view class="cu-form-group" v-if="taskId">
<view class="title">
<text class="red-color">* </text> 内容
</view>
<textarea maxlength="2000" v-model="auditForm.message" name="message" placeholder="请输入审批意见"></textarea>
</view>
<view class="cu-form-group">
<view class="title">是否抄送</view>
<jp-switch v-model="isCC" ></jp-switch>
</view>
<view class="cu-form-group" v-if="isCC">
<view class="title">抄送给</view>
<user-select v-model="auditForm.userIds" ></user-select>
</view>
<view class="cu-form-group">
<view class="title">指定下一步处理者</view>
<jp-switch v-model="isAssign"></jp-switch>
</view>
<view class="cu-form-group" v-if="isAssign">
<view class="title">指定</view>
<user-select v-model="auditForm.assignee" ></user-select>
</view>
<user-select-dialog title="选择转办用户" ref="transferUserSelectDialog" :showRadio="true" :showCheckBox="false" @doSubmit="selectUsersToTransferTask"></user-select-dialog>
<user-select-dialog title="选择委派用户" ref="delegateUserSelectDialog" :showRadio="true" :showCheckBox="false" @doSubmit="selectUsersToDelateTask"></user-select-dialog>
<user-select-dialog title="选择加签用户" ref="addSignTaskUserSelectDialog" @doSubmit="selectUsersToAddSignTask"></user-select-dialog>
<task-back-nodes ref="taskBackNodes" @getBackTaskDefKey="back"></task-back-nodes>
</view>
<view class="bottom-wrap flex">
<view class="flex-sub" v-show="button.isHide === '0'"
v-for="(button, index) in buttons" :key="index" >
<button class="cu-btn lg block buttonBox" @click="submit(button, buttons)"> {{button.name}}</button>
</view>
</view>
</form>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</view>
<view v-show="1 === tabIndex">
<view class="padding bg-white margin-top">
<!-- <img :src="`/getAppFlowChart/`+procDefId+`/`+procInsId" class="procPic"/> -->
</view>
</view>
<view v-show="2 === tabIndex">
<view class="padding bg-white margin-top">
<view class="cu-timeline" :key="index" v-for="(act, index) in historicTaskList">
<view class="cu-time">{{act.histIns.startTime |formatDate('MM-DD')}}</view>
<view class="cu-item text-blue">
<view class="content">
<view class="cu-capsule radius">
<view class="cu-tag bg-cyan">{{act.histIns.activityName}}</view>
<!-- <view class="cu-tag line-cyan">{{act.histIns.activityName}}</view> -->
</view>
<view class="margin-top">
审批人 ： {{act.assigneeName}}
</view>
<view class="margin-top">
办理状态 ：<view class="cu-tag bg-blue">{{act.comment.status}}</view>
</view>
<view class="margin-top">
审批意见 ： {{act.comment.message}}
</view>
<view class="margin-top">
开始时间 : {{act.histIns.startTime |formatDate}}
</view>
<view class="margin-top">
结束时间 : {{act.histIns.endTime |formatDate}}
</view>
<view class="margin-top">
用时 : {{act.durationTime || '0秒'}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import userSelect from '@/components/user-select/user-select.vue'
import userSelectDialog from '@/components/user-select/user-select-dialog.vue'
import PreviewForm from '../form/GenerateFlowableForm'
import TaskBackNodes from './components/TaskBackNodes.vue'
import TestActivitiLeaveForm from '@/pages/test/activiti/TestActivitiLeaveForm.vue'
import moment from 'moment'
import taskService from "@/api/flowable/taskService"
import formService from "@/api/flowable/formService"
import processService from "@/api/flowable/processService"
import flowCopyService from "@/api/flowable/flowCopyService"
import taskDefExtensionService from "@/api/flowable/taskDefExtensionService"
var graceChecker = require("@/common/graceChecker.js");
export default {
onLoad: function (option) {
this.flow = JSON.parse(decodeURIComponent(option.flow));
this.procDefId = this.flow.procDefId
this.procDefKey = this.flow.procDefKey
this.formType = this.flow.formType
this.formUrl = this.flow.formUrl
this.taskId = this.flow.taskId
this.taskDefKey = this.flow.taskDefKey
this.status = this.flow.status
this.title = this.flow.formTitle
this.businessId = this.flow.businessId
this.procInsId = this.flow.procInsId
this.formReadOnly = this.flow.formReadOnly !== undefined && this.flow.formReadOnly !== 'false' && this.flow.formReadOnly !== false
this.isCC = false
this.isAssign = false
this.auditForm.assignee = null
this.auditForm.userIds = null
this.auditForm.message = ''
},
async mounted () {
if (this.formType === '2') { //外置表单
if (this.formUrl === '/404') {
this.form = null
uni.showToast({ title: '没有关联流程表单!', icon: "none" });
} else {
// uniapp 不支持动态组件，所以通过名称匹配决定调用的表单组件
if(this.formUrl.endsWith('TestActivitiAuditForm')){
this.form = TestActivitiLeaveForm
}else{
uni.showToast({ title: '没有关联流程表单!', icon: "none" });
}
}
} else { // 动态表单
// 读取流程表单
if (this.formUrl === '/404') {
uni.showToast({ title: '没有关联流程表单!', icon: "none" });
} else {
let {data} = await formService.getMobileForm(this.formUrl);
// 初始化动态表单
data.forEach((item)=>{ //挂载 writable，readable,value 属性，是为了触发对这三个属性的监听
item.writable = true
item.readable = true
if(this.isObjectValue(item)){
item.value = null
}else{
item.value = ''
}
let input = JSON.parse(JSON.stringify(item))
this.formData.push(input)
})
if (this.status === 'start') {
// 读取启动表单配置
let {data} = await formService.getStartFormData({processDefinitionId: this.procDefId})
this.setData(data, 'start')
} else {
// 读取任务表单配置
let {data} = await formService.getTaskFormData({taskId: this.taskId})
this.setData(data, 'audit')
}
}
}
// 读取按钮配置
if (this.status === 'start') {
this.buttons = [{code: '_flow_start', name: '启动', isHide: '0'}]
} else if (this.procDefKey && this.taskDefKey) {
// 读取按钮
taskDefExtensionService.queryByDefIdAndTaskId({
processDefId: this.procDefKey,
taskDefId: this.taskDefKey
}).then(({data}) => {
this.buttons = data.flowButtonList
})
}
// 读取历史任务列表
taskService.historicTaskList(this.procInsId).then(({data}) => {
this.historicTaskList = data.reverse()
})
},
components:{
userSelect,
userSelectDialog,
TestActivitiLeaveForm,
TaskBackNodes,
PreviewForm
},
data() {
return {
flow: null,
tabIndex: 0,
form: null,
formType: '',
formUrl: '',
taskSelectedTab: 'frist',
historicTaskList: [],
procDefId: '',
procInsId: '',
formReadOnly: false,
procDefKey: '',
taskId: '',
formData: [],
taskDefKey: '',
status: '',
title: '',
businessId: '',
buttons: [],
isCC: false,
isAssign: false,
auditForm: {
message: '',
type: '',
status: '',
userIds: null,
assignee: null
}
}
},
methods:{
tabSelect (e) {
this.tabIndex = parseInt(e.currentTarget.dataset.id);
},
// 为任务表单赋值
setData (taskFormData, status) {
this.formData.forEach((input)=>{
let item = taskFormData.filter((item)=>{
if(input.model === item.id){
return true
}else{
return false
}
})[0]
if(item){
if(status === 'start'){
this.isFixParam(input)
if(this.isObjectValue(input)){
if(input.options.defaultValue && typeof input.options.defaultValue=== 'string'){
input.value = JSON.parse(input.options.defaultValue)
}else{
input.value = input.options.defaultValue
}
}else{
input.value = input.options.defaultValue || ''
}
}else{
if(this.isObjectValue(input)){
if(item.value && typeof item.value=== 'string'){
input.value = JSON.parse(item.value)
}else {
input.value = item.value
}
}else{
input.value = item.value
}
}
input.readable = item.readable
input.writable = item.writable
}else{
input.readable = false
}
})
},
// 默认参数赋值替换 ${user.name}...
isFixParam (input) {
if(/^[$][{].*[}]$/.test(input.options.defaultValue)){
let params = input.options.defaultValue.substring(2, input.options.defaultValue.length-1)
if(params === "new Date()"){
input.options.defaultValue = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
}else{
let value = {user: this.$store.state.user.userInfo}
params.split('.').forEach((param)=>{
value = value?.[param]
})
input.options.defaultValue = value
}
}
},
// 判断数据类型是否是非String类型
isObjectValue (input) {
if(input.type === 'checkbox' ||
input.type === 'slider' ||
input.type === 'switch' ||
input.type === 'rate' ||
input.type === 'imgupload' ||
input.type === 'select' && input.options.multiple ||
input.type === 'fileupload'){
return true
}
return false
},
// 抄送
cc (procInsId) {
if (this.isCC && this.auditForm.userIds) {
flowCopyService.save({
userIds: this.auditForm.userIds,
procDefId: this.procDefId,
procInsId: procInsId,
procDefName: '',
procInsName: this.title,
taskName: ''
})
}
},
// 暂存草稿
save () {
},
// 启动流程
start (vars) {
if (this.formType === '2') { // 外置表单启动
this.$refs.form.saveForm((businessTable, businessId) => {
taskService.start({
procDefKey: this.procDefKey,
businessTable: businessTable,
businessId: businessId,
...vars,
title: this.title,
assignee: this.auditForm.assignee
}).then(({data}) => {
uni.showToast({ title: "启动成功", icon: "success" });
uni.navigateTo({
url: '/pages/workbench/task/TodoList'
})
this.cc(data)
})
})
} else { //动态表单启动
this.$refs.form.submitStartFormData({
processDefinitionId: this.procDefId,
...vars,
title: this.title,
assignee: this.auditForm.assignee
}, (data) => {
uni.showToast({ title: "启动成功", icon: "success" });
uni.navigateTo({
url: '/pages/workbench/task/TodoList'
})
this.cc(data)
})
}
},
// 同意
agree (vars) {
this.commit(vars) // 同意
},
// 驳回
reject () {
uni.showLoading()
uni.showModal({
title: '提示',
content: '确定驳回流程吗？',
success: (res) => {
if (res.confirm) {
taskService.backNodes(this.taskId).then(({data}) => {
let backNodes = data
if (backNodes.length > 0) {
let backTaskDefKey = backNodes[backNodes.length - 1].taskDefKey
this.back(backTaskDefKey)
}
})
} else if (res.cancel) {
uni.hideLoading()
}
}
});
},
// 驳回到任意节点
turnBack () {
this.$refs.taskBackNodes.init(this.taskId)
},
// 回退到任意节点
back (backTaskDefKey) {
taskService.back({
taskId: this.taskId,
backTaskDefKey: backTaskDefKey,
...this.auditForm
}).then(({data}) => {
uni.showToast({ title: "驳回成功", icon: "success" });
uni.navigateTo({
url: '/pages/workbench/task/TodoList'
})
this.cc(data)
})
},
// 加签
addMultiInstance () {
// this.$refs.addSignTaskUserSelectDialog.showModal()
},
selectUsersToAddSignTask (users) {
let userIds = users.map((user) => {
return user.id
}).join(',')
taskService.addSignTask({taskId: this.taskId, userIds: JSON.stringify(userIds), message: '', flag: false}).then(({data}) => {
uni.showToast({ title: data, icon: "success" });
})
},
// 减签
delMultiInstance () {
},
// 转办
transfer () {
this.$refs.transferUserSelectDialog.showModal()
},
selectUsersToTransferTask (userId) {
if(!userId){
uni.showToast({ title: '没有选择任何用户!', icon: "none" });
return
}
taskService.transfer(this.taskId, userId).then(({data}) => {
uni.showToast({ title: data, icon: "success" });
uni.navigateTo({
url: '/pages/workbench/task/TodoList'
})
})
},
// 委托
delegate () {
this.$refs.delegateUserSelectDialog.showModal()
},
selectUsersToDelateTask (userId) {
if(!userId){
uni.showToast({ title: '没有选择任何用户!', icon: "none" });
return
}
taskService.delegate(this.taskId, userId).then(({data}) => {
uni.showToast({ title: data, icon: "success" });
uni.navigateTo({
url: '/pages/workbench/task/TodoList'
})
})
},
// 终止
stop () {
uni.showLoading()
uni.showModal({
title: '提示',
content: '确定终止流程吗？',
success: (res) => {
if (res.confirm) {
processService.stop(this.procInsId, this.auditForm.message).then(({data}) => {
uni.showToast({ title: data, icon: "success" });
uni.navigateTo({
url: '/pages/workbench/task/TodoList'
})
})
} else if (res.cancel) {
uni.hideLoading()
}
}
});
},
// 打印
print () {
},
// 自定义按钮提交
commit (vars) {
//定义表单规则
var rule = [
{name:"message", checkType : "notnull", checkRule:"", errorMsg:"审批意见不能为空!"}
];
//进行表单检查
var formData = this.auditForm;
var checkRes = graceChecker.check(formData, rule);
if(!checkRes){
uni.showToast({ title: graceChecker.error, icon: "none" });
return;
}
if (this.formType === '2') { //外置表单审批
this.$refs.form.saveForm((businessTable, businessId) => {
taskService.audit({
taskId: this.taskId,
taskDefKey: this.taskDefKey,
procInsId: this.procInsId,
procDefId: this.procDefId,
vars: vars,
message: this.auditForm.message,
assignee: this.auditForm.assignee
}).then(({data}) => {
uni.showToast({ title: "审批成功", icon: "success" });
uni.navigateTo({
url: '/pages/workbench/task/TodoList'
})
this.cc(data)
})
})
} else { // 动态表单启动
this.$refs.form.submitTaskFormData(vars, this.procInsId, this.taskId, this.auditForm.assignee, this.auditForm, (data) => {
uni.showToast({ title: "启动成功", icon: "success" });
uni.navigateTo({
url: '/pages/workbench/task/TodoList'
})
//抄送
this.cc(data)
})
}
},
submit (currentBtn, buttons) {
let vars = {} // 存储流程变量
// 把当前操作对应的自定义按钮(以_flow_开头的是系统按钮，排除在外）的编码，存储为对应的流程变量，值设置为true，其余自定义按钮编码对应的流程变量值为false。
buttons.forEach((btn) => {
if (btn.code && !btn.code.startsWith('_flow_')) {
vars[btn.code] = false
}
})
if (currentBtn.code && !currentBtn.code.startsWith('_flow_')) {
vars[currentBtn.code] = true
}
vars.title = this.title // 标题
vars.assignee = this.auditForm.assignee // 指定的下一步骤处理人
this.auditForm.type = currentBtn.code // 提交类型
this.auditForm.status = currentBtn.name // 按钮文字
switch (currentBtn.code) {
case '_flow_start': // 自动流程
this.start(vars)
break
case '_flow_save': // 保存草稿
this.save()
break
case '_flow_agree': // 同意
this.agree()
break
case '_flow_reject': // 驳回
this.reject()
break
case '_flow_back': // 驳回到任意步骤
this.turnBack()
break
case '_flow_add_multi_instance': // 加签
this.addMultiInstance()
break
case '_flow_del_multi_instance': // 减签
this.delMultiInstance()
break
case '_flow_transfer': // 转办
this.transfer()
break
case '_flow_delegate':// 外派
this.delegate()
break
case '_flow_stop':// 终止
this.stop()
break
case '_flow_print':// 打印
this.print()
break
default:
this.commit(vars) // 自定义按钮提交
}
}
}
}
</script>
<style>
page {
padding-top: 45px;
}
.cu-form-group .title {
min-width: calc(4em + 40px);
}
uni-view:nth-child(1n+1)>uni-button.buttonBox{
background:#0081ff;
color: #FFFFFF;
}
uni-view:nth-child(1n+2)>uni-button.buttonBox{
background:#f37b1d;
color: #FFFFFF;
}
uni-button:nth-child(1n+3).buttonBox{
background:#8dc63f;
color: #FFFFFF;
}
uni-button:nth-child(1n+4).buttonBox{
background:#1cbbb4;
color: #FFFFFF;
}
uni-button:nth-child(1n+5).buttonBox{
background:#a5673f;
color: #FFFFFF;
}
</style>