refactor: refs #8441 add VnInputNumber component and update VnSelect options in VehicleInvoiceIn

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

@@ -10,6 +10,7 @@ import { useI18n } from 'vue-i18n';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 const tableRef = ref();
 const { t } = useI18n();
@@ -40,7 +41,7 @@ const columns = computed(() => [
                 fields: ['id', 'name'],
             },
         },
-        format: ({supplierName}) => supplierName,
+        format: ({ supplierName }) => supplierName,
         columnClass: 'expand',
         cardVisible: true,
     },
@@ -117,23 +118,26 @@ async function unassignInvoice(id) {
             <VnSelect
                 url="invoiceIns"
                 :label="t('invoiceIn.supplierRef')"
-                :include="{ relation: 'supplier', scope: { fields: ['id', 'name'] } }"
-                :filter-options="['supplierRef', 'name']"
+                :fields="['id', 'supplierRef', 'supplierFk']"
+                :filter-options="['id', 'supplierRef']"
                 v-model="data.invoiceInFk"
                 option-label="supplierRef"
                 :required="true"
             >
-            <template #option="scope">
-                        <QItem v-bind="scope.itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{ scope.opt?.supplierRef }}</QItemLabel>
-                                <QItemLabel caption>{{
-                                    scope.opt?.supplier?.name
-                                }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </template>
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel>{{ scope.opt?.supplierRef }}</QItemLabel>
+                            <QItemLabel caption>{{ `#${scope.opt?.id}` }}</QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </template>
             </VnSelect>
+            <VnInputNumber
+                :label="t('invoiceIn.list.amount')"
+                v-model="data.amount"
+                required
+            />
         </template>
     </VnTable>
 </template>