แก้ แต่งตั้งคณะกรรมการทดลองงาน

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

@@ -58,7 +58,7 @@ const pagination = ref({
 const countRowLength = computed(() => {
   return selected.value.length + rows.value.length == 4
     ? true
-    : selected.value.length == 3
+    : selected.value.length == 2
     ? true
     : false;
 });
@@ -66,7 +66,8 @@ const countRowLength = computed(() => {
 const optionsTypeMain = ref<OpfillterTypeSt[]>([]);
 const optionsType = ref<OpfillterTypeSt[]>([
   { id: "chairman", value: "ประธาน" },
-  { id: "committee", value: "กรรมการ" },
+  { id: "committee", value: "ผู้บังคับบัญชา" },
+  { id: "caregiver", value: "ผู้ดูแล" },
 ]);
 
 const rowsDirector = ref<MemBerType[]>([]);
@@ -220,7 +221,7 @@ function onAddPerson() {
     position: item.position,
     positionType: item.posType,
     positionLevel: item.posLevel,
-    role: member.value == "chairman" ? "chairman" : "committee",
+    role: member.value,
   }));
   rows.value = [...rows.value, ...data];
   rows.value.sort((a, b) => (a.role === "chairman" ? -1 : 1));
@@ -229,21 +230,24 @@ function onAddPerson() {
 
 async function getPerson() {
   showLoader();
-  http
-    .post(config.API.orgProfileDirector + `?keyword=${filterKeyword.value}`, {
+  await http
+    .post(config.API.orgProfileDirector, {
       isDirector: isDirector.value,
+      pageSize: pagination.value.rowsPerPage,
+      page: pagination.value.page,
+      keyword: filterKeyword.value,
     })
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      const dataTotal = await res.data.result.total;
+
       rowsDirector.value = data;
       rowsDirector.value = rowsDirector.value.filter(
         (item: MemBerType) =>
           !rows.value.some((i: PersonsAppointData) => i.profileId == item.id)
       );
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = data.total;
+      totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
+      total.value = dataTotal;
       hideLoader();
     })
     .catch((e) => {
@@ -263,7 +267,9 @@ function convertText(val: string) {
     case "chairman":
       return "ประธาน";
     case "committee":
-      return "กรรมการ";
+      return "ผู้บังคับบัญชา";
+    case "caregiver":
+      return "ผู้ดูแล";
     default:
       "-";
   }
@@ -340,8 +346,8 @@ async function getData() {
     .finally(() => {});
 }
 
-function onDirector() {
-  getPerson();
+async function onDirector() {
+  await getPerson();
   selected.value = [];
 }
 
@@ -355,15 +361,17 @@ watch(
     if (modal.value) {
       optionsTypeMain.value = optionsType.value;
       const optionData = optionsType.value;
-      const committeeCount = rows.value.filter(
-        (i) => i.role === "committee"
+      const caregiverCount = rows.value.filter(
+        (i) => i.role === "caregiver"
       ).length;
 
       optionsTypeMain.value = optionData.filter(
         (item: OpfillterTypeSt) =>
           !rows.value.some(
-            (i) => i.role === "chairman" && item.id === "chairman"
-          ) && !(item.id === "committee" && committeeCount >= 3)
+            (i) =>
+              (i.role === "chairman" && item.id === "chairman") ||
+              (i.role === "committee" && item.id === "committee")
+          ) && !(item.id === "caregiver" && caregiverCount >= 2)
       );
 
       getPerson();
@@ -531,31 +539,17 @@ onMounted(async () => {
         <q-separator />
         <q-card-section>
           <div class="row q-col-gutter-sm">
-            <q-checkbox
-              keep-color
-              v-model="isDirector"
-              label="แสดงเฉพาะผู้อำนวยการ/หัวหน้า"
-              color="primary"
-              @update:model-value="onDirector"
-            >
-              <q-tooltip>แสดงเฉพาะผู้อำนวยการ/หัวหน้า </q-tooltip>
-            </q-checkbox>
             <div class="col-12">
               <div class="row">
-                <q-select
-                  v-model="member"
-                  outlined
-                  dense
-                  label="ประธาน/กรรมการ"
-                  :options="optionsTypeMain"
-                  option-value="id"
-                  option-label="value"
-                  map-options
-                  emit-value
-                  @update:model-value="selected = []"
-                  style="width: 300px"
+                <q-checkbox
+                  keep-color
+                  v-model="isDirector"
+                  label="แสดงเฉพาะผู้อำนวยการ/หัวหน้า"
+                  color="primary"
+                  @update:model-value="onDirector"
                 >
-                </q-select>
+                  <q-tooltip>แสดงเฉพาะผู้อำนวยการ/หัวหน้า </q-tooltip>
+                </q-checkbox>
                 <q-space />
                 <q-input
                   class="col-xs-12 col-sm-3 col-md-2 q-mr-sm"
@@ -608,7 +602,11 @@ onMounted(async () => {
                 bordered
                 :paging="true"
                 dense
-                :selection="member == 'chairman' ? 'single' : 'multiple'"
+                :selection="
+                  member == 'chairman' || member == 'committee'
+                    ? 'single'
+                    : 'multiple'
+                "
                 v-model:selected="selected"
                 :rows-per-page-options="[1, 25, 50, 100]"
                 @update:pagination="updatePagination"
@@ -670,6 +668,22 @@ onMounted(async () => {
                 </template>
               </d-table>
             </div>
+            <div class="col-4">
+              {{ member }}
+              <q-select
+                v-model="member"
+                outlined
+                dense
+                label="ประธาน/กรรมการ"
+                :options="optionsTypeMain"
+                option-value="id"
+                option-label="value"
+                map-options
+                emit-value
+                @update:model-value="selected = []"
+              >
+              </q-select>
+            </div>
           </div>
         </q-card-section>
         <q-separator />