372 lines
12 KiB
Vue
372 lines
12 KiB
Vue
<!-- 流程详情 -->
|
|
<template>
|
|
<div id="processDetails" class="content-height" 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="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"
|
|
v-if="tabsName !=='AlreadyProcess' && isAdmin">
|
|
调整处理人
|
|
</el-button>
|
|
<!-- <div v-if="tabsName=='AlreadyProcess'" class="alreadbtn">-->
|
|
<!-- <el-button-->
|
|
<!-- type="primary" class="inner-btn"-->
|
|
<!-- @click="urgeRow"-->
|
|
<!-- >催办</el-button>-->
|
|
<!-- <el-button-->
|
|
<!-- type="primary" class="inner-btn"-->
|
|
<!-- @click="exportStandard"-->
|
|
<!-- >导出</el-button>-->
|
|
<!-- </div>-->
|
|
</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">
|
|
<!-- <loading :loading="loading">流程列表加载中</loading>-->
|
|
<vxe-table ref="xTable" :data="detailData" :empty-render="{name: 'NotData'}" align="center" border stripe
|
|
v-table-min-height="'calc(100% - 50px)'" max-height="95%"
|
|
@checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
|
|
<vxe-column type="checkbox" width="60"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="name"
|
|
title="任务步骤"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="assignee" title="任务受理人"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="createTime"
|
|
title="创建时间">
|
|
<template #default="{ row,index }" >
|
|
{{formatDate(row.createTime,"yyyy-mm-dd hh:mm:ss")}}
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="endTime" title="完成时间">
|
|
<template #default="{ row,index }" >
|
|
{{formatDate(row.endTime?row.endTime:'',"yyyy-mm-dd hh:mm:ss")}}
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="approvalOpinion"
|
|
title="审批意见"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="status"
|
|
title="状态">
|
|
<template #default="{ row }">
|
|
<span v-if="row.endTime">已完成</span>
|
|
<span v-else>未完成</span>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
</div>
|
|
<monitorModal ref="monitorModal" :prcId="prcId" @uploadTable="processTable"></monitorModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import monitorModal from './monitorModal.vue'
|
|
import ProcessMixin from "@/components/ProcessMixin";
|
|
import { formatDate } from '@/utils/date'
|
|
export default {
|
|
name: 'processDetail',
|
|
mixins: [ProcessMixin],
|
|
data () {
|
|
return {
|
|
formatDate,
|
|
assigneeNewLoading: false, // 调整处理人确定loading
|
|
loginPeople: '',
|
|
// 调整处理人抽屉状态
|
|
drawerModal: false,
|
|
urgeRowFlag: true,
|
|
tasksName: '',
|
|
selectPeople: '',
|
|
// loading
|
|
loading: false,
|
|
imgLoading: false,
|
|
// 流程步骤
|
|
processStep: null,
|
|
// 当前节点
|
|
taskKey: 0,
|
|
// 当前流程类型
|
|
prcType: '',
|
|
// 流程列表
|
|
detailData: [],
|
|
taskNames: '',
|
|
userId: '',
|
|
tableRow: [], // 接受表格数据
|
|
completeFlagType: true, // 判断当前任务是否完成
|
|
processState: true, // 判断当前流程
|
|
detailsList: [],
|
|
shunxu: '',
|
|
paixu: '',
|
|
checkIds: [],
|
|
checkList: [],
|
|
tabsName:'',
|
|
prcNum:'',
|
|
prcId:'',
|
|
isAdmin: false
|
|
}
|
|
},
|
|
methods: {
|
|
exportStandard (){
|
|
let exportName=''
|
|
let pramas={prcNum: this.$store.getters.handleProcess.prcNum,
|
|
sortWord: this.shunxu ? this.paixu : '',
|
|
shunxu: this.shunxu,
|
|
exportName: exportName}
|
|
this.processTypeList.some(item=>{
|
|
if(item.value == this.prcType){
|
|
exportName=item.label
|
|
}
|
|
})
|
|
this.$api.process.exportStandard(pramas,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对象
|
|
}
|
|
})
|
|
},
|
|
urgeRow (){
|
|
if (this.checkList.length === 1 && !this.checkList[0].endTime) {
|
|
this.$confirm('您确认要催办该任务吗', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
confirmButtonClass: 'common-button-primary',
|
|
|
|
}).then(() => {
|
|
this.urge(this.checkList[0])
|
|
})
|
|
} else {
|
|
this.$message.warning('请选择一条未完成的数据')
|
|
}
|
|
},
|
|
urge (row) {
|
|
let params= {
|
|
msgContent: '流程编号为' + row.prcNum + '的流程，请尽快办理。',
|
|
msgTitle: '流程编号' + row.prcNum,
|
|
userId: row.assigneeId,
|
|
msgType: 'TEXT'
|
|
}
|
|
this.$api.process.urgePerson(params,
|
|
res => {
|
|
this.processTable()
|
|
this.$message.success('催办成功')
|
|
}, e => {
|
|
})
|
|
},
|
|
selectAllEvent ({ checked }) {
|
|
const records = this.$refs.xTable.getCheckboxRecords()
|
|
this.checkIds = records.map(item => {
|
|
return item.id
|
|
})
|
|
this.checkList = records
|
|
},
|
|
selectChangeEvent ({ checked }) {
|
|
const records = this.$refs.xTable.getCheckboxRecords()
|
|
this.checkIds = records.map(item => {
|
|
return item.id
|
|
})
|
|
this.checkList = records
|
|
},
|
|
showDialog() {
|
|
if(this.checkList.length < 1){
|
|
this.$message.warning("请选择一条数据")
|
|
return
|
|
}else{
|
|
if(this.checkList.length > 1){
|
|
this.$message.warning("请选择一条数据")
|
|
return
|
|
}
|
|
let check=[]
|
|
check = this.checkList.filter(item=>{
|
|
if(item.endTime ){
|
|
this.$message.warning("不是未完成的不允许操作")
|
|
return item
|
|
}
|
|
if(item.name == '重新发起'){
|
|
this.$message.warning("发起人不允许调整")
|
|
return item
|
|
}
|
|
})
|
|
if(check.length > 0){
|
|
|
|
}else{
|
|
this.$refs.monitorModal.open(this.checkList[0].id,this.prcId,this.checkList[0].assigneeId,this.checkList[0].taskDefinitionKey,this.checkList[0].prcType)
|
|
}
|
|
}
|
|
},
|
|
back () {
|
|
this.$store.commit('setActiveTabIndex',this.tabsName=='AlreadyProcess'?"third":"fourth" )
|
|
//要返回上一级
|
|
this.$router.back(-1)
|
|
},
|
|
// 请求转换流程图
|
|
processNum (row) {
|
|
this.imgLoading = true;
|
|
// axios.request({
|
|
// url: '/libary/api/model/getImg',
|
|
// responseType: 'blob',
|
|
// method: 'get',
|
|
// data: {
|
|
// modelId: row?row.id:'111s',
|
|
// }
|
|
// })
|
|
this.$api.processCenter.getMonitorImg({prcNum:this.prcNum})
|
|
.then(res => {
|
|
console.log(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.$api.processCenter.getMonitorPageList({
|
|
prcNum: this.prcNum,
|
|
sortWord: this.shunxu ? this.paixu : '',
|
|
shunxu: this.shunxu
|
|
}).then(res=>{
|
|
this.detailData = res.data
|
|
// res[res.length - 1].endTime ? this.urgeRowFlag = false : this.urgeRowFlag = true
|
|
})
|
|
},
|
|
},
|
|
components: {
|
|
monitorModal
|
|
},
|
|
props: {},
|
|
mounted () {
|
|
this.isAdmin = this.$store.getters.userInfo.roleIdList.indexOf('35LLRCAQ8D') > -1
|
|
this.tabsName=this.$store.getters.handleProcess.tabsName
|
|
this.prcType=this.$store.getters.handleProcess.prcType
|
|
this.prcNum=this.$store.getters.handleProcess.prcNum
|
|
this.prcId=this.$store.getters.handleProcess.prcId
|
|
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{
|
|
height: auto;
|
|
overflow: auto;
|
|
max-width: 100%;
|
|
object-fit: none;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.alreadbtn{
|
|
display: flex;
|
|
}
|
|
}
|
|
.back{
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #1890FF;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
//text-align: center;
|
|
line-height: 30px;
|
|
font-size: 25px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
</style>
|