ui เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ

src/modules/05_placement/components/probation/FormAssign.vue

@@ -49,6 +49,73 @@
                   label="ตำแหน่ง"
                 />
               </div>
+              <div class="col-12 text-top0 items-center">
+                ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                <datepicker
+              menu-class-name="modalfix"
+              v-model="dateExam"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                 
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
+                  :label="`${'ตั้งเเต่วันที่'}`"
+                  clearable
+                  @clear="clearDateExam"
+                >
+
+                </q-input>
+              </template>
+            </datepicker>
+              </div>
+              
+              <div class="col-xs-12 col-sm-6">
+                <datepicker
+              menu-class-name="modalfix"
+              v-model="dateExam2"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                 
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="dateExam2 != null ? date2Thai(dateExam2) : null"
+                  :label="`${'ตั้งเเต่วันที่'}`"
+                  clearable
+                  @clear="clearDateExam2"
+                >
+
+                </q-input>
+              </template>
+            </datepicker>
+              </div>
+              
             </div>
           </div>
           <div class="col-12">
@@ -58,7 +125,7 @@
             <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
+              <!-- <q-btn
                 v-if="routeName == 'probationWorkAdd'"
                 round
                 color="primary"
@@ -67,39 +134,36 @@
                 flat
                 class="q-ml-sm"
                 @click="addCaretaker"
-              />
+              /> -->
-              <q-btn
-                v-if="caretakerCount > 2 && routeName == 'probationWorkAdd'"
-                round
-                color="red"
-                dense
-                icon="undo"
-                flat
-                class="q-ml-sm"
-                @click="resetCaretakers"
-                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
-              >
-
             </div>
 
             <div class="col-12 row q-col-gutter-md">
               <q-select
-                v-for="item in caretakerCount"
+                :options="OPcaretaker"
-                :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]"
+                v-model="caretaker1"
-                :label="`ผู้ดูแลคนที่ ${item}`"
+                :label="`ผู้ดูแลคนที่ 1`"
+              />
+              <q-select
+                :options="OPcaretaker"
+                class="col-xs-12 col-sm-6"
+                :readonly="routeName != 'probationWorkAdd'"
+                dense
+                borderless
+                :outlined="routeName == 'probationWorkAdd'"
+                v-model="caretaker2"
+                :label="`ผู้ดูแลคนที่ 2`"
               />
             </div>
           </div>
           <div class="col-12">
             <q-separator size="3px" color="grey-2" />
           </div>
+          <!-- 3.1 -->
           <div class="col-12 row">
             <div class="col-12 text-top0 items-center">
               <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
@@ -118,22 +182,11 @@
                 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
-              >
-
             </div>
-            <div class="col-12 row q-gutter-md">
+            <div class="col-12 row q-gutter-sm">
               <q-card
-                v-for="item in activityCount"
+                v-for="(item, index) in activityArray"
+                :key="index"
                 flat
                 bordered
                 class="col-12 q-pa-sm bg-grey-1"
@@ -147,11 +200,11 @@
                       :outlined="routeName == 'probationWorkAdd'"
                       class="bg-white"
                       type="textarea"
-                      v-model="activities[item - 1]"
+                      v-model="activities[index]"
                       label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                     />
                   </div>
-                  <div class="col-xs-12 col-sm-6">
+                  <div class="col-xs-12 col-sm-5">
                     <q-input
                       :readonly="routeName != 'probationWorkAdd'"
                       dense
@@ -159,14 +212,28 @@
                       :outlined="routeName == 'probationWorkAdd'"
                       class="bg-white"
                       type="textarea"
-                      v-model="goals[item - 1]"
+                      v-model="goals[index]"
                       label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                     />
                   </div>
+                  <!-- delete -->
+                  <div
+                    v-if="index > 1"
+                    class="col-xs-12 col-sm-1 flex justify-center items-center"
+                  >
+                    <q-btn
+                      flat
+                      round
+                      color="red"
+                      icon="mdi-trash-can-outline"
+                      @click="deleteactivity(index)"
+                    />
+                  </div>
                 </div>
               </q-card>
             </div>
           </div>
+          <!-- 3.2 -->
           <div class="col-12 row">
             <div class="col-12 text-top2">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -187,23 +254,12 @@
                       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
-                    >
-
                   </div>
-                  <div class="col-12 row q-col-gutter-sm">
+                  <div
-                    <div v-for="item in knowledgeCount" class="col-12">
+                    v-for="(item, index) in knowledgeArray"
+                    class="col-12 row q-col-gutter-sm"
+                  >
+                    <div class="col-11 q-my-xs">
                       <q-select
                         :options="getOpknowledge(item)"
                         class="bg-white"
@@ -211,12 +267,25 @@
                         dense
                         borderless
                         :outlined="routeName == 'probationWorkAdd'"
