From 70bd64ba19cd14771a3c71064f260f4d8562f302 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 12 Feb 2024 11:02:48 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogSelectPerson.vue         | 332 +++++++++---------
 .../components/mainTree.vue                   |  27 +-
 2 files changed, 181 insertions(+), 178 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
index 02dc8fc88..aec7d50e6 100644
--- a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
+++ b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
@@ -520,174 +520,176 @@ watch([() => page.value, () => pageSize.value], () => {
                 ค้นหาคนครอง
               </div>
               <div class="col-12"><q-separator /></div>
-              <div class="row q-col-gutter-sm q-pa-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
-                    ><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
-                  >
-                    <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>
+              <div class="col-12">
+                <div class="row q-col-gutter-sm q-pa-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
+                      ><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
+                    >
+                      <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
-                    ref="table"
-                    flat
-                    :columns="columnsResult"
-                    :rows="rowResult"
-                    row-key="id"
+                  <q-select
+                    for="#select"
+                    v-model="visibleColumnsResult"
+                    multiple
+                    outlined
                     dense
-                    class="custom-header-table"
-                    :paging="true"
-                    :rows-per-page-options="[10, 25, 50, 100]"
-                    @update:pagination="updatePagination"
-                    selection="single"
-                    v-model:selected="selectedProfile"
-                  >
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <q-th auto-width />
-                        <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>
-                          <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>
+                    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
+                      ref="table"
+                      flat
+                      :columns="columnsResult"
+                      :rows="rowResult"
+                      row-key="id"
+                      dense
+                      class="custom-header-table"
+                      :paging="true"
+                      :rows-per-page-options="[10, 25, 50, 100]"
+                      @update:pagination="updatePagination"
+                      selection="single"
+                      v-model:selected="selectedProfile"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th auto-width />
+                          <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>
+                            <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>
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                    <template v-slot:pagination="scope">
-                      <q-pagination
-                        v-model="page"
-                        active-color="primary"
-                        color="dark"
-                        :max="totalPage"
-                        size="sm"
-                        boundary-links
-                        direction-links
-                      ></q-pagination>
-                    </template>
-                  </d-table>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                      <template v-slot:pagination="scope">
+                        <q-pagination
+                          v-model="page"
+                          active-color="primary"
+                          color="dark"
+                          :max="totalPage"
+                          size="sm"
+                          boundary-links
+                          direction-links
+                        ></q-pagination>
+                      </template>
+                    </d-table>
+                  </div>
                 </div>
               </div>
             </q-card>
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 9d0fb2102..88d482208 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -114,19 +114,20 @@ function updateSelected(data: DataTree) {
     })
     .then(async (res: any) => {
       const data = await res.data.result;
-
-      store.getSumPosition({
-        totalPosition: data.totalPosition,
-        totalPositionCurrentUse: data.totalPositionCurrentUse,
-        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalPositionNextUse: data.totalPositionNextUse,
-        totalPositionNextVacant: data.totalPositionNextVacant,
-        totalRootPosition: data.totalPosition,
-        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
-        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalRootPositionNextUse: data.totalPositionNextUse,
-        totalRootPositionNextVacant: data.totalPositionNextVacant,
-      });
+      if (data) {
+        store.getSumPosition({
+          totalPosition: data.totalPosition,
+          totalPositionCurrentUse: data.totalPositionCurrentUse,
+          totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+          totalPositionNextUse: data.totalPositionNextUse,
+          totalPositionNextVacant: data.totalPositionNextVacant,
+          totalRootPosition: data.totalPosition,
+          totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+          totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+          totalRootPositionNextUse: data.totalPositionNextUse,
+          totalRootPositionNextVacant: data.totalPositionNextVacant,
+        });
+      }
     });
   // }
 }