forked from verdnatura/salix-front
Solucion a comentarios 3
This commit is contained in:
carlosfonseca
parent
142155e14e
commit
1d37b91e09
|
|
@ -1,11 +1,10 @@
|
|||
<script setup>
|
||||
import { onBeforeMount, ref, watch } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'src/components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
|
|
@ -13,17 +12,29 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
|||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const data = ref({});
|
||||
const formInitialData = reactive({});
|
||||
|
||||
const workersOptions = ref([]);
|
||||
const countriesOptions = ref([]);
|
||||
const educationLevelsOptions = ref([]);
|
||||
|
||||
const workerFilter = { fields: ['id', 'nickname'], where: { id: null } };
|
||||
const workerFilter = {
|
||||
include: [
|
||||
{
|
||||
relation: 'user',
|
||||
scope: {
|
||||
fields: ['name', 'emailVerified'],
|
||||
include: { relation: 'emailUser', scope: { fields: ['email'] } },
|
||||
},
|
||||
},
|
||||
{ relation: 'sip', scope: { fields: ['extension', 'secret'] } },
|
||||
{ relation: 'department', scope: { include: { relation: 'department' } } },
|
||||
],
|
||||
};
|
||||
const workersFilter = {
|
||||
fields: ['id', 'nickname'],
|
||||
order: 'nickname ASC',
|
||||
limit: 30,
|
||||
skip: 60,
|
||||
};
|
||||
const countriesFilter = {
|
||||
fields: ['id', 'country', 'code'],
|
||||
|
|
@ -36,52 +47,6 @@ const maritalStatus = [
|
|||
{ code: 'M', name: t('Married') },
|
||||
{ code: 'S', name: t('Single') },
|
||||
];
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData(route.params.id);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
(newValue) => {
|
||||
getData(newValue);
|
||||
}
|
||||
);
|
||||
|
||||
const getData = async (id) => {
|
||||
try {
|
||||
const worker = await axios.get(`Workers/${id}`);
|
||||
workerFilter.where.id = worker.data.bossFk;
|
||||
data.value = worker.data;
|
||||
|
||||
const workers = await axios.get('Workers/search', {
|
||||
params: { filter: JSON.stringify(workerFilter) },
|
||||
});
|
||||
data.value.bossFk = Number(workers.data[0].code);
|
||||
} catch (error) {
|
||||
data.value = {
|
||||
SSN: null,
|
||||
bossFk: null,
|
||||
educationLevelFk: null,
|
||||
firstName: null,
|
||||
lastName: null,
|
||||
locker: null,
|
||||
maritalStatus: null,
|
||||
mobileExtension: null,
|
||||
originCountryFk: null,
|
||||
phone: null,
|
||||
};
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
try {
|
||||
await axios.patch(`Workers/${route.params.id}`, data.value);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -104,141 +69,113 @@ const saveData = async () => {
|
|||
url="EducationLevels"
|
||||
/>
|
||||
|
||||
<Teleport to="#st-actions">
|
||||
<QBtnGroup push class="q-gutter-x-sm">
|
||||
<QBtn
|
||||
:disabled="!hasChanged"
|
||||
:label="t('globals.reset')"
|
||||
:loading="isLoading"
|
||||
@click="setInitialData"
|
||||
color="primary"
|
||||
flat
|
||||
icon="restart_alt"
|
||||
/>
|
||||
<QBtn
|
||||
:disabled="isLoading"
|
||||
:label="t('globals.save')"
|
||||
:loading="isLoading"
|
||||
@click.stop="saveData"
|
||||
color="primary"
|
||||
icon="save"
|
||||
/>
|
||||
</QBtnGroup>
|
||||
</Teleport>
|
||||
<FormModel
|
||||
:filter="workerFilter"
|
||||
:form-initial-data="formInitialData"
|
||||
:url="`Workers/${route.params.id}`"
|
||||
auto-load
|
||||
model="Worker"
|
||||
>
|
||||
<template #form="{ data }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput :label="t('Name')" clearable v-model="data.firstName" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput :label="t('Last name')" clearable v-model="data.lastName" />
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<div class="full-width flex justify-center">
|
||||
<QCard class="card-width q-pa-lg">
|
||||
<QCardSection>
|
||||
<QForm>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Name')"
|
||||
clearable
|
||||
v-model="data.firstName"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Last name')"
|
||||
clearable
|
||||
v-model="data.lastName"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.phone"
|
||||
:label="t('Business phone')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.mobileExtension"
|
||||
:label="t('Mobile extension')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.phone"
|
||||
:label="t('Business phone')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.mobileExtension"
|
||||
:label="t('Mobile extension')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Boss')"
|
||||
:options="workersOptions"
|
||||
hide-selected
|
||||
option-label="nickname"
|
||||
option-value="id"
|
||||
v-model="data.bossFk"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ scope.opt?.nickname }},
|
||||
{{ scope.opt?.code }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Marital status')"
|
||||
:options="maritalStatus"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="code"
|
||||
v-model="data.maritalStatus"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Boss')"
|
||||
:options="workersOptions"
|
||||
hide-selected
|
||||
option-label="nickname"
|
||||
option-value="id"
|
||||
v-model="data.bossFk"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ scope.opt?.nickname }},
|
||||
{{ scope.opt?.code }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Marital status')"
|
||||
:options="maritalStatus"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="code"
|
||||
v-model="data.maritalStatus"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Origin country')"
|
||||
:options="countriesOptions"
|
||||
hide-selected
|
||||
option-label="country"
|
||||
option-value="id"
|
||||
v-model="data.originCountryFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Education level')"
|
||||
:options="educationLevelsOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.educationLevelFk"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Origin country')"
|
||||
:options="countriesOptions"
|
||||
hide-selected
|
||||
option-label="country"
|
||||
option-value="id"
|
||||
v-model="data.originCountryFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Education level')"
|
||||
:options="educationLevelsOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="data.educationLevelFk"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput v-model="data.SSN" :label="t('SSN')" clearable />
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.locker"
|
||||
type="number"
|
||||
:label="t('Locker')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</QForm>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</div>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput v-model="data.SSN" :label="t('SSN')" clearable />
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.locker"
|
||||
type="number"
|
||||
:label="t('Locker')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
|
@ -55,7 +55,18 @@ const filter = {
|
|||
],
|
||||
};
|
||||
|
||||
const sip = computed(() => worker.value?.sip && worker.value.sip.extension);
|
||||
const sip = ref(null);
|
||||
|
||||
watch(
|
||||
() => [worker.value?.sip?.extension, state.get('extension')],
|
||||
([newWorkerSip, newStateExtension], [oldWorkerSip, oldStateExtension]) => {
|
||||
if (newStateExtension !== oldStateExtension || sip.value === oldStateExtension) {
|
||||
sip.value = newStateExtension;
|
||||
} else if (newWorkerSip !== oldWorkerSip && sip.value !== newStateExtension) {
|
||||
sip.value = newWorkerSip;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function getWorkerAvatar() {
|
||||
const token = getTokenMultimedia();
|
||||
|
|
@ -114,7 +125,7 @@ const setData = (entity) => {
|
|||
<VnLinkPhone :phone-number="entity.phone" />
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :value="state.get('extension') || sip">
|
||||
<VnLv :value="sip">
|
||||
<template #label>
|
||||
{{ t('worker.summary.sipExtension') }}
|
||||
<VnLinkPhone v-if="sip" :phone-number="sip" />
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ const toWorkerNoteCreate = () => {
|
|||
|
||||
<template>
|
||||
<div class="full-width flex justify-center">
|
||||
<QCard class="card-width q-pa-lg" v-if="rows.length">
|
||||
<QCard class="full-width q-pa-lg" v-if="rows.length">
|
||||
<div>
|
||||
<QCard
|
||||
v-for="(item, index) in rows"
|
||||
|
|
@ -61,7 +61,7 @@ const toWorkerNoteCreate = () => {
|
|||
}"
|
||||
>
|
||||
<div class="flex justify-end">
|
||||
<p class="color-vn-label">
|
||||
<p class="color-vn-label q-mb-none">
|
||||
{{ date.formatDate(item?.created, 'DD-MM-YYYY HH:mm') }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue