Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
8c9b315c by 杨威
Options

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

1 parent 7b990c04
Inline Side-by-side
Showing 3 changed files with 166 additions and 8 deletions
...@@ -51,3 +51,27 @@ let bdcLxArray = [ ...@@ -51,3 +51,27 @@ let bdcLxArray = [
51 }, 51 },
52 ]; 52 ];
53 createFilter("bdcLxFilter", bdcLxArray); 53 createFilter("bdcLxFilter", bdcLxArray);
54 //流程的环节状态过滤
55 let hjztArray = [
56 {
57 label: "未激活",
58 value: "1",
59 },
60 {
61 label: "激活",
62 value: "2",
63 },
64 {
65 label: "挂起",
66 value: "3",
67 },
68 {
69 label: "完成",
70 value: "4",
71 },
72 {
73 label: "终止",
74 value: "5",
75 },
76 ];
77 createFilter("hjztFilter", hjztArray);
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="flowBox"> 2 <div class="flowBox">
3 <div class="node-wrap"> 3 <div class="node-wrap">
4 <!-- <el-popover
5 placement="top-start"
6 width="400"
7 v-for="node in flowData.Nodes.ManualNode"
8 :key="node.id"
9 trigger="click">
10 <el-card class="box-card">
11 <div slot="header" class="clearfix">
12 <span>卡片名称</span>
13 <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
14 </div>
15 <div v-for="o in 4" :key="o" class="text item">
16 {{'列表内容 ' + o }}
17 </div>
18 </el-card>
19
20 <div class="node"
21 slot="reference"
22 :class="[
23 {'wjh' : node.activityState == 1},
24 {'jh' : node.activityState == 2 },
25 {'gq' : node.activityState == 3 },
26 {'wc' : node.activityState == 4 },
27 {'zz' : node.activityState == 5 }
28 ]"
29 >
30 {{node.name}}
31 </div>
32 </el-popover> -->
33
4 <div class="node" 34 <div class="node"
5 v-for="node in flowData.Nodes.ManualNode" 35 v-for="node in flowData.Nodes.ManualNode"
6 :key="node.id" 36 :key="node.id"
37 @click="nodeClick(node.name)"
7 :class="[ 38 :class="[
8 {'wjh' : node.activityState == 1}, 39 {'wjh' : node.activityState == 1},
9 {'jh' : node.activityState == 2 }, 40 {'jh' : node.activityState == 2 },
...@@ -45,7 +76,11 @@ export default { ...@@ -45,7 +76,11 @@ export default {
45 console.log(this.flowState,'flowState'); 76 console.log(this.flowState,'flowState');
46 }) 77 })
47 }, 78 },
48 methods:{}, 79 methods:{
80 nodeClick(name){
81 this.$parent.getCurNode(name)
82 }
83 },
49 computed: {}, 84 computed: {},
50 watch: {}, 85 watch: {},
51 } 86 }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <div 3 <div
4 class="flowContent" 4 class="flowContent"
5 > 5 >
6 <flowNode :flowData="flowData" :flowState="flowState" v-if="flowShow"></flowNode> 6 <flowNode :flowData="flowData" :flowState="flowState" @getCurNode="getCurNode" v-if="flowShow"></flowNode>
7 <ul class="legend"> 7 <ul class="legend">
8 <li><span class="circle wjh"></span><span class="name">未激活</span></li> 8 <li><span class="circle wjh"></span><span class="name">未激活</span></li>
9 <li><span class="circle jh"></span><span class="name">激活</span></li> 9 <li><span class="circle jh"></span><span class="name">激活</span></li>
...@@ -12,6 +12,38 @@ ...@@ -12,6 +12,38 @@
12 <li><span class="circle zz"></span><span class="name">终止</span></li> 12 <li><span class="circle zz"></span><span class="name">终止</span></li>
13 </ul> 13 </ul>
14 </div> 14 </div>
15 <div class="lcInfo">
16 <el-card class="box-card">
17 <div slot="header" class="clearfix">
18 <span>流程信息</span>
19 </div>
20 <ul>
21 <li>
22 <span>流程标题</span>
23 <span>{{lcInfo.processInstance.title}}</span>
24 </li>
25 <li>
26 <span>创建人</span>
27 <span>{{lcInfo.processInstance.creatorName}}</span>
28 </li>
29 </ul>
30 </el-card>
31 <el-card class="box-card">
32 <div slot="header" class="clearfix">
33 <span>环节信息</span>
34 </div>
35 <ul>
36 <li>
37 <span>环节名称</span>
38 <span>{{hjInfo.name}}</span>
39 </li>
40 <li>
41 <span>环节状态</span>
42 <span>{{hjInfo.activityState | hjztFilter}}</span>
43 </li>
44 </ul>
45 </el-card>
46 </div>
15 </div> 47 </div>
16 </template> 48 </template>
17 49
...@@ -26,7 +58,9 @@ export default { ...@@ -26,7 +58,9 @@ export default {
26 return { 58 return {
27 flowData:{}, 59 flowData:{},
28 flowShow:false, 60 flowShow:false,
29 flowState:[] 61 flowState:[],
62 lcInfo:{},
63 hjInfo:{}
30 } 64 }
31 }, 65 },
32 created() {}, 66 created() {},
...@@ -43,6 +77,7 @@ export default { ...@@ -43,6 +77,7 @@ export default {
43 vm.loadingShow('数据获取中'); 77 vm.loadingShow('数据获取中');
44 getActivityDetail(params).then((res) => { 78 getActivityDetail(params).then((res) => {
45 console.log(res.processInstance.templetId); 79 console.log(res.processInstance.templetId);
80 this.lcInfo = res;
46 templateLoad(res.processInstance.templetId).then((res1) => { 81 templateLoad(res.processInstance.templetId).then((res1) => {
47 console.log(this.$x2js.xml2js(res1).Process,'Process'); 82 console.log(this.$x2js.xml2js(res1).Process,'Process');
48 getProcessOutline(res.processInstance.id).then((res2) => { 83 getProcessOutline(res.processInstance.id).then((res2) => {
...@@ -53,8 +88,6 @@ export default { ...@@ -53,8 +88,6 @@ export default {
53 this.$nextTick(()=>{ 88 this.$nextTick(()=>{
54 this.flowData.Nodes.ManualNode.push(this.flowData.Nodes.EndNode); 89 this.flowData.Nodes.ManualNode.push(this.flowData.Nodes.EndNode);
55 this.flowData.Nodes.ManualNode.unshift(this.flowData.Nodes.StartNode); 90 this.flowData.Nodes.ManualNode.unshift(this.flowData.Nodes.StartNode);
56 // this.flowData.Nodes.StartNode.activityType = this.flowState.filter( i => i.activityTemplateId == this.flowData.Nodes.StartNode.id)[0].activityType;
57 // this.flowData.Nodes.EndNode.activityType = this.flowState.filter( i => i.activityTemplateId == this.flowData.Nodes.EndNode.id)[0].activityType;
58 this.flowData.Nodes.ManualNode.forEach(item => { 91 this.flowData.Nodes.ManualNode.forEach(item => {
59 item.activityState = this.flowState.filter( i => i.activityTemplateId == item.id)[0].activityState; 92 item.activityState = this.flowState.filter( i => i.activityTemplateId == item.id)[0].activityState;
60 }); 93 });
...@@ -65,10 +98,19 @@ export default { ...@@ -65,10 +98,19 @@ export default {
65 vm.loadingHide(); 98 vm.loadingHide();
66 }); 99 });
67 }) 100 })
68 .catch((error) => {}); 101 .catch((error) => {
102 vm.loadingHide();
103 });
69 }) 104 })
70 .catch((error) => {}); 105 .catch((error) => {
106 vm.loadingHide();
107 });
71 }, 108 },
109 //获取当前点击节点名称
110 getCurNode(name){
111 console.log(name);
112 this.hjInfo = this.flowState.filter( i=> i.name == name)[0]
113 }
72 }, 114 },
73 computed: {}, 115 computed: {},
74 watch: {}, 116 watch: {},
...@@ -77,11 +119,68 @@ export default { ...@@ -77,11 +119,68 @@ export default {
77 <style scoped lang="less"> 119 <style scoped lang="less">
78 .main { 120 .main {
79 position: relative; 121 position: relative;
122 background-color: #F4F9FF;
80 .flowContent { 123 .flowContent {
81 width: calc(100% + 6px); 124 width: calc(100% - 506px);
82 height: 100%; 125 height: 100%;
83 position: relative; 126 position: relative;
84 overflow-x: scroll; 127 overflow-x: scroll;
128 float: left;
129 }
130 .lcInfo{
131 width: 480px;
132 height: calc(100% - 6px);
133 margin-left: 20px;
134 background-color: #ffffff;
135 float: left;
136 border: 1px solid #D0D4D9;
137 box-shadow: 0 2px 15px 1px rgba(49, 132, 245, 0.1);
138 box-sizing: border-box;
139 padding: 18px;
140 .text {
141 font-size: 14px;
142 }
143
144 .item {
145 margin-bottom: 18px;
146 }
147 .clearfix:before,
148 .clearfix:after {
149 display: table;
150 content: "";
151 }
152 .clearfix:after {
153 clear: both
154 }
155
156 .box-card {
157 width: 100%;
158 margin-bottom: 20px;
159 ul{
160 border: 1px solid #DCDFE6;
161 li{
162 border-bottom: 1px solid #DCDFE6;
163 line-height: 50px;
164 height: 50px;
165 span{
166 display: inline-block;
167 }
168 span:first-child{
169 font-weight: bold;
170 text-indent: 10px;
171 float: left;
172 }
173 span:last-child{
174 color: #595959;
175 margin-right: 10px;
176 float: right;
177 }
178 }
179 li:last-child{
180 border-bottom: 0;
181 }
182 }
183 }
85 } 184 }
86 .legend{ 185 .legend{
87 position: absolute; 186 position: absolute;
......