forked from verdnatura/salix-front
refs #6664 perf: show dialog
This commit is contained in:
parent
1c51faaff4
commit
f44643fc61
|
|
@ -66,7 +66,8 @@ async function confirm() {
|
|||
<QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
|
||||
</QCardSection>
|
||||
<QCardSection class="row items-center">
|
||||
<span v-html="message"></span>
|
||||
<span id="spanHTML" v-html="message"></span>
|
||||
<slot name="customHTML"></slot>
|
||||
</QCardSection>
|
||||
<QCardActions align="right">
|
||||
<QBtn
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
import { computed, } from 'vue';
|
||||
import { toDate, toPercentage, } from 'filters/index';
|
||||
|
||||
import CrudModel from 'src/components/CrudModel.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const { t } = useI18n();
|
||||
|
|
@ -83,9 +85,8 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide">
|
||||
<CrudModel
|
||||
v-if="claim"
|
||||
<CrudModel
|
||||
v-if="$props.id"
|
||||
data-key="ClaimEnds"
|
||||
url="ClaimEnds/filter"
|
||||
save-url="ClaimEnds/crud"
|
||||
|
|
@ -144,130 +145,14 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
|||
</QTd>
|
||||
</template>
|
||||
<!-- View for grid mode -->
|
||||
<template #item="props">
|
||||
<div class="q-mb-md col-12 grid-style-transition">
|
||||
<QCard>
|
||||
<QCardSection class="row justify-between">
|
||||
<QCheckbox v-model="props.selected" />
|
||||
<QBtn color="primary" icon="delete" flat round />
|
||||
</QCardSection>
|
||||
|
||||
<QSeparator inset />
|
||||
<QList dense>
|
||||
<QItem v-for="column of props.cols" :key="column.name">
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ column.label }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection side>
|
||||
<QItemLabel v-if="column.name === 'destination'">
|
||||
<VnSelectFilter
|
||||
v-model="props.row.claimDestinationFk"
|
||||
:options="destinationTypes"
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
:autofocus="true"
|
||||
dense
|
||||
input-debounce="0"
|
||||
hide-selected
|
||||
@update:model-value="
|
||||
(value) =>
|
||||
updateDestination(
|
||||
value,
|
||||
props.row
|
||||
)
|
||||
"
|
||||
/>
|
||||
</QItemLabel>
|
||||
<QItemLabel v-else>
|
||||
{{ column.value }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QCard>
|
||||
</div>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
<template #moreBeforeActions>
|
||||
<QBtn
|
||||
color="primary"
|
||||
text-color="white"
|
||||
:unelevated="true"
|
||||
:label="tMobile('Regularize')"
|
||||
:title="t('Regularize')"
|
||||
icon="check"
|
||||
@click="regularizeClaim"
|
||||
:disable="claim.claimStateFk == resolvedStateId"
|
||||
/>
|
||||
|
||||
<QBtn
|
||||
color="primary"
|
||||
text-color="white"
|
||||
:unelevated="true"
|
||||
:disable="!selectedRows.length"
|
||||
:label="tMobile('Change destination')"
|
||||
:title="t('Change destination')"
|
||||
icon="swap_horiz"
|
||||
@click="dialogDestination = !dialogDestination"
|
||||
/>
|
||||
<QBtn
|
||||
color="primary"
|
||||
text-color="white"
|
||||
:unelevated="true"
|
||||
:label="tMobile('Import claim')"
|
||||
:title="t('Import claim')"
|
||||
icon="Upload"
|
||||
@click="importToNewRefundTicket"
|
||||
:disable="claim.claimStateFk == resolvedStateId"
|
||||
/>
|
||||
</template>
|
||||
</CrudModel>
|
||||
<QDialog v-model="dialogDestination">
|
||||
<QCard>
|
||||
<QCardSection>
|
||||
<QItem class="q-pa-sm">
|
||||
<span class="q-dialog__title text-white">
|
||||
{{ t('dialog title') }}
|
||||
</span>
|
||||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QItem>
|
||||
</QCardSection>
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
class="q-pa-sm"
|
||||
v-model="claimDestinationFk"
|
||||
:options="destinationTypes"
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
:autofocus="true"
|
||||
dense
|
||||
input-debounce="0"
|
||||
hide-selected
|
||||
/>
|
||||
</QItemSection>
|
||||
<QCardActions class="justify-end q-mr-sm">
|
||||
<QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
|
||||
<QBtn
|
||||
:disable="!claimDestinationFk"
|
||||
:label="t('globals.save')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
@click="updateDestinations(claimDestinationFk)"
|
||||
/>
|
||||
</QCardActions>
|
||||
</QCard>
|
||||
</QDialog>
|
||||
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-dialog .summary .header {
|
||||
position: sticky;
|
||||
z-index: $z-max;
|
||||
top: 0;
|
||||
.q-dialog {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import TicketDescriptor from './TicketDescriptor.vue';
|
||||
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
|
|
@ -9,7 +10,12 @@ const $props = defineProps({
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide">
|
||||
<TicketDescriptor v-if="$props.id" :id="$props.id" />
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-dialog {
|
||||
.q-card{max-width: fit-content !important;}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,20 +7,25 @@ import { useSession } from 'src/composables/useSession';
|
|||
import TicketFilter from 'pages/Ticket/Negative/TicketFilter.vue';
|
||||
import TicketDescriptorDialog from 'pages/Ticket/Negative/TicketDescriptorDialog.vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const selected = ref([]);
|
||||
const showTicketDialog= ref(false);
|
||||
const currentRow= ref(null);
|
||||
const quasar = useQuasar();
|
||||
|
||||
const viewSummary = (value) => {
|
||||
quasar.dialog({
|
||||
component: TicketDescriptorDialog,
|
||||
componentProps: {
|
||||
id: value,
|
||||
},
|
||||
});
|
||||
showTicketDialog.value = true
|
||||
currentRow.value = value
|
||||
// quasar.dialog({
|
||||
// component: VnConfirm,
|
||||
// componentProps: {
|
||||
// id: value,
|
||||
// },
|
||||
// });
|
||||
};
|
||||
const columns = computed(() => [
|
||||
{
|
||||
|
|
@ -170,6 +175,14 @@ const columns = computed(() => [
|
|||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<VnConfirm
|
||||
v-model="showTicketDialog"
|
||||
:title="t('confirmGreuges')"
|
||||
>
|
||||
<template #customHTML>
|
||||
<TicketDescriptorDialog :id="currentRow"></TicketDescriptorDialog>
|
||||
</template>
|
||||
</VnConfirm>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<TicketFilter data-key="NegativeList" />
|
||||
|
|
@ -192,4 +205,8 @@ const columns = computed(() => [
|
|||
#false {
|
||||
background-color: $negative;
|
||||
}
|
||||
div.q-dialog__inner > div{
|
||||
max-width: fit-content !important;
|
||||
background-color: red !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue