WIP: refactor: #8322 changed Wagon component to use VnSection/VnCardBeta #1166
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import VnCard from 'components/common/VnCard.vue';
|
import VnCardBeta from 'src/components/common/VnCardBeta.vue';
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnCard data-key="Wagon" base-url="Wagons" />
|
<VnCardBeta data-key="Wagon" base-url="Wagons" :descriptor="WagonDescriptor" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||||
import { computed, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import VnSection from 'src/components/common/VnSection.vue';
|
||||||
|
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
const arrayData = useArrayData('WagonList');
|
const arrayData = useArrayData('WagonList');
|
||||||
|
|
@ -15,6 +16,7 @@ const store = arrayData.store;
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const tableRef = ref();
|
const tableRef = ref();
|
||||||
|
const dataKey = 'WagonList';
|
||||||
const filter = {
|
const filter = {
|
||||||
include: {
|
include: {
|
||||||
relation: 'type',
|
relation: 'type',
|
||||||
|
|
@ -92,80 +94,91 @@ async function remove(row) {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QPage class="column items-center q-pa-md">
|
<QPage class="column items-center q-pa-md">
|
||||||
<VnTable
|
<VnSection
|
||||||
ref="tableRef"
|
:data-key="dataKey"
|
||||||
data-key="WagonList"
|
:columns="columns"
|
||||||
url="Wagons"
|
prefix="card"
|
||||||
:filter="filter"
|
:array-data-props="{
|
||||||
:columns="columns"
|
url: 'Wagons',
|
||||||
order="id DESC"
|
exprBuilder,
|
||||||
:column-search="false"
|
}"
|
||||||
:default-mode="'card'"
|
>
|
||||||
:disable-option="{ table: true }"
|
<template #body>
|
||||||
:create="{
|
<VnTable
|
||||||
urlCreate: 'Wagons',
|
ref="tableRef"
|
||||||
title: t('Create new wagon'),
|
:data-key="dataKey"
|
||||||
onDataSaved: () => tableRef.reload(),
|
:create="{
|
||||||
formInitialData: {},
|
urlCreate: 'Wagons',
|
||||||
}"
|
title: t('Create new wagon'),
|
||||||
>
|
onDataSaved: () => tableRef.reload(),
|
||||||
<template #more-create-dialog="{ data }">
|
formInitialData: {},
|
||||||
<VnInput
|
}"
|
||||||
filled
|
:filter="filter"
|
||||||
v-model="data.label"
|
:columns="columns"
|
||||||
:label="t('wagon.create.label')"
|
order="id DESC"
|
||||||
type="number"
|
:column-search="false"
|
||||||
min="0"
|
:default-mode="'card'"
|
||||||
:rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
|
:disable-option="{ table: true }"
|
||||||
/>
|
>
|
||||||
<VnInput
|
<template #more-create-dialog="{ data }">
|
||||||
filled
|
<VnInput
|
||||||
v-model="data.plate"
|
filled
|
||||||
:label="t('wagon.list.plate')"
|
v-model="data.label"
|
||||||
:rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
|
:label="t('wagon.create.label')"
|
||||||
/>
|
type="number"
|
||||||
<VnInput
|
min="0"
|
||||||
filled
|
:rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
|
||||||
v-model="data.volume"
|
/>
|
||||||
:label="t('wagon.list.volume')"
|
<VnInput
|
||||||
type="number"
|
filled
|
||||||
min="0"
|
v-model="data.plate"
|
||||||
:rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]"
|
:label="t('wagon.list.plate')"
|
||||||
/>
|
:rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
|
||||||
<VnSelect
|
/>
|
||||||
url="WagonTypes"
|
<VnInput
|
||||||
filled
|
filled
|
||||||
v-model="data.typeFk"
|
v-model="data.volume"
|
||||||
use-input
|
:label="t('wagon.list.volume')"
|
||||||
fill-input
|
type="number"
|
||||||
hide-selected
|
min="0"
|
||||||
input-debounce="0"
|
:rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]"
|
||||||
option-label="name"
|
/>
|
||||||
option-value="id"
|
<VnSelect
|
||||||
emit-value
|
url="WagonTypes"
|
||||||
map-options
|
filled
|
||||||
:label="t('globals.type')"
|
v-model="data.typeFk"
|
||||||
:options="filteredWagonTypes"
|
use-input
|
||||||
:rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
|
fill-input
|
||||||
@filter="filterType"
|
hide-selected
|
||||||
>
|
input-debounce="0"
|
||||||
<template v-if="data.typeFk" #append>
|
option-label="name"
|
||||||
<QIcon
|
option-value="id"
|
||||||
name="cancel"
|
emit-value
|
||||||
@click.stop.prevent="data.typeFk = null"
|
map-options
|
||||||
class="cursor-pointer"
|
:label="t('globals.type')"
|
||||||
/>
|
:options="filteredWagonTypes"
|
||||||
</template>
|
:rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
|
||||||
<template #no-option>
|
@filter="filterType"
|
||||||
<QItem>
|
>
|
||||||
<QItemSection class="text-grey">
|
<template v-if="data.typeFk" #append>
|
||||||
{{ t('wagon.warnings.noData') }}
|
<QIcon
|
||||||
</QItemSection>
|
name="cancel"
|
||||||
</QItem>
|
@click.stop.prevent="data.typeFk = null"
|
||||||
</template>
|
class="cursor-pointer"
|
||||||
</VnSelect>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</VnTable>
|
<template #no-option>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection class="text-grey">
|
||||||
|
{{ t('wagon.warnings.noData') }}
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelect>
|
||||||
|
</template>
|
||||||
|
</VnTable>
|
||||||
|
</template>
|
||||||
|
</VnSection>
|
||||||
</QPage>
|
</QPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,55 @@
|
||||||
import { RouterView } from 'vue-router';
|
import { RouterView } from 'vue-router';
|
||||||
|
|
||||||
|
const wagonCard = {
|
||||||
|
|
||||||
|
name: 'WagonCard',
|
||||||
|
path: ':id',
|
||||||
|
component: () => import('src/pages/Ticket/Card/WagonCard.vue'),
|
||||||
|
redirect: { name: 'WagonSummary' },
|
||||||
|
meta: {
|
||||||
|
//main: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'],
|
||||||
|
menu: [],
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
path: '/wagon',
|
|
||||||
name: 'Wagon',
|
name: 'Wagon',
|
||||||
|
path: '/wagon',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'wagons',
|
title: 'wagons',
|
||||||
icon: 'vn:trolley',
|
icon: 'vn:trolley',
|
||||||
moduleName: 'Wagon',
|
moduleName: 'Wagon',
|
||||||
|
keyBinding: 'w',
|
||||||
|
menu: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'],
|
||||||
},
|
},
|
||||||
component: RouterView,
|
component: RouterView,
|
||||||
redirect: { name: 'WagonMain' },
|
redirect: { name: 'WagonMain' },
|
||||||
menus: {
|
|
||||||
main: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'],
|
|
||||||
card: [],
|
|
||||||
},
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/wagon',
|
path: '',
|
||||||
name: 'WagonMain',
|
name: 'WagonMain',
|
||||||
component: () => import('src/components/common/VnModule.vue'),
|
component: () => import('src/components/common/VnModule.vue'),
|
||||||
redirect: { name: 'WagonList' },
|
redirect: { name: 'WagonIndexMain' },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'list',
|
path: '',
|
||||||
name: 'WagonList',
|
name: 'WagonIndexMain',
|
||||||
meta: {
|
redirect: { name: 'WagonList' },
|
||||||
title: 'list',
|
|
||||||
icon: 'vn:trolley',
|
|
||||||
},
|
|
||||||
component: () => import('src/pages/Wagon/WagonList.vue'),
|
component: () => import('src/pages/Wagon/WagonList.vue'),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'WagonList',
|
||||||
|
path: 'list',
|
||||||
|
meta: {
|
||||||
|
title: 'list',
|
||||||
|
icon: 'view_list',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'create',
|
path: 'create',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue