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

<script setup lang="ts">
import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";

import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const store = useEvaluateDetailStore();
const {
  columnsLicense,
  columnPeriodhistory,
  columnTrainingHistory,
  columnProjectsProposed,
} = store;
</script>

<template>
  <div>
    <q-scroll-area style="height: 450px; max-width: 100%">
      <div class="q-pa-xs">
        <q-card class="q-gutter-md" style="max-width: 100%">
          <q-card bordered style="border: 1px solid #d6dee1">
            <div class="text-weight-bold row items-center bg-grey-2">
              <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
            </div>
            <q-separator />
            <div class="row q-pa-sm">
              <div class="col-xs-6 col-sm-4 col-md-3">
                <q-input
                  borderless
                  readonly
                  :model-value="data.prefix"
                  label="คำนำหน้าชื่อ"
                />
              </div>

              <div class="col-xs-6 col-sm-4 col-md-3">
                <q-input
                  borderless
                  readonly
                  :model-value="data.fullName"
                  label="ชื่อ - นามสกุล"
                />
              </div>
              <div class="col-xs-6 col-sm-4 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-4 col-md-3">
                <q-input
                  borderless
                  readonly
                  model-value="ไม่มี"
                  label="ตำแหน่ง"
                />
              </div>

              <div class="col-xs-6 col-sm-4 col-md-3">
                <q-input
                  borderless
                  readonly
                  model-value="กย.11"
                  label="ตำแหน่งเลขที่"
                />
              </div>
              <div class="col-xs-6 col-sm-4 col-md-3">
                <q-input
                  borderless
                  readonly
                  model-value="หน่วยใหม่กับหน่วยเก่า"
                  label="สังกัด"
                />
              </div>
              <div class="col-xs-6 col-sm-4 col-md-3">
                <q-input
                  borderless
                  readonly
                  model-value="1,0000"
                  label="เงินเดือน"
                />
              </div>

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

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

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

          <q-card bordered style="border: 1px solid #d6dee1">
            <div class="text-weight-bold row items-center bg-grey-2">
              <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
            </div>
            <q-separator />
            <div class="row q-pa-sm">
              <div class="col-xs-6 col-sm-4 col-md-3">
                <q-input
                  borderless
                  readonly
                  model-value="ปริญญาตรี"
                  label="ระดับศึกษา"
                />
              </div>

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

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

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

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

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

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

          <q-card bordered style="border: 1px solid #d6dee1">
            <div class="text-weight-bold row items-center bg-grey-2">
              <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
            </div>
            <q-separator />
            <div class="row q-pa-sm">
              <div class="col-xs-12 col-sm-12 col-md-12">
                <TableData :columns="columnsLicense" />
              </div>
            </div>
          </q-card>

          <q-card bordered style="border: 1px solid #d6dee1">
            <div class="text-weight-bold row items-center bg-grey-2">
              <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
            </div>
            <q-separator />
            <div class="row q-pa-sm">
              <div class="col-xs-12 col-sm-12 col-md-12">
                <TableData :columns="columnPeriodhistory" />
              </div>
            </div>
          </q-card>

          <q-card bordered style="border: 1px solid #d6dee1">
            <div class="text-weight-bold row items-center bg-grey-2">
              <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
            </div>
            <q-separator />
            <div class="row q-pa-sm">
              <div class="col-xs-12 col-sm-12 col-md-12">
                <TableData :columns="columnTrainingHistory" />
              </div>
            </div>
          </q-card>

          <q-card bordered style="border: 1px solid #d6dee1">
            <div class="text-weight-bold row items-center bg-grey-2">
              <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
            </div>
            <q-separator />
            <div class="row q-pa-sm">
              <div class="col-xs-12 col-sm-12 col-md-12">
                <TableData :columns="columnTrainingHistory" />
              </div>
            </div>
          </q-card>

          <q-card bordered style="border: 1px solid #d6dee1">
            <div class="text-weight-bold row items-center bg-grey-2">
              <span class="q-ml-lg q-my-sm"
                >ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span
              >
            </div>
            <q-separator />
            <div class="row q-pa-sm">
              <div class="col-xs-12 col-sm-12 col-md-12">
                <TableData :columns="columnProjectsProposed" />
              </div>
            </div>
          </q-card>
        </q-card>
      </div>
    </q-scroll-area>
  </div>
</template>

<style scoped lang="scss">
.size-icon {
  font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
}
</style>
@/modules/12_evaluatePersonal/store/evaluate