refs #6118 importSalixVariables #93
|
|
@ -122,9 +122,24 @@ watch(formUrl, async () => {
|
||||||
<QIcon name="warning" size="md" class="q-mr-md" />
|
<QIcon name="warning" size="md" class="q-mr-md" />
|
||||||
<span>{{ t('globals.changesToSave') }}</span>
|
<span>{{ t('globals.changesToSave') }}</span>
|
||||||
</QBanner>
|
</QBanner>
|
||||||
<QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
|
<div class="column items-center">
|
||||||
<slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
|
<QForm
|
||||||
</QForm>
|
v-if="formData"
|
||||||
|
@submit="save"
|
||||||
|
@reset="reset"
|
||||||
|
class="q-pa-md"
|
||||||
|
id="formModel"
|
||||||
|
>
|
||||||
|
<QCard>
|
||||||
|
<slot
|
||||||
|
name="form"
|
||||||
|
:data="formData"
|
||||||
|
:validate="validate"
|
||||||
|
:filter="filter"
|
||||||
|
/>
|
||||||
|
</QCard>
|
||||||
|
</QForm>
|
||||||
|
pablone marked this conversation as resolved
Outdated
|
|||||||
|
</div>
|
||||||
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
||||||
<div v-if="$props.defaultActions">
|
<div v-if="$props.defaultActions">
|
||||||
<QBtnGroup push class="q-gutter-x-sm">
|
<QBtnGroup push class="q-gutter-x-sm">
|
||||||
|
|
@ -156,3 +171,12 @@ watch(formUrl, async () => {
|
||||||
color="primary"
|
color="primary"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#formModel {
|
||||||
|
max-width: 800px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.q-card {
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<div id="row">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scopped>
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
#row {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
|
||||||
import { useSession } from 'src/composables/useSession';
|
import { useSession } from 'src/composables/useSession';
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
import FormModel from 'components/FormModel.vue';
|
import FormModel from 'components/FormModel.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -90,138 +91,119 @@ const statesFilter = {
|
||||||
auto-load
|
auto-load
|
||||||
/>
|
/>
|
||||||
<FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
|
<FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
|
||||||
|
<FormModel
|
||||||
<div class="column items-center">
|
:url="`Claims/${route.params.id}`"
|
||||||
<QCard>
|
:url-update="`Claims/updateClaim/${route.params.id}`"
|
||||||
<FormModel
|
:filter="claimFilter"
|
||||||
:url="`Claims/${route.params.id}`"
|
model="claim"
|
||||||
:url-update="`Claims/updateClaim/${route.params.id}`"
|
>
|
||||||
:filter="claimFilter"
|
<template #form="{ data, validate, filter }">
|
||||||
model="claim"
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
>
|
<div class="col">
|
||||||
|
pablone marked this conversation as resolved
Outdated
alexm
commented
Si el fiques en KebabCase com esta quasar funciona?? Si el fiques en KebabCase com esta quasar funciona??
|
|||||||
<template #form="{ data, validate, filter }">
|
<QInput
|
||||||
<div class="row q-gutter-md q-mb-md">
|
v-model="data.client.name"
|
||||||
<div class="col">
|
:label="t('claim.basicData.customer')"
|
||||||
<QInput
|
disable
|
||||||
v-model="data.client.name"
|
/>
|
||||||
:label="t('claim.basicData.customer')"
|
</div>
|
||||||
disable
|
<div class="col">
|
||||||
/>
|
<QInput
|
||||||
</div>
|
v-model="data.created"
|
||||||
<div class="col">
|
mask="####-##-##"
|
||||||
<QInput
|
fill-mask="_"
|
||||||
v-model="data.created"
|
autofocus
|
||||||
mask="####-##-##"
|
>
|
||||||
fill-mask="_"
|
<template #append>
|
||||||
autofocus
|
<QIcon name="event" class="cursor-pointer">
|
||||||
>
|
<QPopupProxy
|
||||||
<template #append>
|
cover
|
||||||
<QIcon name="event" class="cursor-pointer">
|
transition-show="scale"
|
||||||
<QPopupProxy
|
transition-hide="scale"
|
||||||
cover
|
>
|
||||||
transition-show="scale"
|
<QDate v-model="data.created" mask="YYYY-MM-DD">
|
||||||
transition-hide="scale"
|
<div class="row items-center justify-end">
|
||||||
>
|
<QBtn
|
||||||
<QDate
|
v-close-popup
|
||||||
v-model="data.created"
|
label="Close"
|
||||||
mask="YYYY-MM-DD"
|
color="primary"
|
||||||
>
|
flat
|
||||||
<div class="row items-center justify-end">
|
/>
|
||||||
<QBtn
|
</div>
|
||||||
v-close-popup
|
</QDate>
|
||||||
label="Close"
|
</QPopupProxy>
|
||||||
color="primary"
|
</QIcon>
|
||||||
flat
|
</template>
|
||||||
/>
|
</QInput>
|
||||||
</div>
|
</div>
|
||||||
</QDate>
|
</VnRow>
|
||||||
</QPopupProxy>
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
</QIcon>
|
<div class="col">
|
||||||
</template>
|
<QSelect
|
||||||
</QInput>
|
v-model="data.workerFk"
|
||||||
</div>
|
:options="workers"
|
||||||
</div>
|
option-value="id"
|
||||||
<div class="row q-gutter-md q-mb-md">
|
option-label="name"
|
||||||
<div class="col">
|
emit-value
|
||||||
<QSelect
|
:label="t('claim.basicData.assignedTo')"
|
||||||
v-model="data.workerFk"
|
map-options
|
||||||
:options="workers"
|
use-input
|
||||||
option-value="id"
|
@filter="(value, update) => filter(value, update, workerFilter)"
|
||||||
option-label="name"
|
:rules="validate('claim.claimStateFk')"
|
||||||
emit-value
|
:input-debounce="0"
|
||||||
:label="t('claim.basicData.assignedTo')"
|
>
|
||||||
map-options
|
<template #before>
|
||||||
use-input
|
<QAvatar color="orange">
|
||||||
@filter="
|
<QImg
|
||||||
(value, update) => filter(value, update, workerFilter)
|
v-if="data.workerFk"
|
||||||
"
|
:src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
|
||||||
:rules="validate('claim.claimStateFk')"
|
spinner-color="white"
|
||||||
:input-debounce="0"
|
/>
|
||||||
>
|
</QAvatar>
|
||||||
<template #before>
|
</template>
|
||||||
<QAvatar color="orange">
|
</QSelect>
|
||||||
<QImg
|
</div>
|
||||||
v-if="data.workerFk"
|
<div class="col">
|
||||||
:src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
|
<QSelect
|
||||||
spinner-color="white"
|
v-model="data.claimStateFk"
|
||||||
/>
|
:options="claimStates"
|
||||||
</QAvatar>
|
option-value="id"
|
||||||
</template>
|
option-label="description"
|
||||||
</QSelect>
|
emit-value
|
||||||
</div>
|
:label="t('claim.basicData.state')"
|
||||||
<div class="col">
|
map-options
|
||||||
<QSelect
|
use-input
|
||||||
v-model="data.claimStateFk"
|
@filter="(value, update) => filter(value, update, statesFilter)"
|
||||||
:options="claimStates"
|
:rules="validate('claim.claimStateFk')"
|
||||||
option-value="id"
|
:input-debounce="0"
|
||||||
option-label="description"
|
>
|
||||||
emit-value
|
</QSelect>
|
||||||
:label="t('claim.basicData.state')"
|
</div>
|
||||||
map-options
|
</VnRow>
|
||||||
use-input
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
@filter="
|
<div class="col">
|
||||||
(value, update) => filter(value, update, statesFilter)
|
<QInput
|
||||||
"
|
v-model.number="data.packages"
|
||||||
:rules="validate('claim.claimStateFk')"
|
:label="t('claim.basicData.packages')"
|
||||||
:input-debounce="0"
|
:rules="validate('claim.packages')"
|
||||||
>
|
type="number"
|
||||||
</QSelect>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col">
|
||||||
<div class="row q-gutter-md q-mb-md">
|
<QInput
|
||||||
<div class="col">
|
v-model="data.rma"
|
||||||
<QInput
|
:label="t('claim.basicData.returnOfMaterial')"
|
||||||
v-model.number="data.packages"
|
:rules="validate('claim.rma')"
|
||||||
:label="t('claim.basicData.packages')"
|
/>
|
||||||
:rules="validate('claim.packages')"
|
</div>
|
||||||
type="number"
|
</VnRow>
|
||||||
/>
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
</div>
|
<div class="col">
|
||||||
<div class="col">
|
<QCheckbox
|
||||||
<QInput
|
v-model="data.hasToPickUp"
|
||||||
v-model="data.rma"
|
:label="t('claim.basicData.picked')"
|
||||||
:label="t('claim.basicData.returnOfMaterial')"
|
/>
|
||||||
:rules="validate('claim.rma')"
|
</div>
|
||||||
/>
|
</VnRow>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</FormModel>
|
||||||
<div class="row q-gutter-md q-mb-md">
|
|
||||||
<div class="col">
|
|
||||||
<QCheckbox
|
|
||||||
v-model="data.hasToPickUp"
|
|
||||||
:label="t('claim.basicData.picked')"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</FormModel>
|
|
||||||
</QCard>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.q-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 60em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
|
||||||
import { useSession } from 'src/composables/useSession';
|
import { useSession } from 'src/composables/useSession';
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
import FormModel from 'components/FormModel.vue';
|
import FormModel from 'components/FormModel.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -58,121 +59,109 @@ const filterOptions = {
|
||||||
@on-fetch="(data) => (businessTypes = data)"
|
@on-fetch="(data) => (businessTypes = data)"
|
||||||
auto-load
|
auto-load
|
||||||
/>
|
/>
|
||||||
<div class="column items-center">
|
|
||||||
<QCard>
|
|
||||||
<FormModel :url="`Clients/${route.params.id}`" model="customer">
|
|
||||||
<template #form="{ data, validate, filter }">
|
|
||||||
<div class="row q-gutter-md q-mb-md">
|
|
||||||
<div class="col">
|
|
||||||
<QInput
|
|
||||||
v-model="data.socialName"
|
|
||||||
:label="t('customer.basicData.socialName')"
|
|
||||||
:rules="validate('client.socialName')"
|
|
||||||
autofocus
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<QSelect
|
|
||||||
v-model="data.businessTypeFk"
|
|
||||||
:options="businessTypes"
|
|
||||||
option-value="code"
|
|
||||||
option-label="description"
|
|
||||||
emit-value
|
|
||||||
:label="t('customer.basicData.businessType')"
|
|
||||||
map-options
|
|
||||||
:rules="validate('client.businessTypeFk')"
|
|
||||||
:input-debounce="0"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row q-gutter-md q-mb-md">
|
|
||||||
<div class="col">
|
|
||||||
<QInput
|
|
||||||
v-model="data.contact"
|
|
||||||
:label="t('customer.basicData.contact')"
|
|
||||||
:rules="validate('client.contact')"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<QInput
|
|
||||||
v-model="data.email"
|
|
||||||
type="email"
|
|
||||||
:label="t('customer.basicData.email')"
|
|
||||||
:rules="validate('client.email')"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row q-gutter-md q-mb-md">
|
|
||||||
<div class="col">
|
|
||||||
<QInput
|
|
||||||
v-model="data.phone"
|
|
||||||
:label="t('customer.basicData.phone')"
|
|
||||||
:rules="validate('client.phone')"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<QInput
|
|
||||||
v-model="data.mobile"
|
|
||||||
:label="t('customer.basicData.mobile')"
|
|
||||||
:rules="validate('client.mobile')"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row q-gutter-md q-mb-md">
|
|
||||||
<div class="col">
|
|
||||||
<QSelect
|
|
||||||
v-model="data.salesPersonFk"
|
|
||||||
:options="workers"
|
|
||||||
option-value="id"
|
|
||||||
option-label="name"
|
|
||||||
emit-value
|
|
||||||
:label="t('customer.basicData.salesPerson')"
|
|
||||||
map-options
|
|
||||||
use-input
|
|
||||||
@filter="
|
|
||||||
(value, update) =>
|
|
||||||
filter(value, update, filterOptions)
|
|
||||||
"
|
|
||||||
:rules="validate('client.salesPersonFk')"
|
|
||||||
:input-debounce="0"
|
|
||||||
>
|
|
||||||
<template #prepend>
|
|
||||||
<QAvatar color="orange">
|
|
||||||
<QImg
|
|
||||||
v-if="data.salesPersonFk"
|
|
||||||
:src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
|
|
||||||
spinner-color="white"
|
|
||||||
/>
|
|
||||||
</QAvatar>
|
|
||||||
</template>
|
|
||||||
</QSelect>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<QSelect
|
|
||||||
v-model="data.contactChannelFk"
|
|
||||||
:options="contactChannels"
|
|
||||||
option-value="id"
|
|
||||||
option-label="name"
|
|
||||||
emit-value
|
|
||||||
:label="t('customer.basicData.contactChannel')"
|
|
||||||
map-options
|
|
||||||
:rules="validate('client.contactChannelFk')"
|
|
||||||
:input-debounce="0"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</FormModel>
|
|
||||||
</QCard>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<FormModel :url="`Clients/${route.params.id}`" model="customer">
|
||||||
.q-card {
|
<template #form="{ data, validate, filter }">
|
||||||
width: 800px;
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
pablone marked this conversation as resolved
Outdated
alexm
commented
Aci Aci
|
|||||||
}
|
<div class="col">
|
||||||
</style>
|
<QInput
|
||||||
|
v-model="data.socialName"
|
||||||
|
:label="t('customer.basicData.socialName')"
|
||||||
|
:rules="validate('client.socialName')"
|
||||||
|
autofocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<QSelect
|
||||||
|
v-model="data.businessTypeFk"
|
||||||
|
:options="businessTypes"
|
||||||
|
option-value="code"
|
||||||
|
option-label="description"
|
||||||
|
emit-value
|
||||||
|
:label="t('customer.basicData.businessType')"
|
||||||
|
map-options
|
||||||
|
:rules="validate('client.businessTypeFk')"
|
||||||
|
:input-debounce="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
pablone marked this conversation as resolved
Outdated
alexm
commented
Aci Aci
|
|||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<QInput
|
||||||
|
v-model="data.contact"
|
||||||
|
:label="t('customer.basicData.contact')"
|
||||||
|
:rules="validate('client.contact')"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<QInput
|
||||||
|
v-model="data.email"
|
||||||
|
type="email"
|
||||||
|
:label="t('customer.basicData.email')"
|
||||||
|
:rules="validate('client.email')"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<QInput
|
||||||
|
v-model="data.phone"
|
||||||
|
:label="t('customer.basicData.phone')"
|
||||||
|
:rules="validate('client.phone')"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<QInput
|
||||||
|
v-model="data.mobile"
|
||||||
|
:label="t('customer.basicData.mobile')"
|
||||||
|
:rules="validate('client.mobile')"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<QSelect
|
||||||
|
v-model="data.salesPersonFk"
|
||||||
|
:options="workers"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
emit-value
|
||||||
|
:label="t('customer.basicData.salesPerson')"
|
||||||
|
map-options
|
||||||
|
use-input
|
||||||
|
@filter="(value, update) => filter(value, update, filterOptions)"
|
||||||
|
:rules="validate('client.salesPersonFk')"
|
||||||
|
:input-debounce="0"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<QAvatar color="orange">
|
||||||
|
<QImg
|
||||||
|
v-if="data.salesPersonFk"
|
||||||
|
:src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
|
||||||
|
spinner-color="white"
|
||||||
|
/>
|
||||||
|
</QAvatar>
|
||||||
|
</template>
|
||||||
|
</QSelect>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<QSelect
|
||||||
|
v-model="data.contactChannelFk"
|
||||||
|
:options="contactChannels"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
emit-value
|
||||||
|
:label="t('customer.basicData.contactChannel')"
|
||||||
|
map-options
|
||||||
|
:rules="validate('client.contactChannelFk')"
|
||||||
|
:input-debounce="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModel>
|
||||||
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Declarar como scoped y usar un id