fix: Multiple requests block the browser. (#313)

src/api/ADempiere/data.js

@@ -78,7 +78,7 @@ export function getEntity({ tableName, recordId, recordUuid }) {
  * @param {string} whereClause
  * @param {array}  conditionsList
  * @param {string} orderByClause
- * @param {string} nextPageToken
+ * @param {string} pageToken
  */
 export function getEntitiesList({
   tableName,
@@ -86,7 +86,7 @@ export function getEntitiesList({
   whereClause,
   conditionsList = [],
   orderByClause,
-  nextPageToken: pageToken,
+  pageToken,
   pageSize
 }) {
   return Instance.call(this).requestListEntities({

src/components/ADempiere/DataTable/index.vue

@@ -304,19 +304,21 @@ export default {
     }
   },
   data() {
+    const activeName = []
+    if (this.$route.query.action) {
+      activeName.push('1')
+    }
     return {
       top: 0,
       left: 0,
       isOption: {},
-      focusTable: false,
       currentRow: null,
       currentTable: 0,
       visible: this.getShowContextMenuTable,
       searchTable: '', // text from search
       defaultMaxPagination: 50,
       menuTable: '1',
-      activeName: this.$route.query.action === 'advancedQuery' ? ['1'] : [],
+      activeName,
-      isFixed: false,
       isLoadPanelFromServer: false,
       rowStyle: { height: '52px' },
       sortable: null,
@@ -552,11 +554,11 @@ export default {
   },
   methods: {
     actionAdvancedQuery() {
-      if (this.activeName.length) {
+      const activeNames = []
-        this.activeName = []
+      if (!this.activeName.length) {
-      } else {
+        activeNames.push('1')
-        this.activeName = ['1']
       }
+      this.activeName = activeNames
     },
     setCurrent(row) {
       this.$refs.multipleTable.setCurrentRow(row)
@@ -625,9 +627,6 @@ export default {
       })
     },
     sortFields,
-    handleChange(val) {
-      val = !val
-    },
     headerLabel(field) {
       if (field.isMandatory || field.isMandatoryFromLogic) {
         return '* ' + field.name
@@ -763,10 +762,6 @@ export default {
         })
       }
     },
-    fixedPanel() {
-      this.showTableSearch = false
-      this.isFixed = !this.isFixed
-    },
     async getList() {
       this.oldgetDataDetail = this.getterDataRecords.map(v => v.id)
       this.newgetDataDetail = this.oldgetDataDetail.slice()
@@ -807,7 +802,7 @@ export default {
         classReturn += 'cell-no-edit'
       }
       if (field.componentPath === 'FieldNumber') {
-        classReturn += 'cell-align-right'
+        classReturn += ' cell-align-right'
       }
       // return 'cell-edit'
       return classReturn

src/components/ADempiere/Field/FieldMixin.js

@@ -71,7 +71,6 @@ export const fieldMixin = {
         isSendCallout = false
       }
       if (this.metadata.isAdvancedQuery) {
-        isSendToServer = false
         isSendCallout = false
       }
 

src/components/ADempiere/Field/FieldSelect.vue

@@ -136,14 +136,17 @@ export default {
     },
     'metadata.value'(value) {
       if (!this.metadata.inTable) {
+        if (this.metadata.displayed) {
           if (!this.options.some(option => option.key === value)) {
             this.value = value
             this.getDataLookupItem()
           }
+        }
         this.value = value
       }
     },
     'metadata.displayColumn'(value) {
+      if (this.metadata.displayed) {
         if (!this.isEmptyValue(this.value)) {
           if (!this.isEmptyValue(value)) {
             // verify if exists to add
@@ -156,8 +159,10 @@ export default {
           }
         }
       }
+    }
   },
   beforeMount() {
+    if (this.metadata.displayed) {
       this.options = this.getterLookupAll
       if (!this.isEmptyValue(this.value) && this.metadata.panelType !== 'table') {
         if (!this.findLabel(this.value)) {
@@ -175,6 +180,7 @@ export default {
           }
         }
       }
+    }
   },
   methods: {
     preHandleChange(value) {

src/components/ADempiere/Field/FieldYesNo.vue

@@ -4,8 +4,8 @@
     v-model="value"
     :inactive-text="$t('components.switchInactiveText')"
     :active-text="$t('components.switchActiveText')"
-    true-value="true"
+    :true-value="true"
-    false-value="false"
+    :false-value="false"
     :disabled="isDisabled"
     @change="preHandleChange"
   />
@@ -42,6 +42,9 @@ export default {
     },
     value(value, oldValue) {
       if (typeof value !== 'boolean') {
+        if (value === 'N' || value === 'n') {
+          value = false
+        }
         this.value = Boolean(value)
       }
       this.preHandleChange('NotSend')
@@ -58,16 +61,21 @@ export default {
       }
     },
     isReadOnlyForm(value) {
-      var fieldReadOnlyForm = FIELD_READ_ONLY_FORM.find(item => item.columnName === this.metadata.columnName)
+      const fieldReadOnlyForm = FIELD_READ_ONLY_FORM.find(item => item.columnName === this.metadata.columnName)
       // columnName: IsActive, Processed, Processing
       if (fieldReadOnlyForm && fieldIsDisplayed(this.metadata)) {
+        const fieldsExcludes = []
+        // if isChangedAllForm it does not exclude anything, otherwise it excludes this columnName
+        if (fieldReadOnlyForm.isChangedAllForm) {
+          fieldsExcludes.push(this.metadata.columnName)
+        }
+
         this.$store.dispatch('changeFieldAttributesBoolean', {
           containerUuid: this.metadata.containerUuid,
           fieldsIncludes: [],
           attribute: 'isReadOnlyFromForm',
           valueAttribute: Boolean(fieldReadOnlyForm.valueIsReadOnlyForm !== value),
-          // if isChangedAllForm it does not exclude anything, otherwise it excludes this columnName
+          fieldsExcludes,
-          fieldsExcludes: fieldReadOnlyForm.isChangedAllForm ? [] : [this.metadata.columnName],
           currenValue: value
         })
       }

src/components/ADempiere/Field/index.vue

@@ -278,10 +278,13 @@ export default {
         }
 
         // edit mode is diferent to create new
-        const editMode = (!this.inTable && this.field.optionCRUD !== 'create-new') || (this.inTable && !this.isEmptyValue(this.field.recordUuid))
+        let isWithRecord = this.field.optionCRUD !== 'create-new'
-        return (!this.field.isUpdateable && editMode) || (isUpdateableAllFields || this.field.isReadOnlyFromForm)
+        if (this.inTable) {
+          isWithRecord = !this.isEmptyValue(this.field.recordUuid)
         }
-      if (this.panelType === 'browser') {
+
+        return (!this.field.isUpdateable && isWithRecord) || (isUpdateableAllFields || this.field.isReadOnlyFromForm)
+      } else if (this.panelType === 'browser') {
         if (this.inTable) {
           // browser result
           return this.field.isReadOnly

src/components/ADempiere/Panel/index.vue

@@ -53,9 +53,10 @@
           </div>
         </div>
       </template>
-      <div :class="cards()">
+      <div :class="classCards">
         <draggable
           v-if="!isMobile"
+          key="draggable-loaded"
           :list="fieldGroups"
           v-bind="$attrs"
           :set-data="setData"
@@ -283,12 +284,20 @@ export default {
         }
       }
       return false
+    },
+    classCards() {
+      if (this.isMobile || this.fieldGroups.length < 2 || this.getterIsShowedRecordNavigation) {
+        return 'cards-not-group'
+      }
+      return 'cards-in-group'
     }
   },
   watch: {
     // used only panel modal (process associated in browser or window)
     containerUuid() {
+      if (['report', 'process'].includes(this.panelType)) {
         this.generatePanel(this.metadata.fieldList)
+      }
     },
     // used if the first load contains a uuid
     isLoadRecord(value) {
@@ -317,12 +326,6 @@ export default {
     this.getPanel()
   },
   methods: {
-    cards() {
-      if (this.isMobile || this.fieldGroups.length < 2 || this.getterIsShowedRecordNavigation) {
-        return 'cards-not-group'
-      }
-      return 'cards-in-group'
-    },
     /**
      * Get the tab object with all its attributes as well as the fields it contains
      */
@@ -564,31 +567,31 @@ export default {
     /**
      * Group the arrangement into groups of columns that they contain, it must
      * be grouped after having the order
-     * @param {array} array
+     * @param {array} fieldsList
-     * @return {array} res
+     * @return {array} groupsList
      */
-    sortAndGroup(arr) {
+    sortAndGroup(fieldsList) {
-      if (arr === undefined) {
+      if (this.isEmptyValue(fieldsList)) {
         return
       }
-      let res = [{
+      let groupsList = [{
         groupFinal: '',
-        metadataFields: arr
+        metadataFields: fieldsList
       }]
 
       // reduce, create array with number groupAssigned element comun
       if (this.isPanelWindow) {
-        res = arr
+        groupsList = fieldsList
-          .reduce((res, currentValue) => {
+          .reduce((groupsList, currentValue) => {
-            if (!res.includes(currentValue.groupAssigned)) {
+            if (!groupsList.includes(currentValue.groupAssigned)) {
-              res.push(currentValue.groupAssigned)
+              groupsList.push(currentValue.groupAssigned)
             }
-            return res
+            return groupsList
           }, [])
           .map(itemGroup => {
             return {
               groupFinal: itemGroup,
-              metadataFields: arr.filter(itemField => {
+              metadataFields: fieldsList.filter(itemField => {
                 return itemField.groupAssigned === itemGroup
               })
             }
@@ -596,26 +599,21 @@ export default {
       }
 
       // count and add the field numbers according to your group
-      Object.keys(res).forEach(key => {
+      groupsList.forEach(groupFields => {
-        let count = 0
+        const typeG = groupFields.metadataFields[0].typeGroupAssigned
-        const typeG = res[key].metadataFields[0].typeGroupAssigned
+        groupFields.typeGroup = typeG
-        res[key].numberFields = res[key].metadataFields.length
-        res[key].typeGroup = typeG
-        res[key].numberFields = res[key].metadataFields.length
 
-        res[key].metadataFields.forEach((element, index) => {
+        const fieldsDisplayed = groupFields.metadataFields.filter(field => {
-          if (element.isDisplayed) {
+          return fieldIsDisplayed(field)
-            count++
-          }
         })
 
-        if ((this.groupTab.groupType === 'T' && this.groupTab.groupName === res[key].groupFinal) ||
+        if ((this.groupTab.groupType === 'T' && this.groupTab.groupName === groupFields.groupFinal) ||
-          (this.groupTab.groupType !== 'T' && res[key].typeGroup !== 'T')) {
+          (this.groupTab.groupType !== 'T' && groupFields.typeGroup !== 'T')) {
           this.groupsView = this.groupsView + 1
         }
-        res[key].activeFields = count
+        groupFields.activeFields = fieldsDisplayed.length
       })
-      return res
+      return groupsList
     },
     setTagsViewTitle(actionValue) {
       if (actionValue === 'create-new' || actionValue === '') {
@@ -623,7 +621,7 @@ export default {
       } else if (actionValue === 'advancedQuery') {
         this.tagTitle.action = this.$t('tagsView.advancedQuery')
       } else {
-        var field = this.fieldList.find(fieldItem => fieldItem.isIdentifier)
+        const field = this.fieldList.find(fieldItem => fieldItem.isIdentifier)
         if (field) {
           if (this.dataRecords[field.columnName]) {
             this.tagTitle.action = this.dataRecords[field.columnName]
@@ -635,7 +633,7 @@ export default {
         }
       }
       if (this.isPanelWindow) {
-        var tempRoute = Object.assign({}, this.$route, { title: `${this.tagTitle.base} - ${this.tagTitle.action}` })
+        const tempRoute = Object.assign({}, this.$route, { title: `${this.tagTitle.base} - ${this.tagTitle.action}` })
         this.$store.dispatch('tagsView/updateVisitedView', tempRoute)
       }
     },
@@ -645,8 +643,8 @@ export default {
       dataTransfer.setData('Text', '')
     },
     changePanelRecord(uuidRecord) {
-      if (uuidRecord !== 'create-new' && uuidRecord !== 'reference' && uuidRecord !== 'advancedQuery' && uuidRecord !== 'criteria') {
+      if (!['create-new', 'reference', 'advancedQuery', 'criteria'].includes(uuidRecord)) {
-        var recordSelected = this.$store.getters.getDataRecordsList(this.containerUuid).find(record => record.UUID === uuidRecord)
+        const recordSelected = this.$store.getters.getDataRecordsList(this.containerUuid).find(record => record.UUID === uuidRecord)
         if (recordSelected) {
           this.dataRecords = recordSelected
           this.$store.dispatch('notifyPanelChange', {

src/store/modules/ADempiere/data.js

@@ -498,7 +498,7 @@ const data = {
         whereClause,
         conditionsList,
         orderByClause,
-        nextPageToken
+        pageToken: nextPageToken
       })
         .then(dataResponse => {
           const recordsList = dataResponse.recordsList.map(itemRecord => {

src/store/modules/ADempiere/panel.js

@@ -24,18 +24,10 @@ const panel = {
       payload.panel = payload.newPanel
     },
     changeFieldLogic(state, payload) {
-      if (payload.isDisplayedFromLogic !== undefined) {
+      payload.field.isDisplayedFromLogic = Boolean(payload.isDisplayedFromLogic)
-        payload.field.isDisplayedFromLogic = payload.isDisplayedFromLogic
+      payload.field.isMandatoryFromLogic = Boolean(payload.isMandatoryFromLogic)
-      }
+      payload.field.isReportFromLogic = Boolean(payload.isReportFromLogic)
-      if (payload.isMandatoryFromLogic !== undefined) {
-        payload.field.isMandatoryFromLogic = payload.isMandatoryFromLogic
-      }
-      if (payload.isReportFromLogic !== undefined) {
-        payload.field.isReportFromLogic = payload.isReportFromLogic
-      }
-      if (payload.parsedDefaultValue !== undefined) {
       payload.field.parsedDefaultValue = payload.parsedDefaultValue
-      }
     },
     dictionaryResetCache(state) {
       state.panel = []
@@ -550,8 +542,57 @@ const panel = {
       }
 
       if (isSendToServer) {
+        if (panelType === 'table' || isAdvancedQuery) {
+          if (field.isShowedFromUser && (field.oldValue !== field.value ||
+            ['NULL', 'NOT_NULL'].includes(field.operator) ||
+            field.operator !== field.oldOperator)) {
+            // change action to advanced query on field value is changed in this panel
+            if (router.currentRoute.query.action !== 'advancedQuery') {
+              router.push({
+                query: {
+                  ...router.currentRoute.query,
+                  action: 'advancedQuery'
+                }
+              })
+            }
+            dispatch('getObjectListFromCriteria', {
+              parentUuid,
+              containerUuid,
+              tableName: panel.tableName,
+              query: panel.query,
+              whereClause: panel.whereClause,
+              conditionsList: getters.getParametersToServer({
+                containerUuid,
+                isAdvancedQuery: true,
+                isEvaluateMandatory: false
+              })
+            })
+              .then(response => {
+                commit('changeField', {
+                  field,
+                  newField: {
+                    ...field,
+                    oldOperator: field.operator
+                  }
+                })
+                if (response && response.length) {
+                  dispatch('notifyPanelChange', {
+                    parentUuid,
+                    containerUuid,
+                    isAdvancedQuery: false,
+                    newValues: response[0],
+                    isSendToServer: false,
+                    isSendCallout: true,
+                    panelType: 'window'
+                  })
+                }
+              })
+              .catch(error => {
+                console.warn(`Error getting Advanced Query (notifyFieldChange): ${error.message}. Code: ${error.code}.`)
+              })
+          }
+        } else if (!getters.isNotReadyForSubmit(containerUuid)) {
           // TODO: refactory for it and change for a standard method
-        if (!getters.isNotReadyForSubmit(containerUuid)) {
           if (field.panelType === 'browser' && fieldIsDisplayed(field)) {
             dispatch('getBrowserSearch', {
               containerUuid,
@@ -621,57 +662,6 @@ const panel = {
             type: 'info'
           })
         }
-      } else {
-        if (panelType === 'table' || isAdvancedQuery) {
-          if (field.isShowedFromUser && (field.oldValue !== field.value ||
-            ['NULL', 'NOT_NULL'].includes(field.operator) ||
-            field.operator !== field.oldOperator)) {
-            // change action to advanced query on field value is changed in this panel
-            if (router.currentRoute.query.action !== 'advancedQuery') {
-              router.push({
-                query: {
-                  ...router.currentRoute.query,
-                  action: 'advancedQuery'
-                }
-              })
-            }
-            dispatch('getObjectListFromCriteria', {
-              parentUuid,
-              containerUuid,
-              tableName: panel.tableName,
-              query: panel.query,
-              whereClause: panel.whereClause,
-              conditionsList: getters.getParametersToServer({
-                containerUuid,
-                isAdvancedQuery: true,
-                isEvaluateMandatory: false
-              })
-            })
-              .then(response => {
-                commit('changeField', {
-                  field,
-                  newField: {
-                    ...field,
-                    oldOperator: field.operator
-                  }
-                })
-                if (response && response.length) {
-                  dispatch('notifyPanelChange', {
-                    parentUuid,
-                    containerUuid,
-                    isAdvancedQuery: false,
-                    newValues: response[0],
-                    isSendToServer: false,
-                    isSendCallout: true,
-                    panelType: 'window'
-                  })
-                }
-              })
-              .catch(error => {
-                console.warn(`Error getting Advanced Query (notifyFieldChange): ${error.message}. Code: ${error.code}.`)
-              })
-          }
-        }
       }
     },
     changeDependentFieldsList({ commit, dispatch, getters }, {

src/store/modules/ADempiere/window.js

@@ -230,7 +230,7 @@ const window = {
             message: language.t('login.unexpectedError'),
             type: 'error'
           })
-          console.warn(`Dictionary Window (State Window) - Error ${error.code}: ${error.message}`)
+          console.warn(`Dictionary Window (State Window) - Error ${error.code}: ${error.message}.`)
         })
     },
     getTabAndFieldFromServer({ dispatch, getters }, {
@@ -271,12 +271,13 @@ const window = {
             return fieldItem
           })
 
+          if (!isAdvancedQuery) {
             //  Get dependent fields
             fieldsList
               .filter(field => field.parentFieldsList && field.isActive)
               .forEach((field, index, list) => {
                 field.parentFieldsList.forEach(parentColumnName => {
-                var parentField = list.find(parentField => {
+                  const parentField = list.find(parentField => {
                     return parentField.columnName === parentColumnName && parentColumnName !== field.columnName
                   })
                   if (parentField) {
@@ -284,6 +285,7 @@ const window = {
                   }
                 })
               })
+          }
 
           if (!fieldsList.find(field => field.columnName === 'UUID')) {
             const attributesOverwrite = {
@@ -321,7 +323,7 @@ const window = {
             message: language.t('login.unexpectedError'),
             type: 'error'
           })
-          console.warn(`Dictionary Tab (State Window) - Error ${error.code}: ${error.message}`)
+          console.warn(`Dictionary Tab (State Window) - Error ${error.code}: ${error.message}.`)
         })
     },
     changeShowedDetailWindow({ commit, state }, {

src/utils/ADempiere/dictionaryUtils.js

@@ -101,11 +101,11 @@ export function generateField(fieldToGenerate, moreAttributes, typeRange = false
     parsedDefaultValue,
     parsedDefaultValueTo,
     // logics to app
-    isDisplayedFromLogic: fieldToGenerate.isDisplayed,
+    isDisplayedFromLogic: Boolean(fieldToGenerate.isDisplayed),
-    isReadOnlyFromLogic: undefined,
+    isReadOnlyFromLogic: Boolean(fieldToGenerate.isReadOnly),
-    isMandatoryFromLogic: undefined,
+    isMandatoryFromLogic: Boolean(fieldToGenerate.isMandatory),
     //
-    parentFieldsList: getParentFields(fieldToGenerate),
+    parentFieldsList: [],
     dependentFieldsList: [],
     // TODO: Add support on server
     // app attributes
@@ -124,21 +124,28 @@ export function generateField(fieldToGenerate, moreAttributes, typeRange = false
   }
 
   // evaluate simple logics without context
+  if (!field.isAdvancedQuery) {
+    field.parentFieldsList = getParentFields(fieldToGenerate)
+
     if (field.displayLogic.trim() !== '' && !field.displayLogic.includes('@')) {
       field.isDisplayedFromLogic = evaluator.evaluateLogic({
         type: 'displayed',
         logic: field.displayLogic
       })
+      field.isDisplayedFromLogic = Boolean(field.isDisplayedFromLogic)
     }
     if (field.mandatoryLogic.trim() !== '' && !field.mandatoryLogic.includes('@')) {
       field.isMandatoryFromLogic = evaluator.evaluateLogic({
         logic: field.mandatoryLogic
       })
+      field.isMandatoryFromLogic = Boolean(field.isMandatoryFromLogic)
     }
     if (field.readOnlyLogic.trim() !== '' && !field.readOnlyLogic.includes('@')) {
       field.isReadOnlyFromLogic = evaluator.evaluateLogic({
         logic: field.readOnlyLogic
       })
+      field.isReadOnlyFromLogic = Boolean(field.isReadOnlyFromLogic)
+    }
   }
 
   // Sizes from panel and groups

src/views/ADempiere/Window/index.vue

@@ -5,7 +5,7 @@
   >
     <el-container style="height: 86vh;">
       <Split>
-        <SplitArea :size="!show ? 100 : 50" :min-size="100">
+        <SplitArea :size="show ? 50 : 100" :min-size="100">
           <el-aside width="100%">
             <split-pane :min-percent="10" :default-percent="defaultPorcentSplitPane" split="vertical">
               <template>
@@ -53,7 +53,7 @@
                     <i
                       v-if="isMobile"
                       class="el-icon-close"
-                      style="position: fixed;padding-top: 15px; color: #000000;font-size: 121%;font-weight: 615!important;padding-left: 9px;"
+                      style="position: fixed; padding-top: 15px; color: #000000; font-size: 121%; font-weight: 615 !important; padding-left: 9px;"
                       @click="handleChangeShowedRecordNavigation()"
                     />
                   </el-aside>
@@ -79,7 +79,7 @@
                           :tabs-list="windowMetadata.tabsListParent"
                           class="tab-window"
                         />
-                        <div style="right: 0%;top: 40%;position: absolute;">
+                        <div style="right: 0%; top: 40%; position: absolute;">
                           <el-button v-show="!show" type="info" icon="el-icon-info" circle style="float: right;" class="el-button-window" @click="conteInfo" />
                         </div>
                         <div class="small-4 columns">
@@ -122,7 +122,7 @@
                     <SplitArea v-show="isShowedTabChildren" :size="50">
                       <el-header
                         v-if="isShowedTabChildren && windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length"
-                        style="height: auto; padding-right: 35px !important;padding-bottom: 33px;"
+                        style="height: auto; padding-right: 35px !important; padding-bottom: 33px;"
                       >
                         <div class="w-33">
                           <div class="center">
@@ -150,7 +150,7 @@
         </SplitArea>
         <SplitArea :size="show ? 50 : 0">
           <el-main>
-            <div style="top: 40%;position: absolute;">
+            <div style="top: 40%; position: absolute;">
               <el-button v-show="show" type="info" icon="el-icon-info" circle style="float: right;" class="el-button-window" @click="conteInfo" />
             </div>
             <div id="example-1">
@@ -161,7 +161,10 @@
                       <el-tab-pane
                         name="listChatEntries"
                       >
-                        <span slot="label"><i class="el-icon-s-comment" /> {{ $t('window.containerInfo.notes') }} </span>
+                        <span slot="label">
+                          <i class="el-icon-s-comment" />
+                          {{ $t('window.containerInfo.notes') }}
+                        </span>
                         <div
                           v-if="getIsChat"
                         >
@@ -206,9 +209,13 @@
                       <el-tab-pane
                         name="listRecordLogs"
                       >
-                        <span slot="label"><svg-icon icon-class="tree-table" /> {{ $t('window.containerInfo.changeLog') }} </span>
+                        <span slot="label">
+                          <svg-icon icon-class="tree-table" />
+                          {{ $t('window.containerInfo.changeLog') }}
+                        </span>
                         <div
                           v-if="getIsChangeLog"
+                          key="change-log-loaded"
                         >
                           <el-scrollbar wrap-class="scroll-window-log-change">
                             <el-timeline>
@@ -240,6 +247,7 @@
                         </div>
                         <div
                           v-else
+                          key="change-log-loading"
                           v-loading="true"
                           :element-loading-text="$t('notifications.loading')"
                           element-loading-spinner="el-icon-loading"
@@ -251,9 +259,13 @@
                         v-if="getIsWorkflowLog"
                         name="listWorkflowLogs"
                       >
-                        <span slot="label"><i class="el-icon-s-help" /> {{ $t('window.containerInfo.workflowLog') }} </span>
+                        <span slot="label">
+                          <i class="el-icon-s-help" />
+                          {{ $t('window.containerInfo.workflowLog') }}
+                        </span>
                         <div
                           v-if="getIsWorkflowLog"
+                          key="workflow-log-loaded"
                         >
                           <el-card
                             class="box-card"
@@ -287,11 +299,25 @@
                                               trigger="hover"
                                             >
                                               <p><b> {{ $t('login.userName') }}:</b> {{ nodeList.userName }} </p>
-                                              <p v-if="!isEmptyValue(nodeList.textMessage)"><b> {{ $t('window.containerInfo.logWorkflow.message') }}:</b> {{ nodeList.textMessage }} </p>
+                                              <p v-if="!isEmptyValue(nodeList.textMessage)">
-                                              <p><b> {{ $t('window.containerInfo.logWorkflow.responsible') }}:</b>  {{ nodeList.responsibleName }} </p>
+                                                <b> {{ $t('window.containerInfo.logWorkflow.message') }}:</b>
-                                              <p><b> {{ $t('window.containerInfo.logWorkflow.workflowName') }}:</b>  {{ nodeList.workflowStateName }} </p>
+                                                {{ nodeList.textMessage }}
-                                              <p><b> {{ $t('window.containerInfo.logWorkflow.timeElapsed') }}:</b>  {{ nodeList.timeElapsed }} </p>
+                                              </p>
-                                              <el-button slot="reference" type="text"> {{ nodeList.nodeName }} </el-button>
+                                              <p>
+                                                <b> {{ $t('window.containerInfo.logWorkflow.responsible') }}:</b>
+                                                {{ nodeList.responsibleName }}
+                                              </p>
+                                              <p>
+                                                <b> {{ $t('window.containerInfo.logWorkflow.workflowName') }}:</b>
+                                                {{ nodeList.workflowStateName }}
+                                              </p>
+                                              <p>
+                                                <b> {{ $t('window.containerInfo.logWorkflow.timeElapsed') }}:</b>
+                                                {{ nodeList.timeElapsed }}
+                                              </p>
+                                              <el-button slot="reference" type="text">
+                                                {{ nodeList.nodeName }}
+                                              </el-button>
                                             </el-popover>
                                           </span>
                                         </el-step>
@@ -305,6 +331,7 @@
                         </div>
                         <div
                           v-else
+                          key="workflow-log-loading"
                           v-loading="true"
                           :element-loading-text="$t('notifications.loading')"
                           element-loading-spinner="el-icon-loading"
@@ -409,9 +436,8 @@ export default {
     classIsMobile() {
       if (this.isMobile) {
         return 'open-table-detail-mobile'
-      } else {
-        return 'open-table-detail'
       }
+      return 'open-table-detail'
     },
     getterIsShowedRecordNavigation() {
       return this.$store.getters.getIsShowedRecordNavigation(this.windowUuid)
@@ -419,37 +445,42 @@ export default {
     iconIsShowedRecordNavigation() {
       if (this.isShowedRecordNavigation) {
         return 'el-icon-caret-left'
-      } else {
-        return 'el-icon-caret-right'
       }
+      return 'el-icon-caret-right'
     },
     iconIsShowedAside() {
       if (this.isShowedRecordPanel) {
         return 'el-icon-caret-left'
-      } else {
-        return 'el-icon-caret-right'
       }
+      return 'el-icon-caret-right'
     },
     styleMainIsShowedTabChildren() {
       if (this.isShowedTabChildren) {
-        return { height: 'initial', overflow: 'auto' }
+        return {
-      } else {
+          height: 'initial',
-        return { height: 'initial', overflow: 'hidden' }
+          overflow: 'auto'
+        }
+      }
+      return {
+        height: 'initial',
+        overflow: 'hidden'
       }
     },
     splitAreaStyle() {
       if (this.isShowedTabChildren) {
-        return { overflow: 'auto' }
+        return {
-      } else {
+          overflow: 'auto'
-        return { overflow: 'hidden' }
+        }
+      }
+      return {
+        overflow: 'hidden'
       }
     },
     sizeAreaStyle() {
       if (this.isShowedTabChildren) {
         return 50
-      } else {
-        return 100
       }
+      return 100
     },
     //
     getterWindow() {
@@ -920,7 +951,7 @@ export default {
 .splitter-pane-resizer.vertical {
     width: 11px;
     height: 100%;
-    background: gray!important;
+    background: gray !important;
     margin-left: -5px;
     border-left: 5px solid hsla(0,0%,100%,0);
     border-right: 5px solid hsla(0,0%,100%,0);