ilk

ui/src/pages/ProductionWorker.vue

@@ -0,0 +1,224 @@
+<template>
+  <q-page class="workorder-page with-bg">
+
+    <!-- ===============================
+         🔹 ÜST: İŞ EMRİ BİLGİLERİ
+    =============================== -->
+    <q-card flat bordered class="q-mb-md">
+      <q-card-section class="row q-col-gutter-md">
+
+        <div class="col-3">
+          <q-input
+            label="İş Emri No"
+            v-model="form.workOrderNo"
+            dense
+            filled
+            :readonly="isViewMode"
+          />
+        </div>
+
+        <div class="col-3">
+          <q-select
+            label="Ürün Tipi"
+            v-model="form.productType"
+            :options="productTypes"
+            dense
+            filled
+            :disable="isViewMode"
+          />
+        </div>
+
+        <div class="col-3">
+          <q-input
+            label="Termin"
+            type="date"
+            v-model="form.deliveryDate"
+            dense
+            filled
+            :readonly="isViewMode"
+          />
+        </div>
+
+        <div class="col-3">
+          <q-input
+            label="Adet"
+            type="number"
+            v-model="form.quantity"
+            dense
+            filled
+            :readonly="isViewMode"
+          />
+        </div>
+
+      </q-card-section>
+    </q-card>
+
+    <!-- ===============================
+         🔹 ORTA: GÖRSEL REFERANSLAR
+    =============================== -->
+    <div class="row q-col-gutter-md">
+
+      <!-- 🔸 SOL: ANA GÖRSEL -->
+      <div class="col-4">
+        <q-card bordered>
+          <q-card-section class="text-weight-bold">
+            Ana Görsel
+          </q-card-section>
+
+          <q-card-section>
+            <div v-if="mainImage">
+              <img :src="mainImage.src" class="image-preview" />
+            </div>
+
+            <div v-else class="text-grey text-caption">
+              Ana görsel seçilmedi
+            </div>
+
+            <q-btn
+              v-if="isCreateMode"
+              label="Ana Görsel Seç"
+              icon="image"
+              class="q-mt-sm"
+              color="primary"
+              @click="openImagePicker('MAIN')"
+            />
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <!-- 🔸 ORTA: DETAY GÖRSELLER -->
+      <div class="col-5">
+        <q-card bordered>
+          <q-card-section class="text-weight-bold">
+            Detay Görseller
+          </q-card-section>
+
+          <q-card-section class="row q-col-gutter-sm">
+            <div
+              v-for="(img, index) in detailImages"
+              :key="index"
+              class="col-6"
+            >
+              <q-card flat bordered>
+                <img :src="img.src" class="image-thumb" />
+                <q-card-section>
+                  <q-input
+                    v-model="img.note"
+                    type="textarea"
+                    dense
+                    label="Not"
+                    :readonly="isViewMode"
+                  />
+                </q-card-section>
+              </q-card>
+            </div>
+
+            <div v-if="isCreateMode" class="col-12">
+              <q-btn
+                label="Detay Görsel Ekle"
+                icon="add"
+                flat
+                color="primary"
+                @click="openImagePicker('DETAIL')"
+              />
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <!-- 🔸 SAĞ: TALİMAT / TELA -->
+      <div class="col-3">
+        <q-card bordered>
+          <q-card-section class="text-weight-bold">
+            Talimat / Tela
+          </q-card-section>
+
+          <q-card-section>
+            <div
+              v-for="(img, index) in instructionImages"
+              :key="index"
+              class="q-mb-sm"
+            >
+              <img :src="img.src" class="image-thumb" />
+            </div>
+
+            <q-btn
+              v-if="isCreateMode"
+              label="Talimat Görseli Ekle"
+              icon="add"
+              flat
+              color="primary"
+              @click="openImagePicker('INSTRUCTION')"
+            />
+          </q-card-section>
+        </q-card>
+      </div>
+
+    </div>
+
+    <!-- ===============================
+         🔹 ALT: AKSİYONLAR
+    =============================== -->
+    <div class="row justify-end q-mt-md">
+      <q-btn
+        v-if="isCreateMode"
+        label="Kaydet"
+        color="positive"
+        icon="save"
+        @click="saveWorkOrder"
+      />
+
+      <q-btn
+        v-if="isViewMode"
+        label="PDF"
+        color="primary"
+        icon="picture_as_pdf"
+        class="q-ml-sm"
+      />
+    </div>
+
+  </q-page>
+</template>
+<script setup>
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { usePermission } from 'src/composables/usePermission'
+
+const { canRead, canWrite, canUpdate } = usePermission()
+
+const canReadOrder   = canRead('order')
+const canWriteOrder  = canWrite('order')
+const canUpdateOrder = canUpdate('order')
+
+const route = useRoute()
+
+const isViewMode = computed(() => !!route.params.id)
+const isCreateMode = computed(() => !route.params.id)
+
+const productTypes = ['CEKET', 'PANTOLON']
+
+const form = ref({
+  workOrderNo: '',
+  productType: null,
+  deliveryDate: '',
+  quantity: null
+})
+
+const mainImage = ref(null)
+const detailImages = ref([])
+const instructionImages = ref([])
+
+function openImagePicker(type) {
+  // Şimdilik stub
+  console.log('Image picker:', type)
+}
+
+function saveWorkOrder() {
+  console.log('SAVE', {
+    form: form.value,
+    mainImage: mainImage.value,
+    detailImages: detailImages.value,
+    instructionImages: instructionImages.value
+  })
+}
+</script>