list sheet, tree view sheet and two column select components support hidden field

This commit is contained in:
MaysWind
2024-07-22 23:00:44 +08:00
parent 9f438dd648
commit 7662e0eb02
5 changed files with 51 additions and 13 deletions
+7 -3
View File
@@ -30,6 +30,7 @@
<v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
:key="primaryKeyField ? item[primaryKeyField] : item"
v-for="item in items"
v-show="item && (!primaryHiddenField || !item[primaryHiddenField])"
@click="onPrimaryItemClicked(item)">
<template #prepend>
<ItemIcon class="mr-2" :icon-type="primaryIconType"
@@ -49,6 +50,7 @@
<v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
@click="onSecondaryItemClicked(subItem)">
<template #prepend>
<ItemIcon class="mr-2" :icon-type="secondaryIconType"
@@ -69,7 +71,7 @@
<script>
import {
getFirstItem,
getFirstVisibleItem,
getItemByKeyValue,
getNameByKeyValue,
getPrimaryValueBySecondaryValue
@@ -100,6 +102,7 @@ export default {
'primaryIconField',
'primaryIconType',
'primaryColorField',
'primaryHiddenField',
'primarySubItemsField',
'secondaryKeyField',
'secondaryValueField',
@@ -112,6 +115,7 @@ export default {
'secondaryIconField',
'secondaryIconType',
'secondaryColorField',
'secondaryHiddenField',
'noItemText',
'items'
],
@@ -133,7 +137,7 @@ export default {
},
set: function (value) {
const primaryItem = getItemByKeyValue(this.items, value, this.primaryValueField);
const secondaryItem = getFirstItem(primaryItem[this.primarySubItemsField]);
const secondaryItem = getFirstVisibleItem(primaryItem[this.primarySubItemsField], this.primaryHiddenField);
if (secondaryItem) {
if (this.secondaryValueField) {
@@ -214,7 +218,7 @@ export default {
}
},
getPrimaryValueBySecondaryValue(secondaryValue) {
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.primaryHiddenField, this.secondaryValueField, this.secondaryHiddenField, secondaryValue);
},
onMenuStateChanged(state) {
const self = this;
@@ -17,6 +17,7 @@
:class="{ 'list-item-selected': isSelected(item, index) }"
:key="getItemValue(item, index, keyField, valueType)"
v-for="(item, index) in items"
v-show="item && (!hiddenField || !item[hiddenField])"
@click="onItemClicked(item, index)">
<template #content-start>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" :style="{ 'color': isSelected(item, index) ? '' : 'transparent' }"></f7-icon>
@@ -44,6 +45,7 @@ export default {
'iconField',
'iconType',
'colorField',
'hiddenField',
'items',
'show'
],
@@ -15,7 +15,8 @@
:opened="isPrimaryItemHasSecondaryValue(item)"
:label="$tIf((primaryTitleField ? item[primaryTitleField] : item), primaryTitleI18n)"
:key="primaryKeyField ? item[primaryKeyField] : item"
v-for="item in items">
v-for="item in items"
v-show="item && (!primaryHiddenField || !item[primaryHiddenField])">
<template #media>
<ItemIcon :icon-type="primaryIconType" :icon-id="item[primaryIconField]"
:color="item[primaryColorField]" v-if="primaryIconField"></ItemIcon>
@@ -26,6 +27,7 @@
:label="$tIf((secondaryTitleField ? subItem[secondaryTitleField] : subItem), secondaryTitleI18n)"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in item[primarySubItemsField]"
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
@click="onSecondaryItemClicked(subItem)">
<template #media>
<ItemIcon :icon-type="secondaryIconType" :icon-id="subItem[secondaryIconField]"
@@ -52,6 +54,7 @@ export default {
'primaryIconField',
'primaryIconType',
'primaryColorField',
'primaryHiddenField',
'primarySubItemsField',
'secondaryKeyField',
'secondaryValueField',
@@ -60,6 +63,7 @@ export default {
'secondaryIconField',
'secondaryIconType',
'secondaryColorField',
'secondaryHiddenField',
'items',
'show'
],
@@ -121,6 +125,10 @@ export default {
for (let i = 0; i < primaryItem[this.primarySubItemsField].length; i++) {
const secondaryItem = primaryItem[this.primarySubItemsField][i];
if (this.secondaryHiddenField && secondaryItem[this.secondaryHiddenField]) {
continue;
}
if (this.secondaryValueField && secondaryItem[this.secondaryValueField] === this.currentValue) {
return true;
} else if (!this.secondaryValueField && secondaryItem === this.currentValue) {
@@ -21,6 +21,7 @@
:footer="$tIf(item[primaryFooterField], primaryFooterI18n)"
:key="primaryKeyField ? item[primaryKeyField] : item"
v-for="item in items"
v-show="item && (!primaryHiddenField || !item[primaryHiddenField])"
@click="onPrimaryItemClicked(item)">
<template #media>
<ItemIcon :icon-type="primaryIconType" :icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon>
@@ -43,6 +44,7 @@
:footer="$tIf(subItem[secondaryFooterField], secondaryFooterI18n)"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
@click="onSecondaryItemClicked(subItem)">
<template #media>
<ItemIcon :icon-type="secondaryIconType" :icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon>
@@ -80,6 +82,7 @@ export default {
'primaryIconField',
'primaryIconType',
'primaryColorField',
'primaryHiddenField',
'primarySubItemsField',
'secondaryKeyField',
'secondaryValueField',
@@ -92,6 +95,7 @@ export default {
'secondaryIconField',
'secondaryIconType',
'secondaryColorField',
'secondaryHiddenField',
'items',
'show'
],
@@ -151,7 +155,7 @@ export default {
}
},
getPrimaryValueBySecondaryValue(secondaryValue) {
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.primaryHiddenField, this.secondaryValueField, this.secondaryHiddenField, secondaryValue);
},
close() {
this.$emit('update:show', false);
+28 -8
View File
@@ -214,10 +214,14 @@ export function stringToArrayBuffer(str){
return Uint8Array.from(str, c => c.charCodeAt(0)).buffer;
}
export function getFirstItem(items) {
if (isArray(items)) {
if (items.length > 0) {
return items[0];
export function getFirstVisibleItem(items, hiddenField) {
if (isArray(items) && items.length > 0) {
for (let i = 0; i < items.length; i++) {
if (hiddenField && items[i][hiddenField]) {
continue;
}
return items[i];
}
} else {
for (let field in items) {
@@ -225,6 +229,10 @@ export function getFirstItem(items) {
continue;
}
if (hiddenField && items[field][hiddenField]) {
continue;
}
return items[field];
}
}
@@ -467,10 +475,14 @@ export function selectInvert(filterItemIds, allItemsMap) {
}
}
export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue) {
export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue) {
for (let i = 0; i < primaryItem[primarySubItemsField].length; i++) {
const secondaryItem = primaryItem[primarySubItemsField][i];
if (secondaryHiddenField && secondaryItem[secondaryHiddenField]) {
continue;
}
if (secondaryValueField && secondaryItem[secondaryValueField] === secondaryValue) {
return true;
} else if (!secondaryValueField && secondaryItem === secondaryValue) {
@@ -481,13 +493,17 @@ export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField
return false;
}
export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, primaryValueField, secondaryValueField, secondaryValue) {
export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, primaryValueField, primaryHiddenField, secondaryValueField, secondaryHiddenField, secondaryValue) {
if (primarySubItemsField) {
if (isArray(items)) {
for (let i = 0; i < items.length; i++) {
const primaryItem = items[i];
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
if (primaryHiddenField && primaryItem[primaryHiddenField]) {
continue;
}
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue)) {
if (primaryValueField) {
return primaryItem[primaryValueField];
} else {
@@ -503,7 +519,11 @@ export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, pri
const primaryItem = items[field];
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
if (primaryHiddenField && primaryItem[primaryHiddenField]) {
continue;
}
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue)) {
if (primaryValueField) {
return primaryItem[primaryValueField];
} else {