CV
Size: a a a
2020 June 09
CV
В JS создаёшь себе Vue объект
А дальше?
JF
И пишешь
CV
Есть какие нибудь хтмл шаблоны?
CV
Не удобно генерировать mass руками
JF
Вот что у меня например там
var app = new Vue({
el: '#app',
data: {
showModal: false,
showNewEntryModal: false,
showPrintModal: false,
showEditEntryModal: false,
showCloseEntryModal: false,
showDeleteEntryModal: false,
activeModalValue: -1,
searchQuery: '',
gridData: [],
gridDataAll: [],
employees: [],
date: getNow(),
employee: '',
building: 'Main',
auditorium: '',
cause: '',
status: '',
textBoxes: [],
selects: [],
usedItems: [],
inventoryNumbers: [],
stockItemEntries: [],
currentPage: 1,
pages: 1,
pagesArray: [],
countEntriesEachPage: 10
}
methods: {
getAllEmployees: function () {
var request = new HttpRequest();
request.xmlHttpRequestInstance.onreadystatechange = function (ev) {
if (request.isRequestSuccessful()) {
var jsonData = JSON.parse(request.xmlHttpRequestInstance.responseText);
for (var i = 0; i < jsonData.length; i++) {
app.employees[i] = {
'id': jsonData[i][0],
'name': jsonData[i][1],
'surname': jsonData[i][2],
'patronymic': jsonData[i][3],
'status': jsonData[i][4],
'contactNumber': jsonData[i][5],
'position': jsonData[i][6],
'responsible': jsonData[i][7]
};
}
}
};
request.sendGETRequest("s", "");
},
updateAllStockItemsEntries: function() {
var request = new HttpRequest();
request.xmlHttpRequestInstance.onreadystatechange = function (ev) {
if (request.isRequestSuccessful()) {
var stockItemsJSON = JSON.parse(request.xmlHttpRequestInstance.responseText);
for (var i = 0; i < stockItemsJSON.length; i++) {
app.stockItemEntries[i] = {
'id': stockItemsJSON[i][0],
'itemName': stockItemsJSON[i][1],
'type': stockItemsJSON[i][2],
'unit': stockItemsJSON[i][3],
'amount': stockItemsJSON[i][4],
'price': stockItemsJSON[i][5],
'total': stockItemsJSON[i][6],
'responsiblePerson': stockItemsJSON[i][7],
'code': stockItemsJSON[i][8]
};
}
}
};
request.sendGETRequest("s", "");
},
closeNewEntryModalWindow: function () {
console.log(this.date + ' ' + this.employee + ' ' + this.building + ' ' + this.auditorium + ' ' + this.cause + ' ' + this.chief);
this.showNewEntryModal = false;
var request = new HttpRequest();
request.xmlHttpRequestInstance.onreadystatechange = function (ev) {
if (request.isRequestSuccessful()) {
console.log('Status: ' + request.xmlHttpRequestInstance.responseText);
getAllRequests();
}
};
request.sendPOSTRequest("addRequest", JSON.stringify({'date': this.date, 'employee': this.employee, 'building': this.building, 'auditorium': this.auditorium, 'cause': this.cause, 'status': 0}));
},
openNewEntryRequestWindow: function() {
app.showNewEntryModal = true;
app.employee = '';
app.building = '';
app.auditorium = '';
app.cause = '';
app.status = '';
app.date = getNow();
},
closePrintModalWindow: function () {
},JF
А шаблоны
JF
Вот например модалка
JF
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container" v-bind:style="{width: width}">
<div class="modal-header">
<slot name="header">
Close request (ID: {{getActiveID()}})
</slot>
</div>
<div class="modal-body">
<slot name="body">
Close request (ID: {{getActiveID()}})
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="modal-default-button" @click="$emit('execute')">
OK
</button>
<button class="modal-default-button" @click="$emit('close')">
Close
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
JF
И его реализация
JF
Vue.component('modal', {
template: '#modal-template',
props: {
width: String
},
methods: {
getActiveID: function() {
return app.activeModalValue
}
}
});JF
<modal v-if="showNewEntryModal" @execute="closeNewEntryModalWindow()" @close="showNewEntryModal = false">JF
И вот использование
CV
Спасибо. Буду разбираться
JF
Если что спрашивай
2020 June 10
JF
Ребята
JF
Кто чем занимается
JF
Кто что делает
JF
Рассказывайте