DanielRamirezGe
527 lines
16 KiB
Vue
527 lines
16 KiB
Vue
<template>
|
|
|
|
<div class="container formulario">
|
|
<!-- <p>{{campos_de_conocimiento_seleccionado}}</p>
|
|
<p>{{campos_de_conocimiento}}</p>
|
|
<p>{{lineas_de_investigacion_seleccionado}}</p>
|
|
<p>{{lineas_de_investigacion}}</p> -->
|
|
<!-- <p>{{p}}</p>
|
|
<p>{{inputs}}</p> -->
|
|
<h1>Datos del proyecto</h1>
|
|
<!-- {{linea_seleccionada}}
|
|
{{linea_base}} -->
|
|
<!-- <p> {{id_usuario}} pp {{responsable}} pp {{rfc}} </p> -->
|
|
<div class="row">
|
|
<div class="col inputs_nombre">
|
|
|
|
<input type="text" class="cuadro" placeholder="Nombre del Proyecto" v-model="nombre_proyecto" v-if="!error" :maxlength="295">
|
|
|
|
<input type="text" class="cuadro rojo" id="Nombre rojo" placeholder="Nombre del Proyecto" v-model="nombre_proyecto" v-else :maxlength="295">
|
|
|
|
<input type="text" class="cuadro" placeholder="Disciplina" v-model="disciplina" :maxlength="245">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row separacion" >
|
|
<div class="col-md-6">
|
|
|
|
<table class="table" >
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>
|
|
Campos de Conocimiento
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tr v-for="item in campos_de_conocimiento" v-bind:key="item.id" >
|
|
<td class="renglon select_verde " v-text="item.nombre" @click="seleccionar_campo(item.id_campo)" v-if="verificar_selec(item.id_campo)"></td>
|
|
<td class="renglon" v-text="item.nombre" @click="seleccionar_campo(item.id_campo)" v-else></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<div class="table-wrapper-scroll-y my-custom-scrollbar">
|
|
|
|
<table class="table table-bordered table-striped mb-0 ">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>
|
|
Lineas de Investigación
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tr v-for="item in linea" v-bind:key="item.id" >
|
|
<td class="renglon select_verde" v-if="linea_seleccionada==item.nom" v-text="item.nom" @click="select_linea(item.nom)" ></td>
|
|
<td class="renglon" v-else v-text="item.nom" @click="select_linea(item.nom)" ></td>
|
|
|
|
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<input v-if="aparece==true" v-model="linea_base" type="text" class="form-control marco " placeholder="Nombre de la otra disciplina" :maxlength="140">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row separacion">
|
|
<div class="col">
|
|
<textarea class="form-control" rows="5" id="comment" name="text" placeholder="Objetivo General" v-model="objetivo_general" :maxlength="795"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col ">
|
|
<div class="form-group" v-for="(inp,k) in inputs" :key="k">
|
|
<input type="text" class="form-control" placeholder="Objetivo Particular" v-model="inp.name" :maxlength="895">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<button class="button_agregar rojo" @click="remove()" v-show=" inputs.length > 3">-</button>
|
|
</div>
|
|
<div class="col-6">
|
|
<button class="button_agregar verde" @click="add()" >+</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="entrar">
|
|
<button class="button " v-if="listo()" @click="llamar()"> Siguiente </button>
|
|
<p class="botton_falso" v-else>Siguiente</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<button class="button_salir " @click="salir()" >Salir</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
import axios from 'axios';
|
|
import config from '../config/config.js'
|
|
import swal from 'sweetalert';
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
id_usuario: window.localStorage.getItem('id_usuario'),
|
|
responsable: window.localStorage.getItem('responsable'),
|
|
rfc:window.localStorage.getItem('rfc'),
|
|
campos_de_conocimiento:[],
|
|
campos_de_conocimiento_seleccionado:[],
|
|
lineas_de_investigacion: [],
|
|
linea:[{nom:"Autocultura e intercultura de las literaturas mexicanas y española"},{nom: "Didáctica dla literatura"},{nom: "Didáctica de la liteatura"},{nom: "Didáctica de la literaa"},{nom: "Didáctica de la literatu"},{nom: "Didáctica de la literatur"},{nom: "Otra"}],
|
|
lineas_de_investigacion_seleccionado: [],
|
|
objetivos_particulares:[],
|
|
p: '',
|
|
name : '',
|
|
inputs:([{name: ''},{name: ''},{name: ''}]),
|
|
counter:3,
|
|
nombre_proyecto:'',
|
|
disciplina: '',
|
|
objetivo_general:'',
|
|
resp: null,
|
|
error: false,
|
|
linea_seleccionada: null,
|
|
linea_base: null,
|
|
aparece: false
|
|
}
|
|
},
|
|
methods:{
|
|
select_linea(nom){
|
|
if(this.linea_seleccionada==nom)
|
|
this.linea_seleccionada=null;
|
|
else
|
|
{
|
|
this.linea_seleccionada=nom;
|
|
if(nom=="Otra")
|
|
this.aparece=true;
|
|
else
|
|
{
|
|
this.linea_base=null
|
|
this.aparece=false;
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
|
|
async llamar(){
|
|
|
|
await this.registrar();
|
|
if(this.error==true)
|
|
{
|
|
swal("El Nombre del proyecto ya existe","" ,"error");
|
|
}
|
|
else{
|
|
this.$router.push('/registro_3');
|
|
}
|
|
},
|
|
|
|
async registrar(){
|
|
if(this.linea_base!=null)
|
|
this.linea_seleccionada=this.linea_base;
|
|
this.objetivos_particulares=[];
|
|
await this.inputs.forEach(element=>{
|
|
this.objetivos_particulares.push(element.name);
|
|
})
|
|
const data={
|
|
nombre_proyecto: this.nombre_proyecto,
|
|
rfc: this.rfc,
|
|
nombre_responsable: this.responsable,
|
|
disciplina: this.disciplina,
|
|
objetivo_general: this.objetivo_general,
|
|
linea_investigacion: this.linea_seleccionada,
|
|
campo_conocimiento: this.campos_de_conocimiento_seleccionado,
|
|
objetivo_particular: this.objetivos_particulares,
|
|
id_usuario: this.id_usuario
|
|
}
|
|
await axios.post(`${config.api}/datos_proyecto_1`,data).then(respose=>{
|
|
|
|
this.resp=respose;
|
|
if(respose.data.error==false)
|
|
{
|
|
//swal(`${respose.data.id}`,"" ,"error");
|
|
window.localStorage.setItem('id_proyecto', respose.data.id);
|
|
this.error=false;
|
|
|
|
}
|
|
else{
|
|
this.error=true;
|
|
|
|
}
|
|
}).catch((err)=>{
|
|
this.resp=err;
|
|
this.error=true;
|
|
|
|
})
|
|
},
|
|
salir(){
|
|
|
|
swal({
|
|
title: "¿Seguro que quieres salir?",
|
|
text: "Al salir no se guardara ningun dato del proyecto y se regresara al menu",
|
|
icon: "warning",
|
|
buttons: true,
|
|
dangerMode: true,
|
|
})
|
|
.then(async (willDelete) => {
|
|
if (willDelete) {
|
|
let id_usuario= window.localStorage.getItem('id_usuario')
|
|
await localStorage.clear();
|
|
await window.localStorage.setItem('id_usuario', id_usuario);
|
|
|
|
await swal("Se ha eliminado los datos del proyecto que se estaba registrando", "", "success");
|
|
this.$router.push('/menu');
|
|
|
|
}
|
|
});
|
|
},
|
|
listo()
|
|
{
|
|
if(this.linea_seleccionada==null && this.linea_base==null)
|
|
{
|
|
|
|
return false;
|
|
}
|
|
if(this.campos_de_conocimiento_seleccionado.length==0)
|
|
{
|
|
this.p="campos";
|
|
return false;
|
|
}
|
|
if(this.nombre_proyecto=='')
|
|
{
|
|
this.p="nolmbre";
|
|
return false;
|
|
}
|
|
if(this.disciplina=='')
|
|
{
|
|
this.p="disciplina";
|
|
return false;
|
|
}
|
|
if(this.objetivo_general=='')
|
|
{
|
|
this.p="general";
|
|
return false;
|
|
}
|
|
if(this.inputs[0].name=='' || this.inputs[1].name=='' || this.inputs[2].name=='' )
|
|
{
|
|
this.p=this.inputs[0].name+" "+this.inputs[1].name+" "+this.inputs[2].name;
|
|
return false;
|
|
}
|
|
return true;
|
|
|
|
}
|
|
,
|
|
verificar_selec(id_campo){
|
|
let ban=0;
|
|
this.campos_de_conocimiento_seleccionado.forEach(element=>{
|
|
if(element==id_campo)
|
|
ban=1;
|
|
});
|
|
if(ban==1)
|
|
return true;
|
|
else
|
|
return false;
|
|
|
|
}
|
|
,
|
|
seleccionar_campo(id_campo)
|
|
{
|
|
let ban=0;
|
|
let con=0;
|
|
|
|
this.campos_de_conocimiento_seleccionado.forEach(element=>{
|
|
if(element==id_campo)
|
|
ban=1;
|
|
|
|
if(ban==0)
|
|
con++;
|
|
});
|
|
if(ban==0)
|
|
{
|
|
this.campos_de_conocimiento_seleccionado.push(id_campo);
|
|
}
|
|
else{
|
|
this.campos_de_conocimiento_seleccionado.splice(con,1);
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
traer_campos_de_conocimiento()
|
|
{
|
|
axios.post(`${config.api}/traer_campos`).then(response=>{
|
|
this.p=response;
|
|
this.campos_de_conocimiento=response.data.campos;
|
|
})
|
|
},
|
|
|
|
add() {
|
|
this.inputs.push({ name: '' });
|
|
},
|
|
remove() {
|
|
this.inputs.splice( this.inputs.length-1,1);
|
|
}
|
|
|
|
},
|
|
created()
|
|
{
|
|
this.traer_campos_de_conocimiento();
|
|
|
|
window.localStorage.setItem('registro_2', true);
|
|
|
|
},
|
|
beforeCreate () {
|
|
if(window.localStorage.getItem('registro_3'))
|
|
this.$router.push('/registro_3');
|
|
|
|
if(!window.localStorage.getItem('id_usuario'))
|
|
this.$router.push('/');
|
|
if(!window.localStorage.getItem('responsable'))
|
|
this.$router.push('/menu');
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.marco{
|
|
border-color: black;
|
|
}
|
|
.my-custom-scrollbar {
|
|
position: relative;
|
|
height: 19rem;
|
|
overflow: auto;
|
|
}
|
|
.table-wrapper-scroll-y {
|
|
display: block;
|
|
}
|
|
|
|
.boton_aceptar{
|
|
background-color: rgb(31, 182, 31);
|
|
color: white;
|
|
border-radius: .5rem;
|
|
}
|
|
.separacion{
|
|
margin-bottom: 3rem;
|
|
}
|
|
.select_verde{
|
|
background-color: rgb(31, 182, 31);
|
|
color: white;
|
|
}
|
|
.button_agregar {
|
|
background-color: #1B3D70; /* Green */
|
|
border: none;
|
|
color: white;
|
|
height: 3rem;
|
|
width: 4rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-size: 1.5rem;
|
|
border-radius: .5rem;
|
|
-webkit-transition-duration: 0.4s; /* Safari */
|
|
transition-duration: 0.4s;
|
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
|
|
margin-bottom: 3rem;
|
|
margin-top:1rem;
|
|
}
|
|
.verde:hover{
|
|
background-color: rgb(35, 143, 35);
|
|
color: white;
|
|
}
|
|
|
|
.rojo{
|
|
background-color: rgba(173, 17, 17, 0.89);
|
|
color: white;
|
|
border-radius: .5rem;
|
|
border-bottom: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.button_salir {
|
|
background-color: #1B3D70; /* Green */
|
|
border: none;
|
|
color: white;
|
|
height: 4.5rem;
|
|
width: 15rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 1.5rem;
|
|
border-radius: 1rem;
|
|
-webkit-transition-duration: 0.4s; /* Safari */
|
|
transition-duration: 0.4s;
|
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.button_salir:hover {
|
|
background-color: rgb(170, 4, 4);
|
|
color: white;
|
|
}
|
|
|
|
.button {
|
|
background-color: #1B3D70; /* Green */
|
|
border: none;
|
|
color: white;
|
|
height: 4.5rem;
|
|
width: 15rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 1.5rem;
|
|
border-radius: 1rem;
|
|
-webkit-transition-duration: 0.4s; /* Safari */
|
|
transition-duration: 0.4s;
|
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.botton_falso{
|
|
background-color: #CCC; /* Green */
|
|
border: none;
|
|
color: white;
|
|
height: 4.5rem;
|
|
width: 15rem;
|
|
padding: 1rem 4rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 1.5rem;
|
|
border-radius: 1rem;
|
|
-webkit-transition-duration: 0.4s; /* Safari */
|
|
transition-duration: 0.4s;
|
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #bb8800;
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
.cuadro{
|
|
height: 4rem;
|
|
width: 15rem;
|
|
border-top: white;
|
|
border-right:white;
|
|
border-left: white;
|
|
border-bottom-color:black;
|
|
font-size: 1rem;
|
|
margin-bottom: 2rem;
|
|
|
|
}
|
|
|
|
.formulario{
|
|
margin-top: 5rem;
|
|
margin-bottom: 5rem;
|
|
}
|
|
.renglon:hover{
|
|
background-color: rgb(31, 182, 31);
|
|
color: white;
|
|
}
|
|
|
|
.inputs_nombre{
|
|
margin-top: 4rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
@media screen and (min-width: 768px) {
|
|
|
|
|
|
.registro form div input[type="text"]{
|
|
height: 300rem;
|
|
}
|
|
.cuadro{
|
|
height: 3rem;
|
|
width: 25rem;
|
|
border-top: white;
|
|
border-right:white;
|
|
border-left: white;
|
|
border-bottom-color:black;
|
|
margin-left: 2rem;
|
|
margin-bottom: 3rem;
|
|
|
|
font-size: 1.5rem;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.inputs_nombre{
|
|
margin-top: 4rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
</style> |