fix

src/components/Table.vue

@@ -10,6 +10,7 @@
     dense
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
+    :rows-per-page-options="[10, 25, 50, 100]"
   >
     <template v-slot:pagination="scope">
       ทั้งหมด {{ attrs.rows.length }} รายการ
@@ -42,7 +43,6 @@ const props = defineProps({
   },
 });
 
-
 const pagination = ref({
   sortBy: "desc",
   descending: false,

src/modules/01_metadata/components/insignia/InsigniaDetail.vue

@@ -73,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
 
   {
     name: "createdAt",
-    align: "center",
+    align: "left",
     label: "วันที่สร้าง",
     sortable: true,
     field: "createdAt",
@@ -85,7 +85,7 @@ const columns = ref<QTableProps["columns"]>([
 
   {
     name: "lastUpdatedAt",
-    align: "center",
+    align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
@@ -308,7 +308,6 @@ onMounted(async () => {
                 map-options
                 :options="columns"
                 option-value="name"
-                
                 style="min-width: 140px"
               />
             </div>
@@ -382,7 +381,7 @@ onMounted(async () => {
                     />
                   </div>
                   <div v-else>
-                    {{ col.value }}
+                    {{ col.value ?? "-" }}
                   </div>
                 </q-td>
               </q-tr>
@@ -397,7 +396,9 @@ onMounted(async () => {
     <q-card style="max-width: 350px">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <dialog-header
-          :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :tittle="
+            dialogStatus == 'edit' ? 'แก้ไขเครื่องราชฯ' : 'เพิ่มเครื่องราชฯ'
+          "
           :close="closeDialog"
         />
 

src/modules/01_metadata/components/personal/province/01_District.vue

@@ -82,6 +82,7 @@ const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก
 const dialogStatus = ref<string>(""); // สถานะ เพิ่มข้อมูล,แก้ไขข้อมูล
 const personalName = ref<string>("เขต/อำเภอ"); //label input
 const rows = ref<FormDistrict[]>([]); // ข้อมูลรายการเขต/อำเภอ
+const provinceName = ref<string>(""); //ชื่อจังหวัด
 
 /**
  * fetch ข้อมูลรายการ ระดับการเขต/อำเภอ  ตาม id ของจังหวัด
@@ -94,6 +95,7 @@ async function fetchData() {
     .get(config.API.orgProvince + `/${id.value}`)
     .then(async (res) => {
       const data = await res.data.result.districts;
+      provinceName.value = await res.data.result.name;
 
       const list = data.map((e: FormDistrict) => ({
         ...e,
@@ -187,7 +189,7 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    เขต/อำเภอ
+    เขต/อำเภอ {{ `(${provinceName})` }}
   </div>
 
   <q-card flat bordered>
@@ -227,7 +229,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -283,7 +284,7 @@ onMounted(async () => {
               @click="nextPage(props.row.id)"
             >
               <div>
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
           </q-tr>

src/modules/01_metadata/components/personal/province/02_SubDistrict.vue

@@ -95,6 +95,7 @@ const subDistrict = ref<string>(""); //แขวง / ตำบล;
 const zipCode = ref<string>(""); //รหัสไปรษณีย์
 const dialogStatus = ref<string>(""); // สถานะ เพิ่มข้อมูล,แก้ไขข้อมูล
 const personalName = ref<string>("แขวง/ตำบล"); //label input
+const subdistrict = ref<string>(""); //ชื่อของแขวง/ตำบล
 
 /**
  * fetch ข้อมูลรายการ ระดับการเขต/อำเภอ  ตาม id ของแขวง/ตำบล
@@ -107,6 +108,7 @@ async function fetchData() {
     .get(config.API.orgDistrict + `/${id.value}`)
     .then(async (res) => {
       const data = await res.data.result.subDistricts;
+      subdistrict.value = await res.data.result.name;
       const list = data.map((e: FormSubDistrict) => ({
         ...e,
         createdAt: e.createdAt ? date2Thai(new Date(e.createdAt)) : "",
@@ -192,7 +194,7 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    แขวง/ตำบล
+    แขวง/ตำบล {{ `(${subdistrict})` }}
   </div>
 
   <q-card flat bordered>
@@ -233,7 +235,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -286,7 +287,7 @@ onMounted(async () => {
             </q-td>
             <q-td v-for="col in props.cols" :key="col.id">
               <div>
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
           </q-tr>

src/modules/01_metadata/components/position-employee/01_PositionMain.vue

@@ -68,12 +68,42 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
   "posDictName",
   "posTypeName",
   "posLevelName",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
 ]);
 // ตัวเลือกค้นหา
 const optionFilter = ref<DataOption[]>([
@@ -269,8 +299,58 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row col-12 q-mb-sm">
+  <div class="row col-12 q-mb-sm q-col-gutter-sm">
-    <div class="col-md-2">
+    <div class="row col-12">
+      <q-space />
+      <div class="row col-md-10 q-col-gutter-sm">
+        <div class="col-md-4">
+          <q-select
+            label="ค้นหาจาก"
+            v-model="formQuery.type"
+            :options="optionFilter"
+            emit-value
+            dense
+            map-options
+            outlined
+            option-label="name"
+            option-value="id"
+          />
+        </div>
+
+        <div class="col-md-6">
+          <q-input
+            ref="searchRef"
+            v-model="formQuery.keyword"
+            outlined
+            dense
+            lazy-rules
+            label="คำค้น"
+            hide-bottom-space
+            @keydown.enter="fetchData()"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="formQuery.keyword"
+                name="cancel"
+                @click="(formQuery.keyword = ''), fetchData()"
+                class="cursor-pointer"
+              ></q-icon>
+            </template>
+          </q-input>
+        </div>
+
+        <div class="row col-md-2">
+          <q-btn
+            color="primary"
+            icon="search"
+            label="ค้นหา"
+            class="full-width"
+            @click="fetchData()"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="row col-12">
       <q-btn
         id="addComplaints"
         for="addComplaints"
@@ -282,54 +362,21 @@ onMounted(async () => {
         @click="onClickOpenDialog()"
         ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
       >
-    </div>
+      <q-space />
 
-    <div class="row col-md-10 q-col-gutter-sm">
+      <q-select
-      <div class="col-md-4">
+        v-model="visibleColumns"
-        <q-select
+        multiple
-          label="ค้นหาจาก"
+        outlined
-          v-model="formQuery.type"
+        dense
-          :options="optionFilter"
+        options-dense
-          emit-value
+        :display-value="$q.lang.table.columns"
-          dense
+        emit-value
-          map-options
+        map-options
-          outlined
+        :options="columns"
-          option-label="name"
+        option-value="name"
-          option-value="id"
+        style="min-width: 140px"
-        />
+      />
-      </div>
-
-      <div class="col-md-6">
-        <q-input
-          ref="searchRef"
-          v-model="formQuery.keyword"
-          outlined
-          dense
-          lazy-rules
-          label="คำค้น"
-          hide-bottom-space
-          @keydown.enter="fetchData()"
-        >
-          <template v-slot:append>
-            <q-icon
-              v-if="formQuery.keyword"
-              name="cancel"
-              @click="(formQuery.keyword = ''), fetchData()"
-              class="cursor-pointer"
-            ></q-icon>
-          </template>
-        </q-input>
-      </div>
-
-      <div class="row col-md-2">
-        <q-btn
-          color="primary"
-          icon="search"
-          label="ค้นหา"
-          class="full-width"
-          @click="fetchData()"
-        />
-      </div>
     </div>
   </div>
 

src/modules/01_metadata/components/position-employee/02_GroupMain.vue

@@ -57,11 +57,41 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "posTypeName",
   "posTypeShortName",
   "posTypeRank",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
 ]);
 
 // ฟอร์มข้อมูลกลุ่มงาน
@@ -204,7 +234,6 @@ onMounted(async () => {
         map-options
         :options="columns"
         option-value="name"
-        
         style="min-width: 140px"
       />
     </div>

src/modules/01_metadata/components/position-employee/GroupDetail.vue

@@ -70,12 +70,42 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
   "posLevelName",
   "posTypeName",
   "posLevelAuthority",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
 ]);
 
 const posTypeId = ref<string>(route.params.id.toString()); // id กลุ่มงาน
@@ -248,7 +278,6 @@ onMounted(() => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -298,7 +327,7 @@ onMounted(() => {
                 {{ col.value ? convertPosLevelAuthority(col.value) : "-" }}
               </div>
               <div v-else>
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
           </q-tr>
@@ -365,7 +394,6 @@ onMounted(() => {
               outlined
               dense
               bg-color="white"
-              
               hide-bottom-space
               readonly
             />

src/modules/01_metadata/components/position/01_Position.vue

@@ -94,6 +94,33 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
@@ -104,6 +131,9 @@ const visibleColumns = ref<string[]>([
   "posExecutiveName",
   "positionExecutiveField",
   "positionArea",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
 ]);
 
 // ฟอร์มข้อมูลตำแหน่ง
@@ -254,8 +284,60 @@ onMounted(async () => {
 
 <template>
   <q-form @submit.prevent="fetchData()">
-    <div class="row col-12 q-mb-sm">
+    <div class="row col-12 q-mb-sm q-col-gutter-sm">
-      <div class="col-md-2">
+      <div class="row col-12">
+        <q-space />
+        <div class="row col-md-10 q-col-gutter-sm">
+          <div class="col-md-4">
+            <q-select
+              label="ค้นหาจาก"
+              v-model="type"
+              :options="optionFilter"
+              emit-value
+              dense
+              map-options
+              outlined
+              option-label="name"
+              option-value="id"
+              :clearable="type !== 'ALL'"
+              @clear="type = 'ALL'"
+            />
+          </div>
+
+          <div class="col-md-6">
+            <q-input
+              :class="inputEdit(isReadonly)"
+              v-model="search"
+              outlined
+              dense
+              lazy-rules
+              label="คำค้น"
+              hide-bottom-space
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="search"
+                  name="cancel"
+                  @click="search = ''"
+                  class="cursor-pointer"
+                ></q-icon>
+              </template>
+            </q-input>
+          </div>
+
+          <div class="row col-md-2">
+            <q-btn
+              color="primary"
+              icon="search"
+              label="ค้นหา"
+              class="full-width"
+              type="submit"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="row col-12">
         <q-btn
           id="addComplaints"
           for="addComplaints"
@@ -267,55 +349,21 @@ onMounted(async () => {
           @click="popupAdd()"
           ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
         >
-      </div>
+        <q-space />
 
-      <div class="row col-md-10 q-col-gutter-sm">
+        <q-select
-        <div class="col-md-4">
+          v-model="visibleColumns"
-          <q-select
+          multiple
-            label="ค้นหาจาก"
+          outlined
-            v-model="type"
+          dense
-            :options="optionFilter"
+          options-dense
-            emit-value
+          :display-value="$q.lang.table.columns"
-            dense
+          emit-value
-            map-options
+          map-options
-            outlined
+          :options="columns"
-            option-label="name"
+          option-value="name"
-            option-value="id"
+          style="min-width: 140px"
-            :clearable="type !== 'ALL'"
+        />
-            @clear="type = 'ALL'"
-          />
-        </div>
-
-        <div class="col-md-6">
-          <q-input
-            :class="inputEdit(isReadonly)"
-            v-model="search"
-            outlined
-            dense
-            lazy-rules
-            label="คำค้น"
-            hide-bottom-space
-          >
-            <template v-slot:append>
-              <q-icon
-                v-if="search"
-                name="cancel"
-                @click="search = ''"
-                class="cursor-pointer"
-              ></q-icon>
-            </template>
-          </q-input>
-        </div>
-
-        <div class="row col-md-2">
-          <q-btn
-            color="primary"
-            icon="search"
-            label="ค้นหา"
-            class="full-width"
-            type="submit"
-          />
-        </div>
       </div>
     </div>
   </q-form>

src/modules/01_metadata/components/position/02_Type.vue

@@ -77,7 +77,13 @@ const columns = [
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ] as const satisfies QTableProps["columns"];
-const visibleColumns = ref<string[]>(["posTypeName", "posTypeRank"]);
+const visibleColumns = ref<string[]>([
+  "posTypeName",
+  "posTypeRank",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+]);
 
 const editId = ref<string>(""); // id รายกรปะเภทตำแหน่ง
 const dialog = ref<boolean>(false); // modal popu เพิ่มข้อมูล,แก้ไข
@@ -201,7 +207,6 @@ onMounted(async () => {
         map-options
         :options="columns"
         option-value="name"
-        
         style="min-width: 140px"
       />
     </div>
@@ -257,7 +262,7 @@ onMounted(async () => {
           </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
-          {{ col.value }}
+          {{ col.value ?? "-" }}
         </q-td>
       </q-tr>
     </template>

src/modules/01_metadata/components/position/03_Executive.vue

@@ -21,6 +21,9 @@ const visibleColumns = ref<string[]>([
   "no",
   "posExecutiveName",
   "posExecutivePriority",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -50,6 +53,33 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 const dataEdit = ref<RowListForm>(); // ข้อมูลตำแหน่งทางการบริหารที่แก้ไข
@@ -130,7 +160,6 @@ onMounted(async () => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
   </div>
@@ -197,7 +226,7 @@ onMounted(async () => {
               {{ props.rowIndex + 1 }}
             </div>
             <div v-else>
-              {{ col.value }}
+              {{ col.value ?? "-" }}
             </div>
           </q-td>
         </q-tr>

src/modules/01_metadata/components/position/TypeDetail.vue

@@ -126,6 +126,9 @@ const visibleColumns = ref<string[]>([
   "posLevelName",
   "posLevelRank",
   "posLevelAuthority",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
 ]);
 
 const id = ref<string>(route.params.id.toString()); //ประเภทตำแหน่ง
@@ -295,7 +298,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -376,7 +378,7 @@ onMounted(async () => {
                 {{ posName }}
               </div>
               <div v-else>
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
           </q-tr>
@@ -458,7 +460,6 @@ onMounted(async () => {
               outlined
               dense
               bg-color="white"
-              
               hide-bottom-space
               readonly
             />

src/modules/01_metadata/stores/positionListStore.ts

@@ -20,8 +20,8 @@ export const usePositionDataStore = defineStore("PositionData", () => {
       posTypeId: e.posTypes?.id,
       posTypeName: e.posTypes?.posTypeName,
       posTypeRank: e.posTypes?.posTypeRank,
-      createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+      createdAt: e.createdAt ? date2Thai(e.createdAt) : "-",
-      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
       posLevelAuthority: e.posLevelAuthority
         ? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
         : "-",

src/modules/01_metadata/stores/positionTypeStore.ts

@@ -22,8 +22,8 @@ export const usePositionTypeDataStore = defineStore("PositionTypeData", () => {
       ...e,
       posTypes: undefined,
       posTypeId: e.posTypes?.id,
-      createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+      createdAt: e.createdAt ? date2Thai(e.createdAt) : "-",
-      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
     })) satisfies DataRow[];
     row.value = list;
   }

src/modules/01_metadata/views/05_insignia.vue

@@ -34,7 +34,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "createdAt",
-    align: "center",
+    align: "left",
     label: "วันที่สร้าง",
     sortable: true,
     field: "createdAt",
@@ -45,7 +45,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "lastUpdatedAt",
-    align: "center",
+    align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
@@ -214,7 +214,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -300,7 +299,11 @@ onMounted(async () => {
     <q-card style="max-width: 350px">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <dialog-header
-          :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :tittle="
+            dialogStatus === 'edit'
+              ? 'แก้ไขประเภทเครื่องราชฯ'
+              : 'เพิ่มประเภทเครื่องราชฯ'
+          "
           :close="closeDialog"
         />
 

src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue

@@ -193,7 +193,7 @@ watch(
               dense
               v-model="qurey.searchField"
               :options="store.searchFieldOption"
-              label="เลือกที่ต้องการค้นหา"
+              label="ค้นหาจาก"
               emit-value
               map-options
               option-label="name"
@@ -206,7 +206,7 @@ watch(
                 outlined
                 dense
                 v-model="qurey.searchKeyword"
-                label="คำค้นหา"
+                label="คำค้น"
                 clearable
               >
                 <template v-slot:append v-if="!qurey.searchKeyword">

src/modules/02_users/components/Users/DialogFormUser.vue

@@ -315,8 +315,8 @@ watch(
 </script>
 
 <template>
-  <q-dialog v-model="modal" persistent full-width>
+  <q-dialog v-model="modal" persistent>
-    <q-card>
+    <q-card style="min-width: 80vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="isStatusEdit ? 'แก้ไขผู้ใช้งาน' : 'เพิ่มผู้ใช้งาน'"
@@ -324,219 +324,222 @@ watch(
         />
         <q-separator />
 
-        <q-card-section :horizontal="$q.screen.gt.xs">
+        <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
-          <!-- รายชื่อ -->
+          <div class="row col-12 q-gutter-sm">
-          <q-card-section class="col-md-8 col-xs-12">
+            <!-- รายชื่อ -->
-            <div class="row q-col-gutter-sm">
+            <div class="q-pa-md col-md-8 col-xs-12">
-              <div class="col-12 col-sm-6 col-md-3">
+              <div class="row q-col-gutter-sm">
-                <q-select
+                <div class="col-12 col-sm-6 col-md-3">
-                  label="ค้นหาจาก"
+                  <q-select
-                  v-model="searchType"
+                    label="ค้นหาจาก"
-                  :options="searchTypeOption"
+                    v-model="searchType"
-                  outlined
+                    :options="searchTypeOption"
-                  emit-value
+                    outlined
-                  dense
+                    emit-value
-                  emit-option
+                    dense
-                  option-label="name"
+                    emit-option
-                  option-value="id"
+                    option-label="name"
-                  map-options
+                    option-value="id"
-                />
+                    map-options
-              </div>
+                  />
-              <div class="col-12 col-sm-6 col-md-9">
+                </div>
-                <q-input
+                <div class="col-12 col-sm-6 col-md-9">
-                  ref="searchRef"
+                  <q-input
-                  v-model="keyword"
+                    ref="searchRef"
-                  outlined
+                    v-model="keyword"
-                  clearable
+                    outlined
-                  hide-bottom-space
+                    clearable
-                  dense
+                    hide-bottom-space
-                  label="คำค้น"
+                    dense
-                >
+                    label="คำค้น"
-                  <template v-slot:after>
+                  >
-                    <q-btn
+                    <template v-slot:after>
-                      color="primary"
+                      <q-btn
-                      icon="search"
-                      label="ค้นหา"
-                      class="full-width q-py-sm q-px-md"
-                      @click="(query.page = 1), fetchListUser()"
-                    >
-                    </q-btn>
-                  </template>
-                </q-input>
-              </div>
-            </div>
-
-            <div class="col-12 q-pt-sm">
-              <d-table
-                ref="table"
-                :columns="columns"
-                :rows="rows"
-                row-key="id"
-                flat
-                bordered
-                :paging="true"
-                dense
-                :rows-per-page-options="[10, 25, 50, 100]"
-                selection="single"
-                v-model:selected="selected"
-                @update:pagination="updatePagination"
-              >
-                <template v-slot:header="props">
-                  <q-tr :props="props">
-                    <q-th auto-width></q-th>
-                    <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
+                        icon="search"
-                        v-model="props.selected"
+                        label="ค้นหา"
-                      />
+                        class="full-width q-py-sm q-px-md"
-                    </q-td>
+                        @click="(query.page = 1), fetchListUser()"
-                    <q-td
+                      >
-                      v-for="col in props.cols"
+                      </q-btn>
-                      :key="col.name"
+                    </template>
-                      :props="props"
+                  </q-input>
-                    >
+                </div>
-                      <div>
-                        {{ col.value ? col.value : "-" }}
-                      </div>
-                    </q-td>
-                  </q-tr>
-                </template>
-
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="query.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(maxPage)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="fetchListUser"
-                  ></q-pagination>
-                </template>
-              </d-table>
-            </div>
-          </q-card-section>
-          <q-separator vertical />
-
-          <!-- input -->
-          <q-card-section class="col-md-4 col-xs-12">
-            <div class="row q-col-gutter-md">
-              <div class="col-12">
-                <q-input
-                  v-model="formData.username"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  label="ชื่อผู้ใช้งาน"
-                  readonly
-                >
-                </q-input>
               </div>
-              <div class="col-12" v-if="!isStatusEdit">
+
-                <q-input
+              <div class="col-12 q-pt-sm">
-                  v-model="formData.password"
+                <d-table
-                  outlined
+                  ref="table"
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="id"
+                  flat
+                  bordered
+                  :paging="true"
                   dense
-                  :type="isPwd ? 'password' : 'text'"
+                  :rows-per-page-options="[10, 25, 50, 100]"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผู้ใช้งาน'}`,]"
+                  selection="single"
-                  lazy-rules
+                  v-model:selected="selected"
-                  label="รหัสผู้ใช้งาน"
+                  @update:pagination="updatePagination"
-                  hide-bottom-space
-                  class="inputgreen"
                 >
-                  <template v-slot:append>
+                  <template v-slot:header="props">
-                    <q-icon
+                    <q-tr :props="props">
-                      :name="isPwd ? 'visibility_off' : 'visibility'"
+                      <q-th auto-width></q-th>
-                      class="cursor-pointer"
+                      <q-th
-                      @click="isPwd = !isPwd"
+                        v-for="col in props.cols"
-                    />
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </q-tr>
                   </template>
-                </q-input>
-              </div>
-              <div class="col-12">
-                <q-input
-                  v-model="formData.firstName"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`,]"
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  label="ชื่อ"
-                  readonly
-                >
-                </q-input>
-              </div>
-              <div class="col-12">
-                <q-input
-                  v-model="formData.lastName"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`,]"
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  label="นามสกุล"
-                  readonly
-                >
-                </q-input>
-              </div>
 
-              <div class="col-12">
+                  <template v-slot:body="props">
-                <q-input
+                    <q-tr :props="props" class="cursor-pointer">
-                  v-model="formData.email"
+                      <q-td>
-                  outlined
+                        <q-checkbox
-                  dense
+                          keep-color
-                  :rules="[(val:string) => !!val || `${'กรุณากรอก Email'}`,]"
+                          color="primary"
-                  lazy-rules
+                          dense
-                  hide-bottom-space
+                          v-model="props.selected"
-                  class="inputgreen"
+                        />
-                  label="Email"
+                      </q-td>
-                  type="email"
+                      <q-td
-                >
+                        v-for="col in props.cols"
-                </q-input>
+                        :key="col.name"
-              </div>
+                        :props="props"
-              <div class="col-12" v-if="!isStatusEdit">
+                      >
-                <q-select
+                        <div>
-                  v-model="roles"
+                          {{ col.value ? col.value : "-" }}
-                  outlined
+                        </div>
-                  label="role"
+                      </q-td>
-                  dense
+                    </q-tr>
-                  option-label="name"
+                  </template>
-                  option-value="id"
+
-                  :options="roleOptions"
+                  <template v-slot:pagination="scope">
-                  class="inputgreen"
+                    ทั้งหมด {{ total }} รายการ
-                  map-options
+                    <q-pagination
-                  hide-bottom-space
+                      v-model="query.page"
-                  lazy-rules
+                      active-color="primary"
-                  use-chips
+                      color="dark"
-                  multiple
+                      :max="Number(maxPage)"
-                  use-input
+                      size="sm"
-                  :rules="[(val:string) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
+                      boundary-links
-                />
+                      direction-links
+                      :max-pages="5"
+                      @update:model-value="fetchListUser"
+                    ></q-pagination>
+                  </template>
+                </d-table>
               </div>
             </div>
-          </q-card-section>
+
+            <q-separator vertical />
+
+            <!-- input -->
+            <div class="q-pa-md col">
+              <div class="row q-col-gutter-md">
+                <div class="col-12">
+                  <q-input
+                    v-model="formData.username"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    label="ชื่อผู้ใช้งาน"
+                    readonly
+                  >
+                  </q-input>
+                </div>
+                <div class="col-12" v-if="!isStatusEdit">
+                  <q-input
+                    v-model="formData.password"
+                    outlined
+                    dense
+                    :type="isPwd ? 'password' : 'text'"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผู้ใช้งาน'}`,]"
+                    lazy-rules
+                    label="รหัสผู้ใช้งาน"
+                    hide-bottom-space
+                    class="inputgreen"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        :name="isPwd ? 'visibility_off' : 'visibility'"
+                        class="cursor-pointer"
+                        @click="isPwd = !isPwd"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="formData.firstName"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`,]"
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    label="ชื่อ"
+                    readonly
+                  >
+                  </q-input>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="formData.lastName"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`,]"
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    label="นามสกุล"
+                    readonly
+                  >
+                  </q-input>
+                </div>
+
+                <div class="col-12">
+                  <q-input
+                    v-model="formData.email"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอก อีเมล'}`,]"
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    label="อีเมล"
+                    type="email"
+                  >
+                  </q-input>
+                </div>
+                <div class="col-12" v-if="!isStatusEdit">
+                  <q-select
+                    v-model="roles"
+                    outlined
+                    label="role"
+                    dense
+                    option-label="name"
+                    option-value="id"
+                    :options="roleOptions"
+                    class="inputgreen"
+                    map-options
+                    hide-bottom-space
+                    lazy-rules
+                    use-chips
+                    multiple
+                    use-input
+                    :rules="[(val:string) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </q-card-section>
 
         <q-separator />

src/modules/02_users/views/01_user.vue

@@ -62,7 +62,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "email",
     align: "left",
-    label: "Email",
+    label: "อีเมล",
     sortable: true,
     field: "email",
     headerStyle: "font-size: 14px",

src/modules/02_users/views/03_permissionsView.vue

@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { usePermissionsStore } from "@/modules/02_users/stores/permissions";
 import { useCounterMixin } from "@/stores/mixin";
+import { tokenParsed } from "@/plugins/auth";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -69,6 +70,15 @@ const expanded = ref<string[]>([]); // แสดงข้อมูลในโ
 const nodeId = ref<string>(""); // id โหนด
 
 /** Table*/
+const visibleColumns = ref<string[]>([
+  "no",
+  "posMasterNo",
+  "positionName",
+  "posTypeName",
+  "posLevelName",
+  "positionIsSelected",
+  "authRoleName",
+]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -277,6 +287,11 @@ async function fetchOrganizationActive() {
  * @param id id โครงสร้าง
  */
 async function fetchDataTree(id: string) {
+  const tokenParsedData = await tokenParsed();
+  const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
+  if (!isSuperAdmin) {
+    nodes.value = [];
+  }
   showLoader();
   await http
     .get(config.API.orgByid(id.toString()))
@@ -284,6 +299,7 @@ async function fetchDataTree(id: string) {
       const data = await res.data.result;
       nodes.value.push(...data);
       nodes.value[0].orgRevisionId = id;
+      nodeId.value = nodes.value[0].orgTreeId;
       await fetchDataTable(reqMaster.id, id, reqMaster.type);
     })
     .catch((err) => {
@@ -622,6 +638,22 @@ onMounted(() => {
                       </template>
                     </q-input>
                   </div>
+
+                  <div>
+                    <q-select
+                      v-model="visibleColumns"
+                      multiple
+                      outlined
+                      dense
+                      options-dense
+                      :display-value="$q.lang.table.columns"
+                      emit-value
+                      map-options
+                      :options="columns"
+                      option-value="name"
+                      style="min-width: 140px"
+                    />
+                  </div>
                 </div>
               </q-toolbar>
               <d-table
@@ -636,6 +668,7 @@ onMounted(() => {
                 :rows-per-page-options="[10, 25, 50, 100]"
                 @update:pagination="updatePagination"
                 v-model:pagination="pagination"
+                :visible-columns="visibleColumns"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">

src/modules/02_users/views/04_roleOrganization.vue

@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStoreUser } from "@/modules/02_users/stores/main";
+import { tokenParsed } from "@/plugins/auth";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -59,6 +60,12 @@ const personId = ref<string>("");
  * เก็บข้อมูลโครงสร้างไว้ใน nodeTree
  */
 async function fatchOrg() {
+  const tokenParsedData = await tokenParsed();
+  const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
+  if (!isSuperAdmin) {
+    nodeTree.value = [];
+  }
+
   showLoader();
   await http
     .get(config.API.permissionOrg)
@@ -127,6 +134,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const visibleColumns = ref<string[]>(["fullName", "orgNew"]);
 const modalAdd = ref<boolean>(false); // modal เพิ่มข้อมูลรายชื่อ
 
 /**
@@ -363,6 +371,23 @@ onMounted(async () => {
               </div>
             </div>
 
+            <div class="row col-12 q-mt-sm">
+              <q-space />
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
+
             <div class="col-12 q-mt-sm">
               <d-table
                 :columns="columns"
@@ -374,6 +399,7 @@ onMounted(async () => {
                 dense
                 :rows-per-page-options="[10, 25, 50, 100]"
                 @update:pagination="updatePagination"
+                :visible-columns="visibleColumns"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">

src/modules/02_users/views/05_responsIbilities.vue

@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { tokenParsed } from "@/plugins/auth";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -66,6 +67,15 @@ const nodeId = ref<string>(""); // id โหนด
 const isOfficer = ref<boolean>(false); //แสดง columns สกจ.
 
 /** Table*/
+const visibleColumns = ref<string[]>([
+  "no",
+  "posMasterNo",
+  "positionName",
+  "posTypeName",
+  "posLevelName",
+  "positionIsSelected",
+  "isPosMasterAssign",
+]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -260,6 +270,11 @@ async function fetchOrganizationActive() {
  * @param id id โครงสร้าง
  */
 async function fetchDataTree(id: string) {
+  const tokenParsedData = await tokenParsed();
+  const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
+  if (!isSuperAdmin) {
+    nodes.value = [];
+  }
   showLoader();
   await http
     .get(config.API.orgByid(id.toString()))
@@ -267,6 +282,7 @@ async function fetchDataTree(id: string) {
       const data = await res.data.result;
       nodes.value.push(...data);
       nodes.value[0].orgRevisionId = id;
+      nodeId.value = nodes.value[0].orgTreeId;
       await fetchDataTable(reqMaster.id, id, reqMaster.type);
     })
     .catch((err) => {
@@ -553,6 +569,22 @@ onMounted(() => {
                       </template>
                     </q-input>
                   </div>
+
+                  <div>
+                    <q-select
+                      v-model="visibleColumns"
+                      multiple
+                      outlined
+                      dense
+                      options-dense
+                      :display-value="$q.lang.table.columns"
+                      emit-value
+                      map-options
+                      :options="columns"
+                      option-value="name"
+                      style="min-width: 140px"
+                    />
+                  </div>
                 </div>
               </q-toolbar>
               <d-table
@@ -567,6 +599,7 @@ onMounted(() => {
                 :rows-per-page-options="[10, 25, 50, 100]"
                 @update:pagination="updatePagination"
                 v-model:pagination="pagination"
+                :visible-columns="visibleColumns"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">
@@ -744,7 +777,7 @@ onMounted(() => {
                                 </div>
 
                                 <div v-else class="text-body2">
-                                  {{ col.value }}
+                                  {{ col.value ?? "-" }}
                                 </div>
                               </q-td>
                             </q-tr>

src/modules/02_users/views/page01_ManagementRoleUser.vue

@@ -143,7 +143,7 @@ onMounted(async () => {
   <q-card flast bordered class="q-pa-md">
     <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
       <q-btn flat round dense color="primary" icon="add" @click="openDialog">
-        <q-tooltip>เพิ่ม Role </q-tooltip>
+        <q-tooltip>เพิ่มสิทธิ์ </q-tooltip>
       </q-btn>
       <q-space />
 

src/modules/05_command/views/lists.vue

@@ -314,6 +314,7 @@ onMounted(async () => {
                   dense
                   @click="onDialogEdit(item)"
                 />
+                <q-tooltip>แก้ไข</q-tooltip>
               </q-item-section>
             </q-item>
           </q-list>