mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-07 18:25:45 +08:00
Process Activity Window Support in Mobile Mode (#802)
* Fixes: [Bug Report] Ajust text to window adempiere/adempiere-vue#796 * add padding Co-authored-by: elsiosanchez <elsiosanche@gmail.com> Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
This commit is contained in:
parent
4c46334171
commit
4b2e5469b2
@ -11,6 +11,7 @@ export default {
|
||||
page404: '404',
|
||||
profile: 'Profile',
|
||||
ProcessActivity: 'Process Logs',
|
||||
withoutLog: 'No Error Log Found',
|
||||
ProductInfo: 'Product Information',
|
||||
role: 'Role',
|
||||
organization: 'Organization',
|
||||
|
@ -11,6 +11,7 @@ export default {
|
||||
page404: '404',
|
||||
profile: 'Perfil',
|
||||
ProcessActivity: 'Histórico Procesos',
|
||||
withoutLog: 'No se Encontró Registro de Error ',
|
||||
ProductInfo: 'Informacion de Producto',
|
||||
role: 'Rol',
|
||||
organization: 'Organización',
|
||||
|
@ -16,129 +16,16 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div v-if="!isEmptyValue(getProcessLog)" key="with-process" class="app-container">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in getProcessLog"
|
||||
:key="index"
|
||||
:timestamp="translateDate(activity.lastRun)"
|
||||
placement="top"
|
||||
type="primary"
|
||||
size="large"
|
||||
:color="checkStatus(activity).color"
|
||||
>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span><b>{{ activity.name }}</b></span>
|
||||
<div class="actions">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ $t('components.contextMenuActions') }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-if="activity.isReport" :command="{ ...activity, command: 'seeReport' }">
|
||||
{{ $t('views.seeReport') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="{ ...activity, command: 'zoomIn' }">
|
||||
{{ $t('table.ProcessActivity.zoomIn') }}
|
||||
</el-dropdown-item>
|
||||
<!-- TODO: add more actions -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item v-if="activity.description" :label="generateTitle('Description')">
|
||||
<span><b>{{ activity.description }}</b></span>
|
||||
<span v-if="activity.isReport">{{ activity.output.description }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="generateTitle('Status')">
|
||||
<!-- show only when it is error -->
|
||||
<el-popover
|
||||
v-if="activity.isError && !activity.summary && !activity.isReport"
|
||||
:key="index + 'is-error'"
|
||||
placement="right"
|
||||
width="700"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
{{ activity.message }}
|
||||
</div>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<!-- show only when bring logs -->
|
||||
<el-popover
|
||||
v-else-if="!isEmptyValue(activity.logsList) || !isEmptyValue(activity.summary)"
|
||||
:key="index + 'is-summary'"
|
||||
placement="right"
|
||||
width="500"
|
||||
trigger="hover"
|
||||
>
|
||||
<b>{{ $t('table.ProcessActivity.Logs') }}</b><br>
|
||||
<ul>
|
||||
<li @click="handleCommand({ ...activity, command: 'zoomIn' })"> {{ activity.summary }} </li>
|
||||
<el-scrollbar wrap-class="popover-scroll">
|
||||
<li v-for="(logItem, key) in activity.logsList" :key="key" @click="zoomIn(activity)">
|
||||
{{ logItem.log }}
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<!-- show only when bring output -->
|
||||
<el-popover
|
||||
v-else-if="activity.isReport"
|
||||
:key="index + 'is-output'"
|
||||
placement="right"
|
||||
width="700"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<span> {{ $t('table.ProcessActivity.Output') }} </span><br>
|
||||
<span>{{ $t('table.ProcessActivity.Name') }}: {{ activity.output.name }}</span><br>
|
||||
<span>{{ $t('table.ProcessActivity.Description') }}: {{ activity.output.description }}</span><br>
|
||||
<span>{{ $t('table.ProcessActivity.FileName') }}: {{ activity.output.fileName }}</span><br>
|
||||
<a type="text" :href="activity.url" :download="activity.download">
|
||||
{{ $t('components.contextMenuDownload') }} <i class="el-icon-download" />
|
||||
</a>
|
||||
</div>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
v-else
|
||||
:key="index + 'is-other'"
|
||||
placement="top-start"
|
||||
:title="$t('table.ProcessActivity.Logs')"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
:content="activity.summary"
|
||||
>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div v-else key="without-process">
|
||||
<h1 class="text-center">{{ $t('views.noProcess') }}</h1>
|
||||
</div>
|
||||
<component
|
||||
:is="templateDevice"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { recursiveTreeSearch } from '@/utils/ADempiere/valueUtils'
|
||||
|
||||
export default {
|
||||
name: 'ProcessActivity',
|
||||
name: 'MixinProcessActivity',
|
||||
data() {
|
||||
return {
|
||||
processActivity: [],
|
||||
@ -203,6 +90,15 @@ export default {
|
||||
},
|
||||
permissionRoutes() {
|
||||
return this.$store.getters.permission_routes
|
||||
},
|
||||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
templateDevice() {
|
||||
if (this.isMobile) {
|
||||
return () => import('@/views/ADempiere/ProcessActivity/modeMobile')
|
||||
}
|
||||
return () => import('@/views/ADempiere/ProcessActivity/modeDesktop')
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
|
190
src/views/ADempiere/ProcessActivity/modeDesktop.vue
Normal file
190
src/views/ADempiere/ProcessActivity/modeDesktop.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<!--
|
||||
ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
|
||||
Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
|
||||
Contributor(s): Leonel Matos lmatos@erpya.com www.erpya.com
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div v-if="!isEmptyValue(getProcessLog)" key="with-process" class="app-container">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in getProcessLog"
|
||||
:key="index"
|
||||
:timestamp="translateDate(activity.lastRun)"
|
||||
placement="top"
|
||||
type="primary"
|
||||
size="large"
|
||||
:color="checkStatus(activity).color"
|
||||
>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span><b>{{ activity.name }}</b></span>
|
||||
<div class="actions">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ $t('components.contextMenuActions') }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-if="activity.isReport" :command="{ ...activity, command: 'seeReport' }">
|
||||
{{ $t('views.seeReport') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="{ ...activity, command: 'zoomIn' }">
|
||||
{{ $t('table.ProcessActivity.zoomIn') }}
|
||||
</el-dropdown-item>
|
||||
<!-- TODO: add more actions -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item v-if="activity.description" :label="generateTitle('Description')">
|
||||
<span><b>{{ activity.description }}</b></span>
|
||||
<span v-if="activity.isReport">{{ activity.output.description }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="generateTitle('Status')">
|
||||
<!-- show only when it is error -->
|
||||
<el-popover
|
||||
v-if="activity.isError && !activity.summary && !activity.isReport"
|
||||
:key="index + 'is-error'"
|
||||
placement="right"
|
||||
width="700"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
{{ activity.message }}
|
||||
</div>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<!-- show only when bring logs -->
|
||||
<el-popover
|
||||
v-else-if="!isEmptyValue(activity.logsList) || !isEmptyValue(activity.summary)"
|
||||
:key="index + 'is-summary'"
|
||||
placement="right"
|
||||
width="500"
|
||||
trigger="hover"
|
||||
>
|
||||
<b>{{ $t('table.ProcessActivity.Logs') }}</b><br>
|
||||
<ul>
|
||||
<li @click="handleCommand({ ...activity, command: 'zoomIn' })"> {{ activity.summary }} </li>
|
||||
<el-scrollbar wrap-class="popover-scroll">
|
||||
<li v-for="(logItem, key) in activity.logsList" :key="key" @click="zoomIn(activity)">
|
||||
{{ logItem.log }}
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<!-- show only when bring output -->
|
||||
<el-popover
|
||||
v-else-if="activity.isReport"
|
||||
:key="index + 'is-output'"
|
||||
placement="right"
|
||||
width="700"
|
||||
trigger="hover"
|
||||
>
|
||||
<div>
|
||||
<span> {{ $t('table.ProcessActivity.Output') }} </span><br>
|
||||
<span>{{ $t('table.ProcessActivity.Name') }}: {{ activity.output.name }}</span><br>
|
||||
<span>{{ $t('table.ProcessActivity.Description') }}: {{ activity.output.description }}</span><br>
|
||||
<span>{{ $t('table.ProcessActivity.FileName') }}: {{ activity.output.fileName }}</span><br>
|
||||
<a type="text" :href="activity.url" :download="activity.download">
|
||||
{{ $t('components.contextMenuDownload') }} <i class="el-icon-download" />
|
||||
</a>
|
||||
</div>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
v-else
|
||||
:key="index + 'is-other'"
|
||||
placement="top-start"
|
||||
:title="$t('table.ProcessActivity.Logs')"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
:content="activity.summary"
|
||||
>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div v-else key="without-process">
|
||||
<h1 class="text-center">{{ $t('views.noProcess') }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MixinProcessActivity from './index.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModeDesktop',
|
||||
mixins: [
|
||||
MixinProcessActivity
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
a, a:focus, a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-popover {
|
||||
position: absolute;
|
||||
background: #FFFFFF;
|
||||
overflow: auto;
|
||||
min-width: 84px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e6ebf5;
|
||||
padding: 12px;
|
||||
max-height: 174px;
|
||||
z-index: 2000;
|
||||
color: #606266;
|
||||
line-height: 1.4;
|
||||
text-align: justify;
|
||||
max-width: 600px;
|
||||
font-size: 14px;
|
||||
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
word-break: break-all;
|
||||
}
|
||||
.loading-div {
|
||||
padding: 100px 100px;
|
||||
height: 100%;
|
||||
}
|
||||
.actions {
|
||||
float: right
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.popover-scroll {
|
||||
max-height: 200px !important;
|
||||
}
|
||||
</style>
|
200
src/views/ADempiere/ProcessActivity/modeMobile.vue
Normal file
200
src/views/ADempiere/ProcessActivity/modeMobile.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<!--
|
||||
ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
|
||||
Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
|
||||
Contributor(s): Leonel Matos lmatos@erpya.com www.erpya.com
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div v-if="!isEmptyValue(getProcessLog)" key="with-process" class="app-container">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in getProcessLog"
|
||||
:key="index"
|
||||
:timestamp="translateDate(activity.lastRun)"
|
||||
placement="top"
|
||||
type="primary"
|
||||
size="large"
|
||||
:color="checkStatus(activity).color"
|
||||
>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span><b>{{ activity.name }}</b></span>
|
||||
<div class="actions">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ $t('components.contextMenuActions') }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-if="activity.isReport" :command="{ ...activity, command: 'seeReport' }">
|
||||
{{ $t('views.seeReport') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="{ ...activity, command: 'zoomIn' }">
|
||||
{{ $t('table.ProcessActivity.zoomIn') }}
|
||||
</el-dropdown-item>
|
||||
<!-- TODO: add more actions -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item v-if="activity.description" :label="generateTitle('Description')">
|
||||
<span><b>{{ activity.description }}</b></span>
|
||||
<span v-if="activity.isReport">{{ activity.output.description }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="generateTitle('Status')">
|
||||
<!-- show only when it is error -->
|
||||
<el-popover
|
||||
v-if="activity.isError"
|
||||
:key="index + 'is-error'"
|
||||
placement="right"
|
||||
width="300"
|
||||
trigger="click"
|
||||
>
|
||||
<div v-if="!isEmptyValue(activity.summary)">
|
||||
{{ activity.message }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ $t('route.withoutLog') }}
|
||||
</div>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<!-- show only when bring logs -->
|
||||
<el-popover
|
||||
v-else-if="activity.panelType === 'process'"
|
||||
:key="index + 'is-summary'"
|
||||
placement="right"
|
||||
width="300"
|
||||
trigger="click"
|
||||
>
|
||||
<b>{{ $t('table.ProcessActivity.Logs') }}</b><br>
|
||||
<ul>
|
||||
<li @click="handleCommand({ ...activity, command: 'zoomIn' })"> {{ activity.summary }} </li>
|
||||
<el-scrollbar wrap-class="popover-scroll">
|
||||
<li v-for="(logItem, key) in activity.logsList" :key="key" @click="zoomIn(activity)">
|
||||
{{ logItem.log }}
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<!-- show only when bring output -->
|
||||
<el-popover
|
||||
v-else-if="activity.panelType === 'report'"
|
||||
:key="index + 'is-output'"
|
||||
placement="right"
|
||||
width="300"
|
||||
trigger="click"
|
||||
>
|
||||
<div v-if="!isEmptyValue(activity.summary)">
|
||||
<span> {{ $t('table.ProcessActivity.Output') }} </span><br>
|
||||
<span>{{ $t('table.ProcessActivity.Name') }}: {{ activity.output.name }}</span><br>
|
||||
<span>{{ $t('table.ProcessActivity.Description') }}: {{ activity.output.description }}</span><br>
|
||||
<span>{{ $t('table.ProcessActivity.FileName') }}: {{ activity.output.fileName }}</span><br>
|
||||
<a type="text" :href="activity.url" :download="activity.download">
|
||||
{{ $t('components.contextMenuDownload') }} <i class="el-icon-download" />
|
||||
</a>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ $t('route.withoutLog') }}
|
||||
</div>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }} {{ activity.type }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
v-else
|
||||
:key="index + 'is-other'"
|
||||
placement="top-start"
|
||||
:title="$t('table.ProcessActivity.Logs')"
|
||||
width="200"
|
||||
trigger="click"
|
||||
:content="activity.summary"
|
||||
>
|
||||
<el-tag slot="reference" :type="checkStatus(activity).type">
|
||||
{{ checkStatus(activity).text }}
|
||||
</el-tag>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div v-else key="without-process">
|
||||
<h1 class="text-center">{{ $t('views.noProcess') }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MixinProcessActivity from './index.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProcessActivity',
|
||||
mixins: [
|
||||
MixinProcessActivity
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
a, a:focus, a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-popover {
|
||||
position: absolute;
|
||||
background: #FFFFFF;
|
||||
overflow: auto;
|
||||
min-width: 84px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e6ebf5;
|
||||
padding: 12px;
|
||||
max-height: 174px;
|
||||
z-index: 2000;
|
||||
color: #606266;
|
||||
line-height: 1.4;
|
||||
text-align: justify;
|
||||
max-width: 600px;
|
||||
font-size: 14px;
|
||||
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
word-break: break-all;
|
||||
}
|
||||
.loading-div {
|
||||
padding: 100px 100px;
|
||||
height: 100%;
|
||||
}
|
||||
.actions {
|
||||
float: right
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.popover-scroll {
|
||||
max-height: 200px !important;
|
||||
}
|
||||
.el-popper[x-placement^=right] {
|
||||
margin-left: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user