refactor: refs #8316 used VnSection and VnCardBeta #1146
|
|
@ -1,19 +1,11 @@
|
|||
<script setup>
|
||||
import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
|
||||
import VnCard from 'components/common/VnCard.vue';
|
||||
import InvoiceOutFilter from '../InvoiceOutFilter.vue';
|
||||
import VnCardBeta from 'components/common/VnCardBeta.vue';
|
||||
</script>
|
||||
<template>
|
||||
<VnCard
|
||||
<VnCardBeta
|
||||
data-key="InvoiceOut"
|
||||
base-url="InvoiceOuts"
|
||||
:descriptor="InvoiceOutDescriptor"
|
||||
:filter-panel="InvoiceOutFilter"
|
||||
search-data-key="InvoiceOutList"
|
||||
:searchbar-props="{
|
||||
url: 'InvoiceOuts/filter',
|
||||
label: 'Search invoice',
|
||||
info: 'You can search by invoice reference',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { ref, computed, watchEffect } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import { usePrintService } from 'src/composables/usePrintService';
|
||||
|
|
@ -12,12 +11,12 @@ import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
|
|||
import { toCurrency, toDate } from 'src/filters/index';
|
||||
import { QBtn } from 'quasar';
|
||||
import axios from 'axios';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import InvoiceOutFilter from './InvoiceOutFilter.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
import VnRadio from 'src/components/common/VnRadio.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import VnSection from 'src/components/common/VnSection.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
|
@ -30,6 +29,8 @@ const MODEL = 'InvoiceOuts';
|
|||
const { openReport } = usePrintService();
|
||||
const addressOptions = ref([]);
|
||||
const selectedOption = ref('ticket');
|
||||
const dataKey = 'InvoiceOutList';
|
||||
|
||||
async function fetchClientAddress(id) {
|
||||
const { data } = await axios.get(
|
||||
`Clients/${id}/addresses?filter[order]=isActive DESC`
|
||||
|
|
@ -37,11 +38,7 @@ async function fetchClientAddress(id) {
|
|||
addressOptions.value = data;
|
||||
}
|
||||
|
||||
const exprBuilder = (_, value) => {
|
||||
|
jtubau marked this conversation as resolved
Outdated
|
||||
return {
|
||||
or: [{ code: value }, { description: { like: `%${value}%` } }],
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
|
|
@ -173,220 +170,224 @@ watchEffect(selectedRows);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<VnSearchbar
|
||||
:info="t('youCanSearchByInvoiceReference')"
|
||||
:label="t('Search invoice')"
|
||||
data-key="invoiceOutList"
|
||||
/>
|
||||
<RightMenu>
|
||||
<template #right-panel>
|
||||
<InvoiceOutFilter data-key="invoiceOutList" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<VnSubToolbar>
|
||||
<template #st-actions>
|
||||
<QBtn
|
||||
color="primary"
|
||||
icon-right="cloud_download"
|
||||
@click="downloadPdf()"
|
||||
:disable="!hasSelectedCards"
|
||||
>
|
||||
<QTooltip>{{ t('downloadPdf') }}</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
</VnSubToolbar>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="invoiceOutList"
|
||||
:url="`${MODEL}/filter`"
|
||||
:create="{
|
||||
urlCreate: 'InvoiceOuts/createManualInvoice',
|
||||
title: t('createManualInvoice'),
|
||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||
formInitialData: { active: true },
|
||||
}"
|
||||
:right-search="false"
|
||||
v-model:selected="selectedRows"
|
||||
order="id DESC"
|
||||
<VnSection
|
||||
:data-key="dataKey"
|
||||
:columns="columns"
|
||||
redirect="invoice-out"
|
||||
:table="{
|
||||
'row-key': 'id',
|
||||
selection: 'multiple',
|
||||
prefix="invoiceOut"
|
||||
:array-data-props="{
|
||||
url: 'InvoiceOuts/filter',
|
||||
order: ['id DESC'],
|
||||
exprBuilder,
|
||||
|
jtubau marked this conversation as resolved
Outdated
alexm
commented
El exprBuilder en este cas no va aci, es de un VnSelect El exprBuilder en este cas no va aci, es de un VnSelect
|
||||
}"
|
||||
>
|
||||
<template #column-clientFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row.clientSocialName }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</span>
|
||||
<template #rightMenu>
|
||||
<InvoiceOutFilter data-key="InvoiceOutList" />
|
||||
</template>
|
||||
<template #more-create-dialog="{ data }">
|
||||
<div class="row q-col-gutter-xs">
|
||||
<div class="col-12">
|
||||
<div class="q-col-gutter-xs">
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="ticket"
|
||||
:label="t('globals.ticket')"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
<template #body>
|
||||
<VnSubToolbar>
|
||||
<template #st-actions>
|
||||
<QBtn
|
||||
color="primary"
|
||||
icon-right="cloud_download"
|
||||
@click="downloadPdf()"
|
||||
:disable="!hasSelectedCards"
|
||||
>
|
||||
<QTooltip>{{ t('downloadPdf') }}</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
</VnSubToolbar>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
:data-key="dataKey"
|
||||
:create="{
|
||||
urlCreate: 'InvoiceOuts/createManualInvoice',
|
||||
title: t('createManualInvoice'),
|
||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||
formInitialData: { active: true },
|
||||
}"
|
||||
:right-search="false"
|
||||
v-model:selected="selectedRows"
|
||||
:columns="columns"
|
||||
redirect="invoice-out"
|
||||
:table="{
|
||||
'row-key': 'id',
|
||||
selection: 'multiple',
|
||||
}"
|
||||
>
|
||||
<template #column-clientFk="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
{{ row.clientSocialName }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</span>
|
||||
</template>
|
||||
<template #more-create-dialog="{ data }">
|
||||
<div class="row q-col-gutter-xs">
|
||||
<div class="col-12">
|
||||
<div class="q-col-gutter-xs">
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="ticket"
|
||||
:label="t('globals.ticket')"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
|
||||
<VnInput
|
||||
v-show="selectedOption === 'ticket'"
|
||||
v-model="data.ticketFk"
|
||||
:label="t('globals.ticket')"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<VnInput
|
||||
v-show="selectedOption === 'ticket'"
|
||||
v-model="data.ticketFk"
|
||||
:label="t('globals.ticket')"
|
||||
style="flex: 1"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="row q-col-gutter-xs q-ml-none"
|
||||
v-show="selectedOption !== 'ticket'"
|
||||
>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-model="data.clientFk"
|
||||
<div
|
||||
class="row q-col-gutter-xs q-ml-none"
|
||||
v-show="selectedOption !== 'ticket'"
|
||||
>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-model="data.clientFk"
|
||||
:label="t('globals.client')"
|
||||
url="Clients"
|
||||
:options="customerOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@update:model-value="fetchClientAddress"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
#{{ scope.opt?.id }} -
|
||||
{{ scope.opt?.name }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-model="data.addressFk"
|
||||
:label="t('ticket.summary.consignee')"
|
||||
:options="addressOptions"
|
||||
option-label="nickname"
|
||||
option-value="id"
|
||||
v-if="
|
||||
data.clientFk &&
|
||||
selectedOption === 'consignatario'
|
||||
"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel
|
||||
:class="{
|
||||
'color-vn-label':
|
||||
!scope.opt?.isActive,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
`${
|
||||
!scope.opt?.isActive
|
||||
? t('inactive')
|
||||
: ''
|
||||
} `
|
||||
}}
|
||||
<span>{{
|
||||
scope.opt?.nickname
|
||||
}}</span>
|
||||
<span
|
||||
v-if="
|
||||
scope.opt?.province ||
|
||||
scope.opt?.city ||
|
||||
scope.opt?.street
|
||||
"
|
||||
>
|
||||
, {{ scope.opt?.street }},
|
||||
{{ scope.opt?.city }},
|
||||
{{
|
||||
scope.opt?.province?.name
|
||||
}}
|
||||
-
|
||||
{{
|
||||
scope.opt?.agencyMode
|
||||
?.name
|
||||
}}
|
||||
</span>
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</div>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="cliente"
|
||||
:label="t('globals.client')"
|
||||
url="Clients"
|
||||
:options="customerOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@update:model-value="fetchClientAddress"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
#{{ scope.opt?.id }} -
|
||||
{{ scope.opt?.name }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-model="data.addressFk"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="consignatario"
|
||||
:label="t('ticket.summary.consignee')"
|
||||
:options="addressOptions"
|
||||
option-label="nickname"
|
||||
option-value="id"
|
||||
v-if="
|
||||
data.clientFk &&
|
||||
selectedOption === 'consignatario'
|
||||
"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel
|
||||
:class="{
|
||||
'color-vn-label':
|
||||
!scope.opt?.isActive,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
`${
|
||||
!scope.opt?.isActive
|
||||
? t('inactive')
|
||||
: ''
|
||||
} `
|
||||
}}
|
||||
<span>{{
|
||||
scope.opt?.nickname
|
||||
}}</span>
|
||||
<span
|
||||
v-if="
|
||||
scope.opt?.province ||
|
||||
scope.opt?.city ||
|
||||
scope.opt?.street
|
||||
"
|
||||
>
|
||||
, {{ scope.opt?.street }},
|
||||
{{ scope.opt?.city }},
|
||||
{{
|
||||
scope.opt?.province?.name
|
||||
}}
|
||||
-
|
||||
{{
|
||||
scope.opt?.agencyMode
|
||||
?.name
|
||||
}}
|
||||
</span>
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</div>
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
</VnRow>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="cliente"
|
||||
:label="t('globals.client')"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="consignatario"
|
||||
:label="t('ticket.summary.consignee')"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
</VnRow>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<VnRow class="row q-col-gutter-xs">
|
||||
<VnSelect
|
||||
url="InvoiceOutSerials"
|
||||
v-model="data.serial"
|
||||
:label="t('invoiceIn.serial')"
|
||||
:options="invoiceOutSerialsOptions"
|
||||
option-label="description"
|
||||
option-value="code"
|
||||
option-filter
|
||||
:expr-builder="exprBuilder"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt?.code }} -
|
||||
{{ scope.opt?.description }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInputDate
|
||||
:label="t('invoiceOut.summary.dued')"
|
||||
v-model="data.maxShipped"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow class="row q-col-gutter-xs">
|
||||
<VnSelect
|
||||
url="TaxAreas"
|
||||
v-model="data.taxArea"
|
||||
:label="t('invoiceOutList.tableVisibleColumns.taxArea')"
|
||||
:options="taxAreasOptions"
|
||||
option-label="code"
|
||||
option-value="code"
|
||||
/>
|
||||
<VnInput
|
||||
v-model="data.reference"
|
||||
:label="t('globals.reference')"
|
||||
/>
|
||||
</VnRow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<VnRow class="row q-col-gutter-xs">
|
||||
<VnSelect
|
||||
url="InvoiceOutSerials"
|
||||
v-model="data.serial"
|
||||
:label="t('invoiceIn.serial')"
|
||||
:options="invoiceOutSerialsOptions"
|
||||
option-label="description"
|
||||
option-value="code"
|
||||
option-filter
|
||||
:expr-builder="exprBuilder"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt?.code }} -
|
||||
{{ scope.opt?.description }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInputDate
|
||||
:label="t('invoiceOut.summary.dued')"
|
||||
v-model="data.maxShipped"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow class="row q-col-gutter-xs">
|
||||
<VnSelect
|
||||
url="TaxAreas"
|
||||
v-model="data.taxArea"
|
||||
:label="t('invoiceOutList.tableVisibleColumns.taxArea')"
|
||||
:options="taxAreasOptions"
|
||||
option-label="code"
|
||||
option-value="code"
|
||||
/>
|
||||
<VnInput
|
||||
v-model="data.reference"
|
||||
:label="t('globals.reference')"
|
||||
/>
|
||||
</VnRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
</VnTable>
|
||||
</VnSection>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
invoiceOut:
|
||||
search: Search invoice
|
||||
searchInfo: You can search by invoice reference
|
||||
invoiceOutModule:
|
||||
customer: Client
|
||||
amount: Amount
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
Search invoice: Buscar factura emitida
|
||||
You can search by invoice reference: Puedes buscar por referencia de la factura
|
||||
invoiceOut:
|
||||
search: Buscar factura emitida
|
||||
searchInfo: Puedes buscar por referencia de la factura
|
||||
invoiceOutModule:
|
||||
customer: Cliente
|
||||
amount: Importe
|
||||
|
|
|
|||
|
|
@ -1,34 +1,60 @@
|
|||
import { RouterView } from 'vue-router';
|
||||
|
||||
const invoiceOutCard = {
|
||||
name: 'InvoiceOutCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
|
||||
redirect: { name: 'InvoiceOutSummary' },
|
||||
meta: {
|
||||
menu: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'summary',
|
||||
name: 'InvoiceOutSummary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
icon: 'launch',
|
||||
},
|
||||
component: () => import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
export default {
|
||||
path: '/invoice-out',
|
||||
name: 'InvoiceOut',
|
||||
path: '/invoice-out',
|
||||
meta: {
|
||||
title: 'invoiceOuts',
|
||||
icon: 'vn:invoice-out',
|
||||
moduleName: 'InvoiceOut',
|
||||
menu: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
|
||||
},
|
||||
component: RouterView,
|
||||
redirect: { name: 'InvoiceOutMain' },
|
||||
menus: {
|
||||
main: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'InvoiceOutMain',
|
||||
path: '',
|
||||
component: () => import('src/components/common/VnModule.vue'),
|
||||
redirect: { name: 'InvoiceOutList' },
|
||||
redirect: { name: 'InvoiceOutIndexMain' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'InvoiceOutList',
|
||||
meta: {
|
||||
title: 'list',
|
||||
icon: 'view_list',
|
||||
},
|
||||
path: '',
|
||||
name: 'InvoiceOutIndexMain',
|
||||
redirect: { name: 'InvoiceOutList' },
|
||||
component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
|
||||
children: [
|
||||
{
|
||||
name: 'InvoiceOutList',
|
||||
path: 'list',
|
||||
meta: {
|
||||
title: 'list',
|
||||
icon: 'view_list',
|
||||
},
|
||||
},
|
||||
invoiceOutCard,
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'global-invoicing',
|
||||
|
|
@ -51,22 +77,5 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'InvoiceOutCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
|
||||
redirect: { name: 'InvoiceOutSummary' },
|
||||
children: [
|
||||
{
|
||||
name: 'InvoiceOutSummary',
|
||||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
},
|
||||
component: () =>
|
||||
import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue
No borrar, se gasta en un VnSelect