From 16fd3dfb0c9d4aa336c49ca8eb551ac7c0167a56 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 7 Feb 2024 17:54:17 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20UI=20?=
 =?UTF-8?q?=E0=B8=84=E0=B8=99=E0=B8=84=E0=B8=A3=E0=B8=AD=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogSelectPerson.vue         | 474 ++++++++++--------
 1 file changed, 261 insertions(+), 213 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
index 7b5b4cd22..1755a769e 100644
--- a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
+++ b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -19,10 +21,12 @@ interface FormDetailPosition {
   positionType: string;
   positionLevel: string;
   personal: string;
+  position: string;
   status: string;
 }
 
 interface SeaechResult {
+  id: string;
   citizenId: string;
   name: string;
   posTypeName: string;
@@ -60,6 +64,7 @@ const formData = reactive<FormDetailPosition>({
   positionType: "", //*เลขที่ตำแหน่ง
   positionLevel: "", //*เลขที่ตำแหน่ง
   personal: "", //*เลขที่ตำแหน่ง
+  position: "", //*เลขที่ตำแหน่ง
   status: "",
 });
 
@@ -192,6 +197,7 @@ const columnsResult = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
 function close() {
   modal.value = false;
 }
@@ -251,6 +257,9 @@ function clearForm() {
   formData.positionType = "";
   formData.positionLevel = "";
   formData.personal = "";
+  formData.position = "";
+  row.value = []
+  rowResult.value = []
 }
 
 watch(
@@ -316,38 +325,45 @@ function validateForm() {
 
 /** ฟังชั่น บันทึก */
 function onSubmit() {
-  dialogConfirm($q, () => {
-    // showLoader();
-    // http
-    //   .post(config.API.createOrganization, formData)
-    //   .then((res) => {
-    //     status.value = true;
-    //     store.typeOrganizational = "draft";
-    //     store.draftId = res.data.result.id;
-    //     success($q, "บันทึกข้อมูลสำเร็จ");
-    //     // props.fetchActive?.();
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   })
-    //   .finally(async () => {
-    //     modal.value = await false;
-    //     await close();
-    //     await hideLoader();
-    //   });
-  },'ยืนยันการเลือกคนครอง','ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?');
+  dialogConfirm(
+    $q,
+    () => {
+      // showLoader();
+      // http
+      //   .post(config.API.createOrganization, formData)
+      //   .then((res) => {
+      //     status.value = true;
+      //     store.typeOrganizational = "draft";
+      //     store.draftId = res.data.result.id;
+      //     success($q, "บันทึกข้อมูลสำเร็จ");
+      //     // props.fetchActive?.();
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   })
+      //   .finally(async () => {
+      //     modal.value = await false;
+      //     await close();
+      //     await hideLoader();
+      //   });
+    },
+    "ยืนยันการเลือกคนครอง",
+    "ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?"
+  );
 }
 
 /** เมื่อ enter ให้ทำการ ค้นหาข้อมูล */
