vuee

Télécharger au format txt, pdf ou txt
Télécharger au format txt, pdf ou txt
Vous êtes sur la page 1sur 8

<template>

<div class="tab-content">
<div class="panel-wrapper collapse in">
<div class="panel-body">
<h1 style="text-align: center; padding-bottom: 25px;">Soumettre un ticket à
l'assistance</h1>
<form @submit.prevent="submitForm">
<div class="tab-content" id="myTabContent_9">

<!-- Titre de la tâche -->


<div class="row pb-15">
<div class="col-sm-6 d-flex justify-content-center">
<div class="form-group row">
<label for="titreTache" class="col-sm-4 col-form-label">Objet de
la demande :<span
style="color: red">*</span></label>
<div class="col-sm-8">
<input type="text" id="titreTache" v-model="form.titreTache"
class="form-control" required
minlength="20" maxlength="40">
<span v-if="submitted && !form.titreTache" style="color:red">{{
$t('validation._field_required_')
}}</span>
</div>
</div>
</div>

<!-- Votre Email -->


<div class="col-sm-6">
<div class="form-group row">
<label for="email" class="col-sm-4 col-form-label">Votre
Email :<span
style="color: red">*</span></label>
<div class="col-sm-8">
<!-- pattern="" -->
<input type="email" id="email" v-model="form.email"
class="form-control" size="30" required>
<span v-if="submitted && !form.email"
style="color:red">{{ $t('validation._field_required_')
}}</span>
</div>
</div>
</div>
</div>

<div class="row pb-15">


<!-- Transmettez vous un document contenant plusieurs factures ? -->

<!-- Transmettez-vous un PDF contenant plusieurs documents ? -->


<div class="col-sm-6">
<div class="form-group row">
<label class="col-sm-4 col-form-label">
Transmettez-vous un PDF contenant plusieurs documents ? (à
découper)<span
style="color: red">*</span>
</label>
<div class="col-sm-8 radio-container">
<div class="radio radio-success" style="margin: 0px; display:
inline-block;">
<input autocomplete="off" id="decoupageOui" v-
model="form.decoupage" type="radio" value="oui"
required>
<label for="decoupageOui" class="txt-color" style="margin-
right: 10px;">Oui</label>
</div>
<div class="radio radio-success" style="margin: 0px 20px 0px
0px; display: inline-block;">
<input autocomplete="off" id="decoupageNon" v-
model="form.decoupage" type="radio" value="non"
required>
<label for="decoupageNon" class="txt-color">Non</label>
</div>
<span v-if="submitted && !form.decoupage" style="color:red;">
{{ $t('validation._field_required_') }}
</span>
</div>
</div>
</div>

<!-- Les modifications qui ont été apportées à vos documents sont :
-->
<!-- Des modifications qui ont été apportées à vos documents sont -->
<div v-if="form.decoupage === 'non' || (form.decoupage === 'oui' &&
form.produitouinon === 'non')"
class="col-sm-6">
<div class="form-group row">
<label for="modeleOptions" class="col-sm-4 col-form-label">
Des modifications qui ont été apportées à vos documents
sont :<span style="color: red">*</span>
</label>
<div class="col-sm-8">
<select id="modeleOptions" v-model="form.modeleOption"
class="form-control taller-select" required>
<option value="" disabled selected>Veuillez sélectionner une
option</option>
<option value="seulement">Aucune</option>
<option value="tous">Définitives</option>
<option value="erreur">Ponctuelles et une erreur à la
génération des documents</option>
</select>
<span v-if="submitted && !form.modeleOption"
style="color:red;">
{{ $t('validation._field_required_') }}
</span>
</div>
</div>
</div>

<!-- Le problème ce produit-il lors du découpage ? -->

<div v-if="form.decoupage === 'oui'" class="col-sm-6">


