fix: front logic
This commit is contained in:
parent
4f4fdb4917
commit
0eab40fb5c
113
front/src/components/examCreate.vue
Normal file
113
front/src/components/examCreate.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div v-if="show" class="modal-shadow" @click.self="closeModal">
|
||||
<div class="container">
|
||||
<form >
|
||||
<div class="mb-3">
|
||||
<label
|
||||
htmlFor="num"
|
||||
class="form-label">Название
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="num"
|
||||
name="num"
|
||||
v-model="title"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button
|
||||
@click="create"
|
||||
type="button"
|
||||
class="btn btn-primary btn-block">Добавить
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExamSevice from '@/services/ExamSevice';
|
||||
export default {
|
||||
name: "ModalWindow",
|
||||
data: function () {
|
||||
return {
|
||||
show: false,
|
||||
id:'',
|
||||
title:'',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.show = false
|
||||
this.title =''
|
||||
|
||||
},
|
||||
create(){
|
||||
let data = {
|
||||
id:null,
|
||||
title:this.title,
|
||||
}
|
||||
console.log(data)
|
||||
ExamSevice.create(data).then(res => {
|
||||
console.log(res.data)
|
||||
window.location.reload()
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped >
|
||||
.modal-shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
padding: 50px ;
|
||||
background: rgba(0, 0, 0, 0.39);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
min-width: 100px;
|
||||
height: fit-content;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 1%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
|
||||
|
||||
}
|
||||
.modal-close {
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: #2a4cc7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #0971c7;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
</style>
|
||||
114
front/src/components/examUpd.vue
Normal file
114
front/src/components/examUpd.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div v-if="show" class="modal-shadow" @click.self="closeModal">
|
||||
<div class="container">
|
||||
<form >
|
||||
<div class="mb-3">
|
||||
<label
|
||||
htmlFor="num"
|
||||
class="form-label">Название
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="num"
|
||||
name="num"
|
||||
v-model="title"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button
|
||||
@click="create"
|
||||
type="button"
|
||||
class="btn btn-primary btn-block">Обновить
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExamSevice from '@/services/ExamSevice';
|
||||
export default {
|
||||
name: "ModalWindow",
|
||||
data: function () {
|
||||
return {
|
||||
show: false,
|
||||
id:'',
|
||||
title:'',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.show = false
|
||||
this.title =''
|
||||
|
||||
},
|
||||
create(){
|
||||
let data = {
|
||||
id:this.id,
|
||||
title:this.title,
|
||||
}
|
||||
console.log(data)
|
||||
ExamSevice.update(data).then(res => {
|
||||
console.log(res.data)
|
||||
window.location.reload()
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped >
|
||||
.modal-shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
padding: 50px ;
|
||||
background: rgba(0, 0, 0, 0.39);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
min-width: 100px;
|
||||
height: fit-content;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 1%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
|
||||
|
||||
}
|
||||
.modal-close {
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: #2a4cc7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #0971c7;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
</style>
|
||||
104
front/src/components/exams.vue
Normal file
104
front/src/components/exams.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<AdminHeader />
|
||||
<div>
|
||||
<div class="container m-3">
|
||||
|
||||
<div class="rounded-card row">
|
||||
<H1>Экзамены</H1>
|
||||
<div style="min-width:max-content;" class="m-2">
|
||||
<div class="row">
|
||||
<button class="btn-success border border-transparent rounded shadow-sm " @click="showCreate">Добавить</button>
|
||||
</div>
|
||||
<table class="table table-hover table-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Номер</td>
|
||||
<td>Название</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr v-for="(row, index) in exams" :key="index" style="min-width:max-content;" >
|
||||
<td @click="showUpd(row.id,row.title)">{{ index+1 }}</td>
|
||||
<td @click="showUpd(row.id,row.title)">{{ row.title }}</td>
|
||||
<td><button class="btn btn-outline-danger" @click="deleteAch(row.id)">Удалить</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<examCreate ref="modalCreate"></examCreate>
|
||||
<examUpd ref="modalUpdate"></examUpd>
|
||||
|
||||
</template>
|
||||
|
||||
<script scoped>
|
||||
import ExamSevice from '@/services/ExamSevice';
|
||||
import AdminHeader from '@/elemets/adminHeader.vue';
|
||||
import examUpd from './examUpd.vue';
|
||||
import examCreate from './examCreate.vue';
|
||||
export default{
|
||||
name:"benefits",
|
||||
data(){
|
||||
return{
|
||||
exams: [],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AdminHeader,
|
||||
examCreate,
|
||||
examUpd
|
||||
},
|
||||
beforeCreate(){
|
||||
ExamSevice.getAll().then(response =>{
|
||||
this.exams = response.data
|
||||
})
|
||||
|
||||
},
|
||||
methods:{
|
||||
showUpd(id,title) {
|
||||
this.$refs.modalUpdate.show = true;
|
||||
this.$refs.modalUpdate.id = id
|
||||
this.$refs.modalUpdate.title = title
|
||||
|
||||
},
|
||||
showCreate() {
|
||||
this.$refs.modalCreate.show = true;
|
||||
|
||||
},
|
||||
deleteAch(id){
|
||||
ExamSevice.delete(id).then(response =>{
|
||||
console.log(response.data)
|
||||
ExamSevice.getAll().then(response =>{
|
||||
this.exams = response.data
|
||||
})
|
||||
}).catch(e => {
|
||||
console.log(e.data)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container
|
||||
{
|
||||
position:absolute ;
|
||||
min-width:calc(205vh);
|
||||
background-color: #6ec0d9e9 ;
|
||||
border: 5px solid #3f8ba2;
|
||||
padding:12px;
|
||||
align-items: center;
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
.rounded-card{
|
||||
border: 5px solid #3f8ba2;
|
||||
padding:6px;
|
||||
margin:6px;
|
||||
border-radius:8px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user