修改监控流程页面【为改完】
This commit is contained in:
zhoulingpo
@@ -0,0 +1,595 @@
|
||||
<!-- 流程详情 -->
|
||||
<template>
|
||||
<div id="processDetails" v-loading="loading">
|
||||
<div class="flow-chart">
|
||||
<div class="flow-header">
|
||||
<div class="back" title="返回" @click="back">
|
||||
<i class="el-icon-back"></i>
|
||||
</div>
|
||||
<!-- <span class="flow-chart-title">{{ $route.params.processNumber }} {{ $route.params.processTypeName }} 流程图</span>-->
|
||||
</div>
|
||||
<div v-loading="imgLoading" class="flow-group" style="margin-top: 30px;overflow: auto;">
|
||||
<img :src="processStep" class="process-img">
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<div class="btn">
|
||||
<el-button type="primary" class="inner-btn" @click="showDialog">
|
||||
调整处理人
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- <el-button-->
|
||||
<!-- v-if="urgeRowFlag"-->
|
||||
<!-- class="common-button-default"-->
|
||||
<!-- size="small"-->
|
||||
<!-- @click="urgeRow"-->
|
||||
<!-- >催办</el-button>-->
|
||||
<!-- <el-button-->
|
||||
<!-- class="common-button-default export-button"-->
|
||||
<!-- size="small"-->
|
||||
<!-- @click="exportStandard"-->
|
||||
<!-- >导出</el-button>-->
|
||||
</div>
|
||||
<div class="flow-list">
|
||||
<el-table
|
||||
height="100%"
|
||||
ref="selection"
|
||||
:data="detailData"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
border
|
||||
row-key="id"
|
||||
:no-data-text="listNoDataText"
|
||||
:header-cell-style="{background: '#f8f8f9', color: '#515a6e'}"
|
||||
@selection-change="tableChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="任务步骤"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="assignee"
|
||||
label="任务受理人"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="创建时间"
|
||||
sortable
|
||||
align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createTime ? formatIssueDate(scope.row.createTime) : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
label="完成时间"
|
||||
align="center"
|
||||
sortable>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.endTime ? formatIssueDate(scope.row.endTime) : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="approvalOpinion"
|
||||
label="审批意见"
|
||||
align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip class="item" effect="dark" :content="scope.row.approvalOpinion" placement="top">
|
||||
<span>{{scope.row.approvalOpinion}}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="completeFlag"-->
|
||||
<!-- label="状态"-->
|
||||
<!-- align="center">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{ scope.row.endTime ? '已完成' : '未完成'}}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="操作" align="center" width="50">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <div @click.stop style="display: inline-block">-->
|
||||
<!-- <el-dropdown trigger="click" @command="handleCommand">-->
|
||||
<!-- <i class="iconfont"></i>-->
|
||||
<!-- <el-dropdown-menu slot="dropdown">-->
|
||||
<!-- <el-dropdown-item :command="[scope.row, '查看']">查看</el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item :command="[scope.row, '删除']">删除</el-dropdown-item>-->
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </el-dropdown>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
</el-table>
|
||||
<!-- <loading :loading="loading">流程列表加载中</loading>-->
|
||||
|
||||
<el-drawer
|
||||
title="调整处理人"
|
||||
:visible.sync="drawerModal"
|
||||
size="300px"
|
||||
:before-close="treeCancel"
|
||||
>
|
||||
<div class="demo-drawer-content">
|
||||
<dept-tree
|
||||
treeDivId="drawerModalTree"
|
||||
ref="drawerModalTree"
|
||||
@treeClick="selcetTree"
|
||||
allDept
|
||||
showUser
|
||||
:editable="false"
|
||||
>
|
||||
</dept-tree>
|
||||
</div>
|
||||
<div class="demo-drawer-footer">
|
||||
<el-button size="small" class="common-button-primary" icon="el-icon-check" type="primary" :loading="assigneeNewLoading" @click="addTree">确定</el-button>
|
||||
<el-button size="small" class="common-button-default" icon="el-icon-close" @click="treeCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex'
|
||||
import ProcessMixin from "@/components/ProcessMixin";
|
||||
export default {
|
||||
name: 'processDetail',
|
||||
mixins: [ProcessMixin],
|
||||
data () {
|
||||
return {
|
||||
assigneeNewLoading: false, // 调整处理人确定loading
|
||||
loginPeople: '',
|
||||
// 调整处理人抽屉状态
|
||||
drawerModal: false,
|
||||
urgeRowFlag: true,
|
||||
tasksName: '',
|
||||
selectPeople: '',
|
||||
// loading
|
||||
loading: false,
|
||||
imgLoading: false,
|
||||
// 流程步骤
|
||||
processStep: null,
|
||||
// 当前节点
|
||||
taskKey: 0,
|
||||
// 当前流程类型(1待办/2已办)
|
||||
processType: 1,
|
||||
// 流程列表
|
||||
detailData: [],
|
||||
taskNames: '',
|
||||
userId: '',
|
||||
tableRow: [], // 接受表格数据
|
||||
completeFlagType: true, // 判断当前任务是否完成
|
||||
processState: true, // 判断当前流程
|
||||
detailsList: [],
|
||||
shunxu: '',
|
||||
paixu: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatIssueDate(str) {
|
||||
const momentDate = this.$moment(str)
|
||||
if (momentDate.isValid()) {
|
||||
return this.$moment(str).format('YYYY-MM-DD HH:mm:ss')
|
||||
} else {
|
||||
return str
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @author liruohao
|
||||
* @date 2019/4/22
|
||||
* @Description: 查看流程最后一步
|
||||
*/
|
||||
seeProcessLast () {
|
||||
let index = this.detailData.length - 1 // 当前流程任务最后一步index
|
||||
let isEnd = true
|
||||
let row = {...this.detailData[index]}
|
||||
row.taskIds = row.id
|
||||
row.taskInfo = row.name
|
||||
row.tabsName = this.$route.query.tabsName
|
||||
let prcType = this.detailData[index].prcType // 流程类型
|
||||
// 判断当前流程是否已全部办理完成
|
||||
this.detailData.map(item => {
|
||||
if (!item.endTime) {
|
||||
isEnd = false
|
||||
}
|
||||
})
|
||||
if (isEnd) {
|
||||
if (this.$store.state.detailMap !== '') {
|
||||
let lastDetailMap = this.$store.getters.getLastDetailMap
|
||||
lastDetailMap.push(this.$store.state.detailMap)
|
||||
this.$store.commit('setLastDetailMap', JSON.stringify(lastDetailMap))
|
||||
}
|
||||
this.$store.commit('setDetailMap', this.$route.path)
|
||||
row.isEnd = isEnd
|
||||
this.setHandleInfo((JSON.stringify(row)))
|
||||
this.setPrcLastDetail((JSON.stringify(row)))
|
||||
// 根据type判断跳转具体流程页面
|
||||
switch (prcType) {
|
||||
case '1':
|
||||
break
|
||||
}
|
||||
} else {
|
||||
this.$message.warning('当前流程未全部办理完成，无法查看')
|
||||
}
|
||||
},
|
||||
// table行选择事件
|
||||
tableChange (row) {
|
||||
this.tableRow = row
|
||||
},
|
||||
//转办
|
||||
Transfer(){
|
||||
|
||||
},
|
||||
// 催办
|
||||
urgeRow () {
|
||||
if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
|
||||
this.$confirm('您确认要催办该任务吗', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'common-button-primary',
|
||||
|
||||
}).then(() => {
|
||||
this.urge(this.tableRow[0])
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请选择一条未完成的数据')
|
||||
}
|
||||
},
|
||||
handleCommand (command) {
|
||||
switch (command[1]) {
|
||||
case '查看':
|
||||
this.classAdd(command[0])
|
||||
break
|
||||
case '删除':
|
||||
this.classDel(command[0])
|
||||
break
|
||||
}
|
||||
},
|
||||
// 清空条件
|
||||
clearanceCondition () {
|
||||
this.completeFlagType = true
|
||||
this.tableRow = []
|
||||
},
|
||||
back () {
|
||||
// this.$router.push({
|
||||
// name: 'ProcessCenter',
|
||||
// query: {
|
||||
// tabsName: this.$route.query.tabsName
|
||||
// }
|
||||
// })
|
||||
//要返回上一级
|
||||
this.$router.back()
|
||||
},
|
||||
// 调整处理人确定事件
|
||||
addTree () {
|
||||
if (this.userId === '') {
|
||||
this.$message.warning('请选择一个处理人进行调整')
|
||||
} else {
|
||||
this.assigneeNewLoading = true
|
||||
changeAssigneeNew({
|
||||
taskId: this.selectPeople.id, // 任务id
|
||||
assignee: this.userId, // 被委托人
|
||||
userId: this.selectPeople.assigneeId, // 委托人
|
||||
pId: this.selectPeople.processInstanceId // 流程实例
|
||||
}).then(res => {
|
||||
this.assigneeNewLoading = false
|
||||
if (res.success) {
|
||||
this.drawerModal = false
|
||||
this.$message.success('调整成功')
|
||||
this.userId = ''
|
||||
this.processNum()
|
||||
this.processTable()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 取消
|
||||
treeCancel () {
|
||||
this.drawerModal = false
|
||||
this.$refs.drawerModalTree.treeReload()
|
||||
this.userId = ''
|
||||
},
|
||||
// 树点击
|
||||
selcetTree (treeId, treeNode) {
|
||||
this.userId = treeNode.id
|
||||
},
|
||||
selectAll () {
|
||||
let processId = this.$route.params.id
|
||||
let processNumber = this.$route.params.processNumber
|
||||
window.open('/api/activiti/busProcess/exportTaskInfos?id=' + processId + '&taskName=' + this.taskNames + '&processNumber=' + processNumber)
|
||||
},
|
||||
/**
|
||||
* @description: 流程催办
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/10/11 13:41:45
|
||||
*/
|
||||
urge (row) {
|
||||
this.$http.postData('person/personMsg/saveNew',
|
||||
{
|
||||
msgContent: '流程编号为' + row.prcNum + '的流程，请尽快办理。',
|
||||
msgTitle: '流程编号' + row.prcNum,
|
||||
userId: row.assigneeId,
|
||||
msgType: 'TEXT'
|
||||
},
|
||||
{
|
||||
loading: 'loading',
|
||||
_this: this
|
||||
}, res => {
|
||||
this.clearanceCondition()
|
||||
this.processTable()
|
||||
this.$message.success('催办成功')
|
||||
}, e => {
|
||||
})
|
||||
},
|
||||
// 请求转换流程图
|
||||
processNum (row) {
|
||||
this.imgLoading = true;
|
||||
axios.request({
|
||||
url: '/api/lawss/activiti/getImg?_t=' + new Date().getTime(),
|
||||
responseType: 'blob',
|
||||
method: 'get',
|
||||
params: {
|
||||
prcNum:(row && row.parentFlowNum) || this.$route.query.prcNum,
|
||||
}
|
||||
}).then(res => {
|
||||
// let blob = new Blob([res.data], {type: 'image/jpg'})
|
||||
// let url = window.URL.createObjectURL(res.data)
|
||||
this.processStep = window.URL.createObjectURL(res.data)
|
||||
}).finally(_ => {
|
||||
this.imgLoading = false;
|
||||
})
|
||||
},
|
||||
// 请求列表
|
||||
processTable (row) {
|
||||
this.$http.get('lawss/activiti/get_list_by_instance', {
|
||||
prcNum:(row && row.parentFlowNum) || this.$route.query.prcNum,
|
||||
sortWord: this.shunxu ? this.paixu : '',
|
||||
shunxu: this.shunxu
|
||||
}, {
|
||||
loading: 'loading',
|
||||
_this: this
|
||||
}, res => {
|
||||
this.detailData = res
|
||||
res[res.length - 1].endTime ? this.urgeRowFlag = false : this.urgeRowFlag = true
|
||||
}, e => {})
|
||||
},
|
||||
...mapMutations(['setProcess', 'setHandleInfo', 'setPrcLastDetail']),
|
||||
processFlag (res) {
|
||||
// if (res.data.hisTaskExcelVOList[0].processTypeFlag === '1' || res.data.hisTaskExcelVOList[0].processTypeFlag === '2' || res.data.hisTaskExcelVOList[0].processTypeFlag === '3' || res.data.hisTaskExcelVOList[0].processTypeFlag === '4' ||
|
||||
// res.data.hisTaskExcelVOList[0].processTypeFlag === '5' || res.data.hisTaskExcelVOList[0].processTypeFlag === '6' || res.data.hisTaskExcelVOList[0].processTypeFlag === '8') {
|
||||
// return false
|
||||
// } else {
|
||||
// return true
|
||||
// }
|
||||
// }
|
||||
return false
|
||||
},
|
||||
// 导出事件
|
||||
exportStandard () {
|
||||
let ids = []
|
||||
let exportName = []
|
||||
// if (this.tableRow.length > 0) {
|
||||
// this.tableRow.map(item => {
|
||||
// ids.push(item.id)
|
||||
// })
|
||||
// } else {
|
||||
// this.detailData.map(item => {
|
||||
// ids.push(item.id)
|
||||
// })
|
||||
// }
|
||||
this.processTypeList.map(item => {
|
||||
if(item.value == this.detailData[0].prcType){
|
||||
exportName = item.label
|
||||
}
|
||||
})
|
||||
this.$http.downGetFun('lawss/activiti/historyExport', {
|
||||
prcNum: this.$route.query.prcNum,
|
||||
sortWord: this.shunxu ? this.paixu : '',
|
||||
shunxu: this.shunxu,
|
||||
exportName: exportName
|
||||
}, {_this: this},data=>{
|
||||
const disposition = data.headers['content-disposition'];
|
||||
let fileName = disposition.substring(disposition.indexOf('fileName=') + 9, disposition.length);
|
||||
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
||||
var isOpera = userAgent.indexOf("Opera") > -1;
|
||||
//判断是否IE浏览器
|
||||
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
|
||||
fileName = decodeUtf8(fileName)
|
||||
} else {
|
||||
// iso8859-1的字符转换成中文
|
||||
fileName = decodeURI(escape(fileName));
|
||||
// 去掉双引号
|
||||
fileName = fileName.replace(/\"/g, "");
|
||||
}
|
||||
// console.log(fileName, 666)
|
||||
function decodeUtf8(bytes) {
|
||||
var encoded = "";
|
||||
for (var i = 0; i < bytes.length; i++) {
|
||||
encoded += '%' + bytes[i].toString(16);
|
||||
}
|
||||
return decodeURIComponent(encoded);
|
||||
}
|
||||
if (!data.data || data.data.size === 0) {
|
||||
this.$message.warning("文件下载失败")
|
||||
return
|
||||
}
|
||||
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
||||
window.navigator.msSaveBlob(new Blob([data.data], {type: 'application/zip'}), fileName)
|
||||
} else {
|
||||
let url = window.URL.createObjectURL(new Blob([data.data], {type: 'application/zip'}))
|
||||
let link = document.createElement('a')
|
||||
link.style.display = 'none'
|
||||
link.href = url
|
||||
link.setAttribute('download', fileName)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link) //下载完成移除元素
|
||||
window.URL.revokeObjectURL(url) //释放掉blob对象
|
||||
}
|
||||
})
|
||||
// window.location.href = '/api/lawss/activiti/historyExport?sortWord=' + this.shunxu ? this.paixu : '' + '&exportName=' + exportName + '&prcNum=' + this.$route.query.prcNum + '&shunxu=' + this.shunxu
|
||||
// this.$message.success('导出文件成功')
|
||||
},
|
||||
// 表格排序
|
||||
sortChange (sortObj) {
|
||||
if (sortObj.column.order !== 'normal') {
|
||||
this.shunxu = ''
|
||||
this.paixu = ''
|
||||
let order = sortObj.column.order
|
||||
switch (sortObj.column.property) {
|
||||
// 任务步骤
|
||||
case 'name' :
|
||||
// 后台联调
|
||||
this.paixu = 'name'
|
||||
if (order === 'ascending'){
|
||||
this.shunxu = 'asc'
|
||||
} else if (order === 'descending') {
|
||||
this.shunxu = 'desc'
|
||||
}
|
||||
break
|
||||
// 任务受理人
|
||||
case 'assignee' :
|
||||
// 后台联调
|
||||
this.paixu = 'assignee'
|
||||
if (order === 'ascending'){
|
||||
this.shunxu = 'asc'
|
||||
} else if (order === 'descending') {
|
||||
this.shunxu = 'desc'
|
||||
}
|
||||
break
|
||||
// 创建时间
|
||||
case 'createTime' :
|
||||
// 后台联调
|
||||
this.paixu = 'startTime'
|
||||
if (order === 'ascending'){
|
||||
this.shunxu = 'asc'
|
||||
} else if (order === 'descending') {
|
||||
this.shunxu = 'desc'
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
this.processTable()
|
||||
},
|
||||
queryFlowRelInfoByFlowNum(){
|
||||
this.$http.postData('lawss/activiti/queryFlowRelInfoByFlowNum', {
|
||||
flowNum: this.$route.query.prcNum,
|
||||
flowType: 82
|
||||
}, {
|
||||
loading: 'loading',
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.success){
|
||||
this.processNum(res.result)
|
||||
this.processTable(res.result)
|
||||
}
|
||||
}, e => {})
|
||||
},
|
||||
},
|
||||
components: {
|
||||
},
|
||||
props: {},
|
||||
computed: {
|
||||
listNoDataText () {
|
||||
return this.processType === 1 ? '暂无待办流程' : '暂无已办流程'
|
||||
},
|
||||
urgeRowMenu () {
|
||||
let flag = false
|
||||
this.$store.getters.getMenuList.map((menu) => {
|
||||
if (menu.id === 'ZDE6GT7UG5' || this.loginPeople === this.$store.getters.userInfo.userId) {
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
return flag
|
||||
},
|
||||
/**
|
||||
* 调整处理人按钮是否显示
|
||||
*/
|
||||
tzclrEnable() {
|
||||
return this.$route.query.tabsName === 'MonitorProcess'
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
beforeUpdate () {
|
||||
if (this.detailData.length > 0) {
|
||||
sessionStorage.setItem('processInstance', JSON.stringify(this.detailData[0]))
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.query.prcType == 82){
|
||||
this.queryFlowRelInfoByFlowNum()
|
||||
} else{
|
||||
this.processNum()
|
||||
this.processTable()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//@import '~styles/mixins';
|
||||
#processDetails{
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
.flow-chart{
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
background: #F0F0F0;
|
||||
border: 1px solid #CCCDCE;
|
||||
border-bottom: none;
|
||||
padding: 10px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.flow-header{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
//.flex();
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
.flow-chart-title{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 0 20px;
|
||||
//.ellipsis();
|
||||
}
|
||||
}
|
||||
.flow-group{
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
.process-img{
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flow-list{
|
||||
width: 98%;
|
||||
height: calc(55% - 80px);
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
padding: 20px 13px;
|
||||
.inner-btn{
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user