แก้ เป้าหมายตามจริง

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

@@ -52,6 +52,7 @@ const plannedGoalsData = ref<ResPlannedGoals[]>([]);
 const plannedPeoples = ref<ResPeople[]>([]);
 const actualGoals = ref<ResActualGoals[]>([]);
 const actualPeoples = ref<ResPeople[]>([]);
+const formGroup = ref<any>();
 
 const groupTargetData = reactive({
   targetData: [{}],
@@ -96,6 +97,30 @@ const levelComputed = computed(() => {
   });
 });
 
+const levelOptions = computed(() => {
+  if (
+    formGroupTarget.groupTargetSub !== "EMPLOYEE" &&
+    formGroupTarget.groupTargetSub !== "EMPLOYEETEMP"
+  ) {
+    const found = posTypeMain.value.find(
+      (v) => formGroupTarget.posType === v.posTypeName
+    );
+    return found?.posLevels || [];
+  } else {
+    const found = posTypeMainEMP.value.find(
+      (v) => formGroupTarget.posType === v.posTypeName
+    );
+    return (
+      found?.posLevels.map((item) => ({
+        id: item.id,
+        posLevelName: found.posTypeShortName
+          ? `${found.posTypeShortName} ${item.posLevelName}`
+          : item.posLevelName,
+      })) || []
+    );
+  }
+});
+
 const formGroupTarget = reactive<FormGroupTargetPlannedGoal>({
   groupTarget: "",
   groupTargetSub: "",
@@ -318,7 +343,6 @@ async function fetchData(id: string) {
       plannedGoals.value = data.plannedGoals;
       plannedGoalsData.value = data.plannedGoals;
       plannedPeoples.value = data.plannedPeoples;
-      console.log(plannedGoals.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -402,10 +426,10 @@ function onSubmitGroup() {
             groupTarget: formGroupTarget.groupTarget,
             groupTargetSub: formGroupTarget.groupTargetSub,
             position: formGroupTarget.position,
-            posTypeActualId: formGroupTarget.posType
+            posTypeActual: formGroupTarget.posType
               ? formGroupTarget.posType
               : null,
-            posLevelActualId: formGroupTarget.posLevel
+            posLevelActual: formGroupTarget.posLevel
               ? formGroupTarget.posLevel
               : null,
             type: formGroupTarget.type,
@@ -527,12 +551,19 @@ function updatePosTypeName(id: string) {
  * @param val ข้อมูล กลุ่มเป้าหมาย
  */
 function updateGroupTarget(val: string) {
+  formGroup.value.resetValidation();
   if (val === "OUTSIDERS") {
     formGroupTarget.groupTargetSub = "NONE";
     formGroupTarget.position = "";
     formGroupTarget.posType = null;
     formGroupTarget.posLevel = null;
-  } else formGroupTarget.groupTargetSub = "";
+  } else {
+    formGroupTarget.groupTargetSub = "";
+    formGroupTarget.posType = "";
+    formGroupTarget.posLevel = "";
+    formGroupTarget.position = "";
+    formGroupTarget.type = "";
+  }
 }
 
 /** หาชื่อ ตาม id */
@@ -849,8 +880,8 @@ onMounted(() => {
                       formGroupTarget.groupTargetSub = props.row.groupTargetSub;
                       formGroupTarget.amount = props.row.amount;
                       formGroupTarget.position = props.row.position;
-                      formGroupTarget.posType = props.row.posTypeId;
+                      formGroupTarget.posType = props.row.posType;
-                      formGroupTarget.posLevel = props.row.posLevelId;
+                      formGroupTarget.posLevel = props.row.posLevel;
 
                       modalGroupTarget = true;
                     }
@@ -859,6 +890,7 @@ onMounted(() => {
                   <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
                 >
               </q-td>
+
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name === 'posTypeActualId'">
                   <div v-if="props.row.groupTarget !== 'OUTSIDERS'">
@@ -973,7 +1005,12 @@ onMounted(() => {
 
   <q-dialog v-model="modalGroupTarget" persistent>
     <q-card style="width: 700px">
-      <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
+      <q-form
+        ref="formGroup"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmitGroup"
+      >
         <DialogHeader
           :tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
           :close="onClickCloseDialog"
@@ -1032,6 +1069,13 @@ onMounted(() => {
                 (val:string) =>
                   !!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
               ]"
+                @update:model-value="
+                  formGroupTarget.posType = '';
+                  formGroupTarget.posLevel = '';
+                  formGroupTarget.position = '';
+                  formGroupTarget.type = '';
+                  formGroup.resetValidation();
+                "
               />
             </div>
 
@@ -1046,13 +1090,30 @@ onMounted(() => {
                 lazy-rules
                 class="inputgreen"
                 v-model="formGroupTarget.posType"
-                :options="posTypeOp"
+                :options="
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
+                    ? posTypeOp
+                    : posTypeOpEMP
+                "
                 option-label="name"
-                option-value="id"
+                option-value="name"
                 emit-value
                 map-options
+                :rules="[
+                (val:string) =>
+                  !!val || `${formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
+                    ? 'กรุณาเลือกตำแหน่งประเภท'
+                    : 'กรุณาเลือกกลุ่มงาน ' }`,
+              ]"
                 input-class="text-red"
-                label="ประเภทตำแหน่ง"
+                :label="
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
+                    ? 'ตำแหน่งประเภท'
+                    : 'กลุ่มงาน'
+                "
                 clearable
                 @update:model-value="updatePosTypeName"
               />
@@ -1068,16 +1129,25 @@ onMounted(() => {
                 lazy-rules
                 class="inputgreen"
                 v-model="formGroupTarget.posLevel"
-                :options="
+                :options="levelOptions"
-                  posTypeMain.find((v) => formGroupTarget.posType === v.id)
-                    ?.posLevels || []
-                "
                 option-label="posLevelName"
-                option-value="id"
+                option-value="posLevelName"
                 emit-value
                 map-options
                 input-class="text-red"
-                label="ระดับตำแหน่ง"
+                :label="
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
+                    ? 'ระดับตำแหน่ง'
+                    : 'ระดับชั้นงาน'
+                "
+                :rules="[
+                (val:string) =>
+                  !!val || `${formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
+                    ? 'กรุณาเลือกระดับตำแหน่ง'
+                    : 'กรุณาเลือกระดับชั้นงาน ' }`,
+              ]"
                 clearable
               />
             </div>
@@ -1153,7 +1223,12 @@ onMounted(() => {
 
   <q-dialog v-model="newModalGroupTarget" persistent>
     <q-card style="min-width: 50%">
-      <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
+      <q-form
+        greedy
+        ref="formGroup"
+        @submit.prevent
+        @validation-success="onSubmitGroup"
+      >
         <DialogHeader
           :tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
           :close="onClickCloseDialog"
@@ -1175,9 +1250,10 @@ onMounted(() => {
                 emit-value
                 lazy-rules
                 class="inputgreen"
-                @update:model-value="
+                @update:model-value="(value:any)=>{
-                  updateGroupTarget,
+
-                    (formGroupTarget.positions = [
+                  updateGroupTarget(value),
+                  (formGroupTarget.positions = [
                       {
                         posType: '',
                         posLevel: '',
@@ -1187,6 +1263,8 @@ onMounted(() => {
                         posExecutive: '',
                       },
                     ])
+                }
+
                 "
                 :rules="[
                 (val:string) =>
@@ -1225,7 +1303,7 @@ onMounted(() => {
                   !!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
               ]"
                 @update:model-value="
-                  formGroupTarget.positions = [
+                  (formGroupTarget.positions = [
                     {
                       posType: '',
                       posLevel: '',
@@ -1234,7 +1312,8 @@ onMounted(() => {
                       posLevelId: null,
                       posExecutive: '',
                     },
-                  ]
+                  ]),
+                    formGroup.resetValidation()
                 "
               />
             </div>
@@ -1310,6 +1389,8 @@ onMounted(() => {
                   option-value="name"
                   emit-value
                   map-options
+                  hide-bottom-space
+                  lazy-rules
                   input-class="text-red"
                   :label="
                     formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
@@ -1317,6 +1398,13 @@ onMounted(() => {
                       ? 'ตำแหน่งประเภท'
                       : 'กลุ่มงาน'
                   "
+                  :rules="[
+                (val:string) =>
+                  !!val || `${formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
+                    ? 'กรุณาเลือกตำแหน่งประเภท'
+                    : 'กรุณาเลือกกลุ่มงาน ' }`,
+              ]"
                   clearable
                   @update:model-value="updatePosTypeName"
                 />
@@ -1342,6 +1430,15 @@ onMounted(() => {
                       ? 'ระดับตำแหน่ง'
                       : 'ระดับชั้นงาน'
                   "
+                  hide-bottom-space
+                  lazy-rules
+                  :rules="[
+                (val:string) =>
+                  !!val || `${formGroupTarget.groupTargetSub !== 'EMPLOYEE' &&
+                  formGroupTarget.groupTargetSub !== 'EMPLOYEETEMP'
+                    ? 'กรุณาเลือกระดับตำแหน่ง'
+                    : 'กรุณาเลือกระดับชั้นงาน ' }`,
+              ]"
                   clearable
                 />
               </div>