แก้ไข status draft

src/modules/05_placement/components/PersonalList/Table.vue

@@ -63,6 +63,16 @@ const visibleColumns = ref<any[]>([
   "draft",
   "positionCandidate",
 ]);
+const visibleColumnslist = ref<any>([
+  "fullName",
+  "examNumber",
+  "idCard",
+  "positionNumber",
+  "organizationName",
+  "draft",
+  "bmaOfficer",
+  "positionCandidate",
+]);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -185,9 +195,9 @@ const convertContainStatus = (val: string) => {
 };
 const convertDraft = (val: boolean) => {
   switch (val) {
-    case false:
-      return "รอส่งตัว";
     case true:
+      return "รอส่งตัว";
+    case false:
       return "ส่งตัวแล้ว";
     default:
       return "-";
@@ -273,7 +283,7 @@ const saveDeferment = async () => {
           console.log("ยืนยันการขอผ่อนผัน");
           await http
             .post(config.API.deferment(), formData)
-            .then((res) => {
+            .then(() => {
               success($q, "บันทึกสำเร็จ");
             })
             .catch((e) => {
@@ -473,6 +483,8 @@ watch(containStatus, () => {
 const modaladdlist = ref<boolean>(false);
 const selected = ref<any>([]);
 const personal_selected = ref<any>([]);
+const filterlistAdd = ref<string>("");
+const paging = ref<boolean>(true);
 const savelist = () => {
   selected.value.map((e: any) => {
     personal_selected.value.push(e.personalId);
@@ -486,21 +498,21 @@ const savelist = () => {
         flat: true,
         const: "negative",
       },
-    })
-      .onOk(async () => {
-        showLoader();
-        await http.put(config.API.putPosition(examId), personal_selected.value);
-      })
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch(() => {
-        console.log(e);
-      })
-      .finally(async () => {
-        await getTable();
-        hideLoader();
-      });
+    }).onOk(async () => {
+      showLoader();
+      await http
+        .put(config.API.putPosition(examId), personal_selected.value)
+        .then(() => {
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          console.log(e);
+        })
+        .finally(async () => {
+          await getTable();
+          hideLoader();
+        });
+    });
   }
 };
 const handleModalAddListUpdate = (val: boolean) => {
@@ -512,6 +524,16 @@ const checkSelected = computed(() => {
     return true;
   }
 });
+const pagination = ref({
+  sortBy: "fullname",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: number, end: number, total: number) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 </script>
 <template>
   <q-form ref="myForm">
@@ -869,21 +891,72 @@ const checkSelected = computed(() => {
 
   <!-- dialog เพิ่มรายชื่อ -->
   <q-dialog v-model="modaladdlist">
-    <q-card style="width: 850px; max-width: 80vw">
+    <q-card style="width: 900px; max-width: 80vw">
       <q-card-section>
-        <div class="text-h6">ส่งรายชื่อไปยังหน่วยงาน</div>
+        
+        <q-toolbar class="q-py-md">
+          <q-toolbar-title class="header-text text-weight-bolder"
+            >ส่งรายชื่อไปยังหน่วยงาน
+          </q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="modaladdlist = false"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
       </q-card-section>
       <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filterlistAdd"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumnslist"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
         <q-table
           flat
           bordered
           dense
           :rows="rowsFilter"
           :columns="columns"
+          :filter="filterlistAdd"
           row-key="name"
           class="custom-header-table"
           selection="multiple"
           v-model:selected="selected"
+          :pagination-label="paginationLabel"
+          :visible-columns="visibleColumnslist"
         >
           <template v-slot:header-selection="scope">
             <q-checkbox
@@ -1027,6 +1100,17 @@ const checkSelected = computed(() => {
               </q-td>
             </q-tr>
           </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
         </q-table>
       </q-card-section>