<div class="form-group row">
<label class="col-sm-4 col-form-label">
Le problème ce produit-il lors du découpage ?<span
style="color: red">*</span>
</label>
<div class="col-sm-8 radio-container">
<div class="radio radio-success" style="margin: 0px; display:
inline-block;">
<input autocomplete="off" id="produitoui" v-
model="form.produitouinon" type="radio" value="oui"
required>
<label for="produitoui" class="txt-color" style="margin-
right: 10px;">Oui</label>
</div>
<div class="radio radio-success" style="margin: 0px 20px 0px
0px; display: inline-block;">
<input autocomplete="off" id="produitnon" v-
model="form.produitouinon" type="radio" value="non"
required>
<label for="produitnon" class="txt-color">Non</label>
</div>
<span v-if="showErrors && !form.produitouinon" style="color:
red;">
{{ $t('validation._field_required_') }}
</span>
</div>
</div>
</div>
<!-- Joindre le PDF -->
<div v-if="form.decoupage === 'oui' && form.produitouinon === 'oui'"
class="col-sm-6">
<div class="form-group row">
<label for="joindre-pdf" class="col-sm-4 col-form-label">Joindre
le PDF</label>
<div class="col-sm-8">
<div id="dropzone" class="vue-dropzone dropzone dz-clickable
custom-dropzone">
<input type="file" id="joindre-pdf"
@change="handleFileUpload('joindre-pdf', $event)"
class="form-control dropzone-input" multiple />
<div class="dz-default dz-message">
<span><i class="fa fa-cloud-upload"></i> Joindre les
documents</span>
</div>
</div>
<ul>
<li v-for="(file, index) in selectedFiles" :key="index">
{{ file.name }}
<button @click="removeFile('joindre-pdf', index)"
class="remove-file-btn">✖</button>
</li>
</ul>
</div>
</div>
</div>

</div>
<!-- Joindre les documents-->
<div v-if="form.modeleOption === 'seulement'" class="row pb-15">

<div class="form-group">
<label for="document" class="col-sm-2 col-form-label">Joindre les
documents</label>
<div class="col-sm-4">
<div id="dropzone" class="vue-dropzone dropzone dz-clickable
custom-dropzone">
<input type="file" id="document"
@change="handleFileUpload('document', $event)"
class="form-control dropzone-input" multiple />
<div class="dz-default dz-message">
<span><i class="fa fa-cloud-upload"></i> Joindre les
documents</span>
</div>
</div>
<ul>
<li v-for="(file, index) in selectedFiles4" :key="index">
{{ file.name }}
<button @click="removeFile('document', index)" class="remove-
file-btn">✖</button>
</li>
</ul>
</div>
</div>

</div>
<!-- Définitives -->
<div v-if="form.modeleOption === 'tous'" class="row pb-15">
<!-- Section: Joindre les documents -->
<div class="col-sm-6">
<div class="form-group row">
<label for="document_def" class="col-sm-4 col-form-label">
Joindre les documents<span style="color: red;">*</span>
</label>
<div class="col-sm-8">
<div id="dropzone" class="vue-dropzone dropzone dz-clickable
custom-dropzone">
<input type="file" id="document_def"
@change="handleFileUpload('document_def', $event)"
class="form-control dropzone-input" multiple />
<div class="dz-default dz-message">
<span><i class="fa fa-cloud-upload"></i> Joindre les
documents</span>
</div>
</div>
<ul>
<li v-for="(file, index) in selectedFiles5" :key="index"
style="display: flex; align-items: center; margin-top:
5px;">
<span style="flex-grow: 1;">{{ file.name }}</span>
<button @click="removeFile('document_def', index)"
class="remove-file-btn"
style="background: none; border: none; color: red;
cursor: pointer;">

</button>
</li>
</ul>
</div>
</div>
</div>

<!-- Section 2: Est-ce un nouveau modèle -->


<div class="col-sm-6">
<div class="form-group row">
<label class="col-sm-4 col-form-label">
Est-ce un nouveau modèle (mise en page) de PDF remplaçant
l'existant ?
<span style="color: red">*</span>
</label>
<div class="col-sm-8 radio-container">
<div class="radio radio-success" style="margin: 0px; display:
inline-block;">
<input autocomplete="off" id="produitoui" v-
model="form.defouinon" type="radio" value="oui"
required />
<label for="produitoui" class="txt-color" style="margin-
right: 10px;">Oui</label>
</div>
<div class="radio radio-success" style="margin: 0px 20px 0px
0px; display: inline-block;">
<input autocomplete="off" id="produitnon" v-
model="form.defouinon" type="radio" value="non"
required />
<label for="produitnon" class="txt-color">Non</label>
</div>
<span v-if="showErrors && !form.defouinon" style="color: red;">
{{ $t('validation._field_required_') }}
</span>
</div>
</div>
</div>
</div>

