1
0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-10 12:01:57 +08:00

feat: Standard method to is displayed field/column (#924)

This commit is contained in:
Edwin Betancourt 2021-06-18 15:08:23 -04:00 committed by GitHub
parent 16db3d6683
commit 2247f814bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 150 additions and 59 deletions

View File

@ -22,10 +22,9 @@ import TableMainMenu from '@/components/ADempiere/DataTable/menu'
import IconElement from '@/components/ADempiere/IconElement' import IconElement from '@/components/ADempiere/IconElement'
import { formatField } from '@/utils/ADempiere/valueFormat' import { formatField } from '@/utils/ADempiere/valueFormat'
import MainPanel from '@/components/ADempiere/Panel' import MainPanel from '@/components/ADempiere/Panel'
import { sortFields } from '@/utils/ADempiere/dictionaryUtils' import { fieldIsDisplayed, sortFields } from '@/utils/ADempiere/dictionaryUtils.js'
import { FIELDS_DECIMALS, FIELDS_QUANTITY, COLUMNS_READ_ONLY_FORM } from '@/utils/ADempiere/references' import { FIELDS_DECIMALS, FIELDS_QUANTITY, COLUMNS_READ_ONLY_FORM } from '@/utils/ADempiere/references'
import { LOG_COLUMNS_NAME_LIST } from '@/utils/ADempiere/dataUtils.js' import { LOG_COLUMNS_NAME_LIST } from '@/utils/ADempiere/dataUtils.js'
import { fieldIsDisplayed } from '@/utils/ADempiere'
import evaluator from '@/utils/ADempiere/evaluator' import evaluator from '@/utils/ADempiere/evaluator'
import TableMixin from './mixin/tableMixin.js' import TableMixin from './mixin/tableMixin.js'
import TableMixinSort from './mixin/mixinTableSort.js' import TableMixinSort from './mixin/mixinTableSort.js'
@ -152,10 +151,11 @@ export default {
return this.$store.getters.getHeigth return this.$store.getters.getHeigth
}, },
tableHeaderStyle() { tableHeaderStyle() {
// record navigation
if (this.isParent) { if (this.isParent) {
if (!this.isEmptyValue(this.activeName)) { if (!this.isEmptyValue(this.activeName)) {
return { return {
height: '55%', height: '43%',
overflow: 'auto' overflow: 'auto'
} }
} else if (this.isMobile) { } else if (this.isMobile) {
@ -165,10 +165,12 @@ export default {
} }
} }
return { return {
height: '11%', height: '86px',
overflow: 'hidden' overflow: 'hidden'
} }
} }
// tab children and browser result
if (this.isMobile) { if (this.isMobile) {
return { return {
height: '10%' height: '10%'
@ -291,6 +293,15 @@ export default {
}, },
methods: { methods: {
sortFields, sortFields,
/**
* Verify is displayed field in column table
*/
isDisplayedField(field) {
return fieldIsDisplayed(field, true) &&
field.isShowedTableFromUser
},
actionAdvancedQuery() { actionAdvancedQuery() {
const activeNames = [] const activeNames = []
if (!this.activeName.length) { if (!this.activeName.length) {
@ -444,7 +455,7 @@ export default {
if (this.preferenceClientId !== parseInt(row.AD_Client_ID, 10)) { if (this.preferenceClientId !== parseInt(row.AD_Client_ID, 10)) {
return true return true
} }
if (fieldIsDisplayed(field)) { if (this.isDisplayedField(field)) {
// columnName: IsActive // columnName: IsActive
const fieldReadOnlyForm = COLUMNS_READ_ONLY_FORM.find(item => { const fieldReadOnlyForm = COLUMNS_READ_ONLY_FORM.find(item => {
return !item.isChangedAllForm && return !item.isChangedAllForm &&
@ -529,7 +540,7 @@ export default {
return new Promise(resolve => { return new Promise(resolve => {
const fieldFocus = this.fieldsList.find(itemField => { const fieldFocus = this.fieldsList.find(itemField => {
if (Object.prototype.hasOwnProperty.call(this.$refs, itemField.columnName)) { if (Object.prototype.hasOwnProperty.call(this.$refs, itemField.columnName)) {
if (fieldIsDisplayed(itemField) && !itemField.isReadOnly && itemField.isUpdateable) { if (this.isDisplayedField(itemField) && !itemField.isReadOnly && itemField.isUpdateable) {
return true return true
} }
} }
@ -675,17 +686,6 @@ export default {
this.recordsSearchTableChildren = result this.recordsSearchTableChildren = result
} }
}, },
/**
* Verify is displayed field in column table
*/
isDisplayed(field) {
const isDisplayed = field.isDisplayed &&
field.isDisplayedFromLogic &&
field.isShowedTableFromUser &&
!field.isKey
// Verify for displayed and is active
return field.isActive && isDisplayed
},
/** /**
* Get the tab object with all its attributes as well as the fields it contains * Get the tab object with all its attributes as well as the fields it contains
*/ */

View File

@ -15,6 +15,7 @@
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with this program. If not, see <https:www.gnu.org/licenses/>. along with this program. If not, see <https:www.gnu.org/licenses/>.
--> -->
<template> <template>
<el-select <el-select
v-model="fieldsListShowed" v-model="fieldsListShowed"
@ -36,6 +37,8 @@
</template> </template>
<script> <script>
import { fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils.js'
export default { export default {
name: 'FilterColumns', name: 'FilterColumns',
props: { props: {
@ -54,17 +57,14 @@ export default {
// available fields // available fields
fieldsListAvailable() { fieldsListAvailable() {
return this.fieldsList.filter(fieldItem => { return this.fieldsList.filter(fieldItem => {
const isDisplayed = fieldItem.isDisplayed || fieldItem.isDisplayedFromLogic return fieldIsDisplayed(fieldItem, true)
return fieldItem.isActive && isDisplayed && !fieldItem.isKey
}) })
}, },
fieldsListShowed: { fieldsListShowed: {
get() { get() {
// columns showed // columns showed
return this.fieldsList.filter(itemField => { return this.fieldsListAvailable.filter(itemField => {
if (itemField.isShowedTableFromUser && (itemField.isDisplayed || itemField.isDisplayedFromLogic) && !itemField.isKey) { return itemField.isShowedTableFromUser
return true
}
}).map(itemField => { }).map(itemField => {
return itemField.columnName return itemField.columnName
}) })

View File

@ -32,18 +32,19 @@
@shortkey.native="actionAdvancedQuery()" @shortkey.native="actionAdvancedQuery()"
> >
<el-collapse-item :title="$t('table.dataTable.advancedQuery')" name="PanelAdvancedQuery"> <el-collapse-item :title="$t('table.dataTable.advancedQuery')" name="PanelAdvancedQuery">
<main-panel <template v-if="isLoadedPanel">
v-if="isLoadedPanel || !isEmptyValue(activeName) && activeName[0] === 'PanelAdvancedQuery'" <main-panel
v-show="!isEmptyValue(activeName) && activeName[0] === 'PanelAdvancedQuery'" :container-uuid="'table_' + containerUuid"
:container-uuid="'table_' + containerUuid" :parent-uuid="'table_' + parentUuid"
:parent-uuid="'table_' + parentUuid" :metadata="panelMetadata"
:metadata="panelMetadata" panel-type="table"
panel-type="table" is-advanced-query
is-advanced-query class="collapse_item_wrap"
class="collapse_item_wrap" />
/> </template>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
<div v-if="!isMobile"> <div v-if="!isMobile">
<table-main-menu <table-main-menu
:container-uuid="containerUuid" :container-uuid="containerUuid"
@ -172,7 +173,7 @@
/> />
<template v-for="(fieldAttributes, key) in fieldsList"> <template v-for="(fieldAttributes, key) in fieldsList">
<el-table-column <el-table-column
v-if="isDisplayed(fieldAttributes)" v-if="isDisplayedField(fieldAttributes)"
:key="key" :key="key"
:label="headerLabel(fieldAttributes)" :label="headerLabel(fieldAttributes)"
:column-key="fieldAttributes.columnName" :column-key="fieldAttributes.columnName"

View File

@ -16,13 +16,9 @@
along with this program. If not, see <https:www.gnu.org/licenses/>. along with this program. If not, see <https:www.gnu.org/licenses/>.
--> -->
<template> <template>
<!--
this v-show is to indicate that if the field is not shown,
therefore you should not leave the column size spacing of your
<el-col></el-col> container-->
<div v-if="!inTable"> <div v-if="!inTable">
<el-col <el-col
v-if="isDisplayed" v-if="isDisplayedField"
key="is-panel-template" key="is-panel-template"
:xs="24" :xs="24"
:sm="12" :sm="12"
@ -171,19 +167,22 @@ export default {
// DOM properties // DOM properties
required: this.isMandatory, required: this.isMandatory,
readonly: this.isReadOnly, readonly: this.isReadOnly,
displayed: this.isDisplayed, displayed: this.isDisplayedField,
disabled: !this.field.isActive, disabled: !this.field.isActive,
isSelectCreated: this.isSelectCreated, isSelectCreated: this.isSelectCreated,
placeholder: this.field.help ? this.field.help.slice(0, 40) + '...' : '' placeholder: this.field.help ? this.field.help.slice(0, 40) + '...' : ''
} }
}, },
isDisplayed() {
isDisplayedField() {
if (this.isAdvancedQuery) { if (this.isAdvancedQuery) {
return this.field.isShowedFromUser return this.field.isShowedFromUser
} }
return fieldIsDisplayed(this.field) && return fieldIsDisplayed(this.field) &&
(this.isMandatory || this.field.isShowedFromUser || this.inTable) (this.isMandatory || this.field.isShowedFromUser || this.inTable)
}, },
isMandatory() { isMandatory() {
if (this.isAdvancedQuery) { if (this.isAdvancedQuery) {
return false return false
@ -269,7 +268,7 @@ export default {
return 'in-table' return 'in-table'
} }
return '' return ''
}, }
}, },
watch: { watch: {
metadataField(value) { metadataField(value) {

View File

@ -1,3 +1,19 @@
// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
// Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.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/>.
import { import {
isEmptyValue, isEmptyValue,
typeValue typeValue
@ -5,7 +21,7 @@ import {
import { convertObjectToKeyValue } from '@/utils/ADempiere/valueFormat.js' import { convertObjectToKeyValue } from '@/utils/ADempiere/valueFormat.js'
import evaluator, { getContext, parseContext } from '@/utils/ADempiere/contextUtils.js' import evaluator, { getContext, parseContext } from '@/utils/ADempiere/contextUtils.js'
import { showMessage } from '@/utils/ADempiere/notification.js' import { showMessage } from '@/utils/ADempiere/notification.js'
import { assignedGroup } from '@/utils/ADempiere/dictionaryUtils.js' import { assignedGroup, fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils.js'
import router from '@/router' import router from '@/router'
import language from '@/lang' import language from '@/lang'
@ -248,7 +264,10 @@ const actions = {
valueAttribute: true valueAttribute: true
}) })
}, },
/** /**
* Show all columns in table
* TODO: Add show fields in panel
* @param {string} containerUuid * @param {string} containerUuid
* @param {array} fieldsList * @param {array} fieldsList
*/ */
@ -259,10 +278,10 @@ const actions = {
if (isEmptyValue(fieldsList)) { if (isEmptyValue(fieldsList)) {
fieldsList = getters.getFieldsListFromPanel(containerUuid) fieldsList = getters.getFieldsListFromPanel(containerUuid)
} }
const fieldsIncludes = [] const fieldsIncludes = []
fieldsList.forEach(fieldItem => { fieldsList.forEach(fieldItem => {
const isDisplayed = fieldItem.isDisplayed && fieldItem.isDisplayedFromLogic && !fieldItem.isKey if (fieldIsDisplayed(fieldItem, true)) {
if (fieldItem.isActive && isDisplayed) {
fieldsIncludes.push(fieldItem.columnName) fieldsIncludes.push(fieldItem.columnName)
} }
}) })

View File

@ -136,6 +136,7 @@ const getters = {
*/ */
getFieldsListNotMandatory: (state, getters) => ({ getFieldsListNotMandatory: (state, getters) => ({
containerUuid, containerUuid,
isTable = false,
isEvaluateShowed = true isEvaluateShowed = true
}) => { }) => {
// all optionals (not mandatory) fields // all optionals (not mandatory) fields
@ -145,13 +146,11 @@ const getters = {
if (isMandatory) { if (isMandatory) {
return false return false
} }
const isButtonField = fieldItem.componentPath === 'FieldButton'
if (isButtonField) {
return false
}
if (isEvaluateShowed) { if (isEvaluateShowed) {
return fieldIsDisplayed(fieldItem) return fieldIsDisplayed(fieldItem, isTable)
} }
return true return true
}) })
}, },
@ -329,6 +328,7 @@ const getters = {
const fieldsList = getters.getFieldsListFromPanel(containerUuid) const fieldsList = getters.getFieldsListFromPanel(containerUuid)
let fieldsIsDisplayed = [] let fieldsIsDisplayed = []
const fieldsNotDisplayed = [] const fieldsNotDisplayed = []
if (fieldsList.length) { if (fieldsList.length) {
fieldsIsDisplayed = fieldsList.filter(itemField => { fieldsIsDisplayed = fieldsList.filter(itemField => {
const isMandatory = itemField.isMandatory && itemField.isMandatoryFromLogic const isMandatory = itemField.isMandatory && itemField.isMandatoryFromLogic
@ -338,8 +338,9 @@ const getters = {
fieldsNotDisplayed.push(itemField) fieldsNotDisplayed.push(itemField)
}) })
} }
return { return {
fieldIsDisplayed, fieldsIsDisplayed,
fieldsNotDisplayed, fieldsNotDisplayed,
totalField: fieldsList.length, totalField: fieldsList.length,
isDisplayed: Boolean(fieldsIsDisplayed.length) isDisplayed: Boolean(fieldsIsDisplayed.length)

View File

@ -17,7 +17,7 @@
import evaluator from '@/utils/ADempiere/evaluator' import evaluator from '@/utils/ADempiere/evaluator'
import { isEmptyValue, parsedValueComponent } from '@/utils/ADempiere/valueUtils' import { isEmptyValue, parsedValueComponent } from '@/utils/ADempiere/valueUtils'
import { getContext, getParentFields, getPreference, parseContext } from '@/utils/ADempiere/contextUtils' import { getContext, getParentFields, getPreference, parseContext } from '@/utils/ADempiere/contextUtils'
import REFERENCES, { DEFAULT_SIZE, FIELDS_HIDDEN } from '@/utils/ADempiere/references' import REFERENCES, { BUTTON, DEFAULT_SIZE, FIELDS_HIDDEN } from '@/utils/ADempiere/references'
import { FIELD_OPERATORS_LIST } from '@/utils/ADempiere/dataUtils' import { FIELD_OPERATORS_LIST } from '@/utils/ADempiere/dataUtils'
import language from '@/lang' import language from '@/lang'
@ -571,24 +571,95 @@ export function sortFields({
* @returns {boolean} * @returns {boolean}
*/ */
export function fieldIsDisplayed({ export function fieldIsDisplayed({
// standard
panelType, panelType,
isActive, isActive,
isDisplayed, isDisplayed,
isDisplayedFromLogic, displayType,
isQueryCriteria // panel
}) { isQueryCriteria,
// Verify if field is active isKey,
if (!isActive) { // table
isDisplayedGrid,
// other
isDisplayedFromLogic
}, isTable = false) {
// button field not showed
if (displayType === BUTTON.id) {
return false return false
} }
// verify if field is active
if (!isActive || !isDisplayed) {
return false
}
// window (record navigation and tab childs), browser (table result)
if (isTable) {
return fieldIsDisplayedTable({
// standard
panelType,
// table,
isKey,
isDisplayedGrid,
// other
isDisplayedFromLogic
})
}
// window, process and report, browser (table result)
return fieldIsDisplayedPanel({
// standard
panelType,
// panel
isQueryCriteria,
// other
isDisplayedFromLogic
})
}
/**
* Determinate if field is displayed in panel
* @returns {boolean}
*/
export function fieldIsDisplayedPanel({
// standard
panelType,
// panel
isQueryCriteria,
// other
isDisplayedFromLogic
}) {
// browser query criteria // browser query criteria
if (panelType === 'browser') { if (panelType === 'browser') {
return isQueryCriteria return isQueryCriteria
} }
// window, table (advanced query), process and report, browser (table) result // window, process and report
return isDisplayed && isDisplayedFromLogic return isDisplayedFromLogic
}
/**
* Determinate if field/column is displayed in table
* @returns {boolean}
*/
export function fieldIsDisplayedTable({
// standard
panelType,
// table,
isKey,
isDisplayedGrid,
// other
isDisplayedFromLogic
}) {
// window table
if (panelType === 'window' && !isDisplayedGrid) {
return false
}
// window , browser (table) result
return isDisplayedFromLogic &&
!isKey
} }
// Convert action to action name for route // Convert action to action name for route