From 9b5f8b7af842ade671419d50cc6cf3da675a39e5 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 25 Sep 2024 10:17:33 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=AA=E0=B9=88=E0=B8=87=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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PersonalList/DialogOrders.vue  | 387 ++++++++++++++++++
 .../components/PersonalList/Table.vue         |  51 ++-
 .../components/PersonalList/TableView.vue     |  33 +-
 .../05_placement/interface/index/Main.ts      |  53 +++
 .../3_InvestigateDisciplinary/Form.vue        |   2 +-
 .../components/DialogCreateCommand.vue        |   4 +-
 6 files changed, 509 insertions(+), 21 deletions(-)
 create mode 100644 src/modules/05_placement/components/PersonalList/DialogOrders.vue

diff --git a/src/modules/05_placement/components/PersonalList/DialogOrders.vue b/src/modules/05_placement/components/PersonalList/DialogOrders.vue
new file mode 100644
index 000000000..0b52b77bf
--- /dev/null
+++ b/src/modules/05_placement/components/PersonalList/DialogOrders.vue
@@ -0,0 +1,387 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import avatar from "@/assets/avatar_user.jpg";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+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 DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  date2Thai,
+  dateText,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+/**
+ * props
+ */
+const props = defineProps({
+  closeModal: Function,
+  fetchData: Function,
+  rows: Array,
+});
+
+const modalCommand = ref<boolean>(false); //เปิด-ปิด modal สร้างคำสั่ง
+//Table
+const selected = ref<ResponseData[]>([]); //รายชื่อที่เลือก
+const filter = ref<string>(""); //คำค้นหา
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "examNumber",
+  "organizationName",
+  "positionCandidate",
+  "reportingDate",
+  "bmaOfficer",
+  "draft",
+  "statusName",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "center",
+    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,",
+  },
+  {
+    name: "examNumber",
+    align: "center",
+    label: "ลำดับที่สอบได้",
+    sortable: true,
+    field: "examNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับการบรรจุ",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionCandidate",
+    align: "left",
+    label: "ตำแหน่งที่สอบ",
+    sortable: true,
+    field: "positionCandidate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "reportingDate",
+    align: "left",
+    label: "วันที่รายงานตัว",
+    sortable: true,
+    field: "reportingDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bmaOfficer",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "bmaOfficer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "draft",
+    align: "left",
+    label: "สถานะการส่งรายชื่อ",
+    sortable: true,
+    field: "draft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "statusName",
+    align: "left",
+    label: "สถานะการบรรจุ",
+    sortable: true,
+    field: "statusName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/**
+ * ฟังก์ชันยืนยันการออกคำสั่ง
+ */
+function saveOrder() {
+  dialogConfirm(
+    $q,
+    async () => {
+      modalCommand.value = true;
+      modal.value = false;
+    },
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+}
+
+/**
+ * เมื่อ props.modal เป็น true
+ *
+ * กำหนดให้  selected เป็นค่าว่าง
+ */
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value === true) {
+      selected.value = [];
+    }
+  }
+);
+</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 justify-end">
+          <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="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>
+        </div>
+
+        <d-table
+          :columns="columns"
+          :rows="rows"
+          :filter="filter"
+          row-key="id"
+          :visible-columns="visibleColumns"
+          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">
+              <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"
+                class="cursor-pointer"
+              >
+                <template v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </template>
+                <template
+                  v-else-if="col.name === 'fullName'"
+                  class="table_ellipsis"
+                >
+                  <q-item v-ripple style="padding: 0">
+                    <q-item-section avatar>
+                      <q-avatar size="30px" color="grey-4">
+                        <q-img
+                          :src="props.row.avatar"
+                          class="photo-profile"
+                          v-if="props.row.avatar"
+                        />
+                        <q-img :src="avatar" class="photo-profile" v-else"/>
+                      </q-avatar>
+                    </q-item-section>
+
+                    <q-item-section>
+                      <div class="text-weight-medium">{{ props.row.name }}</div>
+                      <div class="text-weight-light">
+                        {{ props.row.idCard }}
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </template>
+                <template v-else-if="col.name === 'examNumber'">
+                  <div class="text-weight-medium">
+                    {{
+                      props.row.examNumber !== null ? props.row.examNumber : "-"
+                    }}
+                  </div>
+                </template>
+
+                <template v-else-if="col.name === 'organizationName'">
+                  <div
+                    v-if="
+                      props.row.orgName !== null ||
+                      props.row.positionPath !== null
+                    "
+                  >
+                    <div class="col-4">
+                      <div class="text-weight-medium">
+                        {{ props.row.root !== null ? props.row.root : "-" }}
+                        {{
+                          props.row.rootShortName !== null
+                            ? `(${props.row.rootShortName})`
+                            : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.nodeName !== null ? props.row.nodeName : ""
+                        }}
+                        {{
+                          props.row.nodeShortName !== null
+                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                            : ""
+                        }}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-else>
+                    <div class="col-4">
+                      <div class="text-weight-medium">-</div>
+                    </div>
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'positionCandidate'">
+                  <div
+                    class="text-weight-medium"
+                    v-if="props.row.positionCandidate == null"
+                  >
+                    -
+                  </div>
+                  <div class="text-weight-medium" v-else>
+                    {{ props.row.positionCandidate }}
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'reportingDate'">
+                  <div class="text-weight-medium">
+                    {{
+                      props.row.reportingDate !== null
+                        ? dateText(props.row.reportingDate)
+                        : "-"
+                    }}
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'bmaOfficer'">
+                  <div class="text-weight-medium">
+                    {{ props.row.bmaOfficer }}
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'draft'">
+                  <div class="text-weight-medium">
+                    {{ props.row.draft }}
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'statusName'">
+                  <div class="text-weight-medium">
+                    {{ props.row.statusName }}
+                  </div>
+                </template>
+              </q-td>
+            </q-tr>
+          </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>
+
+  <DialogCreateCommand
+    v-model:modal="modalCommand"
+    :command-type-code="'C-PM-13'"
+    :persons-id="selected.map((r) => r.id)"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 24463e80d..a4c0193a0 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -2,13 +2,14 @@
 import { ref, onMounted, watch, reactive, computed } from "vue";
 import { useQuasar, QForm } from "quasar";
 
