forked from verdnatura/salix-front
feat: handle create row
This commit is contained in:
parent
e592a76946
commit
9bb298bbeb
|
@ -189,11 +189,11 @@ async function saveChanges(data) {
|
|||
});
|
||||
}
|
||||
|
||||
async function insert() {
|
||||
async function insert(pushData = $props.dataRequired) {
|
||||
const $index = formData.value.length
|
||||
? formData.value[formData.value.length - 1].$index + 1
|
||||
: 0;
|
||||
formData.value.push(Object.assign({ $index }, $props.dataRequired));
|
||||
formData.value.push(Object.assign({ $index }, pushData));
|
||||
hasChanges.value = true;
|
||||
}
|
||||
|
||||
|
|
|
@ -89,6 +89,10 @@ const $props = defineProps({
|
|||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
crudModel: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
tableHeight: {
|
||||
type: String,
|
||||
default: '90vh',
|
||||
|
@ -369,6 +373,7 @@ function handleOnDataSaved(_, res) {
|
|||
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
|
||||
</template>
|
||||
<template #body="{ rows }">
|
||||
{{ rows }}
|
||||
<QTable
|
||||
v-bind="table"
|
||||
class="vnTable"
|
||||
|
@ -384,6 +389,7 @@ function handleOnDataSaved(_, res) {
|
|||
@virtual-scroll="
|
||||
(event) =>
|
||||
event.index > rows.length - 2 &&
|
||||
($props.crudModel?.paginate ?? true) &&
|
||||
CrudModelRef.vnPaginateRef.paginate()
|
||||
"
|
||||
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
|
||||
|
|
|
@ -40,6 +40,8 @@ globals:
|
|||
noChanges: No changes to save
|
||||
changesToSave: You have changes pending to save
|
||||
confirmRemove: You are about to delete this row. Are you sure?
|
||||
rowWillBeRemoved: This row will be removed
|
||||
sureToContinue: Are you sure you want to continue?
|
||||
rowAdded: Row added
|
||||
rowRemoved: Row removed
|
||||
pleaseWait: Please wait...
|
||||
|
|
|
@ -39,6 +39,8 @@ globals:
|
|||
noChanges: Sin cambios que guardar
|
||||
changesToSave: Tienes cambios pendientes de guardar
|
||||
confirmRemove: Vas a eliminar este registro. ¿Continuar?
|
||||
rowWillBeRemoved: Esta linea se eliminará
|
||||
sureToContinue: ¿Seguro que quieres continuar?
|
||||
rowAdded: Fila añadida
|
||||
rowRemoved: Fila eliminada
|
||||
pleaseWait: Por favor espera...
|
||||
|
|
|
@ -55,14 +55,12 @@ const exprBuilder = (param, value) => {
|
|||
|
||||
const params = reactive({});
|
||||
const defaultColumnAttrs = {
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
align: 'right',
|
||||
sortable: false,
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
label: t('item.fixedPrice.itemId'),
|
||||
name: 'itemId',
|
||||
...defaultColumnAttrs,
|
||||
|
@ -72,6 +70,7 @@ const columns = computed(() => [
|
|||
component: 'input',
|
||||
type: 'number',
|
||||
},
|
||||
columnClass: 'shrink',
|
||||
},
|
||||
{
|
||||
label: t('globals.name'),
|
||||
|
@ -98,8 +97,8 @@ const columns = computed(() => [
|
|||
|
||||
{
|
||||
label: t('item.fixedPrice.minPrice'),
|
||||
class: 'expand',
|
||||
field: 'minPrice',
|
||||
columnClass: 'shrink',
|
||||
name: 'minPrice',
|
||||
...defaultColumnAttrs,
|
||||
cardVisible: true,
|
||||
|
@ -116,17 +115,23 @@ const columns = computed(() => [
|
|||
format: ({ started }) => toDate(started),
|
||||
cardVisible: true,
|
||||
...defaultColumnAttrs,
|
||||
component: 'date',
|
||||
columnClass: 'shrink',
|
||||
columnField: {
|
||||
component: 'date',
|
||||
class: 'shrink',
|
||||
},
|
||||
columnClass: 'expand',
|
||||
},
|
||||
{
|
||||
label: t('item.fixedPrice.ended'),
|
||||
field: 'ended',
|
||||
name: 'ended',
|
||||
...defaultColumnAttrs,
|
||||
columnClass: 'shrink',
|
||||
cardVisible: true,
|
||||
component: 'date',
|
||||
columnField: {
|
||||
component: 'date',
|
||||
class: 'shrink',
|
||||
},
|
||||
columnClass: 'expand',
|
||||
format: (row) => toDate(row.ended),
|
||||
},
|
||||
|
||||
|
@ -135,7 +140,14 @@ const columns = computed(() => [
|
|||
field: 'warehouseFk',
|
||||
name: 'warehouseFk',
|
||||
...defaultColumnAttrs,
|
||||
component: 'select',
|
||||
columnClass: 'shrink',
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
},
|
||||
columnField: {
|
||||
component: 'select',
|
||||
class: 'expand',
|
||||
},
|
||||
attrs: {
|
||||
options: warehousesOptions,
|
||||
},
|
||||
|
@ -230,8 +242,8 @@ function checkLastVisibleRow() {
|
|||
|
||||
if (lastVisibleRow) {
|
||||
console.log('Última fila visible:', lastVisibleRow);
|
||||
return lastVisibleRow;
|
||||
}
|
||||
return lastVisibleRow;
|
||||
}
|
||||
const addRow = (original = null) => {
|
||||
// const original = checkLastVisibleRow();
|
||||
|
@ -262,33 +274,34 @@ const addRow = (original = null) => {
|
|||
|
||||
// lastItem.value = {
|
||||
copy = {
|
||||
id: 0,
|
||||
started: today,
|
||||
ended: nextWeek,
|
||||
hasMinPrice: 0,
|
||||
$index: 0,
|
||||
};
|
||||
|
||||
// return;
|
||||
}
|
||||
|
||||
copy = {
|
||||
$index: original.$index - 1,
|
||||
itemFk: original.itemFk,
|
||||
name: original.name,
|
||||
subName: original.subName,
|
||||
value5: original.value5,
|
||||
value6: original.value6,
|
||||
value7: original.value7,
|
||||
value8: original.value8,
|
||||
value9: original.value9,
|
||||
value10: original.value10,
|
||||
warehouseFk: original.warehouseFk,
|
||||
rate2: original.rate2,
|
||||
rate3: original.rate3,
|
||||
hasMinPrice: original.hasMinPrice,
|
||||
minPrice: original.minPrice,
|
||||
started: Date.vnNew(),
|
||||
ended: Date.vnNew(),
|
||||
};
|
||||
} else
|
||||
copy = {
|
||||
$index: original.$index - 1,
|
||||
itemFk: original.itemFk,
|
||||
name: original.name,
|
||||
subName: original.subName,
|
||||
value5: original.value5,
|
||||
value6: original.value6,
|
||||
value7: original.value7,
|
||||
value8: original.value8,
|
||||
value9: original.value9,
|
||||
value10: original.value10,
|
||||
warehouseFk: original.warehouseFk,
|
||||
rate2: original.rate2,
|
||||
rate3: original.rate3,
|
||||
hasMinPrice: original.hasMinPrice,
|
||||
minPrice: original.minPrice,
|
||||
started: Date.vnNew(),
|
||||
ended: Date.vnNew(),
|
||||
};
|
||||
// lastItem.value = lastItemCopy;
|
||||
// tableRef.value.create.onDataSaved(lastItem);
|
||||
// nextTick(() => {
|
||||
|
@ -330,13 +343,14 @@ const removeFuturePrice = async () => {
|
|||
const quasar = useQuasar();
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import CrudModel from 'src/components/CrudModel.vue';
|
||||
|
||||
function confirmRemove(item) {
|
||||
quasar.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
title: t('This row will be removed'),
|
||||
message: t('Do you want to remove?'),
|
||||
title: t('globals.rowWillBeRemoved'),
|
||||
message: t('globals.confirmDeletion'),
|
||||
promise: async () => removePrice(item.id),
|
||||
},
|
||||
});
|
||||
|
@ -345,8 +359,8 @@ function confirmRemoveFuturePrice(item) {
|
|||
quasar.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
title: t('This row will be removed'),
|
||||
message: t('Do you want to remove?'),
|
||||
title: t('globals.rowWillBeRemoved'),
|
||||
message: t('globals.confirmDeletion'),
|
||||
promise: async () => removeFuturePrice(item.id),
|
||||
},
|
||||
});
|
||||
|
@ -369,9 +383,14 @@ onMounted(async () => {
|
|||
function handleOnDataSave({ CrudModelRef }) {
|
||||
const { original, copy } = addRow(CrudModelRef.formData[checkLastVisibleRow()]);
|
||||
// CrudModelRef.formData.unshift(roww);
|
||||
CrudModelRef.formData.splice(original.$index, 0, copy);
|
||||
if (original) {
|
||||
CrudModelRef.formData.splice(original?.$index ?? 0, 0, copy);
|
||||
} else {
|
||||
CrudModelRef.insert(copy);
|
||||
// CrudModelRef.reload();
|
||||
}
|
||||
nextTick(() => {
|
||||
highlightNewRow(original);
|
||||
highlightNewRow(original ?? { $index: 0 });
|
||||
});
|
||||
}
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
|
@ -436,6 +455,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
'row-key': 'id',
|
||||
selection: 'multiple',
|
||||
}"
|
||||
:crud-model="{
|
||||
paginate: false,
|
||||
}"
|
||||
v-model:selected="rowsSelected"
|
||||
:row-click="saveOnRowChange"
|
||||
:create-as-dialog="false"
|
||||
|
@ -511,7 +533,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
</template>
|
||||
<template #column-minPrice="props">
|
||||
<QTd class="col">
|
||||
<div class="row" style="width: 130px">
|
||||
<div class="row" style="width: 115px">
|
||||
<QCheckbox
|
||||
:model-value="props.row.hasMinPrice"
|
||||
@update:model-value="updateMinPrice($event, props)"
|
||||
|
@ -567,8 +589,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
</QTd>
|
||||
</template>
|
||||
<template #column-warehouseFk="props">
|
||||
<QTd class="col" style="max-width: 180px">
|
||||
<QTd class="col">
|
||||
<VnSelect
|
||||
style="max-width: 150px"
|
||||
:options="warehousesOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
|
@ -615,13 +638,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
.q-table th,
|
||||
.q-table td {
|
||||
padding-inline: 5px !important;
|
||||
// text-align: -webkit-right;
|
||||
}
|
||||
.q-table tbody td {
|
||||
max-width: none;
|
||||
|
||||
.q-td.col {
|
||||
& .vnInputDate {
|
||||
min-width: 130px;
|
||||
min-width: 90px;
|
||||
}
|
||||
& div.row {
|
||||
& .q-checkbox {
|
||||
|
@ -656,7 +680,6 @@ tbody tr.highlight .q-td {
|
|||
es:
|
||||
Add fixed price: Añadir precio fijado
|
||||
Edit fixed price(s): Editar precio(s) fijado(s)
|
||||
This row will be removed: Esta linea se eliminará
|
||||
Are you sure you want to continue?: ¿Seguro que quieres continuar?
|
||||
Delete: Eliminar
|
||||
</i18n>
|
||||
|
|
|
@ -14,10 +14,6 @@ defineProps({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
warehousesOptions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
import { useRoute } from 'vue-router';
|
||||
const route = useRoute();
|
||||
|
@ -39,6 +35,12 @@ const pushParam = (param) => ({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
@on-fetch="(data) => (warehousesOptions = data)"
|
||||
auto-load
|
||||
url="Warehouses"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||
/>
|
||||
<FetchData
|
||||
url="TicketRequests/getItemTypeWorker"
|
||||
limit="30"
|
||||
|
|
|
@ -23,7 +23,7 @@ function confirmRemove() {
|
|||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
title: t('confirmDeletion'),
|
||||
title: t('globals.confirmDeletion'),
|
||||
message: t('confirmDeletionMessage'),
|
||||
promise: remove,
|
||||
},
|
||||
|
@ -52,12 +52,10 @@ async function remove() {
|
|||
<i18n>
|
||||
en:
|
||||
deleteOrder: Delete order
|
||||
confirmDeletion: Confirm deletion
|
||||
confirmDeletionMessage: Are you sure you want to delete this order?
|
||||
|
||||
es:
|
||||
deleteOrder: Eliminar pedido
|
||||
confirmDeletion: Confirmar eliminación
|
||||
confirmDeletionMessage: Seguro que quieres eliminar este pedido?
|
||||
|
||||
</i18n>
|
||||
|
|
Loading…
Reference in New Issue