refactor: refs #8322 changed Travel component to use VnSection/VnCardBeta
This commit is contained in:
parent
494b8440d6
commit
c1e2e434ac
|
|
@ -765,6 +765,9 @@ supplier:
|
|||
consumption:
|
||||
entry: Entry
|
||||
travel:
|
||||
search: Search travel
|
||||
searchInfo: You can search by travel id or name
|
||||
id: Id
|
||||
travelList:
|
||||
tableVisibleColumns:
|
||||
ref: Reference
|
||||
|
|
|
|||
|
|
@ -757,6 +757,9 @@ supplier:
|
|||
consumption:
|
||||
entry: Entrada
|
||||
travel:
|
||||
search: Buscar envío
|
||||
searchInfo: Buscar envío por id o nombre
|
||||
id: Id
|
||||
travelList:
|
||||
tableVisibleColumns:
|
||||
ref: Referencia
|
||||
|
|
|
|||
|
|
@ -1,48 +1,7 @@
|
|||
<script setup>
|
||||
import VnCard from 'components/common/VnCard.vue';
|
||||
import TravelDescriptor from './TravelDescriptor.vue';
|
||||
import TravelFilter from '../TravelFilter.vue';
|
||||
|
||||
const filter = {
|
||||
fields: [
|
||||
'id',
|
||||
'ref',
|
||||
'shipped',
|
||||
'landed',
|
||||
'totalEntries',
|
||||
'warehouseInFk',
|
||||
'warehouseOutFk',
|
||||
'cargoSupplierFk',
|
||||
'agencyModeFk',
|
||||
],
|
||||
include: [
|
||||
{
|
||||
relation: 'warehouseIn',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'warehouseOut',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
import VnCardBeta from 'src/components/common/VnCardBeta.vue';
|
||||
</script>
|
||||
<template>
|
||||
<VnCard
|
||||
data-key="Travel"
|
||||
base-url="Travels"
|
||||
search-data-key="TravelList"
|
||||
:filter="filter"
|
||||
:descriptor="TravelDescriptor"
|
||||
:filter-panel="TravelFilter"
|
||||
:searchbar-props="{
|
||||
url: 'Travels/filter',
|
||||
searchUrl: 'table',
|
||||
label: 'Search travel',
|
||||
}"
|
||||
/>
|
||||
<VnCardBeta data-key="Travel" base-url="Travels" :descriptor="TravelDescriptor" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@ import { useRouter, useRoute } from 'vue-router';
|
|||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import TravelSummary from './Card/TravelSummary.vue';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
import { toDate } from 'src/filters';
|
||||
import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import TravelFilter from './TravelFilter.vue';
|
||||
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
||||
import VnSection from 'src/components/common/VnSection.vue';
|
||||
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const tableRef = ref();
|
||||
const dataKey = 'TravelList';
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
|
|
@ -189,90 +189,94 @@ const columns = computed(() => [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<VnSearchbar
|
||||
:info="t('You can search by travel id or name')"
|
||||
:label="t('Search travel')"
|
||||
data-key="TravelList"
|
||||
/>
|
||||
<RightMenu>
|
||||
<template #right-panel>
|
||||
<VnSection
|
||||
:data-key="dataKey"
|
||||
:columns="columns"
|
||||
prefix="travel"
|
||||
:array-data-props="{
|
||||
url: 'Travels/filter',
|
||||
order: ['landed DESC'],
|
||||
}"
|
||||
>
|
||||
<template #rightMenu>
|
||||
<TravelFilter data-key="TravelList" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="TravelList"
|
||||
url="Travels/filter"
|
||||
redirect="travel"
|
||||
:create="{
|
||||
urlCreate: 'Travels',
|
||||
title: t('Create Travels'),
|
||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||
formInitialData: {
|
||||
editorFk: entityId,
|
||||
},
|
||||
}"
|
||||
:right-search="false"
|
||||
:user-params="{ daysOnward: 7 }"
|
||||
order="landed DESC"
|
||||
:columns="columns"
|
||||
:is-editable="false"
|
||||
>
|
||||
<template #column-status="{ row }">
|
||||
<div class="row">
|
||||
<QIcon v-if="!!row.isRaid" name="vn:net" color="primary">
|
||||
<QTooltip>
|
||||
{{
|
||||
t('globals.raid', {
|
||||
daysInForward: row.daysInForward,
|
||||
})
|
||||
}}</QTooltip
|
||||
<template #body>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
:data-key="dataKey"
|
||||
:create="{
|
||||
urlCreate: 'Travels',
|
||||
title: t('Create Travels'),
|
||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||
formInitialData: {
|
||||
editorFk: entityId,
|
||||
},
|
||||
}"
|
||||
:right-search="false"
|
||||
:user-params="{ daysOnward: 7 }"
|
||||
|
||||
redirect="travel"
|
||||
:columns="columns"
|
||||
:is-editable="false"
|
||||
>
|
||||
<template #column-status="{ row }">
|
||||
<div class="row">
|
||||
<QIcon v-if="!!row.isRaid" name="vn:net" color="primary">
|
||||
<QTooltip>
|
||||
{{
|
||||
t('globals.raid', {
|
||||
daysInForward: row.daysInForward,
|
||||
})
|
||||
}}</QTooltip
|
||||
>
|
||||
</QIcon>
|
||||
</div>
|
||||
</template>
|
||||
<template #column-shipped="{ row }">
|
||||
<QBadge
|
||||
text-color="black"
|
||||
v-if="getDateQBadgeColor(row.shipped)"
|
||||
:color="getDateQBadgeColor(row.shipped)"
|
||||
>
|
||||
</QIcon>
|
||||
</div>
|
||||
{{ toDate(row.shipped) }}
|
||||
</QBadge>
|
||||
<span v-else>{{ toDate(row.shipped) }}</span>
|
||||
<QIcon
|
||||
name="flight_takeoff"
|
||||
size="sm"
|
||||
:class="{ 'is-active': row.isDelivered }"
|
||||
/>
|
||||
</template>
|
||||
<template #column-landed="{ row }">
|
||||
<QBadge
|
||||
text-color="black"
|
||||
v-if="getDateQBadgeColor(row.landed)"
|
||||
:color="getDateQBadgeColor(row.landed)"
|
||||
>
|
||||
{{ toDate(row.landed) }}
|
||||
</QBadge>
|
||||
<span v-else>{{ toDate(row.landed) }}</span>
|
||||
<QIcon
|
||||
name="flight_land"
|
||||
size="sm"
|
||||
:class="{ 'is-active': row.isReceived }"
|
||||
/>
|
||||
</template>
|
||||
<template #moreFilterPanel="{ params }">
|
||||
<VnInputNumber
|
||||
:label="t('params.scopeDays')"
|
||||
v-model.number="params.scopeDays"
|
||||
@keyup.enter="(evt) => handleScopeDays(evt.target.value)"
|
||||
@remove="handleScopeDays()"
|
||||
class="q-px-xs q-pr-lg"
|
||||
filled
|
||||
dense
|
||||
/>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
<template #column-shipped="{ row }">
|
||||
<QBadge
|
||||
text-color="black"
|
||||
v-if="getDateQBadgeColor(row.shipped)"
|
||||
:color="getDateQBadgeColor(row.shipped)"
|
||||
>
|
||||
{{ toDate(row.shipped) }}
|
||||
</QBadge>
|
||||
<span v-else>{{ toDate(row.shipped) }}</span>
|
||||
<QIcon
|
||||
name="flight_takeoff"
|
||||
size="sm"
|
||||
:class="{ 'is-active': row.isDelivered }"
|
||||
/>
|
||||
</template>
|
||||
<template #column-landed="{ row }">
|
||||
<QBadge
|
||||
text-color="black"
|
||||
v-if="getDateQBadgeColor(row.landed)"
|
||||
:color="getDateQBadgeColor(row.landed)"
|
||||
>
|
||||
{{ toDate(row.landed) }}
|
||||
</QBadge>
|
||||
<span v-else>{{ toDate(row.landed) }}</span>
|
||||
<QIcon
|
||||
name="flight_land"
|
||||
size="sm"
|
||||
:class="{ 'is-active': row.isReceived }"
|
||||
/>
|
||||
</template>
|
||||
<template #moreFilterPanel="{ params }">
|
||||
<VnInputNumber
|
||||
:label="t('params.scopeDays')"
|
||||
v-model.number="params.scopeDays"
|
||||
@keyup.enter="(evt) => handleScopeDays(evt.target.value)"
|
||||
@remove="handleScopeDays()"
|
||||
class="q-px-xs q-pr-lg"
|
||||
filled
|
||||
dense
|
||||
/>
|
||||
</template>
|
||||
</VnTable>
|
||||
</VnSection>
|
||||
</template>
|
||||
<i18n>
|
||||
en:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,80 @@
|
|||
import { RouterView } from 'vue-router';
|
||||
|
||||
const travelCard = {
|
||||
name: 'TravelCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/Travel/Card/TravelCard.vue'),
|
||||
redirect: { name: 'TravelSummary' },
|
||||
meta: {
|
||||
menu: ['TravelBasicData', 'TravelHistory', 'TravelThermographs'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'TravelSummary',
|
||||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
},
|
||||
component: () => import('src/pages/Travel/Card/TravelSummary.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelBasicData',
|
||||
path: 'basic-data',
|
||||
meta: {
|
||||
title: 'basicData',
|
||||
icon: 'vn:settings',
|
||||
},
|
||||
component: () => import('src/pages/Travel/Card/TravelBasicData.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelHistory',
|
||||
path: 'log',
|
||||
meta: {
|
||||
title: 'log',
|
||||
icon: 'history',
|
||||
},
|
||||
component: () => import('src/pages/Travel/Card/TravelLog.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelThermographs',
|
||||
path: 'thermographs/:thermographId?',
|
||||
meta: {
|
||||
title: 'thermographs',
|
||||
icon: 'vn:thermometer',
|
||||
},
|
||||
redirect: {
|
||||
name: 'TravelThermographsIndex',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'TravelThermographsIndex',
|
||||
path: 'index',
|
||||
component: () =>
|
||||
import('src/pages/Travel/Card/TravelThermographs.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelThermographsCreate',
|
||||
path: 'create',
|
||||
props: { viewAction: 'create' },
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Travel/Card/TravelThermographsForm.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'TravelThermographsEdit',
|
||||
path: 'edit',
|
||||
props: { viewAction: 'edit' },
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Travel/Card/TravelThermographsForm.vue'
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
export default {
|
||||
path: '/travel',
|
||||
name: 'Travel',
|
||||
|
|
@ -7,28 +82,33 @@ export default {
|
|||
title: 'travel',
|
||||
icon: 'local_airport',
|
||||
moduleName: 'Travel',
|
||||
menu: ['TravelList', 'ExtraCommunity'],
|
||||
},
|
||||
component: RouterView,
|
||||
redirect: { name: 'TravelMain' },
|
||||
menus: {
|
||||
main: ['TravelList', 'ExtraCommunity'],
|
||||
card: ['TravelBasicData', 'TravelHistory', 'TravelThermographs'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'TravelMain',
|
||||
component: () => import('src/components/common/VnModule.vue'),
|
||||
redirect: { name: 'TravelList' },
|
||||
redirect: { name: 'TravelIndexMain' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'TravelList',
|
||||
meta: {
|
||||
title: 'list',
|
||||
icon: 'view_list',
|
||||
},
|
||||
path: '',
|
||||
name: 'TravelIndexMain',
|
||||
redirect: { name: 'TravelList' },
|
||||
component: () => import('src/pages/Travel/TravelList.vue'),
|
||||
children: [
|
||||
{
|
||||
name: 'TravelList',
|
||||
path: 'list',
|
||||
meta: {
|
||||
title: 'list',
|
||||
icon: 'view_list',
|
||||
},
|
||||
},
|
||||
travelCard,
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'extra-community',
|
||||
|
|
@ -50,76 +130,5 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'TravelCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/Travel/Card/TravelCard.vue'),
|
||||
redirect: { name: 'TravelSummary' },
|
||||
children: [
|
||||
{
|
||||
name: 'TravelSummary',
|
||||
path: 'summary',
|
||||
meta: {
|
||||
title: 'summary',
|
||||
},
|
||||
component: () => import('src/pages/Travel/Card/TravelSummary.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelBasicData',
|
||||
path: 'basic-data',
|
||||
meta: {
|
||||
title: 'basicData',
|
||||
icon: 'vn:settings',
|
||||
},
|
||||
component: () => import('src/pages/Travel/Card/TravelBasicData.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelHistory',
|
||||
path: 'log',
|
||||
meta: {
|
||||
title: 'log',
|
||||
icon: 'history',
|
||||
},
|
||||
component: () => import('src/pages/Travel/Card/TravelLog.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelThermographs',
|
||||
path: 'thermographs/:thermographId?',
|
||||
meta: {
|
||||
title: 'thermographs',
|
||||
icon: 'vn:thermometer',
|
||||
},
|
||||
redirect: {
|
||||
name: 'TravelThermographsIndex',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'TravelThermographsIndex',
|
||||
path: 'index',
|
||||
component: () =>
|
||||
import('src/pages/Travel/Card/TravelThermographs.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelThermographsCreate',
|
||||
path: 'create',
|
||||
props: { viewAction: 'create' },
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Travel/Card/TravelThermographsForm.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'TravelThermographsEdit',
|
||||
path: 'edit',
|
||||
props: { viewAction: 'edit' },
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Travel/Card/TravelThermographsForm.vue'
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue