salix-front/src/pages/Claim/Card/ClaimBasicData.vue

92 lines
3.3 KiB
Vue

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnAvatar from 'src/components/ui/VnAvatar.vue';
const route = useRoute();
const { t } = useI18n();
const workersOptions = ref([]);
</script>
<template>
<FetchData
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (workersOptions = data)"
auto-load
/>
<FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
<FormModel
model="Claim"
:url-update="`Claims/updateClaim/${route.params.id}`"
auto-load
>
<template #form="{ data, validate }">
<VnRow>
<VnInput
v-model="data.client.name"
:label="t('claim.customer')"
disable
/>
<VnInputDate v-model="data.created" :label="t('claim.created')" />
</VnRow>
<VnRow>
<VnSelect
:label="t('claim.assignedTo')"
v-model="data.workerFk"
:options="workersOptions"
option-value="id"
option-label="name"
emit-value
auto-load
:rules="validate('claim.claimStateFk')"
>
<template #before>
<VnAvatar
:worker-id="data.workerFk"
size="md"
:title="
workersOptions.find(({ id }) => id == data.workerFk)?.name
"
color="primary"
/>
</template>
</VnSelect>
<VnSelect
v-model="data.claimStateFk"
url="ClaimStates"
:label="t('claim.state')"
option-label="description"
:rules="validate('claim.claimStateFk')"
:input-debounce="0"
/>
</VnRow>
<VnRow>
<QInput
v-model.number="data.packages"
:label="t('globals.packages')"
:rules="validate('claim.packages')"
type="number"
/>
<VnSelectEnum
v-model="data.pickup"
:label="t('claim.pickup')"
table="claim"
column="pickup"
option-label="description"
:translation="(value) => t(`claim.${value}`)"
:default-options="[{ id: null, description: t('claim.null') }]"
/>
</VnRow>
</template>
</FormModel>
</template>