From 4938aaf40d9295a168467574005ff4719fb5b913 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 24 Sep 2024 17:16:27 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20step=20u?=
 =?UTF-8?q?i=20=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=84=E0=B8=99=E0=B9=84?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87=E0=B8=82=E0=B8=AD=E0=B9=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Transfer/DialogOrders.vue      |   6 +-
 .../components/DialogCreateCommand.vue        | 626 ++++++++++++------
 .../components/Main/DialogFormCommand.vue     |   4 +-
 3 files changed, 440 insertions(+), 196 deletions(-)

diff --git a/src/modules/05_placement/components/Transfer/DialogOrders.vue b/src/modules/05_placement/components/Transfer/DialogOrders.vue
index e792d3e41..2b3a58ecc 100644
--- a/src/modules/05_placement/components/Transfer/DialogOrders.vue
+++ b/src/modules/05_placement/components/Transfer/DialogOrders.vue
@@ -175,7 +175,7 @@ watch(
 );
 </script>
 <template>
-  <q-dialog v-model="props.modal">
+  <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
       <q-separator />
@@ -285,8 +285,8 @@ watch(
 
   <DialogCreateCommand
     v-model:modal="modalCommand"
-    command-type-code="C-PM-13"
-    :persons-id="selected"
+    :command-type-code="'C-PM-13'"
+    :persons-id="selected.map((r) => r.id)"
   />
 </template>
 
diff --git a/src/modules/18_command/components/DialogCreateCommand.vue b/src/modules/18_command/components/DialogCreateCommand.vue
index c31955562..bf4d0c4a0 100644
--- a/src/modules/18_command/components/DialogCreateCommand.vue
+++ b/src/modules/18_command/components/DialogCreateCommand.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
 
-// import http from "@/plugins/http";
-// import config from "@/app.config";
-
 import type { QTableProps } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+import type {
+  DataCommandType,
+  DataListCommand,
+} from "@/modules/18_command/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -34,80 +37,96 @@ const props = defineProps({
   personsId: Array, // ไอดีคนที่เลือกออกคำสั่งส่งมาเป็น array
 });
 
-const rows = ref<ResponseData[]>([]); // รายการคำสั่ง
-const selected = ref<string>(""); // id คำสั่งที่เลือก
+const commandType = ref<string>(""); //ประเภทคำสั่ง
+const commandOp = ref<DataCommandType[]>([]); //ตัวเลือกคำสั่ง
+const listCommand = ref<DataCommandType[]>([]); //ตัวเลือกคำสั่ง
+const commandNo = ref<string>("");
+const commandYear = ref<number>(new Date().getFullYear());
+
+const rows = ref<DataListCommand[]>([]); // รายการคำสั่ง
+const selected = ref<any>([]); // id คำสั่งที่เลือก
 const filter = ref<string>(""); // คำค้นหา
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "posType",
-  "organizationPositionOld",
-  "organization",
-  "createdAt",
+
+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[]>([
+  "commandNo",
+  "issue",
+  "commandExcecuteDate",
+  "commandAffectDate",
+  "createdFullName",
+  "assignFullName",
 ]);
-const columns2 = ref<QTableProps["columns"]>([
+const columns = ref<QTableProps["columns"]>([
   {
-    name: "no",
+    name: "commandNo",
     align: "left",
-    label: "ลำดับ",
+    label: "เลขที่คำสั่ง",
     sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    field: "commandNo",
     format(val, row) {
-      return `${row.prefix}${row.firstName} ${row.lastName}`;
+      return val ? `${val} / ${row.commandYear + 543}` : "-";
     },
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return row.positionTypeOld + " (" + row.positionLevelOld + ")";
-    },
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "ตำแหน่ง/สังกัดเดิม",
-    sortable: true,
-    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "organization",
+    name: "issue",
     align: "left",
-    label: "หน่วยงานที่ขอโอนไป",
+    label: "ชื่อคำสั่ง",
     sortable: true,
-    field: "organization",
+    field: "issue",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "createdAt",
+    name: "commandExcecuteDate",
     align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    label: "วันที่ลงนาม",
+    sortable: false,
+    field: "commandExcecuteDate",
     format(val) {
-      return date2Thai(val);
+      return val ? date2Thai(val) : "-";
     },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commandAffectDate",
+    align: "left",
+    label: "วันที่คำสั่งมีผล",
+    sortable: false,
+    field: "commandAffectDate",
+    format(val) {
+      return val ? date2Thai(val) : "-";
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้สร้าง",
+    sortable: false,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "assignFullName",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: false,
+    field: "assignFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
 ]);
 
@@ -115,190 +134,415 @@ const columns2 = ref<QTableProps["columns"]>([
  * ฟังก์ชันสร้างคำสั่งใหม่
  */
 function createCommand() {
-  // dialogConfirm($q, async () => {
-  //   const id = selected.value.map((r) => r.id);
-  //   const body = {
-  //     id,
-  //   };
-  //   showLoader();
-  //   await http
-  //     .post(config.API.transferReport, body)
-  //     .then((res) => {
-  //       modal.value = false;
-  router.push("/command/edit/736c178f-9c11-44bc-b6e0-ef47ea06ffe9");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-  // });
+  dialogConfirm($q, async () => {
+    // const data = props.personsId;
+    // const body = {
+    //   commandYear: commandYear.value,
+    //   commandNo: commandNo.value,
+    //   commandTypeId: commandType.value,
+    //   persons: data,
+    // };
+    // showLoader();
+    // await http
+    //   .post(config.API.transferReport, body)
+    //   .then(async (res) => {
+    //     const id = await res.data.result;
+    //     modal.value = false;
+    router.push("/command/edit/736c178f-9c11-44bc-b6e0-ef47ea06ffe9");
+    // router.push(`/command/edit/${id}`);
+    clearValue();
+    // })
+    // .catch((e) => {
+    //   messageError($q, e);
+    // })
+    // .finally(() => {
+    //   hideLoader();
+    // });
+  });
 }
 
 /**
  * ฟังก์ชันเพิ่มคนเข้าไปในคำสั่งที่เป็นแบบร่าง
  */
-function addPersonalToCommand(id: string) {
-  // dialogConfirm($q, async () => {
-  //   const id = selected.value.map((r) => r.id);
-  //   const body = {
-  //     id,
-  //   };
-  //   showLoader();
-  //   await http
-  //     .post(config.API.transferReport, body)
-  //     .then((res) => {
-  //       modal.value = false;
-  // router.push("/command/edit/" + id);
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-  // });
+function addPersonalToCommand() {
+  dialogConfirm($q, async () => {
+    const data = props.personsId;
+    const body = {
+      commandId: selected.value[0].id,
+      persons: data,
+    };
+    console.log("🚀 ~ dialogConfirm ~ body:", body);
+    // showLoader();
+    // await http
+    //   .post(config.API.transferReport, body)
+    //   .then((res) => {
+    // const id = res.data.result
+    modal.value = false;
+    router.push("/command/edit/18477dcd-2f14-4e49-8fca-a446164e8b59");
+    // router.push("/command/edit/" + id);
+    // })
+    // .catch((e) => {
+    //   messageError($q, e);
+    // })
+    // .finally(() => {
+    //   hideLoader();
+    // });
+  });
 }
 
-const typeAction = ref<string>("NEW"); // NEW = สร้างใหม่, SELECT = เลือกคำสั่งที่เป็นแบบร่าง
 function onSubmit() {
-  if (typeAction.value === "NEW") {
+  if (selectCreate.value === "NEW") {
     createCommand();
   } else {
-    addPersonalToCommand(selected.value);
+    addPersonalToCommand();
   }
 }
 
-function closeModal() {
-  modal.value = false;
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "OrderTypeOption":
+      update(() => {
+        commandType.value = val ? "" : commandType.value;
+        commandOp.value = listCommand.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
 }
 
-const selectCreate = ref<string | null>(null);
+/**
+ * เปลี่ยน tab เเละ clear ค่า tab ก่อนหน้า
+ * @param type แยกประเภท
+ */
+function changeTab(type: string) {
+  clearValue();
+  selectCreate.value = type;
+  if (type == "DRAF") {
+    getListCommandDraf();
+  }
+}
+
+/** ปิด popup */
+function closeModal() {
+  modal.value = false;
+  clearValue();
+}
+
+function clearValue() {
+  commandType.value = "";
+  commandNo.value = "";
+  commandYear.value = new Date().getFullYear();
+
+  selectCreate.value = "NEW";
+}
+
+const selectCreate = ref<string | null>("NEW");
+
+async function getListCommandDraf() {
+  showLoader();
+  await http
+    .get(
+      config.API.commandList +
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&year=${commandYear.value}&keyword=${filter.value}&status=DRAFT`
+    )
+    .then(async (res) => {
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      rows.value = res.data.result.data;
+      console.log("🚀 ~ .then ~ rows.value:", rows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูลคำสั่ง */
+async function fetchCommandType() {
+  showLoader();
+  await http
+    .get(config.API.commandType)
+    .then(async (res) => {
+      const data = await res.data.result;
+      listCommand.value = data;
+      commandOp.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getListCommandDraf();
+  }
+);
+
+watch(modal, () => {
+  if (modal.value && props.personsId?.length !== 0) {
+    fetchCommandType();
+  }
+});
 </script>
 
 <template>
   <q-dialog v-model="modal">
-    <q-card style="width: 1200px; max-width: 80vw">
+    <q-card
+      :style="
+        selectCreate == 'NEW'
+          ? 'width: 500px;max-width: 80vw;'
+          : 'width: 1200px;max-width: 80vw;'
+      "
+    >
       <DialogHeader :tittle="'สร้าง/เลือกคำสั่ง'" :close="closeModal" />
       <q-separator />
-      <q-card-section>
+      <q-card-section class="q-pa-sm">
         <div class="row q-mb-md">
           <div class="col-12 q-gutter-md">
             <q-btn
               outline
               label="สร้างคำสั่งใหม่"
               :color="selectCreate == 'NEW' ? 'primary' : 'grey'"
-              @click="() => (selectCreate = 'NEW')"
+              @click="changeTab('NEW')"
             />
 
             <q-btn
               outline
               label="เลือกคำสั่งที่เป็นแบบร่าง"
               :color="selectCreate == 'DRAF' ? 'primary' : 'grey'"
-              @click="() => (selectCreate = 'DRAF')"
+              @click="changeTab('DRAF')"
             />
           </div>
         </div>
 
         <q-separator />
+        <div v-if="selectCreate == 'NEW'" class="row q-mt-sm q-col-gutter-sm">
+          <div class="col-12">
+            <q-select
+              class="inputgreen"
+              v-model="commandType"
+              :label="`${'ประเภทคำสั่ง'}`"
+              dense
+              emit-value
+              map-options
+              option-label="name"
+              :options="commandOp"
+              option-value="id"
+              lazy-rules
+              use-input
+              hide-bottom-space
+              outlined
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
+                    ) "
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div class="col-6">
+            <q-input
+              class="inputgreen"
+              outlined
+              dense
+              v-model="commandNo"
+              :label="`${'คำสั่งเลขที่'}`"
+            />
+          </div>
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
 
-        <div class="row justify-end q-mt-sm">
           <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filter"
-                placeholder="ค้นหา"
-                style="width: 850px; 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="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="commandYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              class="inputgreen"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  hide-bottom-space
+                  :model-value="commandYear == null ? null : commandYear + 543"
+                  :label="`${'พ.ศ.'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
           </div>
         </div>
 
-        <d-table
-          :columns="columns2"
-          :rows="rows"
-          :filter="filter"
-          row-key="id"
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
+        <div v-else class="row q-mt-sm">
+          <q-toolbar style="padding: 0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="commandYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              class="inputgreen"
+              @update:model-value="getListCommandDraf()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
                   dense
-                  v-model="props.selected"
-                />
-              </q-td>
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-
-                <div
-                  v-else
-                  :class="
-                    col.name === 'organizationPositionOld' ||
-                    col.name === 'organization'
-                      ? 'table_ellipsis'
-                      : ''
-                  "
+                  outlined
+                  hide-bottom-space
+                  :model-value="commandYear == null ? null : commandYear + 543"
+                  :label="`${'พ.ศ.'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                 >
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-space />
+            <q-input
+              borderless
+              outlined
+              dense
+              debounce="300"
+              v-model="filter"
+              placeholder="ค้นหา"
+              style="width: 200px; max-width: auto"
+              @keydown.enter.prevent="getListCommandDraf()"
+            >
+              <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"
+            />
+          </q-toolbar>
+          <div class="col-12">
+            <d-table
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              :visible-columns="visibleColumns"
+              selection="single"
+              v-model:selected="selected"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @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="getListCommandDraf"
+                ></q-pagination>
+              </template>
+
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div>
+                      {{ col.value ?? "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
         <q-btn
           label="บันทึก"
           @click="onSubmit"
-          :disable="selected"
+          :disable="selected || commandType == ''"
           color="public"
           ><q-tooltip>บันทึก</q-tooltip></q-btn
         >
diff --git a/src/modules/18_command/components/Main/DialogFormCommand.vue b/src/modules/18_command/components/Main/DialogFormCommand.vue
index c9f6c3f61..ef7f1c69e 100644
--- a/src/modules/18_command/components/Main/DialogFormCommand.vue
+++ b/src/modules/18_command/components/Main/DialogFormCommand.vue
@@ -129,7 +129,7 @@ watch(modal, () => {
                 use-input
                 hide-bottom-space
                 outlined
-                :rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
                 @filter="(inputValue:any,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
                     ) "
@@ -180,7 +180,7 @@ watch(modal, () => {
                       commandYear == null ? null : commandYear + 543
                     "
                     :label="`${'พ.ศ.'}`"
-                    :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                   >
                     <template v-slot:prepend>
                       <q-icon