From d83af4cf056220ad47089a6d7a2816115d1f3bea Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 4 Sep 2023 18:19:08 +0700
Subject: [PATCH] no message

---
 src/modules/10_order/components/Main.vue      | 178 ++++++--
 .../10_order/components/PopupHistory.vue      | 397 ++++++++++++++++++
 2 files changed, 541 insertions(+), 34 deletions(-)
 create mode 100644 src/modules/10_order/components/PopupHistory.vue

diff --git a/src/modules/10_order/components/Main.vue b/src/modules/10_order/components/Main.vue
index f6c60f5c8..dfe38f765 100644
--- a/src/modules/10_order/components/Main.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -12,11 +12,18 @@ import router from "@/router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import PopupHistory from "./PopupHistory.vue";
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogRemove } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  dateText,
+  success,
+  dialogRemove,
+} = mixin;
 const DataStore = useOrderPlacementDataStore();
 
 const pagination = ref({
@@ -151,7 +158,8 @@ const OriginalDataFetch = async () => {
       rows.value = res.data.result.map((e: any) => ({
         orderId: e.orderId,
         Order: e.orderName,
-        OrderNum: e.orderNo == '' ? '-' : `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
+        OrderNum:
+          e.orderNo == "" ? "-" : `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
         fiscalYear: Number(e.fiscalYear),
         OrderDate: date2Thai(e.orderDate),
         OrderBy: e.orderBy,
@@ -176,13 +184,13 @@ const OriginalDataFetch = async () => {
 const redirectToPage = (id?: string, status?: string) => {
   let step = 1;
   switch (status) {
-    case 'จัดทำร่างคำสั่ง':
+    case "จัดทำร่างคำสั่ง":
       step = 1;
       break;
-    case 'บัญชีแนบท้าย':
+    case "บัญชีแนบท้าย":
       step = 2;
       break;
-    case 'เลือกผู้ได้รับสำเนาคำสั่ง':
+    case "เลือกผู้ได้รับสำเนาคำสั่ง":
       step = 3;
       break;
     default:
@@ -336,47 +344,136 @@ const paginationLabel = (start: string, end: string, total: string) => {
     <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">
-          <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
-            map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
-            :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-            @update:model-value="searchFilterTable" />
+          <q-select
+            class="col-xs-12 col-sm-3 col-md-2"
+            v-model="fiscalyear"
+            label="ปีงบประมาณ"
+            dense
+            emit-value
+            map-options
+            :options="fiscalyearOP"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            @update:model-value="searchFilterTable"
+          />
           <div>
-            <q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
+            <q-btn
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+              @click="clickAdd"
+            >
               <q-tooltip>เพิ่มข้อมูล</q-tooltip>
             </q-btn>
           </div>
           <q-space />
 
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-            debounce="300" placeholder="ค้นหา">
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
             </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="col-xs-12 col-sm-3 col-md-2" />
+          <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="col-xs-12 col-sm-3 col-md-2"
+          />
         </div>
         <div class="col-12">
           <q-card bordered class="col-12 filter-card q-pa-sm">
             <div class="row col-12 q-col-gutter-sm">
-              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
-                map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
-                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable" />
-              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
-                map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
-                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable" />
+              <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="OrderType"
+                label="ประเภท"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="OrderTypeOption"
+                option-value="name"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+              />
+              <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="OrderStatus"
+                label="สถานะ"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="OrderStatusOption"
+                option-value="name"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+              />
+              <q-space />
+              <PopupHistory :OrderTypeOption="OrderTypeOption" />
             </div>
           </q-card>
         </div>
         <div class="col-12">
-          <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
-            :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel" v-model:pagination="pagination">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="UpdataData"
+            :filter="filterKeyword"
+            row-key="Order"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            v-bind="attrs"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -386,8 +483,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer"
-                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="
+                  redirectToPage(props.row.orderId, props.row.OrderStatus)
+                "
+              >
                 <q-td key="Order" :props="props">
                   {{ props.row.Order }}
                 </q-td>
@@ -418,8 +520,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
-              <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-                :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
             </template>
           </q-table>
         </div>
@@ -475,4 +585,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/10_order/components/PopupHistory.vue b/src/modules/10_order/components/PopupHistory.vue
new file mode 100644
index 000000000..9d6e050ed
--- /dev/null
+++ b/src/modules/10_order/components/PopupHistory.vue
@@ -0,0 +1,397 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { DataOption } from "@/modules/04_registry/components/profileType";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, notifyError } = mixin;
+const $q = useQuasar();
+
+const props = defineProps({
+  OrderTypeOption: Object,
+});
+
+const OrderTypeOption = ref<any>([]);
+const modal = ref<boolean>(false);
+const employeeClass = ref<string>("");
+const typeKeyword = ref<string>("");
+const Keyword = ref<string>("");
+const positionKeyword = ref<string>("");
+
+const reportType = ref<string>("");
+const reportYear = ref<number | null>();
+const reportNo = ref<string>("");
+
+const positionOps = ref<DataOption[]>([]);
+const columns = ref<any["columns"]>([
+  {
+    name: "no",
+    label: "ลำดับ",
+    field: "no",
+    align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([]);
+
+const clickOpenpopup = () => {
+  modal.value = true;
+  employeeClass.value = "";
+  if (props.OrderTypeOption != undefined) {
+    OrderTypeOption.value = props.OrderTypeOption.filter(
+      (e: any) => e.name !== "ทั้งหมด"
+    );
+  }
+};
+
+// const fecthPositionOfficer = async () => {
+//   await http
+//     .get(config.API.listPositionPathHistory)
+//     .then((res) => {
+//       let data = res.data.result.items;
+//       console.log(data);
+//       positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
+//       options.value = positionOps.value;
+//     })
+//     .catch((err) => {
+//       messageError($q, err);
+//     });
+// };
+// const fetchPositionPerm = async () => {
+//   await http
+//     .get(config.API.listPositionEmployeePositionHistory)
+//     .then((res) => {
+//       let data = res.data.result.items;
+//       positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
+//       options.value = positionOps.value;
+//     })
+//     .catch((err) => {
+//       messageError($q, err);
+//     });
+// };
+
+const clickSearch = async (type: string) => {
+  console.log(reportType.value);
+  console.log(reportYear.value);
+  console.log(reportNo.value);
+  // await myForm.value!.validate().then((result: boolean) => {
+  //   if (result) {
+  //     showLoader();
+  //     let body = {};
+  //     if (typeKeyword.value === "no") {
+  //       Object.assign(body, {
+  //         posNo: Keyword.value,
+  //       });
+  //     } else if (typeKeyword.value === "position") {
+  //       Object.assign(body, {
+  //         positionId: positionKeyword.value,
+  //       });
+  //     }
+  //     http
+  //       .post(config.API.profileHistory(type), body)
+  //       .then((res) => {
+  //         let data = res.data.result;
+  //         if (data.length !== 0) {
+  //           rows.value = data.map((e: any) => ({
+  //             id: e.id,
+  //             citizenId: e.citizenId,
+  //             name: e.firstName + "    " + e.lastName,
+  //             posNo: e.posNo,
+  //             position: e.position,
+  //             date: date2Thai(e.date),
+  //           }));
+  //         } else {
+  //           notifyError($q, "ไม่มีข้อมูลที่ต้องการค้นหา");
+  //           rows.value = [];
+  //         }
+  //       })
+  //       .catch((err) => {
+  //         messageError($q, err);
+  //         rows.value = [];
+  //       })
+  //       .finally(() => {
+  //         hideLoader();
+  //       });
+  //   }
+  // });
+};
+const options = ref<any>([]);
+const filterFn = (val: string, update: any) => {
+  if (val === "") {
+    update(() => {
+      options.value = OrderTypeOption.value;
+    });
+    return;
+  } else {
+    update(() => {
+      options.value = OrderTypeOption.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+  console.log(options.value);
+};
+
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "order",
+  descending: false,
+  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-btn round flat color="blue" icon="mdi-history" @click="clickOpenpopup">
+    <q-tooltip>แสดงประวัติออกคำสั่ง</q-tooltip></q-btn
+  >
+  <q-dialog v-model="modal">
+    <q-card style="width: 850px; max-width: 80vw">
+      <q-card-section>
+        <div class="my-content">
+          <div
+            class="row q-pa-xs items-center bg-blue-1"
+            style="border-radius: 4px 4px 0px 0px"
+          >
+            <q-icon
+              size="20px"
+              color="blue-9"
+              name="mdi-filter-variant"
+              class="q-mx-sm"
+            />
+            <div class="text-blue-9 text-subtitle2 text-weight-medium">
+              <span>ประวัติออกคำสั่ง</span>
+            </div>
+            <q-space />
+            <q-btn
+              color="blue-9"
+              icon="mdi-close"
+              size="12px"
+              flat
+              round
+              dense
+              v-close-popup
+            />
+          </div>
+          <q-separator color="blue-1" />
+          <div class="dialog-card-contain">
+            <q-card-section class="q-pa-sm">
+              <q-form ref="myForm">
+                <div class="row col-12 q-col-gutter-xs">
+                  <q-select
+                    class="col-4"
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
+                    outlined
+                    dense
+                    v-model="reportType"
+                    emit-value
+                    map-options
+                    :options="options"
+                    option-label="name"
+                    option-value="id"
+                    :label="`${' ประเภท'}`"
+                    use-input
+                    input-debounce="0"
+                    @filter="filterFn"
+                    behavior="menu"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template></q-select
+                  >
+                  <datepicker
+                    class="col-4"
+                    menu-class-name="modalfix"
+                    v-model="reportYear"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    clearable
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        class="inputgreen cursor-pointer q-mb-sm"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        borderless
+                        :model-value="
+                          reportYear == null ? null : reportYear + 543
+                        "
+                        :label="`${'ปีงบประมาณ'}`"
+                        clearable
+                      >
+                      </q-input>
+                    </template>
+                  </datepicker>
+                  <q-input
+                    class="col-4"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    v-model="reportNo"
+                    hide-bottom-space
+                    label="เลขที่คำสั่ง"
+                  />
+
+                  <q-space />
+                  <div>
+                    <q-btn
+                      dense
+                      color="primary"
+                      icon="mdi-magnify"
+                      label="ค้นหา"
+                      class="q-px-md"
+                      @click="clickSearch(employeeClass)"
+                    />
+                  </div>
+                </div>
+              </q-form>
+            </q-card-section>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <q-table
+          flat
+          dense
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="order"
+          class="custom-header-table"
+          no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <div class="text-grey-7 text-weight-medium">
+                  <span class="row">{{ col.label }}</span>
+                </div>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props"> {{ props.rowIndex + 1 }}</q-td>
+              <q-td key="order" :props="props">{{ props.row.order }} </q-td>
+              <q-td key="citizenId" :props="props">{{
+                props.row.citizenId
+              }}</q-td>
+              <q-td key="name" :props="props">{{ props.row.name }}</q-td>
+
+              <q-td key="posNo" :props="props">{{ props.row.posNo }}</q-td>
+              <q-td key="position" :props="props">{{
+                props.row.position
+              }}</q-td>
+              <q-td key="date" :props="props">{{ props.row.date }}</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>
+
+      <!-- <q-card-actions align="right">
+        <q-btn flat label="OK" color="primary" v-close-popup />
+      </q-card-actions> -->
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  .q-table thead tr:last-child th {
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>