mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 20:39:48 +08:00
add context menu field mode mobile (#705)
* add context menu field mode mobile * minimal change * minimal changes * minimal changes * minimal changes * style button * change style Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>
This commit is contained in:
Elsio Sanchez
GitHub
parent
8b43985c89
commit
a91d027920
@ -1,131 +1,125 @@
|
||||
<template>
|
||||
<div class="container-submenu container-context-menu">
|
||||
<el-menu
|
||||
ref="contextMenu"
|
||||
v-shortkey="shorcutKey"
|
||||
:router="false"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
menu-trigger="hover"
|
||||
unique-opened
|
||||
@shortkey.native="actionContextMenu"
|
||||
<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)"
|
||||
>
|
||||
<!-- 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">
|
||||
{{ $t('components.contextMenuActions') }}
|
||||
</template>
|
||||
<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-scrollbar wrap-class="scroll-child">
|
||||
<el-menu-item
|
||||
v-for="(child, key) in action.childs"
|
||||
:key="key"
|
||||
:index="child.uuid"
|
||||
@click="runAction(child)"
|
||||
>
|
||||
{{ child.name }}
|
||||
</el-menu-item>
|
||||
</el-scrollbar>
|
||||
</el-submenu>
|
||||
<el-menu-item
|
||||
v-else
|
||||
v-show="!action.hidden"
|
||||
{{ defaultActionName }}
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-scrollbar wrap-class="scroll-child">
|
||||
<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"
|
||||
:index="action.name"
|
||||
:disabled="panelType === 'browser' ? isEmptyValue(getDataSelection) : action.disabled"
|
||||
@click="runAction(action)"
|
||||
:command="action"
|
||||
:divided="true"
|
||||
>
|
||||
{{ 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"
|
||||
@click.native="exportRecord(defaultFromatExport)"
|
||||
>
|
||||
<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-submenu>
|
||||
<el-menu-item v-else disabled index="actionsDisabled">
|
||||
{{ $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" />
|
||||
<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 }}
|
||||
</b>
|
||||
</span>
|
||||
<p
|
||||
class="description"
|
||||
>
|
||||
{{ $t('data.noDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</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)"
|
||||
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)"
|
||||
>
|
||||
{{ 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>
|
||||
</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"
|
||||
>
|
||||
{{ 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>
|
||||
|
||||
@ -133,9 +127,181 @@
|
||||
import contextMixin from './contextMenuMixin.js'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenuDesktop',
|
||||
name: 'ContextMenuMobile',
|
||||
mixins: [
|
||||
contextMixin
|
||||
]
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
openedsMenu: [
|
||||
'actions'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isPanelTypeMobile() {
|
||||
if (['process', 'report'].includes(this.$route.meta.type)) {
|
||||
return true
|
||||
}
|
||||
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;
|
||||
vertical-align: -0.15em;
|
||||
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>
|
||||
|
||||
@ -77,6 +77,16 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selector {
|
||||
/* definir una altura pequeña para forzar el scroll */
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
width: 300px;
|
||||
|
||||
/* cambiar el estilo por defecto de la barra de scroll */
|
||||
scrollbar-color: yellow #800080;
|
||||
scrollbar-width: 10px;
|
||||
}
|
||||
.el-submenu .el-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
@ -1,100 +1,97 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="text" :disabled="fieldAttributes.readonly" @click="focusCalc">
|
||||
<i class="el-icon-s-operation el-icon--right" />
|
||||
</el-button>
|
||||
|
||||
<el-dropdown-menu slot="dropdown" class="dropdown-calc">
|
||||
<el-input
|
||||
ref="calculatorInput"
|
||||
v-model="calcValue"
|
||||
class="calculator-input"
|
||||
size="mini"
|
||||
readonly
|
||||
@keydown.native="calculateValue"
|
||||
@keyup.enter.native="changeValue"
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>
|
||||
{{ $t('field.field') }}
|
||||
<b> {{ fieldAttributes.name }} </b>
|
||||
</span>
|
||||
</div>
|
||||
<el-form ref="form" label-position="top" label-width="120px" @submit.native.prevent="notSubmitForm">
|
||||
<el-form-item label="Valor">
|
||||
<el-input
|
||||
ref="calculatorInput"
|
||||
v-model="calcValue"
|
||||
class="calculator-input"
|
||||
size="mini"
|
||||
readonly
|
||||
@keydown.native="calculateValue"
|
||||
@keyup.enter.native="changeValue"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
ref="calculator"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
size="mini"
|
||||
:show-header="false"
|
||||
:span-method="spanMethod"
|
||||
class="calculator-table"
|
||||
@cell-click="sendValue"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row1"
|
||||
height="15"
|
||||
width="45"
|
||||
>
|
||||
<!--
|
||||
<template slot="append">
|
||||
{{ valueToDisplay }}
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row1.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
-->
|
||||
</el-input>
|
||||
|
||||
<el-table
|
||||
ref="calculator"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
size="mini"
|
||||
:show-header="false"
|
||||
:span-method="spanMethod"
|
||||
class="calculator-table"
|
||||
@cell-click="sendValue"
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row2"
|
||||
height="15"
|
||||
width="45"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row1"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row1.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row2"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row2.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row3"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row3.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row4"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row4.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row5"
|
||||
height="15"
|
||||
width="35"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row5.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row2.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row3"
|
||||
height="15"
|
||||
width="45"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row3.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row4"
|
||||
height="15"
|
||||
width="45"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row4.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="row5"
|
||||
height="15"
|
||||
width="45"
|
||||
>
|
||||
<template slot-scope="{ row, column }">
|
||||
<el-button type="text" :disabled="isDisabled(row, column)">
|
||||
{{ row.row5.value }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -115,20 +112,33 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
calcValue: this.fieldValue,
|
||||
calcValue: this.valueField,
|
||||
valueToDisplay: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableData() {
|
||||
return buttons
|
||||
},
|
||||
valueField() {
|
||||
return this.$store.getters.getValueOfField({
|
||||
parentUuid: this.fieldAttributes.parentUuid,
|
||||
containerUuid: this.fieldAttributes.containerUuid,
|
||||
columnName: this.fieldAttributes.columnName
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
valueField(value) {
|
||||
console.log(value)
|
||||
},
|
||||
fieldValue(value) {
|
||||
this.calcValue = value
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.calcValue = this.valueField
|
||||
},
|
||||
methods: {
|
||||
sendValue(row, column) {
|
||||
const button = row[column.property]
|
||||
@ -182,6 +192,7 @@ export default {
|
||||
.finally(() => {
|
||||
this.clearVariables()
|
||||
this.$children[0].visible = false
|
||||
this.$store.commit('changeShowRigthPanel', false)
|
||||
})
|
||||
},
|
||||
spanMethod({ row, column }) {
|
||||
@ -221,7 +232,7 @@ export default {
|
||||
return false
|
||||
},
|
||||
calculateValue(event) {
|
||||
const result = this.calculationValue(this.fieldValue, event)
|
||||
const result = this.calculationValue(this.valueField, event)
|
||||
if (!this.isEmptyValue(result)) {
|
||||
this.valueToDisplay = result
|
||||
} else {
|
||||
@ -1,36 +1,32 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-popover
|
||||
ref="contextInfoField"
|
||||
placement="top"
|
||||
width="300"
|
||||
trigger="click"
|
||||
>
|
||||
<p
|
||||
class="pre-formatted"
|
||||
v-html="fieldAttributes.contextInfo.messageText.msgText"
|
||||
/>
|
||||
<div>
|
||||
<span class="custom-tittle-popover">
|
||||
{{ fieldAttributes.name }}
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>
|
||||
{{ $t('field.field') }}
|
||||
<b> {{ fieldAttributes.name }} </b>
|
||||
</span>
|
||||
{{ fieldAttributes.help }}
|
||||
</div>
|
||||
<template v-for="(zoomItem, index) in fieldAttributes.reference.zoomWindows">
|
||||
<el-button
|
||||
:key="index"
|
||||
type="text"
|
||||
@click="redirect({ window: zoomItem })"
|
||||
>
|
||||
{{ $t('table.ProcessActivity.zoomIn') }}
|
||||
{{ zoomItem.name }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<span v-popover:contextInfoField>
|
||||
{{ fieldAttributes.name }}
|
||||
</span>
|
||||
</span>
|
||||
<el-form ref="form" label-position="top" label-width="120px" style="max-height: 70vh; overflow: auto;" @submit.native.prevent="notSubmitForm">
|
||||
<el-form-item :label="$t('field.container.description')">
|
||||
{{ fieldAttributes.description }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('field.container.help')">
|
||||
{{ fieldAttributes.help }}
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<template v-for="(zoomItem, index) in fieldAttributes.reference.zoomWindows">
|
||||
<el-button
|
||||
:key="index"
|
||||
type="text"
|
||||
@click="redirect({ window: zoomItem })"
|
||||
>
|
||||
{{ $t('table.ProcessActivity.zoomIn') }}
|
||||
{{ zoomItem.name }}
|
||||
</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -64,6 +60,10 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
notSubmitForm(event) {
|
||||
event.preventDefault()
|
||||
return false
|
||||
},
|
||||
redirect({ window }) {
|
||||
const viewSearch = recursiveTreeSearch({
|
||||
treeData: this.permissionRoutes,
|
||||
@ -89,6 +89,7 @@ export default {
|
||||
message: this.$t('notifications.noRoleAccess')
|
||||
})
|
||||
}
|
||||
this.$store.commit('changeShowRigthPanel', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,93 +1,89 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="text" :disabled="sourceField.readonly">
|
||||
<i class="el-icon-notebook-2 el-icon--right" @click="isActive = !isActive" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="dropdown-calc">
|
||||
<el-card
|
||||
v-if="!isEmptyValue(metadataList)"
|
||||
class="box-card"
|
||||
>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>
|
||||
{{ $t('components.preference.title') }}
|
||||
<b>
|
||||
{{ sourceField.name }}
|
||||
</b>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text item">
|
||||
<el-card
|
||||
v-if="!isEmptyValue(metadataList)"
|
||||
class="box-card"
|
||||
>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>
|
||||
{{ $t('components.preference.title') }}
|
||||
<b>
|
||||
{{ sourceField.name }}
|
||||
{{
|
||||
getDescriptionOfPreference
|
||||
fieldValue
|
||||
}}
|
||||
</div>
|
||||
<br>
|
||||
<div class="text item">
|
||||
<el-form
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item>
|
||||
<p slot="label">
|
||||
{{ sourceField.name }}: {{ code }}
|
||||
</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form
|
||||
label-position="top"
|
||||
:inline="true"
|
||||
class="demo-form-inline"
|
||||
size="medium"
|
||||
>
|
||||
<el-form-item
|
||||
v-for="(field) in metadataList"
|
||||
:key="field.sequence"
|
||||
>
|
||||
<p slot="label">
|
||||
{{ field.name }}
|
||||
</p>
|
||||
<el-switch
|
||||
v-model="field.value"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<br>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<samp style="float: left; padding-right: 10px;">
|
||||
<el-button
|
||||
type="danger"
|
||||
class="custom-button-address-location"
|
||||
icon="el-icon-delete"
|
||||
@click="remove()"
|
||||
/>
|
||||
</samp>
|
||||
<samp style="float: right; padding-right: 10px;">
|
||||
<el-button
|
||||
type="danger"
|
||||
class="custom-button-address-location"
|
||||
icon="el-icon-close"
|
||||
@click="close()"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="custom-button-address-location"
|
||||
icon="el-icon-check"
|
||||
@click="sendValue()"
|
||||
/>
|
||||
</samp>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<div
|
||||
v-else
|
||||
v-loading="isEmptyValue(metadataList)"
|
||||
:element-loading-text="$t('notifications.loading')"
|
||||
element-loading-background="rgba(255, 255, 255, 0.8)"
|
||||
class="loading-window"
|
||||
/>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</b>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text item">
|
||||
{{
|
||||
getDescriptionOfPreference
|
||||
}}
|
||||
</div>
|
||||
<br>
|
||||
<div class="text item">
|
||||
<el-form
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item>
|
||||
<p slot="label">
|
||||
{{ sourceField.name }}: {{ fieldValue }}
|
||||
</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form
|
||||
label-position="top"
|
||||
:inline="true"
|
||||
class="demo-form-inline"
|
||||
size="medium"
|
||||
>
|
||||
<el-form-item
|
||||
v-for="(field) in metadataList"
|
||||
:key="field.sequence"
|
||||
>
|
||||
<p slot="label">
|
||||
{{ field.name }}
|
||||
</p>
|
||||
<el-switch
|
||||
v-model="field.value"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<br>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<samp style="float: left; padding-right: 10px;">
|
||||
<el-button
|
||||
type="danger"
|
||||
class="custom-button-address-location"
|
||||
icon="el-icon-delete"
|
||||
@click="remove()"
|
||||
/>
|
||||
</samp>
|
||||
<samp style="float: right; padding-right: 10px;">
|
||||
<el-button
|
||||
type="danger"
|
||||
class="custom-button-address-location"
|
||||
icon="el-icon-close"
|
||||
@click="close()"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="custom-button-address-location"
|
||||
icon="el-icon-check"
|
||||
@click="sendValue()"
|
||||
/>
|
||||
</samp>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<div
|
||||
v-else
|
||||
v-loading="isEmptyValue(metadataList)"
|
||||
:element-loading-text="$t('notifications.loading')"
|
||||
element-loading-background="rgba(255, 255, 255, 0.8)"
|
||||
class="loading-window"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -184,10 +180,16 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
if (this.isEmptyValue(this.metadataList)) {
|
||||
this.setFieldsList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createFieldFromDictionary,
|
||||
close() {
|
||||
this.$children[0].visible = false
|
||||
this.$store.commit('changeShowRigthPanel', false)
|
||||
},
|
||||
remove() {
|
||||
const isForCurrentUser = this.metadataList.find(field => field.columnName === 'AD_User_ID').value
|
||||
@ -249,7 +251,7 @@ export default {
|
||||
setPreference({
|
||||
parentUuid: this.sourceField.parentUuid,
|
||||
attribute: this.sourceField.columnName,
|
||||
value: this.code,
|
||||
value: this.fieldValue,
|
||||
isForCurrentUser,
|
||||
isForCurrentClient,
|
||||
isForCurrentOrganization,
|
||||
@ -266,6 +268,7 @@ export default {
|
||||
message: error.message,
|
||||
type: 'error'
|
||||
})
|
||||
this.close()
|
||||
console.warn(`setPreference error: ${error.message}.`)
|
||||
})
|
||||
}
|
||||
@ -1,63 +1,58 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-popover
|
||||
ref="translatedField"
|
||||
placement="top"
|
||||
width="300"
|
||||
trigger="click"
|
||||
@show="getTranslation"
|
||||
>
|
||||
<div>
|
||||
<span class="custom-tittle-popover">
|
||||
{{ fieldAttributes.name }}
|
||||
</span>
|
||||
<template v-if="!isEmptyValue(fieldAttributes.help)">
|
||||
: {{ fieldAttributes.help }}
|
||||
</template>
|
||||
</div>
|
||||
<el-form-item
|
||||
:required="true"
|
||||
>
|
||||
<template slot="label">
|
||||
{{ $t('language') + ':' }}
|
||||
</template>
|
||||
<el-select
|
||||
v-model="langValue"
|
||||
size="medium"
|
||||
style="width: 100%;"
|
||||
filterable
|
||||
@change="getTranslation"
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>
|
||||
{{ $t('field.field') }}
|
||||
<b> {{ fieldAttributes.name }} </b>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" label-position="top">
|
||||
<el-form-item :label="$t('field.container.description')">
|
||||
{{ fieldAttributes.description }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('field.container.help')">
|
||||
{{ fieldAttributes.help }}
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:required="true"
|
||||
>
|
||||
<!-- <el-option
|
||||
key="blank-option"
|
||||
:value="undefined"
|
||||
label=" "
|
||||
/> -->
|
||||
<el-option
|
||||
v-for="(optionLang, key) in languageList"
|
||||
:key="key"
|
||||
:value="optionLang.language"
|
||||
:label="optionLang.languageName"
|
||||
<template slot="label">
|
||||
{{ $t('language') + ':' }}
|
||||
</template>
|
||||
<el-select
|
||||
v-model="langValue"
|
||||
size="medium"
|
||||
style="width: 100%;"
|
||||
filterable
|
||||
@change="getTranslation"
|
||||
>
|
||||
<!-- <el-option
|
||||
key="blank-option"
|
||||
:value="undefined"
|
||||
label=" "
|
||||
/> -->
|
||||
<el-option
|
||||
v-for="(optionLang, key) in languageList"
|
||||
:key="key"
|
||||
:value="optionLang.language"
|
||||
:label="optionLang.languageName"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('field.container.codeTranslation')"
|
||||
:required="true"
|
||||
>
|
||||
<el-input
|
||||
v-model="translatedValue"
|
||||
:disabled="isEmptyValue(langValue)"
|
||||
@change="changeTranslationValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="Translated Value:"
|
||||
:required="true"
|
||||
>
|
||||
<el-input
|
||||
v-model="translatedValue"
|
||||
:disabled="isEmptyValue(langValue)"
|
||||
@change="changeTranslationValue"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-popover>
|
||||
<svg-icon
|
||||
v-popover:translatedField
|
||||
class-name="international-icon"
|
||||
icon-class="language"
|
||||
/>
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -18,44 +18,49 @@
|
||||
:required="isMandatory"
|
||||
>
|
||||
<template slot="label">
|
||||
<operator-comparison
|
||||
v-if="field.isComparisonField"
|
||||
key="is-field-operator-comparison"
|
||||
:field-attributes="fieldAttributes"
|
||||
:field-value="field.value"
|
||||
/>
|
||||
<context-info
|
||||
v-else-if="isContextInfo"
|
||||
key="is-field-context-info"
|
||||
:field-attributes="fieldAttributes"
|
||||
:field-value="field.value"
|
||||
/>
|
||||
<span v-else key="is-field-name">
|
||||
{{ isFieldOnly }}
|
||||
</span>
|
||||
|
||||
<document-status
|
||||
v-if="isDocuemntStatus"
|
||||
:field="fieldAttributes"
|
||||
/>
|
||||
|
||||
<translated
|
||||
v-if="field.isTranslatedField"
|
||||
:field-attributes="fieldAttributes"
|
||||
:record-uuid="field.recordUuid"
|
||||
/>
|
||||
|
||||
<calculator
|
||||
v-if="field.isNumericField && !field.isReadOnlyFromLogic"
|
||||
:field-attributes="fieldAttributes"
|
||||
:field-value="recordDataFields"
|
||||
/>
|
||||
<preference
|
||||
v-if="field.panelType !== 'form'"
|
||||
:source-field="fieldAttributes"
|
||||
:field-value="recordDataFields"
|
||||
:panel-type="field.panelType"
|
||||
/>
|
||||
<el-dropdown
|
||||
size="mini"
|
||||
:hide-on-click="true"
|
||||
trigger="click"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<span key="is-field-name">
|
||||
{{ field.name }}
|
||||
</span>
|
||||
<i
|
||||
class="el-icon-more el-icon--right"
|
||||
/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<template
|
||||
v-for="(option, key) in optionField"
|
||||
>
|
||||
<el-dropdown-item
|
||||
v-if="option.enabled"
|
||||
:key="key"
|
||||
:command="option"
|
||||
:divided="true"
|
||||
>
|
||||
<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-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<component
|
||||
:is="componentRender"
|
||||
@ -78,14 +83,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import contextInfo from '@/components/ADempiere/Field/popover/contextInfo'
|
||||
import documentStatus from '@/components/ADempiere/Field/popover/documentStatus'
|
||||
import preference from '@/components/ADempiere/Field/popover/preference/index'
|
||||
import operatorComparison from '@/components/ADempiere/Field/popover/operatorComparison'
|
||||
import translated from '@/components/ADempiere/Field/popover/translated'
|
||||
import calculator from '@/components/ADempiere/Field/popover/calculator'
|
||||
import { DEFAULT_SIZE } from '@/utils/ADempiere/references'
|
||||
import { evalutateTypeField, fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils'
|
||||
import { recursiveTreeSearch } from '@/utils/ADempiere/valueUtils.js'
|
||||
|
||||
/**
|
||||
* This is the base component for linking the components according to the
|
||||
@ -94,12 +96,8 @@ import { evalutateTypeField, fieldIsDisplayed } from '@/utils/ADempiere/dictiona
|
||||
export default {
|
||||
name: 'FieldDefinition',
|
||||
components: {
|
||||
contextInfo,
|
||||
documentStatus,
|
||||
operatorComparison,
|
||||
translated,
|
||||
calculator,
|
||||
preference
|
||||
operatorComparison
|
||||
},
|
||||
props: {
|
||||
// receives the property that is an object with all the attributes
|
||||
@ -126,11 +124,15 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
field: {}
|
||||
field: {},
|
||||
visible: this.$store.state.contextMenu.isShowPopoverField
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// load the component that is indicated in the attributes of received property
|
||||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
componentRender() {
|
||||
if (this.isEmptyValue(this.field.componentPath || !this.field.isSupported)) {
|
||||
return () => import('@/components/ADempiere/Field/FieldText')
|
||||
@ -379,6 +381,53 @@ export default {
|
||||
}
|
||||
return Boolean(this.field.contextInfo && this.field.contextInfo.isActive) ||
|
||||
Boolean(this.field.reference && this.field.reference.zoomWindows.length)
|
||||
},
|
||||
optionField() {
|
||||
return [
|
||||
{
|
||||
name: this.$t('field.info'),
|
||||
enabled: true,
|
||||
fieldAttributes: this.fieldAttributes,
|
||||
icon: 'el-icon-info'
|
||||
},
|
||||
{
|
||||
name: this.$t('table.ProcessActivity.zoomIn'),
|
||||
enabled: this.isContextInfo,
|
||||
fieldAttributes: this.fieldAttributes,
|
||||
icon: 'el-icon-files'
|
||||
},
|
||||
{
|
||||
name: this.$t('language'),
|
||||
enabled: this.field.isTranslatedField,
|
||||
fieldAttributes: this.fieldAttributes,
|
||||
icon: 'language'
|
||||
},
|
||||
{
|
||||
name: this.$t('field.calculator'),
|
||||
enabled: this.field.isNumericField,
|
||||
fieldAttributes: this.fieldAttributes,
|
||||
recordDataFields: this.recordDataFields,
|
||||
valueField: this.valueField,
|
||||
icon: 'el-icon-s-operation'
|
||||
},
|
||||
{
|
||||
name: this.$t('field.preference'),
|
||||
enabled: true,
|
||||
fieldAttributes: this.fieldAttributes,
|
||||
valueField: this.valueField,
|
||||
icon: 'el-icon-notebook-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
permissionRoutes() {
|
||||
return this.$store.getters.permission_routes
|
||||
},
|
||||
valueField() {
|
||||
return this.$store.getters.getValueOfField({
|
||||
parentUuid: this.fieldAttributes.parentUuid,
|
||||
containerUuid: this.fieldAttributes.containerUuid,
|
||||
columnName: this.fieldAttributes.columnName
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -408,14 +457,108 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
recursiveTreeSearch,
|
||||
focusField() {
|
||||
if (this.field.handleRequestFocus || (this.field.displayed && !this.field.readonly)) {
|
||||
this.$refs[this.field.columnName].requestFocus()
|
||||
}
|
||||
},
|
||||
handleCommand(command) {
|
||||
if (command.name === this.$t('table.ProcessActivity.zoomIn')) {
|
||||
this.redirect({ window: command.fieldAttributes.reference.zoomWindows[0] })
|
||||
return
|
||||
}
|
||||
if (this.isMobile) {
|
||||
this.$store.commit('changeShowRigthPanel', true)
|
||||
}
|
||||
this.$store.commit('changeShowPopoverField', true)
|
||||
this.$store.dispatch('setOptionField', command)
|
||||
},
|
||||
redirect({ window }) {
|
||||
const viewSearch = recursiveTreeSearch({
|
||||
treeData: this.permissionRoutes,
|
||||
attributeValue: window.uuid,
|
||||
attributeName: 'meta',
|
||||
secondAttribute: 'uuid',
|
||||
attributeChilds: 'children'
|
||||
})
|
||||
|
||||
if (viewSearch) {
|
||||
this.$router.push({
|
||||
name: viewSearch.name,
|
||||
query: {
|
||||
action: 'advancedQuery',
|
||||
tabParent: 0,
|
||||
[this.fieldAttributes.columnName]: this.value
|
||||
}
|
||||
}, () => {})
|
||||
} else {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
showClose: true,
|
||||
message: this.$t('notifications.noRoleAccess')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1.5em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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;
|
||||
padding-top: 1%;
|
||||
padding-right: 15px;
|
||||
padding-bottom: 1%;
|
||||
padding-left: 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.el-dropdown-menu__item--divided {
|
||||
position: relative;
|
||||
/* margin-top: 6px; */
|
||||
border-top: 1px solid #e6ebf5;
|
||||
}
|
||||
.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>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-tittle-popover {
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
<div class="rightMenu">
|
||||
<div
|
||||
class="handle-button"
|
||||
:style="{ 'top': buttonTop+'%' }"
|
||||
:style="{'top':buttonTop+'px','background-color':theme}"
|
||||
@click="isShowRightPanel=!isShowRightPanel"
|
||||
>
|
||||
<i :class="icon" style="color: gray;" />
|
||||
<i :class="icon" style="color: white;" />
|
||||
</div>
|
||||
|
||||
<div class="rightMenu-items">
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
type: Boolean
|
||||
},
|
||||
buttonTop: {
|
||||
default: 16,
|
||||
default: 250,
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
max-width: 80%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
||||
@ -172,25 +172,21 @@ export default {
|
||||
}
|
||||
|
||||
.handle-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: white;
|
||||
left: -34px;
|
||||
border-radius: 6px 0 0 6px !important;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
pointer-events: auto;
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
font-size: 0px;
|
||||
left: -48px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
border-radius: 6px 0 0 6px !important;
|
||||
z-index: 0;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
line-height: 48px;
|
||||
|
||||
i {
|
||||
font-size: 17px;
|
||||
line-height: 17px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
|
||||
<div v-if="false" ref="rightPanel" :class="{show:show}" class="rightPanel-container">
|
||||
<div class="setting">
|
||||
<div class="showme">
|
||||
<div class="rightPanel-background" />
|
||||
|
||||
@ -269,12 +269,14 @@ export default {
|
||||
advancedQuery: 'Advanced Query'
|
||||
},
|
||||
settings: {
|
||||
title: 'Page style setting',
|
||||
title: 'setting',
|
||||
theme: 'Theme Color',
|
||||
tagsView: 'Open Tags-View',
|
||||
fixedHeader: 'Fixed Header',
|
||||
sidebarLogo: 'Sidebar Logo',
|
||||
showContextMenu: 'Show Context Information'
|
||||
showContextMenu: 'Show Context Information',
|
||||
isShowTitle: 'Show Títle',
|
||||
isShowMenu: 'Show Menu'
|
||||
},
|
||||
profile: {
|
||||
aboutMe: 'About Me',
|
||||
@ -312,6 +314,17 @@ export default {
|
||||
error: 'Error In Callout'
|
||||
}
|
||||
},
|
||||
field: {
|
||||
field: 'Field',
|
||||
info: 'Information',
|
||||
calculator: 'Calculator',
|
||||
preference: 'Preference',
|
||||
codeTranslation: 'Traduccion de Codigo',
|
||||
container: {
|
||||
help: 'Help',
|
||||
description: 'Description'
|
||||
}
|
||||
},
|
||||
data: {
|
||||
createRecordSuccessful: 'New record created successfully',
|
||||
createNewRecord: 'Mode New record',
|
||||
|
||||
@ -244,12 +244,14 @@ export default {
|
||||
advancedQuery: 'Consulta Avanzada'
|
||||
},
|
||||
settings: {
|
||||
title: 'Configuración de estilo de página',
|
||||
title: 'Configuración',
|
||||
theme: 'Color del tema',
|
||||
tagsView: 'Habilitar Tags-View',
|
||||
fixedHeader: 'Encabezado fijo',
|
||||
sidebarLogo: 'Logotipo de la barra lateral',
|
||||
showContextMenu: 'Mostrar Menu de Contexto'
|
||||
showContextMenu: 'Mostrar Menu de Contexto',
|
||||
isShowTitle: 'Mostrar Título',
|
||||
isShowMenu: 'Mostrar Menu'
|
||||
},
|
||||
profile: {
|
||||
aboutMe: 'Sobre Mi',
|
||||
@ -287,6 +289,17 @@ export default {
|
||||
error: 'Error En Callout'
|
||||
}
|
||||
},
|
||||
field: {
|
||||
field: 'Campo',
|
||||
info: 'Informacion',
|
||||
calculator: 'Calculadora',
|
||||
preference: 'Preferencia',
|
||||
codeTranslation: 'Traduccion de Codigo',
|
||||
container: {
|
||||
help: 'Ayuda',
|
||||
description: 'Descripción'
|
||||
}
|
||||
},
|
||||
data: {
|
||||
createRecordSuccessful: 'Nuevo registro creado con exito',
|
||||
createNewRecord: 'Modo nuevo registro',
|
||||
|
||||
@ -1,60 +1,48 @@
|
||||
<template>
|
||||
<div class="drawer-container">
|
||||
<div>
|
||||
<h3 class="drawer-title">{{ $t('settings.title') }}</h3>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>{{ $t('settings.theme') }}</span>
|
||||
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>{{ $t('settings.tagsView') }}</span>
|
||||
<el-switch v-model="tagsView" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>{{ $t('settings.showContextMenu') }}</span>
|
||||
<el-switch v-model="showContextMenu" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>show Title</span>
|
||||
<el-switch v-model="isShowTitleForm" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>{{ $t('settings.fixedHeader') }}</span>
|
||||
<el-switch v-model="fixedHeader" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>Show Header</span>
|
||||
<el-switch v-model="showNavar" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>Show Menu</span>
|
||||
<el-switch v-model="showMenu" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>{{ $t('settings.sidebarLogo') }}</span>
|
||||
<el-switch v-model="sidebarLogo" class="drawer-switch" />
|
||||
</div>
|
||||
<a v-if="isShowJob" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/" target="_blank" class="job-link">
|
||||
<el-alert
|
||||
title="部门目前非常缺人！有兴趣的可以点击了解详情。坐标: 字节跳动"
|
||||
type="success"
|
||||
:closable="false"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div v-if="lang === 'zh'" class="drawer-item">
|
||||
<span>菜单支持拼音搜索</span>
|
||||
<el-switch v-model="supportPinyinSearch" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<el-form label-position="top" :inline="true">
|
||||
<el-form-item
|
||||
:label="$t('settings.theme')"
|
||||
>
|
||||
<theme-picker @change="themeChange" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('settings.fixedHeader')"
|
||||
>
|
||||
<el-switch v-model="fixedHeader" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('settings.tagsView')"
|
||||
>
|
||||
<el-switch v-model="tagsView" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('settings.fixedHeader')"
|
||||
>
|
||||
<el-switch v-model="showNavar" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('settings.showContextMenu')"
|
||||
>
|
||||
<el-switch v-model="showContextMenu" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('settings.isShowTitle')"
|
||||
>
|
||||
<el-switch v-model="isShowTitleForm" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('settings.isShowMenu')"
|
||||
>
|
||||
<el-switch v-model="showMenu" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('settings.sidebarLogo')"
|
||||
>
|
||||
<el-switch v-model="sidebarLogo" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -65,7 +53,9 @@ import ThemePicker from '@/components/ThemePicker'
|
||||
export default {
|
||||
components: { ThemePicker },
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
activeName: '1'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShowTitleForm: {
|
||||
|
||||
@ -14,6 +14,8 @@ import { requestListDocumentActions, requestListDocumentStatuses } from '@/api/A
|
||||
// ]
|
||||
const initStateContextMenu = {
|
||||
isShowRightPanel: false,
|
||||
isShowPopoverField: false,
|
||||
optionField: {},
|
||||
contextMenu: [],
|
||||
listDocumentStatus: {
|
||||
defaultDocumentAction: undefined,
|
||||
@ -47,8 +49,14 @@ const contextMenu = {
|
||||
changeShowRigthPanel(state) {
|
||||
state.isShowRightPanel = !state.isShowRightPanel
|
||||
},
|
||||
changeShowPopoverField(state) {
|
||||
state.isShowPopoverField = !state.isShowPopoverField
|
||||
},
|
||||
resetContextMenu(state) {
|
||||
state = initStateContextMenu
|
||||
},
|
||||
fieldContextMenu(state, payload) {
|
||||
state.optionField = payload
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -143,6 +151,9 @@ const contextMenu = {
|
||||
console.warn(`Error getting document statuses list. Code ${error.code}: ${error.message}.`)
|
||||
})
|
||||
})
|
||||
},
|
||||
setOptionField({ commit }, params) {
|
||||
commit('fieldContextMenu', params)
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
@ -175,6 +186,9 @@ const contextMenu = {
|
||||
},
|
||||
getListDocumentActionByUuid: (state) => (recordUuid) => {
|
||||
return state.listDocumentAction.find(itemDocumentAction => itemDocumentAction.recordUuid === recordUuid)
|
||||
},
|
||||
getFieldContextMenu: (state) => {
|
||||
return state.optionField
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,6 +295,17 @@
|
||||
</el-main>
|
||||
</SplitArea>
|
||||
</Split>
|
||||
<right-panel
|
||||
v-if="panelContextMenu && isMobile"
|
||||
>
|
||||
<component
|
||||
:is="componentRender"
|
||||
:field-attributes="contextMenuField.fieldAttributes"
|
||||
:source-field="contextMenuField.fieldAttributes"
|
||||
:record-uuid="contextMenuField.fieldAttributes.recordUuid"
|
||||
:field-value="contextMenuField.valueField"
|
||||
/>
|
||||
</right-panel>
|
||||
</el-container>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -13,6 +13,8 @@ import RecordLogs from '@/components/ADempiere/ContainerInfo/recordLogs'
|
||||
import WorkflowLogs from '@/components/ADempiere/ContainerInfo/workflowLogs'
|
||||
// Workflow
|
||||
import WorkflowStatusBar from '@/components/ADempiere/WorkflowStatusBar'
|
||||
// Panel right the Context Menu Field
|
||||
import RightPanel from '@/components/ADempiere/RightPanel'
|
||||
|
||||
/**
|
||||
* Window Logic Component View
|
||||
@ -30,6 +32,7 @@ export default {
|
||||
DataTable,
|
||||
splitPane,
|
||||
ModalDialog,
|
||||
RightPanel,
|
||||
ChatEntries,
|
||||
RecordLogs,
|
||||
WorkflowLogs,
|
||||
@ -68,6 +71,30 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
contextMenuField() {
|
||||
return this.$store.getters.getFieldContextMenu
|
||||
},
|
||||
panelContextMenu() {
|
||||
return this.$store.state.contextMenu.isShowRightPanel
|
||||
},
|
||||
componentRender() {
|
||||
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
|
||||
},
|
||||
isNewRecord() {
|
||||
return this.isEmptyValue(this.$route.query) ||
|
||||
this.isEmptyValue(this.$route.query.action) ||
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
<el-tab-pane :label="$t('profile.role')" name="role">
|
||||
<role />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('settings.title')" :name="$t('settings.title')">
|
||||
<settings />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@ -23,15 +26,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import UserCard from './components/UserCard'
|
||||
import Role from '@/views/profile/components/role'
|
||||
import { Settings } from '@/layout/components'
|
||||
|
||||
export default {
|
||||
name: 'Profile',
|
||||
components: {
|
||||
UserCard,
|
||||
Role
|
||||
Role,
|
||||
Settings
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -44,7 +49,24 @@ export default {
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
]),
|
||||
...mapState({
|
||||
sidebar: state => state.app.sidebar,
|
||||
device: state => state.app.device,
|
||||
showSettings: state => state.settings.showSettings,
|
||||
needTagsView: state => state.settings.tagsView,
|
||||
fixedHeader: state => state.settings.fixedHeader,
|
||||
showNavar: state => state.settings.showNavar,
|
||||
showMenu: state => state.settings.showMenu
|
||||
}),
|
||||
classObj() {
|
||||
return {
|
||||
hideSidebar: !this.sidebar.opened,
|
||||
openSidebar: this.sidebar.opened,
|
||||
withoutAnimation: this.sidebar.withoutAnimation,
|
||||
mobile: this.device === 'mobile'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUser()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user