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:
|
consumption:
|
||||||
entry: Entry
|
entry: Entry
|
||||||
travel:
|
travel:
|
||||||
|
search: Search travel
|
||||||
|
searchInfo: You can search by travel id or name
|
||||||
|
id: Id
|
||||||
travelList:
|
travelList:
|
||||||
tableVisibleColumns:
|
tableVisibleColumns:
|
||||||
ref: Reference
|
ref: Reference
|
||||||
|
|
|
@ -757,6 +757,9 @@ supplier:
|
||||||
consumption:
|
consumption:
|
||||||
entry: Entrada
|
entry: Entrada
|
||||||
travel:
|
travel:
|
||||||
|
search: Buscar envío
|
||||||
|
searchInfo: Buscar envío por id o nombre
|
||||||
|
id: Id
|
||||||
travelList:
|
travelList:
|
||||||
tableVisibleColumns:
|
tableVisibleColumns:
|
||||||
ref: Referencia
|
ref: Referencia
|
||||||
|
|
|
@ -1,48 +1,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import VnCard from 'components/common/VnCard.vue';
|
|
||||||
import TravelDescriptor from './TravelDescriptor.vue';
|
import TravelDescriptor from './TravelDescriptor.vue';
|
||||||
import TravelFilter from '../TravelFilter.vue';
|
import VnCardBeta from 'src/components/common/VnCardBeta.vue';
|
||||||
|
|
||||||
const filter = {
|
|
||||||
fields: [
|
|
||||||
'id',
|
|
||||||
'ref',
|
|
||||||
'shipped',
|
|
||||||
'landed',
|
|
||||||
'totalEntries',
|
|
||||||
'warehouseInFk',
|
|
||||||
'warehouseOutFk',
|
|
||||||
'cargoSupplierFk',
|
|
||||||
'agencyModeFk',
|
|
||||||
],
|
|
||||||
include: [
|
|
||||||
{
|
|
||||||
relation: 'warehouseIn',
|
|
||||||
scope: {
|
|
||||||
fields: ['name'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
relation: 'warehouseOut',
|
|
||||||
scope: {
|
|
||||||
fields: ['name'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCardBeta data-key="Travel" base-url="Travels" :descriptor="TravelDescriptor" />
|
||||||
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',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -5,18 +5,18 @@ import { useRouter, useRoute } from 'vue-router';
|
||||||
import VnTable from 'components/VnTable/VnTable.vue';
|
import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import TravelSummary from './Card/TravelSummary.vue';
|
import TravelSummary from './Card/TravelSummary.vue';
|
||||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
|
||||||
import { toDate } from 'src/filters';
|
import { toDate } from 'src/filters';
|
||||||
import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
|
import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
|
||||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
|
||||||
import TravelFilter from './TravelFilter.vue';
|
import TravelFilter from './TravelFilter.vue';
|
||||||
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
||||||
|
import VnSection from 'src/components/common/VnSection.vue';
|
||||||
|
|
||||||
const { viewSummary } = useSummaryDialog();
|
const { viewSummary } = useSummaryDialog();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const tableRef = ref();
|
const tableRef = ref();
|
||||||
|
const dataKey = 'TravelList';
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
id: {
|
id: {
|
||||||
type: Number,
|
type: Number,
|
||||||
|
@ -189,90 +189,94 @@ const columns = computed(() => [
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VnSearchbar
|
<VnSection
|
||||||
:info="t('You can search by travel id or name')"
|
:data-key="dataKey"
|
||||||
:label="t('Search travel')"
|
:columns="columns"
|
||||||
data-key="TravelList"
|
prefix="travel"
|
||||||
/>
|
:array-data-props="{
|
||||||
<RightMenu>
|
url: 'Travels/filter',
|
||||||
<template #right-panel>
|
order: ['landed DESC'],
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template #rightMenu>
|
||||||
<TravelFilter data-key="TravelList" />
|
<TravelFilter data-key="TravelList" />
|
||||||
</template>
|
</template>
|
||||||
</RightMenu>
|
<template #body>
|
||||||
<VnTable
|
<VnTable
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
data-key="TravelList"
|
:data-key="dataKey"
|
||||||
url="Travels/filter"
|
:create="{
|
||||||
redirect="travel"
|
urlCreate: 'Travels',
|
||||||
:create="{
|
title: t('Create Travels'),
|
||||||
urlCreate: 'Travels',
|
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||||
title: t('Create Travels'),
|
formInitialData: {
|
||||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
editorFk: entityId,
|
||||||
formInitialData: {
|
},
|
||||||
editorFk: entityId,
|
}"
|
||||||
},
|
:right-search="false"
|
||||||
}"
|
:user-params="{ daysOnward: 7 }"
|
||||||
:right-search="false"
|
|
||||||
:user-params="{ daysOnward: 7 }"
|
redirect="travel"
|
||||||
order="landed DESC"
|
:columns="columns"
|
||||||
:columns="columns"
|
:is-editable="false"
|
||||||
:is-editable="false"
|
>
|
||||||
>
|
<template #column-status="{ row }">
|
||||||
<template #column-status="{ row }">
|
<div class="row">
|
||||||
<div class="row">
|
<QIcon v-if="!!row.isRaid" name="vn:net" color="primary">
|
||||||
<QIcon v-if="!!row.isRaid" name="vn:net" color="primary">
|
<QTooltip>
|
||||||
<QTooltip>
|
{{
|
||||||
{{
|
t('globals.raid', {
|
||||||
t('globals.raid', {
|
daysInForward: row.daysInForward,
|
||||||
daysInForward: row.daysInForward,
|
})
|
||||||
})
|
}}</QTooltip
|
||||||
}}</QTooltip
|
>
|
||||||
|
</QIcon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #column-shipped="{ row }">
|
||||||
|
<QBadge
|
||||||
|
text-color="black"
|
||||||
|
v-if="getDateQBadgeColor(row.shipped)"
|
||||||
|
:color="getDateQBadgeColor(row.shipped)"
|
||||||
>
|
>
|
||||||
</QIcon>
|
{{ toDate(row.shipped) }}
|
||||||
</div>
|
</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>
|
||||||
<template #column-shipped="{ row }">
|
</VnSection>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
<i18n>
|
<i18n>
|
||||||
en:
|
en:
|
||||||
|
|
|
@ -1,5 +1,80 @@
|
||||||
import { RouterView } from 'vue-router';
|
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 {
|
export default {
|
||||||
path: '/travel',
|
path: '/travel',
|
||||||
name: 'Travel',
|
name: 'Travel',
|
||||||
|
@ -7,28 +82,33 @@ export default {
|
||||||
title: 'travel',
|
title: 'travel',
|
||||||
icon: 'local_airport',
|
icon: 'local_airport',
|
||||||
moduleName: 'Travel',
|
moduleName: 'Travel',
|
||||||
|
menu: ['TravelList', 'ExtraCommunity'],
|
||||||
},
|
},
|
||||||
component: RouterView,
|
component: RouterView,
|
||||||
redirect: { name: 'TravelMain' },
|
redirect: { name: 'TravelMain' },
|
||||||
menus: {
|
|
||||||
main: ['TravelList', 'ExtraCommunity'],
|
|
||||||
card: ['TravelBasicData', 'TravelHistory', 'TravelThermographs'],
|
|
||||||
},
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
name: 'TravelMain',
|
name: 'TravelMain',
|
||||||
component: () => import('src/components/common/VnModule.vue'),
|
component: () => import('src/components/common/VnModule.vue'),
|
||||||
redirect: { name: 'TravelList' },
|
redirect: { name: 'TravelIndexMain' },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'list',
|
path: '',
|
||||||
name: 'TravelList',
|
name: 'TravelIndexMain',
|
||||||
meta: {
|
redirect: { name: 'TravelList' },
|
||||||
title: 'list',
|
|
||||||
icon: 'view_list',
|
|
||||||
},
|
|
||||||
component: () => import('src/pages/Travel/TravelList.vue'),
|
component: () => import('src/pages/Travel/TravelList.vue'),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'TravelList',
|
||||||
|
path: 'list',
|
||||||
|
meta: {
|
||||||
|
title: 'list',
|
||||||
|
icon: 'view_list',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
travelCard,
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'extra-community',
|
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