FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改流程详情

Browse Source
This commit is contained in:
范强强
2024-01-29 14:07:33 +08:00
parent a131f9bb7a
commit 7fc732afb3
5 changed files with 1781 additions and 1360 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/processCenter/pages/processDetail/index.vue
+392 -7
View File
@@ -9,7 +9,44 @@
<!-- <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 :src="processStep" class="process-img"> <img v-if="$route.query.oldAndNew == 'old'" :src="processStep" class="process-img">
<div v-else-if="$route.query.oldAndNew == 'new'" class="flow-group-process">
<div class="flow-group-process-stard">
开始
</div>
<div v-for="(item,index) in nameList"
:class="{'flow-group-process-box-one':arrangeFromTheLeft(index + 1)}"
class="flow-group-process-box">
<div v-if="leftArrow(index + 1)"
:class="{'flow-group-process-arrow-left':arrangeFromTheLeft(index + 1)}"
class="flow-group-process-arrow">
</div>
<div class="flow-group-process-content"
:style="backdrop(item.status)"
:class="{'flow-group-process-content-dis':!leftArrow(index + 1)}">
<div class="flow-group-process-content-top">
起草
</div>
<div class="flow-group-process-content-bottom">
{{item.name}}
</div>
</div>
<div v-if="isVerticalLine(index + 1)"
:class="{'flow-group-process-arrow-one':(index + 1) % num == 0 ? true : false}"
class="flow-group-process-arrow"></div>
<div v-if="!arrangeFromTheLeft(index + 1) && (index + 1) == nameList.length
&& (index + 1) % num != 0"
:class="{'flow-group-process-arrow-left':arrangeFromTheLeft(index + 1)}"
class="flow-group-process-arrow">
</div>
</div>
<div class="flow-group-process-end"
:style="backdrop(nameList[nameList.length - 1].status == 1 ? 1 : 3)"
:class="{'flow-group-process-end-left':isProcessEnd(nameList.length),
'flow-group-process-end-one':isProcessEndOne(nameList.length),}">
结束
</div>
</div>
</div> </div>
</div> </div>
<div class="action-bar"> <div class="action-bar">
@@ -155,12 +192,78 @@
import {mapMutations} from 'vuex' import {mapMutations} from 'vuex'
import {changeAssigneeNew} from 'api/process' import {changeAssigneeNew} from 'api/process'
import axios from 'axios' import axios from 'axios'
import * as echarts from 'echarts'
import eventBus from '@/common/eventHub' import eventBus from '@/common/eventHub'
export default { export default {
name: 'ProcessDetail', name: 'ProcessDetail',
data() { data() {
return { return {
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
@@ -192,10 +295,35 @@ export default {
value: '', value: '',
valueName: '' valueName: ''
}, },
excludeUser: this.$store.getters.userInfo.userId excludeUser: this.$store.getters.userInfo.userId,
num: 0,
} }
}, },
methods: { methods: {
getProcessList() {
let query = {
actiProcInstId:this.$route.query.actiProcInstId,
flowType:this.$route.query.flowType,
}
this.$http.get('/lawss/activiti/getImgDataList', query, {
loading: 'loading',
_this: this
}, res => {
// this.detailData = res
this.$nextTick(() => {
let flowGroupProcess = document.getElementsByClassName('flow-group-process')
let num = (flowGroupProcess[0].offsetWidth - 100) / 248
this.num = Math.floor(num)
let width = 248 * this.num
let offsetWidth = flowGroupProcess[0].offsetWidth
flowGroupProcess[0].style.width = (offsetWidth - (offsetWidth - 100 - width) + 40) + 'px'
console.log(offsetWidth);
console.log(flowGroupProcess);
})
}, e => {
})
},
checkedRole(data) { checkedRole(data) {
this.assigneeNewLoading = true this.assigneeNewLoading = true
changeAssigneeNew({ changeAssigneeNew({
@@ -1204,16 +1332,29 @@ export default {
}, },
// 请求列表 // 请求列表
processTable() { processTable() {
this.$http.get('lawss/activiti/get_list_by_instance', { let url = ''
let query = {}
if (this.$route.query.oldAndNew == 'new'){
url = '/lawss/activiti/queryFlowHistoryList'
query = {
actiProcInstId: this.$route.query.actiProcInstId,
flowType: this.$route.query.flowType,
}
}else{
url = 'lawss/activiti/get_list_by_instance'
query = {
prcNum: this.$route.query.prcNum, prcNum: this.$route.query.prcNum,
sortWord: this.shunxu ? this.paixu : '', sortWord: this.shunxu ? this.paixu : '',
shunxu: this.shunxu shunxu: this.shunxu
}, { }
}
this.$http.get(url, query, {
loading: 'loading', loading: 'loading',
_this: this _this: this
}, res => { }, res => {
this.detailData = res this.detailData = res
}, e => {}) }, e => {
})
}, },
...mapMutations(['setProcess', 'setHandleInfo', 'setPrcLastDetail']), ...mapMutations(['setProcess', 'setHandleInfo', 'setPrcLastDetail']),
processFlag(res) { processFlag(res) {
@@ -1294,11 +1435,90 @@ export default {
}, res => { }, res => {
this.approveShow = res[res.length - 1].isGather this.approveShow = res[res.length - 1].isGather
this.approveRowIndex = res[res.length - 1].index this.approveRowIndex = res[res.length - 1].index
}, e => {}) }, e => {
})
},
arrangeFromTheLeft(index) {
let num = Math.ceil(index / this.num)
if (num % 2 == 0) {
return true
}
return false
},
leftArrow(index) {
let num = Math.ceil(index / this.num)
if (num % 2 == 0) {
if (index == this.num * num && this.nameList.length != index) {
return false
}
} else {
if (index > this.num) {
if (index == this.num * (num - 1) + 1) {
return false
}
}
}
return true
},
isVerticalLine(index) {
let num = Math.ceil(index / this.num)
if (index % this.num == 0 && this.nameList.length != index) {
return true
}
if (num == index / this.num && num % 3 == 0) {
return true
}
if (num == index / this.num && index <= this.num) {
return true
}
return false
},
isProcessEnd(index) {
let num = Math.ceil(index / this.num)
if (num % 2 == 0) {
return false
} else {
if (num == index / this.num && index <= this.num) {
return false
}
if (num == index / this.num && num % 3 == 0) {
return false
}
return true
} }
}, },
components: { isProcessEndOne(index) {
let num = Math.ceil(index / this.num)
if (num == index / this.num && index <= this.num) {
return true
}
if (num == index / this.num && num % 3 == 0) {
return true
}
return false
}, },
backdrop(status) {
if (status == 1) {
return {
background: '#bcddff',
border: '1px #79c8ff solid',
}
} else if (status == 2) {
return {
background: '#ebfccf',
border: '1px #8bcb71 solid',
}
} else if (status == 3) {
return {
background: '#fff',
border: '1px #d6d6d6 solid',
}
}
},
},
components: {},
props: {}, props: {},
computed: { computed: {
listNoDataText() { listNoDataText() {
@@ -1327,6 +1547,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.getProcessList()
this.processNum() this.processNum()
this.processTable() this.processTable()
this.getApproveShow() this.getApproveShow()
@@ -1338,6 +1560,7 @@ export default {
//@import '~styles/mixins'; //@import '~styles/mixins';
#processDetails { #processDetails {
height: 100%; height: 100%;
.flow-chart { .flow-chart {
width: 100%; width: 100%;
height: 45%; height: 45%;
@@ -1347,12 +1570,14 @@ export default {
padding: 10px; padding: 10px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
.flow-header { .flow-header {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
//.flex(); //.flex();
align-items: center; align-items: center;
position: absolute; position: absolute;
.flow-chart-title { .flow-chart-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@@ -1360,15 +1585,175 @@ export default {
//.ellipsis(); //.ellipsis();
} }
} }
.flow-group { .flow-group {
width: 100%; width: 100%;
height: calc(~'100% - 30px'); height: calc(~'100% - 30px');
.process-img { .process-img {
//width: 100%; //width: 100%;
//height: 100%; //height: 100%;
} }
.flow-group-process {
width: 100%;
height: auto;
min-height: 100%;
padding: 20px;
box-sizing: border-box;
/*display: flex;*/
/*align-items: center;*/
/*flex-wrap: wrap;*/
.flow-group-process-stard {
width: 100px;
border-radius: 20px;
height: 40px;
background: #bcddff;
border: 1px #79c8ff solid;
font-size: 12px;
color: #000;
text-align: center;
line-height: 40px;
font-weight: 600;
float: inline-start;
margin-top: 18px;
}
.flow-group-process-end {
width: 100px;
border-radius: 20px;
height: 40px;
background: #bcddff;
border: 1px #79c8ff solid;
font-size: 12px;
color: #000;
text-align: center;
line-height: 40px;
font-weight: 600;
float: inline-end;
margin-top: 20px;
}
.flow-group-process-end-left {
float: inline-start;
}
.flow-group-process-end-one {
margin-top: 0;
margin-right: 17px;
}
.flow-group-process-arrow {
width: 100px;
height: 1px;
background: #c1c1c1;
margin-right: 8px;
}
.flow-group-process-arrow::after {
content: "";
display: inline-block;
position: relative;
left: 100px;
top: -7px;
border-left: 8px solid #c1c1c1;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.flow-group-process-arrow-one {
width: 30px;
height: 1px;
background: #c1c1c1;
margin-right: 8px;
transform: rotate(90deg);
right: 44px;
position: absolute;
bottom: -16px;
}
.flow-group-process-arrow-one::after {
content: "";
display: inline-block;
position: relative;
left: 30px;
top: -7px;
border-left: 8px solid #c1c1c1;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.flow-group-process-arrow-left {
width: 100px;
height: 1px;
background: #c1c1c1;
margin-right: 0;
margin-left: 8px;
}
.flow-group-process-arrow-left::after {
content: "";
display: inline-block;
position: relative;
left: -8px;
top: -7px;
border-right: 8px solid #c1c1c1;
border-left: none;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.flow-group-process-box {
display: flex;
align-items: center;
float: inline-start;
position: relative;
margin-bottom: 40px;
}
.flow-group-process-box-one {
float: inline-end;
}
.flow-group-process-content {
min-height: 80px;
width: 140px;
background: #bcddff;
border: 1px #79c8ff solid;
font-size: 12px;
color: #000;
text-align: center;
padding: 0 6px;
box-sizing: border-box;
font-weight: 600;
.flow-group-process-content-top {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 12px;
}
.flow-group-process-content-bottom {
width: 100%;
font-size: 12px;
line-height: 1.4;
}
.flow-group-process-arrow-dis {
margin-left: 200px;
} }
} }
.flow-group-process-content-dis {
margin-left: 208px;
}
}
}
}
.flow-list { .flow-list {
width: 100%; width: 100%;
height: calc(~'55% - 55px'); height: calc(~'55% - 55px');
src/pages/processCenter/pages/processList/tabComponents/alreadyProcess/index.vue
+13 -1
View File
@@ -239,11 +239,23 @@ export default {
this.queryProcess() this.queryProcess()
}, },
dealWith (row) { // 查看 dealWith (row) { // 查看
let oldAndNew = ''
const currentDate = new Date().getTime();
const date = new Date(row.creatTime);
const timestamp = date.getTime();
if (currentDate > timestamp){
oldAndNew = 'old'
}else{
oldAndNew = 'new'
}
const routeUrl = this.$router.resolve({ const routeUrl = this.$router.resolve({
name: 'ProcessDetail', name: 'ProcessDetail',
query: { query: {
prcNum: row.prcNum, prcNum: row.prcNum,
tabsName: 'AlreadyProcess' tabsName: 'AlreadyProcess',
actiProcInstId: row.prcId,
flowType: row.prcType,
oldAndNew:oldAndNew,
} }
}) })
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
src/pages/processCenter/pages/processList/tabComponents/alreadySend/index.vue
+13 -1
View File
@@ -269,11 +269,23 @@ export default {
this.queryProcess() this.queryProcess()
}, },
dealWith (row) { // 查看 dealWith (row) { // 查看
let oldAndNew = ''
const currentDate = new Date().getTime();
const date = new Date(row.creatTime);
const timestamp = date.getTime();
if (currentDate > timestamp){
oldAndNew = 'old'
}else{
oldAndNew = 'new'
}
const routeUrl = this.$router.resolve({ const routeUrl = this.$router.resolve({
name: 'ProcessDetail', name: 'ProcessDetail',
query: { query: {
prcNum: row.prcNum, prcNum: row.prcNum,
tabsName: 'AlreadySend' tabsName: 'AlreadySend',
actiProcInstId: row.prcId,
flowType: row.prcType,
oldAndNew:oldAndNew,
} }
}) })
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
src/pages/processCenter/pages/processList/tabComponents/monitorProcess/index.vue
+13 -1
View File
@@ -242,12 +242,24 @@ export default {
this.queryProcess() this.queryProcess()
}, },
dealWith (row) { // 查看 dealWith (row) { // 查看
let oldAndNew = ''
const currentDate = new Date().getTime();
const date = new Date(row.creatTime);
const timestamp = date.getTime();
if (currentDate > timestamp){
oldAndNew = 'old'
}else{
oldAndNew = 'new'
}
const routeUrl = this.$router.resolve({ const routeUrl = this.$router.resolve({
name: 'ProcessDetail', name: 'ProcessDetail',
query: { query: {
bpnId: row.id, bpnId: row.id,
prcNum: row.prcNum, prcNum: row.prcNum,
tabsName: 'MonitorProcess' tabsName: 'MonitorProcess',
actiProcInstId: row.prcId,
flowType: row.prcType,
oldAndNew:oldAndNew,
} }
}) })
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');