print('Нужное объявление!')
<template>
<transition name="fade">
<div class="fixed top-0 left-0 w-full h-full z-10 flex justify-center items-center transition duration-300 ease-out"
v-if="SHOW_UPDATE_MODAL"
>
<div
class="fixed top-0 left-0 w-full h-full bg-bgOverLey"
@click="SET_HIDE_UPDATE_MODAL"
>
</div>
<div class="z-20 px-3 py-14 w-1/3 bg-white shadow-shadowForm relative rounded-lg model-content">
<button
class="absolute top-1 right-1 focus:outline-0"
@click="SET_HIDE_UPDATE_MODAL"
>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
class="bi bi-x fill-grey hover:fill-closeColor transition duration-1000 ease-out"
viewBox="0 0 16 16">
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<form class="modal-form" @submit.prevent="updateEmployee(employee)">
<div class="py-2">
<input
type="text"
placeholder="Фамилия"
class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="lastname"
>
<input
type="text"
placeholder="Имя"
class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="firstname"
>
<input
type="number"
placeholder="Внутрнний"
class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="number"
>
</div>
<button
class="focus:outline-0 bg-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out"
>Изменить</button>
</form>
</div>
</div>
</transition>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
name: 'EmployeeModalUpdate',
methods: {
...mapMutations(['SET_HIDE_UPDATE_MODAL', 'SET_ID', 'SET_LASTNAME', 'SET_FIRSTNAME', 'SET_NUMBER', 'SET_EMPLOYEES']),
...mapActions(['updateEmployee']),
// Редактировать
},
computed: {
...mapGetters(['SHOW_UPDATE_MODAL']),
employee() {
return this.$store.state.employee
},
id: {
get() {
return this.$store.getters.GET_ID
},
set(employee) {
return this.SET_ID(employee)
}
},
lastname: {
get() {
return this.$store.getters.GET_LASTNAME
},
set(employee) {
return this.SET_LASTNAME(employee)
}
},
firstname: {
get() {
return this.$store.getters.GET_FIRSTNAME
},
set(employee) {
return this.SET_FIRSTNAME(employee)
}
},
number: {
get() {
return this.$store.getters.GET_NUMBER
},
set(employee) {
return this.SET_NUMBER(employee)
}
},
},
}
</script>
<style lang="sass">
.fade-enter-active
opacity: 0
.fade-leave-active
opacity: 0
</style><button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg>
</button>
<button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</button>data: () => ({
employees: [
{
...,
actions: [
{
edit:
`
<button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg>
</button>
`,
delete:
`
<button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</button>
`
}
]
},
...
],
...@include('html/_header.html')<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.min.css">
<title>START-TEMPLATE</title>
</head>
<body>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 class="title">Шапка сайта</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 class="title">Футер сайта</h1>
</body>
</html>
<script src="js/main.js"></script>
</body>
</html>