src/components/VnTable/VnTable.vue

@@ -561,7 +561,7 @@ defineExpose({
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
     max-width: 100%;
-    margin: 0 auto;
+    margin: 1em auto;
     overflow: scroll;
     white-space: wrap;
     width: 100%;

src/pages/Worker/Card/WorkerBusiness.vue

@@ -71,7 +71,9 @@ const businessFilter = {
 const columns = computed(() => [
     {
         align: 'left',
+        attrs: {
             label: t('worker.business.tableVisibleColumns.started'),
+        },
         name: 'started',
         format: ({ started }) => toDate(started),
         component: VnInputDate,
@@ -80,7 +82,9 @@ const columns = computed(() => [
     },
     {
         align: 'left',
+        attrs: {
             label: t('worker.business.tableVisibleColumns.ended'),
+        },
         name: 'ended',
         format: ({ ended }) => toDate(ended),
         component: VnInputDate,
@@ -104,24 +108,26 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.reasondEnd'),
         name: 'reasonEndFk',
         component: 'select',
         attrs: {
             url: 'BusinessReasonEnds',
             fields: ['id', 'reason'],
+            optionLabel: 'reason',
+            label: t('worker.business.tableVisibleColumns.reasondEnd'),
         },
         disable: false,
         cardVisible: true,
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.department'),
         name: 'departmentFk',
         component: 'select',
         attrs: {
             url: 'Departments',
             fields: ['id', 'name'],
+            optionLabel: 'name',
+            label: t('worker.business.tableVisibleColumns.department'),
         },
         disable: false,
         cardVisible: true,
@@ -129,12 +135,13 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.professionalCategory'),
         name: 'professionalCategoryFk',
         component: 'select',
         attrs: {
             url: 'WorkerBusinessProfessionalCategories',
             fields: ['id', 'description', 'code'],
+            optionLabel: 'description',
+            label: t('worker.business.tableVisibleColumns.professionalCategory'),
         },
         disable: false,
         cardVisible: true,
@@ -142,12 +149,13 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.calendarType'),
         name: 'calendarTypeFk',
         component: 'select',
         attrs: {
             url: 'CalendarTypes',
             fields: ['id', 'description'],
+            optionLabel: 'description',
+            label: t('worker.business.tableVisibleColumns.calendarType'),
         },
         disable: false,
         cardVisible: true,
@@ -155,12 +163,13 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.workCenter'),
         name: 'workCenterFk',
         component: 'select',
         attrs: {
             url: 'WorkCenters',
             fields: ['id', 'name'],
+            optionLabel: 'name',
+            label: t('worker.business.tableVisibleColumns.workCenter'),
         },
         disable: false,
         cardVisible: true,
@@ -168,25 +177,26 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.payrollCategories'),
         name: 'workerBusinessCategoryFk',
         component: 'select',
         attrs: {
             url: 'payrollCategories',
             fields: ['id', 'description'],
+            optionLabel: 'description',
+            label: t('worker.business.tableVisibleColumns.payrollCategories'),
         },
         disable: false,
         cardVisible: true,
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.occupationCode'),
         name: 'occupationCodeFk',
         component: 'select',
         attrs: {
             url: 'OccupationCodes',
             fields: ['code', 'name'],
             optionValue: 'code',
+            label: t('worker.business.tableVisibleColumns.occupationCode'),
         },
         disable: false,
         cardVisible: true,
@@ -194,20 +204,23 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.rate'),
         name: 'rate',
+        attrs: {
+            label: t('worker.business.tableVisibleColumns.rate'),
+        },
         component: 'input',
         disable: false,
         cardVisible: true,
     },
     {
         align: 'left',
-        label: t('worker.business.tableVisibleColumns.businessType'),
         name: 'workerBusinessTypeFk',
         component: 'select',
         attrs: {
             url: 'WorkerBusinessTypes',
             fields: ['id', 'name'],
+            optionValue: 'name',
+            label: t('worker.business.tableVisibleColumns.businessType'),
         },
         disable: false,
         cardVisible: true,
@@ -215,7 +228,9 @@ const columns = computed(() => [
     },
     {
         align: 'left',
+        attrs: {
             label: t('worker.business.tableVisibleColumns.amount'),
+        },
         name: 'amount',
         component: 'input',
         disable: false,
@@ -224,7 +239,9 @@ const columns = computed(() => [
     },
     {
         align: 'left',
+        attrs: {
             label: t('worker.business.tableVisibleColumns.basicSalary'),
+        },
         name: 'basicSalary',
         component: 'input',
         disable: false,
@@ -233,7 +250,9 @@ const columns = computed(() => [
     },
     {
         align: 'left',
+        attrs: {
             label: t('worker.business.tableVisibleColumns.notes'),
+        },
         name: 'notes',
         component: 'input',
         disable: false,