hrms-mgt/src/modules/05_placement/components/probation/FormAssign.vue

<template>
  <div class="q-pb-md">
    <div class="toptitle text-dark col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
        v-if="routeName == 'probationWorkAdd'"
      />
      <div v-if="routeName == 'probationWorkAdd'">
        เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
      </div>
      <div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
    </div>
    <q-card
      :bordered="routeName == 'probationWorkAdd'"
      class="col-12 text-dark"
    >
      <div class="row col-12 q-pa-lg">
        <div class="row col-12 q-gutter-lg">
          <div class="col-12 row">
            <div class="col-12 text-top0 items-center">
              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
              ผู้ทดลองปฏิบัติหน้าที่ราชการ
            </div>
            <div class="col-12 row q-col-gutter-md">
              <div class="col-xs-12 col-sm-6">
                <q-input
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="name"
                  label="ชื่อ-สกุล"
                />
              </div>
              <div class="col-xs-12 col-sm-6">
                <q-input
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="position"
                  label="ตำแหน่ง"
                />
              </div>
              <div class="col-12 text-top0 items-center">
                ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
              </div>
              <div class="col-xs-12 col-sm-4">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateExam"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                  @input="handleDateExamChange"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      dense
                      class="full-width datepicker q-mb-md"
                      :model-value="
                        dateExam != null ? date2Thai(dateExam) : null
                      "
                      :label="`${'ตั้งเเต่วันที่'}`"
                      clearable
                      @clear="clearDateExam"
                    >
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <div class="col-xs-12 col-sm-4">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateExam2"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      dense
                      class="full-width datepicker q-mb-md"
                      :model-value="
                        dateExam2 != null ? date2Thai(dateExam2) : null
                      "
                      :label="`${'ถึงวันที่'}`"
                      clearable
                      @clear="clearDateExam2"
                    >
                    </q-input>
                  </template>
                </datepicker>
              </div>
            </div>
          </div>
          <div class="col-12">
            <q-separator size="3px" color="grey-2" />
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top0 items-center">
              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
              ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
              <!-- <q-btn
                v-if="routeName == 'probationWorkAdd'"
                round
                color="primary"
                dense
                icon="mdi-plus"
                flat
                class="q-ml-sm"
                @click="addCaretaker"
              /> -->
            </div>

            <div class="col-12 row q-col-gutter-md">
              <q-select
                :options="OPcaretaker"
                class="col-xs-12 col-sm-6"
                :readonly="routeName != 'probationWorkAdd'"
                dense
                borderless
                :outlined="routeName == 'probationWorkAdd'"
                v-model="caretaker1"
                :label="`ผู้ดูแลคนที่ 1`"
              />
              <q-select
                :options="OPcaretaker"
                class="col-xs-12 col-sm-6"
                :readonly="routeName != 'probationWorkAdd'"
                dense
                borderless
                :outlined="routeName == 'probationWorkAdd'"
                v-model="caretaker2"
                :label="`ผู้ดูแลคนที่ 2`"
              />
            </div>
          </div>
          <div class="col-12">
            <q-separator size="3px" color="grey-2" />
          </div>
          <!-- 3.1 -->
          <div class="col-12 row">
            <div class="col-12 text-top0 items-center">
              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
              ผลการปฏิบัติงาน
            </div>
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
              <q-btn
                v-if="routeName == 'probationWorkAdd'"
                round
                color="primary"
                dense
                icon="mdi-plus"
                flat
                class="q-ml-sm"
                @click="addActivity"
              />
            </div>
            <div class="col-12 row q-gutter-sm">
              <q-card
                v-for="(item, index) in activityArray"
                :key="index"
                flat
                bordered
                class="col-12 q-pa-sm bg-grey-1"
              >
                <div class="col-12 row q-col-gutter-sm">
                  <div class="col-xs-12 col-sm-6">
                    <q-input
                      :readonly="routeName != 'probationWorkAdd'"
                      dense
                      borderless
                      :outlined="routeName == 'probationWorkAdd'"
                      class="bg-white"
                      type="textarea"
                      v-model="activities[index]"
                      label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                    />
                  </div>
                  <div class="col-xs-12 col-sm-5">
                    <q-input
                      :readonly="routeName != 'probationWorkAdd'"
                      dense
                      borderless
                      :outlined="routeName == 'probationWorkAdd'"
                      class="bg-white"
                      type="textarea"
                      v-model="goals[index]"
                      label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                    />
                  </div>
                  <!-- delete -->
                  <div
                    v-if="index > 1"
                    class="col-xs-12 col-sm-1 flex justify-center items-center"
                  >
                    <q-btn
                      flat
                      round
                      color="red"
                      icon="mdi-trash-can-outline"
                      @click="deleteactivity(index)"
                    />
                  </div>
                </div>
              </q-card>
            </div>
          </div>
          <!-- 3.2 -->
          <div class="col-12 row">
            <div class="col-12 text-top2">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
            </div>
            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
              <div class="row col-12 q-gutter-lg">
                <div class="col-12 row">
                  <div class="col-12 text-top2 row items-center">
                    ความรู้ความสามารถในการปฏิบัติงาน
                    <q-btn
                      v-if="routeName == 'probationWorkAdd'"
                      round
                      color="primary"
                      dense
                      icon="mdi-plus"
                      flat
                      class="q-ml-sm"
                      @click="addKnowledge"
                    />
                  </div>
                  <div
                    v-for="(item, index) in knowledgeArray"
                    class="col-12 row q-col-gutter-sm"
                  >
                    <div class="col-11 q-my-xs">
                      <q-select
                        :options="getOpknowledge(item)"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="knowledge[index]"
                        :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1}`"
                      />
                    </div>
                    <div
                      class="col-xs-12 col-sm-1 flex justify-center items-center"
                    >
                      <q-btn
                        v-if="index > 2"
                        flat
                        round
                        color="red"
                        icon="mdi-trash-can-outline"
                        @click="deleteknowledge(index)"
                      />
                    </div>
                  </div>
                </div>

                <div class="col-12 row">
                  <div class="col-12 text-top2 row items-center">
                    ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
                    <!-- <q-btn
                      v-if="routeName == 'probationWorkAdd'"
                      round
                      color="primary"
                      dense
                      icon="mdi-plus"
                      flat
                      class="q-ml-sm"
                    /> -->
                  </div>
                  <q-card
                    flat
                    bordered
                    class="col-12 q-pa-md"
                    style="max-height: 500px; overflow-y: scroll"
                  >
                    <div class="example-row-column-width">
                      <div
                        v-for="item in val1"
                        :key="item.id"
                        class="row bg-grey-3 q-py-xs"
                      >
                        <div class="col-1 text-center">
                          <q-checkbox
                            v-model="item.checked"
                            dense
                            :disable="routeName != 'probationWorkAdd'"
                          />
                        </div>
                        <div class="col-9">1. รัฐธรรมนูญ</div>
                      </div>

                      <div class="row q-mt-xs bg-grey-3 q-py-xs">
                        <div class="col-1"></div>
                        <div class="col-2">2.กฎหมายปกครอง</div>
                      </div>
                      <div class="row bg-grey-2 q-py-xs borderCheck">
                        <div class="col-1"></div>
                        <div class="col-10 q-pl-md">2.1 ทำงานได้</div>
                      </div>
                      <div
                        v-for="item in checkList21"
                        :key="item.id"
                        class="row q-py-xs borderCheck border_y"
                      >
                        <div class="col-1 text-center">
                          <q-checkbox
                            v-model="item.checked"
                            dense
                            :disable="routeName != 'probationWorkAdd'"
                          />
                        </div>

                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
                      </div>
                      <div class="row bg-grey-2 q-py-xs borderCheck">
                        <div class="col-1"></div>
                        <div class="col-10 q-pl-md">
                          2.2 ด้านการปฏิบัติราชการ
                        </div>
                      </div>
                      <div
                        v-for="item in checkList22"
                        :key="item.id"
                        class="row q-py-xs borderCheck border_y"
                      >
                        <div class="col-1 text-center">
                          <q-checkbox
                            v-model="item.checked"
                            dense
                            :disable="routeName != 'probationWorkAdd'"
                          />
                        </div>

                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
                      </div>
                      <div class="row bg-grey-2 q-py-xs borderCheck">
                        <div class="col-1"></div>
                        <div class="col-10 q-pl-md">
                          2.3 ด้านการบริหารทรัพยากรบุคคล
                        </div>
                      </div>
                      <div
                        v-for="item in checkList23"
                        :key="item.id"
                        class="row q-py-xs borderCheck border_y"
                      >
                        <div class="col-1 text-center">
                          <q-checkbox
                            v-model="item.checked"
                            dense
                            :disable="routeName != 'probationWorkAdd'"
                          />
                        </div>

                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
                      </div>
                      <div class="row bg-grey-2 q-py-xs borderCheck">
                        <div class="col-1"></div>
                        <div class="col-10 q-pl-md">
                          2.4 ด้านการบริหารงบประมาณและการคลัง
                        </div>
                      </div>
                      <div
                        v-for="item in checkList24"
                        :key="item.id"
                        class="row q-py-xs borderCheck border_y"
                      >
                        <div class="col-1 text-center">
                          <q-checkbox
                            v-model="item.checked"
                            dense
                            :disable="routeName != 'probationWorkAdd'"
                          />
                        </div>

                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
                      </div>
                      <!-- <div class="row q-mt-xs bg-grey-3 q-py-xs">
                        <div class="col-1 text-center"></div>
                        <div class="col-11">
                          3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                        </div>
                      </div>
                      <div class="row border_y borderCheck">
                        <div class="col-1 text-center"></div>
                        <div class="q-py-sm col-10" style="min-width: 300px">
                          <q-input
                            hide-bottom-space
                            dense
                            outlined
                            lazy-rules
                            v-model="ruleNote"
                            :label="`${'กรอกกฎหมายอื่นๆ'}`"
                            type="textarea"
                          />
                        </div>
                      </div> -->
                    </div>
                  </q-card>
                </div>
                <div class="col-12 row">
                  <div class="col-12 text-top2">
                    กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                  </div>
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12">
                      <q-input
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="OtherLaw"
                        type="textarea"
                      />
                    </div>
                  </div>
                </div>
                <div class="col-12 row">
                  <div class="col-12 text-top2">ทักษะ</div>
                  <div class="col-12 row q-col-gutter-sm">
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPskill"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="skill"
                        label="ด้านที่ 1"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPskill"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="skill2"
                        label="ด้านที่ 2"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPskill"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="skill3"
                        label="ด้านที่ 3"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPskill"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="skill4"
                        label="ด้านที่ 4"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>

          <div class="col-12 row">
            <div class="col-12 text-top2">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
            </div>
            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
              <div class="row col-12 q-gutter-lg">
                <div class="col-12 row">
                  <div class="col-12 text-top2">สมรรถนะหลัก</div>
                  <div class="col-12 row q-col-gutter-sm">
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPmain"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="main"
                        label="ตัวที่ 1"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPmain"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="main2"
                        label="ตัวที่ 2"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPmain"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="main3"
                        label="ตัวที่ 3"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPmain"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="main4"
                        label="ตัวที่ 4"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPmain"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="main5"
                        label="ตัวที่ 4"
                      />
                    </div>
                  </div>
                </div>
                <div class="col-12 row">
                  <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
                  <div class="col-12 row q-col-gutter-sm">
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPgroup"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="group"
                        label="ตัวที่ 1"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPgroup"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="group2"
                        label="ตัวที่ 2"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <q-select
                        :options="OPgroup"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="group3"
                        label="ตัวที่ 3"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>

          <div class="col-12 row">
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
                class="text-weight-regular q-pl-sm"
              >
                ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
              >
            </div>
            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
              <div class="row col-12 q-gutter-lg">
                <div class="col-12 row">
                  <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
                      <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
                      <li>
                        ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
                        เอาใจใส่เป็นมาตรฐานเดียวกัน
                      </li>
                      <li>
                        ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
                      </li>
                    </div>
                  </div>
                </div>
                <div class="col-12 row">
                  <div class="col-12 text-top2">
                    ความมีคุณธรรมจริยธรรม ได้แก่
                  </div>
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>
                        อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
                      </li>
                      <li>
                        มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต
                      </li>
                      <li>
                        ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
                        อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
                        และพระมหากษัตริย์
                      </li>
                    </div>
                  </div>
                </div>
                <div class="col-12 row">
                  <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
                      <li>
                        แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
                      </li>
                      <li>
                        ไม่กระทำการใด ๆ
                        อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
                      </li>
                      <li>
                        ไม่กระทำการใด ๆ
                        อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
                      </li>
                      <li>
                        ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
                      </li>
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>

          <div class="col-12 row">
            <div class="col-12 text-top2">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              3.5 อื่น ๆ (ถ้ามี)
            </div>
            <div class="col-12 row q-col-gutter-md">
              <div class="col-12">
                <q-input
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="Other"
                />
              </div>
            </div>
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
              <q-btn
                v-if="routeName == 'probationWorkAdd'"
                round
                color="primary"
                dense
                icon="mdi-plus"
                flat
                class="q-ml-sm"
                @click="addProductivity"
              />
            </div>
            <div class="col-12 row q-gutter-md">
              <q-card
                v-for="(item, index) in productivityCount"
                flat
                bordered
                class="col-12 q-pa-sm bg-grey-1"
              >
                <div class="col-12 row q-col-gutter-sm">
                  <div class="col-xs-12 col-sm-6">
                    <q-input
                      class="bg-white"
                      type="textarea"
                      :readonly="routeName != 'probationWorkAdd'"
                      dense
                      borderless
                      :outlined="routeName == 'probationWorkAdd'"
                      v-model="Productivitys[index]"
                      label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                    />
                  </div>
                  <div class="col-xs-12 col-sm-5">
                    <q-input
                      class="bg-white"
                      type="textarea"
                      :readonly="routeName != 'probationWorkAdd'"
                      dense
                      borderless
                      :outlined="routeName == 'probationWorkAdd'"
                      v-model="goals1[index]"
                      label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                    />
                  </div>
                  <div
                    v-if="index > 0"
                    class="col-xs-12 col-sm-1 flex justify-center items-center"
                  >
                    <q-btn
                      flat
                      round
                      color="red"
                      icon="mdi-trash-can-outline"
                      @click="deleteProductivitys(index)"
                    />
                  </div>
                </div>
              </q-card>
            </div>
          </div>
          <div class="col-12">
            <q-separator size="3px" color="grey-2" />
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top0 items-center">
              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
              การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2">
                ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
                ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                4.2
                การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                4.3
                การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
              </div>
            </div>
          </div>
          <div class="col-12">
            <q-separator size="3px" color="grey-2" />
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top0 items-center">
              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
              การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
            </div>
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              5.1
              ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
            </div>
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
            </div>
            <div class="col-12 row q-gutter-md">
              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
                <div class="col-12 row q-col-gutter-md">
                  <div class="col-12 column q-ml-md">
                    <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
                    <li>ทักษะที่ ก.ก. กำหนด</li>
                    <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
                    <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
                    <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
                    <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                    <li>
                      อื่นๆ (ถ้ามี)
                      <q-input
                        dense
                        outlined
                        v-model="Other"
                        label="กรอกอื่นๆ"
                      />
                    </li>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              5.3
              ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
            </div>
            <div class="col-12 row q-gutter-md">
              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                <div class="col-12 row q-col-gutter-md">
                  <div class="col-12 column q-ml-md">
                    <li>
                      บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
                    </li>
                    <li>
                      แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
                    </li>
                    <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
            </div>
            <div class="col-12 row q-gutter-md">
              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                <div class="col-12 row q-col-gutter-md">
                  <div class="col-12 column q-ml-md">
                    <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
                    <div class="q-pl-lg">
                      ส่วนที่ 1
                      คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
                    </div>
                    <div class="q-pl-lg">
                      ส่วนที่ 2
                      คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
                    </div>
                    <div class="q-pl-lg">
                      มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
                    </div>
                    <li>
                      สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
                    </li>
                    <div class="q-pl-lg">
                      คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
                    </div>
                    <div>
                      <span style="text-decoration: underline">หมายเหตุ</span>
                      ให้นำคะแนนรวมทั้ง 2
                      ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
                      จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
                    </div>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
          <div class="col-12">
            <q-separator size="3px" color="grey-2" />
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top0 items-center">
              การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                ผู้ทดลองปฏิบัติหน้าที่ราชการ
              </div>
            </div>
            <div class="col-12 row q-col-gutter-md">
              <div class="col-xs-12 col-sm-4">
                <q-input
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="name"
                  label="ชื่อ-สกุล"
                />
              </div>
              <div class="col-xs-12 col-sm-4">
                <q-input
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="position"
                  label="ตำแหน่ง"
                />
              </div>
              <div class="col-xs-12 col-sm-4">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="date1"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      :readonly="routeName != 'probationWorkAdd'"
                      dense
                      borderless
                      :outlined="routeName == 'probationWorkAdd'"
                      class="full-width datepicker"
                      :model-value="date1 != null ? date2Thai(date1) : null"
                      label="ลงวันที่"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
            </div>
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
            </div>
            <div class="col-12 row q-col-gutter-md">
              <q-select
                :options="OPcaretaker1"
                class="col-xs-12 col-sm-8"
                :readonly="routeName != 'probationWorkAdd'"
                dense
                borderless
                :outlined="routeName == 'probationWorkAdd'"
                v-model="caretaker"
                label="ผู้ดูแลคนที่ 1"
              />
              <div class="col-xs-12 col-sm-4">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="date2"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      :readonly="routeName != 'probationWorkAdd'"
                      dense
                      borderless
                      :outlined="routeName == 'probationWorkAdd'"
                      class="full-width datepicker"
                      :model-value="date2 != null ? date2Thai(date2) : null"
                      label="ลงวันที่"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
              <q-select
                :options="OPcaretaker"
                class="col-xs-12 col-sm-8"
                :readonly="routeName != 'probationWorkAdd'"
                dense
                borderless
                :outlined="routeName == 'probationWorkAdd'"
                v-model="caretaker2"
                label="ผู้ดูแลคนที่ 2"
              />
              <div class="col-xs-12 col-sm-4">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="date3"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      :readonly="routeName != 'probationWorkAdd'"
                      dense
                      s
                      borderless
                      :outlined="routeName == 'probationWorkAdd'"
                      class="full-width datepicker"
                      :model-value="date3 != null ? date2Thai(date3) : null"
                      label="ลงวันที่"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
            </div>
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              ผู้บังคับบัญชาผู้มอบหมายงาน
            </div>
            <div class="col-12 row q-col-gutter-md">
              <q-select
                :options="OPcaretaker1"
                class="col-xs-12 col-sm-8"
                :readonly="routeName != 'probationWorkAdd'"
                dense
                borderless
                :outlined="routeName == 'probationWorkAdd'"
                v-model="commander"
                label="ผู้บังคับบัญชา"
              />
              <div class="col-xs-12 col-sm-4">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="date4"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      :readonly="routeName != 'probationWorkAdd'"
                      dense
                      borderless
                      :outlined="routeName == 'probationWorkAdd'"
                      class="full-width datepicker"
                      :model-value="date4 != null ? date2Thai(date4) : null"
                      label="ลงวันที่"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
            </div>
          </div>
        </div>
      </div>
      <q-separator v-show="routeName == 'probationWorkAdd'" />
      <div
        v-show="routeName == 'probationWorkAdd'"
        class="flex justify-end q-pa-sm q-gutter-sm"
      >
        <q-btn unelevated label="บันทึก" color="public" @click="saveData()" />
      </div>
    </q-card>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, computed, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
// import type { QForm } from "quasar";
const val1 = ref([
  {
    id: 1,
    text: "1.รัฐธรรมนูญ",
    checked: false,
  },
]);
const val3 = ref(false);
const router = useRouter();
const test = ref<string>("");
const ruleNote = ref<string>("");
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dateExam = ref<Date | null>(null);
const dateExam2 = ref<Date | null>(null);

const id = ref<number>();
const personal_id = ref<string>();
const knowledge_skill_map_no = ref<string[]>([]);
const round_no = ref<number>();
const date_start = ref<Date>();
const date_finish = ref<Date>();
const behavior_desc = ref<string>();
const other_desc = ref<object>({});
const other4_desc = ref<string>();
const other5_no1_desc = ref<object>({});
const other5_no2_desc = ref<object>({});
const experimenter_dated = ref<Date>();
const createdAt = ref<Date>();
const updatedAt = ref<Date>();

const clearDateExam = () => {
  dateExam.value = null;
};
const clearDateExam2 = () => {
  dateExam2.value = null;
};

const routeName = router.currentRoute.value.name;
const handleDateExamChange = (value: Date | null) => {
  if (value) {
    const newDate = new Date(value);
    newDate.setMonth(newDate.getMonth() + 6);
    dateExam2.value = newDate;
  } else {
    dateExam2.value = null;
  }
};
watch(dateExam, (newDate, oldDate) => {
  if (newDate && newDate !== oldDate) {
    const newDate2 = new Date(newDate);
    newDate2.setMonth(newDate2.getMonth() + 6);
    dateExam2.value = newDate2;
  }
});
const name = ref<string>("นายสมคิด ยอดใจ");
const position = ref<string>("นักจัดการงานทั่วไป");

const caretakerCount = ref<number>(2);
const caretakerMax = ref<number>(6);

const caretaker1 = ref<string>("");
const caretaker2 = ref<string>("");
const OPcaretaker = [
  "นางสาวรัชภรณ์ ภักดี",
  "นางสาวทวิดา กมลเวชชี",
  "test1",
  "test2",
  "test3",
  "test4",
];
const addCaretaker = () => {
  caretakerCount.value++;
};
const getOptions = (item: number) => {
  return OPcaretaker;
};
const resetCaretakers = () => {
  caretakerCount.value = 2;
  caretakers.value = Array(caretakerCount.value).fill("");
};
//-----------------(3.1)-----------//
const activityCount = ref<number>(2);
const activities = ref<string[]>(Array(activityCount.value).fill(""));
const goals = ref<string[]>(Array(activityCount.value).fill(""));

const addActivity = () => {
  activityCount.value++;
};
const deleteactivity = (item: number) => {
  activities.value.splice(item, 1);
  goals.value.splice(item, 1);
  if (activityCount.value > 2) {
    activityCount.value--;
  }
};
const activityArray = computed(() => {
  return Array(activityCount.value).fill("");
});
const resetActivity = () => {
  activityCount.value = 2;
  activities.value = Array(activityCount.value).fill("");
  goals.value = Array(activityCount.value).fill("");
};
//-----------------(3.2)-----------//
const knowledgeCount = ref<number>(3);
const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
const OPknowledge = ["1", "2", "3", "4"];
const addKnowledge = () => {
  if (knowledgeCount.value < 6) {
    knowledgeCount.value++;
  }
};
const knowledgeArray = computed(() => {
  return Array(knowledgeCount.value).fill("");
});
const getOpknowledge = (index: number) => {
  return OPknowledge;
};
const deleteknowledge = (item: number) => {
  knowledge.value.splice(item, 1);
  if (knowledgeCount.value > 3) {
    knowledgeCount.value--;
  }
};

const productivityCount = ref<number>(1);
const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
const deleteProductivitys = (item: number) => {
  Productivitys.value.splice(item, 1);
  goals1.value.splice(item, 1);
  if (productivityCount.value > 1) {
    productivityCount.value--;
  }
};
const addProductivity = () => {
  productivityCount.value++;
};
const resetProductivity = () => {
  productivityCount.value = 1;
  Productivitys.value = Array(productivityCount.value).fill("");
  goals1.value = Array(productivityCount.value).fill("");
};
const checkList21 = ref([
  {
    id: 1,
    text: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
    checked: false,
  },
  {
    id: 2,
    text: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
    checked: false,
  },
  { id: 3, text: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่", checked: false },
  {
    id: 4,
    text: "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙",
    checked: false,
  },
  {
    id: 5,
    text: "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒",
    checked: false,
  },
  {
    id: 6,
    text: "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
    checked: false,
  },
]);
const checkList22 = ref([
  {
    id: 1,
    text: "2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
    checked: false,
  },
  {
    id: 2,
    text: "2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
    checked: false,
  },
  {
    id: 3,
    text: "2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
    checked: false,
  },
  {
    id: 4,
    text: "2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
    checked: false,
  },
  {
    id: 5,
    text: "2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
    checked: false,
  },
  {
    id: 6,
    text: "2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
    checked: false,
  },
]);
const checkList23 = ref([
  {
    id: 1,
    text: "2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
    checked: false,
  },
  {
    id: 2,
    text: "2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
    checked: false,
  },
]);
const checkList24 = ref([
  {
    id: 1,
    text: "2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
    checked: false,
  },
  {
    id: 2,
    text: "2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
    checked: false,
  },
  {
    id: 3,
    text: "2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
    checked: false,
  },
  {
    id: 4,
    text: "2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
    checked: false,
  },
  {
    id: 5,
    text: "2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
    checked: false,
  },
  {
    id: 6,
    text: "2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
    checked: false,
  },
  {
    id: 7,
    text: "2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
    checked: false,
  },
  {
    id: 8,
    text: "2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
    checked: false,
  },
  {
    id: 9,
    text: "2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
    checked: false,
  },
  {
    id: 10,
    text: "2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔",
    checked: false,
  },
  {
    id: 11,
    text: "2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕",
    checked: false,
  },
  {
    id: 12,
    text: "2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗",
    checked: false,
  },
  {
    id: 13,
    text: "2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗",
    checked: false,
  },
  {
    id: 14,
    text: "2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘",
    checked: false,
  },
]);
const law = ref([]);
const listlaw = [
  { id: 1, label: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร" },
  { id: 2, label: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการเเผ่นดิน" },
  { id: 3, label: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่" },
  {
    id: 4,
    label:
      "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจาร์ณ พ.ศ. ๒๕๓๙",
  },
  {
    id: 5,
    label:
      "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองเเละสังคมที่ดี พ.ศ. ๒๕๔๒",
  },
  {
    id: 5,
    label:
      "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์เเละวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
  },
];
interface CheckboxItem {
  id: number;
  text: string;
  checked: boolean;
}
const saveData = () => {
  // สร้าง Object ที่เก็บข้อมูล Checkbox
  const checkboxData: Record<string, CheckboxItem[]> = {
    val1: val1.value.filter((item) => item.checked),
    checkList21: checkList21.value.filter((item) => item.checked),
    checkList22: checkList22.value.filter((item) => item.checked),
    checkList23: checkList23.value.filter((item) => item.checked),
    checkList24: checkList24.value.filter((item) => item.checked),
  };

  // แสดงข้อมูลใน Console
  console.log("3.2 ข้อมูลติ๊ก", checkboxData);
  
};
const OtherLaw = ref<string>("");

const skill = ref<string>("ความรู้ความสามารถด้าน 1");
const skill2 = ref<string>("ความรู้ความสามารถด้าน 2");
const skill3 = ref<string>("ความรู้ความสามารถด้าน 3");
const skill4 = ref<string>("ความรู้ความสามารถด้าน 4");
const OPskill = [""];

const main = ref<string>("คุณธรรมจริยธรรม");
const main2 = ref<string>("การให้บริการที่ดี");
const main3 = ref<string>("การมุ่งผลสัมฤทธิ์");
const main4 = ref<string>("ทํางานเป็นทีม");
const main5 = ref<string>("การสั่งสมความเชี่ยวชาญในอาชีพ");
const OPmain = [""];

const group = ref<string>("");
const group2 = ref<string>("");
const group3 = ref<string>("");
const OPgroup = [""];

const Other = ref<string>("");

const commander = ref<string>("");

const date1 = ref<Date>(new Date());
const date2 = ref<Date>(new Date());
const date3 = ref<Date>(new Date());
const date4 = ref<Date>(new Date());
</script>
<style lang="scss" scoped>
.border_y {
  border-left: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
}
.borderCheck {
  border-bottom: 1px solid #d8d8d8;
}
.text-top2 {
  font-weight: 500;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}
.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}
.text-Hd {
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 5px;
  color: #02a998;
}
.bin {
  align-items: center;
  justify-content: center;
}
</style>