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

<template>
  <q-form ref="myForm">
    <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
                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                    hide-bottom-space
                    :readonly="routeName != 'probationWorkAdd'"
                    dense
                    borderless
                    :outlined="routeName == 'probationWorkAdd'"
                    v-model="fullname"
                    label="ชื่อ-สกุล"
                  />
                </div>
                <div class="col-xs-12 col-sm-6">
                  <q-input
                    :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
                    hide-bottom-space
                    :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">
                  <q-select
                    :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']"
                    hide-bottom-space
                    :options="monthOp"
                    class="col-xs-12 col-sm-6"
                    :readonly="routeName !== 'probationWorkAdd'"
                    dense
                    borderless
                    option-label="label"
                    :outlined="routeName === 'probationWorkAdd'"
                    v-model="monthSelect"
                    :label="`ระยะเวลากี่เดือน`"
                  />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="date_start"
                    :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
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        hide-bottom-space
                        class="full-width datepicker q-mb-md"
                        :model-value="
                          date_start != null ? date2Thai(date_start) : null
                        "
                        :label="`${'ตั้งเเต่วันที่'}`"
                        clearable
                        outlined
                        @clear="clearDateExam"
                      >
                      </q-input>
                    </template>
                  </datepicker>
                </div>
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="date_finish"
                    :locale="'th'"
                    autoApply
                    borderless
                    :readonly="isDatePicker2Readonly"
                    :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
                        outlined
                        readonly
                        class="full-width datepicker q-mb-md"
                        :model-value="
                          date_finish != null ? date2Thai(date_finish) : 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 คน)
              </div>

              <div class="col-12 row q-col-gutter-md">
                <q-select
                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                  :options="OPcaretaker"
                  class="col-xs-12 col-sm-6"
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  hide-bottom-space
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="caretaker1"
                  :label="`ผู้ดูแลคนที่ 1`"
                />
                <q-select
                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                  :options="OPcaretaker"
                  hide-bottom-space
                  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
                        :rules="
                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        "
                        hide-bottom-space
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        class="bg-white"
                        type="textarea"
                        v-model="activity_desc[index]"
                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-5">
                      <q-input
                        :rules="
                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        "
                        hide-bottom-space
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        class="bg-white"
                        type="textarea"
                        v-model="goal_desc[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
                          :rules="
                            index < 3
                              ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
                              : []
                          "
                          hide-bottom-space
                          :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 class="bg-grey-3 q-py-xs">
                          <div
                            class="row"
                            v-for="(item, index) in checkRule"
                            :key="item.id"
                          >
                            <div v-if="index == 0" class="col-1 text-center">
                              <q-checkbox
                                v-show="item.status_select === 1"
                                v-model="item.checked"
                                dense
                                :disable="routeName != 'probationWorkAdd'"
                              />
                            </div>
                            <div v-if="index == 0" class="col-11">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 1"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 ">
                              {{ item.description }}
                            </div>
                          </div>
                          </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 2"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div
                            v-else-if="index > 2 && index < 9"
                            class="row borderCheck border_y q-py-xs"
                          >
                            <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.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 9"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div
                            v-else-if="index > 9 && index < 16"
                            class="row borderCheck border_y q-py-xs"
                          >
                            <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.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 16"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div
                            v-else-if="index > 16 && index < 19"
                            class="row borderCheck border_y q-py-xs"
                          >
                            <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.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 19"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div
                            v-else-if="index > 19 && index < 30"
                            class="row borderCheck border_y q-py-xs"
                          >
                            <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.description }}
                            </div>
                          </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
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                          ]"
                          :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
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                          ]"
                          :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
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                          ]"
                          :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
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                          ]"
                          :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
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :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
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :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
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :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
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :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
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="OPmain"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="main5"
                          label="ตัวที่ 5"
                        />
                      </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
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                          ]"
                          :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
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                          ]"
                          :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
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                          ]"
                          :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 ProductivityArray"
                  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
                        hide-bottom-space
                        :rules="
                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        "
                        class="bg-white"
                        type="textarea"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="output_desc[index]"
                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-5">
                      <q-input
                        :rules="
                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        "
                        hide-bottom-space
                        class="bg-white"
                        type="textarea"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="indicator_desc[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="Other5"
                          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="fullnameFoot"
                    label="ชื่อ-สกุล"
                  />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <q-input
                    :readonly="routeName != 'probationWorkAdd'"
                    dense
                    borderless
                    :outlined="routeName == 'probationWorkAdd'"
                    v-model="positionFoot"
                    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
                        hide-bottom-space
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :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="OPcaretaker"
                  class="col-xs-12 col-sm-8"
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="caretakerFoot"
                  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
                        hide-bottom-space
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :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="caretakerFoot2"
                  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
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        hide-bottom-space
                        :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="OPcaretaker"
                  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
                        hide-bottom-space
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :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>
  </q-form>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, computed, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

const $q = useQuasar();
const val1 = ref([
  {
    id: 1,
    text: "1.รัฐธรรมนูญ",
    checked: false,
  },
]);

const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai, notifyError } = mixin;

const checkValidate = ref<boolean>(false);
const myForm = ref<any>(null);
const fullnameFoot = ref<string>("");
const positionFoot = ref<string>("");
const caretakerFoot = ref<string>("");
const caretakerFoot2 = ref<string>("");
const id = ref<number>();
const personal_id = ref<string>();
const fullname = ref<string>();
const knowledge_skill_map_no = ref<string[]>([]);
const round_no = ref<number>();
const date_start = ref<Date | null>(null);
const date_finish = ref<Date | null>(null);
const behavior_desc = ref<string>();
const other_desc = ref<object>({});
const other4_desc = ref<string>();
const Other5 = 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 = () => {
  date_start.value = null;
};
const clearDateExam2 = () => {
  date_finish.value = null;
};
const isDatePicker2Readonly = computed(() => {
  return date_start.value === null;
});
const routeName = router.currentRoute.value.name;
const name = ref<string>("");
const position = ref<string>("");

const monthSelect = ref<number>();
const caretaker1 = ref<string>("");
const caretaker2 = ref<string>("");
const OPcaretaker = [
  "นางสาวรัชภรณ์ ภักดี",
  "นางสาวทวิดา กมลเวชชี",
  "test1",
  "test2",
  "test3",
  "test4",
];
const monthOp = [{ value: "6", label: "6 เดือน" }];
//-----------------(3.1)-----------//
const activityCount = ref<number>(2);
const activityDataArray = ref<any[]>([]);
const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
const addActivity = () => {
  activityCount.value++;
};
const deleteactivity = (item: number) => {
  activity_desc.value.splice(item, 1);
  goal_desc.value.splice(item, 1);
  if (activityCount.value > 2) {
    activityCount.value--;
  }
};
const activityArray = computed(() => {
  return Array(activityCount.value).fill("");
});
const resetActivity = () => {
  activityCount.value = 2;
  activity_desc.value = Array(activityCount.value).fill("");
  goal_desc.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 checked = ref<boolean>(false);
const productivityCount = ref<number>(1);
const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const deleteProductivitys = (item: number) => {
  output_desc.value.splice(item, 1);
  indicator_desc.value.splice(item, 1);
  if (productivityCount.value > 1) {
    productivityCount.value--;
  }
};
const addProductivity = () => {
  productivityCount.value++;
};
const ProductivityArray = computed(() => {
  return Array(productivityCount.value).fill("");
});

const checkRule = ref([
  {
    id: 1,
    parent_id: 0,
    description: "๑. รัฐธรรมนูญ",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:39:59.000Z",
    updatedAt: "2023-07-24T10:39:59.000Z",
    checked: false,
  },
  {
    id: 2,
    parent_id: 0,
    description: "๒. กฎหมายปกครอง",
    status_select: 0,
    active: 1,
    createdAt: "2023-07-24T10:39:59.000Z",
    updatedAt: "2023-07-24T10:39:59.000Z",
    checked: false,
  },
  {
    id: 3,
    parent_id: 2,
    description: "๒.๑. ด้านการบริหารราชการ เช่น",
    status_select: 0,
    active: 1,
    createdAt: "2023-07-24T10:39:59.000Z",
    updatedAt: "2023-07-24T10:39:59.000Z",
    checked: false,
  },
  {
    id: 4,
    parent_id: 3,
    description: "๑) กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:39:59.000Z",
    updatedAt: "2023-07-24T10:39:59.000Z",
    checked: false,
  },
  {
    id: 5,
    parent_id: 3,
    description: "๒) กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:39:59.000Z",
    updatedAt: "2023-07-24T10:39:59.000Z",
    checked: false,
  },
  {
    id: 6,
    parent_id: 3,
    description: "๓) กฎหมายว่าด้วยลักษณะปกครองท้องที่",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:39:59.000Z",
    updatedAt: "2023-07-24T10:39:59.000Z",
    checked: false,
  },
  {
    id: 7,
    parent_id: 3,
    description:
      "๔) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์พ.ศ.๒๕๓๙",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:39:59.000Z",
    updatedAt: "2023-07-24T10:39:59.000Z",
    checked: false,
  },
  {
    id: 8,
    parent_id: 3,
    description:
      "๕) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดีพ.ศ.๒๕๔๒",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 9,
    parent_id: 3,
    description:
      "๖) พระราชกฤษฎีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ.๒๕๔๖",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,  
  },
  {
    id: 10,
    parent_id: 2,
    description: "๒.๒. ด้านการปฏิบัติราชการ เช่น",
    status_select: 0,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 11,
    parent_id: 10,
    description: "๑) ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 12,
    parent_id: 10,
    description: "๒) กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 13,
    parent_id: 10,
    description: "๓) กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 14,
    parent_id: 10,
    description: "๔) กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 15,
    parent_id: 10,
    description: "๕) ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 16,
    parent_id: 10,
    description: "๖) ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 17,
    parent_id: 2,
    description: "๒.๓ ด้านการบริหารทรัพยากรบุคคล เช่น",
    status_select: 0,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 18,
    parent_id: 17,
    description:
      "๑) กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 19,
    parent_id: 17,
    description:
      "๒) กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 20,
    parent_id: 2,
    description: "๒.๔. ด้านการบริหารงบประมาณและการคลัง เช่น",
    status_select: 0,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 21,
    parent_id: 20,
    description:
      "๑) ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 22,
    parent_id: 20,
    description:
      "๒) ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 23,
    parent_id: 20,
    description:
      "๓) ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 24,
    parent_id: 20,
    description: "๔) พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 25,
    parent_id: 20,
    description:
      "๕) ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 26,
    parent_id: 20,
    description: "๖) กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 27,
    parent_id: 20,
    description:
      "๗) พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 28,
    parent_id: 20,
    description: "๘) พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
  {
    id: 29,
    parent_id: 20,
    description:
      "๙) ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
    status_select: 1,
    active: 1,
    createdAt: "2023-07-24T10:40:00.000Z",
    updatedAt: "2023-07-24T10:40:00.000Z",
    checked: false,
  },
]);
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 nameRef = ref()
// const positionRef = ref()
// const monthRef = ref()
// const startDateRef = ref()

// const caregiverRef1 = ref()
// const caregiverRef2 = ref()

const putData = () => {
  const checkboxData: Record<string, CheckboxItem[]> = {
    checkRule: checkRule.value.filter((item) => item.checked),
  };

  const assign_job = activityArray.value.map((item, index) => ({
    id: index + 1,
    activity_desc: activity_desc.value[index],
    goal_desc: goal_desc.value[index],
  }));
  const know_ledge = knowledgeArray.value.map((item, index) => ({
    id: index + 1,
    knowledge: knowledge.value[index],
  }));
  const Productivity_assign = ProductivityArray.value.map((item, index) => ({
    id: index + 1,
    output_desc: output_desc.value[index],
    indicator_desc: indicator_desc.value[index],
  }));
  const data = {
    fullname: fullname.value,
    position: position.value,
    monthSelect: monthSelect.value,
    date_start: date_start.value,
    date_finish: date_finish.value,
    caretaker_1: caretaker1.value,
    caretaker_2: caretaker2.value,
    knowledge: know_ledge,
    assign_job: assign_job,
    otherlaw: OtherLaw.value,
    skill: skill.value,
    skill_2: skill2.value,
    skill_3: skill3.value,
    skill_4: skill4.value,
    main: main.value,
    main_2: main2.value,
    main_3: main3.value,
    main_4: main4.value,
    main_5: main5.value,
    group: group.value,
    group_2: group2.value,
    group_3: group3.value,
    other: Other.value,
    other_5: Other5.value,
    productivity_assign: Productivity_assign,
    commander: commander.value,
    date_1: date1.value,
    date_2: date2.value,
    date_3: date3.value,
    date_4: date4.value,
    fullname_foot: fullnameFoot.value,
    position_foot: positionFoot.value,
    caretaker_foot: caretakerFoot.value,
    caretaker_foot2: caretakerFoot2.value,
    checkarray: checkboxData,
  };
  console.log("test", data);
};

const saveData = async () => {
  // myForm.value.resetValidation();
  // nameRef.value.validate();
  // positionRef.value.validate();
  // monthRef.value.validate();
  // startDateRef.value.validate();
  // caregiverRef1.value.validate();
  // caregiverRef2.value.validate();
  // workInfopRef.value.validate();
  myForm.value.validate().then(async (result: boolean) => {
    if (result) {
      // แสดงข้อมูลใน Console

      $q.dialog({
        title: "บันทึกข้อมูล",
        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
        cancel: {
          flat: true,
          const: "negative",
        },
      })
        .onOk(async () => {
          putData();
        })
        .onCancel(() => {})
        .onDismiss(() => {});
    } else {
      // ลอง
      // putData();
      notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
    }
  });
};
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 = ["test"];

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

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

const date1 = ref<Date>();
const date2 = ref<Date>();
const date3 = ref<Date>();
const date4 = ref<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>