From 7aa623dfbde5f395a36db185b5a1093594b8525c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 22 Sep 2023 15:14:06 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=20?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=82=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/2_Manage/Tab1.vue  | 374 +++++++++++-------
 .../components/2_Manage/listManage.vue        |  95 ++++-
 2 files changed, 331 insertions(+), 138 deletions(-)

diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 2c1c66a72..9cf092545 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, reactive } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import { useroleUserDataStore } from "@/stores/roleUser";
@@ -13,6 +13,7 @@ import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import btnDownloadFile from "./downloadFile.vue";
 
+const myForm = ref<QForm>();
 const router = useRouter();
 const mixin = useCounterMixin();
 const {
@@ -158,35 +159,48 @@ const columns2 = ref<QTableProps["columns"]>([
     label: "ลำดับ",
     field: "index",
     align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    required: true,
+    label: "เลขประจำตัวประชาชน",
+    field: "citizenId",
+    align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
     name: "fullname",
     required: true,
-    label: "ชื่อ-สกุล",
+    label: "ชื่อ-นามสกุล",
     field: "fullname",
     align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
-  {
-    name: "position",
-    required: true,
-    label: "ตำแหน่งในสายงาน",
-    field: "position",
-    align: "left",
-  },
-  {
-    name: "level",
-    required: true,
-    label: "ระดับ",
-    field: "level",
-    align: "left",
-  },
-  {
-    name: "organizationOrganization",
-    required: true,
-    label: "สังกัด",
-    field: "organizationOrganization",
-    align: "left",
-  },
+  // {
+  //   name: "position",
+  //   required: true,
+  //   label: "ตำแหน่งในสายงาน",
+  //   field: "position",
+  //   align: "left",
+  // },
+  // {
+  //   name: "level",
+  //   required: true,
+  //   label: "ระดับ",
+  //   field: "level",
+  //   align: "left",
+  // },
+  // {
+  //   name: "organizationOrganization",
+  //   required: true,
+  //   label: "สังกัด",
+  //   field: "organizationOrganization",
+  //   align: "left",
+  // },
 ]);
 
 const rows2 = ref<any[]>([]);
@@ -254,13 +268,12 @@ const changtypeOc = () => {
   DataStore.typeOc = organization.value;
 };
 // เพิ่มราชชื่อ
-const clickmodalAdd = () => {
+const clickmodalAdd = async () => {
   let ocId = DataStore.typeOc ? DataStore.typeOc : DataStore.agency;
   showLoader();
-  fecthInsignia();
-  fecthlistperson(ocId);
-
-  insigniaType.value = "";
+  await fecthInsignia();
+  await fecthlistperson(ocId);
+  clearForm();
 };
 // เรียกรายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม
 const fecthlistperson = async (id: string) => {
@@ -282,6 +295,7 @@ const fecthlistperson = async (id: string) => {
     .then((res) => {
       let data = res.data.result.map((e: any) => ({
         id: e.id,
+        citizenId: e.citizenId,
         fullname: e.fullname == null ? "-" : e.fullname,
         position: e.position == null ? "-" : e.position,
         level: e.positionEmployeeLevel == null ? "-" : e.positionEmployeeLevel,
@@ -298,17 +312,21 @@ const fecthlistperson = async (id: string) => {
     });
 };
 // ยืนยันการเพิ่มราชชื่อ
-const clickAdd = async (id: string) => {
-  if (insigniaType.value !== "") {
-    dialogConfirm(
-      $q,
-      async () => {
-        await addlistperson(id);
-      },
-      "ยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ",
-      "ต้องการยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ นี้หรือไม่?"
-    );
-  } else dialogMessageNotify($q, "กรุณาเลือกประเภทเครื่องราชฯ");
+const clickAdd = async () => {
+  dataPerson.id
+    ? await myForm.value!.validate().then((result: boolean) => {
+        if (result) {
+          dialogConfirm(
+            $q,
+            async () => {
+              await addlistperson(dataPerson.id);
+            },
+            "ยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ",
+            "ต้องการยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ นี้หรือไม่?"
+          );
+        }
+      })
+    : dialogMessageNotify($q, "กรุณาเลือกราชชื่อที่ต้องการเพิ่ม");
 };
 //เพิ่มราชชื่อข้าราชการ
 const addlistperson = async (id: string) => {
@@ -317,6 +335,7 @@ const addlistperson = async (id: string) => {
     profileId: id,
     insigniaId: insigniaType.value,
     insigniaPeriodId: props.roundId,
+    reason: reason.value,
   };
   await http
     .post(config.API.insigniaCreate(), data)
@@ -497,6 +516,27 @@ const listdelete = async (id: string, reason: string) => {
       await closemodelPopupDelete();
     });
 };
+const dataPerson = reactive({
+  id: "",
+  position: "",
+  organizationOrganization: "",
+  level: "",
+});
+const reason = ref<string>("");
+const selectPerson = (person) => {
+  dataPerson.id = person.id;
+  dataPerson.position = person.position;
+  dataPerson.organizationOrganization = person.organizationOrganization;
+  dataPerson.level = person.level;
+};
+const clearForm = () => {
+  dataPerson.id = "";
+  dataPerson.position = "";
+  dataPerson.organizationOrganization = "";
+  dataPerson.level = "";
+  reason.value = "";
+  insigniaType.value = "";
+};
 
 const insignia = ref<string>("");
 const insigniaOptions = ref<any>([]);
@@ -531,7 +571,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 const pagination2 = ref({
-  sortBy: "name",
+  sortBy: "fullname",
   descending: false,
   page: 1,
   rowsPerPage: 10,
@@ -863,7 +903,7 @@ const closeModalEdit = () => {
 
   <!-- add -->
   <q-dialog v-model="modalAdd">
-    <q-card style="width: 850px; max-width: 80vw" class="q-pb-md">
+    <q-card style="width: 800px; max-width: 80vw">
       <q-toolbar class="q-py-md">
         <q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
 
@@ -877,101 +917,163 @@ const closeModalEdit = () => {
         />
       </q-toolbar>
       <q-separator />
-      <div class="q-pa-md">
-        <q-toolbar style="padding: 0">
-          <q-select
-            v-model="insigniaType"
-            label="ประเภทเครื่องราชฯ"
-            dense
-            emit-value
-            map-options
-            :options="insigniaOptions"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            style="min-width: 250px"
-          />
-          <q-space />
-          <q-input
-            borderless
-            outlined
-            dense
-            debounce="300"
-            placeholder="ค้นหา"
-            v-model="filterKeyword2"
-          >
-            <!-- style="width: 850px; max-width: auto"? -->
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-        </q-toolbar>
-        <q-table
-          flat
-          bordered
-          dense
-          :rows="rows2"
-          :columns="columns2"
-          :filter="filterKeyword2"
-          row-key="name"
-          class="custom-header-table"
-          :pagination-label="paginationLabel2"
-          v-model:pagination="pagination2"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>{{ props.rowIndex + 1 }}</q-td>
-              <!-- <q-td key="order" :props="props">
-                {{ props.row.order }}
-              </q-td> -->
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="level" :props="props">{{ props.row.level }}</q-td>
-              <q-td key="organizationOrganization" :props="props">
-                {{ props.row.organizationOrganization }}
-              </q-td>
-              <q-td>
-                <q-btn
-                  outline
-                  :props="props"
-                  label="เพิ่ม"
-                  class="text-teal-5"
-                  @click="clickAdd(props.row.id)"
-                />
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination2.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
-      </div>
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-7">
+            <q-card flat bordered class="fit q-pa-sm">
+              <q-toolbar style="padding: 0">
+                <q-space />
+                <q-input
+                  borderless
+                  outlined
+                  dense
+                  debounce="300"
+                  placeholder="ค้นหา"
+                  v-model="filterKeyword2"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </q-toolbar>
+              <q-table
+                flat
+                bordered
+                dense
+                :rows="rows2"
+                :columns="columns2"
+                :filter="filterKeyword2"
+                row-key="fullname"
+                class="custom-header-table"
+                :pagination-label="paginationLabel2"
+                v-model:pagination="pagination2"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr
+                    :props="props"
+                    class="cursor-pointer"
+                    :class="{ 'text-primary': props.row.id === dataPerson.id }"
+                    @click="selectPerson(props.row)"
+                  >
+                    <q-td style="width: 75px">{{ props.rowIndex + 1 }}</q-td>
+                    <q-td style="width: 250px" key="citizenId" :props="props">
+                      {{ props.row.citizenId }}
+                    </q-td>
+                    <q-td key="fullname" :props="props">
+                      {{ props.row.fullname }}
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="pagination2.page"
+                    color="primary"
+                    :max="scope.pagesNumber"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </q-table>
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-5">
+            <q-card flat bordered class="fit q-pa-sm">
+              <q-form ref="myForm">
+                <div class="q-pa-md">
+                  <div class="row q-gutter-sm">
+                    <div class="col-12">
+                      <q-input
+                        borderless
+                        outlined
+                        dense
+                        label="ตำแหน่งในสายงาน"
+                        placeholder="ตำแหน่งในสายงาน"
+                        v-model="dataPerson.position"
+                        readonly
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        borderless
+                        outlined
+                        dense
+                        label="สังกัด"
+                        placeholder="สังกัด"
+                        v-model="dataPerson.organizationOrganization"
+                        readonly
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        borderless
+                        outlined
+                        dense
+                        label="ระดับ"
+                        placeholder="ระดับ "
+                        v-model="dataPerson.level"
+                        readonly
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-select
+                        v-model="insigniaType"
+                        label="ประเภทเครื่องราชฯ"
+                        dense
+                        emit-value
+                        map-options
+                        :options="insigniaOptions"
+                        option-value="id"
+                        option-label="name"
+                        lazy-rules
+                        hide-bottom-space
+                        :readonly="false"
+                        :borderless="false"
+                        :outlined="true"
+                        :hide-dropdown-icon="false"
+                        :rules="[
+                          (val) => !!val || `กรุณาเลือกประเภทเครื่องราช`,
+                        ]"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        type="textarea"
+                        class="full-width inputgreen cursor-pointer"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        :rules="[(val) => !!val || `กรุณากรอกหมายเหตุ`]"
+                        v-model="reason"
+                        :label="`หมายเหตุ`"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </q-form>
+            </q-card>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn dense unelevated label="บันทึก" color="public" @click="clickAdd">
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </q-card-actions>
     </q-card>
   </q-dialog>
 
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index 81329f258..915d3f11e 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -206,7 +206,15 @@ const popupBackToEdit = async () => {
 const closeModalPopupBackToEdit = async () => {
   modalPopupBackToEdit.value = false;
 };
-
+const modalbackInsignia2Role = ref<boolean>(false);
+//แสดง popup ตีกลับ admin
+const popupBackToInsignia2Role = async () => {
+  modalbackInsignia2Role.value = true;
+};
+//ปิด popup ตีกลับ admin
+const closepopupBackToInsignia2Role = async () => {
+  modalbackInsignia2Role.value = false;
+};
 // ตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
 const backToEdit = async (reason: string) => {
   dialogConfirm(
@@ -241,7 +249,6 @@ const backToEdit = async (reason: string) => {
     "ต้องการยืนยันการตีกลับใช่หรือไม่?"
   );
 };
-
 // อนุมัติรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
 const directorApproved = async () => {
   dialogConfirm(
@@ -271,6 +278,12 @@ const directorApproved = async () => {
     "ต้องการยืนยันการอนุมัติใช่หรือไม่?"
   );
 };
+// ตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st5 และ adminRole
+const backToEditinsignia2Role = async () => {
+  dialogConfirm($q, async () => {
+    console.log("รอ API");
+  });
+};
 // ล็อกข้อมูลรอบการเสนอขอ
 const requestSendNote = async () => {
   var organization = await (DataStore.agency != null
@@ -300,6 +313,22 @@ const requestSendNote = async () => {
       });
   });
 };
+// อัปโหลดไฟล์
+const fileUpload = ref<any>(null);
+const uploadFile = async (event: any) => {
+  dialogConfirm($q, () => {
+    const selectedFile = event;
+    const formdata = new FormData();
+    formdata.append("file", selectedFile);
+    console.log("uploadFile :รอ API"),
+      "ยืนยันการอัปโหลดไฟล์",
+      "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?";
+  });
+};
+// ดาวน์โหลดไฟล์
+const downloadFile = async () => {
+  console.log("downloadFile : รอ API");
+};
 </script>
 
 <template>
@@ -443,6 +472,52 @@ const requestSendNote = async () => {
     </q-tab-panels>
     <!-- :role-user="roleUser" -->
     <q-toolbar class="q-py-md text-right">
+      <q-file
+        v-if="roleDataStore.insignia1Role"
+        bg-color="white"
+        clearable
+        outlined
+        dense
+        v-model="fileUpload"
+        accept=".pdf"
+        :style="fileUpload === null ? 'width: 150px' : 'width: auto'"
+        label="อัปโหลดไฟล์"
+      >
+        <template v-slot:prepend>
+          <q-icon color="light-blue" name="attach_file" />
+          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+        </template>
+      </q-file>
+
+      <q-btn
+        flat
+        round
+        color="light-blue"
+        icon="upload"
+        @click="uploadFile(fileUpload)"
+        v-if="fileUpload !== null"
+      />
+      <q-btn
+        size="md"
+        icon="mdi-download"
+        flat
+        round
+        color="primary"
+        @click="downloadFile"
+        v-if="roleDataStore.insignia1Role"
+      >
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+      </q-btn>
+      <q-btn
+        v-else
+        color="primary"
+        icon-right="mdi-download"
+        label="ดาวน์โหลดไฟล์"
+        @click="downloadFile"
+        outline
+      >
+        <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
+      >
       <q-space />
       <q-btn
         v-if="
@@ -474,6 +549,15 @@ const requestSendNote = async () => {
         class="q-px-md q-ml-md"
         @click="directorApproved"
       />
+      <q-btn
+        v-if="requestStatus == 'st5' && roleDataStore.adminRole"
+        dense
+        unelevated
+        label="ตีกลับ"
+        color="orange"
+        class="q-px-md"
+        @click="popupBackToInsignia2Role"
+      />
     </q-toolbar>
 
     <DialogPopupReason
@@ -483,6 +567,13 @@ const requestSendNote = async () => {
       :click-close="closeModalPopupBackToEdit"
       :savaForm="backToEdit"
     />
+    <DialogPopupReason
+      :modal="modalbackInsignia2Role"
+      title="หมายเหตุการตีกลับssss"
+      label="หมายเหตุ"
+      :click-close="closepopupBackToInsignia2Role"
+      :savaForm="backToEditinsignia2Role"
+    />
   </q-card>
 </template>