forked from verdnatura/salix-front
refactor: refs #6346 wagons to VnTable
This commit is contained in:
parent
07e45f2051
commit
ae76bd0b0e
|
|
@ -2,14 +2,13 @@
|
|||
import { ref, computed } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CardList from 'components/ui/CardList.vue';
|
||||
import FormModelPopup from 'src/components/FormModelPopup.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const arrayData = useArrayData('WagonTypeList');
|
||||
|
|
@ -17,7 +16,7 @@ const store = arrayData.store;
|
|||
const dialog = ref();
|
||||
const { push } = useRouter();
|
||||
const { t } = useI18n();
|
||||
const paginate = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
const initialData = computed(() => {
|
||||
return {
|
||||
|
|
@ -25,10 +24,46 @@ const initialData = computed(() => {
|
|||
};
|
||||
});
|
||||
|
||||
function reloadData() {
|
||||
initialData.value.name = null;
|
||||
paginate.value.fetch();
|
||||
}
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
name: 'id',
|
||||
label: t('ID'),
|
||||
isId: true,
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'name',
|
||||
label: t('Name'),
|
||||
isTitle: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'divisible',
|
||||
label: t('Divisible'),
|
||||
cardVisible: true,
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
actions: [
|
||||
{
|
||||
title: t('components.smartCard.openCard'),
|
||||
icon: 'arrow_forward',
|
||||
isPrimary: true,
|
||||
action: (row) => navigate(row.id, row.name),
|
||||
},
|
||||
{
|
||||
title: t('wagon.list.remove'),
|
||||
icon: 'delete',
|
||||
isPrimary: true,
|
||||
action: (row) => remove(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
function navigate(id, name) {
|
||||
push({ path: `/wagon/type/${id}/edit`, query: { name } });
|
||||
|
|
@ -41,51 +76,25 @@ async function remove(row) {
|
|||
type: 'positive',
|
||||
});
|
||||
store.data.splice(store.data.indexOf(row), 1);
|
||||
window.location.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
ref="paginate"
|
||||
data-key="WagonTypeList"
|
||||
url="WagonTypes"
|
||||
order="id DESC"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<CardList
|
||||
v-for="row of rows"
|
||||
:key="row.id"
|
||||
:title="(row.name || '').toString()"
|
||||
:id="row.id"
|
||||
@click="navigate(row.id, row.name)"
|
||||
>
|
||||
<template #list-items>
|
||||
<QCheckbox
|
||||
:label="t('Divisble')"
|
||||
:model-value="row.divisible"
|
||||
disable
|
||||
/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<QBtn
|
||||
:label="t('components.smartCard.openCard')"
|
||||
@click.stop="navigate(row.id, row.name)"
|
||||
outline
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('wagon.list.remove')"
|
||||
@click.stop="remove(row)"
|
||||
color="primary"
|
||||
style="margin-top: 15px"
|
||||
/>
|
||||
</template>
|
||||
</CardList>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="WagonTypeList"
|
||||
url="WagonTypes"
|
||||
:columns="columns"
|
||||
auto-load
|
||||
order="id DESC"
|
||||
:right-search="false"
|
||||
:column-search="false"
|
||||
:default-mode="'card'"
|
||||
:disable-option="{ table: true }"
|
||||
>
|
||||
</VnTable>
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn @click.stop="dialog.show()" color="primary" fab icon="add" shortcut="+">
|
||||
<QDialog ref="dialog">
|
||||
|
|
@ -94,7 +103,7 @@ async function remove(row) {
|
|||
url-create="WagonTypes"
|
||||
model="WagonType"
|
||||
:form-initial-data="initialData"
|
||||
@on-data-saved="reloadData()"
|
||||
@on-data-saved="window.location.reload()"
|
||||
auto-load
|
||||
>
|
||||
<template #form-inputs="{ data }">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CardList from 'components/ui/CardList.vue';
|
||||
import VnLv from 'components/ui/VnLv.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import { computed } from 'vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const arrayData = useArrayData('WagonList');
|
||||
|
|
@ -23,14 +24,56 @@ const filter = {
|
|||
},
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
name: 'label',
|
||||
label: t('Label'),
|
||||
isTitle: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'plate',
|
||||
label: t('wagon.list.plate'),
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'volume',
|
||||
label: t('wagon.list.volume'),
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'name',
|
||||
label: t('wagon.list.type'),
|
||||
cardVisible: true,
|
||||
format: (row) => row?.type?.name,
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
actions: [
|
||||
{
|
||||
title: t('components.smartCard.openCard'),
|
||||
icon: 'arrow_forward',
|
||||
isPrimary: true,
|
||||
action: (row) => navigate(row.id),
|
||||
},
|
||||
{
|
||||
title: t('wagon.list.remove'),
|
||||
icon: 'delete',
|
||||
isPrimary: true,
|
||||
action: (row) => remove(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/wagon/${id}/edit` });
|
||||
}
|
||||
|
||||
function create() {
|
||||
router.push({ path: `/wagon/create` });
|
||||
}
|
||||
|
||||
async function remove(row) {
|
||||
try {
|
||||
await axios.delete(`Wagons/${row.id}`).then(async () => {
|
||||
|
|
@ -39,6 +82,7 @@ async function remove(row) {
|
|||
type: 'positive',
|
||||
});
|
||||
store.data.splice(store.data.indexOf(row), 1);
|
||||
window.location.reload();
|
||||
});
|
||||
} catch (error) {
|
||||
//
|
||||
|
|
@ -48,53 +92,83 @@ async function remove(row) {
|
|||
|
||||
<template>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
data-key="WagonList"
|
||||
url="/Wagons"
|
||||
order="id DESC"
|
||||
:filter="filter"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<CardList
|
||||
v-for="row of rows"
|
||||
:key="row.id"
|
||||
:title="(row.label || '').toString()"
|
||||
:id="row.id"
|
||||
@click="navigate(row.id)"
|
||||
>
|
||||
<template #list-items>
|
||||
<VnLv
|
||||
:label="t('wagon.list.plate')"
|
||||
:title-label="t('wagon.list.plate')"
|
||||
:value="row.plate"
|
||||
/>
|
||||
<VnLv :label="t('wagon.list.volume')" :value="row?.volume" />
|
||||
<VnLv
|
||||
:label="t('wagon.list.type')"
|
||||
:value="row?.type?.name"
|
||||
/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<QBtn
|
||||
:label="t('components.smartCard.openCard')"
|
||||
@click.stop="navigate(row.id)"
|
||||
outline
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('wagon.list.remove')"
|
||||
@click.stop="remove(row)"
|
||||
color="primary"
|
||||
style="margin-top: 15px"
|
||||
/>
|
||||
</template>
|
||||
</CardList>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<QPageSticky position="bottom-right" :offset="[18, 18]">
|
||||
<QBtn @click="create" fab icon="add" color="primary" shortcut="+" />
|
||||
</QPageSticky>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="WagonList"
|
||||
url="Wagons"
|
||||
:filter="filter"
|
||||
:columns="columns"
|
||||
auto-load
|
||||
order="id DESC"
|
||||
:right-search="false"
|
||||
:column-search="false"
|
||||
:default-mode="'card'"
|
||||
:disable-option="{ table: true }"
|
||||
:create="{
|
||||
urlCreate: 'Wagons',
|
||||
title: t('Create new wagon'),
|
||||
onDataSaved: () => {
|
||||
window.location.reload();
|
||||
},
|
||||
formInitialData: {},
|
||||
}"
|
||||
>
|
||||
<template #more-create-dialog="{ data }">
|
||||
<VnInput
|
||||
filled
|
||||
v-model="data.label"
|
||||
:label="t('wagon.create.label')"
|
||||
type="number"
|
||||
min="0"
|
||||
:rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
|
||||
/>
|
||||
<VnInput
|
||||
filled
|
||||
v-model="data.plate"
|
||||
:label="t('wagon.create.plate')"
|
||||
:rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
|
||||
/>
|
||||
<VnInput
|
||||
filled
|
||||
v-model="data.volume"
|
||||
:label="t('wagon.create.volume')"
|
||||
type="number"
|
||||
min="0"
|
||||
:rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]"
|
||||
/>
|
||||
<VnSelect
|
||||
url="WagonTypes"
|
||||
filled
|
||||
v-model="data.typeFk"
|
||||
use-input
|
||||
fill-input
|
||||
hide-selected
|
||||
input-debounce="0"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
:label="t('wagon.create.type')"
|
||||
:options="filteredWagonTypes"
|
||||
:rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
|
||||
@filter="filterType"
|
||||
>
|
||||
<template v-if="data.typeFk" #append>
|
||||
<QIcon
|
||||
name="cancel"
|
||||
@click.stop.prevent="data.typeFk = null"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
<template #no-option>
|
||||
<QItem>
|
||||
<QItemSection class="text-grey">
|
||||
{{ t('wagon.warnings.noData') }}
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
</template>
|
||||
</VnTable>
|
||||
</QPage>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue