修改流程详情

This commit is contained in:
范强强
2024-01-29 16:42:47 +08:00
parent 7fc732afb3
commit ab224f7bca
4 changed files with 123 additions and 87 deletions
@@ -9,8 +9,7 @@
<!-- <span class="flow-chart-title">{{ $route.params.processNumber }} {{ $route.params.processTypeName }} 流程图</span>--> <!-- <span class="flow-chart-title">{{ $route.params.processNumber }} {{ $route.params.processTypeName }} 流程图</span>-->
</div> </div>
<div class="flow-group" style="margin-top: 30px;overflow: auto;"> <div class="flow-group" style="margin-top: 30px;overflow: auto;">
<img v-if="$route.query.oldAndNew == 'old'" :src="processStep" class="process-img"> <div v-if="$route.query.oldAndNew == 'new' && $route.query.flowType == '3'" class="flow-group-process">
<div v-else-if="$route.query.oldAndNew == 'new'" class="flow-group-process">
<div class="flow-group-process-stard"> <div class="flow-group-process-stard">
开始 开始
</div> </div>
@@ -22,13 +21,27 @@
class="flow-group-process-arrow"> class="flow-group-process-arrow">
</div> </div>
<div class="flow-group-process-content" <div class="flow-group-process-content"
:style="backdrop(item.status)" :style="backdrop(item.taskStatus)"
:class="{'flow-group-process-content-dis':!leftArrow(index + 1)}"> :class="{'flow-group-process-content-dis':!leftArrow(index + 1)}">
<div class="flow-group-process-content-top"> <div class="flow-group-process-content-top">
起草 {{item.taskKeyName}}
</div> </div>
<div class="flow-group-process-content-bottom"> <el-tooltip placement="top">
{{item.name}} <div slot="content">
<div style="margin-bottom: 4px"
v-for="val1 in item.userNames">
{{val1}}
</div>
</div>
<div class="flow-group-process-content-bottom" v-if="item.userNames && item.userNames.length > 0">
<div v-if="item.userNames && item.userNames.length > 0"
v-for="val in item.userNames">
<div>{{val}}</div>
</div>
</div>
</el-tooltip>
<div class="flow-group-process-content-bottom" v-if="!item.userNames">
<div>暂未选择处理人</div>
</div> </div>
</div> </div>
<div v-if="isVerticalLine(index + 1)" <div v-if="isVerticalLine(index + 1)"
@@ -41,12 +54,13 @@
</div> </div>
</div> </div>
<div class="flow-group-process-end" <div class="flow-group-process-end"
:style="backdrop(nameList[nameList.length - 1].status == 1 ? 1 : 3)" :style="backdrop(nameList[nameList.length - 1].taskStatus == 'done' ? 'done' : '')"
:class="{'flow-group-process-end-left':isProcessEnd(nameList.length), :class="{'flow-group-process-end-left':isProcessEnd(nameList.length),
'flow-group-process-end-one':isProcessEndOne(nameList.length),}"> 'flow-group-process-end-one':isProcessEndOne(nameList.length),}">
结束 结束
</div> </div>
</div> </div>
<img v-else :src="processStep" class="process-img">
</div> </div>
</div> </div>
<div class="action-bar"> <div class="action-bar">
@@ -97,6 +111,77 @@
</div> </div>
<div class="flow-list"> <div class="flow-list">
<el-table <el-table
v-if="$route.query.oldAndNew == 'new' && $route.query.flowType == '3'"
ref="selection"
height="100%"
: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"
@sort-change="sortChange"
>
<el-table-column
type="selection"
width="55"
align="center"
/>
<el-table-column type="index" width="55" label="序号" align="center"/>
<el-table-column
prop="taskKeyShow"
label="任务步骤"
align="center"
sortable="custom"
/>
<el-table-column
prop="userName"
label="任务受理人"
align="center"
sortable="custom"
/>
<el-table-column
prop="createTime"
label="创建时间"
sortable="custom"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.createTime ? $moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
</template>
</el-table-column>
<el-table-column
prop="endTime"
label="完成时间"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.endTime ? $moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
</template>
</el-table-column>
<el-table-column
prop="commitText"
label="意见内容"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.commitText }}</span>
</template>
</el-table-column>
<el-table-column
prop="completeFlag"
label="状态"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.endTime ? '已完成' : scope.row.receiveStatus ? '已接收' : '未完成' }}</span>
</template>
</el-table-column>
</el-table>
<el-table
v-else
ref="selection" ref="selection"
height="100%" height="100%"
:data="detailData" :data="detailData"
@@ -165,6 +250,7 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<loading :loading="loading">流程列表加载中</loading> <loading :loading="loading">流程列表加载中</loading>
<!-- 福田全公司选人解决方案 --> <!-- 福田全公司选人解决方案 -->
<Role-tree <Role-tree
@@ -199,71 +285,7 @@
name: 'ProcessDetail', name: 'ProcessDetail',
data() { data() {
return { return {
nameList: [ nameList: [],
{
name: '张三1',
status: 1
},
{
name: '张三2',
status: 1
},
{
name: '张三3',
status: 2
},
{
name: '张三4',
status: 3
},
{
name: '张三5',
status: 3
},
{
name: '张三6',
status: 3
},
// {
// name: '张三7'
// },
// {
// name: '张三8'
// },
// {
// name: '张三9'
// },
// {
// name: '张三10'
// },
// {
// name: '张三11'
// },
// {
// name: '张三12'
// },
// {
// name: '张三13'
// },
// {
// name: '张三14'
// },
// {
// name: '张三15'
// },
// {
// name: '张三16'
// },
// {
// name: '张三17'
// },
// {
// name: '张三18'
// },
// {
// name: '张三19'
// },
],
approveShow: false, approveShow: false,
approveRowIndex: 0, approveRowIndex: 0,
assigneeNewLoading: false, // 调整处理人确定loading assigneeNewLoading: false, // 调整处理人确定loading
@@ -302,14 +324,19 @@
methods: { methods: {
getProcessList() { getProcessList() {
let query = { let query = {
actiProcInstId:this.$route.query.actiProcInstId, actiProcInstId: this.$route.query.actiProcInstId,
flowType:this.$route.query.flowType, flowType: this.$route.query.flowType,
} }
this.$http.get('/lawss/activiti/getImgDataList', query, { this.$http.get('/lawss/activiti/getImgDataList', query, {
loading: 'loading', loading: 'loading',
_this: this _this: this
}, res => { }, res => {
// this.detailData = res this.nameList = res
this.nameList.forEach(val=>{
if (val.userNames){
val.userNames = val.userNames.split(',')
}
})
this.$nextTick(() => { this.$nextTick(() => {
let flowGroupProcess = document.getElementsByClassName('flow-group-process') let flowGroupProcess = document.getElementsByClassName('flow-group-process')
let num = (flowGroupProcess[0].offsetWidth - 100) / 248 let num = (flowGroupProcess[0].offsetWidth - 100) / 248
@@ -358,7 +385,7 @@
const currentItem = this.detailData[this.approveRowIndex] const currentItem = this.detailData[this.approveRowIndex]
row.currentItem = currentItem row.currentItem = currentItem
const prcType = this.detailData[index].prcType // 流程类型 const prcType = this.detailData[index].prcType || this.detailData[index].flowType // 流程类型
if (isEnd) { if (isEnd) {
if (this.$store.state.detailMap !== '') { if (this.$store.state.detailMap !== '') {
const lastDetailMap = this.$store.getters.getLastDetailMap const lastDetailMap = this.$store.getters.getLastDetailMap
@@ -1334,13 +1361,14 @@
processTable() { processTable() {
let url = '' let url = ''
let query = {} let query = {}
if (this.$route.query.oldAndNew == 'new'){ if (this.$route.query.oldAndNew == 'new' && this.$route.query.flowType == '3') {
url = '/lawss/activiti/queryFlowHistoryList' url = '/lawss/activiti/queryFlowHistoryList'
query = { query = {
actiProcInstId: this.$route.query.actiProcInstId, actiProcInstId: this.$route.query.actiProcInstId,
flowType: this.$route.query.flowType, flowType: this.$route.query.flowType,
} }
}else{ } else {
console.log(11111);
url = 'lawss/activiti/get_list_by_instance' url = 'lawss/activiti/get_list_by_instance'
query = { query = {
prcNum: this.$route.query.prcNum, prcNum: this.$route.query.prcNum,
@@ -1499,17 +1527,17 @@
return false return false
}, },
backdrop(status) { backdrop(status) {
if (status == 1) { if (status == 'done') {
return { return {
background: '#bcddff', background: '#bcddff',
border: '1px #79c8ff solid', border: '1px #79c8ff solid',
} }
} else if (status == 2) { } else if (status == 'todo') {
return { return {
background: '#ebfccf', background: '#ebfccf',
border: '1px #8bcb71 solid', border: '1px #8bcb71 solid',
} }
} else if (status == 3) { } else {
return { return {
background: '#fff', background: '#fff',
border: '1px #d6d6d6 solid', border: '1px #d6d6d6 solid',
@@ -1547,9 +1575,11 @@
} }
}, },
mounted() { mounted() {
if (this.$route.query.oldAndNew == 'new' && this.$route.query.flowType == '3'){
this.getProcessList() this.getProcessList()
this.processNum() }else{
this.processNum()
}
this.processTable() this.processTable()
this.getApproveShow() this.getApproveShow()
} }
@@ -1740,6 +1770,12 @@
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
line-height: 1.4; line-height: 1.4;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 超出几行省略 */
overflow: hidden;
} }
.flow-group-process-arrow-dis { .flow-group-process-arrow-dis {
@@ -240,7 +240,7 @@ export default {
}, },
dealWith (row) { // 查看 dealWith (row) { // 查看
let oldAndNew = '' let oldAndNew = ''
const currentDate = new Date().getTime(); const currentDate = new Date('2024-01-25 23:59:59').getTime();
const date = new Date(row.creatTime); const date = new Date(row.creatTime);
const timestamp = date.getTime(); const timestamp = date.getTime();
if (currentDate > timestamp){ if (currentDate > timestamp){
@@ -270,7 +270,7 @@ export default {
}, },
dealWith (row) { // 查看 dealWith (row) { // 查看
let oldAndNew = '' let oldAndNew = ''
const currentDate = new Date().getTime(); const currentDate = new Date('2024-01-25 23:59:59').getTime();
const date = new Date(row.creatTime); const date = new Date(row.creatTime);
const timestamp = date.getTime(); const timestamp = date.getTime();
if (currentDate > timestamp){ if (currentDate > timestamp){
@@ -243,7 +243,7 @@ export default {
}, },
dealWith (row) { // 查看 dealWith (row) { // 查看
let oldAndNew = '' let oldAndNew = ''
const currentDate = new Date().getTime(); const currentDate = new Date('2024-01-25 23:59:59').getTime();
const date = new Date(row.creatTime); const date = new Date(row.creatTime);
const timestamp = date.getTime(); const timestamp = date.getTime();
if (currentDate > timestamp){ if (currentDate > timestamp){