hrms-mgt/src/modules/05_placement/components/pass/TableDetail.vue

<script setup lang="ts">
import { ref, computed } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import { useQuasar } from 'quasar'
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const modal = ref<boolean>();
  const { success } = mixin;
const save = ref<boolean>(true);
const props = defineProps({
  Modal: Boolean,
  close: {
    type: Function,
    default: () => console.log("not function"),
  },
  getdetail: {
    type: Object,
    required: true,
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const myForm = ref<any>();
const checkValidate = ref<boolean>(false);
const selection = ref<number[]>([]);
const checkboxItems: CheckboxItem[] = [
  { id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
  {
    id: 2,
    label:
      "ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
  },
  {
    id: 3,
    label:
      "ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
  },
  { id: 4, label: "ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" },
  {
    id: 5,
    label:
      "ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง",
  },
  { id: 6, label: "ไม่เป็นบุคคลล้มละลาย" },
  {
    id: 7,
    label:
      "ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ",
  },
  {
    id: 8,
    label:
      "ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ",
  },
  {
    id: 9,
    label:
      "เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
  },
  {
    id: 10,
    label:
      "เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
  },
  {
    id: 11,
    label:
      "เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
  },
];
const $q = useQuasar()
function isRequired(val: any): boolean | string {
  return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
}
const validateData = () => {
  const selectedIds = selection.value;
  const selectedItems = checkboxItems.filter((item) =>
    selectedIds.includes(item.id)
  );

  return (
    selectedItems.length > 0 && selectedItems.length === selectedIds.length
  );
};

const ClickSave = () => {
  const isValid = validateData();
  if (isValid) {
    console.log(selection.value);
    console.log("rerer", props.Modal);
    props.close();
    props.validate();
    selection.value = [];
  } else {
    success($q, "กรอกให้ครบ");
  }
};

const close = async () => {
  props.close();
  selection.value = [];
};
</script>
<template>
  <q-dialog v-model="props.Modal">
    <q-card style="max-width: 100%; width: 80%">
      <q-form ref="myForm">
        <div class="row">
          <DialogHeader
            :title="`รายละเอียดของ ${props.getdetail.fullName}`"
            @click="close"
          />
        </div>
        <q-separator />

        <div class="contanier-box-main">
          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">
                ข้อมูลทั่วไป
                <span class="check-officer"
                  ><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
                >
              </div>
              <div class="row q-pa-xs">
                <div class="col-3 header-sub-text">
                  <div class="q-pb-md">เลขที่ประจำตัวประชาชน</div>
                  <div class="q-pb-md">วัน/เดือน/ปีเกิด</div>
                </div>
                <div class="col-4 sub-text">
                  <div class="q-pb-md">
                    {{ props.getdetail.profileID }}
                  </div>
                  <div class="q-pb-md">
                    {{ props.getdetail.dateOfBirth }}
                  </div>
                </div>
                <div class="col-2 header-sub-text">
                  <div class="q-pb-md">ชื่อ-นามสกุล</div>
                  <div class="q-pb-md">เพศ</div>
                </div>
                <div class="col-3 sub-text">
                  <div class="q-pb-md">
                    {{ props.getdetail.fullName }}
                  </div>
                  <div class="q-pb-md">
                    {{ props.getdetail.gender }}
                  </div>
                </div>
              </div>
            </q-card>
          </div>
          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
              <div class="row q-pa-xs">
                <div class="col-3 header-sub-text">ที่อยู่</div>
                <div class="col-9 sub-text">
                  {{ props.getdetail.address }}
                </div>
              </div>
            </q-card>
          </div>
          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">การศึกษา</div>
              <div class="row q-pa-xs">
                <div class="col-3 header-sub-text">
                  <div class="q-pb-md">สถานศึกษา</div>
                  <div class="q-pb-md">สาขาวิชาเอก</div>
                </div>
                <div class="col-4 sub-text">
                  <div class="q-pb-md">
                    {{ props.getdetail.university }}
                  </div>
                  <div class="q-pb-md">
                    {{ props.getdetail.major }}
                  </div>
                </div>
                <div class="col-2 header-sub-text">
                  <div class="q-pb-md">วุฒิการศึกษา</div>
                  <div class="q-pb-md">อื่นๆ</div>
                </div>
                <div class="col-3 sub-text">
                  <div class="q-pb-md">
                    {{ props.getdetail.degree ? props.getdetail.degree : "-" }}
                  </div>
                  <div class="q-pb-md">
                    {{ props.getdetail.remark ? props.getdetail.remark : "-" }}
                  </div>
                </div>
              </div>
            </q-card>
          </div>
          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">การสอบ</div>
              <div class="row q-pa-xs">
                <div class="col-6">
                  <q-card class="card-exam q-pa-sm">
                    <div class="row">
                      <div class="col-4 q-pa-xs header-sub-text-exam">
                        <div>ประเภท</div>
                        <div>ภาค ก</div>
                        <div>ภาค ข</div>
                        <div>ภาค ค</div>
                        <div>รวมทั้งหมด</div>
                      </div>
                      <div class="col-4 q-pa-xs">
                        <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
                        <div class="sub-text-exam">
                          {{ props.getdetail.scoreResult.scoreAFull }}
                        </div>
                        <div class="sub-text-exam">
                          {{ props.getdetail.scoreResult.scoreBFull }}
                        </div>
                        <div class="sub-text-exam">
                          {{ props.getdetail.scoreResult.scoreCFull }}
                        </div>
                        <div class="sub-text-exam">
                          {{ props.getdetail.scoreResult.scoreSumFull }}
                        </div>
                      </div>
                      <div class="col-4 q-pa-xs header-sub-text-exam-2">
                        <div class="header-sub-text-exam-2">ผลการสอบ</div>
                        <div class="sub-text-exam">
                          {{ props.getdetail.scoreResult.scoreA }}
                        </div>
                        <div class="sub-text-exam">
                          {{ props.getdetail.scoreResult.scoreB }}
                        </div>
                        <div class="sub-text-exam">
                          {{ props.getdetail.scoreResult.scoreC }}
                        </div>
                        <div class="sub-text-exam">
                          {{ props.getdetail.scoreResult.scoreSum }}
                        </div>
                      </div>
                    </div>
                  </q-card>
                </div>
                <div class="col-1"></div>
                <div class="col-5 q-pt-sm q-pl-lg">
                  <div class="row">
                    <div class="col-7 header-sub-text">
                      <div class="q-pb-sm">ผลการสอบ</div>
                      <div class="q-pb-sm">ลำดับที่สอบได้</div>
                      <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
                    </div>
                    <div class="col-5 sub-text-exam">
                      <div class="q-pb-sm">
                        {{ props.getdetail.scoreResult.examResult }}
                      </div>
                      <div class="q-pb-sm">{{ props.getdetail.number }}</div>
                      <div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>

          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="col-12 row items-center q-pa-sm header-text">
                การคัดกรองคุณสมบัติ
              </div>
              <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
                <q-checkbox
                  size="xs"
                  v-model="selection"
                  :val="item.id"
                  :label="item.label"
                  keep-color
                  color="teal"
                  :rules="[isRequired]"
                  class="checkbox-group"
                />
                <q-separator />
              </div>
            </q-card>
          </div>
        </div>
        <q-separator />
        <div>
          <DialogFooter
            @click="ClickSave"
            :model="props.Modal"
            :editvisible="save"
            :validate="validateData"
          />
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>
<style lang="scss" scoped>
.icon-officer {
  color: #00aa86;
  padding-left: 20px;
}

.check-officer {
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  color: #00aa86;
  padding-left: 20px;
}

.contanier-box-main {
  padding: 10px 21px 10px 21px;
}

.contanier-box-mini {
  padding: 10px 0px 10px 0px;
}

.card-panding {
  padding: 15px 21px 15px 21px;
}

.header-text {
  font-size: 18px;
  font-weight: 600;
  color: #4f4f4f;
}

.header-sub-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #818181;
}
.sub-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.0025em;
  color: #35373c;
}

.card-exam {
  border-radius: 5px;
  background: #fafafa;
}

.header-sub-text-exam {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: #818181;
}

.header-sub-text-exam-2 {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: #00aa86;
}

.sub-text-exam {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
}

.checkbox-group {
  font-size: 16px;
  font-weight: 400;
  color: #35373c;
}
</style>