diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue index 0de3834ea..e9660e4c2 100644 --- a/src/components/VnTable/VnFilter.vue +++ b/src/components/VnTable/VnFilter.vue @@ -91,7 +91,6 @@ const components = { event: updateEvent, attrs: { ...defaultAttrs, - style: 'min-width: 150px', }, forceAttrs, }, diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index 7ff56860f..de06d4e74 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -31,6 +31,8 @@ import VnLv from 'components/ui/VnLv.vue'; import VnTableOrder from 'src/components/VnTable/VnOrder.vue'; import VnTableFilter from './VnTableFilter.vue'; import { getColAlign } from 'src/composables/getColAlign'; +import RightMenu from '../common/RightMenu.vue'; +import { QItemSection } from 'quasar'; const arrayData = useArrayData(useAttrs()['data-key']); const $props = defineProps({ @@ -414,20 +416,13 @@ async function renderInput(rowId, field, clickedElement) { eventHandlers: { 'update:modelValue': async (value) => { if (isSelect && value) { - row[column.name] = value[column.attrs?.optionValue ?? 'id']; - row[column?.name + 'TextValue'] = - value[column.attrs?.optionLabel ?? 'name']; - await column?.cellEvent?.['update:modelValue']?.( - value, - oldValue, - row, - ); + await updateSelectValue(value, column, row, oldValue); } else row[column.name] = value; await column?.cellEvent?.['update:modelValue']?.(value, oldValue, row); }, keyup: async (event) => { if (event.key === 'Enter') - await destroyInput(rowIndex, field, clickedElement); + await destroyInput(rowId, field, clickedElement); }, keydown: async (event) => { switch (event.key) { @@ -458,6 +453,17 @@ async function renderInput(rowId, field, clickedElement) { node.el?.querySelector('span > div > div').focus(); } +async function updateSelectValue(value, column, row, oldValue) { + row[column.name] = value[column.attrs?.optionValue ?? 'id']; + + row[column?.name + 'VnTableTextValue'] = value[column.attrs?.optionLabel ?? 'name']; + + if (column?.attrs?.find?.label) + row[column?.attrs?.find?.label] = value[column.attrs?.optionLabel ?? 'name']; + + await column?.cellEvent?.['update:modelValue']?.(value, oldValue, row); +} + async function destroyInput(rowIndex, field, clickedElement) { if (!clickedElement) clickedElement = document.querySelector( @@ -520,9 +526,9 @@ function getToggleIcon(value) { } function formatColumnValue(col, row, dashIfEmpty) { - if (col?.format || row[col?.name + 'TextValue']) { - if (selectRegex.test(col?.component) && row[col?.name + 'TextValue']) { - return dashIfEmpty(row[col?.name + 'TextValue']); + if (col?.format || row[col?.name + 'VnTableTextValue']) { + if (selectRegex.test(col?.component) && row[col?.name + 'VnTableTextValue']) { + return dashIfEmpty(row[col?.name + 'VnTableTextValue']); } else { return col.format(row, dashIfEmpty); } @@ -555,19 +561,33 @@ function formatColumnValue(col, row, dashIfEmpty) { } return dashIfEmpty(row[col?.name]); } + function cardClick(_, row) { if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` }); } + +function removeTextValue(data, getChanges) { + let changes = data.updates; + if (!changes) return data; + + for (const change of changes) { + for (const key in change.data) { + if (key.endsWith('VnTableTextValue')) { + delete change.data[key]; + } + } + } + + data.updates = changes.filter((change) => Object.keys(change.data).length > 0); + + if ($attrs?.beforeSaveFn) data = $attrs.beforeSaveFn(data, getChanges); + + return data; +} + - -