feat: refs #7119 add VehicleBasicData

src/components/FormModel.vue

@@ -107,7 +107,7 @@ const isLoading = ref(false);
 const isResetting = ref(false);
 const hasChanges = ref(!$props.observeFormChanges);
 const originalData = ref({});
-const formData = computed(() => state.get(modelValue));
+const formData = computed(() => getValue(state.get(modelValue)));
 const defaultButtons = computed(() => ({
     save: {
         dataCy: 'saveDefaultBtn',
@@ -193,7 +193,7 @@ async function fetch() {
         let { data } = await axios.get($props.url, {
             params: { filter: JSON.stringify($props.filter) },
         });
-        if (Array.isArray(data)) data = data[0] ?? {};
+        data = getValue(data);
 
         updateAndEmit('onFetch', data);
     } catch (e) {
@@ -274,6 +274,10 @@ function trimData(data) {
     return data;
 }
 
+function getValue(data) {
+    return Array.isArray(data) ? data[0] : data ?? {};
+}
+
 defineExpose({
     save,
     isLoading,

src/pages/Route/Vehicle/Card/VehicleBasicData.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from 'vue';
+import FormModel from 'components/FormModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const warehouses = ref([]);
+const companies = ref([]);
+const countries = ref([]);
+</script>
+<template>
+    <FetchData
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        @on-fetch="(data) => (warehouses = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        @on-fetch="(data) => (companies = data)"
+        auto-load
+    />
+    <FetchData
+        url="Countries"
+        :filter="{ fields: ['code'] }"
+        @on-fetch="(data) => (countries = data)"
+        auto-load
+    />
+    <FormModel
+        model="Vehicle"
+        :url-update="`Vehicles/${$route.params.id}`"
+        v-if="isLoaded"
+    >
+        <template #form="{ data }">
+            <VnRow>
+                <VnInput v-model="data.numberPlate" :label="$t('vehicle.numberPlate')" />
+                <VnInput v-model="data.description" :label="$t('globals.description')" />
+            </VnRow>
+            <VnRow>
+                <VnInput v-model="data.tradeMark" :label="$t('vehicle.tradeMark')" />
+                <VnSelect
+                    v-model="data.companyFk"
+                    :label="$t('globals.company')"
+                    :options="companies"
+                    option-label="code"
+                />
+            </VnRow>
+            <VnRow>
+                <VnInput v-model="data.chassis" :label="$t('vehicle.chassis')" />
+                <VnInput v-model="data.leasing" :label="$t('vehicle.leasing')" />
+            </VnRow>
+            <VnRow>
+                <VnSelect
+                    v-model="data.warehouseFk"
+                    :label="$t('globals.warehouse')"
+                    :options="warehouses"
+                />
+                <VnSelect
+                    v-model="data.countryFk"
+                    :label="$t('globals.country')"
+                    :options="countries"
+                    option-label="code"
+                />
+            </VnRow>
+            <VnRow>
+                <span>
+                    <QCheckbox
+                        v-model="data.isKmTruckRate"
+                        :label="$t('vehicle.isKmTruckRate')"
+                        :false-value="0"
+                        :true-value="1"
+                        padding="0"
+                    />
+                </span>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>

src/router/modules/vehicle.js

@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'VehicleCard' },
     menus: {
         main: [],
-        card: ['VehicleBasicData', 'VehicleLog'],
+        card: ['VehicleBasicData'],
     },
     children: [
         {
@@ -31,15 +31,16 @@ export default {
                     component: () =>
                         import('src/pages/Route/Vehicle/Card/VehicleSummary.vue'),
                 },
-                //     {
-                //         name: 'VehicleBasicData',
-                //         path: 'basic-data',
-                //         meta: {
-                //             title: 'basicData',
-                //             icon: 'vn:settings',
-                //         },
-                //         component: () => import('pages/Route/Vehicle/Card/VehicleBasicData.vue'),
-                //     },
+                {
+                    name: 'VehicleBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () =>
+                        import('pages/Route/Vehicle/Card/VehicleBasicData.vue'),
+                },
             ],
         },
     ],