src/pages/Worker/Card/WorkerOperator.vue

@@ -10,10 +10,11 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import CrudModel from 'components/CrudModel.vue';
+import axios from 'axios';
 
 const { t } = useI18n();
 
-const test = ref({});
+const crudModelRef = ref();
 const dialog = ref();
 const warehousesData = ref([]);
 const itemPackingTypesData = ref([]);
@@ -39,10 +40,11 @@ const initialData = computed(() => {
         machineFk: null,
     };
 });
-// watch(
-//     () => route.params.id,
-//     () => CrudModelRef.value.reset()
-// );
+
+async function insert() {
+    await axios.post('Operators', initialData.value);
+    crudModelRef.value.reload();
+}
 </script>
 
 <template>
@@ -58,16 +60,17 @@ const initialData = computed(() => {
             @on-fetch="(data) => (warehousesData = data)"
             auto-load
         />
+        <FetchData url="Printers" @on-fetch="(data) => (PrintersData = data)" auto-load />
         <FetchData url="Sectors" @on-fetch="(data) => (sectorsData = data)" auto-load />
         <FetchData url="Machines" @on-fetch="(data) => (machinesData = data)" auto-load />
         <CrudModel
             data-key="workerOperator"
             url="Operators"
-            model="workerOperator"
+            primary-key="workerFk"
             :filter="{ where: { workerFk: route.params.id } }"
-            ref="test"
             :data-required="{ workerFk: route.params.id }"
-            :default-save="false"
+            ref="crudModelRef"
+            search-url="operator"
             auto-load
         >
             <template #body="{ rows }">
@@ -75,7 +78,7 @@ const initialData = computed(() => {
                     <QCard
                         flat
                         bordered
-                        :key="row"
+                        :key="row.$index"
                         v-for="row of rows"
                         class="card q-px-md q-mb-sm container"
                     >
@@ -115,11 +118,27 @@ const initialData = computed(() => {
                                 option-label="description"
                                 v-model="row.sectorFk"
                             />
-                            <VnInput
+                            <VnSelect
                                 :label="t('worker.operator.labeler')"
+                                :options="PrintersData"
+                                hide-selected
+                                option-label="name"
                                 v-model="row.labelerFk"
-                                lazy-rules
-                            />
+                            >
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        <QItemSection>
+                                            <QItemLabel
+                                                >ID: {{ scope.opt?.id }}</QItemLabel
+                                            >
+                                            <QItemLabel caption>
+                                                {{ scope.opt?.id }},
+                                                {{ scope.opt?.name }}
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </template>
+                            </VnSelect>
                         </VnRow>
                         <VnRow>
                             <VnInput
@@ -175,12 +194,14 @@ const initialData = computed(() => {
                         </QBtn>-->
             </template>
         </CrudModel>
-        <QPageSticky
-            position="bottom-right"
-            :offset="[25, 25]"
-            v-if="!test.formData?.length"
-        >
-            <QBtn fab color="primary" icon="add" @click="test.insert()" />
+        <QPageSticky position="bottom-right" :offset="[25, 25]">
+            <QBtn
+                fab
+                color="primary"
+                icon="add"
+                @click="insert()"
+                v-if="!crudModelRef?.formData?.length"
+            />
         </QPageSticky>
     </QPage>
 </template>