blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-10 12:01:57 +08:00
Code Issues Releases Wiki Activity

Add activity notifications (#997)

Browse Source 
Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
This commit is contained in:
Elsio Sanchez 2021-07-19 19:03:30 -04:00 committed by GitHub
parent b92e36a32c
commit e573a05dd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 108 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ADempiere/Badge/index.vue
View File

@ -33,11 +33,25 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
width="50" width="50"
class-name="procesActivity"
> >
<el-tooltip effect="dark" :content="$t('navbar.badge.link')" placement="top-start"> <template slot="header">
<!-- <el-button"
type="text"
@click="handleCurrentChange()"
> -->
<svg-icon icon-class="tree-table" /> <svg-icon icon-class="tree-table" />
</el-tooltip> <!-- </el-button> -->
</template>
<template slot-scope="scope">
<el-button
type="text"
size="small"
style="color: black"
@click="openProcess(scope.$index, getRecordNotification)"
>
<svg-icon icon-class="tree-table" />
</el-button>
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-button slot="reference" type="text" icon="el-icon-bell" style="float: left;color: #000000;font-size: 121%;font-weight: 615!important;padding-top: 14px;" /> <el-button slot="reference" type="text" icon="el-icon-bell" style="float: left;color: #000000;font-size: 121%;font-weight: 615!important;padding-top: 14px;" />
@ -74,6 +88,9 @@ export default {
this.show = false this.show = false
}, },
handleCurrentChange(getRecordNotification, val, index, rows) { handleCurrentChange(getRecordNotification, val, index, rows) {
if (!this.isEmptyValue(getRecordNotification.typeActivity) && getRecordNotification.typeActivity) {
return ''
}
if (val !== null) { if (val !== null) {
let options = { let options = {
name: 'ProcessActivity' name: 'ProcessActivity'
@ -92,6 +109,10 @@ export default {
this.$router.push(options, () => {}) this.$router.push(options, () => {})
} }
}, },
openProcess(index, rows) {
this.$router.push({ name: '8e51c232-fb40-11e8-a479-7a0060f0aa01' }, () => {})
this.deleteRow(index, this.getRecordNotification)
},
deleteRow(index, rows) { deleteRow(index, rows) {
rows.splice(index, 1) rows.splice(index, 1)
}, },

131
src/components/ADempiere/Form/WorkflowActivity/index.vue
View File

@ -15,7 +15,7 @@
--> -->
<template> <template>
<el-container style="height: 100% !important;"> <el-container style="height: 100% !important;">
<el-header class="header" :style="!collapse ? 'height: 35% !important;' : 'height: 10%!important'"> <el-header id="WorkflowActivity" class="header" :style="!collapse ? 'height: 35% !important;' : 'height: 10%!important'">
<el-card :style="!collapse ? 'height: 100% !important;' : 'height: auto'"> <el-card :style="!collapse ? 'height: 100% !important;' : 'height: auto'">
<div slot="header"> <div slot="header">
<span> {{ $t('form.activity.title') }} </span> <span> {{ $t('form.activity.title') }} </span>
@ -23,7 +23,6 @@
</div> </div>
<el-table <el-table
v-show="!collapse" v-show="!collapse"
ref="WorkflowActivity"
v-loading="isEmptyValue(activityList)" v-loading="isEmptyValue(activityList)"
:data="activityList" :data="activityList"
highlight-current-row highlight-current-row
@ -44,45 +43,61 @@
</el-card> </el-card>
</el-header> </el-header>
<el-main class="main"> <el-main class="main">
<transition name="el-zoom-in-center"> <el-container style="height: 100%;">
<el-card v-show="show" :style="{position: 'absolute', zIndex: '5', left: leftContextualMenu + 'px', top: topContextualMenu + 'px'}" class="box-card"> <el-aside v-if="!isEmptyValue(currentActivity)" width="70%" style="background: white;">
<div slot="header" class="clearfix"> <transition name="el-zoom-in-center">
<span> <el-card v-show="show" :style="{position: 'absolute', zIndex: '5', left: leftContextualMenu + 'px', top: topContextualMenu + 'px'}" class="box-card">
<b> {{ infoNode.name }} </b> <div slot="header" class="clearfix">
</span> <span>
<el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-close" @click="show = !show" /> {{ infoNode.description }}
</div> </span>
<div class="text item" style="padding: 20px"> <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-close" @click="show = !show" />
<el-timeline class="info"> </div>
<el-timeline-item :timestamp="currentWorkflow.created" placement="top"> <div v-if="!isEmptyValue(infoNode.nodeLogs)" class="text item" style="padding: 20px">
<el-card style="padding: 20px!important;"> <el-timeline class="info">
<b> Usuario: </b> {{ currentWorkflow.user_name }} <br> <el-timeline-item
<b> {{ $t('table.ProcessActivity.Description') }}: </b> {{ infoNode.description }} v-for="(logs, key) in infoNode.nodeLogs"
</el-card> :key="key"
</el-timeline-item> :timestamp="translateDate(logs.log_date)"
</el-timeline> placement="top"
</div> >
</el-card> <el-card style="padding: 20px!important;">
</transition> <b> {{ $t('login.userName') }} </b> {{ logs.user_name }} <br>
<workflow-chart {{ logs.text_message }}
v-if="!isEmptyValue(node) && !isEmptyValue(currentWorkflow)" </el-card>
:transitions="listWorkflowTransition" </el-timeline-item>
:states="node" </el-timeline>
:state-semantics="currentNode" </div>
@state-click="onLabelClicked(node, $event)" </el-card>
/> </transition>
<el-scrollbar v-if="!isEmptyValue(currentWorkflow)" wrap-class="scroll-child"> <workflow-chart
<el-timeline class="info"> v-if="!isEmptyValue(node) && !isEmptyValue(currentActivity)"
<el-timeline-item :transitions="listWorkflowTransition"
v-for="(nodes, key) in currentWorkflow.workflow_process.workflow_events" :states="node"
:key="key" :state-semantics="currentNode"
:timestamp="translateDate(nodes.log_date)" @state-click="onLabelClicked(node, $event)"
placement="top" />
> </el-aside>
<b> {{ nodes.node_name }} </b> {{ nodes.text_message }} <el-main v-if="!isEmptyValue(currentActivity)">
</el-timeline-item> <el-card class="box-card">
</el-timeline> <div slot="header" class="clearfix">
</el-scrollbar> {{ $t('field.logsField') }}
</div>
<el-scrollbar v-if="!isEmptyValue(currentActivity)" wrap-class="scroll-child">
<el-timeline class="info">
<el-timeline-item
v-for="(nodes, key) in listProcessWorkflow"
:key="key"
:timestamp="translateDate(nodes.log_date)"
placement="top"
>
<b> {{ nodes.node_name }} </b> {{ nodes.text_message }}
</el-timeline-item>
</el-timeline>
</el-scrollbar>
</el-card>
</el-main>
</el-container>
</el-main> </el-main>
<el-footer :class="styleFooter"> <el-footer :class="styleFooter">
<el-card shadow="hover" class="search"> <el-card shadow="hover" class="search">
@ -138,6 +153,7 @@ export default {
topContextualMenu: 0, topContextualMenu: 0,
leftContextualMenu: 0, leftContextualMenu: 0,
infoNode: {}, infoNode: {},
visible: false,
show: false, show: false,
collapse: false, collapse: false,
currentNode: [{ currentNode: [{
@ -145,11 +161,12 @@ export default {
id: '' id: ''
}], }],
currentWorkflow: {}, currentWorkflow: {},
listProcessWorkflow: [],
listWorkflowTransition: [], listWorkflowTransition: [],
orderLineDefinition: [ orderLineDefinition: [
{ {
columnName: 'workflow.name', columnName: 'workflow.name',
name: 'Nombre', name: this.$t('table.ProcessActivity.Name'),
isNumeric: false isNumeric: false
}, },
{ {
@ -159,7 +176,7 @@ export default {
}, },
{ {
columnName: 'node.description', columnName: 'node.description',
name: 'Descripcion', name: this.$t('table.ProcessActivity.Description'),
isNumeric: false isNumeric: false
} }
] ]
@ -184,23 +201,37 @@ export default {
return this.$store.getters.getCurrentActivity return this.$store.getters.getCurrentActivity
} }
}, },
mounted() { watch: {
this.$store.dispatch('serverListActivity') activityList(list) {
if (!this.isEmptyValue(this.currentActivity)) { this.SendActivityListNotifier(list)
},
currentActivity(value) {
this.listWorkflow(value)
this.setCurrent() this.setCurrent()
} }
}, },
mounted() {
this.$store.dispatch('serverListActivity')
if (!this.isEmptyValue(this.currentActivity)) {
this.listWorkflow(this.currentActivity)
}
},
methods: { methods: {
SendActivityListNotifier() {
this.$store.commit('addNotificationProcess', { name: this.$t('navbar.badge.activity') + ' ' + this.activityList.length, typeActivity: true })
},
setCurrent() { setCurrent() {
const activity = this.activityList.find(activity => activity.node === this.currentActivity.node) const activity = this.activityList.find(activity => activity.node === this.currentActivity.node)
this.$refs.WorkflowActivity.setCurrentRow(activity) this.$refs.WorkflowActivity.setCurrentRow(activity)
}, },
handleCurrentChange(activity) { handleCurrentChange(activity) {
this.listWorkflow(activity)
this.$store.dispatch('selectedActivity', activity) this.$store.dispatch('selectedActivity', activity)
}, },
onLabelClicked(type, id) { onLabelClicked(type, id) {
this.visible = true
this.infoNode = type.find(node => node.id === id) this.infoNode = type.find(node => node.id === id)
const nodeLogs = this.listProcessWorkflow.filter(node => node.node_uuid === this.infoNode.uuid)
this.infoNode.nodeLogs = nodeLogs
const menuMinWidth = 105 const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
const offsetWidth = this.$el.offsetWidth // container width const offsetWidth = this.$el.offsetWidth // container width
@ -223,6 +254,7 @@ export default {
listWorkflow(activity) { listWorkflow(activity) {
// Highlight Current Node // Highlight Current Node
this.currentWorkflow = activity this.currentWorkflow = activity
this.listProcessWorkflow = !this.isEmptyValue(this.currentWorkflow.workflow_process) ? this.currentWorkflow.workflow_process.workflow_events.reverse() : []
this.transitions = [] this.transitions = []
if (!this.isEmptyValue(activity.node.uuid)) { if (!this.isEmptyValue(activity.node.uuid)) {
this.currentNode = [{ this.currentNode = [{
@ -337,7 +369,7 @@ export default {
margin: 0px; margin: 0px;
font-size: 14px; font-size: 14px;
list-style: none; list-style: none;
padding: 0px; padding: 10px;
} }
.vue-workflow-chart-state { .vue-workflow-chart-state {
background-color: #fff; background-color: #fff;
@ -360,6 +392,9 @@ export default {
} }
</style> </style>
<style lang='scss'> <style lang='scss'>
.scroll-child {
max-height: 450px;
}
.el-card { .el-card {
border-radius: 4px; border-radius: 4px;
border: 1px solid #e6ebf5; border: 1px solid #e6ebf5;

1
src/lang/ADempiere/es.js
View File

@ -57,6 +57,7 @@ export default {
navbar: { navbar: {
badge: { badge: {
Notifications: 'Notificaciones', Notifications: 'Notificaciones',
activity: 'Actividades pendiente',
link: 'Ir a Histórico de Procesos' link: 'Ir a Histórico de Procesos'
}, },
logOut: 'Salir', logOut: 'Salir',