เพิ่มออกคำสั่ง **รอกลับไปเเก้ paging

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

@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+
+import avatar from "@/assets/avatar_user.jpg";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useCommandMainStore } from "@/modules/18_command/store/Main";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+
+import type { QTableProps } from "quasar";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+import type { ListCommand } from "@/modules/18_command/interface/index/Main";
+import type {
+  FormMainProbation,
+  FormMainProbation2,
+  OpfillterType,
+} from "@/modules/05_placement/interface/request/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const route = useRoute();
+const DataStore = usePlacementDataStore();
+const store = useTransferDataStore();
+const storeCommand = useCommandMainStore();
+const { dialogConfirm, dateText, showLoader, hideLoader, messageError } = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const examId = route.params.examId;
+const rows = ref<FormMainProbation[]>([]);
+const commandType = ref<string>("");
+const commandOp = ref<ListCommand[]>([]);
+const listCommand = ref<ListCommand[]>([]); // เก็บคำสั่งทั้งหมด
+const modalCommand = ref<boolean>(false); //เปิด-ปิด modal สร้างคำสั่ง
+
+//Table
+const selected = ref<ResponseData[]>([]); //รายชื่อที่เลือก
+const filter = ref<string>(""); //คำค้นหา
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/** ข้อมูลที่เเสดง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "position_line",
+  "position_level",
+  "organization",
+  "probation_no",
+  "order_number",
+  "probation_status",
+]);
+
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position_line",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position_line",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position_level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "position_level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px ",
+    classes: "table_ellipsis",
+  },
+  {
+    name: "probation_no",
+    align: "center",
+    label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
+    sortable: true,
+    field: "probation_no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.probation_no ? row.probation_no : "-";
+    },
+  },
+  {
+    name: "order_number",
+    align: "center",
+    label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
+    sortable: true,
+    field: "order_number",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.order_number ? row.order_number : "-";
+    },
+  },
+  {
+    name: "probation_status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "probation_status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/**
+ * ฟิลเตอร์ คำสั่ง
+ * @param val ค่าจาก Input
+ * @param update Funtion quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandType.value = val ? "" : commandType.value;
+    commandOp.value = listCommand.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/** ฟังก์ชั่นยืนยันและส่งคนไปสร้างคำสั่ง */
+function saveOrder() {
+  dialogConfirm(
+    $q,
+    async () => {
+      modalCommand.value = true;
+      modal.value = false;
+    },
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+}
+
+/** ปิด Modal และล้างค่าที่เลือก */
+function closeModal() {
+  modal.value = false;
+  commandType.value = "";
+}
+
+/** ดึงข้อมูลคน */
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API.probationPersonalList() +
+        `?status=${commandType.value == "C-PM-11" ? 2 : 3}&page=${
+          pagination.value.page
+        }&pageSize=${pagination.value.rowsPerPage}`
+    )
+    .then(async (res) => {
+    //   const data = await res.data.result.data;
+      const data = await res.data.data;
+      rows.value = data;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getList();
+  }
+);
+
+/**
+ * เมื่อ props.modal เป็น true
+ * กำหนดให้  selected เป็นค่าว่างและกำหนด filter ประเภทตำแหน่งตามประเภทการสอบ
+ */
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value === true) {
+      rows.value = [];
+      selected.value = [];
+      commandType.value = "";
+      filter.value = "";
+      const status = DataStore.DataMainOrig.find((x: any) => x.id == examId);
+      if (status?.examTypeName !== "") {
+        const data = await storeCommand.getCommandTypes();
+
+        listCommand.value = data.filter(
+          (v: any) => v.code === "C-PM-11" || v.code === "C-PM-12"
+        );
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-mb-sm" style="padding: 0">
+          <q-select
+            v-model="commandType"
+            dense
+            outlined
+            label="ประเภทคำสั่ง"
+            :options="commandOp"
+            option-label="name"
+            option-value="code"
+            emit-value
+            class="inputgreen"
+            map-options
+            use-input
+            style="width: 350px; max-width: auto"
+            @update:model-value="getList()"
+            @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn
+                    ) "
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template></q-select
+          >
+          <q-space />
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            v-model="filter"
+            placeholder="ค้นหา"
+            style="width: 200px; max-width: auto"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            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"
+          />
+        </div>
+
+        <d-table
+          :columns="columns"
+          :rows="rows"
+          :filter="filter"
+          row-key="personal_id"
+          :visible-columns="visibleColumns"
+          selection="multiple"
+          v-model:selected="selected"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @update:pagination="updatePagination"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              :disable="commandType"
+              v-model="scope.selected"
+            />
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  :disable="commandType"
+                  v-model="props.selected"
+                />
+              </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>
+                <div v-else-if="col.name == 'order_number'">
+                  {{
+                    props.row.order_number != "xx/2566"
+                      ? props.row.order_number
+                      : "-"
+                  }}
+                </div>
+                <div v-else-if="col.name == 'probation_status'">
+                  {{
+                    props.row.probation_status
+                      ? store.statusProbationMain(props.row.probation_status)
+                      : "-"
+                  }}
+                </div>
+
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <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="getList"
+            ></q-pagination>
+          </template>
+        </d-table>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="selected.length === 0"
+          color="public"
+          ><q-tooltip>ส่งไปออกคำสั่ง</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <!-- dialog สร้างคำสั่ง -->
+  <DialogCreateCommand
+    v-model:modal="modalCommand"
+    :command-type-code="commandType"
+    :persons="selected"
+  />
+</template>

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

@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted, reactive, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import router from "@/router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
+
 import type { QTableProps } from "quasar";
 import type {
   FormMainProbation,
@@ -11,11 +17,7 @@ import type {
 } from "@/modules/05_placement/interface/request/Main";
 
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import router from "@/router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { checkPermission } from "@/utils/permissions";
+import DialogOrder from "@/modules/05_placement/components/probation/DialogOrder.vue";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const storeFn = useTransferDataStore();
@@ -23,6 +25,7 @@ const mixin = useCounterMixin();
 const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 
+const modalCommand = ref<boolean>(false); // ตัวแปร popup ออกคำสั่ง
 const filterRef = ref<any>(null);
 const modal = ref<boolean>(false);
 const paging = ref<boolean>(true);
@@ -36,8 +39,13 @@ const filterKeyword2 = ref<string>("");
 const rows = ref<FormMainProbation[]>([]);
 const rows2 = ref<FormMainProbation2[]>([]);
 const dataUpdate = ref<FormMainProbation[]>([]);
-const Opfillter = ref<OpfillterType[]>([{ id: 0, value: "ทั้งหมด" }]);
-const Opfillter2 = ref<OpfillterType[]>([{ id: 0, value: "ทั้งหมด" }]);
+const Opfillter = ref<OpfillterType[]>([]);
+const Opfillter2 = ref<OpfillterType[]>([
+  {
+    id: 0,
+    value: "ทั้งหมด",
+  },
+]);
 const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
 const maxPage = ref<number>(1);
 
@@ -48,6 +56,9 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+
 const pagination2 = ref({
   sortBy: "desc",
   descending: false,
@@ -214,61 +225,25 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** ฟังชั่น ฟิลเตอร์ หา status */
-function ProbationMainFilter() {
-  const useStatus = new Set();
-  fillterStatus.value.forEach((item: any) => {
-    const ID = item.probation_status;
-    const title = statusProbationMain(Number(item.probation_status));
-    if (ID !== null && !useStatus.has(ID)) {
-      Opfillter.value.push({
-        id: ID,
-        value: title,
-      });
-      useStatus.add(ID);
-    }
-  });
-  Opfillter.value.sort((a: any, b: any) => a.id - b.id);
-  Opfillter2.value = Opfillter.value;
-}
-
-/**
- * อัพเดท rows ตาม status
- * @param body {id:? , value: ?}
- */
-function updateRows(body: any) {
-  if (body.value !== "ทั้งหมด") {
-    const filteredRows = dataUpdate.value.filter(
-      (item: FormMainProbation) => item.probation_status === body.value
-    );
-    rows.value = filteredRows;
-  } else {
-    rows.value = dataUpdate.value;
-  }
-}
-
 /** get ข้อมูล */
 async function getpersonalList() {
   showLoader();
   await http
-    .get(config.API.probationPersonalList())
-    .then((res) => {
-      const data = res.data.data;
+    .get(
+      config.API.probationPersonalList() +
+        `?status=${fillter.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}`
+    )
+    .then(async (res) => {
+      //   const data = await res.data.result.data;
+      const data = await res.data.data;
+      rows.value = data;
       fillterStatus.value = data;
-      rows.value = data.map((item: FormMainProbation) => ({
-        personal_id: item.personal_id,
-        name: item.name,
-        position_line: item.position_line,
-        position_line_id: item.position_line_id,
-        position_level: item.position_level,
-        position_level_id: item.position_level_id,
-        organization: item.organization !== "" ? item.organization : "-",
-        probation_no: item.probation_no,
-        order_number: item.order_number != "xx/2566" ? item.order_number : "-",
-        probation_status: statusProbationMain(Number(item.probation_status)),
-      }));
       dataUpdate.value = rows.value;
-      ProbationMainFilter();
+      Opfillter.value = storeFn.optionStatusProbation;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
     })
     .catch(() => {})
     .finally(() => {
@@ -388,10 +363,22 @@ function filterFn(val: string, update: any) {
   }
 }
 
+/** ส่งไปออกคำสั่ง */
+function onCommand() {
+  modalCommand.value = true;
+}
+
 watch([() => formProbation.page, () => formProbation.pageSize], () => {
   onclickAddProbation();
 });
 
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getpersonalList();
+  }
+);
+
 /** get ค่า เมื่อโหลดหน้า */
 onMounted(async () => {
   getpersonalList();
@@ -402,7 +389,7 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
   </div>
-  
+
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
@@ -418,12 +405,13 @@ onMounted(async () => {
               :options="Opfillter2"
               option-value="id"
               lazy-rules
+              emit-value
               hide-bottom-space
               :readonly="false"
               :borderless="false"
               :outlined="true"
               :hide-dropdown-icon="false"
-              @update:model-value="updateRows(fillter)"
+              @update:model-value="getpersonalList()"
               @filter="filterFn"
               use-input
               behavior="menu"
@@ -449,6 +437,21 @@ onMounted(async () => {
                 <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
               </q-btn>
             </div>
+            <div>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                @click="onCommand"
+                flat
+                round
+                color="add"
+                icon="mdi-account-arrow-right"
+              >
+                <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+              </q-btn>
+            </div>
           </div>
         </div>
         <q-space />
@@ -506,6 +509,8 @@ onMounted(async () => {
           :visible-columns="visibleColumns"
           :pagination-label="paginationLabel"
           v-model:pagination="pagination"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @update:pagination="updatePagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -534,24 +539,47 @@ onMounted(async () => {
               </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
+                  {{
+                    (pagination.page - 1) * pagination.rowsPerPage +
+                    props.rowIndex +
+                    1
+                  }}
                 </div>
+                <div v-else-if="col.name == 'order_number'">
+                  {{
+                    props.row.order_number
+                      ? props.row.order_number != "xx/2566"
+                        ? props.row.order_number
+                        : "-"
+                      : "-"
+                  }}
+                </div>
+                <div v-else-if="col.name == 'probation_status'">
+                  {{
+                    props.row.probation_status
+                      ? statusProbationMain(props.row.probation_status)
+                      : "-"
+                  }}
+                </div>
+
                 <div v-else>
-                  {{ col.value ?? "-" }}
+                  {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
+            ทั้งหมด {{ total }} รายการ
             <q-pagination
               v-model="pagination.page"
               active-color="primary"
               color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
+              :max="Number(totalList)"
               size="sm"
               boundary-links
               direction-links
+              :max-pages="5"
+              @update:model-value="getpersonalList"
             ></q-pagination>
           </template>
         </d-table>
@@ -719,4 +747,6 @@ onMounted(async () => {
       </q-form>
     </q-card>
   </q-dialog>
+
+  <DialogOrder v-model:modal="modalCommand" />
 </template>

src/modules/05_placement/store.ts

@@ -3,7 +3,10 @@ import { ref } from "vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+import type {
+  FormPlacementMainData,
+  OpfillterType,
+} from "@/modules/05_placement/interface/request/Main";
 import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
 
 export const useProfileDataStore = defineStore("profilePlacenent", () => {
@@ -305,6 +308,49 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
 });
 
 export const useTransferDataStore = defineStore("transferDataStore", () => {
+  const optionStatusProbation = ref<OpfillterType[]>([
+    {
+      id: 0,
+      value: "ทั้งหมด",
+    },
+    {
+      id: 1,
+      value: "อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+    {
+      id: 2,
+      value: "พ้นการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+    {
+      id: 3,
+      value: "ไม่พ้นการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+    {
+      id: 4,
+      value: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากเปลี่ยนตำแหน่ง",
+    },
+    {
+      id: 5,
+      value: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากลาออก",
+    },
+    {
+      id: 6,
+      value: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากถึงแก่กรรม",
+    },
+    {
+      id: 7,
+      value: "ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการ",
+    },
+    {
+      id: 8,
+      value: "ส่งรายชื่อไปออกคำสั่ง",
+    },
+    {
+      id: 9,
+      value: "ออกคำสั่งเสร็จแล้ว",
+    },
+  ]);
+
   const statusText = (val: string) => {
     switch (val) {
       case "WAITTING":
@@ -324,7 +370,7 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
         return "-";
     }
   };
-  const statusProbationMain = (val: number) => {
+  function statusProbationMain(val: number) {
     switch (val) {
       case 1:
         return "อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ";
@@ -347,10 +393,11 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
       default:
         return "-";
     }
-  };
+  }
 
   return {
     statusText,
     statusProbationMain,
+    optionStatusProbation,
   };
 });