feat: change Qdialog sizing
This commit is contained in:
parent
3e39ab7fc2
commit
ad64ee4755
|
|
@ -1,69 +1,21 @@
|
|||
<script setup>
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
// import { useDialogPluginComponent } from 'quasar';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
|
||||
// import VnInput from 'src/components/common/VnInput.vue';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
const { t } = useI18n();
|
||||
|
||||
const params = reactive({});
|
||||
const $props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
const itemsProposal = ref([]);
|
||||
const showProposalDialog = ref(false);
|
||||
// const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
||||
// watch($props.item, (newX, oldX) => {
|
||||
// showProposalDialog.value = !newX;
|
||||
// });
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
};
|
||||
const arrayData = useArrayData('ItemProposal', {
|
||||
url: 'Items/getSimilar',
|
||||
userParams: params,
|
||||
order: ['itemFk'],
|
||||
exprBuilder: exprBuilder,
|
||||
});
|
||||
// const store = arrayData.store;
|
||||
const defaultColumnAttrs = {
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
};
|
||||
// const getColumnInputEvents = (col) => {
|
||||
// return col.columnFilter.type === 'select'
|
||||
// ? { 'update:modelValue': () => applyColumnFilter(col) }
|
||||
// : {
|
||||
// 'keyup.enter': () => applyColumnFilter(col),
|
||||
// };
|
||||
// };
|
||||
const applyColumnFilter = async (col) => {
|
||||
try {
|
||||
const paramKey = col.columnFilter?.filterParamKey || col.field;
|
||||
params[paramKey] = col.columnFilter.filterValue;
|
||||
await arrayData.addFilter({ params });
|
||||
} catch (err) {
|
||||
console.error('Error applying column filter', err);
|
||||
}
|
||||
};
|
||||
// const defaultColumnFilter = {
|
||||
// component: VnInput,
|
||||
// type: 'text',
|
||||
// filterValue: null,
|
||||
// event: getColumnInputEvents,
|
||||
// attrs: {
|
||||
// dense: true,
|
||||
// },
|
||||
// };
|
||||
const statusConditionalValue = (row) => {
|
||||
const total = [5, 6, 7, 8].reduce((acc, i) => acc + row[`match${i}`], 0);
|
||||
const STATUS_VALUES = { 2: '$secondary', 3: 'positive', 4: 'warning' };
|
||||
|
|
@ -161,10 +113,9 @@ const columns = computed(() => [
|
|||
]);
|
||||
</script>
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog">
|
||||
<QCard class="q-pa-sm">
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog" full-width>
|
||||
<QCard class="q-pa-lg">
|
||||
<QCardSection class="row items-center q-pb-none">
|
||||
<!-- {{ $props.item }} -->
|
||||
<span class="text-h6 text-grey">{{
|
||||
t('negative.modalOrigin.title')
|
||||
}}</span>
|
||||
|
|
@ -172,8 +123,8 @@ const columns = computed(() => [
|
|||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QCardSection>
|
||||
<QCardSection class="row items-center justify-center column items-stretch">
|
||||
<span>{{ t('negative.modalOrigin.question') }}</span>
|
||||
<FetchData
|
||||
<VnPaginate
|
||||
data-key="ItemsGetSimilar"
|
||||
url="Items/getSimilar"
|
||||
:filter="{
|
||||
where: {
|
||||
|
|
@ -182,44 +133,51 @@ const columns = computed(() => [
|
|||
},
|
||||
}"
|
||||
auto-load
|
||||
@on-fetch="(data) => (itemsProposal = data)" />
|
||||
<QTable
|
||||
:rows="itemsProposal"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width q-mt-md"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
>
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd />
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width q-mt-md"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
:dense="$q.screen.lt.md"
|
||||
flat
|
||||
:grid="$q.screen.lt.md"
|
||||
auto-load
|
||||
:rows-per-page-options="[0]"
|
||||
hide-pagination
|
||||
>
|
||||
<template #top-row="{ cols }">
|
||||
<QTr>
|
||||
<QTd />
|
||||
<QTd
|
||||
v-for="(col, index) in cols"
|
||||
:key="index"
|
||||
style="max-width: 100px"
|
||||
>
|
||||
<component
|
||||
:is="col.columnFilter.component"
|
||||
v-if="col.columnFilter"
|
||||
v-model="col.columnFilter.filterValue"
|
||||
v-bind="col.columnFilter.attrs"
|
||||
v-on="col.columnFilter.event(col)"
|
||||
dense
|
||||
/>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
|
||||
<template #body-cell-status="{ value }">
|
||||
<QTd class="col" align="center">
|
||||
<div
|
||||
:style="{ 'background-color': value }"
|
||||
style="height: 10px"
|
||||
></div>
|
||||
</QTd>
|
||||
</template> </QTable
|
||||
<template #body-cell-status="{ value }">
|
||||
<QTd class="col" align="center">
|
||||
<div
|
||||
:style="{ 'background-color': value }"
|
||||
style="height: 10px"
|
||||
></div>
|
||||
</QTd>
|
||||
</template> </QTable></template></VnPaginate
|
||||
></QCardSection>
|
||||
</QCard>
|
||||
</QDialog>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,12 @@ const update = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showNegativeOriginDialog">
|
||||
<QDialog
|
||||
ref="dialogRef"
|
||||
@hide="onDialogHide"
|
||||
v-model="showNegativeOriginDialog"
|
||||
full-width
|
||||
>
|
||||
<QCard class="q-pa-sm">
|
||||
<QCardSection class="row items-center q-pb-none">
|
||||
<QAvatar
|
||||
|
|
|
|||
|
|
@ -2,12 +2,10 @@
|
|||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
|
||||
const { t } = useI18n();
|
||||
const selectedRows = ref([]);
|
||||
const showTotalNegativeOriginDialog = ref(false);
|
||||
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
|
|
@ -44,8 +42,13 @@ const columns = computed(() => [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showTotalNegativeOriginDialog">
|
||||
<QCard class="q-pa-sm">
|
||||
<QDialog
|
||||
ref="dialogRef"
|
||||
@hide="onDialogHide"
|
||||
v-model="showTotalNegativeOriginDialog"
|
||||
full-width
|
||||
>
|
||||
<QCard class="q-pa-lg">
|
||||
<QCardSection class="row items-center q-pb-none">
|
||||
<span class="text-h6 text-grey">{{ t('negative.totalNegative') }}</span>
|
||||
<QSpace />
|
||||
|
|
|
|||
Loading…
Reference in New Issue