refactor(Ticket): refs #7527 remove /create
This commit is contained in:
parent
59461d9f3c
commit
25fc7ba038
|
|
@ -1,199 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
import { onBeforeMount, reactive, ref } from 'vue';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
|
|
||||||
import FormModel from 'components/FormModel.vue';
|
|
||||||
import FetchData from 'components/FetchData.vue';
|
|
||||||
import VnRow from 'components/ui/VnRow.vue';
|
|
||||||
import VnSelect from 'components/common/VnSelect.vue';
|
|
||||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
|
||||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
||||||
import { getClient } from 'src/pages/Customer/composables/getClient';
|
|
||||||
import { getAddresses } from 'src/pages/Customer/composables/getAddresses';
|
|
||||||
import { getAgencies } from 'src/pages/Route/Agency/composables/getAgencies';
|
|
||||||
|
|
||||||
import { useState } from 'composables/useState';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const state = useState();
|
|
||||||
const user = state.getUser();
|
|
||||||
|
|
||||||
const initialFormState = reactive({
|
|
||||||
clientId: Number(route.query?.clientFk) || null,
|
|
||||||
addressId: null,
|
|
||||||
agencyModeId: null,
|
|
||||||
warehouseId: user.value.warehouseFk,
|
|
||||||
landed: null,
|
|
||||||
});
|
|
||||||
const clientOptions = ref([]);
|
|
||||||
const agenciesOptions = ref([]);
|
|
||||||
const addressesOptions = ref([]);
|
|
||||||
const warehousesOptions = ref([]);
|
|
||||||
const selectedClient = ref(null);
|
|
||||||
|
|
||||||
onBeforeMount(async () => {
|
|
||||||
await onClientSelected(initialFormState);
|
|
||||||
});
|
|
||||||
|
|
||||||
function resetAgenciesSelector(formData) {
|
|
||||||
agenciesOptions.value = [];
|
|
||||||
formData.agencyModeId = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchClient = async (formData) => {
|
|
||||||
const response = await getClient(formData.clientId);
|
|
||||||
if (!response) return;
|
|
||||||
const [client] = response.data;
|
|
||||||
selectedClient.value = client;
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchAddresses = async (formData) => {
|
|
||||||
const response = await getAddresses(formData.clientId);
|
|
||||||
if (!response) return;
|
|
||||||
addressesOptions.value = response.data;
|
|
||||||
|
|
||||||
const { defaultAddress } = selectedClient.value;
|
|
||||||
formData.addressId = defaultAddress.id;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onClientSelected = async (formData) => {
|
|
||||||
resetAgenciesSelector(formData);
|
|
||||||
await fetchClient(formData);
|
|
||||||
await fetchAddresses(formData);
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchAvailableAgencies = async (formData) => {
|
|
||||||
resetAgenciesSelector(formData);
|
|
||||||
const response= await getAgencies(formData, selectedClient.value);
|
|
||||||
if (!response) return;
|
|
||||||
|
|
||||||
const { options, agency } = response
|
|
||||||
if(options)
|
|
||||||
agenciesOptions.value = options;
|
|
||||||
if(agency)
|
|
||||||
formData.agencyModeId = agency;
|
|
||||||
};
|
|
||||||
|
|
||||||
const redirectToTicketList = (_, { id }) => {
|
|
||||||
router.push({ name: 'TicketSummary', params: { id } });
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<FetchData
|
|
||||||
url="Clients"
|
|
||||||
@on-fetch="(data) => (clientOptions = data)"
|
|
||||||
:filter="{ fields: ['id', 'name', 'defaultAddressFk'], order: 'id' }"
|
|
||||||
auto-load
|
|
||||||
/>
|
|
||||||
<FetchData
|
|
||||||
url="Warehouses"
|
|
||||||
@on-fetch="(data) => (warehousesOptions = data)"
|
|
||||||
order="name"
|
|
||||||
auto-load
|
|
||||||
/>
|
|
||||||
<VnSubToolbar />
|
|
||||||
<div class="q-pa-md">
|
|
||||||
<FormModel
|
|
||||||
url-create="Tickets/new"
|
|
||||||
model="ticket"
|
|
||||||
:form-initial-data="initialFormState"
|
|
||||||
@on-data-saved="redirectToTicketList"
|
|
||||||
>
|
|
||||||
<template #form="{ data }">
|
|
||||||
<VnRow>
|
|
||||||
<div class="col">
|
|
||||||
<VnSelect
|
|
||||||
:label="t('globals.client')"
|
|
||||||
v-model="data.clientId"
|
|
||||||
:options="clientOptions"
|
|
||||||
option-value="id"
|
|
||||||
option-label="name"
|
|
||||||
hide-selected
|
|
||||||
@update:model-value="(client) => onClientSelected(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>
|
|
||||||
</div>
|
|
||||||
</VnRow>
|
|
||||||
<VnRow>
|
|
||||||
<div class="col">
|
|
||||||
<VnSelect
|
|
||||||
:label="t('ticket.create.address')"
|
|
||||||
v-model="data.addressId"
|
|
||||||
:options="addressesOptions"
|
|
||||||
option-value="id"
|
|
||||||
option-label="nickname"
|
|
||||||
hide-selected
|
|
||||||
:disable="!data.clientId"
|
|
||||||
@update:model-value="() => fetchAvailableAgencies(data)"
|
|
||||||
>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel>
|
|
||||||
{{ scope.opt.nickname }}
|
|
||||||
</QItemLabel>
|
|
||||||
<QItemLabel caption>
|
|
||||||
{{ `${scope.opt.street}, ${scope.opt.city}` }}
|
|
||||||
</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelect>
|
|
||||||
</div>
|
|
||||||
</VnRow>
|
|
||||||
<VnRow>
|
|
||||||
<div class="col">
|
|
||||||
<VnInputDate
|
|
||||||
placeholder="dd-mm-aaa"
|
|
||||||
:label="t('globals.landed')"
|
|
||||||
v-model="data.landed"
|
|
||||||
@update:model-value="() => fetchAvailableAgencies(data)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</VnRow>
|
|
||||||
<VnRow>
|
|
||||||
<div class="col">
|
|
||||||
<VnSelect
|
|
||||||
:label="t('globals.warehouse')"
|
|
||||||
v-model="data.warehouseId"
|
|
||||||
:options="warehousesOptions"
|
|
||||||
option-value="id"
|
|
||||||
option-label="name"
|
|
||||||
hide-selected
|
|
||||||
@update:model-value="() => fetchAvailableAgencies(data)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</VnRow>
|
|
||||||
<VnRow>
|
|
||||||
<div class="col">
|
|
||||||
<VnSelect
|
|
||||||
:label="t('globals.agency')"
|
|
||||||
v-model="data.agencyModeId"
|
|
||||||
:options="agenciesOptions"
|
|
||||||
option-value="agencyModeFk"
|
|
||||||
option-label="agencyMode"
|
|
||||||
hide-selected
|
|
||||||
:disable="!data.clientId || !data.landed || !data.warehouseId"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</VnRow>
|
|
||||||
</template>
|
|
||||||
</FormModel>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -226,15 +226,6 @@ export default {
|
||||||
ticketCard,
|
ticketCard,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'create',
|
|
||||||
name: 'TicketCreate',
|
|
||||||
meta: {
|
|
||||||
title: 'createTicket',
|
|
||||||
icon: 'vn:ticketAdd',
|
|
||||||
},
|
|
||||||
component: () => import('src/pages/Ticket/TicketCreate.vue'),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'negative',
|
path: 'negative',
|
||||||
redirect: { name: 'TicketNegative' },
|
redirect: { name: 'TicketNegative' },
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue