hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useEvalutuonStore } from "@/modules/12_evaluatePersonal/store/Evaluate";

const storageEvalutuon = useEvalutuonStore();
const {
  rows,
  columnsLicense,
  columnPeriodhistory,
  columnTrainingHistory,
  columnProjectsProposed,
} = storeToRefs(storageEvalutuon);
</script>

<template>
  <q-card class="bg-grey-2">
    <div class="text-weight-bold row items-center">
      <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
    </div>

    <q-separator />

    <q-card-actions class="q-ml-md">
      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless readonly model-value="นาย" label="คำนำหน้าชื่อ" />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input
          borderless
          readonly
          model-value="ธนพนธ์ แสงจันทร์"
          label="ชื่อ - นามสกุล"
        />
      </div>

      <div class="col-xs-6 col-sm-6 col-md-6">
        <q-input
          borderless
          model-value="19/03/44"
          readonly
          label="วันเดือนปีเกิด"
        >
          <template v-slot:prepend>
            <q-icon class="size-icon" name="o_calendar_today" />
          </template>
        </q-input>
      </div>

   
    </q-card-actions>

    <q-card-actions class="q-ml-md">
      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless readonly model-value="ไม่มี" label="ตำแหน่ง" />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input
          borderless
          readonly
          model-value="กย.11"
          label="ตำแหน่งเลขที่"
        />
      </div>

      <div class="col-xs-9 col-sm-6 col-md-6">
        <q-input
          borderless
          readonly
          model-value="หน่วยใหม่กับหน่วยเก่า"
          label="สังกัด"
        />
      </div>
    </q-card-actions>

    <q-card-actions class="q-ml-md">
      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless readonly model-value="" label="เงินเดือน" />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless readonly model-value="" label="ระดับปัจจุบัน" />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless readonly model-value="" label="ระดับที่ประเมิน" />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless readonly model-value="1000 ปี" label="อายุราชการ" />
      </div>
    </q-card-actions>
  </q-card>

  <q-card class="bg-grey-2 q-mt-xl">
    <div class=" text-weight-bold row items-center">
      <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
    </div>

    <q-separator />

    <q-card-actions class="q-ml-md">
      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input
          borderless
          readonly
          model-value="ปริญญาตรี"
          label="ระดับศึกษา"
        />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input
          borderless
          readonly
          model-value="มหาวิทยาลัยก."
          label="สถานศึกษา"
        />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless model-value="19/03/44" readonly label="ตั้งแต่">
          <template v-slot:prepend>
            <q-icon class="size-icon" name="o_calendar_today" />
          </template>
        </q-input>
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless model-value="19/03/44" readonly label="ถึง">
          <template v-slot:prepend>
            <q-icon class="size-icon" name="o_calendar_today" />
          </template>
        </q-input>
      </div>
    </q-card-actions>

    <q-card-actions class="q-ml-md">
      <div class="col-xs-6 col-sm-6 col-md-6">
        <q-input
          borderless
          model-value="19/03/44"
          readonly
          label="วันทราสำเร็จการศึกษา"
        >
          <template v-slot:prepend>
            <q-icon class="size-icon" name="o_calendar_today" />
          </template>
        </q-input>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-6">
        <q-input
          borderless
          readonly
          model-value="ปริญญาตรี"
          label="วุฒิการศึกษาในตําแหน่ง"
        />
      </div>

      <div class="col-xs-6 col-sm-6 col-md-6">
        <q-input
          borderless
          readonly
          model-value="ปริญญาตรี"
          label="วุฒิการศึกษา"
        />
      </div>

      <div class="col-xs-6 col-sm-6 col-md-6">
        <q-input borderless readonly model-value="-" label="สาขาวิชา/ทาง" />
      </div>
    </q-card-actions>

    <q-card-actions class="q-ml-md">
      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless readonly model-value="-" label="ทุน" />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input borderless readonly model-value="3.33" label="เกรดเฉลี่ย" />
      </div>

      <div class="col-xs-6 col-sm-6 col-md-6">
        <q-input borderless readonly model-value="ไทย" label="ประเทศ" />
      </div>
    </q-card-actions>
  </q-card>

  <q-card class="bg-grey-2 q-mt-xl">
    <div class=" text-weight-bold row items-center">
      <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
    </div>

    <q-separator />

    <q-card-actions class="q-ma-md">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <q-table
          table-header-class="bg-grey-4 "
          flat
          bordered
          :rows="rows"
          :columns="columnsLicense"
        >
        </q-table>
      </div>
    </q-card-actions>
  </q-card>

  <q-card class="bg-grey-2 q-mt-xl">
    <div class=" text-weight-bold row items-center">
      <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
    </div>

    <q-separator />

    <q-card-actions class="q-ma-md">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <q-table
          table-header-class="bg-grey-4 "
          flat
          bordered
          :rows="rows"
          :columns="columnPeriodhistory"
        >
        </q-table>
      </div>
    </q-card-actions>
  </q-card>

  <q-card class="bg-grey-2 q-mt-xl">
    <div class=" text-weight-bold row items-center">
      <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
    </div>

    <q-separator />

    <q-card-actions class="q-ma-md">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <q-table
          table-header-class="bg-grey-4 "
          flat
          bordered
          :rows="rows"
          :columns="columnTrainingHistory"
        >
        </q-table>
      </div>
    </q-card-actions>
  </q-card>

  <q-card class="bg-grey-2 q-mt-xl">
    <div class=" text-weight-bold row items-center">
      <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน</span>
    </div>

    <q-separator />

    <q-card-actions class="q-ma-md">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <q-table
          table-header-class="bg-grey-4 "
          flat
          bordered
          :rows="rows"
          :columns="columnTrainingHistory"
        >
        </q-table>
      </div>
    </q-card-actions>
  </q-card>

  <q-card class="bg-grey-2 q-mt-xl">
    <div class=" text-weight-bold row items-center">
      <span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
    </div>

    <q-separator />

    <q-card-actions class="q-ma-md">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <q-table
          table-header-class="bg-grey-4 "
          flat
          bordered
          :rows="rows"
          :columns="columnProjectsProposed"
        >
        </q-table>
      </div>
    </q-card-actions>
  </q-card>
</template>

<style scoped lang="scss">

.size-icon {
    font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
  }

</style>
@/modules/12_evaluatePersonal/store/evaluate