refs #7406 fix VnTable columns

src/pages/Travel/Card/TravelThermographs.vue

@@ -13,7 +13,7 @@ import useNotify from 'src/composables/useNotify.js';
 import { toDate } from 'src/filters';
 import { downloadFile } from 'src/composables/downloadFile';
 
-const route = useRoute();
+const {{id}} = useRoute();
 const quasar = useQuasar();
 const router = useRouter();
 const { t } = useI18n();
@@ -29,7 +29,7 @@ const thermographFilter = {
             fields: ['id', 'name'],
         },
     },
-    where: { travelFk: route.params.id },
+    where: { travelFk: id },
     order: ['created'],
 };
 
@@ -137,7 +137,7 @@ const removeThermograph = async (id) => {
         data-key="TravelThermographs"
         url="TravelThermographs"
         :filter="thermographFilter"
-        :params="{ travelFk: route.params.id }"
+        :params="{ travelFk: id }"
         auto-load
     >
         <template #body="{ rows }">

src/pages/Worker/Card/WorkerFormation.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import { useRoute } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
@@ -9,50 +8,54 @@ const tableRef = ref();
 const { t } = useI18n();
 const route = useRoute();
 const entityId = computed(() => route.params.id);
+const courseFilter = {
+    include: [
+        {
+            relation: 'trainingCourseType',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'trainingCenter',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+};
 const columns = computed(() => [
     {
         align: 'left',
-        name: 'course',
+        name: 'trainingCourseTypeFk',
         label: t('worker.formation.tableVisibleColumns.course'),
         isTitle: true,
         component: 'select',
-        attrs: {
+        field: 'trainingCourseTypeFk',
-            url: 'TrainingCourse/trainingCourseType',
-            fields: ['id', 'name'],
-        },
         create: true,
     },
     {
         align: 'left',
-        name: 'startDate',
+        name: 'started',
         label: t('worker.formation.tableVisibleColumns.startDate'),
         component: VnInputDate,
-        props: (prop) => ({
+        field: 'started',
-            disable: true,
-            'model-value': prop.row.started,
-        }),
         create: true,
     },
     {
         align: 'left',
-        name: 'endDate',
+        name: 'ended',
         label: t('worker.formation.tableVisibleColumns.endDate'),
         component: VnInputDate,
-        props: (prop) => ({
+        field: 'ended',
-            disable: true,
-            'model-value': prop.row.ended,
-        }),
         create: true,
     },
     {
         align: 'left',
-        name: 'center',
+        name: 'centerFk',
         label: t('worker.formation.tableVisibleColumns.center'),
         component: 'select',
-        attrs: {
+        field: 'centerFk',
-            url: 'Workers/trainingCenter',
-            fields: ['id', 'name'],
-        },
         create: true,
     },
     {
@@ -60,16 +63,14 @@ const columns = computed(() => [
         name: 'invoice',
         label: t('worker.formation.tableVisibleColumns.invoice'),
         component: 'input',
+        field: 'invoice',
     },
     {
         align: 'left',
         name: 'amount',
         label: t('worker.formation.tableVisibleColumns.amount'),
         component: 'input',
-        props: (prop) => ({
+        field: 'amount',
-            disable: true,
-            'model-value': prop.row.amount,
-        }),
         create: true,
     },
     {
@@ -77,20 +78,14 @@ const columns = computed(() => [
         name: 'remark',
         label: t('worker.formation.tableVisibleColumns.remark'),
         component: 'checkbox',
-        props: (prop) => ({
+        field: 'remark',
-            disable: true,
-            'model-value': prop.row.remark,
-        }),
         create: true,
     },
     {
         align: 'left',
         name: 'hasDiploma',
         label: t('worker.formation.tableVisibleColumns.hasDiploma'),
-        props: (prop) => ({
+        field: 'hasDiploma',
-            disable: true,
-            'model-value': prop.row.hasDiploma,
-        }),
         create: true,
     },
 ]);
@@ -101,6 +96,7 @@ const columns = computed(() => [
         data-key="WorkerFormation"
         :url="`Workers/${entityId}/trainingCourse`"
         :url-create="`Workers/${entityId}/trainingCourse`"
+        :filter="courseFilter"
         :create="{
             urlCreate: 'Workers/trainingCourse',
             title: 'Create trainingCourse',