delete front
This commit is contained in:
parent
30120ca18d
commit
522cf1d2e8
28
frontend/.gitignore
vendored
28
frontend/.gitignore
vendored
@ -1,28 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -1,29 +0,0 @@
|
||||
# frontend
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1694
frontend/package-lock.json
generated
1694
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,21 +0,0 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.3.6",
|
||||
"bootstrap": "^5.2.3",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
"vite": "^4.1.4"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,19 +0,0 @@
|
||||
<script>
|
||||
import Header from './components/Header.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header></Header>
|
||||
<div class="container-fluid">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -1,135 +0,0 @@
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import CatalogMixins from '../mixins/CatalogMixins.js';
|
||||
import Cabinet from "../models/Cabinet";
|
||||
import Computer from '../models/Computer';
|
||||
import Monitor from '../models/Monitor';
|
||||
import DataService from '../services/DataService';
|
||||
|
||||
export default {
|
||||
mixins: [
|
||||
CatalogMixins
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
getAllUrl: 'cabinet/',
|
||||
dataUrl: 'cabinet',
|
||||
transformer: (data) => new Cabinet(data),
|
||||
headers: [
|
||||
{ name: 'number', label: 'Номер кабинета' }
|
||||
],
|
||||
headersComps: [
|
||||
{ name: 'modelName', label: 'Модель' },
|
||||
{ name: 'serialNum', label: 'Серийный номер' },
|
||||
{ name: 'monitorName', label: 'Модель монитора' }
|
||||
],
|
||||
selectedItemsComps: [],
|
||||
dataFilterUrl: 'cabinet/filter?',
|
||||
computerUrl: 'computer/',
|
||||
computers: [],
|
||||
monitorUrl: 'monitor/',
|
||||
monitors: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
DataService.readAll(this.computerUrl, (data) => new Computer(data))
|
||||
.then(data => {
|
||||
this.computers = data;
|
||||
});
|
||||
DataService.readAll(this.monitorUrl, (data) => new Monitor(data))
|
||||
.then(data => {
|
||||
this.monitors = data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
filter() {
|
||||
let urlParams = ""
|
||||
if (document.getElementById('numberFilterInput').value != "") {
|
||||
urlParams += "number=" + this.number;
|
||||
}
|
||||
DataService.readAll(this.dataFilterUrl + urlParams, (data) => new Cabinet(data))
|
||||
.then(data => {
|
||||
this.items = data;
|
||||
});
|
||||
},
|
||||
clearFilters() {
|
||||
this.loadItems();
|
||||
this.id = null;
|
||||
this.number = null;
|
||||
},
|
||||
addComputerInCabinet(cabinetId) {
|
||||
let computerId = document.getElementById('computers').value;
|
||||
let response = axios.post(`http://localhost:8080/api/cabinet/${cabinetId}/computer?computerId=${computerId}`);
|
||||
console.log(response);
|
||||
},
|
||||
itemsComps(computerIds) {
|
||||
let result = [];
|
||||
if (typeof computerIds === 'undefined') {
|
||||
return;
|
||||
}
|
||||
this.computers.forEach(computer => {
|
||||
for (let i = 0; i < computerIds.length; i++) {
|
||||
if (computer.id === computerIds[i]) {
|
||||
for (let j = 0; j < this.monitors.length; j++) {
|
||||
if (computer.monitorId === this.monitors[j].id) {
|
||||
computer._monitor = this.monitors[j];
|
||||
}
|
||||
}
|
||||
result.push(computer);
|
||||
}
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="numberFilterInput" placeholder="Номер кабинета" required v-model="number">
|
||||
|
||||
<button class="btn btn-primary" type="button" id="report-button"
|
||||
@click.prevent="filter">Сформировать</button>
|
||||
<button class="btn btn-outline-secondary" type="button" id="report-button"
|
||||
@click.prevent="clearFilters">Очистить</button>
|
||||
</div>
|
||||
<ToolBar
|
||||
@add="showAddModal"
|
||||
@edit="showEditModal"
|
||||
@remove="removeSelectedItems">
|
||||
</ToolBar>
|
||||
<DataTable
|
||||
:headers="this.headers"
|
||||
:items="this.items"
|
||||
:selectedItems="this.selectedItems"
|
||||
@dblclick="showEditModalDblClick">
|
||||
</DataTable>
|
||||
<Modal
|
||||
:header="this.modal.header"
|
||||
:confirm="this.modal.confirm"
|
||||
v-model:visible="this.modalShow"
|
||||
@done="saveItem">
|
||||
<div class="mb-3">
|
||||
<label for="number" class="form-label">Номер кабинета</label>
|
||||
<input type="text" class="form-control" id="number" required v-model="data.number">
|
||||
</div>
|
||||
<DataTable
|
||||
:headers="this.headersComps"
|
||||
:items="itemsComps(data.computerIds)"
|
||||
:selectedItems="this.selectedItemsComps">
|
||||
</DataTable>
|
||||
<div class="mb-3">
|
||||
<label for="computers" class="form-label">Добавить компьютер</label>
|
||||
<select class="form-select" id="computers" required>
|
||||
<option disabled value="">Выберите компьютер</option>
|
||||
<option v-for="computer in this.computers"
|
||||
:value="computer.id">
|
||||
{{ computer.modelName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary" type="button" id="addComputerButton"
|
||||
@click.prevent="addComputerInCabinet(data.id)">Добавить</button>
|
||||
</Modal>
|
||||
</template>
|
||||
@ -1,23 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
catalogs: [
|
||||
{ name: 'orders', label: 'Заказы' },
|
||||
// { name: 'students', label: 'Студенты' },
|
||||
// { name: 'disciplines', label: 'Дисциплины' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="list-group">
|
||||
<router-link v-for="catalog in this.catalogs"
|
||||
:to="'/catalogs/' + catalog.name"
|
||||
class="list-group-item list-group-item-action">
|
||||
{{ catalog.label }}
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,177 +0,0 @@
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import CatalogMixins from '../mixins/CatalogMixins.js';
|
||||
import Cabinet from "../models/Cabinet";
|
||||
import Computer from '../models/Computer';
|
||||
import Monitor from '../models/Monitor';
|
||||
import DataService from '../services/DataService';
|
||||
|
||||
export default {
|
||||
mixins: [
|
||||
CatalogMixins
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
getAllUrl: 'computer/',
|
||||
dataUrl: 'computer',
|
||||
transformer: (data) => new Computer(data),
|
||||
headers: [
|
||||
{ name: 'modelName', label: 'Модель' },
|
||||
{ name: 'serialNum', label: 'Серийный номер' },
|
||||
{ name: 'monitorName', label: 'Модель монитора' },
|
||||
{ name: 'cabinetNum', label: 'Номер кабинета' }
|
||||
],
|
||||
dataFilterUrl: 'computer/filter?',
|
||||
cabinetUrl: 'cabinet/',
|
||||
cabinets: [],
|
||||
monitorUrl: 'monitor/',
|
||||
monitors: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
DataService.readAll(this.cabinetUrl, (data) => new Cabinet(data))
|
||||
.then(data => {
|
||||
this.cabinets = data;
|
||||
});
|
||||
DataService.readAll(this.monitorUrl, (data) => new Monitor(data))
|
||||
.then(data => {
|
||||
this.monitors = data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
filter() {
|
||||
let urlParams = ""
|
||||
if (document.getElementById('modelNameFilterInput').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "modelName=" + this.modelName;
|
||||
}
|
||||
if (document.getElementById('serialNumberFilterInput').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "serialNum=" + this.serialNumber;
|
||||
}
|
||||
if (document.getElementById('monitorFilterSelect').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "monitorId=" + this.monitorId;
|
||||
}
|
||||
if (document.getElementById('cabinetFilterSelect').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "cabinetId=" + this.cabinetId;
|
||||
}
|
||||
DataService.readAll(this.dataFilterUrl + urlParams, (data) => new Computer(data))
|
||||
.then(data => {
|
||||
this.items = data;
|
||||
});
|
||||
},
|
||||
clearFilters() {
|
||||
this.loadItems();
|
||||
this.id = null;
|
||||
this.modelName = null;
|
||||
this.serialNumber = null;
|
||||
this.monitorId = null;
|
||||
this.cabinetId = null;
|
||||
},
|
||||
addCabinetToComputer(computerId) {
|
||||
let cabinetId = document.getElementById('cabinets').value;
|
||||
let response = axios.post(`http://localhost:8080/api/computer/${computerId}/cabinet?cabinetId=${cabinetId}`);
|
||||
},
|
||||
itemsComps(computers) {
|
||||
if (typeof computers === 'undefined') {
|
||||
return;
|
||||
}
|
||||
computers.forEach(computer => {
|
||||
this.monitors.forEach(monitor => {
|
||||
if (computer.monitorId === monitor.id) {
|
||||
computer.monitor = monitor;
|
||||
}
|
||||
});
|
||||
this.cabinets.forEach(cabinet => {
|
||||
cabinet.computerIds.forEach(computerId => {
|
||||
if (computer.id === computerId) {
|
||||
computer.cabinet = cabinet;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
return computers;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="modelNameFilterInput" placeholder="Модель" required v-model="modelName">
|
||||
|
||||
<input type="text" class="form-control" id="serialNumberFilterInput" placeholder="Серийный номер" required v-model="serialNumber">
|
||||
|
||||
<select class="form-select" id="monitorFilterSelect" v-model="monitorId">
|
||||
<option disabled value="" selected>Выберите монитор</option>
|
||||
<option v-for="monitor in monitors" :value="monitor.id">{{ monitor.modelName }}</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select" id="cabinetFilterSelect" v-model="cabinetId">
|
||||
<option disabled value="" selected>Выберите номер кабинета</option>
|
||||
<option v-for="cabinet in cabinets" :value="cabinet.id">{{ cabinet.number }}</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-primary" type="button" id="report-button"
|
||||
@click.prevent="filter">Сформировать</button>
|
||||
<button class="btn btn-outline-secondary" type="button" id="report-button"
|
||||
@click.prevent="clearFilters">Очистить</button>
|
||||
</div>
|
||||
<ToolBar
|
||||
@add="showAddModal"
|
||||
@edit="showEditModal"
|
||||
@remove="removeSelectedItems">
|
||||
</ToolBar>
|
||||
<DataTable
|
||||
:headers="this.headers"
|
||||
:items="itemsComps(this.items)"
|
||||
:selectedItems="this.selectedItems"
|
||||
@dblclick="showEditModalDblClick">
|
||||
</DataTable>
|
||||
<Modal
|
||||
:header="this.modal.header"
|
||||
:confirm="this.modal.confirm"
|
||||
v-model:visible="this.modalShow"
|
||||
@done="saveItem">
|
||||
<div class="mb-3">
|
||||
<label for="model" class="form-label">Модель</label>
|
||||
<input type="text" class="form-control" id="model" required v-model="data.modelName">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="serialNum" class="form-label">Серийный номер</label>
|
||||
<input type="text" class="form-control" id="serialNum" required v-model="data.serialNum">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="monitor" class="form-label">Монитор</label>
|
||||
<select class="form-select" id="monitor" v-model="data.monitorId">
|
||||
<option disabled value="">Выберите монитор</option>
|
||||
<option v-for="monitor in this.monitors"
|
||||
:value="monitor.id"
|
||||
:selected="data.monitorId && monitor.id === data.monitorId">
|
||||
{{ monitor.modelName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="mb-3">
|
||||
<label for="cabinet" class="form-label">Номер кабинета</label>
|
||||
<select class="form-select" id="cabinet" v-model="data.cabinetId">
|
||||
<option disabled value="">Выберите номер кабинета</option>
|
||||
<option v-for="cabinet in this.cabinets"
|
||||
:value="cabinet.id"
|
||||
:selected="data.cabinetId && cabinet.id === data.cabinetId">
|
||||
{{ cabinet.number }}
|
||||
</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</Modal>
|
||||
</template>
|
||||
@ -1,70 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
headers: Array,
|
||||
items: Array,
|
||||
selectedItems: Array
|
||||
},
|
||||
emits: {
|
||||
dblclick: null
|
||||
},
|
||||
methods: {
|
||||
rowClick(id) {
|
||||
if (this.isSelected(id)) {
|
||||
var index = this.selectedItems.indexOf(id);
|
||||
if (index !== -1) {
|
||||
this.selectedItems.splice(index, 1);
|
||||
}
|
||||
} else {
|
||||
this.selectedItems.push(id);
|
||||
}
|
||||
},
|
||||
rowDblClick(id) {
|
||||
this.$emit('dblclick', id);
|
||||
},
|
||||
isSelected(id) {
|
||||
return this.selectedItems.includes(id);
|
||||
},
|
||||
dataConvert(data) {
|
||||
return data;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th v-for="header in this.headers"
|
||||
:id="header.name"
|
||||
scope="col">{{ header.label }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in this.items"
|
||||
@click="rowClick(item.id)"
|
||||
@dblclick="rowDblClick(item.id)"
|
||||
:class="{selected: isSelected(item.id)}">
|
||||
<th scope="row">{{ index + 1 }}</th>
|
||||
<td v-for="header in this.headers">
|
||||
{{ dataConvert(item[header.name]) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
tbody tr:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
tr.selected {
|
||||
background-color: #0d6efd;
|
||||
opacity: 80%;
|
||||
}
|
||||
tbody tr {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,35 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getRoutes() {
|
||||
return this.$router.options.routes.filter(route => route.meta?.hasOwnProperty('label'));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<i class="fa-solid fa-book"></i>
|
||||
Рабочее место оператора пункта выдачи заказов
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"
|
||||
v-for="route in this.getRoutes()">
|
||||
<router-link class="nav-link" :to="route.path">{{ route.meta.label }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -1,67 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
header: String,
|
||||
confirm: String,
|
||||
visible: Boolean
|
||||
},
|
||||
emits: {
|
||||
done: null,
|
||||
'update:visible': (value) => {
|
||||
if (typeof value !== 'boolean') {
|
||||
throw 'Value is not a boolean';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hide() {
|
||||
this.$emit('update:visible', false);
|
||||
},
|
||||
done() {
|
||||
if (this.$refs.form.checkValidity()) {
|
||||
this.$emit('done');
|
||||
this.hide();
|
||||
} else {
|
||||
this.$refs.form.reportValidity();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal fade" tabindex="-1" aria-hidden="true"
|
||||
:class="{ 'modal-show': this.visible, 'show': this.visible }">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">{{ header }}</h1>
|
||||
<button type="button" class="btn-close" aria-label="Close"
|
||||
@click.prevent="hide"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form @submit.prevent="done" ref="form">
|
||||
<slot></slot>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
@click.prevent="hide">Закрыть</button>
|
||||
<button type="button" class="btn btn-primary"
|
||||
@click.prevent="done">{{ confirm }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
@ -1,71 +0,0 @@
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import CatalogMixins from '../mixins/CatalogMixins.js';
|
||||
import Monitor from '../models/Monitor';
|
||||
import DataService from '../services/DataService';
|
||||
|
||||
export default {
|
||||
mixins: [
|
||||
CatalogMixins
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
getAllUrl: 'monitor/',
|
||||
dataUrl: 'monitor',
|
||||
transformer: (data) => new Monitor(data),
|
||||
headers: [
|
||||
{ name: 'modelName', label: 'Модель' }
|
||||
],
|
||||
dataFilterUrl: 'monitor/filter?'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter() {
|
||||
let urlParams = ""
|
||||
if (document.getElementById('modelNameFilterInput').value != "") {
|
||||
urlParams += "modelName=" + this.modelName;
|
||||
}
|
||||
DataService.readAll(this.dataFilterUrl + urlParams, (data) => new Monitor(data))
|
||||
.then(data => {
|
||||
this.items = data;
|
||||
});
|
||||
},
|
||||
clearFilters() {
|
||||
this.loadItems();
|
||||
this.id = null;
|
||||
this.modelName = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="modelNameFilterInput" placeholder="Модель" required v-model="modelName">
|
||||
<button class="btn btn-primary" type="button" id="report-button"
|
||||
@click.prevent="filter">Сформировать</button>
|
||||
<button class="btn btn-outline-secondary" type="button" id="report-button"
|
||||
@click.prevent="clearFilters">Очистить</button>
|
||||
</div>
|
||||
<ToolBar
|
||||
@add="showAddModal"
|
||||
@edit="showEditModal"
|
||||
@remove="removeSelectedItems">
|
||||
</ToolBar>
|
||||
<DataTable
|
||||
:headers="this.headers"
|
||||
:items="this.items"
|
||||
:selectedItems="this.selectedItems"
|
||||
@dblclick="showEditModalDblClick">
|
||||
</DataTable>
|
||||
<Modal
|
||||
:header="this.modal.header"
|
||||
:confirm="this.modal.confirm"
|
||||
v-model:visible="this.modalShow"
|
||||
@done="saveItem">
|
||||
<div class="mb-3">
|
||||
<label for="model" class="form-label">Модель</label>
|
||||
<input type="text" class="form-control" id="model" required v-model="data.modelName">
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@ -1,247 +0,0 @@
|
||||
<script>
|
||||
import CatalogMixins from '../mixins/CatalogMixins.js';
|
||||
import Order from "../models/Order";
|
||||
import Car from '../models/Car';
|
||||
import Client from '../models/Client';
|
||||
import PickUpPoint from '../models/PickUpPoint';
|
||||
import DataService from '../services/DataService';
|
||||
|
||||
export default {
|
||||
mixins: [
|
||||
CatalogMixins
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
getAllUrl: 'order',
|
||||
dataUrl: 'order',
|
||||
transformer: (data) => new Order(data),
|
||||
headers: [
|
||||
{ name: 'value', label: 'Оценочная стоимость' },
|
||||
{ name: 'status', label: 'Статус' },
|
||||
{ name: 'date', label: 'Дата' },
|
||||
{ name: 'clientName', label: 'Клиент' },
|
||||
{ name: 'sourcePickUpPointAddress', label: 'Пункт отправления' },
|
||||
{ name: 'destPickUpPointAddress', label: 'Пункт выдачи' },
|
||||
{ name: 'carNumber', label: 'Автомобиль' }
|
||||
],
|
||||
dataFilterUrl: 'order/filter?',
|
||||
carUrl: 'car',
|
||||
cars: [],
|
||||
pickUpPointUrl: 'pickUpPoint',
|
||||
pickUpPoints: [],
|
||||
clientUrl: 'client',
|
||||
clients: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
DataService.readAll(this.carUrl, (data) => new Car(data))
|
||||
.then(data => {
|
||||
this.cars = data;
|
||||
});
|
||||
DataService.readAll(this.pickUpPointUrl, (data) => new PickUpPoint(data))
|
||||
.then(data => {
|
||||
this.pickUpPoints = data;
|
||||
});
|
||||
DataService.readAll(this.clientUrl, (data) => new Client(data))
|
||||
.then(data => {
|
||||
this.clients = data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
filter() {
|
||||
let urlParams = ""
|
||||
if (document.getElementById('idFilterInput').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "id=" + this.id;
|
||||
}
|
||||
if (document.getElementById('valueFilterInput').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "value=" + this.value;
|
||||
}
|
||||
if (document.getElementById('statusFilterSelect').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "status=" + this.status;
|
||||
}
|
||||
if (document.getElementById('dateFilterInput').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "date=" + this.date;
|
||||
}
|
||||
if (document.getElementById('clientFilterSelect').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "clientId=" + this.clientId;
|
||||
}
|
||||
if (document.getElementById('sourcePickUpPointFilterSelect').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "sourcePickUpPointId=" + this.sourcePickUpPointId;
|
||||
}
|
||||
if (document.getElementById('destPickUpPointFilterSelect').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "destPickUpPointId=" + this.destPickUpPointId;
|
||||
}
|
||||
if (document.getElementById('carFilterSelect').value != "") {
|
||||
if (urlParams != "") {
|
||||
urlParams += "&";
|
||||
}
|
||||
urlParams += "carId=" + this.carId;
|
||||
}
|
||||
DataService.readAll(this.dataFilterUrl + urlParams, (data) => new Order(data))
|
||||
.then(data => {
|
||||
this.items = data;
|
||||
});
|
||||
},
|
||||
clearFilters() {
|
||||
this.loadItems();
|
||||
this.id = null;
|
||||
this.value = null;
|
||||
this.status = null;
|
||||
this.date = null;
|
||||
this.clientId = null;
|
||||
this.sourcePickUpPointId = null;
|
||||
this.destPickUpPointId = null;
|
||||
this.destPickUpPointId = null;
|
||||
this.carId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="idFilterInput" placeholder="Номер заказа" required v-model="id">
|
||||
|
||||
<input type="text" class="form-control" id="valueFilterInput" placeholder="Оценочная стоимость" required v-model="value">
|
||||
|
||||
<select class="form-select" id="statusFilterSelect" v-model="status">
|
||||
<option disabled value="" selected>Выберите статус</option>
|
||||
<option value="accepted">Принят</option>
|
||||
<option value="inDelivery">В пути</option>
|
||||
<option value="delivered">Доставлен</option>
|
||||
<option value="issued">Выдан</option>
|
||||
</select>
|
||||
|
||||
<input type="date" class="form-control" id="dateFilterInput" placeholder="Дата" required v-model="date">
|
||||
|
||||
<select class="form-select" id="clientFilterSelect" v-model="clientId">
|
||||
<option disabled value="" selected>Выберите клиента</option>
|
||||
<option v-for="client in clients" :value="client.id">{{ client.name }}</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select" id="sourcePickUpPointFilterSelect" v-model="sourcePickUpPointId">
|
||||
<option disabled value="" selected>Выберите пункт отправления</option>
|
||||
<option v-for="sourcePickUpPoint in pickUpPoints" :value="sourcePickUpPoint.id">{{ sourcePickUpPoint.address }}</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select" id="destPickUpPointFilterSelect" v-model="destPickUpPointId">
|
||||
<option disabled value="" selected>Выберите пункт получения</option>
|
||||
<option v-for="destPickUpPoint in pickUpPoints" :value="destPickUpPoint.id">{{ destPickUpPoint.address }}</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select" id="carFilterSelect" v-model="carId">
|
||||
<option disabled value="" selected>Выберите автомобиль</option>
|
||||
<option v-for="car in cars" :value="car.id">{{ car.gosNumber }}</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-primary" type="button" id="report-button"
|
||||
@click.prevent="filter">Сформировать</button>
|
||||
<button class="btn btn-outline-secondary" type="button" id="report-button"
|
||||
@click.prevent="clearFilters">Очистить</button>
|
||||
</div>
|
||||
<ToolBar
|
||||
@add="showAddModal"
|
||||
@edit="showEditModal"
|
||||
@remove="removeSelectedItems">
|
||||
</ToolBar>
|
||||
<DataTable
|
||||
:headers="this.headers"
|
||||
:items="this.items"
|
||||
:selectedItems="this.selectedItems"
|
||||
@dblclick="showEditModalDblClick">
|
||||
</DataTable>
|
||||
<Modal
|
||||
:header="this.modal.header"
|
||||
:confirm="this.modal.confirm"
|
||||
v-model:visible="this.modalShow"
|
||||
@done="saveItem">
|
||||
<div class="mb-3">
|
||||
<label for="value" class="form-label">Оценочная стоимость</label>
|
||||
<input type="text" class="form-control" id="value" required v-model="data.value">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="status" class="form-label">Статус</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="status" id="statusAccepted" v-model="data.status" value="accepted" checked>
|
||||
<label class="form-check-label" for="statusAccepted">
|
||||
Принят
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="status" id="statusIssued" v-model="data.status" value="issued">
|
||||
<label class="form-check-label" for="statusIssued">
|
||||
Выдан
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="date" class="form-label">Дата</label>
|
||||
<input type="date" class="form-control" id="date" required v-model="data.date">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="clients" class="form-label">Клиент</label>
|
||||
<select class="form-select" id="client" required v-model="data.clientId">
|
||||
<option disabled value="">Выберите клиента</option>
|
||||
<option v-for="client in this.clients"
|
||||
:value="client.id"
|
||||
:selected="data.clientId && client.id === data.clientId">
|
||||
{{ client.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="pickUpPoints" class="form-label">Пункт отправления</label>
|
||||
<select class="form-select" id="sourcePickUpPoint" required v-model="data.sourcePickUpPointId">
|
||||
<option disabled value="">Выберите пункт отправления</option>
|
||||
<option v-for="sourcePickUpPoint in this.pickUpPoints"
|
||||
:value="sourcePickUpPoint.id"
|
||||
:selected="data.sourcePickUpPointId && sourcePickUpPoint.id === data.sourcePickUpPointId">
|
||||
{{ sourcePickUpPoint.address }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="pickUpPoints" class="form-label">Пункт выдачи</label>
|
||||
<select class="form-select" id="destPickUpPoint" v-model="data.destPickUpPointId">
|
||||
<option disabled value="">Выберите пункт выдачи</option>
|
||||
<option v-for="destPickUpPoint in this.pickUpPoints"
|
||||
:value="destPickUpPoint.id"
|
||||
:selected="data.destPickUpPointId && destPickUpPoint.id === data.destPickUpPointId">
|
||||
{{ destPickUpPoint.address }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="cars" class="form-label">Автомобиль</label>
|
||||
<select class="form-select" id="car" required v-model="data.carId">
|
||||
<option disabled value="">Выберите автомобиль</option>
|
||||
<option v-for="car in this.cars"
|
||||
:value="car.id"
|
||||
:selected="data.carId && car.id === data.carId">
|
||||
{{ car.vin }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@ -1,21 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
reports: [
|
||||
{ name: 'group-students', label: 'Список студентов' },
|
||||
{ name: 'group-disciplines', label: 'Список дисциплин' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="list-group">
|
||||
<router-link v-for="report in this.reports"
|
||||
:to="'/reports/' + report.name" class="list-group-item list-group-item-action">
|
||||
{{ report.label }}
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,46 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
},
|
||||
emits: {
|
||||
add: null,
|
||||
edit: null,
|
||||
remove: null
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.$emit('add');
|
||||
},
|
||||
edit() {
|
||||
this.$emit('edit');
|
||||
},
|
||||
remove() {
|
||||
this.$emit('remove');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="btn-group mt-2" role="group">
|
||||
<button type="button" class="btn btn-success"
|
||||
@click.prevent="add">
|
||||
Добавить
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning"
|
||||
@click.prevent="edit">
|
||||
Изменить
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger"
|
||||
@click.prevent="remove">
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
min-width: 140px;
|
||||
}
|
||||
</style>
|
||||
@ -1,21 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import Cabinets from './components/Cabinets.vue'
|
||||
import Computers from './components/Computers.vue'
|
||||
import Monitors from './components/Monitors.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', redirect: '/cabinets' },
|
||||
{ path: '/cabinets', component: Cabinets, meta: { label: 'Кабинеты' } },
|
||||
{ path: '/computers', component: Computers, meta: { label: 'Компьютеры' } },
|
||||
{ path: '/monitors', component: Monitors, meta: { label: 'Мониторы' } }
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
linkActiveClass: 'active',
|
||||
routes
|
||||
})
|
||||
createApp(App).use(router).mount('#app')
|
||||
@ -1,102 +0,0 @@
|
||||
import ToolBar from '../components/ToolBar.vue';
|
||||
import DataTable from '../components/DataTable.vue';
|
||||
import Modal from '../components/Modal.vue';
|
||||
import DataService from '../services/DataService';
|
||||
|
||||
const CatalogMixin = {
|
||||
components: {
|
||||
ToolBar, DataTable, Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getAllUrl: undefined,
|
||||
dataUrl: undefined,
|
||||
transformer: undefined,
|
||||
headers: [],
|
||||
items: [],
|
||||
selectedItems: [],
|
||||
modal: {
|
||||
header: undefined,
|
||||
confirm: undefined,
|
||||
},
|
||||
modalShow: false,
|
||||
data: undefined,
|
||||
isEdit: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadItems();
|
||||
},
|
||||
methods: {
|
||||
loadItems() {
|
||||
this.getItems();
|
||||
this.data = this.transformer();
|
||||
},
|
||||
getItems() {
|
||||
DataService.readAll(this.getAllUrl, this.transformer)
|
||||
.then(data => {
|
||||
this.items = data;
|
||||
});
|
||||
},
|
||||
showAddModal() {
|
||||
this.isEdit = false;
|
||||
this.data = this.transformer();
|
||||
this.modal.header = 'Добавление элемента';
|
||||
this.modal.confirm = 'Добавить';
|
||||
this.modalShow = true;
|
||||
},
|
||||
showEditModal() {
|
||||
if (this.selectedItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
this.showEditModalDblClick(this.selectedItems[0]);
|
||||
},
|
||||
showEditModalDblClick(editId) {
|
||||
DataService.read(this.dataUrl + "/" + editId, this.transformer)
|
||||
.then(data => {
|
||||
this.data = data;
|
||||
this.isEdit = true;
|
||||
this.modal.header = 'Редактирование элемента';
|
||||
this.modal.confirm = 'Сохранить';
|
||||
this.modalShow = true;
|
||||
});
|
||||
},
|
||||
saveItem() {
|
||||
if (!this.isEdit) {
|
||||
DataService.create(this.dataUrl + "/", this.data)
|
||||
.then(() => {
|
||||
this.getItems();
|
||||
});
|
||||
} else {
|
||||
DataService.update(this.dataUrl + "/" + this.data.id, this.data)
|
||||
.then(() => {
|
||||
this.getItems();
|
||||
});
|
||||
}
|
||||
},
|
||||
removeSelectedItems() {
|
||||
if (this.selectedItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (confirm('Удалить выбранные элементы?')) {
|
||||
const promises = [];
|
||||
const self = this;
|
||||
this.selectedItems.forEach(item => {
|
||||
promises.push(DataService.delete(this.dataUrl + "/" + item));
|
||||
});
|
||||
Promise.all(promises).then((results) => {
|
||||
results.forEach(function (id) {
|
||||
const index = self.selectedItems.indexOf(id);
|
||||
if (index === - 1) {
|
||||
return;
|
||||
}
|
||||
self.selectedItems.splice(index, 1);
|
||||
});
|
||||
this.getItems();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default CatalogMixin;
|
||||
@ -1,26 +0,0 @@
|
||||
export default class Cabinet {
|
||||
constructor(data) {
|
||||
this._id = data?.id;
|
||||
this._number = data?.number;
|
||||
this._computerIds = data?.computerIds;
|
||||
}
|
||||
|
||||
get id() {
|
||||
return this._id;
|
||||
}
|
||||
|
||||
get number() {
|
||||
return this._number;
|
||||
}
|
||||
|
||||
set number(value) {
|
||||
if (typeof value !== 'string' || value === null || value.length == 0) {
|
||||
throw 'New number value ' + value + ' is not a string or empty';
|
||||
}
|
||||
this._number = value;
|
||||
}
|
||||
|
||||
get computerIds() {
|
||||
return this._computerIds;
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
export default class Computer {
|
||||
constructor(data) {
|
||||
this._id = data?.id;
|
||||
this._modelName = data?.modelName;
|
||||
this._serialNum = data?.serialNum;
|
||||
this._monitor = data?.monitor;
|
||||
this._monitorId = data?.monitorId;
|
||||
this._cabinet = data?.cabinet;
|
||||
}
|
||||
|
||||
get id() {
|
||||
return this._id;
|
||||
}
|
||||
|
||||
get modelName() {
|
||||
return this._modelName;
|
||||
}
|
||||
|
||||
set modelName(value) {
|
||||
this._modelName = value;
|
||||
}
|
||||
|
||||
get serialNum() {
|
||||
return this._serialNum;
|
||||
}
|
||||
|
||||
set serialNum(value) {
|
||||
this._serialNum = value;
|
||||
}
|
||||
|
||||
get monitorId() {
|
||||
return this._monitorId;
|
||||
}
|
||||
|
||||
set monitorId(data) {
|
||||
this._monitorId = data;
|
||||
}
|
||||
|
||||
get monitor() {
|
||||
return this._monitor;
|
||||
}
|
||||
|
||||
set monitor(data) {
|
||||
this._monitor = data;
|
||||
}
|
||||
|
||||
get monitorName() {
|
||||
return this._monitor?.modelName;
|
||||
}
|
||||
|
||||
get cabinet() {
|
||||
return this._cabinet;
|
||||
}
|
||||
|
||||
set cabinet(data) {
|
||||
this._cabinet = data;
|
||||
}
|
||||
|
||||
get cabinetNum() {
|
||||
return this._cabinet?.number;
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
export default class Monitor {
|
||||
constructor(data) {
|
||||
this._id = data?.id;
|
||||
this._modelName = data?.modelName;
|
||||
}
|
||||
|
||||
get id() {
|
||||
return this._id;
|
||||
}
|
||||
|
||||
get modelName() {
|
||||
return this._modelName;
|
||||
}
|
||||
|
||||
set modelName(value) {
|
||||
if (typeof value !== 'string' || value === null || value.length == 0) {
|
||||
throw 'New model name value ' + value + ' is not a string or empty';
|
||||
}
|
||||
this._modelName = value;
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import axios from 'axios';
|
||||
|
||||
function toJSON(data) {
|
||||
const jsonObj = {};
|
||||
const fields = Object.getOwnPropertyNames(data);
|
||||
for (const field of fields) {
|
||||
if (data[field] === undefined) {
|
||||
continue;
|
||||
}
|
||||
jsonObj[field.substring(1)] = data[field];
|
||||
}
|
||||
return jsonObj;
|
||||
}
|
||||
|
||||
export default class DataService {
|
||||
static dataUrlPrefix = 'http://localhost:8080/api/';
|
||||
|
||||
static async readAll(url, transformer) {
|
||||
const response = await axios.get(this.dataUrlPrefix + url);
|
||||
return response.data.map(item => transformer(item));
|
||||
}
|
||||
|
||||
static async read(url, transformer) {
|
||||
const response = await axios.get(this.dataUrlPrefix + url);
|
||||
return transformer(response.data);
|
||||
}
|
||||
|
||||
static async create(url, data) {
|
||||
const response = await axios.post(this.dataUrlPrefix + url, toJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
static async update(url, data) {
|
||||
const response = await axios.put(this.dataUrlPrefix + url, toJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
static async delete(url) {
|
||||
const response = await axios.delete(this.dataUrlPrefix + url);
|
||||
return response.data.id;
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), vueJsx()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user