forked from verdnatura/salix-front
feat(VnTable): refs #6825 dinamic columns
This commit is contained in:
parent
65c22a7103
commit
a715122a66
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, computed, defineModel } from 'vue';
|
||||
import { ref, onMounted, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
|
@ -13,13 +13,16 @@ import VnTableColumn from 'components/common/VnTableColumn.vue';
|
|||
import VnTableFilter from 'components/common/VnTableFilter.vue';
|
||||
import VnTableChip from 'components/common/VnTableChip.vue';
|
||||
|
||||
const columns = defineModel();
|
||||
const $props = defineProps({
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
defaultMode: {
|
||||
type: String,
|
||||
default: 'card', // 'table', 'card'
|
||||
},
|
||||
reponsive: {
|
||||
responsive: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
|
@ -53,6 +56,7 @@ const selected = ref([]);
|
|||
const params = ref({});
|
||||
const VnPaginateRef = ref();
|
||||
const showForm = ref(false);
|
||||
const splittedColumns = ref({ columns: [] });
|
||||
const tableModes = [
|
||||
{
|
||||
icon: 'view_column',
|
||||
|
|
@ -72,30 +76,52 @@ onMounted(() => {
|
|||
stateStore.rightDrawer = true;
|
||||
});
|
||||
|
||||
const cardTemplate = computed(() => {
|
||||
const chips = [];
|
||||
const visible = [];
|
||||
const create = [];
|
||||
let title;
|
||||
let actions;
|
||||
for (const col of columns.value) {
|
||||
watch(
|
||||
() => $props.columns,
|
||||
(value) => splitColumns(value),
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
function splitColumns(columns) {
|
||||
splittedColumns.value = {
|
||||
columns: [],
|
||||
chips: [],
|
||||
create: [],
|
||||
visible: [],
|
||||
};
|
||||
|
||||
for (const col of columns) {
|
||||
if (!col) continue;
|
||||
if (col.field == 'tableActions') {
|
||||
actions = col;
|
||||
splittedColumns.value.actions = col;
|
||||
}
|
||||
if (col.chip) {
|
||||
if (!chips.length) setChipColumn();
|
||||
chips.push(col);
|
||||
splittedColumns.value.chips.push(col);
|
||||
}
|
||||
if (col.isTitle) {
|
||||
title = col;
|
||||
splittedColumns.value.title = col;
|
||||
}
|
||||
if (col.create) {
|
||||
create.push(col);
|
||||
splittedColumns.value.create.push(col);
|
||||
}
|
||||
if (col.cardVisible) visible.push(col);
|
||||
if (col.cardVisible) splittedColumns.value.visible.push(col);
|
||||
splittedColumns.value.columns.push(col);
|
||||
}
|
||||
return { chips, title, visible, actions, create };
|
||||
});
|
||||
// Status column
|
||||
if (splittedColumns.value.chips.length) {
|
||||
splittedColumns.value.columnChips = splittedColumns.value.chips.filter(
|
||||
(c) => !c.isId
|
||||
);
|
||||
if (splittedColumns.value.columnChips.length)
|
||||
splittedColumns.value.columns.unshift({
|
||||
align: 'left',
|
||||
field: 'status',
|
||||
label: t('status'),
|
||||
name: 'status',
|
||||
customFilter: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const rowClickFunction = computed(() => {
|
||||
if ($props.rowClick) return $props.rowClick;
|
||||
|
|
@ -108,18 +134,6 @@ function stopEventPropagation(event) {
|
|||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function setChipColumn() {
|
||||
console.log('SETTING', columns.value);
|
||||
columns.value.unshift({
|
||||
align: 'left',
|
||||
field: 'status',
|
||||
label: t('status'),
|
||||
name: 'status',
|
||||
customFilter: false,
|
||||
});
|
||||
console.log('SETTING', columns.value);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
|
|
@ -133,12 +147,16 @@ function setChipColumn() {
|
|||
<VnTableFilter
|
||||
:column="col"
|
||||
:data-key="$attrs['data-key']"
|
||||
v-for="col of columns"
|
||||
v-for="col of splittedColumns.columns"
|
||||
:key="col.id"
|
||||
v-model="params[col.columnFilter?.field ?? col.field]"
|
||||
/>
|
||||
</template>
|
||||
<slot name="moreFilterPanel" :params="params" :columns="columns" />
|
||||
<slot
|
||||
name="moreFilterPanel"
|
||||
:params="params"
|
||||
:columns="splittedColumns.columns"
|
||||
/>
|
||||
</VnFilterPanel>
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
|
|
@ -153,7 +171,7 @@ function setChipColumn() {
|
|||
<!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'" -->
|
||||
<QTable
|
||||
class="vnTable"
|
||||
:columns="columns"
|
||||
:columns="splittedColumns.columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
|
|
@ -196,7 +214,7 @@ function setChipColumn() {
|
|||
/>
|
||||
</template>
|
||||
<template #header-cell="{ col }">
|
||||
<QTh auto-width style="min-width: 100px">
|
||||
<QTh auto-width style="min-width: 100px" v-if="$props.columnSearch">
|
||||
<VnTableFilter
|
||||
:column="col"
|
||||
:show-title="true"
|
||||
|
|
@ -205,9 +223,9 @@ function setChipColumn() {
|
|||
/>
|
||||
</QTh>
|
||||
</template>
|
||||
<template #body-cell-chips="{ col }">
|
||||
<template #body-cell-status="{ col, row }">
|
||||
<QTd auto-width :class="`text-${col.align ?? 'left'}`">
|
||||
<VnTableChip :columns="cardTemplate.chips" :row="row">
|
||||
<VnTableChip :columns="splittedColumns.columnChips" :row="row">
|
||||
<template #afterChip>
|
||||
<slot name="afterChip" :row="row"></slot>
|
||||
</template>
|
||||
|
|
@ -243,10 +261,13 @@ function setChipColumn() {
|
|||
<QCardSection vertical class="no-margin no-padding w-80">
|
||||
<!-- Chips -->
|
||||
<QCardSection
|
||||
v-if="cardTemplate.chips.length"
|
||||
v-if="splittedColumns.chips.length"
|
||||
class="no-margin q-px-xs q-py-none"
|
||||
>
|
||||
<VnTableChip :columns="cardTemplate.chips" :row="row">
|
||||
<VnTableChip
|
||||
:columns="splittedColumns.chips"
|
||||
:row="row"
|
||||
>
|
||||
<template #afterChip>
|
||||
<slot name="afterChip" :row="row"></slot>
|
||||
</template>
|
||||
|
|
@ -254,20 +275,20 @@ function setChipColumn() {
|
|||
</QCardSection>
|
||||
<!-- Title -->
|
||||
<QCardSection
|
||||
v-if="cardTemplate.title"
|
||||
v-if="splittedColumns.title"
|
||||
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
|
||||
>
|
||||
<span
|
||||
:title="row[cardTemplate.title.field]"
|
||||
:title="row[splittedColumns.title.field]"
|
||||
@click="stopEventPropagation($event)"
|
||||
class="cursor-text"
|
||||
>{{ row[cardTemplate.title.field] }}</span
|
||||
>{{ row[splittedColumns.title.field] }}</span
|
||||
>
|
||||
</QCardSection>
|
||||
<!-- Fields -->
|
||||
<QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
|
||||
<div
|
||||
v-for="col of cardTemplate.visible"
|
||||
v-for="col of splittedColumns.visible"
|
||||
:key="col.field"
|
||||
class="fields"
|
||||
>
|
||||
|
|
@ -320,7 +341,7 @@ function setChipColumn() {
|
|||
<template #form-inputs="{ data }">
|
||||
<div class="grid-create">
|
||||
<VnTableColumn
|
||||
v-for="column of cardTemplate.create"
|
||||
v-for="column of splittedColumns.create"
|
||||
:key="column.field"
|
||||
:column="column"
|
||||
:row="{}"
|
||||
|
|
|
|||
|
|
@ -272,6 +272,7 @@ const columns = computed(() => [
|
|||
chip: {
|
||||
condition: () => true,
|
||||
},
|
||||
isId: true,
|
||||
columnFilter: {
|
||||
component: 'select',
|
||||
field: 'search',
|
||||
|
|
@ -581,7 +582,7 @@ function handleLocation(data, location) {
|
|||
},
|
||||
}"
|
||||
order="id DESC"
|
||||
v-model="columns"
|
||||
:columns="columns"
|
||||
default-mode="table"
|
||||
redirect="customer"
|
||||
auto-load
|
||||
|
|
|
|||
Loading…
Reference in New Issue