Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
4a719e5f by 杨威
Options

流程跟踪模块开发

1 parent 16496a0d
Inline Side-by-side
Showing 5 changed files with 146 additions and 11 deletions
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
37 "vue-router": "^3.4.9", 37 "vue-router": "^3.4.9",
38 "vuex": "^3.6.0", 38 "vuex": "^3.6.0",
39 "webpack-theme-color-replacer": "^1.3.14", 39 "webpack-theme-color-replacer": "^1.3.14",
40 "x2js": "^3.4.0",
40 "xlsx": "^0.16.9" 41 "xlsx": "^0.16.9"
41 }, 42 },
42 "devDependencies": { 43 "devDependencies": {
......
...@@ -78,4 +78,17 @@ export function templateLoad(data) { ...@@ -78,4 +78,17 @@ export function templateLoad(data) {
78 method: 'get', 78 method: 'get',
79 }) 79 })
80 } 80 }
81 /**
82 * 获取工作流大纲
83 */
84 export function getProcessOutline(data) {
85 return request({
86 url: '/workflow/getProcessOutline',
87 method: 'get',
88 params: {
89 processInstanceId:data,
90 isCurrent:true
91 }
92 })
93 }
81 94
......
1 <template> 1 <template>
2 <div class="flowBox"> 2 <div class="flowBox">
3 <div class="node" v-for="node in flowData.Process.Nodes.ManualNode" :key="node.id">{{node.name}}</div> 3 <div class="node-wrap">
4 <div class="node"
5 v-for="node in flowData.Nodes.ManualNode"
6 :key="node.id"
7 :class="[
8 {'wjh' : node.activityState == 1},
9 {'jh' : node.activityState == 2 },
10 {'gq' : node.activityState == 3 },
11 {'wc' : node.activityState == 4 },
12 {'zz' : node.activityState == 5 }
13 ]"
14 >
15 {{node.name}}
16 </div>
17 </div>
4 </div> 18 </div>
5 </template> 19 </template>
6 20
...@@ -12,7 +26,13 @@ export default { ...@@ -12,7 +26,13 @@ export default {
12 flowData:{ 26 flowData:{
13 type:Object, 27 type:Object,
14 default:null 28 default:null
15 } 29 },
30 flowState:{
31 type:Array,
32 default: () => {
33 return [];
34 },
35 },
16 }, 36 },
17 data(){ 37 data(){
18 return { 38 return {
...@@ -22,8 +42,8 @@ export default { ...@@ -22,8 +42,8 @@ export default {
22 mounted(){ 42 mounted(){
23 this.$nextTick(()=>{ 43 this.$nextTick(()=>{
24 console.log(this.flowData,'flowData.Nodes'); 44 console.log(this.flowData,'flowData.Nodes');
45 console.log(this.flowState,'flowState');
25 }) 46 })
26
27 }, 47 },
28 methods:{}, 48 methods:{},
29 computed: {}, 49 computed: {},
...@@ -33,7 +53,8 @@ export default { ...@@ -33,7 +53,8 @@ export default {
33 <style scoped lang="less"> 53 <style scoped lang="less">
34 .flowBox{ 54 .flowBox{
35 width: 150%; 55 width: 150%;
36 height: 100%; 56 height: 100%;
57 position: relative;
37 // 网格背景 58 // 网格背景
38 background-image: -webkit-gradient( 59 background-image: -webkit-gradient(
39 linear, 60 linear,
...@@ -49,6 +70,49 @@ export default { ...@@ -49,6 +70,49 @@ export default {
49 rgba(0, 0, 0, 0) 10% 70 rgba(0, 0, 0, 0) 10%
50 ), 71 ),
51 linear-gradient(rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); 72 linear-gradient(rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
52 background-size: 10px 10px; 73 background-size: 10px 10px;
74 .node-wrap{
75 position: absolute;
76 top: 50%;
77 left: 20px;
78 .node{
79 display: inline-block;
80 min-width: 80px;
81 line-height: 30px;
82 background-color: #A9A9A9;
83 text-align: center;
84 border-radius: 6px;
85 margin-right: 50px;
86 position: relative;
87 color: #ffffff;
88 }
89 .node::after{
90 content: "";
91 position: absolute;
92 width: 50px;
93 height: 30px;
94 left: 100%;
95 background-image: url("../../../assets/images/arrow.jpg");
96 background-size: 50px 30px;
97 }
98 .node:last-child:after{
99 display: none;
100 }
101 .wjh{
102 background-color: #A9A9A9;
103 }
104 .jh{
105 background-color: #449D44;
106 }
107 .gq{
108 background-color: #F0AD4E;
109 }
110 .wc{
111 background-color: #5BC0DE;
112 }
113 .zz{
114 background-color: #F13F2F;
115 }
116 }
53 } 117 }
54 </style> 118 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,13 +3,20 @@ ...@@ -3,13 +3,20 @@
3 <div 3 <div
4 class="flowContent" 4 class="flowContent"
5 > 5 >
6 <flowNode :flowData="flowData"></flowNode> 6 <flowNode :flowData="flowData" :flowState="flowState" v-if="flowShow"></flowNode>
7 <ul class="legend">
8 <li><span class="circle wjh"></span><span class="name">未激活</span></li>
9 <li><span class="circle jh"></span><span class="name">激活</span></li>
10 <li><span class="circle gq"></span><span class="name">挂起</span></li>
11 <li><span class="circle wc"></span><span class="name">完成</span></li>
12 <li><span class="circle zz"></span><span class="name">终止</span></li>
13 </ul>
7 </div> 14 </div>
8 </div> 15 </div>
9 </template> 16 </template>
10 17
11 <script> 18 <script>
12 import { getActivityDetail,templateLoad } from "@api/user"; 19 import { getActivityDetail,templateLoad,getProcessOutline } from "@api/user";
13 import flowNode from "./flownode" 20 import flowNode from "./flownode"
14 export default { 21 export default {
15 name: "", 22 name: "",
...@@ -19,6 +26,7 @@ export default { ...@@ -19,6 +26,7 @@ export default {
19 return { 26 return {
20 flowData:{}, 27 flowData:{},
21 flowShow:false, 28 flowShow:false,
29 flowState:[]
22 } 30 }
23 }, 31 },
24 created() {}, 32 created() {},
...@@ -34,12 +42,27 @@ export default { ...@@ -34,12 +42,27 @@ export default {
34 } 42 }
35 getActivityDetail(params).then((res) => { 43 getActivityDetail(params).then((res) => {
36 console.log(res.processInstance.templetId); 44 console.log(res.processInstance.templetId);
37 templateLoad(res.processInstance.templetId).then((res) => { 45 templateLoad(res.processInstance.templetId).then((res1) => {
38 console.log(this.$x2js.xml2js(res)); 46 console.log(this.$x2js.xml2js(res1).Process,'Process');
39 this.flowData = this.$x2js.xml2js(res); 47 getProcessOutline(res.processInstance.id).then((res2) => {
48 this.flowData = this.$x2js.xml2js(res1).Process;
49 console.log(res2.activityOutlines,'res.activityOutlines');
50 this.flowState = res2.activityOutlines;
51 this.$nextTick(()=>{
52 this.flowData.Nodes.ManualNode.push(this.flowData.Nodes.EndNode);
53 this.flowData.Nodes.ManualNode.unshift(this.flowData.Nodes.StartNode);
54 // this.flowData.Nodes.StartNode.activityType = this.flowState.filter( i => i.activityTemplateId == this.flowData.Nodes.StartNode.id)[0].activityType;
55 // this.flowData.Nodes.EndNode.activityType = this.flowState.filter( i => i.activityTemplateId == this.flowData.Nodes.EndNode.id)[0].activityType;
56 this.flowData.Nodes.ManualNode.forEach(item => {
57 item.activityState = this.flowState.filter( i => i.activityTemplateId == item.id)[0].activityState;
58 });
59 this.flowShow = true;
60 })
61 })
62 .catch((error) => {});
40 }) 63 })
41 .catch((error) => {}); 64 .catch((error) => {});
42 }) 65 })
43 .catch((error) => {}); 66 .catch((error) => {});
44 }, 67 },
45 }, 68 },
...@@ -49,11 +72,45 @@ export default { ...@@ -49,11 +72,45 @@ export default {
49 </script> 72 </script>
50 <style scoped lang="less"> 73 <style scoped lang="less">
51 .main { 74 .main {
75 position: relative;
52 .flowContent { 76 .flowContent {
53 width: calc(100% + 6px); 77 width: calc(100% + 6px);
54 height: 100%; 78 height: 100%;
55 position: relative; 79 position: relative;
56 overflow-x: scroll; 80 overflow-x: scroll;
57 } 81 }
82 .legend{
83 position: absolute;
84 top: 20px;
85 right: 20px;
86 li{
87 margin-bottom: 10px;
88 .circle{
89 display: inline-block;
90 width: 12px;
91 height: 12px;
92 border-radius: 6px;
93 }
94 .name{
95 margin-left: 10px;
96 font-weight: bold;
97 }
98 .wjh{
99 background-color: #A9A9A9;
100 }
101 .jh{
102 background-color: #449D44;
103 }
104 .gq{
105 background-color: #F0AD4E;
106 }
107 .wc{
108 background-color: #5BC0DE;
109 }
110 .zz{
111 background-color: #F13F2F;
112 }
113 }
114 }
58 } 115 }
59 </style> 116 </style>
......