forked from verdnatura/salix-front
WIP
This commit is contained in:
parent
b2edb89118
commit
62a806b813
|
|
@ -627,6 +627,7 @@ export default {
|
|||
list: 'List',
|
||||
create: 'Create',
|
||||
summary: 'Summary',
|
||||
extraCommunity: 'ExtraCommunity',
|
||||
},
|
||||
list: {
|
||||
clone: 'Clone',
|
||||
|
|
|
|||
|
|
@ -629,6 +629,7 @@ export default {
|
|||
list: 'Listado',
|
||||
create: 'Crear',
|
||||
summary: 'Resumen',
|
||||
extraCommunity: 'ExtraCommunity',
|
||||
},
|
||||
list: {
|
||||
clone: 'Clonar',
|
||||
|
|
|
|||
|
|
@ -16,12 +16,11 @@ const {
|
|||
formInitialData,
|
||||
|
||||
invoicing,
|
||||
printer,
|
||||
status,
|
||||
} = storeToRefs(invoiceOutGlobalStore);
|
||||
|
||||
// invoiceOutGlobalStore actions
|
||||
const { makeInvoice, setPrinterValue, setStatusValue } = invoiceOutGlobalStore;
|
||||
const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
|
||||
|
||||
const clientsToInvoice = ref('all');
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,445 @@
|
|||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
// import invoiceOutService from 'src/services/invoiceOut.service';
|
||||
// import { toCurrency } from 'src/filters';
|
||||
import { QBadge, QBtn } from 'quasar';
|
||||
// import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
|
||||
import { toDate } from 'src/filters';
|
||||
|
||||
// const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
|
||||
|
||||
const rows = ref([]);
|
||||
const { t } = useI18n();
|
||||
|
||||
// const dateRange = reactive({
|
||||
// from: Date.vnFirstDayOfMonth(),
|
||||
// to: Date.vnLastDayOfMonth(),
|
||||
// });
|
||||
|
||||
// const selectedCustomerId = ref(0);
|
||||
// const selectedWorkerId = ref(0);
|
||||
|
||||
const filter = ref({
|
||||
company: null,
|
||||
country: null,
|
||||
clientId: null,
|
||||
client: null,
|
||||
amount: null,
|
||||
base: null,
|
||||
ticketId: null,
|
||||
active: null,
|
||||
hasToInvoice: null,
|
||||
verifiedData: null,
|
||||
comercial: null,
|
||||
});
|
||||
|
||||
const tableColumnComponents = {
|
||||
id: {
|
||||
component: QBtn,
|
||||
props: {},
|
||||
event: () => {},
|
||||
},
|
||||
supplierName: {
|
||||
component: QBtn,
|
||||
props: {},
|
||||
event: () => {},
|
||||
},
|
||||
agencyModeName: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => {},
|
||||
// props: { flat: true, color: 'blue' },
|
||||
// event: (prop) => selectCustomerId(prop.value),
|
||||
},
|
||||
client: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => {},
|
||||
},
|
||||
amount: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => {},
|
||||
},
|
||||
base: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => {},
|
||||
},
|
||||
ticketId: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => {},
|
||||
},
|
||||
active: {
|
||||
component: 'span',
|
||||
props: { type: 'boolean' },
|
||||
event: () => {},
|
||||
},
|
||||
hasToInvoice: {
|
||||
component: 'span',
|
||||
props: { type: 'boolean' },
|
||||
event: () => {},
|
||||
},
|
||||
verifiedData: {
|
||||
component: 'span',
|
||||
props: { type: 'boolean' },
|
||||
event: () => {},
|
||||
},
|
||||
comercial: {
|
||||
component: QBtn,
|
||||
props: { flat: true, color: 'blue' },
|
||||
// event: (prop) => selectWorkerId(prop.row.comercialId),
|
||||
event: (prop) => {},
|
||||
},
|
||||
};
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
label: 'id',
|
||||
field: 'id',
|
||||
name: 'id',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'cargoSupplierFk',
|
||||
field: 'cargoSupplierFk',
|
||||
name: 'cargoSupplierFk',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'agencyModeFk',
|
||||
field: 'agencyModeFk',
|
||||
name: 'agencyModeFk',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'invoiceAmount',
|
||||
field: 'invoiceAmount',
|
||||
name: 'invoiceAmount',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'ref',
|
||||
field: 'ref',
|
||||
name: 'ref',
|
||||
align: 'left',
|
||||
// format: (value) => toCurrency(value),
|
||||
},
|
||||
{
|
||||
label: 'stickers',
|
||||
field: 'stickers',
|
||||
name: 'stickers',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'ticketId',
|
||||
field: 'ticketFk',
|
||||
name: 'ticketId',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'active',
|
||||
field: 'isActive',
|
||||
name: 'active',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'hasToInvoice',
|
||||
field: 'hasToInvoice',
|
||||
name: 'hasToInvoice',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'verifiedData',
|
||||
field: 'isTaxDataChecked',
|
||||
name: 'verifiedData',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'comercial',
|
||||
field: 'comercialName',
|
||||
name: 'comercial',
|
||||
align: 'left',
|
||||
},
|
||||
]);
|
||||
|
||||
// const downloadCSV = async () => {
|
||||
// invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
|
||||
// };
|
||||
|
||||
// const search = async () => {
|
||||
// const and = [];
|
||||
// Object.keys(filter.value).forEach((key) => {
|
||||
// if (filter.value[key]) {
|
||||
// and.push({
|
||||
// [key]: filter.value[key],
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
// const params = {
|
||||
// ...dateRange,
|
||||
// filter: {
|
||||
// limit: 20,
|
||||
// where: { and },
|
||||
// },
|
||||
// };
|
||||
// rows.value = await invoiceOutService.getNegativeBases(params);
|
||||
// };
|
||||
|
||||
// const refresh = () => {
|
||||
// dateRange.from = Date.vnFirstDayOfMonth();
|
||||
// dateRange.to = Date.vnLastDayOfMonth();
|
||||
// filter.value = {
|
||||
// company: null,
|
||||
// country: null,
|
||||
// clientId: null,
|
||||
// client: null,
|
||||
// amount: null,
|
||||
// base: null,
|
||||
// ticketId: null,
|
||||
// active: null,
|
||||
// hasToInvoice: null,
|
||||
// verifiedData: null,
|
||||
// comercial: null,
|
||||
// };
|
||||
// search();
|
||||
// };
|
||||
|
||||
// const selectCustomerId = (id) => {
|
||||
// selectedCustomerId.value = id;
|
||||
// };
|
||||
|
||||
// const selectWorkerId = (id) => {
|
||||
// selectedWorkerId.value = id;
|
||||
// };
|
||||
|
||||
onMounted(async () => {
|
||||
// refresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
hide-bottom
|
||||
row-key="clientId"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width q-mt-md"
|
||||
>
|
||||
<template #top-left>
|
||||
<div class="row justify-start items-end">
|
||||
<QInput
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
rounded
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="t('invoiceOut.negativeBases.from')"
|
||||
class="q-mr-md q"
|
||||
:model-value="toDate(dateRange.from)"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="event" class="cursor-pointer">
|
||||
<QPopupProxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<QDate v-model="dateRange.from">
|
||||
<div class="row items-center justify-end">
|
||||
<QBtn
|
||||
v-close-popup
|
||||
label="Close"
|
||||
color="primary"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
</QDate>
|
||||
</QPopupProxy>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
<QInput
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
rounded
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="t('invoiceOut.negativeBases.to')"
|
||||
class="q-mr-md q"
|
||||
:model-value="toDate(dateRange.to)"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="event" class="cursor-pointer">
|
||||
<QPopupProxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<QDate v-model="dateRange.to">
|
||||
<div class="row items-center justify-end">
|
||||
<QBtn
|
||||
v-close-popup
|
||||
label="Close"
|
||||
color="primary"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
</QDate>
|
||||
</QPopupProxy>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
<QBtn
|
||||
color="primary"
|
||||
icon-right="archive"
|
||||
no-caps
|
||||
@click="downloadCSV()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #top-right>
|
||||
<div class="row justify-start items-center">
|
||||
<span class="q-mr-md text-grey-7">
|
||||
{{ rows.length }} {{ t('results') }}
|
||||
</span>
|
||||
<QBtn
|
||||
color="primary"
|
||||
icon-right="search"
|
||||
no-caps
|
||||
class="q-mr-sm"
|
||||
@click="search"
|
||||
/>
|
||||
<QBtn color="primary" icon-right="refresh" no-caps @click="refresh" />
|
||||
</div>
|
||||
</template>
|
||||
<template #header="props">
|
||||
<QTr :props="props" class="full-height">
|
||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="column justify-start items-start full-height">
|
||||
{{ t(`invoiceOut.negativeBases.${col.label}`) }}
|
||||
<QInput
|
||||
:disable="
|
||||
[
|
||||
'isActive',
|
||||
'hasToInvoice',
|
||||
'isTaxDataChecked',
|
||||
].includes(col.field)
|
||||
"
|
||||
:borderless="
|
||||
[
|
||||
'isActive',
|
||||
'hasToInvoice',
|
||||
'isTaxDataChecked',
|
||||
].includes(col.field)
|
||||
"
|
||||
dense
|
||||
standout
|
||||
v-model="filter[col.field]"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body-cell="props">
|
||||
<QTd :props="props">
|
||||
<component
|
||||
:is="tableColumnComponents[props.col.name].component"
|
||||
class="col-content"
|
||||
v-bind="tableColumnComponents[props.col.name].props"
|
||||
@click="tableColumnComponents[props.col.name].event(props)"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
tableColumnComponents[props.col.name].props.type !=
|
||||
'boolean'
|
||||
"
|
||||
>
|
||||
{{ props.value }}
|
||||
</span>
|
||||
<span v-else>
|
||||
<QBadge v-if="props.value" color="grey">
|
||||
<QIcon name="check" size="xs" />
|
||||
</QBadge>
|
||||
|
||||
<QBadge v-else color="grey" outline>
|
||||
<QIcon name="" size="xs" />
|
||||
</QBadge>
|
||||
</span>
|
||||
|
||||
<CustomerDescriptorProxy
|
||||
v-if="props.col.name === 'clientId'"
|
||||
:id="selectedCustomerId"
|
||||
/>
|
||||
<WorkerDescriptorProxy
|
||||
v-if="props.col.name === 'comercial'"
|
||||
:id="selectedWorkerId"
|
||||
/>
|
||||
</component>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background-color: #292929;
|
||||
padding: 16px;
|
||||
|
||||
.card-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
|
||||
.col-content {
|
||||
border-radius: 4px;
|
||||
padding: 6px 6px 6px 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
{
|
||||
"en": {
|
||||
"status": {
|
||||
"packageInvoicing": "Build packaging tickets",
|
||||
"invoicing": "Invoicing client",
|
||||
"stopping": "Stopping process",
|
||||
"done": "Ended process"
|
||||
},
|
||||
"of": "of"
|
||||
},
|
||||
"es": {
|
||||
"status":{
|
||||
"packageInvoicing": "Generación de tickets de empaque",
|
||||
"invoicing": "Facturando a cliente",
|
||||
"stopping": "Deteniendo proceso",
|
||||
"done": "Proceso detenido",
|
||||
},
|
||||
"of": "de"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'TravelMain' },
|
||||
menus: {
|
||||
main: ['TravelList'],
|
||||
main: ['TravelList', 'ExtraCommunity'],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -29,11 +29,21 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Travel/TravelList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'extra-community',
|
||||
name: 'ExtraCommunity',
|
||||
meta: {
|
||||
title: 'extraCommunity',
|
||||
icon: 'vn:shipment-01',
|
||||
},
|
||||
component: () => import('src/pages/Travel/ExtraCommunity.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'TravelCreate',
|
||||
meta: {
|
||||
title: 'create',
|
||||
title: 'extraCommunity',
|
||||
icon: '',
|
||||
},
|
||||
component: () => import('src/pages/Travel/TravelCreate.vue'),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue