hrms-mgt/src/modules/05_placement/components/probation/AddWork.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)"
      />
      <div v-if="routeName == 'probationWorkAdd'">
        เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
      </div>
      <div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
    </div>
    <q-card bordered 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>
          </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"
              />
              <q-btn
                v-if="caretakerCount > 1 && routeName == 'probationWorkAdd'"
                round
                color="red"
                dense
                icon="undo"
                flat
                class="q-ml-sm"
                @click="resetCaretakers"
                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
              >
              <q-chip color="primary" text-color="white" icon="flag_circle">
                {{ caretakerCount }}
              </q-chip>
            </div>

            <div class="col-12 row q-col-gutter-md">
              <q-select
                v-for="item in caretakerCount"
                :key="item"
                :options="getOptions(item)"
                class="col-xs-12 col-sm-6"
                :readonly="routeName != 'probationWorkAdd'"
                dense
                borderless
                :outlined="routeName == 'probationWorkAdd'"
                v-model="caretakers[item - 1]"
                :label="`ผู้ดูแลคนที่ ${item}`"
              />
            </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">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"
              />
              <q-btn
                v-if="activityCount > 2 && routeName == 'probationWorkAdd'"
                round
                color="red"
                dense
                icon="undo"
                flat
                class="q-ml-sm"
                @click="resetActivity"
                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
              >
              <q-chip color="primary" text-color="white" icon="flag_circle">
                {{ activityCount }}
              </q-chip>
            </div>
            <div class="col-12 row q-gutter-md">
              <q-card
                v-for="item in activityCount"
                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[item - 1]"
                      label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                    />
                  </div>
                  <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="goals[item - 1]"
                      label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                    />
                  </div>
                </div>
              </q-card>
            </div>
          </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.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"
                    />
                    <q-btn
                      v-if="
                        knowledgeCount > 3 && routeName == 'probationWorkAdd'
                      "
                      round
                      color="red"
                      dense
                      icon="undo"
                      flat
                      class="q-ml-sm"
                      @click="resetKnowledge"
                      ><q-tooltip>รีเช็ต</q-tooltip></q-btn
                    >
                    <q-chip
                      color="primary"
                      text-color="white"
                      icon="flag_circle"
                    >
                      {{ knowledgeCount }}
                    </q-chip>
                  </div>
                  <div class="col-12 row q-col-gutter-sm">
                    <div v-for="item in knowledgeCount" class="col-12">
                      <q-select
                        :options="getOpknowledge(item)"
                        class="bg-white"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="knowledge[item - 1]"
                        :label="`ความรู้ความสามารถในการปฏิบัติงาน ${item}`"
                      />
                    </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="row bg-grey-3 q-py-xs">
                        <div class="col-1 text-center">
                          <q-checkbox
                            v-model="val1"
                            dense
                            :disable="routeName != 'probationWorkAdd'"
                          />
                        </div>
                        <div class="col-2 ">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">
                          <q-checkbox
                            v-model="val3"
                            dense
                            :disable="routeName != 'probationWorkAdd'"
                          />
                        </div>
                        <div class="col-11">3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน</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"
                      />
                    </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"
              />
			  <q-btn
                v-if="productivityCount > 1 && routeName == 'probationWorkAdd'"
                round
                color="red"
                dense
                icon="undo"
                flat
                class="q-ml-sm"
                @click="resetProductivity"
                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
              >
              <q-chip color="primary" text-color="white" icon="flag_circle">
                {{ productivityCount }}
              </q-chip>
            </div>
            <div class="col-12 row q-gutter-md">
              <q-card v-for="item 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[item-1]"
                      label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                    />
                  </div>
                  <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="goals1[item-1]"
                      label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                    />
                  </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="OPcaretaker2"
                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" />
      </div>
    </q-card>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
// import type { QForm } from "quasar";
const val1 = ref(false);
const val3 = ref(false);
const router = useRouter();

const mixin = useCounterMixin();
const { date2Thai } = mixin;

const routeName = router.currentRoute.value.name;

const name = ref<string>("นายสมคิด ยอดใจ");
const position = ref<string>("นักจัดการงานทั่วไป");

const caretakerCount = ref<number>(1);
const caretakerMax = ref<number>(6);
const caretakers = ref<string[]>(Array(caretakerCount.value).fill(""));
const caretaker2 = ref<string>("");
const OPcaretaker = [
  "นางสาวรัชภรณ์ ภักดี",
  "นางสาวทวิดา กมลเวชชี",
  "test1",
  "test2",
  "test3",
  "test4",
];
const addCaretaker = () => {
  caretakerCount.value++;
};
const getOptions = (item: number) => {
  return OPcaretaker;
};
const resetCaretakers = () => {
  caretakerCount.value = 1;
  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 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 = () => {
  knowledgeCount.value++;
};
const getOpknowledge = (index: number) => {
  return OPknowledge;
};
const resetKnowledge = () => {
  knowledgeCount.value = 3;
  knowledge.value = Array(knowledgeCount.value).fill("");
};

const productivityCount = ref<number>(1);
const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));

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 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์เเละวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
  },
];
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;
}
</style>