<!-- Je souhaite : -->


<div v-if="form.modeleOption === 'erreur'" class="row pb-15">
<!-- Section 1: Je souhaite -->
<div class="col-sm-6">
<div class="form-group row">
<label class="col-sm-4 col-form-label">
Je souhaite :<span style="color: red">*</span>
</label>
<div class="col-sm-8 radio-container">
<div style="display: flex; align-items: center;">
<div class="radio radio-success" style="margin: 0px; display:
inline-block;">
<input autocomplete="off" id="rectifierMoi" v-
model="form.erreurOption" type="radio"
value="rectifierMoi" required>
<label for="rectifierMoi" class="txt-color" style="margin-
right: 10px;">Rééditer ma facture et la renvoyer</label>
</div>
<div class="radio radio-success" style="margin: 0px 20px 0px
0px; display: inline-block;">
<input autocomplete="off" id="qweeby" v-
model="form.erreurOption" type="radio" value="qweeby"
required>
<label for="qweeby" class="txt-color">Que Qweeby la force
car je ne peux pas la rééditer</label>
</div>
<span v-if="submitted && !form.erreurOption"
style="color:red;">
{{ $t('validation._field_required_') }}
</span>
</div>
</div>
</div>
</div>

</div>

<div v-if="form.erreurOption === 'qweeby'" class="row pb-15">


<!-- Section 1: Veuillez nous indiquer les modifications -->
<div class="col-sm-6">
<div class="form-group row">
<label for="qweebyText" class="col-sm-4 col-form-label">Veuillez
nous indiquer les modifications
apportées :
<span style="color: red">*</span>
</label>
<div class="col-sm-8">
<textarea id="qweebyText" v-model="form.qweebyText"
class="form-control" required></textarea>
<span v-if="submitted && !form.qweebyText" style="color:red;">
{{ $t('validation._field_required_') }}
</span>
</div>
</div>
</div>

<!-- Section 2: Joindre les documents -->


<div class="col-sm-6">
<div class="form-group row">
<label for="factures-qweeby" class="col-sm-4 col-form-label">
Joindre les documents<span style="color: red">*</span>
</label>
<div class="col-sm-8">
<div id="dropzone" class="vue-dropzone dropzone dz-clickable
custom-dropzone">
<input type="file" id="factures-qweeby"
@change="handleFileUpload('factures-qweeby', $event)"
class="form-control dropzone-input" multiple required />
<div class="dz-default dz-message">
<span><i class="fa fa-cloud-upload"></i> Joindre les
documents</span>
</div>
</div>
<ul>
<li v-for="(file, index) in
selectedFiles2" :key="index">{{ file.name }}
<button @click="removeFile('factures-qweeby', index)"
class="remove-file-btn">✖</button>
</li>
</ul>
<span v-if="submitted && !form.factures" style="color:red;">
{{ $t('validation._field_required_') }}
</span>
</div>
</div>
</div>
</div>

<!-- Description -->


<div v-if="allFieldsFilled" class="row pb-15">
<div class="col-sm-12">
<div class="form-group row">
<label for="description" class="col-sm-2 col-form-
label">Informations complémentaires</label>
<div class="col-sm-10">
<textarea id="description" v-model="form.description"
class="form-control" rows="4"></textarea>
</div>
</div>
</div>
</div>

<!-- Bouton de soumission -->


<div class="row">
<div class="col-sm-12 text-right">
<button @click.prevent="submitForm" type="button" class="btn btn-
success btn-anim mr-15">
<i class="icon-rocket"></i><span class="btn-text">Valider</span>
</button>
<div class="pull-right" style="margin-left: 0px !important">
<button type="button" class="btn btn-default"
onclick="window.open('http://localhost:8080/poste-applicatif',
'_blank');">
<span class="btn-
text">{{ $t('general_translation._annuler_') }}</span>
</button>
</div>
</div>
</div>

</div>
</form>
</div>
</div>
</div>
</template>

Vous aimerez peut-être aussi