verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 83 Releases Wiki Activity

refs #5673 feat(ClaimDevelopment): use crud
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Alex Moreno 2023-07-31 15:24:56 +02:00
parent e2e34089e2
commit 6b3a09887f
1 changed files with 143 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
src/pages/Claim/Card/ClaimDevelopment.vue
View File

@ -2,16 +2,19 @@
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import VnPaginate from 'components/ui/VnPaginate.vue'; import FormModel from 'components/FormModel.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const claimDevelopmentForm = ref();
const claimReasons = ref([]); const claimReasons = ref([]);
const claimResults = ref([]); const claimResults = ref([]);
const claimResponsibles = ref([]); const claimResponsibles = ref([]);
const claimRedeliveries = ref([]); const claimRedeliveries = ref([]);
const workers = ref([]);
const selected = ref([]);
const developmentsFilter = { const developmentsFilter = {
fields: [ fields: [
@ -34,34 +37,92 @@ const columns = computed(() => [
label: t('Reason'), label: t('Reason'),
field: (row) => row.claimReasonFk, field: (row) => row.claimReasonFk,
sortable: true, sortable: true,
options: claimReasons, options: claimReasons.value,
required: true,
model: 'claimReasonFk',
optionValue: 'id',
optionLabel: 'description',
}, },
{ {
name: 'result', name: 'result',
label: t('Result'), label: t('Result'),
field: (row) => row.claimResultFk, field: (row) => row.claimResultFk,
sortable: true, sortable: true,
options: claimResults, options: claimResults.value,
required: true,
model: 'claimResultFk',
optionValue: 'id',
optionLabel: 'description',
}, },
{ {
name: 'responsible', name: 'responsible',
label: t('Responsible'), label: t('Responsible'),
field: (row) => row.claimResponsibleFk, field: (row) => row.claimResponsibleFk,
sortable: true, sortable: true,
options: claimResponsibles.value,
required: true,
model: 'claimResponsibleFk',
optionValue: 'id',
optionLabel: 'description',
}, },
{ {
name: 'worker', name: 'worker',
label: t('Worker'), label: t('Worker'),
field: (row) => row.workerFk, field: (row) => row.workerFk,
sortable: true, sortable: true,
options: workers.value,
model: 'workerFk',
optionValue: 'id',
optionLabel: 'nickname',
}, },
{ {
name: 'redelivery', name: 'redelivery',
label: t('Redelivery'), label: t('Redelivery'),
field: (row) => row.claimRedeliveryFk, field: (row) => row.claimRedeliveryFk,
sortable: true, sortable: true,
options: claimRedeliveries.value,
required: true,
model: 'claimRedeliveryFk',
optionValue: 'id',
optionLabel: 'description',
}, },
]); ]);
// function filterFn(val, update) {
// if (val === '') {
// update(() => {
// options.value = stringOptions;
// });
// return;
// }
// update(() => {
// const needle = val.toLowerCase();
// options.value = stringOptions.filter((v) => v.toLowerCase().indexOf(needle) > -1);
// });
// }
const basicFilter = (options) => {
return {
options,
filterFn: (options, value) => {
const search = value.toLowerCase();
if (value === '') return options;
return options.value.filter((row) => {
console.log(row);
const id = row.id;
const name = row.name.toLowerCase();
const idMatches = id == search;
const nameMatches = name.indexOf(search) > -1;
return idMatches || nameMatches;
});
},
};
};
</script> </script>
<template> <template>
<FetchData <FetchData
@ -88,110 +149,119 @@ const columns = computed(() => [
@on-fetch="(data) => (claimRedeliveries = data)" @on-fetch="(data) => (claimRedeliveries = data)"
auto-load auto-load
/> />
<FetchData
url="Workers/activeWithInheritedRole"
:where="{ role: 'employee' }"
@on-fetch="(data) => (workers = data)"
auto-load
/>
<div class="column items-center"> <div class="column items-center">
<div class="list"> <div class="list">
<VnPaginate <FormModel
data-key="ClaimDevelopments"
url="ClaimDevelopments" url="ClaimDevelopments"
:crud="true"
:filter="developmentsFilter" :filter="developmentsFilter"
auto-load model="claim"
ref="claimDevelopmentForm"
:data-required="{ claimFk: route.params.id }"
> >
<template #body="{ rows }"> <template #form="{ data, filter }">
<QTable <QTable
:columns="columns" :columns="columns"
:rows="rows" :rows="data"
:dense="$q.screen.lt.md"
:pagination="{ rowsPerPage: 0 }" :pagination="{ rowsPerPage: 0 }"
row-key="id" row-key="id"
selection="multiple" selection="multiple"
hide-pagination hide-pagination
v-model:selected="selected"
:grid="$q.screen.lt.md"
> >
<template #body-cell-reason="{ row, col }"> <template #body-cell="{ row, col }">
<QTd auto-width> <QTd auto-width>
<QSelect <QSelect
:label="col.label" :label="col.label"
v-model="row.claimReasonFk" v-model="row[col.model]"
:options="claimReasons" :options="col.options"
option-value="id" :option-value="col.optionValue"
option-label="description" :option-label="col.optionLabel"
emit-value emit-value
map-options map-options
use-input use-input
@filter="
(value, update) =>
filter(
value,
update,
basicFilter(col.options)
)
"
/> />
</QTd> </QTd>
</template> </template>
<template #body-cell-result="{ row }"> <template #item="props">
<QTd auto-width> <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
<QSelect <QCard bordered flat>
label="" <QCardSection>
v-model="row.claimResultFk" <QCheckbox v-model="props.selected" dense />
:options="claimResults" </QCardSection>
option-value="id" <QSeparator />
option-label="description" <QList dense>
emit-value <QItem v-for="col in props.cols" :key="col.name">
map-options <QItemSection>
use-input <QSelect
/> :label="col.label"
</QTd> v-model="props.row[col.model]"
</template> :options="col.options"
<template #body-cell-responsible="{ row }"> :option-value="col.optionValue"
<QTd auto-width> :option-label="col.optionLabel"
<QSelect emit-value
:label="t('Responsible')" map-options
v-model="row.claimResponsibleFk" use-input
:options="claimResponsibles" dense
option-value="id" @filter="
option-label="description" (value, update) =>
emit-value filter(
map-options value,
use-input update,
/> basicFilter(col.options)
</QTd> )
"
/>
</QItemSection>
</QItem>
</QList>
</QCard>
</div>
</template> </template>
</QTable> </QTable>
</template> </template>
</VnPaginate> </FormModel>
</div> </div>
</div> </div>
<q-page-sticky position="bottom-right" :offset="[18, 18]"> <QPageSticky position="bottom-right" :offset="[25, 100]">
<q-fab color="purple" icon="keyboard_arrow_up" direction="up"> <QBtn
<q-fab-action color="primary" icon="mail" /> fab
<q-fab-action color="secondary" icon="alarm" /> color="primary"
</q-fab> icon="delete"
</q-page-sticky> @click="claimDevelopmentForm.remove(selected)"
/>
</QPageSticky>
<QPageSticky position="bottom-right" :offset="[25, 25]">
<QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
</QPageSticky>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.list {
padding-top: 50px;
max-width: 900px;
width: 100%;
}
.grid-style-transition { .grid-style-transition {
transition: transform 0.28s, background-color 0.28s; transition: transform 0.28s, background-color 0.28s;
} }
</style> </style>
<i18n> <i18n>
en:
You are about to remove {count} rows: '
You are about to remove <strong>{count}</strong> row |
You are about to remove <strong>{count}</strong> rows'
es: es:
Claimed lines: Líneas reclamadas Reason: Motivo
Delivered: Entregado Result: Consecuencia
Quantity: Cantidad Responsible: Responsable
Claimed: Reclamada Worker: Trabajador
Description: Descripción Redelivery: Devolución
Price: Precio
Discount: Descuento
Actions: Acciones
Amount: Total
Amount Claimed: Cantidad reclamada
Delete claimed sales: Eliminar ventas reclamadas
Discount updated: Descuento actualizado
Claimed quantity: Cantidad reclamada
You are about to remove {count} rows: '
Vas a eliminar <strong>{count}</strong> línea |
Vas a eliminar <strong>{count}</strong> líneas'
</i18n> </i18n>