8c9b315c by 杨威

流程信息和环节信息数据获取和处理

1 parent 7b990c04
......@@ -50,4 +50,28 @@ let bdcLxArray = [
value: "gzw",
},
];
createFilter("bdcLxFilter", bdcLxArray);
\ No newline at end of file
createFilter("bdcLxFilter", bdcLxArray);
//流程的环节状态过滤
let hjztArray = [
{
label: "未激活",
value: "1",
},
{
label: "激活",
value: "2",
},
{
label: "挂起",
value: "3",
},
{
label: "完成",
value: "4",
},
{
label: "终止",
value: "5",
},
];
createFilter("hjztFilter", hjztArray);
\ No newline at end of file
......
<template>
<div class="flowBox">
<div class="node-wrap">
<!-- <el-popover
placement="top-start"
width="400"
v-for="node in flowData.Nodes.ManualNode"
:key="node.id"
trigger="click">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
<div class="node"
slot="reference"
:class="[
{'wjh' : node.activityState == 1},
{'jh' : node.activityState == 2 },
{'gq' : node.activityState == 3 },
{'wc' : node.activityState == 4 },
{'zz' : node.activityState == 5 }
]"
>
{{node.name}}
</div>
</el-popover> -->
<div class="node"
v-for="node in flowData.Nodes.ManualNode"
:key="node.id"
@click="nodeClick(node.name)"
:class="[
{'wjh' : node.activityState == 1},
{'jh' : node.activityState == 2 },
......@@ -45,7 +76,11 @@ export default {
console.log(this.flowState,'flowState');
})
},
methods:{},
methods:{
nodeClick(name){
this.$parent.getCurNode(name)
}
},
computed: {},
watch: {},
}
......
......@@ -3,7 +3,7 @@
<div
class="flowContent"
>
<flowNode :flowData="flowData" :flowState="flowState" v-if="flowShow"></flowNode>
<flowNode :flowData="flowData" :flowState="flowState" @getCurNode="getCurNode" v-if="flowShow"></flowNode>
<ul class="legend">
<li><span class="circle wjh"></span><span class="name">未激活</span></li>
<li><span class="circle jh"></span><span class="name">激活</span></li>
......@@ -12,6 +12,38 @@
<li><span class="circle zz"></span><span class="name">终止</span></li>
</ul>
</div>
<div class="lcInfo">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>流程信息</span>
</div>
<ul>
<li>
<span>流程标题</span>
<span>{{lcInfo.processInstance.title}}</span>
</li>
<li>
<span>创建人</span>
<span>{{lcInfo.processInstance.creatorName}}</span>
</li>
</ul>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>环节信息</span>
</div>
<ul>
<li>
<span>环节名称</span>
<span>{{hjInfo.name}}</span>
</li>
<li>
<span>环节状态</span>
<span>{{hjInfo.activityState | hjztFilter}}</span>
</li>
</ul>
</el-card>
</div>
</div>
</template>
......@@ -26,7 +58,9 @@ export default {
return {
flowData:{},
flowShow:false,
flowState:[]
flowState:[],
lcInfo:{},
hjInfo:{}
}
},
created() {},
......@@ -43,6 +77,7 @@ export default {
vm.loadingShow('数据获取中');
getActivityDetail(params).then((res) => {
console.log(res.processInstance.templetId);
this.lcInfo = res;
templateLoad(res.processInstance.templetId).then((res1) => {
console.log(this.$x2js.xml2js(res1).Process,'Process');
getProcessOutline(res.processInstance.id).then((res2) => {
......@@ -53,8 +88,6 @@ export default {
this.$nextTick(()=>{
this.flowData.Nodes.ManualNode.push(this.flowData.Nodes.EndNode);
this.flowData.Nodes.ManualNode.unshift(this.flowData.Nodes.StartNode);
// this.flowData.Nodes.StartNode.activityType = this.flowState.filter( i => i.activityTemplateId == this.flowData.Nodes.StartNode.id)[0].activityType;
// this.flowData.Nodes.EndNode.activityType = this.flowState.filter( i => i.activityTemplateId == this.flowData.Nodes.EndNode.id)[0].activityType;
this.flowData.Nodes.ManualNode.forEach(item => {
item.activityState = this.flowState.filter( i => i.activityTemplateId == item.id)[0].activityState;
});
......@@ -65,10 +98,19 @@ export default {
vm.loadingHide();
});
})
.catch((error) => {});
.catch((error) => {
vm.loadingHide();
});
})
.catch((error) => {});
},
.catch((error) => {
vm.loadingHide();
});
},
//获取当前点击节点名称
getCurNode(name){
console.log(name);
this.hjInfo = this.flowState.filter( i=> i.name == name)[0]
}
},
computed: {},
watch: {},
......@@ -77,11 +119,68 @@ export default {
<style scoped lang="less">
.main {
position: relative;
background-color: #F4F9FF;
.flowContent {
width: calc(100% + 6px);
width: calc(100% - 506px);
height: 100%;
position: relative;
overflow-x: scroll;
overflow-x: scroll;
float: left;
}
.lcInfo{
width: 480px;
height: calc(100% - 6px);
margin-left: 20px;
background-color: #ffffff;
float: left;
border: 1px solid #D0D4D9;
box-shadow: 0 2px 15px 1px rgba(49, 132, 245, 0.1);
box-sizing: border-box;
padding: 18px;
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
margin-bottom: 20px;
ul{
border: 1px solid #DCDFE6;
li{
border-bottom: 1px solid #DCDFE6;
line-height: 50px;
height: 50px;
span{
display: inline-block;
}
span:first-child{
font-weight: bold;
text-indent: 10px;
float: left;
}
span:last-child{
color: #595959;
margin-right: 10px;
float: right;
}
}
li:last-child{
border-bottom: 0;
}
}
}
}
.legend{
position: absolute;
......