verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 93 Releases Wiki Activity

refactor: refs #8606 modified table width and order
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Jon Elias 2025-02-17 12:57:37 +01:00
parent 7c6112c896
commit 8b6c0c05d6
1 changed files with 88 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/pages/Zone/ZoneList.vue
View File

@ -65,7 +65,6 @@ const tableFilter = {
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('list.id'),
chip: {
@ -75,6 +74,8 @@ const columns = computed(() => [
columnFilter: {
inWhere: true,
},
columnClass: 'shrink-column',
component: 'number',
},
{
align: 'left',
@ -106,7 +107,6 @@ const columns = computed(() => [
format: (row, dashIfEmpty) => dashIfEmpty(row?.agencyMode?.name),
},
{
align: 'left',
name: 'price',
label: t('list.price'),
cardVisible: true,
@ -114,6 +114,8 @@ const columns = computed(() => [
columnFilter: {
inWhere: true,
},
columnClass: 'shrink-column',
component: 'number',
},
{
align: 'center',
@ -177,68 +179,73 @@ function formatRow(row) {
<ZoneFilterPanel data-key="ZonesList" />
</template>
</RightMenu>
<VnTable
ref="tableRef"
data-key="ZonesList"
url="Zones"
:create="{
urlCreate: 'Zones',
title: t('list.createZone'),
onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
formInitialData: {},
}"
:user-filter="tableFilter"
:columns="columns"
redirect="zone"
:right-search="false"
table-height="85vh"
>
<template #column-addressFk="{ row }">
{{ dashIfEmpty(formatRow(row)) }}
</template>
<template #more-create-dialog="{ data }">
<VnSelect
url="AgencyModes"
v-model="data.agencyModeFk"
option-value="id"
option-label="name"
:label="t('list.agency')"
/>
<VnInput
v-model="data.price"
:label="t('list.price')"
min="0"
type="number"
required="true"
/>
<VnInput
v-model="data.bonus"
:label="t('zone.bonus')"
min="0"
type="number"
/>
<VnInput
v-model="data.travelingDays"
:label="t('zone.travelingDays')"
type="number"
min="0"
/>
<VnInputTime v-model="data.hour" :label="t('list.close')" />
<VnSelect
url="Warehouses"
v-model="data.warehouseFK"
option-value="id"
option-label="name"
:label="t('list.warehouse')"
:options="warehouseOptions"
/>
<QCheckbox
v-model="data.isVolumetric"
:label="t('list.isVolumetric')"
:toggle-indeterminate="false"
/>
</template>
</VnTable>
<div class="table-container">
<div class="column items-center">
<VnTable
ref="tableRef"
data-key="ZonesList"
url="Zones"
:create="{
urlCreate: 'Zones',
title: t('list.createZone'),
onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
formInitialData: {},
}"
:user-filter="tableFilter"
:columns="columns"
redirect="zone"
:right-search="false"
table-height="85vh"
order="id ASC"
>
<template #column-addressFk="{ row }">
{{ dashIfEmpty(formatRow(row)) }}
</template>
<template #more-create-dialog="{ data }">
<VnSelect
url="AgencyModes"
v-model="data.agencyModeFk"
option-value="id"
option-label="name"
:label="t('list.agency')"
/>
<VnInput
v-model="data.price"
:label="t('list.price')"
min="0"
type="number"
required="true"
/>
<VnInput
v-model="data.bonus"
:label="t('zone.bonus')"
min="0"
type="number"
/>
<VnInput
v-model="data.travelingDays"
:label="t('zone.travelingDays')"
type="number"
min="0"
/>
<VnInputTime v-model="data.hour" :label="t('list.close')" />
<VnSelect
url="Warehouses"
v-model="data.warehouseFK"
option-value="id"
option-label="name"
:label="t('list.warehouse')"
:options="warehouseOptions"
/>
<QCheckbox
v-model="data.isVolumetric"
:label="t('list.isVolumetric')"
:toggle-indeterminate="false"
/>
</template>
</VnTable>
</div>
</div>
</template>
<i18n>
@ -246,3 +253,20 @@ es:
Search zone: Buscar zona
You can search zones by id or name: Puedes buscar zonas por id o nombre
</i18n>
<style lang="scss" scoped>
.table-container {
display: flex;
justify-content: center;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
min-width: 70%;
}
:deep(.shrink-column) {
width: 8%;
}
</style>