hrms-recruit/src/modules/01_exam/components/Form/Profile/Family.vue

<!-- card ข้อมูลครอบครัว -->
<template>
  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
    <HeaderTop
      v-model:edit="edit"
      header="ข้อมูลครอบครัว"
      icon="mdi-account-group"
      :save="saveData"
      :addData="addData"
      :cancel="cancelData"
      :changeBtn="changeBtn"
    />
    <q-form ref="myform" class="col-12">
      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
          <label class="text-weight-bold">• คู่สมรส</label>
          <q-radio
            v-model="familyData.same"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="1"
            label="มี"
            dense
            :disable="!edit"
            @update:model-value="selectRadio"
          />
          <q-radio
            v-model="familyData.same"
            checked-icon="task_alt"
            unchecked-icon="panorama_fish_eye"
            val="0"
            label="ไม่มี"
            dense
            :disable="!edit"
            @update:model-value="selectRadio"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="familyData.prefixIdC"
            emit-value
            map-options
            option-label="name"
            :options="prefixOptions"
            option-value="id"
            :label="`${'คำนำหน้า'}`"
          />
        </div>

        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.firstnameC"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.lastnameC"
            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.occupationC"
            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
            :label="`${'อาชีพ'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.nationalityC"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
          />
        </div>

        <div class="col-xs-12 text-weight-bold">• บิดา</div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="familyData.prefixIdM"
            emit-value
            map-options
            option-label="name"
            :options="prefixOptions"
            option-value="id"
            :label="`${'คำนำหน้า'}`"
          />
        </div>

        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.firstnameM"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.lastnameM"
            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.occupationM"
            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
            :label="`${'อาชีพ'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.nationalityM"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
          />
        </div>

        <div class="col-xs-12 text-weight-bold">• มารดา</div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-select
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
            :borderless="!edit"
            :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
            :outlined="edit"
            dense
            lazy-rules
            v-model="familyData.prefixIdF"
            emit-value
            map-options
            option-label="name"
            :options="prefixOptions"
            option-value="id"
            :label="`${'คำนำหน้า'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.firstnameF"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.lastnameF"
            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.occupationF"
            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
            :label="`${'อาชีพ'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2">
          <q-input
            :class="getClass(edit)"
            hide-bottom-space
            :outlined="edit"
            dense
            lazy-rules
            :readonly="!edit"
            :borderless="!edit"
            v-model="familyData.nationalityF"
            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
            :label="`${'สัญชาติ'}`"
          />
        </div>
      </div>
    </q-form>
  </q-card>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import type { PropType } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultFamily } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'

const mixin = useCounterMixin()
const { date2Thai, calAge } = mixin

const edit = ref<boolean>(false)
const addData = ref<boolean>(true)
const myform = ref<any>()
const familyData = ref<Family>(defaultFamily)
const statusOptions = ref<DataOption[]>([])

// const prefixOptions = ref<any>([
//   { id: "1", name: "นาย" },
//   { id: "2", name: "นาง" },
//   { id: "3", name: "นางสาว" },
// ]);

const props = defineProps({
  prefixOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  statusEdit: {
    type: Boolean,
    required: true
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log('not function')
  },
  step: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update:statusEdit'])

onMounted(() => {
  if (props.step !== 2) {
    addData.value = false
  }
})

const saveData = async () => {
  await myform.value.validate().then(async (success: boolean) => {
    if (success) {
    } else {
    }
  })
}

const changeBtn = async () => {
  if (edit.value == true) {
    if (props.statusEdit === true) {
      edit.value = false
      props.notiNoEdit()
    } else {
      emit('update:statusEdit', true)
    }
  } else {
    emit('update:statusEdit', false)
  }
}

const selectRadio = (e: boolean, i: any) => {
  if (!e) {
    familyData.value.prefixIdC = ''
    familyData.value.firstnameC = ''
    familyData.value.lastnameC = ''
    familyData.value.occupationC = ''
  }
}

const cancelData = () => {}

const getClass = (val: boolean) => {
  return {
    'full-width inputgreen cursor-pointer': val,
    'full-width cursor-pointer': !val
  }
}
</script>