salix-front/src/pages/Department/Card/DepartmentBasicData.vue

114 lines
3.7 KiB
Vue

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
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 VnSelect from 'src/components/common/VnSelect.vue';
const route = useRoute();
const { t } = useI18n();
const workersOptions = ref([]);
const clientsOptions = ref([]);
</script>
<template>
<FetchData
url="Workers/search"
@on-fetch="(data) => (workersOptions = data)"
auto-load
/>
<FetchData url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
<FormModel
:url="`Departments/${route.params.id}`"
model="department"
auto-load
class="full-width"
>
<template #form="{ data, validate }">
<VnRow>
<VnInput
:label="t('department.name')"
v-model="data.name"
:rules="validate('department.name')"
clearable
autofocus
/>
<VnInput
v-model="data.code"
:label="t('department.code')"
:rules="validate('department.code')"
clearable
/>
</VnRow>
<VnRow>
<VnInput
:label="t('department.chat')"
v-model="data.chatName"
:rules="validate('department.chat')"
clearable
/>
<VnInput
v-model="data.notificationEmail"
:label="t('department.email')"
:rules="validate('department.email')"
clearable
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('department.bossDepartment')"
v-model="data.workerFk"
:options="workersOptions"
option-value="id"
option-label="name"
hide-selected
map-options
:rules="validate('department.workerFk')"
/>
<VnSelect
:label="t('department.selfConsumptionCustomer')"
v-model="data.clientFk"
:options="clientsOptions"
option-value="id"
option-label="name"
hide-selected
map-options
:rules="validate('department.clientFk')"
/>
</VnRow>
<VnRow>
<QCheckbox
:label="t('department.telework')"
v-model="data.isTeleworking"
/>
<QCheckbox
:label="t('department.notifyOnErrors')"
v-model="data.hasToMistake"
:false-value="0"
:true-value="1"
/>
</VnRow>
<VnRow>
<QCheckbox
:label="t('department.worksInProduction')"
v-model="data.isProduction"
/>
<QCheckbox
:label="t('department.hasToRefill')"
v-model="data.hasToRefill"
/>
</VnRow>
<VnRow>
<QCheckbox
:label="t('department.hasToSendMail')"
v-model="data.hasToSendMail"
/>
</VnRow>
</template>
</FormModel>
</template>