-import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useRoute, useRouter } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { tokenParsed } from "@/plugins/auth";
-import router from "@/router";
-import http from "@/plugins/http";
-import config from "@/app.config";
+
 import avatar from "@/assets/avatar_user.jpg";
 
 import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
@@ -20,10 +21,12 @@ import Table from "@/modules/05_placement/components/PersonalList/TableView.vue"
 import DialogCard from "@/modules/05_placement/components/PersonalList/DialogDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogOrders from "@/modules/05_placement/components/PersonalList/DialogOrders.vue"; //ส่งไปออกคำสั่งขอโอน
 
-const route = useRoute();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const $q = useQuasar(); // show dialog
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const {
   messageError,
   showLoader,
@@ -45,6 +48,7 @@ const props = defineProps({
 let roleAdmin = ref<boolean>(false);
 const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
+const modalOrder = ref<boolean>(false); //modal คำสั่ง
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const modalDisclaim = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const editvisible = ref<boolean>(true);
@@ -58,6 +62,7 @@ const Name = ref<string>();
 const rowsAll = ref<any>([]);
 const rows = ref<any[]>([]);
 const rowsFilter = ref<any>([]);
+const rowsOrder = ref<any>([]);
 const myForm = ref<any>();
 const files = ref<any>(null);
 
@@ -509,10 +514,10 @@ function selectData(pid: string, draft: string) {
  * @param props rows data
  * @param action type
  */
-const editDetail = (
+function editDetail(
   props: PartialTableName,
   action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
-) => {
+) {
   Name.value = props.name;
   personalId.value = props.personalId;
   editRow.value = false;
@@ -554,7 +559,7 @@ const editDetail = (
         modalwaitInfo.value = true;
       });
   }
-};
+}
 
 /**
  * เปิด dialog
@@ -723,6 +728,23 @@ function onSubmitDate() {
   });
 }
 
+/**
+ * ฟังก์ชันส่งไปออกคำสั่ง
+ *
+ * ค้นหารายชื่อออกคำสั่งตามสถานะ อนุมัติ (APPROVE)
+ */
+function openModalOrder(val: boolean) {
+  // ยังไม่ได้ดัก ส่ง ไป ทั้ง object #e.draft == "รอส่งตัว" &&
+  rowsOrder.value = rows.value.filter(
+    (e: any) => e.nodeName !== null && e.reportingDate !== null
+  );
+  modalOrder.value = val;
+}
+
+function closeModal() {
+  modalOrder.value = false;
+}
+
 watch(containStatus, () => {
   if (containStatus.value) {
     rows.value = rowsAll.value.filter((x: any) => x.statusId == "CONTAIN");
@@ -768,6 +790,7 @@ onMounted(async () => {
       v-model:editvisible="editvisible"
       v-model:containfilter="containStatus"
       @update-modaladdlist="handleModalAddListUpdate"
+      @update-modaladdSendPerson="openModalOrder"
       :history="true"
       :boss="true"
       :saveNoDraft="true"
@@ -1220,7 +1243,7 @@ onMounted(async () => {
               :outlined="edit"
               dense
               lazy-rules
-              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              :rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
               :readonly="!edit"
               :borderless="!edit"
               v-model="userNote"
@@ -1235,7 +1258,7 @@ onMounted(async () => {
               :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
               outlined
               use-chips
-              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+              :rules="[(val:string) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
               multiple
               @update:model-value="clickEditRow"
               class="q-py-sm"
@@ -1569,6 +1592,12 @@ onMounted(async () => {
       </q-form>
     </q-card>
   </q-dialog>
+
+  <DialogOrders
+    v-model:modal="modalOrder"
+    :close-modal="closeModal"
+    :rows="rowsOrder"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/05_placement/components/PersonalList/TableView.vue b/src/modules/05_placement/components/PersonalList/TableView.vue
index 10d00274b..c317c2b74 100644
--- a/src/modules/05_placement/components/PersonalList/TableView.vue
+++ b/src/modules/05_placement/components/PersonalList/TableView.vue
@@ -3,6 +3,7 @@ import { ref, useAttrs } from "vue";
 import { QTooltip, useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 
+import type { PersonData } from "@/modules/05_placement/interface/index/Main";
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
@@ -115,6 +116,7 @@ const emit = defineEmits([
   "update:inputvisibleFilter",
   "update:containfilter",
   "update-modaladdlist",
+  "update-modaladdSendPerson",
 ]);
 
 function paginationLabel(start: string, end: string, total: string) {
@@ -153,19 +155,27 @@ function resetFilter() {
 function updateModaladdlist() {
   emit("update-modaladdlist", true);
 }
+
+/** ส่งรายชื่อไปยังหน่วยงาน */
+function openModalOrder() {
+  emit("update-modaladdSendPerson", true);
+}
 </script>
 
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm">
-      <q-toggle
+      <q-btn
         v-if="roleAdmin === false"
-        class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
-        :model-value="containStatus"
-        color="blue"
-        label="แสดงสถานะบรรจุแล้ว"
-        @update:model-value="updateContain"
-      />
+        @click="openModalOrder()"
+        flat
+        round
+        color="add"
+        icon="mdi-account-arrow-right"
+      >
+        <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+      </q-btn>
+
       <div>
         <q-btn
           flat
@@ -179,7 +189,16 @@ function updateModaladdlist() {
         </q-btn>
       </div>
       <q-space />
+
       <div class="items-center" style="display: flex">
+        <q-toggle
+          v-if="roleAdmin === false"
+          class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
+          :model-value="containStatus"
+          color="blue"
+          label="แสดงสถานะบรรจุแล้ว"
+          @update:model-value="updateContain"
+        />
         <q-input
           standout
           dense
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index b680cdcd7..ad4e9a638 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -291,6 +291,58 @@ interface DataEducation {
   graduation: string;
 }
 
+interface PersonData {
+  personalId: string;
+  avatar: string;
+  name: string;
+  fullName: string;
+  idCard: string;
+  examNumber: number;
+  root: string;
+  rootId: string;
+  rootShortName: string;
+  child1: string;
+  child1Id: string;
+  child1ShortName: string;
+  child2: string | null;
+  child2Id: string | null;
+  child2ShortName: string | null;
+  child3: string | null;
+  child3Id: string | null;
+  child3ShortName: string | null;
+  child4: string | null;
+  child4Id: string | null;
+  child4ShortName: string | null;
+  node: number;
+  nodeName: string;
+  nodeId: string;
+  nodeShortName: string;
+  orgRevisionId: string;
+  positionId: string;
+  posMasterNo: number;
+  positionName: string;
+  positionField: string;
+  posTypeId: string;
+  posTypeName: string;
+  posLevelId: string;
+  posLevelName: string;
+  positionCandidate: string;
+  positionCandidateId: string;
+  reportingDate: string;
+  bmaOfficer: string;
+  statusId: string;
+  draft: string;
+  typeCommand: string;
+  posTypeCandidateId: string | null;
+  posLevelCandidateId: string | null;
+  posmasterId: string;
+  statusNameCheck: string;
+  deferment: boolean;
+  statusName: string;
+  organizationName: string;
+}
+
+
 export type {
   DataOption,
   DataOptionInsignia,
@@ -316,6 +368,7 @@ export type {
   ListDataText,
   ListMenu,
   DataEducation,
+  PersonData
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 673e54206..f53c11c41 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -940,7 +940,7 @@ onMounted(async () => {
                               {{ props.row.salary.toLocaleString() }}
                             </div>
                             <div v-else>
-                              {{ col.value ? col.value:'-' }}
+                              {{ col.value ? col.value : "-" }}
                             </div>
                           </q-td>
                         </q-tr>
diff --git a/src/modules/18_command/components/DialogCreateCommand.vue b/src/modules/18_command/components/DialogCreateCommand.vue
index 166f8ced1..9a08675c1 100644
--- a/src/modules/18_command/components/DialogCreateCommand.vue
+++ b/src/modules/18_command/components/DialogCreateCommand.vue
@@ -238,8 +238,8 @@ function clearValue() {
   commandYear.value = new Date().getFullYear();
 
   selectCreate.value = "NEW";
-  selected.value = []
-  filter.value = ''
+  selected.value = [];
+  filter.value = "";
 }
 
 const selectCreate = ref<string | null>("NEW");