feat: create VnSelectCache and add in VnColumn #550

Merged
alexm merged 5 commits from 6825-vnSelectCache into dev 2024-07-15 05:21:54 +00:00
12 changed files with 115 additions and 40 deletions
Showing only changes of commit de814f9881 - Show all commits

View File

@ -53,7 +53,7 @@ defineExpose({ orderBy });
@click="orderBy(name, model?.direction)" @click="orderBy(name, model?.direction)"
class="row items-center no-wrap cursor-pointer" class="row items-center no-wrap cursor-pointer"
> >
<span>{{ label }}</span> <span :title="label">{{ label }}</span>
<QChip <QChip
v-if="name" v-if="name"
:label="!vertical && model?.index" :label="!vertical && model?.index"
@ -69,8 +69,9 @@ defineExpose({ orderBy });
model?.index ? 'color-vn-text' : 'bg-transparent', model?.index ? 'color-vn-text' : 'bg-transparent',
vertical ? 'q-px-none' : '', vertical ? 'q-px-none' : '',
]" ]"
class="no-box-shadow q-mr-lg" class="no-box-shadow"
:clickable="true" :clickable="true"
style="min-width: 40px"
> >
<div <div
class="column flex-center" class="column flex-center"

View File

@ -348,11 +348,7 @@ defineExpose({
/> />
</template> </template>
<template #header-cell="{ col }"> <template #header-cell="{ col }">
<QTh <QTh v-if="col.visible ?? true" auto-width>
v-if="col.visible ?? true"
auto-width
style="min-width: 100px"
>
<div <div
class="column self-start q-ml-xs ellipsis" class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`" :class="`text-${col?.align ?? 'left'}`"
@ -401,7 +397,7 @@ defineExpose({
<QTd <QTd
auto-width auto-width
class="no-margin q-px-xs" class="no-margin q-px-xs"
:class="getColAlign(col)" :class="[getColAlign(col), col.class, col.columnField?.class]"
v-if="col.visible ?? true" v-if="col.visible ?? true"
> >
<slot :name="`column-${col.name}`" :col="col" :row="row"> <slot :name="`column-${col.name}`" :col="col" :row="row">

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, onBeforeUnmount, ref, nextTick } from 'vue'; import { onMounted, onBeforeUnmount, ref } from 'vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore(); const stateStore = useStateStore();

View File

@ -229,3 +229,26 @@ input::-webkit-inner-spin-button {
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
.q-table {
thead,
tbody {
th {
.q-select {
max-width: 120px;
}
}
td {
padding: 1px 10px 1px 10px;
max-width: 100px;
div span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.expand {
max-width: 400px;
}
}
}

View File

@ -42,6 +42,9 @@ const columns = computed(() => [
name: 'name', name: 'name',
isTitle: true, isTitle: true,
create: true, create: true,
columnField: {
class: 'expand',
},
}, },
{ {
align: 'left', align: 'left',
@ -49,6 +52,9 @@ const columns = computed(() => [
label: t('customer.extendedList.tableVisibleColumns.socialName'), label: t('customer.extendedList.tableVisibleColumns.socialName'),
isTitle: true, isTitle: true,
create: true, create: true,
columnField: {
class: 'expand',
},
}, },
{ {
align: 'left', align: 'left',
@ -78,8 +84,8 @@ const columns = computed(() => [
align: 'left', align: 'left',
label: t('customer.extendedList.tableVisibleColumns.credit'), label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit', name: 'credit',
component: 'number',
columnFilter: { columnFilter: {
component: 'number',
inWhere: true, inWhere: true,
}, },
}, },
@ -87,8 +93,8 @@ const columns = computed(() => [
align: 'left', align: 'left',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'), label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance', name: 'creditInsurance',
component: 'number',
columnFilter: { columnFilter: {
component: 'number',
inWhere: true, inWhere: true,
}, },
}, },
@ -130,6 +136,9 @@ const columns = computed(() => [
columnFilter: { columnFilter: {
inWhere: true, inWhere: true,
}, },
columnField: {
class: 'expand',
},
}, },
{ {
align: 'left', align: 'left',
@ -179,8 +188,8 @@ const columns = computed(() => [
label: t('customer.extendedList.tableVisibleColumns.created'), label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created', name: 'created',
format: ({ created }) => toDate(created), format: ({ created }) => toDate(created),
component: 'date',
columnFilter: { columnFilter: {
component: 'date',
alias: 'c', alias: 'c',
inWhere: true, inWhere: true,
}, },

View File

@ -5,7 +5,9 @@ import { useRoute } from 'vue-router';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue'; import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue'; import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import OrderDescriptorProxy from 'src/pages/Order/Card/OrderDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue'; import VnInputDate from 'src/components/common/VnInputDate.vue';
@ -45,8 +47,8 @@ const columns = computed(() => [
align: 'left', align: 'left',
}, },
{ {
label: t('itemDiary.id'), label: t('itemDiary.origin'),
name: 'id', name: 'originId',
align: 'left', align: 'left',
}, },
{ {
@ -65,8 +67,8 @@ const columns = computed(() => [
}, },
{ {
label: t('itemDiary.client'), label: t('itemDiary.entity'),
name: 'client', name: 'entityId',
align: 'left', align: 'left',
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
@ -111,10 +113,28 @@ const getBadgeAttrs = (_date) => {
return attrs; return attrs;
}; };
const getIdDescriptor = (row) => { const originTypeMap = {
let descriptor = EntryDescriptorProxy; entry: {
if (row.isTicket) descriptor = TicketDescriptorProxy; descriptor: EntryDescriptorProxy,
return descriptor; icon: 'vn:entry',
},
ticket: {
descriptor: TicketDescriptorProxy,
icon: 'vn:ticket',
},
order: {
descriptor: OrderDescriptorProxy,
icon: 'vn:basket',
},
};
const entityTypeMap = {
client: {
descriptor: CustomerDescriptorProxy,
},
supplier: {
descriptor: SupplierDescriptorProxy,
},
}; };
onMounted(async () => { onMounted(async () => {
@ -206,21 +226,28 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QBadge> </QBadge>
</QTd> </QTd>
</template> </template>
<template #body-cell-id="{ row }"> <template #body-cell-originId="{ row }">
<QTd @click.stop> <QTd @click.stop>
<component <component
:is="getIdDescriptor(row)" :is="originTypeMap[row.originType]?.descriptor"
:id="row.origin" :id="row.originId"
class="q-ma-none" class="q-ma-none"
dense dense
style="font-size: 14px" style="font-size: 14px"
> >
{{ row.origin }} {{ row.originId }}
</component> </component>
<span class="link">{{ row.origin }}</span> <span class="link">
<QIcon
:name="originTypeMap[row.originType]?.icon"
class="fill-icon q-mr-sm"
size="xs"
/>
{{ row.originId }}
</span>
</QTd> </QTd>
</template> </template>
<template #body-cell-client="{ row }"> <template #body-cell-entityId="{ row }">
<QTd @click.stop> <QTd @click.stop>
<QBadge <QBadge
:color="row.highlighted ? 'warning' : 'transparent'" :color="row.highlighted ? 'warning' : 'transparent'"
@ -228,11 +255,18 @@ onUnmounted(() => (stateStore.rightDrawer = false));
dense dense
style="font-size: 14px" style="font-size: 14px"
> >
<span v-if="row.isTicket" class="link"> <component
{{ dashIfEmpty(row.name) }} :is="entityTypeMap[row.entityType]?.descriptor"
<CustomerDescriptorProxy :id="row.clientFk" /> :id="row.entityId"
class="q-ma-none"
dense
style="font-size: 14px"
>
{{ row.entityId }}
</component>
<span class="link">
{{ dashIfEmpty(row.entityName) }}
</span> </span>
<span v-else>{{ dashIfEmpty(row.name) }}</span>
</QBadge> </QBadge>
</QTd> </QTd>
</template> </template>

View File

@ -135,10 +135,6 @@ const isAdministrative = computed(() => {
:label="t('item.summary.nonRecycledPlastic')" :label="t('item.summary.nonRecycledPlastic')"
:value="item.nonRecycledPlastic" :value="item.nonRecycledPlastic"
/> />
<VnLv
:label="t('item.summary.minSalesQuantity')"
:value="item.minQuantity"
/>
</QCard> </QCard>
<QCard class="vn-one"> <QCard class="vn-one">
<component <component

View File

@ -14,10 +14,10 @@ shelvings:
removeConfirmSubtitle: Are you sure you want to continue? removeConfirmSubtitle: Are you sure you want to continue?
itemDiary: itemDiary:
date: Date date: Date
id: Id origin: Origin
state: State state: State
reference: Reference reference: Reference
client: Client entity: Entity
in: In in: In
out: Out out: Out
balance: Balance balance: Balance

View File

@ -14,10 +14,10 @@ shelvings:
removeConfirmSubtitle: ¿Seguro que quieres continuar? removeConfirmSubtitle: ¿Seguro que quieres continuar?
itemDiary: itemDiary:
date: Fecha date: Fecha
id: Id origin: Origen
state: Estado state: Estado
reference: Referencia reference: Referencia
client: Cliente entity: Entidad
in: Entrada in: Entrada
out: Salida out: Salida
balance: Balance balance: Balance

View File

@ -0,0 +1,17 @@
<script setup>
import OrderDescriptor from './OrderDescriptor.vue';
import OrderSummary from './OrderSummary.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
</script>
<template>
<QPopupProxy>
<OrderDescriptor v-if="$props.id" :id="$props.id" :summary="OrderSummary" />
</QPopupProxy>
</template>

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, computed, onUpdated } from 'vue'; import { ref, computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';

View File

@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();