| | |
| | | <div @click="changeTab(7, 'willOvertime')" :class="{'item-warm': true, 'willOvertime-color': true, 'active': 7 === selectTabId}">临期事项(0)</div> |
| | | <div @click="changeTab(8, 'urge')" :class="{'item-warm': true, 'urge-color': true, 'active': 8 === selectTabId}">督办事项(0)</div> |
| | | </div> |
| | | <div style="display: flex;justify-content: center;align-items: center;margin-top: 20px"> |
| | | <div style="display: flex;justify-content: center;align-items: center;margin-top: 20px; position: relative"> |
| | | <el-form :inline="true" :model="queryParams" class="demo-form-inline"> |
| | | <el-form-item label="任务名称"> |
| | | <el-input v-model="queryParams.taskName" placeholder="任务名称"></el-input> |
| | |
| | | <el-button type="primary" @click="search">查询</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div style="position: absolute; right: 0; top: 0"> |
| | | <el-button @click="openProcessImg" v-loading="imgLoading" type="primary">流程图</el-button> |
| | | <el-button @click="openRecord" type="info" v-loading="recordLoading">流转记录</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table"> |
| | | <el-table |
| | |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-dialog |
| | | :title="`${this.queryParams.processName}:流程图`" |
| | | :visible.sync="processImgShow" |
| | | :fullscreen="true" |
| | | :close-on-click-modal="false" |
| | | :destroy-on-close="true" |
| | | > |
| | | <div> |
| | | <bpmn-viewer :flowData="flowData" :procInsId="queryParams.processInsId"/> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog |
| | | :title="`${this.queryParams.processName}:流转记录`" |
| | | :visible.sync="processRecordShow" |
| | | :fullscreen="true" |
| | | :close-on-click-modal="false" |
| | | :destroy-on-close="true" |
| | | > |
| | | <div> |
| | | <div class="block"> |
| | | <el-timeline> |
| | | <el-timeline-item |
| | | v-for="(item,index ) in flowRecordList" |
| | | :key="index" |
| | | :icon="setIcon(item.finishTime)" |
| | | :color="setColor(item.finishTime)" |
| | | > |
| | | <p style="font-weight: 700">{{item.taskName}} |
| | | <span v-if="item.comment && item.comment.type === '3'" style="color: red">(执行了驳回)</span> |
| | | <span v-if="item.overtime && item.overtime==='red'" style="color: red">(已超时)</span> |
| | | <span v-if="item.overtime && item.overtime==='yellow'" style="color: orange">(即将超时)</span> |
| | | </p> |
| | | <el-card :body-style="{ padding: '10px' }"> |
| | | <el-descriptions class="margin-top" :column="1" size="small" border> |
| | | <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label"> |
| | | <template slot="label"><i class="el-icon-user"></i>办理人</template> |
| | | {{item.assigneeName}} |
| | | <el-tag type="info" size="mini">{{item.deptName}}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item v-if="item.candidate" label-class-name="my-label"> |
| | | <template slot="label"><i class="el-icon-user"></i>候选办理</template> |
| | | {{item.candidate}} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label-class-name="my-label"> |
| | | <template slot="label"><i class="el-icon-date"></i>接收时间</template> |
| | | {{item.createTime}} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item v-if="item.finishTime" label-class-name="my-label"> |
| | | <template slot="label"><i class="el-icon-date"></i>处理时间</template> |
| | | {{item.finishTime}} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item v-if="item.duration" label-class-name="my-label"> |
| | | <template slot="label"><i class="el-icon-time"></i>耗时</template> |
| | | {{item.duration}} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item v-if="item.comment" label-class-name="my-label"> |
| | | <template slot="label"><i class="el-icon-tickets"></i>处理意见</template> |
| | | {{item.comment.comment}} |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | </el-card> |
| | | </el-timeline-item> |
| | | </el-timeline> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | getProjectProcessDetailTaskList, |
| | | getTaskIsAuditing |
| | | } from "@/api/projectProcess/projectProcess"; |
| | | import {flowXmlAndNode} from "@/api/flowable/definition"; |
| | | import BpmnViewer from '@/components/Process/viewer'; |
| | | import {flowRecord} from "@/api/flowable/finished"; |
| | | |
| | | export default { |
| | | name: "Detail", |
| | | components: { |
| | | BpmnViewer |
| | | }, |
| | | data() { |
| | | return { |
| | | processRecordShow: false, // 流转记录显示 |
| | | flowRecordList: [], // 流程流转数据 |
| | | recordLoading: false, // 流转记录加载 |
| | | // 模型xml数据 |
| | | flowData: {}, |
| | | processImgShow: false, // 流程图显示 |
| | | imgLoading: false, // 流程图加载 |
| | | loading: false, |
| | | tableLoading: false, |
| | | detailData: {}, |
| | |
| | | currentPage: 1, |
| | | projectId: null, |
| | | processDefId: null, |
| | | processInsId: null, |
| | | deployId: null, |
| | | processName: '' // 流程名称 |
| | | } |
| | | } |
| | |
| | | if (!params || ! params.projectId) { |
| | | this.queryParams.projectId = this.$route.query.projectId |
| | | this.queryParams.processDefId = this.$route.query.processDefId |
| | | this.queryParams.processInsId = this.$route.query.processInsId |
| | | this.queryParams.deployId = this.$route.query.deployId |
| | | this.queryParams.processName = this.$route.query.processName |
| | | sessionStorage.setItem("projectProDetail", JSON.stringify(this.queryParams)) |
| | | } else { |
| | |
| | | this.getProjectProcessInfo() |
| | | }, |
| | | methods: { |
| | | setIcon(val) { |
| | | if (val) { |
| | | return "el-icon-check"; |
| | | } else { |
| | | return "el-icon-time"; |
| | | } |
| | | }, |
| | | setColor(val) { |
| | | if (val) { |
| | | return "#2bc418"; |
| | | } else { |
| | | return "#b3bdbb"; |
| | | } |
| | | }, |
| | | openRecord() { |
| | | this.getFlowRecordList(this.queryParams.processInsId); |
| | | }, |
| | | openProcessImg() { |
| | | this.imgLoading = true |
| | | flowXmlAndNode({processInsId:this.queryParams.processInsId,deployId:this.queryParams.deployId}).then(res => { |
| | | this.imgLoading = false |
| | | this.processImgShow = true |
| | | this.$nextTick(() => { |
| | | this.flowData = res.data; |
| | | }) |
| | | }) |
| | | }, |
| | | /** 流程流转记录 */ |
| | | getFlowRecordList(procInsId) { |
| | | const params = {procInsId: procInsId} |
| | | this.recordLoading = true |
| | | flowRecord(params).then(res => { |
| | | this.flowRecordList = res.data.flowList; |
| | | this.recordLoading = false |
| | | this.processRecordShow = true |
| | | }) |
| | | }, |
| | | unitFormatter(row) { |
| | | if (row.handlerType === 'USER') { |
| | | return null; |