forked from verdnatura/salix-front
refs #5673 feat(ClaimDevelopment): use crud
This commit is contained in:
parent
e2e34089e2
commit
6b3a09887f
|
|
@ -2,16 +2,19 @@
|
|||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const claimDevelopmentForm = ref();
|
||||
const claimReasons = ref([]);
|
||||
const claimResults = ref([]);
|
||||
const claimResponsibles = ref([]);
|
||||
const claimRedeliveries = ref([]);
|
||||
const workers = ref([]);
|
||||
const selected = ref([]);
|
||||
|
||||
const developmentsFilter = {
|
||||
fields: [
|
||||
|
|
@ -34,34 +37,92 @@ const columns = computed(() => [
|
|||
label: t('Reason'),
|
||||
field: (row) => row.claimReasonFk,
|
||||
sortable: true,
|
||||
options: claimReasons,
|
||||
options: claimReasons.value,
|
||||
required: true,
|
||||
model: 'claimReasonFk',
|
||||
optionValue: 'id',
|
||||
optionLabel: 'description',
|
||||
},
|
||||
{
|
||||
name: 'result',
|
||||
label: t('Result'),
|
||||
field: (row) => row.claimResultFk,
|
||||
sortable: true,
|
||||
options: claimResults,
|
||||
options: claimResults.value,
|
||||
required: true,
|
||||
model: 'claimResultFk',
|
||||
optionValue: 'id',
|
||||
optionLabel: 'description',
|
||||
},
|
||||
{
|
||||
name: 'responsible',
|
||||
label: t('Responsible'),
|
||||
field: (row) => row.claimResponsibleFk,
|
||||
sortable: true,
|
||||
options: claimResponsibles.value,
|
||||
required: true,
|
||||
model: 'claimResponsibleFk',
|
||||
optionValue: 'id',
|
||||
optionLabel: 'description',
|
||||
},
|
||||
{
|
||||
name: 'worker',
|
||||
label: t('Worker'),
|
||||
field: (row) => row.workerFk,
|
||||
sortable: true,
|
||||
options: workers.value,
|
||||
model: 'workerFk',
|
||||
optionValue: 'id',
|
||||
optionLabel: 'nickname',
|
||||
},
|
||||
{
|
||||
name: 'redelivery',
|
||||
label: t('Redelivery'),
|
||||
field: (row) => row.claimRedeliveryFk,
|
||||
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>
|
||||
<template>
|
||||
<FetchData
|
||||
|
|
@ -88,110 +149,119 @@ const columns = computed(() => [
|
|||
@on-fetch="(data) => (claimRedeliveries = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:where="{ role: 'employee' }"
|
||||
@on-fetch="(data) => (workers = data)"
|
||||
auto-load
|
||||
/>
|
||||
<div class="column items-center">
|
||||
<div class="list">
|
||||
<VnPaginate
|
||||
data-key="ClaimDevelopments"
|
||||
<FormModel
|
||||
url="ClaimDevelopments"
|
||||
:crud="true"
|
||||
:filter="developmentsFilter"
|
||||
auto-load
|
||||
model="claim"
|
||||
ref="claimDevelopmentForm"
|
||||
:data-required="{ claimFk: route.params.id }"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<template #form="{ data, filter }">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:dense="$q.screen.lt.md"
|
||||
:rows="data"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
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>
|
||||
<QSelect
|
||||
:label="col.label"
|
||||
v-model="row.claimReasonFk"
|
||||
:options="claimReasons"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
v-model="row[col.model]"
|
||||
:options="col.options"
|
||||
:option-value="col.optionValue"
|
||||
:option-label="col.optionLabel"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
@filter="
|
||||
(value, update) =>
|
||||
filter(
|
||||
value,
|
||||
update,
|
||||
basicFilter(col.options)
|
||||
)
|
||||
"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-result="{ row }">
|
||||
<QTd auto-width>
|
||||
<QSelect
|
||||
label=""
|
||||
v-model="row.claimResultFk"
|
||||
:options="claimResults"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-responsible="{ row }">
|
||||
<QTd auto-width>
|
||||
<QSelect
|
||||
:label="t('Responsible')"
|
||||
v-model="row.claimResponsibleFk"
|
||||
:options="claimResponsibles"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
/>
|
||||
</QTd>
|
||||
<template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
|
||||
<QCard bordered flat>
|
||||
<QCardSection>
|
||||
<QCheckbox v-model="props.selected" dense />
|
||||
</QCardSection>
|
||||
<QSeparator />
|
||||
<QList dense>
|
||||
<QItem v-for="col in props.cols" :key="col.name">
|
||||
<QItemSection>
|
||||
<QSelect
|
||||
:label="col.label"
|
||||
v-model="props.row[col.model]"
|
||||
:options="col.options"
|
||||
:option-value="col.optionValue"
|
||||
:option-label="col.optionLabel"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
dense
|
||||
@filter="
|
||||
(value, update) =>
|
||||
filter(
|
||||
value,
|
||||
update,
|
||||
basicFilter(col.options)
|
||||
)
|
||||
"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QCard>
|
||||
</div>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</FormModel>
|
||||
</div>
|
||||
</div>
|
||||
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
||||
<q-fab color="purple" icon="keyboard_arrow_up" direction="up">
|
||||
<q-fab-action color="primary" icon="mail" />
|
||||
<q-fab-action color="secondary" icon="alarm" />
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
<QPageSticky position="bottom-right" :offset="[25, 100]">
|
||||
<QBtn
|
||||
fab
|
||||
color="primary"
|
||||
icon="delete"
|
||||
@click="claimDevelopmentForm.remove(selected)"
|
||||
/>
|
||||
</QPageSticky>
|
||||
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
||||
<QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
|
||||
</QPageSticky>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
padding-top: 50px;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
.grid-style-transition {
|
||||
transition: transform 0.28s, background-color 0.28s;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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:
|
||||
Claimed lines: Líneas reclamadas
|
||||
Delivered: Entregado
|
||||
Quantity: Cantidad
|
||||
Claimed: Reclamada
|
||||
Description: Descripció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'
|
||||
Reason: Motivo
|
||||
Result: Consecuencia
|
||||
Responsible: Responsable
|
||||
Worker: Trabajador
|
||||
Redelivery: Devolución
|
||||
</i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue