feat: refs #8224 add context menu forVnTable
gitea/salix-front/pipeline/pr-dev This commit is unstable
Details
gitea/salix-front/pipeline/pr-dev This commit is unstable
Details
This commit is contained in:
parent
e03e6b2305
commit
197ebed39d
|
@ -0,0 +1,90 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useClipboard } from 'src/composables/useClipboard';
|
||||||
|
|
||||||
|
const { copyText } = useClipboard();
|
||||||
|
const target = ref();
|
||||||
|
const qmenuRef = ref();
|
||||||
|
const colField = ref();
|
||||||
|
let colValue = '';
|
||||||
|
let textValue = '';
|
||||||
|
|
||||||
|
const arrayData = defineModel({
|
||||||
|
type: Array,
|
||||||
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
handler,
|
||||||
|
});
|
||||||
|
|
||||||
|
function handler(event) {
|
||||||
|
target.value = event.target;
|
||||||
|
qmenuRef.value.show();
|
||||||
|
const clickedElement = event.target.closest('td');
|
||||||
|
colField.value = clickedElement.getAttribute('data-col-field');
|
||||||
|
colValue = isNaN(+clickedElement.getAttribute('data-col-value'))
|
||||||
|
? clickedElement.getAttribute('data-col-value')
|
||||||
|
: +clickedElement.getAttribute('data-col-value');
|
||||||
|
textValue = getDeepestText(clickedElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDeepestText(node) {
|
||||||
|
const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
|
||||||
|
acceptNode: (textNode) => {
|
||||||
|
return textNode.nodeValue.trim()
|
||||||
|
? NodeFilter.FILTER_ACCEPT
|
||||||
|
: NodeFilter.FILTER_REJECT;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
let lastText = '';
|
||||||
|
while (walker.nextNode()) {
|
||||||
|
lastText = walker.currentNode.nodeValue.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
return lastText;
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectionFilter() {
|
||||||
|
arrayData.value.addFilter({ params: { [colField.value]: colValue } });
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectionExclude() {
|
||||||
|
arrayData.value.addFilter({
|
||||||
|
params: { [colField.value]: { neq: +colValue } },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectionRemoveFilter() {
|
||||||
|
arrayData.value.addFilter({ params: { [colField.value]: undefined } });
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeAllFilters() {
|
||||||
|
arrayData.value.applyFilter({ params: {} });
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyValue() {
|
||||||
|
copyText(textValue, {
|
||||||
|
component: {
|
||||||
|
copyValue: textValue,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<QMenu ref="qmenuRef" :target class="column q-pa-sm" auto-close>
|
||||||
|
<QBtn flat @click="selectionFilter()">{{ $t('Filter by selection') }}</QBtn>
|
||||||
|
<!-- <QBtn flat @click="selectionExclude()">{{ $t('* Exclude selection') }}</QBtn> -->
|
||||||
|
<QBtn flat @click="selectionRemoveFilter()">{{ $t('Remove filter') }}</QBtn>
|
||||||
|
<QBtn flat @click="removeAllFilters()">{{ $t('Remove all filters') }}</QBtn>
|
||||||
|
<QBtn flat @click="copyValue()">{{ $t('Copy value') }}</QBtn>
|
||||||
|
</QMenu>
|
||||||
|
</template>
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Filter by selection: Filtro por selección
|
||||||
|
Exclude selection: Excluir selección
|
||||||
|
Remove filter: Quitar filtro por selección
|
||||||
|
Remove all filters: Eliminar todos los filtros
|
||||||
|
Copy value: Copiar valor
|
||||||
|
</i18n>
|
|
@ -33,6 +33,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
|
||||||
import VnTableFilter from './VnTableFilter.vue';
|
import VnTableFilter from './VnTableFilter.vue';
|
||||||
import { getColAlign } from 'src/composables/getColAlign';
|
import { getColAlign } from 'src/composables/getColAlign';
|
||||||
import RightMenu from '../common/RightMenu.vue';
|
import RightMenu from '../common/RightMenu.vue';
|
||||||
|
import VnContextMenu from './VnContextMenu.vue';
|
||||||
|
|
||||||
const arrayData = useArrayData(useAttrs()['data-key']);
|
const arrayData = useArrayData(useAttrs()['data-key']);
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
|
@ -169,8 +170,9 @@ const orders = ref(useFilterParams($attrs['data-key']).orders);
|
||||||
const app = inject('app');
|
const app = inject('app');
|
||||||
const tableHeight = useTableHeight();
|
const tableHeight = useTableHeight();
|
||||||
|
|
||||||
const editingRow = ref(null);
|
const editingRow = ref();
|
||||||
const editingField = ref(null);
|
const editingField = ref();
|
||||||
|
const contextMenuRef = ref({});
|
||||||
const isTableMode = computed(() => mode.value == TABLE_MODE);
|
const isTableMode = computed(() => mode.value == TABLE_MODE);
|
||||||
const selectRegex = /select/;
|
const selectRegex = /select/;
|
||||||
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
|
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
|
||||||
|
@ -195,6 +197,10 @@ onBeforeMount(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
document.addEventListener('contextmenu', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
contextMenuRef.value.handler(event);
|
||||||
|
});
|
||||||
if ($props.isEditable) document.addEventListener('click', clickHandler);
|
if ($props.isEditable) document.addEventListener('click', clickHandler);
|
||||||
mode.value =
|
mode.value =
|
||||||
quasar.platform.is.mobile && !$props.disableOption?.card
|
quasar.platform.is.mobile && !$props.disableOption?.card
|
||||||
|
@ -777,6 +783,7 @@ const rowCtrlClickFunction = computed(() => {
|
||||||
]"
|
]"
|
||||||
:data-row-index="rowIndex"
|
:data-row-index="rowIndex"
|
||||||
:data-col-field="col?.name"
|
:data-col-field="col?.name"
|
||||||
|
:data-col-value="row?.[col?.name]"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="no-padding no-margin"
|
class="no-padding no-margin"
|
||||||
|
@ -1087,6 +1094,7 @@ const rowCtrlClickFunction = computed(() => {
|
||||||
</template>
|
</template>
|
||||||
</FormModelPopup>
|
</FormModelPopup>
|
||||||
</QDialog>
|
</QDialog>
|
||||||
|
<VnContextMenu ref="contextMenuRef" v-model="arrayData" />
|
||||||
</template>
|
</template>
|
||||||
<i18n>
|
<i18n>
|
||||||
en:
|
en:
|
||||||
|
|
Loading…
Reference in New Issue