From 47d68933b489e7238a0def4286d5d8ede3cf4aed Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Mon, 5 Feb 2024 17:08:24 +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=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20=E0=B9=82=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/listView.vue                   | 32 ++++++-----
 .../components/mainTree.vue                   | 24 +++++----
 .../components/tableTree.vue                  | 53 +++++++++++++------
 .../02_organizationalNew/views/main.vue       | 33 +++++++-----
 4 files changed, 89 insertions(+), 53 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index 88895010a..d0b0a938c 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -183,10 +183,10 @@ watch(
         </div>
       </div>
 
-      <div class="col-xs-12 col-sm-9 q-pa-md">
-        <div class="col-12 row items-center">
+      <div class="col-xs-12 col-sm-9 q-pa-md row">
+        <div class="col-12 row">
           <div
-            class="row col-12 justify-center items-center"
+            class="row col-12 justify-center"
             v-if="isLoad"
             style="height: 550px"
           >
@@ -195,28 +195,30 @@ watch(
             </div>
           </div>
 
-          <div v-else class="col-12 row items-center">
+          <div v-else class="col-12 row">
+            <div class="col-12" v-if="nodeId !== ''">
             <!-- summary -->
-            <div
+            <q-card
+              bordered
               v-if="nodeId"
-              class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1"
+              class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
             >
               <div class="row col q-pa-sm item">
                 <div class="ellipsis">ตำแหน่งทั้งหมด</div>
                 <q-space />
                 <q-badge color="secondary" :label="store.sumPosition.total" />
               </div>
-              <div class="row col q-pa-sm item bg-grey-1">
+              <div class="row col q-pa-sm item">
                 <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
                 <q-space />
                 <q-badge color="primary" :label="store.sumPosition.use" />
               </div>
-              <div class="row col q-pa-sm item bg-grey-1">
+              <div class="row col q-pa-sm item">
                 <div class="ellipsis">ตำแหน่งว่าง</div>
                 <q-space />
                 <q-badge color="red" :label="store.sumPosition.vacant" />
               </div>
-            </div>
+            </q-card>
 
             <TableView
               v-if="nodeId !== ''"
@@ -230,11 +232,13 @@ watch(
               :filterKeyword="filterKeyword"
               :fetchDataTree="fetchDataTree"
             />
-
-            <q-banner v-else class="q-pa-lg col-12 text-center">
-              <q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
-              <p>กรุณาเลือกโครงสร้าง</p>
-            </q-banner>
+            </div>
+            <div class="row col-12 items-center" v-else>
+              <q-banner class="q-pa-lg col-12 text-center">
+                <q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
+                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
+              </q-banner>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 052b4a5c2..e20abcf03 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -304,7 +304,7 @@ onMounted(async () => {});
 </script>
 
 <template>
-  <div class="col-12 q-py-md q-px-sm">
+  <div class="col-12 q-py-sm q-px-sm">
     <div class="q-gutter-sm">
       <div class="row q-col-gutter-sm q-pl-sm">
         <div class="col-2" v-if="store.typeOrganizational === 'draft'">
@@ -328,7 +328,6 @@ onMounted(async () => {});
             outlined
             v-model="filter"
             label="ค้นหา"
-            class="bg-white"
           >
             <template v-slot:append>
               <q-icon
@@ -337,13 +336,14 @@ onMounted(async () => {});
                 class="cursor-pointer"
                 @click="filter = ''"
               />
+              <q-icon name="search" color="grey-5" />
             </template>
           </q-input>
         </div>
       </div>
       <div class="bg-white tree-container">
         <q-tree
-          class="q-pa-md q-gutter-sm"
+          class="q-pa-sm q-gutter-sm"
           dense
           default-expand-all
           selected-color="primary"
@@ -368,7 +368,7 @@ onMounted(async () => {});
                 <div class="text-weight-medium">
                   {{ prop.node.orgTreeName }}
                 </div>
-                <div class="text-weight-light">
+                <div class="text-weight-light text-grey-8">
                   {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
                   {{
                     prop.node.orgTreeShortName == null
@@ -385,8 +385,10 @@ onMounted(async () => {});
               flat
               dense
               icon="mdi-dots-vertical"
-              class="q-pa-none q-ml-xs"
+              class="q-ml-xs"
               color="grey-13"
+              size="12px"
+              round
             >
               <q-menu>
                 <q-list
@@ -423,8 +425,8 @@ onMounted(async () => {});
                         : null
                     "
                   >
-                    <q-item-section avatar>
-                      <q-icon :color="item.color" :name="item.icon" />
+                    <q-item-section avatar style="min-width:20px;">
+                      <q-icon size="17px" :color="item.color" :name="item.icon" />
                     </q-item-section>
                     <div v-if="prop.node.orgLevel === 0">
                       <q-item-section
@@ -468,6 +470,8 @@ onMounted(async () => {});
               icon="mdi-dots-vertical"
               class="q-pa-none q-ml-xs"
               color="grey-13"
+              size="12px"
+              round
             >
               <q-menu>
                 <q-list
@@ -483,8 +487,8 @@ onMounted(async () => {});
                       onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
                     "
                   >
-                    <q-item-section avatar>
-                      <q-icon :color="item.color" :name="item.icon" />
+                  <q-item-section avatar style="min-width:20px;">
+                      <q-icon size="17px" :color="item.color" :name="item.icon" />
                     </q-item-section>
                     <q-item-section>{{ item.label }}</q-item-section>
                   </q-item>
@@ -532,7 +536,7 @@ onMounted(async () => {});
 .tree-container {
   overflow: auto;
   height: 60vh;
-  border: 1px solid rgb(210, 210, 210);
+  border: 1px solid #E6E6E7;
   border-radius: 10px;
 }
 </style>
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index a16bcb80b..5386412a1 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -317,7 +317,7 @@ function updatePagination(newPagination: NewPagination) {
           flat
           round
           dense
-          color="positive"
+          color="blue-10"
           icon="mdi-cursor-move"
           @click="onClickMovePos('', 'All')"
         >
@@ -325,7 +325,7 @@ function updatePagination(newPagination: NewPagination) {
         </q-btn>
       </div>
 
-      <q-btn flat round dense color="blue-10" icon="save_alt">
+      <q-btn flat round dense color="deep-purple" icon="save_alt">
         <q-menu>
           <q-list
             dense
@@ -361,7 +361,11 @@ function updatePagination(newPagination: NewPagination) {
             v-model="reqMaster.keyword"
             label="ค้นหา"
             @keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
-          />
+          >
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
         </div>
       </div>
     </q-toolbar>
@@ -380,6 +384,7 @@ function updatePagination(newPagination: NewPagination) {
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
       @update:pagination="updatePagination"
+      class="tableTb"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -394,12 +399,13 @@ function updatePagination(newPagination: NewPagination) {
         <q-tr :props="props" class="cursor-pointer">
           <q-td>
             <q-btn
-              size="sm"
-              color="primary"
+              flat
+              size="12px"
+              color="grey-8"
               round
               dense
               @click="props.expand = !props.expand"
-              :icon="props.expand ? 'remove' : 'add'"
+              :icon="props.expand ? 'mdi-menu-up' : 'mdi-menu-down'"
             />
           </q-td>
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
@@ -422,11 +428,12 @@ function updatePagination(newPagination: NewPagination) {
               icon="mdi-dots-vertical"
               class="q-pa-none q-ml-xs"
               color="grey-13"
+              size="12px"
             >
               <q-menu>
                 <q-list
                   dense
-                  style="min-width: 200px"
+                  style="min-width: 150px"
                   v-for="(item, index) in stroe.typeOrganizational === 'draft'
                     ? listMenu
                     : listMenu.filter(
@@ -451,10 +458,12 @@ function updatePagination(newPagination: NewPagination) {
                         : null
                     "
                   >
-                    <q-item-section avatar>
-                      <q-icon :color="item.color" :name="item.icon" />
+                    <q-item-section> 
+                      <div class="row items-center">
+                        <q-icon :color="item.color" size="17px" :name="item.icon" />
+                        <div class="q-pl-md">{{ item.label }}</div>
+                      </div>
                     </q-item-section>
-                    <q-item-section>{{ item.label }}</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
@@ -463,25 +472,28 @@ function updatePagination(newPagination: NewPagination) {
         </q-tr>
 
         <q-tr v-show="props.expand" :props="props">
-          <q-td colspan="100%">
-            <div class="text-left q-pa-md">
+          <q-td colspan="100%" class="bg-grey-1">
+            <q-card flat bordered class="text-left q-ma-sm">
               <q-table
                 flat
                 :columns="columnsExpand"
                 :rows="props.row.positions"
+                table-class="text-grey-9"
                 row-key="id"
                 dense
                 hide-bottom
+                bordered
+                separator="vertical" 
                 class="custom-header-table-expand"
               >
                 <template v-slot:header="props">
-                  <q-tr :props="props">
+                  <q-tr :props="props" class=" bg-grey-2">
                     <q-th
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
                     >
-                      <span class="text-weight-medium">{{ col.label }}</span>
+                      <span class="q-px-sm text-body2 text-black">{{ col.label }}</span>
                     </q-th>
                   </q-tr>
                 </template>
@@ -491,19 +503,20 @@ function updatePagination(newPagination: NewPagination) {
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
+                      
                     >
-                      <div v-if="col.name == 'no'">
+                      <div v-if="col.name == 'no'" class=" text-body2 ">
                         {{ props.rowIndex + 1 }}
                       </div>
 
-                      <div v-else>
+                      <div v-else class=" text-body2">
                         {{ col.value }}
                       </div>
                     </q-td>
                   </q-tr>
                 </template>
               </q-table>
-            </div>
+            </q-card>
           </q-td>
         </q-tr>
       </template>
@@ -584,6 +597,12 @@ function updatePagination(newPagination: NewPagination) {
   }
   .q-table thead tr:first-child th {
     top: 0;
+    padding: 0px;
   }
+  
+}
+ .q-table th:last-child, .q-table td:last-child{
+  padding: 0px !important;
+  
 }
 </style>
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index aff66a6dc..05a77ef54 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -133,19 +133,21 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row">
-    <div class="toptitle text-dark row items-center">โครงสร้างอัตรากำลัง</div>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">โครงสร้างอัตรากำลัง</div>
     <q-space />
 
-    <div class="toptitle row" v-if="store.typeOrganizational === 'draft'">
+    <div class="toptitle row items-center" v-if="store.typeOrganizational === 'draft'">
       <div
         v-if="store.isPublic && store.orgPublishDate"
-        class="q-pt-sm q-pr-sm text-caption"
+        class=" q-pr-md text-caption"
       >
-        วันที่เผยแพร่
-        {{ date2Thai(store.orgPublishDate) }}
+        วันที่เผยแพร่ : 
+        <strong>{{ date2Thai(store.orgPublishDate) }}</strong>
       </div>
       <q-btn
+        dense
+        class="q-px-md"
         color="indigo-9"
         icon="alarm"
         label="ตั้งเวลาเผยแพร่"
@@ -194,10 +196,12 @@ onMounted(async () => {
     </div>
     <div v-else>
       <q-card class="my-card">
-        <q-card-section>
-          <q-toolbar class="q-gutter-md" style="padding: 0px">
+        <q-card-section class="q-pa-sm">
+          <q-toolbar class="q-gutter-md items-center" style="padding: 0px">
             <q-btn-group outline>
               <q-btn
+                dense
+                class="q-px-md"
                 :outline="store.typeOrganizational === 'current' ? false : true"
                 color="blue"
                 label="ปัจจุบัน"
@@ -208,6 +212,8 @@ onMounted(async () => {
                 :disable="ishasActive"
               />
               <q-btn
+                dense
+                class="q-px-md"
                 :outline="store.typeOrganizational === 'draft' ? false : true"
                 color="blue"
                 label="แบบร่าง"
@@ -218,6 +224,8 @@ onMounted(async () => {
                 :disable="ishasDraft"
               />
               <q-btn-dropdown
+                dense
+                class="q-px-md"
                 color="blue"
                 :label="labelHistory"
                 @click="store.typeOrganizational = 'old'"
@@ -240,7 +248,7 @@ onMounted(async () => {
               </q-btn-dropdown>
             </q-btn-group>
 
-            <q-btn-dropdown color="green" label="เพิ่มโครงสร้าง">
+            <q-btn-dropdown dense unelevated class="q-px-md" color="green-6" label="เพิ่มโครงสร้าง">
               <q-list>
                 <q-item
                   dense
@@ -263,14 +271,15 @@ onMounted(async () => {
             <q-space />
             <q-btn
               flat
-              round
+              dense
               :color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
-              icon="list"
+              icon="mdi-file-tree"
               @click="store.statusView = 'list'"
             />
+            <q-separator inset vertical/>
             <q-btn
               flat
-              round
+              dense
               icon="mdi-sitemap"
               :color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
               @click="store.statusView = 'tree'"