forked from verdnatura/salix-front
Se crea tabla y filtros de extended list
This commit is contained in:
carlosfonseca
parent
5a1d4e90c9
commit
b34a5f1d89
|
|
@ -111,6 +111,7 @@ export default {
|
|||
customers: 'Customers',
|
||||
list: 'List',
|
||||
webPayments: 'Web Payments',
|
||||
extendedList: 'Extended list',
|
||||
createCustomer: 'Create customer',
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic Data',
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@ export default {
|
|||
customers: 'Clientes',
|
||||
list: 'Listado',
|
||||
webPayments: 'Pagos Web',
|
||||
extendedList: 'Listado extendido',
|
||||
createCustomer: 'Crear cliente',
|
||||
basicData: 'Datos básicos',
|
||||
summary: 'Resumen',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,141 @@
|
|||
<script setup>
|
||||
import { ref, computed, onBeforeMount } from 'vue';
|
||||
|
||||
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
|
||||
const arrayData = ref(null);
|
||||
|
||||
onBeforeMount(async () => {
|
||||
arrayData.value = useArrayData('CustomerExtendedList', {
|
||||
url: 'Clients/extendedListFilter',
|
||||
limit: 0,
|
||||
});
|
||||
await arrayData.value.fetch({ append: false });
|
||||
|
||||
stateStore.rightDrawer = true;
|
||||
});
|
||||
|
||||
const rows = computed(() => arrayData.value.store.data);
|
||||
|
||||
const tableColumnComponents = {
|
||||
id: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
socialName: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
salesPerson: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
phone: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
city: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
email: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
align: 'left',
|
||||
field: 'id',
|
||||
label: 'Identifier',
|
||||
name: 'id',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'socialName',
|
||||
label: 'Social name',
|
||||
name: 'socialName',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'salesPerson',
|
||||
label: 'Salesperson',
|
||||
name: 'salesPerson',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'phone',
|
||||
label: 'Phone',
|
||||
name: 'phone',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'city',
|
||||
label: 'City',
|
||||
name: 'city',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'email',
|
||||
label: 'Email',
|
||||
name: 'email',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<CustomerExtendedListFilter data-key="CustomerExtendedList" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
|
||||
<QToolbar class="bg-vn-dark">
|
||||
<div id="st-data"></div>
|
||||
<QSpace />
|
||||
<div id="st-actions"></div>
|
||||
</QToolbar>
|
||||
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
hide-bottom
|
||||
row-key="id"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width q-mt-md"
|
||||
>
|
||||
<template #body-cell="props">
|
||||
<QTd :props="props">
|
||||
<component
|
||||
:is="tableColumnComponents[props.col.name].component"
|
||||
class="col-content"
|
||||
v-bind="tableColumnComponents[props.col.name].props(props)"
|
||||
@click="tableColumnComponents[props.col.name].event(props)"
|
||||
>
|
||||
{{ props.value }}
|
||||
</component>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.col-content {
|
||||
border-radius: 4px;
|
||||
padding: 6px 6px 6px 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const clients = ref();
|
||||
const workers = ref();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Clients"
|
||||
:filter="{ where: { role: 'socialName' } }"
|
||||
@on-fetch="(data) => (clients = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{ where: { role: 'salesPerson' } }"
|
||||
@on-fetch="(data) => (workers = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
<span>{{ formatFn(tag.value) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #body="{ params, searchFn }">
|
||||
<QList dense class="list">
|
||||
<QItem class="q-mb-sm q-mt-sm">
|
||||
<QItemSection>
|
||||
<VnInput
|
||||
:label="t('Identifier')"
|
||||
v-model="params.identifier"
|
||||
is-outlined
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="!clients">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="clients">
|
||||
<VnSelectFilter
|
||||
:label="t('Social name')"
|
||||
v-model="params.socialName"
|
||||
@update:model-value="searchFn()"
|
||||
:options="clients"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers">
|
||||
<VnSelectFilter
|
||||
:label="t('Salesperson')"
|
||||
v-model="params.salesPerson"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection>
|
||||
<VnInput :label="t('Phone')" v-model="params.phone" is-outlined />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection>
|
||||
<VnInput :label="t('City')" v-model="params.city" is-outlined />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection>
|
||||
<VnInput :label="t('Email')" v-model="params.email" is-outlined />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
|
||||
<QSeparator />
|
||||
</QList>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.list {
|
||||
width: 256px;
|
||||
}
|
||||
.list * {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
params:
|
||||
identifier: Identifier
|
||||
socialName: Social name
|
||||
salesPerson: Salesperson
|
||||
phone: Phone
|
||||
city: City
|
||||
email: Email
|
||||
es:
|
||||
params:
|
||||
identifier: Identificador
|
||||
socialName: Razón social
|
||||
salesPerson: Comercial
|
||||
phone: Teléfono
|
||||
city: Población
|
||||
email: Email
|
||||
Identifier: Identificador
|
||||
Social name: Razón social
|
||||
Salesperson: Comercial
|
||||
Phone: Teléfono
|
||||
City: Población
|
||||
Email: Email
|
||||
</i18n>
|
||||
|
|
@ -154,7 +154,7 @@ function viewSummary(id) {
|
|||
</VnPaginate>
|
||||
</div>
|
||||
</QPage>
|
||||
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
||||
<QPageSticky position="bottom-right" :offset="[20, 20]">
|
||||
<QBtn
|
||||
color="primary"
|
||||
icon="add"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'CustomerMain' },
|
||||
menus: {
|
||||
main: ['CustomerList', 'CustomerPayments'],
|
||||
main: ['CustomerList', 'CustomerPayments', 'CustomerExtendedList'],
|
||||
card: ['CustomerBasicData'],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -46,6 +46,16 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Customer/CustomerPayments.vue'),
|
||||
},
|
||||
{
|
||||
path: 'extendedList',
|
||||
name: 'CustomerExtendedList',
|
||||
meta: {
|
||||
title: 'extendedList',
|
||||
icon: 'vn:client',
|
||||
},
|
||||
component: () =>
|
||||
import('src/pages/Customer/CustomerExtendedList.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue