Witam wszystkich,
Proszę o pomoc w rozwiązaniu problemu. Mam stworzone okno q-dialog, które jest podzielone na 3 sekcje.
W pierwszej jest select z wyborem rodzaju dokumentu. Po kliknięciu pola np. WZ, generuje się druga sekcja, czyli tabela z dokumentami WZ z bazy danych.
W tej tabeli jest tylko jedna kolumna z kodem dokumentu (np. WZ 01/01/2023, ale oczywiście rekordów jest więcej, tyle ile dokumentów w bazie). Po kliknięciu w rekord, rozwija się lista z dodatkowymi danymi oraz button. I tu przechodzę do sedna problemu:
Chcę, aby po kliknięciu buttona "Wybierz", ten konkretny dokument pojawił się w trzeciej sekcji. Jeśli kliknę następny button innego dokumentu, to ten dokument też ma się dodać do trzeciej sekcji itd.
Tak wygląda +/- wygląd:
select | tabela z danymi i button | dodany rekord
Problem mam w metodzie pushToRightSide(). Nie wiem jak to ogarnąć. Próbuję to przesłać do bazy, ale pewnie nie tędy droga. Może wystarczy w jakiś sposób najpierw dodać wybrane dokumenty tylko na widoku i później dopiero pobrać całość trzeciej sekcji i wysłać do bazy? Ktoś ma pomysł jak mógłbym to rozwiązać?
HTML:
q-dialog(v-model="cardDocumentsDialog" full-width full-height)
q-card.bg-blue-grey-2
.row
.col.text-center
q-btn.text-red-7(flat icon='fas fa-times' size='xl' dense v-close-popup style="width:100%").cancelBtn
q-separator(vertical)
.col.text-center
q-btn(flat icon='fas fa-check' size='xl' dense).confirmBtn
.row
.col-1.bg-yellow-3.items-center
q-select(
v-model="modelo"
value="modelo"
option-value="modelo"
label="select"
:options="listSelectGpd"
@input="getListDocsByKod")
.col-5.text-center
q-virtual-scroll(
style="height: 85vh; overflow-x: hidden"
:items-size="size"
:items-fn="getItemsVirtual"
:virtual-scroll-item-size="48"
virtual-scroll-slice-size="10"
separator
).bg-purple-2
q-table(
:data="getListDocuments"
:columns="columns"
no-data-label="Brak wyników dla wybranego rodzaju"
:pagination="pagination"
hide-header
:expand="expand"
).bg-purple-2
template(v-slot:body="props")
q-tr(:props="props" :class="colorSelectSecond(props.row.id)" class="rounded-borders" expand-separator group="somegroup").cursor-pointer
q-td(key="kod" :props="props" @click="props.expand = !props.expand" class="rounded-borders" expand-separator) {{props.row.kod }}
q-tr(v-show="props.expand" :props="props").bg-purple-1.text-left
span Id: {{ props.row.id }} / Data wystawienia: {{ props.row.dokumentDataWystawienia }}
q-btn(label="wybierz" @click="pushToRightSide(props.row.id)" push).btnSelectExpand
.col-5
template(v-if="isRightSide")
q-list(style="height: 100%").bg-green-2
q-item(no-ripple v-for="(e, index) in loadedDoc" :key="index") {{ loadedDoc }}
JS
export default {
data() {
return {
columns: [
{ name: 'kod', label: '', field: 'kod', align: 'left', sortable: true },
{ name: 'id', label: '', field: 'id', align: 'left', sortable: true },
{ name: 'dokumentDataWystawienia', label: '', field: 'dokumentDataWystawienia', align: 'left', sortable: true }
],
modelo: '',
listSelectGpd: [],
pagination: {
rowsPerPage: 15
},
expand: true,
selectDoc: null,
isRightSide: false,
loadedDoc: null
}
},
methods: {
getListDocsByKod() {
console.log('%c lista promise:', 'color: blue; font-size: 14px; font-weight: bold')
this.$axios({
method: 'GET',
url: localStorage.getItem('url') + '/api/wysylki/getSelectedDocumentyyy',
headers: { Authorization: this.$store.state.container.tokenJwt }
})
.then(r => {
this.$store.commit('kolektorWysylek/getAllDocuments', r)
console.log(r)
console.log(this.showDocuments)
console.log(this.listAllDocuments)
this.showDocuments = this.listAllDocuments
this.listAllDocuments = []
this.showDocuments.forEach(r => {
console.log(this.listAllDocuments)
console.log(r.fkDkm)
console.log(this.modelo.value)
if (r.fkDkm === this.modelo.value) {
this.listAllDocuments.push(r)
}
})
})
},
pushToRightSide(id) {
console.log('pushing')
console.log(id) // pobiera id wybranego dokumentu
this.$axios({
method: 'GET',
url: localStorage.getItem('url') + '/api/wysylki/v/' + id,
headers: {'Authorization': this.$store.state.container.tokenJwt}
}).then(r => {
console.log(r) // dostępne wszystkie dane dokumentu
if (r.data !== '') {
this.isRightSide = true
this.loadedDoc = r.data.kod
}
})
},
}