我必须创建一个由2个外键构成的主管对象， 这些外键是user_id（因此它具有用户字段）+ program_id（学院中的一个程序）。要做好，我必须使用2个组件。首先将具有用于用户注册的所有用户字段。其次，将有主管程序。父组件将是主管，在该组件中，我要使用用户组件。通过这种方式，我要使用来自用户组件的字段数据并将它们用于主管组件，当我按下创建按钮时，它将发送来自的所有数据（从用户组件创建的user_id，从选择列表添加的supervisor_program）并通过axios发送到我的api路由。
主管表格文件
<template>
<div>
<md-card class="md-layout-item md-size-100 md-small-size-100">
<md-card-header>
<div class="md-title">Inscription d'un superviseur</div>
</md-card-header>
<inscription-view :user="user"></inscription-view>
<md-card-content>
<div class="md-layout md-gutter">
<div class="md-layout-item md-small-size-100">
<md-field :class="getValidationProgramClass('programme')">
<label for="programme">Programme</label>
<md-select v-model="superviseur.programme.id" name="programme" id="programme" :disabled="sending">
<md-option value="" disabled>Choisissez un programme...</md-option>
<md-option v-for="p in programmes" :key="p.id" :value="p.id">
{{ p.nom }}
</md-option>
</md-select>
<span class="md-error" v-if="!$v.superviseur.programme.required">Le champ 'programme' est requis</span>
</md-field>
</div>
</div>
</md-card-content>
<md-card-actions>
<md-button @click="cancel()" class="md-raised md-accent">Annuler</md-button>
<md-button @click.prevent="validaterChamps()" class="md-raised md-primary" :disabled="sending">Créer</md-button>
</md-card-actions>
<md-progress-bar md-mode="indeterminate" v-if="sending" />
</md-card>
</div>
</template>
<script>
import lodash from 'lodash'
import axios from 'axios'
import VueMaterial from 'vue-material'
import { validationMixin } from 'vuelidate'
import { required, minLength, maxLength, between, sameAs } from 'vuelidate/lib/validators'
import inscription from '../utilisateur/Inscription.vue'
export default {
middleware: 'auth',
components:{ VueMaterial, validationMixin, 'inscription-view': inscription },
mixins: [validationMixin],
name: 'SuperviseurFormulaire',
data: () => ({
programmes: {},
user: inscription.data(),
superviseur: {
user: this.user,
programme: {},
},
superviseurSaved: false,
sending: false
}),
validations: {
user: {
nom: {
required,
minLength: minLength(4),
maxLength: maxLength(40)
},
prenom: {
minLength: minLength(4),
maxLength: maxLength(40)
},
courriel: {
required,
minLength: minLength(15),
maxLength: maxLength(40)
},
telephone: {
minLength: minLength(10),
maxLength: maxLength(15)
},
login: {
required,
maxLength: maxLength(20)
},
password: {
required,
minLength: minLength(6) },
password_confirmation: {
required,
sameAsPassword: sameAs('password')
}
},
superviseur: {
programme: {
required
}
}
},
mounted() {
this.chargeProgrammes();
},
methods:{
/**
* Appel ajax pour charger la liste des programmes.
*/
chargeProgrammes() {
axios.get('/api/programmes')
.then(response => {
this.programmes = response.data.programmes;
this.etat = "charge";
})
},
/**
* Permet de retourner vers la page précédante.
*/
cancel () {
this.$router.go(-1)
},
getValidationUserClass (fieldName) {
const field = this.$v.user[fieldName]
if (field) {
return {
'md-invalid': field.$invalid && field.$dirty
}
}
},
getValidationProgramClass (fieldName) {
const field = this.$v.superviseur.programme[fieldName]
if (field) {
return {
'md-invalid': field.$invalid && field.$dirty
}
}
},
validaterChamps () {
this.$v.$touch()
if (!this.$v.$invalid) {
this.creer()
}
},
/**
* Appel ajax pour sauvegarder la ressource.
*/
async creer() {
this.sending = true
this.$children.validaterChamps()
// Fetch the user.
this.user = await this.$store.dispatch('auth/fetchUser')
axios.post('/api/superviseurs/createApi', this.superviseur)
.then(response => {
this.superviseurSaved = true
this.$router.push({name: 'superviseurs'})
})
.catch(e => {
if(e.response.status==422) {
this.erreurs = e.response.data.errors;
} else {
window.alert('Noop')
// this.$swal("Une erreur s'est produite")
}
this.sending = false
});
},
}
}
</script>
<style lang="scss" scoped>
.md-progress-bar {
position: absolute;
top: 0;
right: 0;
left: 0;
}
</style>
用户订阅文件
<template>
<div>
<form class="md-layout">
<md-card class="md-layout-item md-size-100 md-small-size-100">
<md-card-content>
<div class="md-layout md-gutter">
<div class="md-layout-item md-small-size-100">
<md-field :class="getValidationUserClass('nom')">
<label>Nom</label>
<md-input v-model="user.nom" :disabled="sending" placeholder="Votre nom"></md-input>
<span class="md-error" v-if="!$v.user.nom.required">Le champ 'nom' est requis</span>
<span class="md-error" v-else-if="!$v.user.nom.minLength">Nom invalide, trop court</span>
<span class="md-error" v-else-if="!$v.user.nom.maxLength">Nom invalide, trop long</span>
</md-field>
<md-field :class="getValidationUserClass('prenom')">
<label>Prénom</label>
<md-input v-model="user.prenom" :disabled="sending" placeholder="Votre prénom"></md-input>
<span class="md-error" v-if="!$v.user.prenom.minlength">Prénom invalide, trop court</span>
<span class="md-error" v-else-if="!$v.user.prenom.maxlength">Prénom invalide, trop long</span>
</md-field>
<md-field :class="getValidationUserClass('courriel')">
<label>Courriel</label>
<md-input v-model="user.courriel" :disabled="sending" placeholder="Votre courriel"></md-input>
<span class="md-error" v-if="!$v.user.courriel.required">Le champ 'courriel' est requis</span>
<span class="md-error" v-else-if="!$v.user.courriel.minlength">Courriel invalide, trop court</span>
<span class="md-error" v-else-if="!$v.user.courriel.maxlength">Courriel invalide, trop long</span>
</md-field>
<md-field :class="getValidationUserClass('telephone')">
<label>Téléphone</label>
<md-input v-model="user.telephone" :disabled="sending" placeholder="Votre téléphone"></md-input>
<span class="md-error" v-if="!$v.user.telephone.minlength">Téléphone invalide, trop court</span>
<span class="md-error" v-else-if="!$v.user.telephone.maxlength">Téléphone invalide, trop long</span>
</md-field>
<md-field :class="getValidationUserClass('login')">
<label>Login</label>
<md-input v-model="user.login" :disabled="sending" placeholder="Votre identifiant"></md-input>
<span class="md-error" v-if="!$v.user.login.required">Le champ 'login' est requis</span>
<span class="md-error" v-else-if="!$v.user.login.maxlength">Login invalide, trop long</span>
</md-field>
<md-field :class="getValidationUserClass('password')">
<label>Mot de passe</label>
<md-input v-model="user.password" :disabled="sending" placeholder="Votre mot de passe" type="password" name="password"></md-input>
<span class="md-error" v-if="!$v.user.password.required">Le champ 'mot de passe' est requis</span>
<span class="md-error" v-else-if="!$v.user.password.minlength">Mot de passe invalide, trop court</span>
</md-field>
<md-field :class="getValidationUserClass('password_confirmation')">
<label>Confirmez le mot de passe</label>
<md-input v-model="user.password_confirmation" :disabled="sending" placeholder="Votre confirmation de mot de passe" type="password" name="password_confirmation"></md-input>
<span class="md-error" v-if="!$v.user.password_confirmation.required">Le champ 'confirmation de mot de passe' est requis</span>
<span class="md-error" v-else-if="!$v.user.password_confirmation.sameAsPassword">Les mots de passe doivent correspondent</span>
</md-field>
</div>
</div>
</md-card-content>
<!--
<md-card-actions>
<md-button @click="retour()" class="md-raised md-accent">Annuler</md-button>
<md-button @click.prevent="validaterChamps()" class="md-raised md-primary" :disabled="sending">Continuer</md-button>
</md-card-actions>
<md-progress-bar md-mode="indeterminate" v-if="sending" />
-->
</md-card>
</form>
</div>
</template>
<script>
import lodash from 'lodash'
import axios from 'axios'
import Form from 'vform'
import VueMaterial from 'vue-material'
import { validationMixin } from 'vuelidate'
import { required, minLength, maxLength, between, sameAs } from 'vuelidate/lib/validators'
export default {
middleware: 'auth',
components:{ VueMaterial, validationMixin },
name: 'Inscription',
mixins: [validationMixin],
data: () => ({
user: {
nom: '',
prenom: '',
courriel: '',
telephone: '',
login: '',
password: '',
password_confirmation: ''
},
erreurs: {},
sending: false,
}),
validations: {
user: {
nom: {
required,
minLength: minLength(4),
maxLength: maxLength(40)
},
prenom: {
minLength: minLength(4),
maxLength: maxLength(40)
},
courriel: {
required,
minLength: minLength(15),
maxLength: maxLength(40)
},
telephone: {
minLength: minLength(10),
maxLength: maxLength(15)
},
login: {
required,
maxLength: maxLength(20)
},
password: {
required,
minLength: minLength(6) },
password_confirmation: {
required,
sameAsPassword: sameAs('password')
}
}
},
methods: {
validaterChamps () {
this.$v.$touch()
if (!this.$v.$invalid) {
this.register()
}
},
getValidationUserClass (fieldName) {
const field = this.$v.user[fieldName]
if (field) {
return {
'md-invalid': field.$invalid && field.$dirty
}
}
},
register () {
this.sending = true
axios.post('/api/inscription', this.user)
.then(response => {
// Save the token.
this.$store.dispatch('auth/saveToken', { token })
// Update the user.
this.$store.dispatch('auth/updateUser', { user: user })
})
.catch(e => {
if(e.response.status==422) {
this.erreurs = e.response.data.errors;
} else {
window.alert('Noop')
// this.$swal("Une erreur s'est produite")
}
this.sending = false
});
}
}
}
</script>
<style lang="scss" scoped>
.md-progress-bar {
position: absolute;
top: 0;
right: 0;
left: 0;
}
</style>
当我按下执行validerChamps（）的按钮时，它应该尝试检查程序是否有效，如果字段有效，则发送到题词视图，然后将一个emit方法发回给他准备好保存的主管组件然后将user_id发送到主管组件。同样，一旦主管获取到user_id，它将通过axios将包含程序的user_id和主管对象发送到与主管Crud相关的控制器。