From 6419d09f8b8b319338f9b1af3456a749d5546586 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 10 Jun 2024 18:00:18 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=E0=B8=A2=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=AA=E0=B8=B1=E0=B8=9A=E0=B9=80=E0=B8=9B=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=95=E0=B8=B3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChangePosition/DialogChange.vue           | 318 ++++++++++++++++++
 .../components/ChangePosition/DialogRound.vue |  80 +++++
 .../components/ChangePosition/Main.vue        |  27 +-
 .../ChangePosition/PersonalList.vue           |   9 +-
 .../05_placement/interface/index/Main.ts      |  14 +
 5 files changed, 444 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/05_placement/components/ChangePosition/DialogChange.vue
 create mode 100644 src/modules/05_placement/components/ChangePosition/DialogRound.vue

diff --git a/src/modules/05_placement/components/ChangePosition/DialogChange.vue b/src/modules/05_placement/components/ChangePosition/DialogChange.vue
new file mode 100644
index 000000000..c53634b0e
--- /dev/null
+++ b/src/modules/05_placement/components/ChangePosition/DialogChange.vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import { reactive, ref, onMounted, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  optionData,
+  tableType,
+} from "@/modules/05_placement/interface/index/Main";
+import { useRouter } from "vue-router";
+
+const searchRules = ref<boolean>(false);
+const selected = ref<any[]>([]);
+const searchRef = ref<any>(null);
+const rows = ref<tableType[]>([]);
+const type = ref<string>("idcard");
+const search = ref<string>("");
+const typeOps = ref<optionData[]>([
+  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "firstname", name: "ชื่อ" },
+  { id: "lastname", name: "นามสกุล" },
+]);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  dialogConfirm,
+  dialogMessageNotify,
+  findOrgName,
+} = mixin;
+
+const router = useRouter();
+
+const modalDialog = defineModel<boolean>("modal", { required: true });
+
+function onCloseDialog() {
+  modalDialog.value = false;
+  rows.value = [];
+  selected.value = [];
+  search.value = "";
+  type.value = "idcard";
+}
+
+/** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
+const visibleColumnsRespondent = ref<string[]>([
+  "no",
+  "name",
+  "position",
+  "positionType",
+  "organization",
+]);
+
+const columnsRespondent = 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",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionType",
+    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",
+  },
+]);
+
+async function searchInput(check: boolean) {
+  if (check) {
+    searchRules.value = check;
+    searchRef.value.validate();
+    if (!searchRef.value.hasError) {
+      showLoader();
+      const body = {
+        fieldName: type.value,
+        keyword: search.value,
+      };
+      await http
+        .post(config.API.orgSearchPersonal(), body)
+        .then((res) => {
+          const data = res.data.result;
+
+          rows.value = data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          hideLoader();
+        });
+    }
+    setTimeout(() => {
+      searchRules.value = false;
+    }, 100);
+  }
+}
+
+/** update เมื่อเปลี่ยน option */
+function updateSelect() {
+  search.value = "";
+}
+
+function onSubmit() {
+  if (selected.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกรายชื่อผู้ที่ย้ายสับเปลี่ยนตำแหน่ง");
+  } else {
+    const dataProfile = selected.value[0];
+    dialogConfirm($q, () => {
+      //   showLoader();
+      //   http
+      //     .post(config.API.kpiEvaluationUser, {
+      //       kpiPeriodId: formRound.kpiPeriodId.id,
+      //       profileId: dataProfile.id,
+      //       evaluatorId: formRound.evaluatorId,
+      //       commanderId:
+      //         formRound.commanderId == "" ? null : formRound.commanderId,
+      //       commanderHighId:
+      //         formRound.commanderHighId == "" ? null : formRound.commanderHighId,
+      //     })
+      //     .then((res) => {
+      //       const id = res.data.result;
+      //       redirectViewDetail(id);
+      //       onCloseDialog();
+      //     })
+      //     .catch((err) => {
+      //       messageError($q, err);
+      //     })
+      //     .finally(() => {
+      //       hideLoader();
+      //     });
+    });
+  }
+}
+</script>
+<template>
+  <q-dialog v-model="modalDialog" persistent>
+    <q-card :style="$q.screen.gt.xs ? 'min-width: 90vw' : 'width: 100vw'">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="'เพิ่มรายชื่อผู้ที่ย้ายสับเปลี่ยนตำแหน่ง'"
+          :close="onCloseDialog"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
+          <div class="row">
+            <div class="col-12">
+              <div class="row q-pa-md q-col-gutter-sm">
+                <div class="col-12 col-sm-6 col-md-3">
+                  <q-select
+                    label="ค้นหาจาก"
+                    v-model="type"
+                    :options="typeOps"
+                    emit-value
+                    dense
+                    @update:model-value="updateSelect"
+                    map-options
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                  />
+                </div>
+
+                <div class="col-12 col-sm-6 col-md-9">
+                  <q-input
+                    ref="searchRef"
+                    v-model="search"
+                    outlined
+                    clearable
+                    hide-bottom-space
+                    dense
+                    label="คำค้น"
+                    :rules="[
+                      (val) => !!val || !searchRules || `กรุณากรอกคำค้น`,
+                    ]"
+                  >
+                    <template v-slot:after>
+                      <q-btn
+                        color="primary"
+                        icon="search"
+                        label="ค้นหา"
+                        class="full-width q-py-sm q-px-md"
+                        @click="searchInput(true)"
+                      >
+                      </q-btn>
+                    </template>
+                  </q-input>
+                </div>
+                <div class="col-12 q-pt-sm">
+                  <d-table
+                    ref="table"
+                    :columns="columnsRespondent"
+                    :rows="rows"
+                    row-key="id"
+                    flat
+                    bordered
+                    selection="multiple"
+                    v-model:selected="selected"
+                    :paging="true"
+                    dense
+                    class="custom-header-table"
+                    :visible-columns="visibleColumnsRespondent"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th auto-width>
+                          <q-checkbox
+                            keep-color
+                            color="primary"
+                            dense
+                            v-model="props.selected"
+                          />
+                        </q-th>
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                          style="color: #000000; font-weight: 500"
+                        >
+                          <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">
+                        <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 v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+                          <div v-else-if="col.name == 'positionType'">
+                            {{
+                              props.row.positionTypeName
+                                ? props.row.positionTypeName
+                                : ""
+                            }}{{
+                              props.row.positionLevelName
+                                ? ` (${props.row.positionLevelName})`
+                                : ""
+                            }}
+                          </div>
+                          <div
+                            v-else-if="col.name == 'organization'"
+                            class="table_ellipsis"
+                          >
+                            {{ findOrgName(props.row) }}
+                          </div>
+                          <div v-else>
+                            {{ col.value }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/05_placement/components/ChangePosition/DialogRound.vue b/src/modules/05_placement/components/ChangePosition/DialogRound.vue
new file mode 100644
index 000000000..91089030e
--- /dev/null
+++ b/src/modules/05_placement/components/ChangePosition/DialogRound.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, success, showLoader, hideLoader } = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const editCheck = defineModel<boolean>("edit");
+const round = defineModel<string>("round", { required: true });
+const idRound = defineModel<string>("id", { required: true });
+
+const props = defineProps({
+  getData: Function,
+});
+/** ปิด dialog */
+function close() {
+  modal.value = false;
+  editCheck.value = false;
+  round.value = "";
+  idRound.value = "";
+}
+
+function onSubmit() {
+//   dialogConfirm($q, () => {
+//     const url = editCheck.value
+//       ? config.API.
+//       : config.API.;
+
+//     http[editCheck.value ? "put" : "post"](url, {
+//       id: editCheck.value ? idRound : undefined,
+//       round: round.value,
+//     }).then((res) => {
+//       close();
+//       success($q, "บันทึกข้อมูลสำเร็จ");
+//       props.getData?.();
+//     });
+//   });
+}
+</script>
+
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card bordered style="min-width: 40vh">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            editCheck ? 'แก้ไข' : 'เพิ่ม'
+          }รอบการออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง`"
+          :close="close"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row">
+            <div class="col-12">
+              <q-input
+                :model-value="round"
+                outlined
+                dense
+                class="inputgreen"
+                label="ชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อรอบการย้ายสับเปลี่ยนตำแหน่ง'}`,]"
+              ></q-input>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/05_placement/components/ChangePosition/Main.vue b/src/modules/05_placement/components/ChangePosition/Main.vue
index b12c08ce6..c484fdc82 100644
--- a/src/modules/05_placement/components/ChangePosition/Main.vue
+++ b/src/modules/05_placement/components/ChangePosition/Main.vue
@@ -7,14 +7,20 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
 import SendToCommand from "@/modules/05_placement/components/ChangePosition/SendToCommand.vue";
 
