<template> <div class="WaitTab"> <!-- 无待办显示 --> <div class="waitTab_null" v-if="todoList.length == 0"> <a-empty /> </div> <!-- 待办列表 --> <div class="waitTabList"> <a-card class="cardTask" v-for="item in todoList" :key="item.id"> <p class="pTitle"> <span> <img src="@assets/title.png" /> </span> {{ item.processName }} </p> <p> 任务名称: <span style="color:black;"> {{ item.name }} </span> </p> <p> 创建时间: <span style="color:black;">{{ item.createTime }}</span> </p> <!-- 优先级 --> <p> 优先级: <span class="priorityComm" v-if="item.priority == 0" style="background:rgba(252, 96, 10,.6);color:#092834;"> 普通 </span> <span class="priorityComm" v-else-if="item.priority == 1" style="background:rgba(255, 0, 0,.6);color:white;"> 重要 </span> <span class="priorityComm" v-else-if="item.priority == 2" style="background:rgba(255, 0, 0,.8);color:white;"> 紧急 </span> <span class="priorityComm" v-else style="background:#999;"> 无 </span> </p> <!-- 状态 --> <p style="float:left;marginBottom:30px;"> 状态: <span v-if="item.isSuspended == false" style="background:rgba(252, 96, 10,.6)" class="resultComm"> 已激活 </span> <span v-if="item.isSuspended == true" style="background:rgba(20, 137, 184,.6)" class="resultComm"> 已挂起 </span> {{ item.status }} </p> <!-- 发起人 --> <p style="float:right;marginBottom:30px;"> 发起人: <span style="color:black;"> {{ item.applyer }} </span> </p> <a-divider style="background:rgba(70, 130, 180,.2);"></a-divider> <!-- 操作 --> <div class="operation"> <!-- <p> <span class="operationImg"><img src="@assets/set.png"/></span> 操作 </p> --> <div class="btns"> <i class="itemBtn"> <a-button ghost @click="detail(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#4e73b9;"> 申请详情 </a-button> </i> <!-- 挂起 状态 按钮不可用 --> <span v-if="item.isSuspended == true" style="cursor: no-drop;color: #999999;" title="流程已被挂起,无法操作!" > <a-button class="itemBtn" disabled>通过</a-button> <a-button class="itemBtn" disabled>驳回</a-button> <a-button class="itemBtn" disabled>委托</a-button> </span> <!-- 激活 状态 --> <span v-else> <i class="itemBtn mid"> <a-button ghost @click="passTask(item)" style="box-shadow: 8px 8px 8px rgba(128, 128, 128);color:#4e73b9;" > 通过 </a-button> </i> <i class="itemBtn mid"> <a-button ghost @click="backTask(item)" style="color:gray;box-shadow: 5px 5px 5px rgba(128, 128, 128,.8);color:#ea472c;" > 驳回 </a-button> </i> <i class="itemBtn mid"> <a-button ghost @click="delegateTask(item)" style="box-shadow:6px 6px 6px rgba(128, 128, 128,.7);color:orange;marginRight:0;" > 委托 </a-button> </i> </span> <i class="itemBtn"> <a-button ghost @click="history(item)" style="color:gray;box-shadow: 4px 4px 4px rgba(128, 128, 128);"> 历史 </a-button> </i> </div> </div> </a-card> <!--审批历史 --> <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'100%'" :footer="null" wrapClassName="hisModal" > <div v-if="modalLsVisible"> <historyModal :procInstId="procInstId"></historyModal> </div> </a-modal> <!--流程表单--> <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="100%"> <component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent" :processData="lcModa.processData" :isNew="lcModa.isNew" @close=";(lcModa.visible = false), (lcModa.disabled = false)" @getDataList="getDataList" ></component> </a-modal> <!-- 通过、驳回、委托 弹框 --> <a-modal :title="modalTaskTitle" v-model="modalTaskVisible" :mask-closable="false" :width="500"> <div v-if="modalTaskVisible"> <a-form ref="form" :model="form" :label-width="85" :rules="formValidate"> <a-form-item label="审批意见" prop="reason"> <a-input type="textarea" v-model="form.comment" :rows="4" /> </a-form-item> <a-form-item label="下一审批人" prop="assignees" v-show="showAssign" :error="error"> <a-select v-model="form.assignees" placeholder="请选择" allowClear mode="multiple" :loading="userLoading"> <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{ item.realname }}</a-select-option> </a-select> </a-form-item> <!-- 下一审批人 --> <a-form-item label="下一审批人" v-show="isGateway"> <span>分支网关处暂不支持自定义选择下一审批人,将发送给下一节点所有人</span> </a-form-item> <!-- 驳回至 --> <div v-show="form.type == 1"> <a-form-item label="驳回至"> <a-select v-model="form.backTaskKey" :loading="backLoading" @change="changeBackTask"> <a-select-option v-for="(item, i) in backList" :key="i" :value="item.key">{{ item.name }}</a-select-option> </a-select> </a-form-item> <a-form-item label="指定原节点审批人" prop="assignees" v-show="form.backTaskKey != -1" :error="error"> <a-select v-model="form.assignees" placeholder="请选择" allowClear mode="multiple" :loading="userLoading" > <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.id">{{ item.username }}</a-select-option> </a-select> </a-form-item> </div> <!-- 选择委托人 --> <a-form-item label="选择委托人" prop="userId" :error="error" v-show="form.type == 2"> <selectPerson v-model="form.userId" :multi="false"></selectPerson> </a-form-item> <a-form-item label="消息通知"> <a-checkbox v-model="form.sendMessage">站内消息通知</a-checkbox> <a-checkbox v-model="form.sendSms" disabled>短信通知</a-checkbox> <a-checkbox v-model="form.sendEmail" disabled>邮件通知</a-checkbox> </a-form-item> </a-form> </div> <!-- 弹框提交 --> <div slot="footer"> <a-button type="text" @click="modalTaskVisible = false">取消</a-button> <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button> </div> </a-modal> </div> </div> </template> <script> import HistoryModal from '@views/user/tabs/HistoryModal' import SelectPerson from '@views/user/tabs/SelectPerson' import { deleteAction, getAction, down01File } from '@/api/manage' import { JeecgListMixin } from '@/mixins/JeecgListMixin' import { activitiMixin } from '@/views/activiti/mixins/activitiMixin' import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep' export default { name: 'WaitTab', mixins: [activitiMixin, JeecgListMixin], components: { JSelectUserByDep, HistoryModal, SelectPerson }, data() { return { todoList: [], // 待办列表 openSearch: true, openTip: true, loading: true, // 表单加载状态 modalTaskVisible: false, userLoading: false, backLoading: false, selectCount: 0, // 多选计数 selectList: [], // 多选数据 assigneeList: [], backList: [ { key: '-1', name: '发起人' } ], error: '', showAssign: false, searchForm: { // 搜索框对应data对象 name: '' }, modalTaskTitle: '', modalTitle: '', // 添加或编辑标题 form: { id: '', userId: '', procInstId: '', comment: '', type: 0, assignees: [], backTaskKey: '-1', sendMessage: true, sendSms: false, sendEmail: false }, formValidate: { // 表单验证规则 }, submitLoading: false, // 添加或编辑提交状态 data: [], // 表单数据 total: 0, // 表单数据总数 dictPriority: [], isGateway: false, lcModa: { title: '', disabled: false, visible: false, formComponent: null, isNew: false }, url: { todoList: '/actTask/todoList', pass: '/actTask/pass', back: '/actTask/back', backToTask: '/actTask/backToTask', delegate: '/actTask/delegate', getNextNode: '/activiti_process/getNextNode', getNode: '/activiti_process/getNode/', getBackList: '/actTask/getBackList/', passAll: '/actTask/passAll/', backAll: '/actTask/backAll/' }, /*历史*/ modalLsVisible: false, procInstId: '' //点击历史的该项 } }, mounted() { this.init() }, methods: { //初始化表单 forminitial() { this.form = { id: '', userId: '', procInstId: '', comment: '', type: 0, assignees: [], backTaskKey: '-1', sendMessage: true, sendSms: false, sendEmail: false } }, // init() { this.getDataList() }, loadData() {}, //发请求拿到 todoList getDataList() { this.loading = true getAction(this.url.todoList, {}).then(res => { if (res.success) { this.todoList = res.result || [] // this.total = this.data.leading console.log('2次 waitTab 待办列表', this.todoList) } }) }, //分页、排序、筛选变化时触发 handleTableChange(pagination, filters, sorter) { if (Object.keys(sorter).length > 0) { this.isorter.column = sorter.field this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc' } this.ipagination = pagination this.loadData() }, // handleSearch() { this.getDataList() }, // handleReset() { this.searchForm = {} // 重新加载数据 this.getDataList() }, // showSelect(e) { this.selectList = e this.selectCount = e.length }, // clearSelectAll() { this.$refs.table.selectAll(false) }, // 提交 handelSubmit() { console.log('提交') this.submitLoading = true var formData = Object.assign({}, this.form) formData.assignees = formData.assignees.join(',') if (formData.type == 0) { // 通过 if (this.showAssign && formData.assignees.length < 1) { this.$message.error('请至少选择一个审批人') this.submitLoading = false return } else { this.error = '' } this.postFormAction(this.url.pass, formData).then(res => { this.submitLoading = false if (res.success) { this.$message.success('操作成功') this.modalTaskVisible = false this.getDataList() } }) } else if (formData.type == 1) { // 驳回 if (formData.backTaskKey == '-1') { // 驳回至发起人 this.postFormAction(this.url.back, formData).then(res => { this.submitLoading = false if (res.success) { this.$message.success('操作成功') this.modalTaskVisible = false this.getDataList() } }) } else { // 自定义驳回 if (formData.backTaskKey != '-1' && formData.assignees.length < 1) { this.$message.error('请至少选择一个审批人') this.submitLoading = false return } else { this.error = '' } this.postFormAction(this.url.backToTask, formData).then(res => { this.submitLoading = false if (res.success) { this.$message.success('操作成功') this.modalTaskVisible = false this.getDataList() } }) } } else if (formData.type == 2) { // 委托 if (!formData.userId) { this.$message.error('请选择一委托人') this.submitLoading = false return } else { this.error = '' } this.postFormAction(this.url.delegate, formData).then(res => { this.submitLoading = false if (res.success) { this.$message.success('操作成功') this.modalTaskVisible = false this.getDataList() } }) } }, // 详情 detail(r) { if (!r.routeName) { this.$message.warning('该流程信息未配置表单,请联系开发人员!') return } r.operationType = '1' //代办 if (r.routeName.indexOf('外部表单') != -1) { //其他项目的表单流程 alert('调用其他项目页面') } else if (r.routeName.indexOf('自定义') != -1) { //自定义的表单流程 this.lcModa.disabled = true this.lcModa.title = '查看流程业务信息:' + r.processName let com = { component: () => import(`@/views/activiti/form/demoForm2`) } this.lcModa.formComponent = com.component this.lcModa.isNew = false this.lcModa.processData = r this.lcModa.visible = true } else { //固定的表单流程 this.lcModa.disabled = true this.lcModa.title = '查看流程业务信息:' + r.processName this.lcModa.formComponent = this.getFormComponent(r.routeName).component this.lcModa.processData = r this.lcModa.isNew = false this.lcModa.visible = true } }, // 通过 passTask(v) { this.forminitial() this.modalTaskTitle = '审批通过' this.form.id = v.id this.form.procInstId = v.procInstId this.form.priority = v.priority this.form.type = 0 this.modalTaskVisible = true this.userLoading = true this.getAction(this.url.getNextNode, { procDefId: v.procDefId, currActId: v.key, procInstId: v.procInstId }).then( res => { this.userLoading = false if (res.success) { if (res.result.type == 3 || res.result.type == 4) { this.isGateway = true this.showAssign = false this.error = '' return } this.isGateway = false if (res.result.users && res.result.users.length > 0) { this.error = '' this.assigneeList = res.result.users // 默认勾选 let ids = [] res.result.users.forEach(e => { ids.push(e.username) }) this.form.assignees = ids this.showAssign = true } else { this.form.assignees = [] this.showAssign = false } } } ) }, // changeBackTask(v) { if (v == '-1') { return } this.userLoading = true this.getAction(this.url.getNode + v + '&' + this.form.procInstId).then(res => { this.userLoading = false if (res.success) { if (res.result.users && res.result.users.length > 0) { this.assigneeList = res.result.users // 默认勾选 let ids = [] res.result.users.forEach(e => { ids.push(e.username) }) this.form.assignees = ids } } }) }, // 驳回 backTask(v) { this.forminitial() this.modalTaskTitle = '审批驳回' this.form.id = v.id this.form.procInstId = v.procInstId this.form.procDefId = v.procDefId this.form.priority = v.priority this.form.type = 1 this.showAssign = false this.modalTaskVisible = true // 获取可驳回节点 this.backList = [ { key: '-1', name: '发起人' } ] this.form.backTaskKey = '-1' this.backLoading = true this.getAction(this.url.getBackList + v.procInstId).then(res => { this.backLoading = false if (res.success) { res.result.forEach(e => { this.backList.push(e) }) } }) }, // 委托 delegateTask(v) { this.forminitial() this.modalTaskTitle = '委托他人代办' this.form.id = v.id this.form.procInstId = v.procInstId this.form.type = 2 this.showAssign = false this.modalTaskVisible = true }, // 历史 history(v) { if (v.procInstId) { this.procInstId = v.procInstId this.modalLsVisible = true console.log('开开心心走到这,拿到该项procInstId:', v.procInstId) } else { this.$message.error('流程实例ID不存在') return } }, // passAll() { if (this.selectCount <= 0) { this.$message.warning('您还未选择要通过的数据') return } // 批量通过 this.modalVisible = true this.$confirm({ title: '确认通过', content: '您确认要通过所选的 ' + this.selectCount + ' 条数据? 注意:将默认分配给节点设定的所有可审批用户', loading: true, onOk: () => { let ids = '' this.selectList.forEach(function(e) { ids += e.id + ',' }) ids = ids.substring(0, ids.length - 1) this.postFormAction(this.url.passAll, { ids: ids }).then(res => { if (res.success) { this.$message.success('操作成功') this.modalVisible = false this.clearSelectAll() this.getDataList() } }) } }) }, // backAll() { if (this.selectCount <= 0) { this.$message.warning('您还未选择要驳回的数据') return } // 批量驳回 this.modalVisible = true this.$confirm({ title: '确认驳回', content: '您确认要驳回所选的 ' + this.selectCount + ' 条数据? 注意:所有流程将驳回至发起人', loading: true, onOk: () => { let procInstIds = '' this.selectList.forEach(function(e) { procInstIds += e.procInstId + ',' }) procInstIds = procInstIds.substring(0, procInstIds.length - 1) this.postFormAction(this.url.backAll, { procInstIds: procInstIds }).then(res => { if (res.success) { this.$message.success('操作成功') this.modalVisible = false this.clearSelectAll() this.getDataList() } }) } }) } } } </script> <style src="@assets/less/overwrite.less" lang="less" scoped></style> <style lang="less"> @import '~@assets/less/common.less'; </style> <style lang="less" scoped> .btns { // 两行按钮样式 .itemBtn { display: inline-block; padding: 0 12px; font-weight: 700 !important; margin-bottom: 30px; } } </style>