รายการทั้งหมด / เพิ่มฟิล

src/modules/15_development/components/ProjectDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -17,9 +17,14 @@ import config from "@/app.config";
 
 const other1 = ref<boolean>(false);
 const other2 = ref<boolean>(false);
-const otherInput1 = ref<string>("");
-const otherInput2 = ref<string>("");
-
+const reasonPlanned = ref<string>("");
+const reasonActual = ref<string>("");
+const checkOtherBox = computed<boolean>(() => {
+  return formData.developmentProjectTechniquePlanneds.includes("อื่นๆ");
+});
+const checkOtherBox2 = computed<boolean>(() => {
+  return formData.developmentProjectTechniqueActuals.includes("อื่นๆ");
+});
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const route = useRoute();
@@ -43,6 +48,8 @@ const projectTechniquesOp = ref<DataOptionTechnique[]>([
   { value: "การสัมมนาเชิงปฏิบัติการ", label: "การสัมมนาเชิงปฏิบัติการ" },
   { value: "การบรรยายพิเศษ", label: "การบรรยายพิเศษ" },
   { value: "การฝึกศึกษา", label: "การฝึกศึกษา" },
+  { value: "การบรรยาย", label: "การบรรยาย" },
+  { value: "อื่นๆ", label: "อื่นๆ" },
 ]);
 
 const formData = reactive<FormProjectDetail>({
@@ -130,6 +137,8 @@ function fetchData() {
 
       expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
       expanded2.value = arrayExpanded2.filter((e) => e !== null).slice(0, -1);
+      reasonPlanned.value = data.reasonPlanned;
+      reasonActual.value = data.reasonActual;
     })
     .catch((err) => {
       messageError($q, err);
@@ -186,6 +195,8 @@ async function onSubmit() {
         strategyChildPlannedNode: formData.strategyChildPlannedNode,
         strategyChildActualId: formData.strategyChildActualId,
         strategyChildActualNode: formData.strategyChildActualNode,
+        reasonPlanned: reasonPlanned.value,
+        reasonActual: reasonActual.value,
       })
       .then(() => {
         success($q, "บันทึกข้อมูลสำเร็จ");
@@ -214,11 +225,11 @@ function updateSelected(data: DataStrategic, type: string) {
 }
 
 function checkOther(type: number, val: boolean) {
-  if(val == false){
-    if(type == 1){
-      otherInput1.value = ''
-    }else if(type == 2){
-      otherInput2.value = ''
+  if (val == false) {
+    if (type == 1) {
+      reasonPlanned.value = "";
+    } else if (type == 2) {
+      reasonActual.value = "";
     }
   }
 }
@@ -465,25 +476,17 @@ onMounted(() => {
                   type="checkbox"
                 />
               </div>
-              <div class="col-12 q-mb-lg">
+              <div class="col-12">
                 <div class="row">
-                  <div class="col-4 relative-position">
-                    <div class="other_custom">
-                      <q-checkbox
-                        v-model="other1"
-                        label="อื่นๆ"
-                        size="sm"
-                        color="primary"
-                        keep-color
-                        :disable="store.projectStatus === 'FINISH'"
-                        @update:model-value="checkOther(1, other1)"
-                      />
-                    </div>
-                  </div>
-
-                  <div class="col-8 relative-position">
-                    <div class="other_custom_input" v-if="other1 == true">
-                      <q-input v-model="otherInput1" dense outlined label="กรุณากรอก อื่นๆ"></q-input>
+                  <div class="offset-4 col-8 relative-position">
+                    <div class="other_custom_input" v-if="checkOtherBox">
+                      <q-input
+                        v-model="reasonPlanned"
+                        dense
+                        outlined
+                        class="inputgreen"
+                        label="กรุณาระบุ"
+                      ></q-input>
                     </div>
                   </div>
                 </div>
@@ -573,24 +576,17 @@ onMounted(() => {
                   type="checkbox"
                 />
               </div>
-              <div class="col-12 q-mb-lg">
+              <div class="col-12">
                 <div class="row">
-                  <div class="col-4 relative-position">
-                    <div class="other_custom">
-                      <q-checkbox
-                        v-model="other2"
-                        label="อื่นๆ"
-                        size="sm"
-                        color="primary"
-                        keep-color
-                        @update:model-value="checkOther(2, other2)"
-                      />
-                    </div>
-                  </div>
-
-                  <div class="col-8 relative-position">
-                    <div class="other_custom_input" v-if="other2 == true">
-                      <q-input v-model="otherInput2" dense outlined label="กรุณากรอก อื่นๆ"></q-input>
+                  <div class="offset-4 col-8 relative-position">
+                    <div class="other_custom_input" v-if="checkOtherBox2">
+                      <q-input
+                        v-model="reasonActual"
+                        dense
+                        outlined
+                        label="กรุณาระบุ"
+                        class="inputgreen"
+                      ></q-input>
                     </div>
                   </div>
                 </div>
@@ -641,7 +637,7 @@ onMounted(() => {
 }
 .other_custom_input {
   position: absolute;
-  top: -25px;
+  top: -45px;
   width: 100%;
 }
 </style>

src/modules/15_development/interface/index/Main.ts

@@ -74,13 +74,13 @@ interface FormProjectDetail {
   projectDayBackPlanned: string | null;
   projectDayHoldPlanned: string | null;
   projectNigthHoldPlanned: string | null;
-  developmentProjectTechniquePlanneds: [];
+  developmentProjectTechniquePlanneds: String[];
   isBackActual: boolean;
   isHoldActual: boolean;
   projectDayBackActual: string | null;
   projectDayHoldActual: string | null;
   projectNigthHoldActual: string | null;
-  developmentProjectTechniqueActuals: [];
+  developmentProjectTechniqueActuals: String[];
   projectModalActual?: string | null;
   projectModalPlanned?: string | null;
   strategyChildPlannedId?: string | null; //id ยุทธศาสตร์เป้าหมายตามแผน