-function filterFn() {
+function searchData() {
   const data = [
     {
+      id: "test1",
       citizenId: "test1",
       name: "test1",
       posTypeName: "test1",
       posLevelName: "test1",
     },
     {
+      id: "test2",
       citizenId: "test2",
       name: "test2",
       posTypeName: "test2",
@@ -358,202 +374,234 @@ function filterFn() {
   rowResult.value = data;
   // props.fetchListDisciplinary?.();
 }
+
+function clearPosition() {
+  formData.positionType = "";
+  formData.positionLevel = "";
+}
 </script>
 <template>
-  <template>
-    <q-dialog v-model="modal" persistent>
-      <q-card style="min-width: 80vw">
-        <form @submit.prevent="validateForm">
-          <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
-          <q-separator />
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80vw">
+      <form @submit.prevent="validateForm">
+        <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
+        <q-separator />
 
-          <q-card-section>
-            <div class="q-px-md">
-              <div class="row q-col-gutter-sm q-mb-xs">
-                <div class="col-4 text-bold">
-                  <div>
-                    <p>เลขที่ตำแหน่ง</p>
-                  </div>
-                </div>
-                <div class="col-8 text-grey-8">
-                  <p>{{ formData.positionNo }}</p>
-                </div>
+        <q-card-section>
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="text-bold text-body1">
+                <p>เลขที่ตำแหน่ง</p>
               </div>
-
-              <div class="row q-col-gutter-sm q-mb-xs">
-                <div class="col-12">
-                  <d-table
-                    flat
-                    :columns="columns"
-                    :rows="row"
-                    row-key="id"
-                    dense
-                    hide-bottom
-                    class="custom-header-table-expand"
-                  >
-                    <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">
-                        <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>
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
-                </div>
-              </div>
-              <div class="row q-col-gutter-sm q-mt-sm">
-                <div class="col-3">
-                  <q-input
-                    ref="positionExecutiveFieldRef"
-                    v-model="formData.personal"
-                    :class="inputEdit(isReadonly)"
-                    dense
-                    outlined
-                    for="#search"
-                    label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
-                    lazy-rules
-                    hide-bottom-space
-                    @keydown.enter.prevent="filterFn"
-                  />
-                </div>
-                <div class="col-2">
-                  <q-select
-                    ref="positionTypeRef"
-                    :class="inputEdit(isReadonly)"
-                    label="ประเภทตำแหน่ง"
-                    v-model="formData.positionType"
-                    :options="typeOps"
-                    emit-value
-                    dense
-                    @update:model-value="updateSelectType"
-                    map-options
-                    outlined
-                    option-label="name"
-                    option-value="id"
-                    lazy-rules
-                    hide-bottom-space
-                    :rules="
-                      !isDisValidate
-                        ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
-                        : []
-                    "
-                  />
-                </div>
-                <div class="col-2">
-                  <q-select
-                    ref="positionLevelRef"
-                    :class="inputEdit(isReadonly)"
-                    label="ระดับตำแหน่ง"
-                    v-model="formData.positionLevel"
-                    :disable="formData.positionType === ''"
-                    :options="levelOps"
-                    emit-value
-                    dense
-                    map-options
-                    outlined
-                    option-label="name"
-                    option-value="id"
-                    lazy-rules
-                    hide-bottom-space
-                    :rules="
-                      !isDisValidate
-                        ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
-                        : []
-                    "
-                  />
-                </div>
-
-                <q-space />
-                <q-select
-                  for="#select"
-                  v-model="visibleColumnsResult"
-                  multiple
-                  outlined
-                  dense
-                  options-dense
-                  :display-value="$q.lang.table.columns"
-                  emit-value
-                  map-options
-                  :options="columnsResult"
-                  option-value="name"
-                  options-cover
-                  style="min-width: 150px"
-                  class="col-xs-12 col-sm-3 col-md-2"
-                />
-                <div class="col-12">
-                  <d-table
-                    flat
-                    :columns="columnsResult"
-                    :rows="rowResult"
-                    row-key="id"
-                    dense
-                    hide-bottom
-                    class="custom-header-table-expand"
-                  >
-                    <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">
-                        <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>
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
-                </div>
+              <div class="text-grey-8 q-ml-sm text-body1">
+                <p>{{ formData.positionNo }}</p>
               </div>
             </div>
-          </q-card-section>
-          <q-separator />
-          <q-card-actions align="right" class="bg-white text-teal">
-            <q-btn type="submit" :label="`ยืนยัน`" color="public" />
-          </q-card-actions>
-        </form>
-      </q-card>
-    </q-dialog>
-  </template>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-12">
+                <d-table
+                  flat
+                  :columns="columns"
+                  :rows="row"
+                  row-key="id"
+                  dense
+                  hide-pagination
+                  class="custom-header-table"
+                >
+                  <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">
+                      <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>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mt-sm">
+              <div class="col-2">
+                <q-input
+                  ref="positionExecutiveFieldRef"
+                  v-model="formData.personal"
+                  :class="inputEdit(isReadonly)"
+                  dense
+                  outlined
+                  for="#search"
+                  label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  ref="positionRef"
+                  v-model="formData.position"
+                  :class="inputEdit(isReadonly)"
+                  dense
+                  outlined
+                  for="#position"
+                  label="ตำแหน่งในสายงาน"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-2">
+                <q-select
+                  ref="positionTypeRef"
+                  :class="inputEdit(isReadonly)"
+                  label="ประเภทตำแหน่ง"
+                  v-model="formData.positionType"
+                  :options="typeOps"
+                  emit-value
+                  dense
+                  @update:model-value="updateSelectType"
+                  map-options
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :rules="
+                    !isDisValidate
+                      ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
+                      : []
+                  "
+                  ><template v-if="formData.positionType" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="clearPosition()"
+                      class="cursor-pointer"
+                    /> </template
+                ></q-select>
+              </div>
+              <div class="col-2">
+                <q-select
+                  
+                  ref="positionLevelRef"
+                  :class="inputEdit(isReadonly)"
+                  label="ระดับตำแหน่ง"
+                  v-model="formData.positionLevel"
+                  :disable="formData.positionType == ''"
+                  :options="levelOps"
+                  emit-value
+                  dense
+                  map-options
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :rules="
+                    !isDisValidate
+                      ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
+                      : []
+                  "
+                >
+                  <template v-if="formData.positionLevel" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="formData.positionLevel = ''"
+                      class="cursor-pointer"
+                    /> </template
+                ></q-select>
+              </div>
+              <div class="col-2">
+                <q-btn 
+                label="ค้นหา"
+                color="teal-5"
+                class="full-height"
+                icon="search"
+                @click="searchData"
+                />
+              </div>
+
+              <q-select
+                for="#select"
+                v-model="visibleColumnsResult"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columnsResult"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="col-xs-12 col-sm-3 col-md-2"
+              />
+              <div class="col-12">
+                <d-table
+                  flat
+                  :columns="columnsResult"
+                  :rows="rowResult"
+                  row-key="id"
+                  dense
+                  hide-pagination
+                  class="custom-header-table"
+                >
+                  <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">
+                      <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>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn type="submit" :label="`ยืนยัน`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
 </template>
+<style scoped></style>