77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<template>
|
|
<div class="header">
|
|
<h1 class="card-title">
|
|
Список заявок
|
|
</h1>
|
|
|
|
<button
|
|
class="btn primary"
|
|
@click="openModal"
|
|
>
|
|
Создать
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
v-if="loading"
|
|
style="display: flex;"
|
|
>
|
|
<app-spinner />
|
|
</div>
|
|
<div v-else>
|
|
<request-filter v-model="filters" />
|
|
<request-table
|
|
:requests="requests"
|
|
/>
|
|
</div>
|
|
|
|
<teleport to="body">
|
|
<app-modal
|
|
v-if="modal"
|
|
title="Создать заявку"
|
|
@close="closeModal"
|
|
>
|
|
<request-form @created="closeModal" />
|
|
</app-modal>
|
|
</teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import RequestFilter from '@/components/request/RequestFilter.vue';
|
|
import RequestForm from '@/components/request/RequestForm.vue';
|
|
import RequestTable from '@/components/request/RequestTable.vue';
|
|
import AppModal from '@/components/ui/AppModal.vue';
|
|
import AppSpinner from '@/components/ui/AppSpinner.vue';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
|
|
const modal = ref(false);
|
|
const store = useStore();
|
|
const closeModal = () => modal.value = false;
|
|
const openModal = () => modal.value = true;
|
|
|
|
const loading = ref(false);
|
|
const filters = ref({});
|
|
|
|
onMounted(async () => {
|
|
loading.value = true;
|
|
await store.dispatch('request/loadRequests');
|
|
loading.value = false
|
|
})
|
|
|
|
const requests = computed(() => {
|
|
return store.state.request.requests
|
|
.filter(item => filters.value.status ? item.status === filters.value.status : true)
|
|
.filter(item => filters.value.name ? item.fio.includes(filters.value.name) : true);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|