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

Feture/support menu field (#737)

Browse Source 
* Context menu support for fields in desktop mode

* minimal changes

* change style
This commit is contained in:
Elsio Sanchez 2021-04-09 16:14:07 -04:00 committed by GitHub
parent 7ff2286ba2
commit ffb94e4ab9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 85 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/ADempiere/Field/index.vue
View File

@ -21,10 +21,10 @@
<el-dropdown
size="mini"
:hide-on-click="true"
trigger="click"
trigger="hover"
@command="handleCommand"
>
<span class="el-dropdown-link">
<span style="border: aqua;">
<span key="is-field-name">
{{ field.name }}
</span>
@ -42,7 +42,39 @@
:command="option"
:divided="true"
>
<div class="contents">
<el-popover
v-if="!isMobile"
placement="top"
width="400"
trigger="click"
style="padding: 0px;"
>
<component
:is="optionFieldFComponentRender"
v-if="visibleForDesktop"
:field-attributes="contextMenuField.fieldAttributes"
:source-field="contextMenuField.fieldAttributes"
:field-value="contextMenuField.valueField"
/>
<el-button slot="reference" type="text" style="color: #606266;">
<div class="contents">
<div v-if="option.name !== $t('language')" style="margin-right: 5%;padding-top: 3%;">
<i :class="option.icon" style="font-weight: bolder;" />
</div>
<div v-else style="margin-right: 5%">
<svg-icon :icon-class="option.icon" style="margin-right: 5px;" />
</div>
<div>
<span class="contents">
<b class="label">
{{ option.name }}
</b>
</span>
</div>
</div>
</el-button>
</el-popover>
<div v-if="isMobile" class="contents">
<div v-if="option.name !== $t('language')" style="margin-right: 5%;padding-top: 3%;">
<i :class="option.icon" style="font-weight: bolder;" />
</div>
@ -125,7 +157,7 @@ export default {
data() {
return {
field: {},
visible: this.$store.state.contextMenu.isShowPopoverField
visibleForDesktop: false
}
},
computed: {
@ -133,6 +165,30 @@ export default {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
contextMenuField() {
return this.$store.getters.getFieldContextMenu
},
panelContextMenu() {
return this.$store.state.contextMenu.isShowRightPanel
},
optionFieldFComponentRender() {
let component
switch (this.contextMenuField.name) {
case this.$t('field.info'):
component = () => import('@/components/ADempiere/Field/contextMenuField/contextInfo')
break
case this.$t('language'):
component = () => import('@/components/ADempiere/Field/contextMenuField/translated/index')
break
case this.$t('field.calculator'):
component = () => import('@/components/ADempiere/Field/contextMenuField/calculator')
break
case this.$t('field.preference'):
component = () => import('@/components/ADempiere/Field/contextMenuField/preference/index')
break
}
return component
},
componentRender() {
if (this.isEmptyValue(this.field.componentPath || !this.field.isSupported)) {
return () => import('@/components/ADempiere/Field/FieldText')
@ -470,6 +526,8 @@ export default {
}
if (this.isMobile) {
this.$store.commit('changeShowRigthPanel', true)
} else {
this.visibleForDesktop = true
}
this.$store.commit('changeShowPopoverField', true)
this.$store.dispatch('setOptionField', command)
@ -503,6 +561,27 @@ export default {
}
}
</script>
<style>
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
background: white;
}
.el-dropdown-menu--mini .el-dropdown-menu__item {
line-height: 14px;
padding: 0px 15px;
padding-top: 0%;
padding-right: 15px;
padding-bottom: 0%;
padding-left: 15px;
font-size: 10px;
background: white;
}
.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided {
margin-top: 0%;
}
.el-popper {
padding: 0px;
}
</style>
<style scoped>
.svg-icon {
width: 1em;
@ -519,8 +598,8 @@ export default {
top: 0;
left: 0;
z-index: 10;
padding: 10px 0;
margin: 5px 0;
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
border: 1px solid #e6ebf5;
border-radius: 4px;