DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改监控流程页面【为改完】

Browse Source
This commit is contained in:
zhoulingpo
2023-04-19 18:01:03 +08:00
parent dcdea1cc22
commit 56714eaa95
11 changed files with 994 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/process.scss
+1 -1
View File
@@ -13,7 +13,7 @@
.procedure{
}
.content{
.process_content{
margin-top: 25px;
width:100%;
padding: 10px 30px;
src/components/ProcessMixin.vue
+94
View File
@@ -0,0 +1,94 @@
<!-- 流程组件公共数据 -->
<script>
export default {
name: 'ProcessMixins',
mixins: [],
components: {},
data() {
return {
processTypeList: [
// {
// label: '法规入库流程',
// value: '1'
// },
],
formDisableFlag: false,
pickerOptions: {
disabledDate(time) {
const start = new Date(new Date().toLocaleDateString());
start.setTime(start.getTime());
return time.getTime() < start
}
},
nowOrder: '',
nowOrderBy: '',
}
},
methods: {
// 表格排序
sortChange(sortObj, tableName) {
// console.log(sortObj)
this.nowOrderBy = sortObj.prop
if (sortObj.order === 'ascending') {
this.nowOrder = 'asc'
} else if (sortObj.order === 'descending') {
this.nowOrder = 'desc'
} else {
this.nowOrder = ''
this.nowOrderBy = ''
}
this[tableName]()
},
/**
* @description: 根据流程类型获取流程名称
* @date: 2020-11-25 15:47:12
* @auth: chenxiaoxi
*/
getPrcName(prcType) {
let prcName = ''
this.processTypeList.map(item => {
if (item.value === prcType) {
prcName = item.label
}
})
return prcName
},
/**
* @description: 对表单部分字段进行校验
* @date: 2021-01-15 10:00:16
* @auth: chenxiaoxi
*/
handleValidField(field) {
this.$refs['prcForm'].validateField(field)
},
/**
* @description: 查询下一节点处理人(高级经理)
* @date: 2021-03-11
* @auth: WangXu
*/
getResByCurrentRoleId(roleIds, roleName, callback) {
// 获取当前 foRoleId 有 otherFORoleId 就一定是 其他起草人填写的 FO
// 否则一定是主起草人填写的 FO
this.$http.get('sys/role/getParentsByFOs', {
ids: roleIds, // 当前登录人的角色
roleHierarchyName: roleName // 上级角色
}, {}, res => {
if (res.ok) {
callback.call(this, res.data)
} else {
this.$message.warning(res.message)
}
})
},
},
computed: {},
watch: {},
mounted() {
}
}
</script>
src/router/modules/userCenter.js
+1 -1
View File
@@ -26,7 +26,7 @@ const routes = [
{
path:'monitorViews',
name:'monitorViews',
component: () => import('../../views/userCenter/processCenter/monitorProcesses/monitorViews.vue')
component: () => import('../../views/userCenter/processCenter/monitorProcesses/monitorDetail.vue')
}
]
}
src/views/permissionApplication/examine.vue
+3 -3
View File
@@ -4,7 +4,7 @@
<div class="process_box">
<process-header :title="'权限审批'" :proceesNum="'proceesNum'"></process-header>
<div class="procedure">
<div class="content">
<div class="process_content">
<span class="base_title">基础信息</span>
<el-row>
<report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}" :disabled="formControl"></report-table>
@@ -35,11 +35,11 @@
</el-form>
</el-row>
</div>
<div class="content">
<div class="process_content">
<span class="base_title">审批历史</span>
<process-approval-history></process-approval-history>
</div>
<div class="content">
<div class="process_content">
<span class="base_title">审核信息</span>
<audit-operation ref="operationRef"></audit-operation>
</div>
src/views/permissionApplication/launch.vue
+3 -3
View File
@@ -3,7 +3,7 @@
<div class="process_box">
<process-header :title="'发起流程'"></process-header>
<div class="procedure">
<div class="content">
<div class="process_content">
<span class="base_title">基础信息</span>
<el-row>
<report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}"></report-table>
@@ -34,11 +34,11 @@
</el-form>
</el-row>
</div>
<div class="content" v-if="initShow">
<div class="process_content" v-if="initShow">
<span class="base_title">审批历史</span>
<process-approval-history></process-approval-history>
</div>
<div class="content">
<div class="process_content">
<span class="base_title">指派信息</span>
<el-form ref="assignFormRef" :model="assignForm" label-width="150px"
:rules="assignFormRules" class="label-input-form" size="medium">
src/views/userCenter/processCenter.vue
+12 -6
View File
@@ -87,10 +87,18 @@ import tabs from '../userCenter/processCenter/tabs.vue'
align-items: center;
margin: 20px 0 0 22px;
.item{
width: 300px;
display: flex;
align-items: center;
width: 300px;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
color: #595959;
margin-right: 5px;
padding-left: 22px;
}
::v-deep .el-input{
width: 200px;
}
}
.tabs{
@@ -98,7 +106,5 @@ import tabs from '../userCenter/processCenter/tabs.vue'
}
}
::v-deep .el-input{
width: 200px;
}
</style>
src/views/userCenter/processCenter/finishProcess.vue
+56 -28
View File
@@ -1,31 +1,36 @@
<template>
<div>
<el-table :data="tableData" style="width: 100%" border
:header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
<el-table-column prop="processId" label="流程编号" align="center">
</el-table-column>
<el-table-column prop="processName" label="流程名称" align="center">
</el-table-column>
<el-table-column prop="processPerson" label="发起人" align="center">
</el-table-column>
<el-table-column prop="now" label="当前处理人" align="center">
</el-table-column>
<el-table-column prop="last" label="上一处理人" align="center">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" sortable align="center">
</el-table-column>
<el-table-column prop="endTime" label="完成时间" sortable align="center">
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
查看
</el-button>
</template>
</el-table-column>
</el-table>
<div class="table">
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 380px)'">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
</template>
</vxe-column>
<vxe-column show-overflow show-header-overflow field="prcNum"
title="流程编号"></vxe-column>
<vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelOneName"
title="发起人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="name" title="当前处理人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelOneName"
title="上一处理人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="name" title="创建时间"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelOneName"
title="完成时间"></vxe-column>
<vxe-column show-overflow show-header-overflow field="name" title="状态"></vxe-column>
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
查看
</el-button>
</template>
</vxe-column>
</vxe-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
:page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="total" />
</div>
</div>
</template>
@@ -34,6 +39,11 @@ export default {
name: 'finishProcess',
data() {
return {
q:{
pageNo:1,
pageSize:10
},
total: 0,
tableData: [{
processId: '2016-05-1',
processName: '王小虎',
@@ -74,6 +84,17 @@ export default {
}
},
methods: {
// 单页数据量
handleSizeChange(val) {
this.q.pageSize = val;
this.q.pageNo = 1;
this.loadData();
},
// 第几页
handleCurrentChange(val) {
this.q.pageNo = val;
this.loadData();
},
view() {
alert(111)
},
@@ -84,6 +105,13 @@ export default {
<style lang="scss" scoped>
::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
height: 0px !important;
}
</style>
.table {
margin: 0 14px 0 13px;
::v-deep .el-pagination {
margin-top: 13px;
padding-left: 20px;
padding-bottom: 10px;
}
}
</style>
src/views/userCenter/processCenter/gencyProcess.vue
+50 -22
View File
@@ -1,26 +1,30 @@
<template>
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{
background: '#DFE6EC',
fontWeight: '700',
color: '#1F2D3D',
}">
<el-table-column prop="processId" label="流程编号" align="center">
</el-table-column>
<el-table-column prop="processName" label="流程名称" align="left">
</el-table-column>
<el-table-column prop="processPerson" label="发起人" align="center">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" sortable align="center">
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
办理
</el-button>
</template>
</el-table-column>
</el-table>
<div class="table">
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 380px)'">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
</template>
</vxe-column>
<vxe-column show-overflow show-header-overflow field="prcNum"
title="流程编号"></vxe-column>
<vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelOneName"
title="发起人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="name" title="创建时间"></vxe-column>
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
办理
</el-button>
</template>
</vxe-column>
</vxe-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
:page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="total" />
</div>
</div>
</template>
@@ -29,6 +33,11 @@ export default {
name: "gencyProcess",
data() {
return {
q:{
pageNo:1,
pageSize:10
},
total: 0,
tableData: [
{
processId: "2016-05-1",
@@ -75,6 +84,17 @@ export default {
});
},
methods: {
// 单页数据量
handleSizeChange(val) {
this.q.pageSize = val;
this.q.pageNo = 1;
this.loadData();
},
// 第几页
handleCurrentChange(val) {
this.q.pageNo = val;
this.loadData();
},
handle() {
alert(111);
},
@@ -90,4 +110,12 @@ export default {
height: 0px !important;
}
</style>
.table {
margin: 0 14px 0 13px;
::v-deep .el-pagination {
margin-top: 13px;
padding-left: 20px;
padding-bottom: 10px;
}
}
</style>
src/views/userCenter/processCenter/monitorProcesses.vue
+57 -28
View File
@@ -1,31 +1,37 @@
<template>
<div>
<el-table :data="tableData" style="width: 100%" border
:header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
<el-table-column prop="processId" label="流程编号" align="center">
</el-table-column>
<el-table-column prop="processName" label="流程名称" align="center">
</el-table-column>
<el-table-column prop="processPerson" label="发起人" align="center">
</el-table-column>
<el-table-column prop="now" label="当前处理人" align="center">
</el-table-column>
<el-table-column prop="last" label="上一处理人" align="center">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" sortable align="center">
</el-table-column>
<el-table-column prop="endTime" label="完成时间" sortable align="center">
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
查看
</el-button>
</template>
</el-table-column>
</el-table>
<div class="table">
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 380px)'">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
</template>
</vxe-column>
<vxe-column show-overflow show-header-overflow field="prcNum"
title="流程编号"></vxe-column>
<vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelOneName"
title="发起人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="name" title="当前处理人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelOneName"
title="上一处理人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="name" title="创建时间"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelOneName"
title="完成时间"></vxe-column>
<vxe-column show-overflow show-header-overflow field="name" title="状态"></vxe-column>
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button @click.native.prevent="view(row, tableData)" type="text" size="small">
查看
</el-button>
</template>
</vxe-column>
</vxe-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
:page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="total" />
</div>
</div>
</template>
<script>
@@ -33,6 +39,11 @@ export default {
name: 'monitorProcess',
data() {
return {
q:{
pageNo:1,
pageSize:10
},
total: 0,
tableData: [{
processId: '2016-05-1',
processName: '王小虎',
@@ -73,6 +84,17 @@ export default {
});
},
methods: {
// 单页数据量
handleSizeChange(val) {
this.q.pageSize = val;
this.q.pageNo = 1;
this.loadData();
},
// 第几页
handleCurrentChange(val) {
this.q.pageNo = val;
this.loadData();
},
view() {
this.$router.push({
path: 'monitorViews',
@@ -88,6 +110,13 @@ export default {
<style lang="scss" scoped>
::v-deep .el-table__fixed,.el-table__fixed-right ::before{
height: 0px !important;
}
</style>
.table {
margin: 0 14px 0 13px;
::v-deep .el-pagination {
margin-top: 13px;
padding-left: 20px;
padding-bottom: 10px;
}
}
</style>
src/views/userCenter/processCenter/monitorProcesses/monitorDetail.vue
+595
View File
@@ -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">&#xe61e;</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>
src/views/userCenter/processCenter/sentProcess.vue
+122 -95
View File
@@ -1,110 +1,137 @@
<template>
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{
background: '#DFE6EC',
fontWeight: '700',
color: '#1F2D3D',
}">
<el-table-column prop="processId" label="流程编号" align="center">
</el-table-column>
<el-table-column prop="processName" label="流程名称" align="center">
</el-table-column>
<el-table-column prop="processPerson" label="发起人" align="center">
</el-table-column>
<el-table-column prop="now" label="当前处理人" align="center">
</el-table-column>
<el-table-column prop="last" label="上一处理人" align="center">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" sortable align="center">
</el-table-column>
<el-table-column prop="endTime" label="完成时间" sortable align="center">
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
查看
</el-button>
<el-button :disabled="tableData[scope.$index].status=='已完成'" @click.native.prevent="back(scope.$index, tableData)" type="text" size="small"
>
<span :style="tableData[scope.$index].status=='已完成' ? {color:icolor } :{color:color}" >强制撤回</span>
</el-button>
</template>
</el-table-column>
</el-table>
<div>
<div class="table">
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
v-table-min-height="'calc(100vh - 380px)'">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
</template>
</vxe-column>
<vxe-column show-overflow show-header-overflow field="prcNum"
title="流程编号"></vxe-column>
<vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
<vxe-column show-overflow show-header-overflow field="creatUserName"
title="发起人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="taskAssignee" title="当前处理人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="taskBackAssignee"
title="上一处理人"></vxe-column>
<vxe-column show-overflow show-header-overflow field="creatTime" title="创建时间"></vxe-column>
<vxe-column show-overflow show-header-overflow field="endTime"
title="完成时间"></vxe-column>
<vxe-column show-overflow show-header-overflow field="isEnd" title="状态"></vxe-column>
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
<template #default="{ row,index }">
<el-button type="text" size="small">
查看
</el-button>
<el-button type="text" size="small">
<span>强制撤回</span>
</el-button>
</template>
</vxe-column>
</vxe-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
:page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="total"/>
</div>
</div>
</template>
<script>
export default {
name: "sentProcess",
data() {
return {
color:'rgb(236, 128, 141)',
icolor:'rgb(119,136,153)',
tableData: [
{
processId: "2016-05-1",
processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-1",
status:'已完成'
},
{
processId: "2016-05-2",
processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-2",
},
{
processId: "2016-05-3",
processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-3",
},
{
processId: "2016-05-4",
processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-4",
},
],
};
},
props:{
thirdData:{
type:Array,
default:[],
}
},
watch: {
thirdData(newValue, oldValue) {
this.tableData=newValue
}
},
mounted () {
this.$bus.$on('getSearchItem',(data)=>{
console.log('33',data)
});
},
methods: {
view() {
alert(111);
name: "sentProcess",
data() {
return {
color: 'rgb(236, 128, 141)',
icolor: 'rgb(119,136,153)',
q: {
pageNo: 1,
pageSize: 10
},
total: 0,
tableData: [
{
processId: "2016-05-1",
processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-1",
status: '已完成'
},
back(index,tableData) {
console.log('index',index);
console.log('tableData',tableData);
{
processId: "2016-05-2",
processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-2",
},
{
processId: "2016-05-3",
processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-3",
},
{
processId: "2016-05-4",
processName: "王小虎",
processPerson: "上海市普陀区金沙江路 1518 弄",
createTime: "2023-1-4",
},
],
};
},
props: {
thirdData: {
type: Array,
default: [],
}
},
watch: {
thirdData(newValue, oldValue) {
this.tableData = newValue
}
},
mounted() {
this.$bus.$on('getSearchItem', (data) => {
console.log('33', data)
});
},
methods: {
// 单页数据量
handleSizeChange(val) {
this.q.pageSize = val;
this.q.pageNo = 1;
this.loadData();
},
// 第几页
handleCurrentChange(val) {
this.q.pageNo = val;
this.loadData();
},
view() {
alert(111);
},
back(index, tableData) {
console.log('index', index);
console.log('tableData', tableData);
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
height: 0px !important;
::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before {
height: 0px !important;
}
</style>
.table {
margin: 0 14px 0 13px;
::v-deep .el-pagination {
margin-top: 13px;
padding-left: 20px;
padding-bottom: 10px;
}
}
</style>