84 lines
2.4 KiB
Vue
84 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex justify-center mt-16">
|
|
<div>
|
|
<div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
|
|
<MalioInputText
|
|
label="Nom du client (Entreprise)"
|
|
/>
|
|
<MalioInputText
|
|
label="Nom du contact principal"
|
|
/>
|
|
<MalioInputText
|
|
label="Prénom du contact principal"
|
|
/>
|
|
<MalioSelectCheckbox
|
|
v-model="multiselectValue"
|
|
label="Catégorie"
|
|
:options="[
|
|
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
|
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
|
]"
|
|
/>
|
|
<MalioInputPhone
|
|
v-for="(_, index) in phones"
|
|
:key="index"
|
|
v-model="phones[index]"
|
|
label="Téléphone"
|
|
add-icon-name="mdi:plus"
|
|
:addable="phones.length === 1"
|
|
@add="addPhoneInput"
|
|
/>
|
|
<MalioInputEmail
|
|
label="Email"
|
|
/>
|
|
<MalioSelect
|
|
v-model="distributeur"
|
|
value=""
|
|
label="Distributeur / Courtier"
|
|
:options="[
|
|
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
|
{label: 'Distributeur', value: 'Distributeur'},
|
|
{label: 'Courtier', value: 'Courtier'},
|
|
]"
|
|
/>
|
|
<MalioSelect
|
|
v-model="nomCourtier"
|
|
value=""
|
|
label="Nom du courtier"
|
|
:options="[
|
|
{label: 'Nom 1', value: 'Nom 1'}
|
|
]"
|
|
/>
|
|
<MalioSelect
|
|
v-model="nomDistributeur"
|
|
value=""
|
|
label="Nom du distributeur"
|
|
:options="[
|
|
{label: 'Nom 1', value: 'Nom 1'}
|
|
]"
|
|
/>
|
|
<MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
|
|
</div>
|
|
<div class="mt-16 flex justify-center">
|
|
<MalioButton label="Valider" variant="primary"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
|
|
const multiselectValue = ref<Array<string | number>>([])
|
|
const distributeur = ref<string>('')
|
|
const phones = ref<string[]>([''])
|
|
const nomDistributeur = ref<string>('')
|
|
const nomCourtier = ref<string>('')
|
|
|
|
function addPhoneInput() {
|
|
phones.value.push('')
|
|
}
|
|
</script>
|