-                        v-model="knowledge[item - 1]"
+                        v-model="knowledge[index]"
-                        :label="`ความรู้ความสามารถในการปฏิบัติงาน ${item}`"
+                        :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 หัวข้อ)
@@ -335,17 +404,25 @@
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
                       <div class="row q-mt-xs bg-grey-3 q-py-xs">
-                        <div class="col-1 text-center">
+                        <div class="col-1 text-center"></div>
-                          <q-checkbox
-                            v-model="val3"
-                            dense
-                            :disable="routeName != 'probationWorkAdd'"
-                          />
-                        </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>
@@ -644,22 +721,10 @@
                 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
-              >
-
             </div>
             <div class="col-12 row q-gutter-md">
               <q-card
-                v-for="item in productivityCount"
+                v-for="(item, index) in productivityCount"
                 flat
                 bordered
                 class="col-12 q-pa-sm bg-grey-1"
@@ -673,11 +738,11 @@
                       dense
                       borderless
                       :outlined="routeName == 'probationWorkAdd'"
-                      v-model="Productivitys[item - 1]"
+                      v-model="Productivitys[index]"
                       label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                     />
                   </div>
-                  <div class="col-xs-12 col-sm-6">
+                  <div class="col-xs-12 col-sm-5">
                     <q-input
                       class="bg-white"
                       type="textarea"
@@ -685,10 +750,22 @@
                       dense
                       borderless
                       :outlined="routeName == 'probationWorkAdd'"
-                      v-model="goals1[item - 1]"
+                      v-model="goals1[index]"
                       label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                     />
                   </div>
+                  <div
+                    v-if="index > 0"
+                    class="col-xs-12 col-sm-1 flex justify-center items-center"
+                  >
+                    <q-btn
+                      flat
+                      round
+                      color="red"
+                      icon="mdi-trash-can-outline"
+                      @click="deleteProductivitys(index)"
+                    />
+                  </div>
                 </div>
               </q-card>
             </div>
@@ -1077,15 +1154,24 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 // import type { QForm } from "quasar";
 const val1 = ref(false);
 const val3 = ref(false);
 const router = useRouter();
-
+const test = ref<string>('')
+const ruleNote = ref<string>("");
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
+const dateExam = ref<Date | null>(null);
+const dateExam2 = ref<Date | null>(null);
+const clearDateExam = () => {
+  dateExam.value = null;
+};
+const clearDateExam2 = () => {
+  dateExam2.value = null;
+};
 
 const routeName = router.currentRoute.value.name;
 
@@ -1094,7 +1180,8 @@ const position = ref<string>("นักจัดการงานทั่ว
 
 const caretakerCount = ref<number>(2);
 const caretakerMax = ref<number>(6);
-const caretakers = ref<string[]>(Array(caretakerCount.value).fill(""));
+
+const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
 const OPcaretaker = [
   "นางสาวรัชภรณ์ ภักดี",
@@ -1122,6 +1209,16 @@ const goals = ref<string[]>(Array(activityCount.value).fill(""));
 const addActivity = () => {
   activityCount.value++;
 };
+const deleteactivity = (item: number) => {
+  activities.value.splice(item, 1);
+  goals.value.splice(item, 1);
+  if (activityCount.value > 2) {
+    activityCount.value--;
+  }
+};
+const activityArray = computed(() => {
+  return Array(activityCount.value).fill("");
+});
 const resetActivity = () => {
   activityCount.value = 2;
   activities.value = Array(activityCount.value).fill("");
@@ -1132,20 +1229,33 @@ const knowledgeCount = ref<number>(3);
 const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
 const OPknowledge = ["1", "2", "3", "4"];
 const addKnowledge = () => {
-  knowledgeCount.value++;
+  if (knowledgeCount.value < 6) {
+    knowledgeCount.value++;
+  }
 };
+const knowledgeArray = computed(() => {
+  return Array(knowledgeCount.value).fill("");
+});
 const getOpknowledge = (index: number) => {
   return OPknowledge;
 };
-const resetKnowledge = () => {
+const deleteknowledge = (item: number) => {
-  knowledgeCount.value = 3;
+  knowledge.value.splice(item, 1);
-  knowledge.value = Array(knowledgeCount.value).fill("");
+  if (knowledgeCount.value > 3) {
+    knowledgeCount.value--;
+  }
 };
 
 const productivityCount = ref<number>(1);
 const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
 const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
-
+const deleteProductivitys = (item: number) => {
+  Productivitys.value.splice(item, 1);
+  goals1.value.splice(item, 1);
+  if (productivityCount.value > 1) {
+    productivityCount.value--;
+  }
+};
 const addProductivity = () => {
   productivityCount.value++;
 };
@@ -1372,4 +1482,8 @@ const date4 = ref<Date>(new Date());
   padding-bottom: 5px;
   color: #02a998;
 }
+.bin {
+  align-items: center;
+  justify-content: center;
+}
 </style>