141 lines
4.3 KiB
Vue
141 lines
4.3 KiB
Vue
<script setup>
|
|
import VnTable from 'src/components/VnTable/VnTable.vue';
|
|
import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
|
|
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
|
|
import { toDate, toCurrency } from 'src/filters/index';
|
|
import { useRoute } from 'vue-router';
|
|
import { ref, computed } from 'vue';
|
|
import { useVnConfirm } from 'composables/useVnConfirm';
|
|
import { useI18n } from 'vue-i18n';
|
|
import useNotify from 'src/composables/useNotify.js';
|
|
import axios from 'axios';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
|
|
|
const tableRef = ref();
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const { notify } = useNotify();
|
|
const dataKey = 'VehicleInvoiceIn';
|
|
const { openConfirmationModal } = useVnConfirm();
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
align: 'left',
|
|
name: 'issued',
|
|
label: t('invoiceIn.list.issued'),
|
|
columnFilter: {
|
|
component: 'date',
|
|
},
|
|
format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.issued)),
|
|
cardVisible: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'supplierFk',
|
|
label: t('invoiceIn.list.supplier'),
|
|
columnFilter: {
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'Suppliers',
|
|
fields: ['id', 'name'],
|
|
},
|
|
},
|
|
format: ({ supplierName }) => supplierName,
|
|
columnClass: 'expand',
|
|
cardVisible: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'supplierRef',
|
|
label: t('invoiceIn.supplierRef'),
|
|
cardVisible: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'amount',
|
|
label: t('invoiceIn.list.amount'),
|
|
format: ({ amount }) => toCurrency(amount),
|
|
columnFilter: false,
|
|
cardVisible: true,
|
|
},
|
|
{
|
|
align: 'right',
|
|
name: 'tableActions',
|
|
actions: [
|
|
{
|
|
title: t('vehicle.ticket.unassignInvoice'),
|
|
icon: 'delete',
|
|
action: (row) =>
|
|
openConfirmationModal(
|
|
t('vehicle.ticket.unassignInvoice'),
|
|
t('vehicle.ticket.unassignInvoiceConfirmation'),
|
|
() => unassignInvoice(row.id),
|
|
),
|
|
isPrimary: true,
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
|
|
async function unassignInvoice(id) {
|
|
try {
|
|
await axios.delete(`VehicleInvoiceIns/${id}`);
|
|
notify(t('vehicle.ticket.unassignedInvoice'), 'positive');
|
|
tableRef.value.reload();
|
|
} catch (e) {
|
|
throw e;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VnTable
|
|
ref="tableRef"
|
|
:data-key="dataKey"
|
|
:url="`vehicles/${route.params.id}/getInvoices`"
|
|
:columns="columns"
|
|
search-url="vehicleInvoiceIns"
|
|
:order="['issued DESC', 'supplierRef ASC']"
|
|
:create="{
|
|
urlCreate: 'VehicleInvoiceIns',
|
|
title: t('vehicle.ticket.assignInvoice'),
|
|
formInitialData: {
|
|
vehicleFk: parseInt(route.params.id, 10),
|
|
},
|
|
onDataSaved: ({ id }) => tableRef.reload(),
|
|
}"
|
|
auto-load
|
|
>
|
|
<template #column-supplierFk="{ row }">
|
|
<span class="link" @click.stop>
|
|
{{ row.supplierName }}
|
|
<SupplierDescriptorProxy :id="row.supplierId" />
|
|
</span>
|
|
</template>
|
|
<template #column-supplierRef="{ row }">
|
|
<span class="link" @click.stop>
|
|
{{ row.supplierRef }}
|
|
<InvoiceInDescriptorProxy :id="row.invoiceInFk" />
|
|
</span>
|
|
</template>
|
|
<template #more-create-dialog="{ data }">
|
|
<VnSelect
|
|
url="invoiceIns"
|
|
:label="t('invoiceIn.supplierRef')"
|
|
:fields="['id', 'supplierRef', 'supplierFk']"
|
|
:filter-options="['id', 'supplierRef']"
|
|
v-model="data.invoiceInFk"
|
|
option-label="supplierRef"
|
|
:required="true"
|
|
>
|
|
</VnSelect>
|
|
<VnInputNumber
|
|
:label="t('invoiceIn.list.amount')"
|
|
v-model="data.amount"
|
|
required
|
|
/>
|
|
</template>
|
|
</VnTable>
|
|
</template>
|