295 lines
9.1 KiB
Vue
295 lines
9.1 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { computed, ref, onMounted } from 'vue';
|
|
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
|
|
import { toDateTimeFormat } from 'src/filters/date';
|
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import axios from 'axios';
|
|
import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
|
|
import OrderSearchbar from './Card/OrderSearchbar.vue';
|
|
import OrderFilter from './Card/OrderFilter.vue';
|
|
import RightMenu from 'src/components/common/RightMenu.vue';
|
|
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
|
|
import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
|
|
|
|
import VnTable from 'src/components/VnTable/VnTable.vue';
|
|
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
|
|
const { t } = useI18n();
|
|
const { viewSummary } = useSummaryDialog();
|
|
const tableRef = ref();
|
|
const agencyList = ref([]);
|
|
const route = useRoute();
|
|
const addressOptions = ref([]);
|
|
const columns = computed(() => [
|
|
{
|
|
align: 'left',
|
|
name: 'id',
|
|
label: t('module.id'),
|
|
chip: {
|
|
condition: () => true,
|
|
},
|
|
isId: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'clientFk',
|
|
label: t('module.customer'),
|
|
isTitle: true,
|
|
cardVisible: true,
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'Clients',
|
|
fields: ['id', 'name'],
|
|
},
|
|
columnField: {
|
|
component: null,
|
|
},
|
|
format: (row) => row?.clientName,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'salesPersonFk',
|
|
label: t('module.salesPerson'),
|
|
columnFilter: {
|
|
component: 'select',
|
|
inWhere: true,
|
|
attrs: {
|
|
url: 'Workers/activeWithInheritedRole',
|
|
fields: ['id', 'name'],
|
|
where: { role: 'salesPerson' },
|
|
useLike: false,
|
|
optionValue: 'id',
|
|
optionLabel: 'name',
|
|
optionFilter: 'firstName',
|
|
},
|
|
},
|
|
format: (row) => row?.name,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'isConfirmed',
|
|
label: t('module.isConfirmed'),
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'created',
|
|
label: t('module.created'),
|
|
component: 'date',
|
|
cardVisible: true,
|
|
format: (row) => toDateTimeFormat(row?.landed),
|
|
columnField: {
|
|
component: null,
|
|
},
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'landed',
|
|
label: t('module.landed'),
|
|
component: 'date',
|
|
format: (row) => toDate(row?.landed),
|
|
columnField: {
|
|
component: null,
|
|
},
|
|
style: 'color="positive"',
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'hour',
|
|
label: t('module.hour'),
|
|
format: ({ hourTheoretical, hourEffective }) =>
|
|
dashIfEmpty(hourTheoretical || hourEffective),
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'agencyModeFk',
|
|
label: t('module.agency'),
|
|
format: (row) => row?.agencyName,
|
|
columnFilter: {
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'agencyModes',
|
|
fields: ['id', 'name'],
|
|
find: {
|
|
value: 'agencyModeFk',
|
|
label: 'agencyName',
|
|
},
|
|
},
|
|
},
|
|
cardVisible: true,
|
|
columnClass: 'expand',
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'total',
|
|
label: t('module.total'),
|
|
format: ({ total }) => toCurrency(total),
|
|
cardVisible: true,
|
|
},
|
|
{
|
|
align: 'right',
|
|
label: '',
|
|
name: 'tableActions',
|
|
actions: [
|
|
{
|
|
title: t('InvoiceOutSummary'),
|
|
icon: 'preview',
|
|
action: (row) => viewSummary(row.id, OrderSummary),
|
|
isPrimary: true,
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
onMounted(() => {
|
|
if (!route.query.createForm) return;
|
|
const clientId = route.query.createForm;
|
|
const id = JSON.parse(clientId);
|
|
fetchClientAddress(id.clientFk);
|
|
});
|
|
|
|
async function fetchClientAddress(id, formData = {}) {
|
|
const { data } = await axios.get(
|
|
`Clients/${id}/addresses?filter[order]=isActive DESC`
|
|
);
|
|
addressOptions.value = data;
|
|
formData.addressId = data.defaultAddressFk;
|
|
fetchAgencies(formData);
|
|
}
|
|
|
|
async function fetchAgencies({ landed, addressId }) {
|
|
if (!landed || !addressId) return (agencyList.value = []);
|
|
|
|
const { data } = await axios.get('Agencies/landsThatDay', {
|
|
params: { addressFk: addressId, landed },
|
|
});
|
|
agencyList.value = data;
|
|
}
|
|
|
|
const getDateColor = (date) => {
|
|
const today = Date.vnNew();
|
|
today.setHours(0, 0, 0, 0);
|
|
const timeTicket = new Date(date);
|
|
timeTicket.setHours(0, 0, 0, 0);
|
|
const difference = today - timeTicket;
|
|
if (difference == 0) return 'bg-warning';
|
|
if (difference < 0) return 'bg-success';
|
|
};
|
|
</script>
|
|
<template>
|
|
<OrderSearchbar />
|
|
<RightMenu>
|
|
<template #right-panel>
|
|
<OrderFilter data-key="OrderList" />
|
|
</template>
|
|
</RightMenu>
|
|
<VnTable
|
|
ref="tableRef"
|
|
data-key="OrderList"
|
|
url="Orders/filter"
|
|
:order="['landed DESC', 'clientFk ASC', 'id DESC']"
|
|
:create="{
|
|
urlCreate: 'Orders/new',
|
|
title: t('module.cerateOrder'),
|
|
onDataSaved: (url) => {
|
|
tableRef.redirect(`${url}/catalog`);
|
|
},
|
|
formInitialData: {
|
|
active: true,
|
|
addressId: null,
|
|
clientFk: null,
|
|
},
|
|
}"
|
|
:user-params="{ showEmpty: false }"
|
|
:columns="columns"
|
|
:right-search="false"
|
|
redirect="order"
|
|
>
|
|
<template #column-clientFk="{ row }">
|
|
<span class="link" @click.stop>
|
|
{{ row?.clientName }}
|
|
<CustomerDescriptorProxy :id="row?.clientFk" />
|
|
</span>
|
|
</template>
|
|
<template #column-salesPersonFk="{ row }">
|
|
<span class="link" @click.stop>
|
|
{{ row?.name }}
|
|
<WorkerDescriptorProxy :id="row?.salesPersonFk" />
|
|
</span>
|
|
</template>
|
|
<template #column-landed="{ row }">
|
|
<span v-if="getDateColor(row.landed)">
|
|
<QChip :class="getDateColor(row.landed)" dense square>
|
|
{{ toDate(row?.landed) }}
|
|
</QChip>
|
|
</span>
|
|
</template>
|
|
<template #more-create-dialog="{ data }">
|
|
<VnSelect
|
|
url="Clients"
|
|
:include="{ relation: 'addresses' }"
|
|
v-model="data.clientFk"
|
|
:label="t('module.customer')"
|
|
@update:model-value="(id) => fetchClientAddress(id, data)"
|
|
>
|
|
<template #option="scope">
|
|
<QItem v-bind="scope.itemProps">
|
|
<QItemSection>
|
|
<QItemLabel>
|
|
{{ scope.opt.name }}
|
|
</QItemLabel>
|
|
<QItemLabel caption>
|
|
{{ `#${scope.opt.id}` }}
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</template>
|
|
</VnSelect>
|
|
<VnSelect
|
|
v-model="data.addressId"
|
|
:options="addressOptions"
|
|
:label="t('module.address')"
|
|
option-value="id"
|
|
option-label="nickname"
|
|
@update:model-value="() => fetchAgencies(data)"
|
|
>
|
|
<template #option="scope">
|
|
<QItem v-bind="scope.itemProps">
|
|
<QItemSection>
|
|
<QItemLabel
|
|
:class="{
|
|
'color-vn-label': !scope.opt?.isActive,
|
|
}"
|
|
>
|
|
{{
|
|
`${
|
|
!scope.opt?.isActive
|
|
? t('basicData.inactive')
|
|
: ''
|
|
} `
|
|
}}
|
|
{{ scope.opt?.nickname }}: {{ scope.opt?.street }},
|
|
{{ scope.opt?.city }}
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</template>
|
|
</VnSelect>
|
|
<VnInputDate
|
|
v-model="data.landed"
|
|
:label="t('module.landed')"
|
|
@update:model-value="() => fetchAgencies(data)"
|
|
/>
|
|
<VnSelect
|
|
v-model="data.agencyModeId"
|
|
:label="t('module.agency')"
|
|
:options="agencyList"
|
|
option-value="agencyModeFk"
|
|
option-label="agencyMode"
|
|
/>
|
|
</template>
|
|
</VnTable>
|
|
</template>
|