fix(VnTable): warns
gitea/salix-front/pipeline/pr-dev There was a failure building this commit
Details
gitea/salix-front/pipeline/pr-dev There was a failure building this commit
Details
This commit is contained in:
parent
0ad6b260da
commit
6120c98580
|
|
@ -211,232 +211,244 @@ defineExpose({
|
||||||
</VnFilterPanel>
|
</VnFilterPanel>
|
||||||
</QScrollArea>
|
</QScrollArea>
|
||||||
</QDrawer>
|
</QDrawer>
|
||||||
<CrudModel
|
<!-- class in div to fix warn-->
|
||||||
v-bind="$attrs"
|
<div class="q-px-md">
|
||||||
class="q-px-md"
|
<CrudModel
|
||||||
:limit="20"
|
v-bind="$attrs"
|
||||||
ref="CrudModelRef"
|
:limit="20"
|
||||||
:search-url="searchUrl"
|
ref="CrudModelRef"
|
||||||
:disable-infinite-scroll="mode == 'table'"
|
:search-url="searchUrl"
|
||||||
@save-changes="reload"
|
:disable-infinite-scroll="mode == 'table'"
|
||||||
>
|
@save-changes="reload"
|
||||||
<template #body="{ rows }">
|
>
|
||||||
<QTable
|
<template #body="{ rows }">
|
||||||
class="vnTable"
|
<QTable
|
||||||
:columns="splittedColumns.columns"
|
v-bind="$attrs"
|
||||||
:rows="rows"
|
class="vnTable"
|
||||||
row-key="id"
|
:columns="splittedColumns.columns"
|
||||||
selection="multiple"
|
:rows="rows"
|
||||||
v-model:selected="selected"
|
v-model:selected="selected"
|
||||||
:grid="mode != 'table'"
|
:grid="mode != 'table'"
|
||||||
table-header-class="bg-header"
|
table-header-class="bg-header"
|
||||||
card-container-class="grid-three"
|
card-container-class="grid-three"
|
||||||
flat
|
flat
|
||||||
:style="mode == 'table' && 'max-height: 90vh'"
|
:style="mode == 'table' && 'max-height: 90vh'"
|
||||||
virtual-scroll
|
virtual-scroll
|
||||||
@virtual-scroll="
|
@virtual-scroll="
|
||||||
(event) =>
|
(event) =>
|
||||||
event.index > rows.length - 2 &&
|
event.index > rows.length - 2 &&
|
||||||
CrudModelRef.vnPaginateRef.paginate()
|
CrudModelRef.vnPaginateRef.paginate()
|
||||||
"
|
"
|
||||||
@row-click="(_, row) => rowClickFunction(row)"
|
@row-click="(_, row) => rowClickFunction(row)"
|
||||||
>
|
>
|
||||||
<template #top-left>
|
<template #top-left>
|
||||||
<slot name="top-left"></slot>
|
<slot name="top-left"></slot>
|
||||||
</template>
|
</template>
|
||||||
<template #top-right>
|
<template #top-right>
|
||||||
<!-- <QBtn
|
<!-- <QBtn
|
||||||
icon="visibility"
|
icon="visibility"
|
||||||
title="asd"
|
title="asd"
|
||||||
class="bg-vn-section-color q-mr-md"
|
class="bg-vn-section-color q-mr-md"
|
||||||
dense
|
dense
|
||||||
v-if="mode == 'table'"
|
v-if="mode == 'table'"
|
||||||
/> -->
|
/> -->
|
||||||
<QBtnToggle
|
<QBtnToggle
|
||||||
v-model="mode"
|
v-model="mode"
|
||||||
toggle-color="primary"
|
toggle-color="primary"
|
||||||
class="bg-vn-section-color"
|
class="bg-vn-section-color"
|
||||||
dense
|
dense
|
||||||
:options="tableModes"
|
:options="tableModes"
|
||||||
/>
|
|
||||||
<QBtn
|
|
||||||
icon="filter_alt"
|
|
||||||
title="asd"
|
|
||||||
class="bg-vn-section-color q-ml-md"
|
|
||||||
dense
|
|
||||||
@click="stateStore.toggleRightDrawer()"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #header-cell="{ col }">
|
|
||||||
<QTh auto-width style="min-width: 100px" v-if="$props.columnSearch">
|
|
||||||
<VnTableFilter
|
|
||||||
:column="col"
|
|
||||||
:show-title="true"
|
|
||||||
:data-key="$attrs['data-key']"
|
|
||||||
v-model="params[columnName(col)]"
|
|
||||||
:search-url="searchUrl"
|
|
||||||
/>
|
/>
|
||||||
</QTh>
|
|
||||||
</template>
|
|
||||||
<template #header-cell-tableActions>
|
|
||||||
<QTh auto-width class="sticky" />
|
|
||||||
</template>
|
|
||||||
<template #body-cell-tableStatus="{ col, row }">
|
|
||||||
<QTd auto-width :class="`text-${col.align ?? 'left'}`">
|
|
||||||
<VnTableChip :columns="splittedColumns.columnChips" :row="row">
|
|
||||||
<template #afterChip>
|
|
||||||
<slot name="afterChip" :row="row"></slot>
|
|
||||||
</template>
|
|
||||||
</VnTableChip>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell="{ col, row }">
|
|
||||||
<!-- Columns -->
|
|
||||||
<QTd
|
|
||||||
auto-width
|
|
||||||
class="no-margin q-px-xs"
|
|
||||||
:class="`text-${col.align ?? 'left'}`"
|
|
||||||
>
|
|
||||||
<VnTableColumn
|
|
||||||
:column="col"
|
|
||||||
:row="row"
|
|
||||||
:is-editable="false"
|
|
||||||
v-model="row[col.name]"
|
|
||||||
component-prop="columnField"
|
|
||||||
/>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-tableActions="{ col, row }">
|
|
||||||
<QTd
|
|
||||||
auto-width
|
|
||||||
:class="`text-${col.align ?? 'left'}`"
|
|
||||||
class="sticky no-padding"
|
|
||||||
@click="stopEventPropagation($event)"
|
|
||||||
>
|
|
||||||
<QBtn
|
<QBtn
|
||||||
v-for="(btn, index) of col.actions"
|
icon="filter_alt"
|
||||||
:key="index"
|
title="asd"
|
||||||
:title="btn.title"
|
class="bg-vn-section-color q-ml-md"
|
||||||
:icon="btn.icon"
|
dense
|
||||||
class="q-px-sm"
|
@click="stateStore.toggleRightDrawer()"
|
||||||
flat
|
|
||||||
:class="
|
|
||||||
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
|
|
||||||
"
|
|
||||||
@click="btn.action(row)"
|
|
||||||
/>
|
/>
|
||||||
</QTd>
|
</template>
|
||||||
</template>
|
<template #header-cell="{ col }">
|
||||||
<template #item="{ row, colsMap }">
|
<QTh
|
||||||
<component
|
auto-width
|
||||||
:is="$props.redirect ? 'router-link' : 'span'"
|
style="min-width: 100px"
|
||||||
:to="`/${$props.redirect}/` + row.id"
|
v-if="$props.columnSearch"
|
||||||
>
|
|
||||||
<QCard
|
|
||||||
bordered
|
|
||||||
flat
|
|
||||||
class="row no-wrap justify-between cursor-pointer"
|
|
||||||
@click="
|
|
||||||
(_, row) => {
|
|
||||||
$props.rowClick && $props.rowClick(row);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<QCardSection
|
<VnTableFilter
|
||||||
vertical
|
:column="col"
|
||||||
class="no-margin no-padding"
|
:show-title="true"
|
||||||
:class="colsMap.tableActions ? 'w-80' : 'fit'"
|
:data-key="$attrs['data-key']"
|
||||||
|
v-model="params[columnName(col)]"
|
||||||
|
:search-url="searchUrl"
|
||||||
|
/>
|
||||||
|
</QTh>
|
||||||
|
</template>
|
||||||
|
<template #header-cell-tableActions>
|
||||||
|
<QTh auto-width class="sticky" />
|
||||||
|
</template>
|
||||||
|
<template #body-cell-tableStatus="{ col, row }">
|
||||||
|
<QTd auto-width :class="`text-${col.align ?? 'left'}`">
|
||||||
|
<VnTableChip
|
||||||
|
:columns="splittedColumns.columnChips"
|
||||||
|
:row="row"
|
||||||
|
>
|
||||||
|
<template #afterChip>
|
||||||
|
<slot name="afterChip" :row="row"></slot>
|
||||||
|
</template>
|
||||||
|
</VnTableChip>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #body-cell="{ col, row }">
|
||||||
|
<!-- Columns -->
|
||||||
|
<QTd
|
||||||
|
auto-width
|
||||||
|
class="no-margin q-px-xs"
|
||||||
|
:class="`text-${col.align ?? 'left'}`"
|
||||||
|
>
|
||||||
|
<VnTableColumn
|
||||||
|
:column="col"
|
||||||
|
:row="row"
|
||||||
|
:is-editable="false"
|
||||||
|
v-model="row[col.name]"
|
||||||
|
component-prop="columnField"
|
||||||
|
/>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #body-cell-tableActions="{ col, row }">
|
||||||
|
<QTd
|
||||||
|
auto-width
|
||||||
|
:class="`text-${col.align ?? 'left'}`"
|
||||||
|
class="sticky no-padding"
|
||||||
|
@click="stopEventPropagation($event)"
|
||||||
|
>
|
||||||
|
<QBtn
|
||||||
|
v-for="(btn, index) of col.actions"
|
||||||
|
:key="index"
|
||||||
|
:title="btn.title"
|
||||||
|
:icon="btn.icon"
|
||||||
|
class="q-px-sm"
|
||||||
|
flat
|
||||||
|
:class="
|
||||||
|
btn.isPrimary
|
||||||
|
? 'text-primary-light'
|
||||||
|
: 'color-vn-text '
|
||||||
|
"
|
||||||
|
@click="btn.action(row)"
|
||||||
|
/>
|
||||||
|
</QTd>
|
||||||
|
</template>
|
||||||
|
<template #item="{ row, colsMap }">
|
||||||
|
<component
|
||||||
|
:is="$props.redirect ? 'router-link' : 'span'"
|
||||||
|
:to="`/${$props.redirect}/` + row.id"
|
||||||
|
>
|
||||||
|
<QCard
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
class="row no-wrap justify-between cursor-pointer"
|
||||||
|
@click="
|
||||||
|
(_, row) => {
|
||||||
|
$props.rowClick && $props.rowClick(row);
|
||||||
|
}
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<!-- Chips -->
|
|
||||||
<QCardSection
|
<QCardSection
|
||||||
v-if="splittedColumns.chips.length"
|
vertical
|
||||||
class="no-margin q-px-xs q-py-none"
|
class="no-margin no-padding"
|
||||||
|
:class="colsMap.tableActions ? 'w-80' : 'fit'"
|
||||||
>
|
>
|
||||||
<VnTableChip
|
<!-- Chips -->
|
||||||
:columns="splittedColumns.chips"
|
<QCardSection
|
||||||
:row="row"
|
v-if="splittedColumns.chips.length"
|
||||||
|
class="no-margin q-px-xs q-py-none"
|
||||||
>
|
>
|
||||||
<template #afterChip>
|
<VnTableChip
|
||||||
<slot name="afterChip" :row="row"></slot>
|
:columns="splittedColumns.chips"
|
||||||
</template>
|
:row="row"
|
||||||
</VnTableChip>
|
|
||||||
</QCardSection>
|
|
||||||
<!-- Title -->
|
|
||||||
<QCardSection
|
|
||||||
v-if="splittedColumns.title"
|
|
||||||
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
:title="row[splittedColumns.title.name]"
|
|
||||||
@click="stopEventPropagation($event)"
|
|
||||||
class="cursor-text"
|
|
||||||
>
|
|
||||||
{{ row[splittedColumns.title.name] }}
|
|
||||||
</span>
|
|
||||||
</QCardSection>
|
|
||||||
<!-- Fields -->
|
|
||||||
<QCardSection
|
|
||||||
class="q-pl-sm q-pr-lg q-py-xs"
|
|
||||||
:class="$props.cardClass"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="col of splittedColumns.visible"
|
|
||||||
:key="col.name"
|
|
||||||
class="fields"
|
|
||||||
>
|
|
||||||
<VnLv
|
|
||||||
:label="
|
|
||||||
!col.component &&
|
|
||||||
col.label &&
|
|
||||||
`${col.label}:`
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<template #value>
|
<template #afterChip>
|
||||||
<span
|
<slot name="afterChip" :row="row"></slot>
|
||||||
@click="stopEventPropagation($event)"
|
|
||||||
>
|
|
||||||
<VnTableColumn
|
|
||||||
:column="col"
|
|
||||||
:row="row"
|
|
||||||
:is-editable="false"
|
|
||||||
v-model="row[col.name]"
|
|
||||||
component-prop="columnField"
|
|
||||||
:show-label="true"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
</VnLv>
|
</VnTableChip>
|
||||||
</div>
|
</QCardSection>
|
||||||
|
<!-- Title -->
|
||||||
|
<QCardSection
|
||||||
|
v-if="splittedColumns.title"
|
||||||
|
class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
:title="row[splittedColumns.title.name]"
|
||||||
|
@click="stopEventPropagation($event)"
|
||||||
|
class="cursor-text"
|
||||||
|
>
|
||||||
|
{{ row[splittedColumns.title.name] }}
|
||||||
|
</span>
|
||||||
|
</QCardSection>
|
||||||
|
<!-- Fields -->
|
||||||
|
<QCardSection
|
||||||
|
class="q-pl-sm q-pr-lg q-py-xs"
|
||||||
|
:class="$props.cardClass"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="col of splittedColumns.visible"
|
||||||
|
:key="col.name"
|
||||||
|
class="fields"
|
||||||
|
>
|
||||||
|
<VnLv
|
||||||
|
:label="
|
||||||
|
!col.component &&
|
||||||
|
col.label &&
|
||||||
|
`${col.label}:`
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template #value>
|
||||||
|
<span
|
||||||
|
@click="
|
||||||
|
stopEventPropagation($event)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<VnTableColumn
|
||||||
|
:column="col"
|
||||||
|
:row="row"
|
||||||
|
:is-editable="false"
|
||||||
|
v-model="row[col.name]"
|
||||||
|
component-prop="columnField"
|
||||||
|
:show-label="true"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</VnLv>
|
||||||
|
</div>
|
||||||
|
</QCardSection>
|
||||||
</QCardSection>
|
</QCardSection>
|
||||||
</QCardSection>
|
<!-- Actions -->
|
||||||
<!-- Actions -->
|
<QCardSection
|
||||||
<QCardSection
|
v-if="colsMap.tableActions"
|
||||||
v-if="colsMap.tableActions"
|
class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
|
||||||
class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
|
@click="stopEventPropagation($event)"
|
||||||
@click="stopEventPropagation($event)"
|
>
|
||||||
>
|
<QBtn
|
||||||
<QBtn
|
v-for="(btn, index) of splittedColumns.actions
|
||||||
v-for="(btn, index) of splittedColumns.actions
|
.actions"
|
||||||
.actions"
|
:key="index"
|
||||||
:key="index"
|
:title="btn.title"
|
||||||
:title="btn.title"
|
:icon="btn.icon"
|
||||||
:icon="btn.icon"
|
class="q-pa-xs"
|
||||||
class="q-pa-xs"
|
flat
|
||||||
flat
|
:class="
|
||||||
:class="
|
btn.isPrimary
|
||||||
btn.isPrimary
|
? 'text-primary-light'
|
||||||
? 'text-primary-light'
|
: 'color-vn-text '
|
||||||
: 'color-vn-text '
|
"
|
||||||
"
|
@click="btn.action(row)"
|
||||||
@click="btn.action(row)"
|
/>
|
||||||
/>
|
</QCardSection>
|
||||||
</QCardSection>
|
</QCard>
|
||||||
</QCard>
|
</component>
|
||||||
</component>
|
</template>
|
||||||
</template>
|
</QTable>
|
||||||
</QTable>
|
</template>
|
||||||
</template>
|
</CrudModel>
|
||||||
</CrudModel>
|
</div>
|
||||||
<QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
|
<QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
|
||||||
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
|
<QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
|
||||||
<QTooltip>
|
<QTooltip>
|
||||||
|
|
@ -445,7 +457,7 @@ defineExpose({
|
||||||
</QPageSticky>
|
</QPageSticky>
|
||||||
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
|
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
|
||||||
<FormModelPopup
|
<FormModelPopup
|
||||||
v-bind="{ ...$attrs, ...create }"
|
v-bind="create"
|
||||||
:model="$attrs['data-key'] + 'Create'"
|
:model="$attrs['data-key'] + 'Create'"
|
||||||
@on-data-saved="(_, res) => create.onDataSaved(res)"
|
@on-data-saved="(_, res) => create.onDataSaved(res)"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -382,7 +382,6 @@ function handleLocation(data, location) {
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
data-key="CustomerExtendedList"
|
data-key="CustomerExtendedList"
|
||||||
url="Clients/extendedListFilter"
|
url="Clients/extendedListFilter"
|
||||||
url-create="Clients/createWithUser"
|
|
||||||
:create="{
|
:create="{
|
||||||
urlCreate: 'Clients/createWithUser',
|
urlCreate: 'Clients/createWithUser',
|
||||||
title: 'Create client',
|
title: 'Create client',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue