123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570 |
- <template>
- <view>
- <u-subsection
- :list="procInsId?['表单信息', '流转记录']:['表单信息']"
- mode="button"
- :fontSize="16"
- :current="tabIndex"
- @change="tabSelect"
- ></u-subsection>
- <view v-show="0 === tabIndex">
- <scroll-view scroll-y>
- <view class=" bg-white ">
-
- <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">
- <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">
- <u-form-item v-if="!procInsId" label="流程标题" borderBottom prop="title">
- <u--input v-model="title" placeholder="请输入流程标题" border="none"></u--input>
- </u-form-item>
- <u-form-item v-if="taskId" label="审批意见" borderBottom prop="message">
- <u--textarea v-model="auditForm.message" placeholder="请输入审批意见" border="none"></u--textarea>
- </u-form-item>
- <u-form-item label="是否抄送" borderBottom prop="isCC">
- <u-switch v-model="isCC" ></u-switch>
- </u-form-item>
- <u-form-item label="抄送给" v-if="isCC">
- <user-select v-model="auditForm.userIds" ></user-select>
- </u-form-item>
- <u-form-item label="指定下一步处理者" borderBottom prop="isAssign">
- <u-switch v-model="isAssign" ></u-switch>
- </u-form-item>
- <u-form-item label="指定" v-if="isAssign">
- <user-select v-model="auditForm.assignee" ></user-select>
- </u-form-item>
- <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 class="bottom-wrap flex">
- <view class="flex-sub" v-show="button.isHide === '0'"
- v-for="(button, index) in buttons" :key="index" >
- <u-button type="primary" class=" buttonBox" :color="colors[index]" @click="submit(button, buttons)" :text="button.name"></u-button>
- </view>
- </view>
- </u--form>
- </view>
- <u-gap height="70"></u-gap>
- </scroll-view>
- </view>
- <view v-show="1 === tabIndex">
- <view class="padding bg-white">
-
- <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 = ''
- uni.setNavigationBarTitle({
- title: this.title
- });
- },
- 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)
- })
- // 读取启动表单配置
- let data2 = await formService.getHistoryTaskFormData({
- processInstanceId: this.procInsId,
- procDefId: this.procDefId,
- taskDefKey: this.taskDefKey,
- })
- this.setData(data2, 'start')
- }
- }
- // 读取按钮配置
- 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,
- colors: [ '#3c9cff', '#f56c6c', '#5ac725', '#f9ae3d', '#89c152',
- '#c38cc1', '#448aca', '#73d1f1', '#ffb34b', '#f18080',
- '#88a867', '#bfbf39', '#94d554', '#f19ec2', '#afaae4',
- '#86cefa', '#98d1ee', '#72dcdc', '#9acdcb', '#77b1cc', '#80a7dc'
- ],
- auditForm: {
- message: '',
- type: '',
- status: '',
- userIds: null,
- assignee: null
- }
- }
- },
- methods:{
- tabSelect (index) {
- this.tabIndex = index
- },
- // 为任务表单赋值
- 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 () {
- this.commit() // 同意
- },
- // 驳回
- 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,
- comment: this.auditForm,
- 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>
|