+import DialogRound from "@/modules/05_placement/components/ChangePosition/DialogRound.vue";
 import type {
   listAppointType,
   resData,
 } from "@/modules/05_placement/interface/response/AppointMent";
 import type { OpType } from "@/modules/05_placement/interface/response/Main";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const round = ref<string>('');
+const idRound = ref<string>('');
+const editCheck = ref<boolean>(false);
+const modalRound = ref<boolean>(false);
 const $q = useQuasar();
 const modal = ref<boolean>(false);
 const storeFn = useTransferDataStore();
@@ -139,10 +145,17 @@ const fecthLists = async () => {
 };
 
 // dialog สำหรับแก้ไข
-const openModaledit = (data: any) => {};
+const openModaledit = (data: any) => {
+  modalRound.value = true;
+  editCheck.value = true;
+  round.value = data.name
+  idRound.value = data.id
+};
 
 // ฟังก์ชั่นสำหรับเพิ่มรอบการย้ายสับเปลี่ยนตำแหน่ง
-function addRound() {}
+function addRound() {
+  modalRound.value = true;
+}
 
 //ลบข้อมูล
 const clickDelete = (id: string) => {
@@ -373,6 +386,14 @@ onMounted(() => {
     :nextPage="personalListPage"
     :fecthLists="fecthLists"
   />
+
+  <DialogRound
+    v-model:modal="modalRound"
+    v-model:edit="editCheck"
+    v-model:round="round"
+    v-model:id="idRound"
+    :getData="fecthLists"
+  />
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped></style>
diff --git a/src/modules/05_placement/components/ChangePosition/PersonalList.vue b/src/modules/05_placement/components/ChangePosition/PersonalList.vue
index 52014fd22..e52b84929 100644
--- a/src/modules/05_placement/components/ChangePosition/PersonalList.vue
+++ b/src/modules/05_placement/components/ChangePosition/PersonalList.vue
@@ -11,7 +11,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
+import DialogEvalute from '@/modules/05_placement/components/ChangePosition/DialogChange.vue'
 
+const modalDialog = ref<boolean>(false)
 const posType = ref<string>("");
 const posLevel = ref<string>("");
 const position = ref<string>("");
@@ -136,7 +138,9 @@ const clickClose = () => {
 };
 
 // เพิ่มรายชื่อเพื่อย้ายสับเปลี่ยนตำแหน่ง
-const addPerson = () => {};
+const addPerson = () => {
+  modalDialog.value = true
+};
 
 //ดึงข้อมูล API
 const fecthLists = async () => {
@@ -593,6 +597,9 @@ onMounted(() => {
     :dataRows="dataRows"
     :onSubmit="onSave"
   />
+
+  <DialogEvalute 
+  v-model:modal="modalDialog"/>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 28b96fd29..954625192 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -258,6 +258,19 @@ interface DataProfile {
   positionType?: string;
   positionLevel?: string;
 }
+
+interface tableType {
+  personId: string;
+  idcard: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  positionLevel: string;
+  organization: string;
+  salary: string;
+  name: string;
+}
 export type {
   DataOption,
   DataOptionInsignia,
@@ -279,6 +292,7 @@ export type {
   Assign,
   AddressData,
   DataProfile,
+  tableType
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };