You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
613 lines
20 KiB
613 lines
20 KiB
<template>
|
|
<div class="app-container">
|
|
<div class="tab-header webtop">
|
|
<div style="text-align: right">
|
|
<!-- <router-link tag='a' :to="'/home'">《 返回首页</router-link>-->
|
|
<a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
|
|
</div>
|
|
</div>
|
|
<div class="searchcon">
|
|
<div class="search">
|
|
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
|
|
<el-form-item label="工作名称">
|
|
<el-input v-model="listQuery.params.proDefName" placeholder="流程名称" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="发起人">
|
|
<el-select v-model="listQuery.params.startUserSid" filterable placeholder="请选择">
|
|
<el-option v-for="item in user_list" :key="item.userSid" :label="item.staffName" :value="item.userSid"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="申请日期">
|
|
<el-date-picker v-model="listQuery.params.startDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
|
|
<label>至</label>
|
|
<el-date-picker v-model="listQuery.params.endDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
|
|
</el-form-item>
|
|
<el-button type="primary" @click="handleFilter">查询</el-button>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="listtop">
|
|
<div class="tit">待办任务列表</div>
|
|
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
|
|
</div>
|
|
<div class="listcon">
|
|
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%" @selection-change="handleSelectionChange">
|
|
<el-table-column width="60px" label="序号" type="index" :index="tableKey+1" align="center"/>
|
|
<el-table-column width="100px" label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" size="small" @click="handleCheck(scope.row)">办理</el-button>
|
|
<!-- <el-button type="primary" size="small" disabled @click="handleReject(scope.row)">退回</el-button>-->
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="流程类别" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <span class="bluezi">{{scope.row.category}}</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column label="工作名称" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.procDefName}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="100px" label="发起人" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.startUserName}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="100px" label="审批日期" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.createTime|formatTimer}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="发起部门" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.startDeptName}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="100px" label="提交日期" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.processCreateTime|formatTimer}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="当前环节" align="center">
|
|
<template slot-scope="scope">
|
|
<span class="bluezi" @click="handleFlowRecord(scope.row)">{{scope.row.taskName}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column width="80px" label="审批记录" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <el-button type="primary" size="small" @click="handleFlowRecord(scope.row)">查看</el-button>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
</el-table>
|
|
</div>
|
|
<div class="pages">
|
|
<div class="tit"/>
|
|
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
|
|
</div>
|
|
|
|
<!-- Start办理页面 -->
|
|
<el-dialog
|
|
title=""
|
|
:visible.sync="centerDialogVisible"
|
|
width="78%"
|
|
height="1%"
|
|
:before-close="closeIt"
|
|
center>
|
|
<iframe frameborder="0" id="iframe" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
|
|
</el-dialog>
|
|
<!-- End办理页面-->
|
|
|
|
<!-- 编辑信息页面 -->
|
|
<el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
|
|
<div style="text-align: right">
|
|
<el-button type="primary" size="small" @click="handleComment">评论</el-button>
|
|
</div>
|
|
<flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
|
|
</el-dialog>
|
|
|
|
<!-- 审批人员填写评论 -->
|
|
<el-dialog title="评论" :visible.sync="commentVisible" width="50%">
|
|
<el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
|
|
</el-input>
|
|
<upload ref="imgUpload" v-model="comment_ImgList" bucket="map" :upload-data="{type:'0001'}"/>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
|
|
<el-button size="small" @click="commentVisible = false">取消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import flowRecords from '@/components/flow/flowRecord'
|
|
import Pagination from '@/components/pagination'
|
|
import pageye from '@/components/pagination/pageye'
|
|
import { getFlowViewer, readXml, breakTask, businessAgree, pagerList, rejectTask, selectUrl, commentSave, sysstaffinfo } from '@/api/flow/todo'
|
|
import { getStorage } from '@/utils/auth'
|
|
import { flowRecord } from '@/api/workflow/finished'
|
|
import { loginDetails } from '@/api/user'
|
|
import upload from '@/components/uploadFile/upload'
|
|
|
|
export default {
|
|
name: '',
|
|
components: {
|
|
pageye,
|
|
Pagination,
|
|
flowRecords,
|
|
upload
|
|
},
|
|
data() {
|
|
return {
|
|
taskList: [],
|
|
user_list: [],
|
|
xmlData: '',
|
|
dialogHeight: '80%',
|
|
centerDialogVisible: false, // 弹框
|
|
editDialog: false,
|
|
flowRecordList: [],
|
|
listLoading: false,
|
|
dialogList: {},
|
|
list: [],
|
|
tableKey: 0,
|
|
url: '',
|
|
commentVisible: false, // 评论内容弹框
|
|
comment_ImgList: [],
|
|
comment: {
|
|
reviewer: '',
|
|
reviewerSid: '',
|
|
time: '',
|
|
content: '',
|
|
processId: '',
|
|
processInstSid: '',
|
|
fileList: []
|
|
},
|
|
line_row: {},
|
|
taskName_now: '',
|
|
loginInfo: {
|
|
userSid: ''
|
|
},
|
|
agreeList: { // 同意办理列表
|
|
businessSid: '',
|
|
comment: '',
|
|
instanceId: '',
|
|
taskId: '',
|
|
userSid: '',
|
|
taskDefKey: ''
|
|
},
|
|
regectList: { // 驳回列表
|
|
businessSid: '',
|
|
comment: '',
|
|
instanceId: '',
|
|
taskId: '',
|
|
userSid: ''
|
|
},
|
|
stopList: { // 终止列表
|
|
businessSid: '',
|
|
comment: '',
|
|
instanceId: '',
|
|
taskId: '',
|
|
userSid: ''
|
|
},
|
|
selectUrl_list: {
|
|
proc_def_id: '', // 流程定义id
|
|
taskDefKey: '', // 节点id
|
|
type: '' // 类型
|
|
},
|
|
listQuery: {
|
|
current: 1,
|
|
size: 10,
|
|
total: 0,
|
|
params: {
|
|
proDefName: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
userSid: '',
|
|
startUserSid: ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
|
|
window.addEventListener('message', this.handleMessage)
|
|
},
|
|
created() {
|
|
// 加载列表
|
|
// this.getList()
|
|
this.init()
|
|
// 加载流程图相关的数据
|
|
},
|
|
filters: {
|
|
formatTimer: function(value) {
|
|
let date = new Date(value)
|
|
let y = date.getFullYear()
|
|
let MM = date.getMonth() + 1
|
|
MM = MM < 10 ? '0' + MM : MM
|
|
let d = date.getDate()
|
|
d = d < 10 ? '0' + d : d
|
|
let h = date.getHours()
|
|
h = h < 10 ? '0' + h : h
|
|
let m = date.getMinutes()
|
|
m = m < 10 ? '0' + m : m
|
|
let s = date.getSeconds()
|
|
s = s < 10 ? '0' + s : s
|
|
return y + '-' + MM + '-' + d // + " " + h + ":" + m;
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
/** xml 文件 */
|
|
getModelDetail(deployId) {
|
|
var token = getStorage()
|
|
// 发送请求，获取xml
|
|
readXml(deployId, token).then(res => {
|
|
this.xmlData = res.data
|
|
})
|
|
},
|
|
// 已办环节的节点
|
|
getFlowViewer(procInsId) {
|
|
var token = getStorage()
|
|
getFlowViewer(procInsId,token).then(res => {
|
|
this.taskList = res.data
|
|
})
|
|
},
|
|
setIframeHeight(iframe) {
|
|
iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
|
|
},
|
|
async handleMessage(event) {
|
|
var code = ''
|
|
if (event.data.params !== null && event.data.params !== undefined) {
|
|
code = event.data.params.code
|
|
}
|
|
if (code === 1) {
|
|
this.init()
|
|
this.centerDialogVisible = false
|
|
} else if (code === 2) {
|
|
this.dialogHeight = event.data.params.data
|
|
this.setIframeHeight(document.getElementById('iframe'))
|
|
}
|
|
},
|
|
init() {
|
|
sysstaffinfo().then((resp) => {
|
|
if (resp.success) {
|
|
this.user_list = resp.data
|
|
}
|
|
})
|
|
var token = getStorage()
|
|
loginDetails(token).then((response) => {
|
|
if (response.code === '200') {
|
|
this.loginInfo = response.data
|
|
this.agreeList.userSid = this.loginInfo.sid
|
|
this.regectList.userSid = this.loginInfo.sid
|
|
this.stopList.userSid = this.loginInfo.sid
|
|
this.listQuery.params.userSid = this.loginInfo.sid
|
|
this.getList()
|
|
}
|
|
})
|
|
},
|
|
// 点击办理
|
|
handleCheck(row) {
|
|
this.centerDialogVisible = true
|
|
// this.taskName_now = row.taskName
|
|
// 同意
|
|
this.agreeList.businessSid = row.processVariables.businessSid
|
|
this.agreeList.instanceId = row.procInsId
|
|
this.agreeList.taskId = row.taskId
|
|
this.agreeList.taskDefKey = row.taskDefKey
|
|
// 驳回
|
|
this.regectList.businessSid = row.processVariables.businessSid
|
|
this.regectList.instanceId = row.procInsId
|
|
this.regectList.taskId = row.taskId
|
|
// 终止
|
|
this.stopList.businessSid = row.processVariables.businessSid
|
|
this.stopList.instanceId = row.procInsId
|
|
this.stopList.taskId = row.taskId
|
|
// 业务表单url
|
|
this.selectUrl_list.proc_def_id = row.procDefId
|
|
this.selectUrl_list.taskDefKey = row.taskDefKey
|
|
this.selectUrl_list.type = 1
|
|
const parameter_list = {
|
|
businessSid: row.processVariables.businessSid,
|
|
instanceId: row.procInsId,
|
|
taskId: row.taskId,
|
|
taskName: row.taskName,
|
|
deployId: row.deployId,
|
|
taskDefKey: row.taskDefKey
|
|
}
|
|
selectUrl(this.selectUrl_list).then((response) => {
|
|
if (response.success && response.data.url !== '') {
|
|
// this.url = 'http://127.0.0.1:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
|
|
this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
|
|
// this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
|
|
console.log('已办拼接url:', this.url)
|
|
} else if (response.success && response.data.url === '') {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: '请在手机端进行审核',
|
|
type: 'error',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: '执行失败',
|
|
type: 'error',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
// 审批记录
|
|
},
|
|
closeIt() {
|
|
this.url = ''
|
|
this.centerDialogVisible = false
|
|
},
|
|
// 同意
|
|
openAgree() {
|
|
this.$confirm('是否确认执行同意操作', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.handleAgree()
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消同意'
|
|
})
|
|
})
|
|
},
|
|
// 驳回
|
|
openReject() {
|
|
this.$confirm('是否确认执行驳回操作', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.handleReject()
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消驳回'
|
|
})
|
|
})
|
|
},
|
|
// 终止
|
|
openStop() {
|
|
this.$confirm('是否确认执行终止操作', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.handleStop()
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消终止'
|
|
})
|
|
})
|
|
},
|
|
/** 同意任务 */
|
|
handleAgree() {
|
|
this.agreeList.comment = this.dialogList.comment
|
|
businessAgree(this.agreeList).then((response) => {
|
|
if (response.code === '200') {
|
|
alert('操作成功！')
|
|
this.refreshIt()
|
|
} else {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: '操作失败',
|
|
type: 'error',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
/** 终止任务 */
|
|
handleStop() {
|
|
this.stopList.comment = this.dialogList.comment
|
|
breakTask(this.stopList).then((response) => {
|
|
if (response.code === '200') {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: '执行成功',
|
|
type: 'success',
|
|
duration: 2000
|
|
})
|
|
this.refreshIt()
|
|
} else {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: '执行失败',
|
|
type: 'error',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
/** 驳回任务 */
|
|
handleReject() {
|
|
this.regectList.comment = this.dialogList.comment
|
|
rejectTask(this.regectList).then((response) => {
|
|
if (response.code === '200') {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: '执行成功',
|
|
type: 'success',
|
|
duration: 2000
|
|
})
|
|
this.refreshIt()
|
|
} else {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: '执行失败',
|
|
type: 'error',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleComment() {
|
|
this.commentVisible = true
|
|
this.comment = {
|
|
reviewer: '',
|
|
reviewerSid: '',
|
|
time: '',
|
|
content: '',
|
|
processId: '',
|
|
processInstSid: '',
|
|
fileList: []
|
|
}
|
|
this.comment_ImgList = []
|
|
},
|
|
handleCommentConfirm() {
|
|
if (this.comment.content === '') {
|
|
this.$message({ showClose: true, type: 'error', message: '请填写评论' })
|
|
return
|
|
}
|
|
if (this.comment_ImgList.length > 0) {
|
|
for (var i = 0; i < this.comment_ImgList.length; i++) {
|
|
this.comment.fileList.push(this.comment_ImgList[i].url)
|
|
}
|
|
}
|
|
this.comment.reviewer = window.sessionStorage.getItem('name')
|
|
this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
|
|
this.comment.processId = this.line_row.procInsId
|
|
commentSave(this.comment).then((resp) => {
|
|
if (resp.success) {
|
|
this.commentVisible = false
|
|
this.handleFlowRecord(this.line_row)
|
|
}
|
|
})
|
|
},
|
|
/** 更新列表 */
|
|
refreshIt() {
|
|
this.centerDialogVisible = false
|
|
this.getList()
|
|
},
|
|
/** 流程流转记录 */
|
|
handleFlowRecord(row) {
|
|
this.line_row = row
|
|
this.getModelDetail(row.deployId)
|
|
this.getFlowViewer(row.procInsId)
|
|
this.getFlowRecordList(row.procInsId, row.deployId)
|
|
this.editDialog = true
|
|
},
|
|
/** 流程流转记录 */
|
|
getFlowRecordList(procInsId, deployId) {
|
|
var token = getStorage()
|
|
const params = {procInsId: procInsId, deployId: deployId,token: token }
|
|
flowRecord(params).then(res => {
|
|
this.flowRecordList = res.data
|
|
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
|
|
if (res.data.formData) {
|
|
this.formConf = res.data.formData
|
|
this.formConfOpen = true
|
|
}
|
|
}).catch(res => {
|
|
this.getList()
|
|
})
|
|
},
|
|
getList() {
|
|
this.listLoading = true
|
|
pagerList(this.listQuery).then((rep) => {
|
|
this.listLoading = false
|
|
if (rep.success) {
|
|
this.list = rep.data.records
|
|
this.listQuery.total = rep.data.total
|
|
} else {
|
|
this.list = []
|
|
this.listQuery.total = 0
|
|
}
|
|
})
|
|
},
|
|
handleFilter() {
|
|
this.listQuery.current = 1
|
|
this.getList()
|
|
},
|
|
handleSelectionChange() {
|
|
|
|
},
|
|
indexMethod() {
|
|
return 0;
|
|
},
|
|
setIcon(val) {
|
|
if (val) {
|
|
return "el-icon-check";
|
|
} else {
|
|
return "el-icon-time";
|
|
}
|
|
},
|
|
setColor(val) {
|
|
if (val) {
|
|
return "#2bc418";
|
|
} else {
|
|
return "#b3bdbb";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scroll_div {
|
|
height: auto;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.diaTitle {
|
|
padding: 30px 0 15px 0;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.el-icon-document, .el-icon-chat-line-square, .el-icon-notebook-2 {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.listtop {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0px 0px 10px 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
.listtop .tit {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.listtop .pagination {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.pages {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
padding: 0px 0px 15px 15px;
|
|
}
|
|
|
|
.pages .tit {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pages .pagination {
|
|
margin: 0;
|
|
}
|
|
|
|
.inputType {
|
|
width: 600px;
|
|
}
|
|
|
|
.searchlist {
|
|
padding-top: 20px;
|
|
}
|
|
.dialogStyle /deep/ .el-dialog__body {
|
|
padding-top: 0px !important;
|
|
}
|
|
</style>
|
|
|