mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 20:39:48 +08:00
Bugfix/#692 context menu butons (#700)
* fix: Context menu, change text by button. * fix default action window as New Record. * Add default action to run switch new and undo. * Add colot button to undo action. * change to plain and warning undo button. * modifit contextmenu mobile * remove console * minimal change * validate is LIstrecord * modifit contextmenu mobile (#9) * modifit contextmenu mobile * remove console * minimal change * validate is LIstrecord Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com> * add description * Bugfix/#692 context menu butons (#10) * modifit contextmenu mobile * remove console * minimal change * validate is LIstrecord * add description Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com> * add icon * Bugfix/#692 context menu butons (#11) * modifit contextmenu mobile * remove console * minimal change * validate is LIstrecord * add description * add icon Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com> * change size the label * Bugfix/#692 context menu butons (#12) * modifit contextmenu mobile * remove console * minimal change * validate is LIstrecord * add description * add icon * change size the label Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com> * changa size label * add style reference * add translations * add icon default * fixed position Co-authored-by: EdwinBetanc0urt <EdwinBetanco0urt@outlook.com> Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>
This commit is contained in:
Elsio Sanchez
GitHub
parent
2e39e18c8a
commit
b4a3ec0b53
@ -3,7 +3,6 @@
|
||||
<el-menu
|
||||
ref="contextMenu"
|
||||
v-shortkey="shorcutKey"
|
||||
:default-active="activeMenu"
|
||||
:router="false"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@ -11,19 +10,6 @@
|
||||
unique-opened
|
||||
@shortkey.native="actionContextMenu"
|
||||
>
|
||||
<!-- menu relations -->
|
||||
<el-submenu v-if="!isEmptyChilds" class="el-menu-item" index="1">
|
||||
<template slot="title">
|
||||
{{ $t('components.contextMenuRelations') }}
|
||||
</template>
|
||||
<el-scrollbar wrap-class="scroll">
|
||||
<items-relations v-for="(relation, index) in relationsList" :key="index" :item="relation" />
|
||||
</el-scrollbar>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else disabled index="relations">
|
||||
{{ $t('components.contextMenuRelations') }}
|
||||
</el-menu-item>
|
||||
|
||||
<!-- actions or process on container -->
|
||||
<el-submenu v-if="!isEmptyValue(actions)" class="el-menu-item" index="actions" @click.native="runAction(actions[0])">
|
||||
<template slot="title">
|
||||
@ -102,6 +88,18 @@
|
||||
{{ $t('components.contextMenuActions') }}
|
||||
</el-menu-item>
|
||||
|
||||
<!-- menu relations -->
|
||||
<el-submenu v-if="!isEmptyChilds" class="el-menu-item" index="1">
|
||||
<template slot="title">
|
||||
{{ $t('components.contextMenuRelations') }}
|
||||
</template>
|
||||
<el-scrollbar wrap-class="scroll">
|
||||
<items-relations v-for="(relation, index) in relationsList" :key="index" :item="relation" />
|
||||
</el-scrollbar>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else disabled index="relations">
|
||||
{{ $t('components.contextMenuRelations') }}
|
||||
</el-menu-item>
|
||||
<!-- references of record -->
|
||||
<el-submenu
|
||||
:disabled="!(isReferecesContent && isLoadedReferences)"
|
||||
@ -136,6 +134,8 @@ import contextMixin from './contextMenuMixin.js'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenuDesktop',
|
||||
mixins: [contextMixin]
|
||||
mixins: [
|
||||
contextMixin
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -60,6 +60,10 @@ export default {
|
||||
isDisplayed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isListRecord: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -75,19 +79,17 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeMenu() {
|
||||
const { meta, path } = this.$route
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu
|
||||
}
|
||||
return path
|
||||
},
|
||||
getterContextMenu() {
|
||||
return this.$store.getters.getContextMenu(this.containerUuid)
|
||||
},
|
||||
isWindow() {
|
||||
return this.panelType === 'window'
|
||||
},
|
||||
isWithRecord() {
|
||||
return !this.isEmptyValue(this.recordUuid) && this.recordUuid !== 'create-new'
|
||||
},
|
||||
isReferecesContent() {
|
||||
if (this.panelType === 'window' && !this.isEmptyValue(this.recordUuid) && this.recordUuid !== 'create-new') {
|
||||
if (this.isWindow && this.isWithRecord) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
@ -160,7 +162,7 @@ export default {
|
||||
})
|
||||
},
|
||||
getDataLog() {
|
||||
if (this.panelType === 'window') {
|
||||
if (this.isWindow) {
|
||||
return this.$store.getters.getDataLog(this.containerUuid, this.recordUuid)
|
||||
}
|
||||
return undefined
|
||||
@ -169,7 +171,7 @@ export default {
|
||||
return this.$store.getters.getCachedReport(this.$route.params.instanceUuid).parameters
|
||||
},
|
||||
getOldRouteOfWindow() {
|
||||
if (this.panelType === 'window') {
|
||||
if (this.isWindow) {
|
||||
const oldRoute = this.$store.state['windowControl/index'].windowOldRoute
|
||||
if (!this.isEmptyValue(oldRoute.query.action) && oldRoute.query.action !== 'create-new' && this.$route.query.action === 'create-new') {
|
||||
return oldRoute
|
||||
@ -234,18 +236,18 @@ export default {
|
||||
'$route.query.action'(actionValue) {
|
||||
this.recordUuid = actionValue
|
||||
// only requires updating the context menu if it is Window
|
||||
if (this.panelType === 'window') {
|
||||
if (this.isWindow) {
|
||||
this.generateContextMenu()
|
||||
this.getReferences()
|
||||
}
|
||||
},
|
||||
isInsertRecord(newValue, oldValue) {
|
||||
if (this.panelType === 'window' && newValue !== oldValue) {
|
||||
if (this.isWindow && newValue !== oldValue) {
|
||||
this.generateContextMenu()
|
||||
}
|
||||
},
|
||||
getDataLog(newValue, oldValue) {
|
||||
if (this.panelType === 'window' && newValue !== oldValue) {
|
||||
if (this.isWindow && newValue !== oldValue) {
|
||||
this.generateContextMenu()
|
||||
}
|
||||
},
|
||||
@ -291,7 +293,7 @@ export default {
|
||||
}
|
||||
},
|
||||
refreshData() {
|
||||
if (this.panelType === 'window') {
|
||||
if (this.isWindow) {
|
||||
this.$store.dispatch('getDataListTab', {
|
||||
parentUuid: this.parentUuid,
|
||||
containerUuid: this.containerUuid,
|
||||
@ -350,7 +352,7 @@ export default {
|
||||
const tHeader = this.getterFieldsListHeader
|
||||
const filterVal = this.getterFieldsListValue
|
||||
let list = []
|
||||
if (this.panelType === 'window') {
|
||||
if (this.isWindow) {
|
||||
list = this.getDataRecord
|
||||
} else if (this.panelType === 'browser') {
|
||||
// TODO: Check usage as the selection is exported with the table menu
|
||||
@ -411,7 +413,7 @@ export default {
|
||||
})
|
||||
this.$store.dispatch('setOrder', processAction)
|
||||
}
|
||||
if (this.panelType === 'window' && this.isEmptyValue(this.actions.find(element => element.action === 'recordAccess'))) {
|
||||
if (this.isWindow && this.isEmptyValue(this.actions.find(element => element.action === 'recordAccess'))) {
|
||||
this.$store.dispatch('addAttribute', {
|
||||
tableName: this.tableNameCurrentTab,
|
||||
recordId: this.getCurrentRecord[this.tableNameCurrentTab + '_ID'],
|
||||
@ -446,7 +448,7 @@ export default {
|
||||
// rollback
|
||||
if (itemAction.action === 'undoModifyData') {
|
||||
itemAction.disabled = Boolean(!this.getDataLog && !this.getOldRouteOfWindow)
|
||||
} else if (this.recordUuid === 'create-new' || !this.isInsertRecord) {
|
||||
} else if (!this.isWithRecord || !this.isInsertRecord) {
|
||||
itemAction.disabled = true
|
||||
}
|
||||
}
|
||||
@ -670,7 +672,7 @@ export default {
|
||||
}
|
||||
},
|
||||
setShareLink() {
|
||||
let shareLink = this.panelType === 'window' || window.location.href.includes('?') ? `${window.location.href}&` : `${window.location.href}?`
|
||||
let shareLink = this.isWindow || window.location.href.includes('?') ? `${window.location.href}&` : `${window.location.href}?`
|
||||
if (this.$route.name === 'Report Viewer') {
|
||||
const processParameters = convertFieldsListToShareLink(this.processParametersExecuted)
|
||||
const reportFormat = this.$store.getters.getReportType
|
||||
|
||||
@ -1,145 +1,141 @@
|
||||
<template>
|
||||
<div class="container-submenu-mobile container-context-menu">
|
||||
<el-button
|
||||
type="text"
|
||||
style="right: 70%;position: absolute;"
|
||||
@click="runAction(actions[0])"
|
||||
<div v-if="!isListRecord" class="container-submenu-mobile container-context-menu">
|
||||
<!-- actions or process on container -->
|
||||
<el-dropdown
|
||||
size="mini"
|
||||
:hide-on-click="true"
|
||||
split-button
|
||||
trigger="click"
|
||||
@command="clickRunAction"
|
||||
@click="runAction(defaultActionToRun)"
|
||||
>
|
||||
{{ $t('components.RunProcess') }}
|
||||
</el-button>
|
||||
<right-menu>
|
||||
<el-menu
|
||||
ref="contextMenu"
|
||||
v-shortkey="shorcutKey"
|
||||
:default-active="activeMenu"
|
||||
:router="false"
|
||||
class="el-menu-demo"
|
||||
mode="vertical"
|
||||
menu-trigger="hover"
|
||||
unique-opened
|
||||
style="width: 258px; float: right;"
|
||||
>
|
||||
<!-- menu relations -->
|
||||
<el-submenu v-if="!isEmptyChilds" index="relations">
|
||||
<template slot="title">
|
||||
<svg-icon icon-class="tree" />
|
||||
{{ $t('components.contextMenuRelations') }}
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-scrollbar wrap-class="scroll">
|
||||
<items-relations v-for="(relation, index) in relationsList" :key="index" :item="relation" />
|
||||
</el-scrollbar>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else disabled index="relations">
|
||||
{{ $t('components.contextMenuRelations') }}
|
||||
</el-menu-item>
|
||||
|
||||
<!-- actions or process on container -->
|
||||
<el-submenu index="actions">
|
||||
<template slot="title">
|
||||
<svg-icon icon-class="link" />
|
||||
{{ $t('components.contextMenuActions') }}
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-scrollbar wrap-class="scroll">
|
||||
<template v-for="(action, index) in actions">
|
||||
<el-submenu
|
||||
v-if="action.childs"
|
||||
:key="index"
|
||||
:index="action.name"
|
||||
:disabled="action.disabled"
|
||||
>
|
||||
<template slot="title">
|
||||
{{ action.name }}
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="(child, key) in action.childs"
|
||||
:key="key"
|
||||
:index="child.uuid"
|
||||
@click="runAction(child)"
|
||||
>
|
||||
{{ child.name }}
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item
|
||||
v-else
|
||||
:key="index"
|
||||
:index="action.name"
|
||||
:disabled="action.disabled"
|
||||
@click="runAction(action)"
|
||||
>
|
||||
<svg-icon v-if="action.type === 'process'" icon-class="component" />
|
||||
{{ defaultActionName }}
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
command="refreshData"
|
||||
>
|
||||
<div class="contents">
|
||||
<div style="margin-right: 5%;margin-top: 10%;">
|
||||
<i class="el-icon-refresh" style="font-weight: bolder;" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="contents">
|
||||
<b class="label">
|
||||
{{ $t('components.contextMenuRefresh') }}
|
||||
</b>
|
||||
</span>
|
||||
<p
|
||||
class="description"
|
||||
>
|
||||
{{ $t('data.noDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-for="(action, index) in actions"
|
||||
:key="index"
|
||||
:command="action"
|
||||
:divided="true"
|
||||
>
|
||||
<div class="contents">
|
||||
<div style="margin-right: 5%;margin-top: 10%;">
|
||||
<i :class="iconAction(action)" style="font-weight: bolder;" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="contents">
|
||||
<b class="label">
|
||||
{{ action.name }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
<!-- other actions -->
|
||||
<el-menu-item v-show="isReport" index="downloadReport">
|
||||
<a :href="downloads" :download="file">
|
||||
{{ $t('components.contextMenuDownload') }}
|
||||
</a>
|
||||
</el-menu-item>
|
||||
<el-submenu
|
||||
v-if="isManageDataRecords"
|
||||
:disabled="isDisabledExportRecord"
|
||||
index="exportRecord"
|
||||
</b>
|
||||
</span>
|
||||
<p
|
||||
class="description"
|
||||
>
|
||||
<template slot="title">
|
||||
{{ $t('data.exportRecord') }}
|
||||
</template>
|
||||
<el-menu-item v-for="(format, keyFormat) in supportedTypes" :key="keyFormat" :index="keyFormat" @click.native="exportRecord(keyFormat)">
|
||||
{{ format }}
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item v-show="$route.name === 'Report Viewer'" index="printFormat" @click="redirect">
|
||||
{{ $t('components.contextMenuPrintFormatSetup') }}
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="isManageDataRecords" index="refreshData" @click="refreshData">
|
||||
{{ $t('components.contextMenuRefresh') }}
|
||||
</el-menu-item>
|
||||
<el-menu-item index="shareLink" @click="setShareLink">
|
||||
{{ $t('components.contextMenuShareLink') }}
|
||||
</el-menu-item>
|
||||
</el-scrollbar>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
|
||||
<!-- references of record -->
|
||||
<el-submenu :disabled="!(isReferecesContent && isLoadedReferences)" class="el-menu-item" index="references">
|
||||
<template slot="title">
|
||||
{{ $t('components.contextMenuReferences') }}
|
||||
</template>
|
||||
<template v-if="references && !isEmptyValue(references.referencesList)">
|
||||
<el-scrollbar wrap-class="scroll-child">
|
||||
<el-menu-item
|
||||
v-for="(reference, index) in references.referencesList"
|
||||
:key="index"
|
||||
:index="reference.displayName"
|
||||
@click="openReference(reference)"
|
||||
{{ $t('data.noDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<!-- menu relations -->
|
||||
<el-dropdown size="mini" @command="clickRelation">
|
||||
<el-button size="mini">
|
||||
{{ $t('components.contextMenuRelations') }} <i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="(relation, index) in relationsList"
|
||||
:key="index"
|
||||
:command="relation"
|
||||
:divided="true"
|
||||
>
|
||||
<div class="contents">
|
||||
<div style="margin-right: 5%;margin-top: 10%;">
|
||||
<svg-icon :icon-class="relation.meta.icon" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="contents">
|
||||
<b class="label">
|
||||
{{ relation.meta.title }}
|
||||
</b>
|
||||
</span>
|
||||
<p
|
||||
class="description"
|
||||
>
|
||||
{{ reference.displayName }}
|
||||
</el-menu-item>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<el-menu-item v-else index="not-references" disabled>
|
||||
{{ $t('components.withOutReferences') }}
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</right-menu>
|
||||
{{ relation.meta.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown size="mini" @command="clickReferences">
|
||||
<el-button size="mini" :disabled="!(isReferecesContent && isLoadedReferences)">
|
||||
{{ $t('components.contextMenuReferences') }} <i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="(reference, index) in references.referencesList"
|
||||
:key="index"
|
||||
:command="reference"
|
||||
:divided="true"
|
||||
>
|
||||
<div class="contents">
|
||||
<div>
|
||||
<span class="contents">
|
||||
<b class="label">
|
||||
{{ reference.displayName }}
|
||||
</b>
|
||||
</span>
|
||||
<p
|
||||
class="description"
|
||||
>
|
||||
{{ $t('data.noDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import contextMixin from './contextMenuMixin.js'
|
||||
import RightMenu from '@/components/RightPanel/menu'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenuMobile',
|
||||
components: {
|
||||
RightMenu
|
||||
mixins: [
|
||||
contextMixin
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
openedsMenu: [
|
||||
'actions'
|
||||
]
|
||||
}
|
||||
},
|
||||
mixins: [contextMixin],
|
||||
computed: {
|
||||
isPanelTypeMobile() {
|
||||
if (['process', 'report'].includes(this.$route.meta.type)) {
|
||||
@ -147,17 +143,144 @@ export default {
|
||||
}
|
||||
return false
|
||||
},
|
||||
isUndoAction() {
|
||||
if (this.isWindow) {
|
||||
if (!this.isWithRecord) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
typeOfAction() {
|
||||
if (this.isUndoAction) {
|
||||
return 'warning'
|
||||
}
|
||||
return 'default'
|
||||
},
|
||||
isPlain() {
|
||||
if (this.isUndoAction) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
defaultActionToRun() {
|
||||
if (this.isUndoAction) {
|
||||
return this.actions[2]
|
||||
}
|
||||
return this.actions[0]
|
||||
},
|
||||
defaultActionName() {
|
||||
if (this.isWindow) {
|
||||
if (this.isWithRecord) {
|
||||
return this.$t('window.newRecord')
|
||||
}
|
||||
return this.$t('data.undo')
|
||||
}
|
||||
return this.$t('components.RunProcess')
|
||||
},
|
||||
iconDefault() {
|
||||
if (this.isPanelTypeMobile) {
|
||||
return 'component'
|
||||
}
|
||||
return 'skill'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickRelation(item) {
|
||||
this.$router.push({
|
||||
name: item.name,
|
||||
query: {
|
||||
tabParent: 0
|
||||
}
|
||||
}, () => {})
|
||||
},
|
||||
clickRunAction(action) {
|
||||
if (action === 'refreshData') {
|
||||
this.refreshData()
|
||||
} else {
|
||||
this.runAction(action)
|
||||
}
|
||||
},
|
||||
clickReferences(reference) {
|
||||
this.openReference(reference)
|
||||
},
|
||||
iconAction(action) {
|
||||
let icon
|
||||
if (action.type === 'dataAction') {
|
||||
switch (action.action) {
|
||||
case 'setDefaultValues':
|
||||
icon = 'el-icon-news'
|
||||
break
|
||||
case 'deleteEntity':
|
||||
icon = 'el-icon-delete'
|
||||
break
|
||||
case 'undoModifyData':
|
||||
icon = 'el-icon-refresh-left'
|
||||
break
|
||||
case 'lockRecord':
|
||||
icon = 'el-icon-lock'
|
||||
break
|
||||
case 'unlockRecord':
|
||||
icon = 'el-icon-unlock'
|
||||
break
|
||||
case 'recordAccess':
|
||||
icon = 'el-icon-c-scale-to-original'
|
||||
break
|
||||
}
|
||||
} else if (action.type === 'process') {
|
||||
icon = 'el-icon-setting'
|
||||
} else {
|
||||
icon = 'el-icon-setting'
|
||||
}
|
||||
return icon
|
||||
},
|
||||
styleLabelAction(value) {
|
||||
if (value) {
|
||||
return 'font-size: 14px;margin-top: 0% !important;margin-left: 0px;margin-bottom: 10%;display: contents;'
|
||||
} else {
|
||||
return 'font-size: 14px;margin-top: 1.5% !important;margin-left: 2%;margin-bottom: 5%;display: contents;'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-tree-node__children {
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
max-width: 99%;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-dropdown .el-button-group {
|
||||
display: flex;
|
||||
}
|
||||
.el-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
padding: 10px 0;
|
||||
margin: 5px 0;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #e6ebf5;
|
||||
border-radius: 4px;
|
||||
-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);
|
||||
max-height: 250px;
|
||||
max-width: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-dropdown-menu--mini .el-dropdown-menu__item {
|
||||
line-height: 14px;
|
||||
padding: 0px 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.el-dropdown-menu__item--divided {
|
||||
position: relative;
|
||||
/* margin-top: 6px; */
|
||||
border-top: 1px solid #e6ebf5;
|
||||
}
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 2em;
|
||||
@ -165,4 +288,18 @@ export default {
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-top: 0% !important;
|
||||
margin-left: 0px;
|
||||
text-align: initial;
|
||||
}
|
||||
.description {
|
||||
margin: 0px;
|
||||
font-size: 12px;
|
||||
text-align: initial;
|
||||
}
|
||||
.contents {
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
:last-parameter="lastParameter"
|
||||
:report-format="reportFormat"
|
||||
:is-insert-record="isInsertRecord"
|
||||
:is-list-record="isListRecord"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -55,6 +56,10 @@ export default {
|
||||
isInsertRecord: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
isListRecord: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -110,9 +115,9 @@ export default {
|
||||
.container-submenu-mobile {
|
||||
position: absolute;
|
||||
height: 39px !important;
|
||||
width: 55px !important;
|
||||
right: 0;
|
||||
right: 0%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-submenu {
|
||||
|
||||
@ -1,12 +1,21 @@
|
||||
<template>
|
||||
<div ref="rightMenu" :class="{show:show}" class="rightMenu-container">
|
||||
<div
|
||||
ref="rightMenu"
|
||||
:class="{ show: isShowRightPanel }"
|
||||
class="rightMenu-container"
|
||||
>
|
||||
<div class="setting">
|
||||
<div class="showme">
|
||||
<!-- <div class="rightMenu-background" /> -->
|
||||
<div class="rightMenu">
|
||||
<div class="handle-button" :style="{'top':buttonTop+'%'}" @click="show=!show">
|
||||
<i :class="show?'el-icon-close':'el-icon-more'" style="color: gray;" />
|
||||
<div
|
||||
class="handle-button"
|
||||
:style="{ 'top': buttonTop+'%' }"
|
||||
@click="isShowRightPanel=!isShowRightPanel"
|
||||
>
|
||||
<i :class="icon" style="color: gray;" />
|
||||
</div>
|
||||
|
||||
<div class="rightMenu-items">
|
||||
<slot />
|
||||
</div>
|
||||
@ -20,7 +29,7 @@
|
||||
import { addClass, removeClass } from '@/utils'
|
||||
|
||||
export default {
|
||||
name: 'Menu',
|
||||
name: 'RightPanel',
|
||||
props: {
|
||||
clickNotClose: {
|
||||
default: false,
|
||||
@ -37,6 +46,20 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShowRightPanel: {
|
||||
get() {
|
||||
return this.$store.state.contextMenu.isShowRightPanel
|
||||
},
|
||||
set() {
|
||||
this.$store.commit('changeShowRigthPanel')
|
||||
}
|
||||
},
|
||||
icon() {
|
||||
if (this.isShowRightPanel) {
|
||||
return 'el-icon-close'
|
||||
}
|
||||
return 'el-icon-more'
|
||||
},
|
||||
theme() {
|
||||
return this.$store.state.settings.theme
|
||||
}
|
||||
@ -319,6 +319,7 @@ export default {
|
||||
deleteRecordError: 'Error deleting record',
|
||||
exportRecord: 'Export Record',
|
||||
lockRecord: 'Lock Record',
|
||||
noDescription: 'No Description',
|
||||
recordAccess: {
|
||||
actions: 'Record Access',
|
||||
hideRecord: 'Hide Record',
|
||||
|
||||
@ -294,6 +294,7 @@ export default {
|
||||
deleteRecordError: 'Error al eliminar el regitro',
|
||||
exportRecord: 'Exportar Registro',
|
||||
lockRecord: 'Bloquear Registro',
|
||||
noDescription: 'Sin Descripción',
|
||||
recordAccess: {
|
||||
actions: 'Acceso a registros',
|
||||
hideRecord: 'Ocultar Registro',
|
||||
|
||||
@ -13,6 +13,7 @@ import { requestListDocumentActions, requestListDocumentStatuses } from '@/api/A
|
||||
// }
|
||||
// ]
|
||||
const initStateContextMenu = {
|
||||
isShowRightPanel: false,
|
||||
contextMenu: [],
|
||||
listDocumentStatus: {
|
||||
defaultDocumentAction: undefined,
|
||||
@ -43,6 +44,9 @@ const contextMenu = {
|
||||
addlistDocumentStatus(state, payload) {
|
||||
state.listDocumentStatus = payload
|
||||
},
|
||||
changeShowRigthPanel(state) {
|
||||
state.isShowRightPanel = !state.isShowRightPanel
|
||||
},
|
||||
resetContextMenu(state) {
|
||||
state = initStateContextMenu
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
:style="isWorkflowBarStatus ? 'height: 45px; background: #F5F7FA' : 'height: 40px'"
|
||||
>
|
||||
<el-container>
|
||||
<el-aside width="100%" style="width: 78vw; overflow: hidden;">
|
||||
<el-aside width="100%" style="overflow: hidden;">
|
||||
<el-scrollbar>
|
||||
<workflow-status-bar
|
||||
v-if="isWorkflowBarStatus"
|
||||
@ -76,6 +76,7 @@
|
||||
:table-name="windowMetadata.currentTab.tableName"
|
||||
:panel-type="panelType"
|
||||
:is-insert-record="windowMetadata.currentTab.isInsertRecord"
|
||||
:is-list-record="isShowedRecordNavigation"
|
||||
/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user