Merge branch 'dev' of https://repositorio.acatlan.unam.mx/CIDWA/servicio_social_front into marco
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column column is-10 is-offset-1">
|
||||
<section class="mensaje is-size-5-desktop is-size-5-widescreen is-size-5-fullhd">
|
||||
<section class="mensaje has-text-justified is-size-6-desktop is-size-6-widescreen is-size-5-fullhd">
|
||||
<p class="block">Estimado(a) responsable de programa de servicio social:</p>
|
||||
<p class="block">
|
||||
Te solicitamos llenar cuidadosamente los campos solicitados a continuación
|
||||
@@ -25,17 +25,15 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 class="title is-1 my-6">
|
||||
<h1 class="title is-1 mt-6">
|
||||
Añadir Servicio Social
|
||||
</h1>
|
||||
|
||||
<form>
|
||||
<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
|
||||
<div class="column is-full-mobile is-three-quarters-tablet is-two-thirds-desktop is-two-thirds-widescreen is-half-fullhd">
|
||||
|
||||
<b-field class="columns">
|
||||
<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd pl-0">
|
||||
<div class="column is-full-mobile is-three-quarters-tablet is-two-thirds-desktop is-two-thirds-widescreen is-half-fullhd pl-0">
|
||||
<form>
|
||||
<b-field class="column p-0 my-6 is-full">
|
||||
<input
|
||||
class="input column is-two-thirds"
|
||||
class="input column "
|
||||
v-model="noCuenta"
|
||||
message="Solo numeros"
|
||||
required="required"
|
||||
@@ -44,76 +42,61 @@
|
||||
min="0"></input>
|
||||
|
||||
<p class="control">
|
||||
<b-button class="button is-info" @click="buscar(alumno.cuenta)">Buscar</b-button>
|
||||
<b-button class="button is-info" @click=" simple()">Buscar</b-button>
|
||||
</p>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Nombre" >
|
||||
<b-input :value="alumno.nombre" disabled></b-input>
|
||||
<b-field label="Nombre">
|
||||
<div class="input">{{ alumno.nombre }}</div>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Carrera" >
|
||||
<b-input :value="alumno.carrera" disabled></b-input>
|
||||
<b-field label="Carrera">
|
||||
<div class="input">{{ alumno.carrera }}</div>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Creditos" >
|
||||
<b-input :value="alumno.creditos" disabled></b-input>
|
||||
<b-field label="Creditos">
|
||||
<div class="input">{{ alumno.creditos }}</div>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Seleccione programa">
|
||||
<b-select placeholder="dependencias" expanded v-model="programaSelected.id" @change="programaSe()">
|
||||
<option
|
||||
<b-select placeholder="programa" expanded v-model="programaSelectedID">
|
||||
<option
|
||||
v-for="programa in programas"
|
||||
v-bind:key="programa.id"
|
||||
:value="programa.id"
|
||||
@click="programaSe()"
|
||||
>{{ programa.nombre }}</option>
|
||||
|
||||
</b-select>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Institucion">
|
||||
<b-input :value="programaSelected.institucion" disabled></b-input>
|
||||
<div class="input">{{ programaSelected.institucion }}</div>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Dependencia" >
|
||||
<b-input :value="programaSelected.dependencia" disabled></b-input>
|
||||
<b-field label="Dendencia">
|
||||
<div class="input">{{ programaSelected.dependencia }}</div>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Clave del programa" >
|
||||
<b-input :value="programaSelected.clave" disabled></b-input>
|
||||
<b-field label="Clave del programa">
|
||||
<div class="input">{{ programaSelected.clave }}</div>
|
||||
</b-field>
|
||||
|
||||
<b-field label="fecha de inicio">
|
||||
<b-datepicker
|
||||
ref="datepicker1"
|
||||
expanded
|
||||
placeholder="Select a date"
|
||||
:mobile-native="false"
|
||||
:min-date="minDate"
|
||||
v-model="dataSend.inicio">
|
||||
</b-datepicker>
|
||||
<b-button
|
||||
@click="$refs.datepicker1.toggle()"
|
||||
icon-left="calendar-today"
|
||||
type="is-info"
|
||||
/>
|
||||
<b-field label="Fecha de inicio">
|
||||
<b-datepicker
|
||||
placeholder="Inicio"
|
||||
icon="calendar-today"
|
||||
v-model="dataSend.inicio[0]"
|
||||
:min-date="minDate1">
|
||||
</b-datepicker>
|
||||
</b-field>
|
||||
|
||||
<b-field label="fecha de fin">
|
||||
<b-datepicker
|
||||
ref="datepicker2"
|
||||
expanded
|
||||
placeholder="Select a date"
|
||||
:mobile-native="false"
|
||||
:min-date="new Date(dataSend.inicio.getTime() + seisMeses)"
|
||||
v-model="dataSend.fin">
|
||||
</b-datepicker>
|
||||
<b-button
|
||||
@click="$refs.datepicker2.toggle()"
|
||||
icon-left="calendar-today"
|
||||
type="is-info"
|
||||
/>
|
||||
<b-field label="Fecha de fin" v-if="dataSend.inicio">
|
||||
<b-datepicker
|
||||
placeholder="Fin"
|
||||
v-model="dataSend.fin[0]"
|
||||
:min-date="minDate2"
|
||||
icon="calendar-today">
|
||||
</b-datepicker>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Correo">
|
||||
@@ -122,80 +105,32 @@
|
||||
|
||||
<h3 class="title is-4 mt-6">Carta de aceptación (en formato .PDF. No se aceptan fotos).</h3>
|
||||
|
||||
<!-- <b-field class=" file is-link" :class="{'has-name': !!file}">
|
||||
<b-upload v-model="dataSend.file" class="file-label">
|
||||
<span class="file-cta ">
|
||||
<b-icon class="file-icon" icon="upload"></b-icon>
|
||||
<span class="file-label">Click to upload</span>
|
||||
</span>
|
||||
<span class="file-name" v-if="file">
|
||||
{{ file.name }}
|
||||
</span>
|
||||
<b-field>
|
||||
<b-upload v-model="dataSend.file" drag-drop expanded>
|
||||
<section class="section">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<b-icon icon="upload" size="is-large"></b-icon>
|
||||
</p>
|
||||
<p>{{ dataSend.file.name || "Arrastra aquí tu archivo o da click para buscar"}}</p>
|
||||
</div>
|
||||
</section>
|
||||
</b-upload>
|
||||
</b-field> -->
|
||||
|
||||
<!-- <b-field class="file is-primary" :class="{'has-name': !!file}">
|
||||
<b-upload v-model="file" class="file-label">
|
||||
<span class="file-cta">
|
||||
<b-icon class="file-icon" icon="upload"></b-icon>
|
||||
<span class="file-label">Click to upload</span>
|
||||
</span>
|
||||
<span class="file-name" v-if="file">
|
||||
{{ file.name }}
|
||||
</span>
|
||||
</b-upload>
|
||||
</b-field >-->
|
||||
|
||||
<section class="container is-full">
|
||||
<b-field>
|
||||
<b-upload v-model="dropFiles"
|
||||
multiple
|
||||
drag-drop>
|
||||
<section class="section">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<b-icon
|
||||
icon="upload"
|
||||
size="is-large">
|
||||
</b-icon>
|
||||
</p>
|
||||
<p>Drop your files here or click to upload</p>
|
||||
</div>
|
||||
</section>
|
||||
</b-upload>
|
||||
</b-field>
|
||||
|
||||
<div class="tags is-fullwidth">
|
||||
<span v-for="(file, index) in dropFiles"
|
||||
:key="index"
|
||||
class="tag is-primary is-fullwidth" >
|
||||
{{file.name}}
|
||||
<button class="delete is-small is-fullwidth"
|
||||
type="button"
|
||||
@click="deleteDropFile(index)">
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<b-field class="derecha">
|
||||
<button class="button is-success is-medium" @click="open" style="float: right; margin:2rem 0;">
|
||||
Enviar
|
||||
</button>
|
||||
</b-field>
|
||||
|
||||
</form>
|
||||
<b-field class="derecha">
|
||||
<button :disabled='dataSend.file == "" || noCuenta == "" || dataSend.correo == "" || dataSend.inicio == "" || dataSend.fin == "" ' class="button is-success is-medium" @click="open" style="float: right; margin:2rem 0;">
|
||||
Enviar
|
||||
</button>
|
||||
</b-field>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<!-- <div>
|
||||
<b-field>
|
||||
<button class="button is-primary is-medium" @click="open">
|
||||
Enviar
|
||||
</button>
|
||||
</b-field>
|
||||
</div> -->
|
||||
|
||||
</section>
|
||||
|
||||
<!-- <pre>
|
||||
<!-- <pre>
|
||||
{{$data}}
|
||||
</pre> -->
|
||||
</div>
|
||||
@@ -215,12 +150,14 @@ export default {
|
||||
dropFiles: [],
|
||||
minDate: new Date('January 01, 2020 03:24:00'), // "2020-01-01T06:00:00.000Z",
|
||||
seisMeses: 1000 * 60 * 60 * 24 * 7 * 4 * 6,
|
||||
minDate1: new Date('2020-01-01'),
|
||||
programaSelectedID: '',
|
||||
programaSelected: {
|
||||
id: '',
|
||||
nombre: 'acatlan',
|
||||
institucion: 'acatlan',
|
||||
dependencia: 'atlan',
|
||||
clave: '215'
|
||||
|
||||
nombre: '',
|
||||
institucion: '',
|
||||
dependencia: '',
|
||||
clave: ''
|
||||
},
|
||||
isLoading: false,
|
||||
isFullPage: true,
|
||||
@@ -254,9 +191,9 @@ export default {
|
||||
}
|
||||
],
|
||||
dataSend: {
|
||||
file: '',
|
||||
inicio: new Date(),
|
||||
fin: new Date(),
|
||||
file: [],
|
||||
inicio: [],
|
||||
fin: [],
|
||||
correo: ''
|
||||
}
|
||||
|
||||
@@ -264,11 +201,14 @@ export default {
|
||||
},
|
||||
methods:
|
||||
{
|
||||
openLoading () {
|
||||
/* openLoading () {
|
||||
this.isLoading = true
|
||||
setTimeout(() => {
|
||||
this.isLoading = false
|
||||
}, 10 * 1000)
|
||||
}, */
|
||||
simple () {
|
||||
this.$buefy.notification.open('Something happened')
|
||||
},
|
||||
open () {
|
||||
const loadingComponent = this.$buefy.loading.open({
|
||||
@@ -279,42 +219,6 @@ export default {
|
||||
deleteDropFile (index) {
|
||||
this.dropFiles.splice(index, 1)
|
||||
},
|
||||
ClavePrograma () {
|
||||
if (this.programa) {
|
||||
for (let i = 0; i < this.programas.length; i++) {
|
||||
if (this.programas[i].id === this.programaSelected) { return this.programas[i].clave }
|
||||
}
|
||||
}
|
||||
},
|
||||
Dependencia () {
|
||||
if (this.programa) {
|
||||
for (let i = 0; i < this.programas.length; i++) {
|
||||
console.log(this.programaSelected + ' ' + this.programas[i].id)
|
||||
if (this.programas[i].id === this.programaSelected) { return alert(this.programas[i].dependencia) }
|
||||
}
|
||||
}
|
||||
},
|
||||
Institucion () {
|
||||
if (this.programa) {
|
||||
for (let i = 0; i < this.programas.length; i++) {
|
||||
if (this.programas[i].id === this.programaSelected) { return this.programas[i].institucion }
|
||||
}
|
||||
}
|
||||
},
|
||||
ProgramaSe () {
|
||||
console.log('cambiar variables')
|
||||
if (this.programaSelected.id) {
|
||||
for (let i = 0; i < this.programas.length; i++) {
|
||||
if (this.programas[i].id === this.programaSelected.id) {
|
||||
this.programaSelected.nombre == this.programas[i].nombre
|
||||
this.programaSelected.institucion == this.programas[i].institucion
|
||||
this.programaSelected.dependencia == this.programas[i].dependencia
|
||||
this.programaSelected.clave == this.programas[i].clave
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
},
|
||||
esNumero (numero) {
|
||||
const ultimaLetra = numero.length - 1
|
||||
|
||||
@@ -332,14 +236,27 @@ export default {
|
||||
this.noCuenta = Number(this.noCuenta) < 0 ? '' : this.noCuenta
|
||||
this.noCuenta = this.esNumero(this.noCuenta)
|
||||
this.noCuenta = this.maxLength(this.noCuenta, 9)
|
||||
},
|
||||
programaSelectedID () {
|
||||
if (this.programaSelectedID) {
|
||||
for (let i = 0; i < this.programas.length; i++) {
|
||||
if (this.programas[i].id === this.programaSelectedID) {
|
||||
this.programaSelected.nombre = this.programas[i].nombre
|
||||
this.programaSelected.institucion = this.programas[i].institucion
|
||||
this.programaSelected.dependencia = this.programas[i].dependencia
|
||||
this.programaSelected.clave = this.programas[i].clave
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
minDate2 () {
|
||||
const min = new Date(this.dataSend.inicio)
|
||||
return new Date(min.getFullYear(), min.getMonth() + 6, min.getDate())
|
||||
}
|
||||
}
|
||||
/* created () {
|
||||
this.dataSend.inicio = null
|
||||
this.dataSend.fin = null
|
||||
|
||||
} */
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -354,5 +271,12 @@ export default {
|
||||
.file-cta{
|
||||
background-color: #167df0 !important;
|
||||
}
|
||||
.disabled {
|
||||
cursor: help !important;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
.columns{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user