1515-->
1616<template >
1717 <el-container style =" height : 100% !important ;" >
18- <el-header class =" header" :style =" !collapse ? 'height: 35% !important;' : 'height: 10%!important'" >
18+ <el-header id = " WorkflowActivity " class =" header" :style =" !collapse ? 'height: 35% !important;' : 'height: 10%!important'" >
1919 <el-card :style =" !collapse ? 'height: 100% !important;' : 'height: auto'" >
2020 <div slot =" header" >
2121 <span > {{ $t('form.activity.title') }} </span >
2222 <el-button style =" float : right ; padding : 3px 0 " type =" text" :icon =" collapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click =" collapse = !collapse" />
2323 </div >
2424 <el-table
2525 v-show =" !collapse"
26- ref =" WorkflowActivity"
2726 v-loading =" isEmptyValue(activityList)"
2827 :data =" activityList"
2928 highlight-current-row
4443 </el-card >
4544 </el-header >
4645 <el-main class =" main" >
47- <transition name =" el-zoom-in-center" >
48- <el-card v-show =" show" :style =" {position: 'absolute', zIndex: '5', left: leftContextualMenu + 'px', top: topContextualMenu + 'px'}" class =" box-card" >
49- <div slot =" header" class =" clearfix" >
50- <span >
51- <b > {{ infoNode.name }} </b >
52- </span >
53- <el-button style =" float : right ; padding : 3px 0 " type =" text" icon =" el-icon-close" @click =" show = !show" />
54- </div >
55- <div class =" text item" style =" padding : 20px " >
56- <el-timeline class =" info" >
57- <el-timeline-item :timestamp =" currentWorkflow.created" placement =" top" >
58- <el-card style =" padding : 20px !important ;" >
59- <b > Usuario: </b > {{ currentWorkflow.user_name }} <br >
60- <b > {{ $t('table.ProcessActivity.Description') }}: </b > {{ infoNode.description }}
61- </el-card >
62- </el-timeline-item >
63- </el-timeline >
64- </div >
65- </el-card >
66- </transition >
67- <workflow-chart
68- v-if =" !isEmptyValue(node) && !isEmptyValue(currentWorkflow)"
69- :transitions =" listWorkflowTransition"
70- :states =" node"
71- :state-semantics =" currentNode"
72- @state-click =" onLabelClicked(node, $event)"
73- />
74- <el-scrollbar v-if =" !isEmptyValue(currentWorkflow)" wrap-class =" scroll-child" >
75- <el-timeline class =" info" >
76- <el-timeline-item
77- v-for =" (nodes, key) in currentWorkflow.workflow_process.workflow_events"
78- :key =" key"
79- :timestamp =" translateDate(nodes.log_date)"
80- placement =" top"
81- >
82- <b > {{ nodes.node_name }} </b > {{ nodes.text_message }}
83- </el-timeline-item >
84- </el-timeline >
85- </el-scrollbar >
46+ <el-container style =" height : 100% ;" >
47+ <el-aside v-if =" !isEmptyValue(currentActivity)" width =" 70%" style =" background : white ;" >
48+ <transition name =" el-zoom-in-center" >
49+ <el-card v-show =" show" :style =" {position: 'absolute', zIndex: '5', left: leftContextualMenu + 'px', top: topContextualMenu + 'px'}" class =" box-card" >
50+ <div slot =" header" class =" clearfix" >
51+ <span >
52+ {{ infoNode.description }}
53+ </span >
54+ <el-button style =" float : right ; padding : 3px 0 " type =" text" icon =" el-icon-close" @click =" show = !show" />
55+ </div >
56+ <div v-if =" !isEmptyValue(infoNode.nodeLogs)" class =" text item" style =" padding : 20px " >
57+ <el-timeline class =" info" >
58+ <el-timeline-item
59+ v-for =" (logs, key) in infoNode.nodeLogs"
60+ :key =" key"
61+ :timestamp =" translateDate(logs.log_date)"
62+ placement =" top"
63+ >
64+ <el-card style =" padding : 20px !important ;" >
65+ <b > {{ $t('login.userName') }} </b > {{ logs.user_name }} <br >
66+ {{ logs.text_message }}
67+ </el-card >
68+ </el-timeline-item >
69+ </el-timeline >
70+ </div >
71+ </el-card >
72+ </transition >
73+ <workflow-chart
74+ v-if =" !isEmptyValue(node) && !isEmptyValue(currentActivity)"
75+ :transitions =" listWorkflowTransition"
76+ :states =" node"
77+ :state-semantics =" currentNode"
78+ @state-click =" onLabelClicked(node, $event)"
79+ />
80+ </el-aside >
81+ <el-main v-if =" !isEmptyValue(currentActivity)" >
82+ <el-card class =" box-card" >
83+ <div slot =" header" class =" clearfix" >
84+ {{ $t('field.logsField') }}
85+ </div >
86+ <el-scrollbar v-if =" !isEmptyValue(currentActivity)" wrap-class =" scroll-child" >
87+ <el-timeline class =" info" >
88+ <el-timeline-item
89+ v-for =" (nodes, key) in listProcessWorkflow"
90+ :key =" key"
91+ :timestamp =" translateDate(nodes.log_date)"
92+ placement =" top"
93+ >
94+ <b > {{ nodes.node_name }} </b > {{ nodes.text_message }}
95+ </el-timeline-item >
96+ </el-timeline >
97+ </el-scrollbar >
98+ </el-card >
99+ </el-main >
100+ </el-container >
86101 </el-main >
87102 <el-footer :class =" styleFooter" >
88103 <el-card shadow =" hover" class =" search" >
@@ -138,18 +153,20 @@ export default {
138153 topContextualMenu: 0 ,
139154 leftContextualMenu: 0 ,
140155 infoNode: {},
156+ visible: false ,
141157 show: false ,
142158 collapse: false ,
143159 currentNode: [{
144160 classname: ' delete' ,
145161 id: ' '
146162 }],
147163 currentWorkflow: {},
164+ listProcessWorkflow: [],
148165 listWorkflowTransition: [],
149166 orderLineDefinition: [
150167 {
151168 columnName: ' workflow.name' ,
152- name: ' Nombre ' ,
169+ name: this . $t ( ' table.ProcessActivity.Name ' ) ,
153170 isNumeric: false
154171 },
155172 {
@@ -159,7 +176,7 @@ export default {
159176 },
160177 {
161178 columnName: ' node.description' ,
162- name: ' Descripcion ' ,
179+ name: this . $t ( ' table.ProcessActivity.Description ' ) ,
163180 isNumeric: false
164181 }
165182 ]
@@ -184,23 +201,37 @@ export default {
184201 return this .$store .getters .getCurrentActivity
185202 }
186203 },
204+ watch: {
205+ activityList (list ) {
206+ this .SendActivityListNotifier (list)
207+ },
208+ currentActivity (value ) {
209+ this .listWorkflow (value)
210+ this .setCurrent ()
211+ }
212+ },
187213 mounted () {
188214 this .$store .dispatch (' serverListActivity' )
189215 if (! this .isEmptyValue (this .currentActivity )) {
190- this .setCurrent ( )
216+ this .listWorkflow ( this . currentActivity )
191217 }
192218 },
193219 methods: {
220+ SendActivityListNotifier () {
221+ this .$store .commit (' addNotificationProcess' , { name: this .$t (' navbar.badge.activity' ) + ' ' + this .activityList .length , typeActivity: true })
222+ },
194223 setCurrent () {
195224 const activity = this .activityList .find (activity => activity .node === this .currentActivity .node )
196225 this .$refs .WorkflowActivity .setCurrentRow (activity)
197226 },
198227 handleCurrentChange (activity ) {
199- this .listWorkflow (activity)
200228 this .$store .dispatch (' selectedActivity' , activity)
201229 },
202230 onLabelClicked (type , id ) {
231+ this .visible = true
203232 this .infoNode = type .find (node => node .id === id)
233+ const nodeLogs = this .listProcessWorkflow .filter (node => node .node_uuid === this .infoNode .uuid )
234+ this .infoNode .nodeLogs = nodeLogs
204235 const menuMinWidth = 105
205236 const offsetLeft = this .$el .getBoundingClientRect ().left // container margin left
206237 const offsetWidth = this .$el .offsetWidth // container width
@@ -223,6 +254,7 @@ export default {
223254 listWorkflow (activity ) {
224255 // Highlight Current Node
225256 this .currentWorkflow = activity
257+ this .listProcessWorkflow = ! this .isEmptyValue (this .currentWorkflow .workflow_process ) ? this .currentWorkflow .workflow_process .workflow_events .reverse () : []
226258 this .transitions = []
227259 if (! this .isEmptyValue (activity .node .uuid )) {
228260 this .currentNode = [{
@@ -337,7 +369,7 @@ export default {
337369 margin : 0px ;
338370 font-size : 14px ;
339371 list-style : none ;
340- padding : 0 px ;
372+ padding : 10 px ;
341373}
342374.vue-workflow-chart-state {
343375 background-color : #fff ;
@@ -360,6 +392,9 @@ export default {
360392 }
361393 </style >
362394<style lang='scss'>
395+ .scroll-child {
396+ max-height : 450px ;
397+ }
363398.el-card {
364399 border-radius : 4px ;
365400 border : 1px solid #e6ebf5 ;
0 commit comments