1
0
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:
Elsio Sanchez 2021-05-04 17:53:28 -04:00 committed by GitHub
parent 4c46334171
commit 4b2e5469b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 405 additions and 117 deletions

View File

@ -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',

View File

@ -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',

View File

@ -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() {

View 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>

View 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>