แก้ API

src/components/Workflow/DialogSelectPerson.vue

@@ -14,6 +14,8 @@ const $q = useQuasar();
 const { dialogConfirm, showLoader, hideLoader, messageError } =
   useCounterMixin();
 
+const isAct = ref<boolean>(false);
+const search = ref<string>("");
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   stateId: { type: String, require: true },
@@ -25,6 +27,15 @@ const props = defineProps({
 const selected = ref<any[]>([]);
 const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "fullName",
     align: "left",
@@ -57,6 +68,14 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 const isAcceptSetting = ref<boolean>(false);
 const isApproveSetting = ref<boolean>(false);
 const isReasonSetting = ref<boolean>(false);
@@ -64,9 +83,18 @@ const isReasonSetting = ref<boolean>(false);
 async function fetchLists() {
   showLoader();
   await http
-    .get(config.API.workflow + `commander/${props.type}`)
+    .put(config.API.workflow + `commander/${props.type}`, {
+      isAct: isAct.value,
+      keyword: search.value,
+      page: pagination.value.page,
+      pageSize: pagination.value.rowsPerPage,
+    })
     .then(async (res) => {
-      rows.value = res.data.result;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      rows.value = res.data.result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -107,8 +135,32 @@ function onCloseModal() {
   isAcceptSetting.value = false;
   isApproveSetting.value = false;
   isReasonSetting.value = false;
+
+  search.value = ''
+  isAct.value = false
 }
 
+function onSearchData() {
+  getSearch();
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  fetchLists();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 watch(modal, (val) => {
   if (val) {
     fetchLists();
@@ -124,11 +176,44 @@ watch(modal, (val) => {
         <q-separator />
 
         <q-card-section>
+          <div class="row q-col-gutter-sm items-start q-mb-sm">
+            <div class="col-12 col-sm-4 col-md-4">
+              <q-input
+                v-model="search"
+                outlined
+                clearable
+                hide-bottom-space
+                dense
+                label="คำค้น"
+                @clear="search = ''"
+              />
+            </div>
+            <q-checkbox
+              keep-color
+              v-model="isAct"
+              label="แสดงเฉพาะรักษาการแทน"
+              color="primary"
+            >
+              <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+            </q-checkbox>
+            <q-space />
+
+            <div class="col-12 col-sm-6 col-md-3">
+              <q-btn
+                color="primary"
+                icon="search"
+                label="ค้นหา"
+                class="full-width q-pa-sm"
+                @click.prevent="onSearchData"
+              >
+              </q-btn>
+            </div>
+          </div>
           <d-table
             ref="table"
             :columns="columns"
             :rows="rows"
-            row-key="id"
+            row-key="key"
             flat
             bordered
             :paging="true"
@@ -136,7 +221,23 @@ watch(modal, (val) => {
             :rows-per-page-options="[10, 25, 50, 100]"
             selection="single"
             v-model:selected="selected"
+            @update:pagination="updatePagination"
           >
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ total }} รายการ
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="fetchLists()"
+              ></q-pagination>
+            </template>
+
             <template v-slot:header-selection="scope">
               <q-checkbox
                 keep-color
@@ -164,6 +265,13 @@ watch(modal, (val) => {
                   />
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name == 'no'">
+                    {{
+                      (pagination.page - 1) * pagination.rowsPerPage +
+                      props.rowIndex +
+                      1
+                    }}
+                  </div v-else>
                   <div>
                     {{ col.value ? col.value : "-" }}
                   </div>