From fea81fc718f8c67011454d225e80c70e6829c701 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Mon, 16 Oct 2023 15:55:28 +0700
Subject: [PATCH 1/4] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=20=E0=B9=80=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B9=20=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=84=E0=B8=B3=E0=B8=82=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/2_Manage/Tab1.vue  | 251 +++++++++---------
 .../07_insignia/components/2_Manage/Tab2.vue  | 165 ++++++------
 .../07_insignia/components/2_Manage/Tab3.vue  | 193 +++++++-------
 src/modules/07_insignia/views/ResultPage.vue  |   6 +-
 4 files changed, 307 insertions(+), 308 deletions(-)

diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 1a92fb66f..f8579443e 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -704,7 +704,6 @@ const clearInsigniaFilters = (name: string) => {
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
-          class="col-3"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
@@ -721,135 +720,12 @@ const clearInsigniaFilters = (name: string) => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          style="min-width: 150px"
+          style="width: 400px"
           @update:model-value="changtypeOc"
           @filter="(inputValue: any,
             doneFn: Function) => filterSelector(inputValue, doneFn, 'filterOrganizationOP'
             )"
         />
-        <q-select
-          :class="roleDataStore.adminRole ? 'col-1':'col-3'"
-          v-model="DataStore.typeinsignia"
-          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
-          dense
-          emit-value
-          map-options
-          :options="typeinsigniaOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          use-input
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 180px"
-          @update:model-value="
-            DataStore.searchDataTable(
-              DataStore.typeinsignia,
-              DataStore.employeeClass
-            )
-          "
-          @filter="(inputValue: any,
-    doneFn: Function) => filterSelector(inputValue, doneFn, 'typeinsigniaOptions'
-    )"
-        >
-          <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                clearInsigniaFilters('typeinsigniaOptions'),
-                  DataStore.searchDataTable(
-                    DataStore.typeinsignia,
-                    DataStore.employeeClass
-                  )
-              "
-              class="cursor-pointer"
-            />
-          </template>
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <div>
-          <q-select
-            class="col-2"
-            v-model="DataStore.employeeClass"
-            dense
-            outlined
-            lazy-rules
-            hide-bottom-space
-            :label="`${'สถานภาพ'}`"
-            emit-value
-            use-input
-            map-options
-            option-label="name"
-            :options="employeeClassOps"
-            option-value="id"
-            :readonly="false"
-            :borderless="false"
-            style="min-width: 150px"
-            @update:model-value="
-              DataStore.searchDataTable(
-                DataStore.typeinsignia,
-                DataStore.employeeClass
-              )
-            "
-            @filter="(inputValue: any,
-    doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
-    )"
-          >
-            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
-              <q-icon
-                name="cancel"
-                @click.stop.prevent="
-                  clearInsigniaFilters('employeeClassOps'),
-                    DataStore.searchDataTable(
-                      DataStore.typeinsignia,
-                      DataStore.employeeClass
-                    )
-                "
-                class="cursor-pointer"
-              />
-            </template>
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
-        <div>
-          <q-btn
-            size="md"
-            icon="mdi-download"
-            flat
-            round
-            color="primary"
-            @click="downloadFileexcel"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <q-btn
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-            @click="clickmodalAdd"
-            v-if="
-              (DataStore.isLock == false &&
-                DataStore.requestStatus == 'st5' &&
-                roleDataStore.adminRole) ||
-              checkStatus == true
-            "
-          >
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-        </div>
         <q-space />
 
         <q-input
@@ -889,6 +765,131 @@ const clearInsigniaFilters = (name: string) => {
           class="col-xs-12 col-sm-3 col-md-2"
         />
       </div>
+      <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            :class="roleDataStore.adminRole ? 'col-1':'col-3'"
+            v-model="DataStore.typeinsignia"
+            label="ประเภทเครื่องราชฯ ที่ยืนขอ"
+            dense
+            emit-value
+            map-options
+            :options="typeinsigniaOptions"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            use-input
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 180px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue: any,
+      doneFn: Function) => filterSelector(inputValue, doneFn, 'typeinsigniaOptions'
+      )"
+          >
+            <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('typeinsigniaOptions'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            v-model="DataStore.employeeClass"
+            dense
+            outlined
+            lazy-rules
+            hide-bottom-space
+            :label="`${'สถานภาพ'}`"
+            emit-value
+            use-input
+            map-options
+            option-label="name"
+            :options="employeeClassOps"
+            option-value="id"
+            :readonly="false"
+            :borderless="false"
+            style="width: 280px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue: any,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
+    )"
+          >
+            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-space />
+          <div>
+            <q-btn
+              size="md"
+              icon="mdi-download"
+              flat
+              round
+              color="primary"
+              @click="downloadFileexcel"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+            <q-btn
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+              @click="clickmodalAdd"
+              v-if="
+                (DataStore.isLock == false &&
+                  DataStore.requestStatus == 'st5' &&
+                  roleDataStore.adminRole) ||
+                checkStatus == true
+              "
+            >
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+      </q-card>
       <div class="col-12 q-pt-sm">
         <q-table
           ref="table"
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index 72d312dd2..d5e2261ca 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -247,7 +247,6 @@ const clearInsigniaFilters = (name: string) => {
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
-          class="col-3"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
@@ -264,14 +263,54 @@ const clearInsigniaFilters = (name: string) => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          style="min-width: 150px"
+          style="width: 400px"
           @update:model-value="changtypeOc"
           @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
                       ) "
         />
+        <q-space />
+
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <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"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+        <div class="row col-12 q-col-gutter-sm">
         <q-select
-        :class="roleDataStore.adminRole ? 'col-1':'col-3'"
           v-model="DataStore.typeinsignia"
           label="ประเภทเครื่องราชฯ ที่ยืนขอ"
           dense
@@ -317,93 +356,53 @@ const clearInsigniaFilters = (name: string) => {
             </q-item>
           </template>
         </q-select>
-        <div>
-          <q-select
-            class="col-2"
-            v-model="DataStore.employeeClass"
-            dense
-            outlined
-            lazy-rules
-            hide-bottom-space
-            :label="`${'สถานภาพ'}`"
-            emit-value
-            use-input
-            map-options
-            option-label="name"
-            :options="employeeClassOps"
-            option-value="id"
-            :readonly="false"
-            :borderless="false"
-            style="min-width: 150px"
-            @update:model-value="
-              DataStore.searchDataTable(
-                DataStore.typeinsignia,
-                DataStore.employeeClass
-              )
-            "
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          >
-            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
-              <q-icon
-                name="cancel"
-                @click.stop.prevent="
-                  clearInsigniaFilters('employeeClassOps'),
-                    DataStore.searchDataTable(
-                      DataStore.typeinsignia,
-                      DataStore.employeeClass
-                    )
-                "
-                class="cursor-pointer"
-              />
-            </template>
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
-        <q-space />
-
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
+        <q-select
+          v-model="DataStore.employeeClass"
           dense
-          v-model="filterKeyword"
-          ref="filterRef"
           outlined
-          debounce="300"
-          placeholder="ค้นหา"
+          lazy-rules
+          hide-bottom-space
+          :label="`${'สถานภาพ'}`"
+          emit-value
+          use-input
+          map-options
+          option-label="name"
+          :options="employeeClassOps"
+          option-value="id"
+          :readonly="false"
+          :borderless="false"
+          style="width: 300px"
+          @update:model-value="
+            DataStore.searchDataTable(
+              DataStore.typeinsignia,
+              DataStore.employeeClass
+            )
+          "
+          @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                    ) "
         >
-          <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
+          <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
             <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
+              name="cancel"
+              @click.stop.prevent="
+                clearInsigniaFilters('employeeClassOps'),
+                  DataStore.searchDataTable(
+                    DataStore.typeinsignia,
+                    DataStore.employeeClass
+                  )
+              "
               class="cursor-pointer"
-              @click="resetFilter"
             />
           </template>
-        </q-input>
-
-        <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"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
-      </div>
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+        </div>
+      </q-card>
       <div class="col-12 q-pt-sm">
         <q-table
           ref="table"
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index 3bbb06cce..a761ef7b0 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -243,7 +243,6 @@ const clearInsigniaFilters = (name: string) => {
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
-          class="col-3"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
@@ -260,107 +259,12 @@ const clearInsigniaFilters = (name: string) => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          style="min-width: 150px"
+          style="width: 400px"
           @update:model-value="changtypeOc"
           @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
                       ) "
         />
-        <q-select
-          :class="roleDataStore.adminRole ? 'col-1' : 'col-3'"
-          v-model="DataStore.typeinsignia"
-          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
-          dense
-          emit-value
-          map-options
-          :options="typeinsigniaOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          use-input
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 180px"
-          @update:model-value="
-            DataStore.searchDataTable(
-              DataStore.typeinsignia,
-              DataStore.employeeClass
-            )
-          "
-          @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
-                      ) "
-        >
-          <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                clearInsigniaFilters('typeinsigniaOptions'),
-                  DataStore.searchDataTable(
-                    DataStore.typeinsignia,
-                    DataStore.employeeClass
-                  )
-              "
-              class="cursor-pointer"
-            />
-          </template>
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <div>
-          <q-select
-            class="col-2"
-            v-model="DataStore.employeeClass"
-            dense
-            outlined
-            lazy-rules
-            hide-bottom-space
-            :label="`${'สถานภาพ'}`"
-            emit-value
-            use-input
-            map-options
-            option-label="name"
-            :options="employeeClassOps"
-            option-value="id"
-            :readonly="false"
-            :borderless="false"
-            style="min-width: 150px"
-            @update:model-value="
-              DataStore.searchDataTable(
-                DataStore.typeinsignia,
-                DataStore.employeeClass
-              )
-            "
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          >
-            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
-              <q-icon
-                name="cancel"
-                @click.stop.prevent="
-                  clearInsigniaFilters('employeeClassOps'),
-                    DataStore.searchDataTable(
-                      DataStore.typeinsignia,
-                      DataStore.employeeClass
-                    )
-                "
-                class="cursor-pointer"
-              />
-            </template>
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
         <q-space />
 
         <q-input
@@ -400,6 +304,101 @@ const clearInsigniaFilters = (name: string) => {
           class="col-xs-12 col-sm-3 col-md-2"
         />
       </div>
+      <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            v-model="DataStore.typeinsignia"
+            label="ประเภทเครื่องราชฯ ที่ยืนขอ"
+            dense
+            emit-value
+            map-options
+            :options="typeinsigniaOptions"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            use-input
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 180px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
+                        ) "
+          >
+            <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('typeinsigniaOptions'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            v-model="DataStore.employeeClass"
+            dense
+            outlined
+            lazy-rules
+            hide-bottom-space
+            :label="`${'สถานภาพ'}`"
+            emit-value
+            use-input
+            map-options
+            option-label="name"
+            :options="employeeClassOps"
+            option-value="id"
+            :readonly="false"
+            :borderless="false"
+            style="width: 300px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                      ) "
+          >
+            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+      </q-card>
       <div class="col-12 q-pt-sm">
         <q-table
           ref="table"
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 517f79d7d..79d622382 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -544,7 +544,7 @@ const clearInsigniaFilters = (name: string) => {
         class="q-pa-none"
       >
         <div class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+          <div class="row col-12 q-pb-sm q-col-gutter-x-xs no-wrap">
             <div>
               <q-file
                 dense
@@ -552,7 +552,7 @@ const clearInsigniaFilters = (name: string) => {
                 outlined
                 v-model="fileResult"
                 label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
-                style="min-width: 300px"
+                style="min-width: 350px"
                 accept=".xlsx"
               >
                 <template v-slot:prepend>
@@ -584,7 +584,7 @@ const clearInsigniaFilters = (name: string) => {
                 outlined
                 v-model="fileinvoice"
                 label="บันทึกผลการจ่ายใบกำกับ"
-                style="min-width: 300px"
+                style="min-width: 350px"
                 accept=".xlsx"
               >
                 <template v-slot:prepend>

From 872f32c0315755190044d4a2cde9ede70d0a50d9 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Mon, 16 Oct 2023 16:27:48 +0700
Subject: [PATCH 2/4] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B9=83=E0=B8=99=20page=20=E0=B8=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=81=20=E0=B9=83=E0=B8=99=E0=B9=80=E0=B8=9B=E0=B9=87?=
 =?UTF-8?q?=E0=B8=99=E0=B8=96=E0=B8=B6=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table.vue                                 | 2 +-
 src/components/TableView.vue                             | 2 +-
 src/modules/02_organizational/components/TableReport.vue | 2 +-
 src/modules/03_recruiting/components/TableCandidate.vue  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index cc4dc9d08..68a80f184 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -50,7 +50,7 @@ const pagination = ref({
 
 const paginationLabel = (start: string, end: string, total: string) => {
   if (props.paging == true)
-    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
   else return start + "-" + end + " ใน " + total;
 };
 </script>
diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index cedd2a9e9..5db35ea64 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -353,7 +353,7 @@ const pagesNumber = computed(() => {
 
 const paginationLabel = (start: string, end: string, total: string) => {
   if (props.paging == true)
-    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
   else return start + "-" + end + " ใน " + total;
 };
 
diff --git a/src/modules/02_organizational/components/TableReport.vue b/src/modules/02_organizational/components/TableReport.vue
index 4d1281c68..69adab6ea 100644
--- a/src/modules/02_organizational/components/TableReport.vue
+++ b/src/modules/02_organizational/components/TableReport.vue
@@ -173,7 +173,7 @@ const initialPagination = ref<any>({
 
 const paginationLabel = (start: string, end: string, total: string) => {
   if (props.paging == true)
-    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
   else return start + "-" + end + " ใน " + total;
 };
 
diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index 63c260568..2a23e4c79 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -345,7 +345,7 @@ const updateVisibleFilter = (value: any) => {
 
 const paginationLabel = (start: string, end: string, total: string) => {
   if (props.paging == true)
-    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
   else return start + "-" + end + " ใน " + total;
 };
 

From 0ee7dff491bb166e0615de6c1c6bebd00d505f7a Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 16 Oct 2023 17:39:20 +0700
Subject: [PATCH 3/4] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=A3=E0=B8=B1=E0=B8=9A-=E0=B8=84=E0=B8=B7?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/5_Borrow/Main.vue  | 341 ++++++------------
 1 file changed, 108 insertions(+), 233 deletions(-)

diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index 383894ec0..f0930fed2 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -109,7 +109,7 @@ const fecthInsigniaType = async () => {
     .catch((err) => {
       messageError($q, err);
     })
-    .finally(() => {});
+    .finally(() => { });
 };
 
 const visibleColumns = ref<String[]>([
@@ -402,17 +402,17 @@ const filterSelector = (val: any, update: Function, name: any) => {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "employeeClassOps") {
-      DataStore.employeeClass = "";
+      // DataStore.employeeClass = "";
       employeeClassOps.value = DataStore.employeeClassOps.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "fileterInsigniaList") {
-      DataStore.insignia = null as any;
+      // DataStore.insignia = null as any;
       fileterInsigniaList.value = insigniaList.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "filterSelectRoundAllOption") {
-      yearRound.value = null as any;
+      // yearRound.value = null as any;
       filterSelectRoundAllOption.value = selectRoundAllOption.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
@@ -438,54 +438,23 @@ const clearInsigniaFilters = (name: string) => {
   <div class="toptitle text-dark col-12 row items-center">
     ยืม-คืนเครื่องราชฯ
   </div>
-  <q-card
-    flat
-    bordered
-    class="col-12 q-my-md q-mt-sm rounded-borders"
-    v-if="loadView == true"
-  >
-    <q-tabs
-      dense
-      v-model="tab"
-      align="left"
-      class="bg-white text-grey"
-      active-color="primary"
-      indicator-color="primary"
-    >
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders" v-if="loadView == true">
+    <q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
       <div v-for="item in DataStore.insigniaType">
         <q-tab :name="item.name" :label="item.label" />
       </div>
     </q-tabs>
     <q-separator />
     <q-tab-panels v-model="tab" animated>
-      <q-tab-panel
-        v-for="item in DataStore.insigniaType"
-        :key="item.name"
-        :name="item.name"
-        class="q-pa-none"
-      >
-        <div class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <q-select
-              v-model="yearRound"
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
-              emit-value
-              map-options
-              use-input
-              option-label="name"
-              :options="filterSelectRoundAllOption"
-              option-value="year"
-              :borderless="false"
-              style="min-width: 150px"
-              @update:model-value="selectorRound"
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundAllOption'
-                      ) "
-            >
+      <q-tab-panel v-for="item in DataStore.insigniaType" :key="item.name" :name="item.name" class="q-pa-md">
+        <div class="row col-12">
+          <div class="row col-12 q-col-gutter-sm">
+            <q-select v-model="yearRound" dense outlined lazy-rules hide-bottom-space
+              :label="`${'รอบการเสนอขอเครื่องราชฯ'}`" emit-value map-options use-input option-label="name"
+              :options="filterSelectRoundAllOption" option-value="year" :borderless="false" style="min-width: 150px"
+              @update:model-value="selectorRound" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterSelectRoundAllOption'
+                )">
               <template v-slot:no-option>
                 <q-item>
                   <q-item-section class="text-grey">
@@ -494,197 +463,110 @@ const clearInsigniaFilters = (name: string) => {
                 </q-item>
               </template>
             </q-select>
-            <div>
-              <q-select
-                v-model="DataStore.insignia"
-                dense
-                outlined
-                use-input
-                lazy-rules
-                hide-bottom-space
-                :label="`${'เครื่องราชฯ'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="fileterInsigniaList"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchDatatable(
-                    DataStore.insignia,
-                    DataStore.employeeClass
-                  )
-                "
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'fileterInsigniaList'
-                      ) "
-              >
-                <template v-if="DataStore.insignia !== ''" v-slot:append>
-                  <q-icon
-                    name="cancel"
-                    @click.stop.prevent="
-                      clearInsigniaFilters('fileterInsigniaList'),
-                        DataStore.searchDatatable(
-                          DataStore.insignia,
-                          DataStore.employeeClass
-                        )
-                    "
-                    class="cursor-pointer"
-                  />
-                </template>
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-            <div>
-              <q-select
-                class="col-2"
-                v-model="DataStore.employeeClass"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'สถานภาพ'}`"
-                emit-value
-                use-input
-                map-options
-                option-label="name"
-                :options="employeeClassOps"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchDatatable(
-                    DataStore.insignia,
-                    DataStore.employeeClass
-                  )
-                "
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-              >
-                <template
-                  v-if="DataStore.employeeClass !== 'all'"
-                  v-slot:append
-                >
-                  <q-icon
-                    name="cancel"
-                    @click.stop.prevent="
-                      clearInsigniaFilters('employeeClassOps'),
-                        DataStore.searchDatatable(
-                          DataStore.insignia,
-                          DataStore.employeeClass
-                        )
-                    "
-                    class="cursor-pointer"
-                  />
-                </template>
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-
-            <div>
-              <q-btn
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-btn>
-            </div>
             <q-space />
 
-            <div class="items-center" style="display: flex">
-              <!-- ค้นหาข้อความใน table -->
-              <q-input
-                standout
-                dense
-                v-model="filter"
-                ref="filterRef"
-                outlined
-                debounce="300"
-                placeholder="ค้นหา"
-                style="max-width: 200px"
-                class="q-ml-sm"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-              <!-- แสดงคอลัมน์ใน table -->
-              <q-select
-                v-model="visibleColumns"
-                :display-value="$q.lang.table.columns"
-                multiple
-                outlined
-                dense
-                :options="columns"
-                options-dense
-                option-value="name"
-                map-options
-                emit-value
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </div>
+            <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filter" ref="filterRef" outlined
+              debounce="300" placeholder="ค้นหา">
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+              </template>
+            </q-input>
+
+            <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"
+              options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
           </div>
-          <d-table
-            :rows="DataStore.rows"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="id"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
-            :paging="true"
-          >
+
+          <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select v-model="DataStore.insignia" dense outlined use-input lazy-rules hide-bottom-space
+                :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="fileterInsigniaList"
+                option-value="id" :readonly="false" :borderless="false" style="min-width: 230px" @update:model-value="
+                  DataStore.searchDatatable(
+                    DataStore.insignia,
+                    DataStore.employeeClass
+                  )
+                  " @filter="(inputValue: any,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'fileterInsigniaList'
+    )">
+                <template v-if="DataStore.insignia !== ''" v-slot:append>
+                  <!-- <q-icon name="cancel" @click.stop.prevent="
+                    clearInsigniaFilters('fileterInsigniaList'),
+                    DataStore.searchDatatable(
+                      DataStore.insignia,
+                      DataStore.employeeClass
+                    )
+                    " class="cursor-pointer" /> -->
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <q-select class="col-2" v-model="DataStore.employeeClass" dense outlined lazy-rules hide-bottom-space
+                :label="`${'สถานภาพ'}`" emit-value use-input map-options option-label="name" :options="employeeClassOps"
+                option-value="id" :readonly="false" :borderless="false" style="min-width: 240px" @update:model-value="
+                  DataStore.searchDatatable(
+                    DataStore.insignia,
+                    DataStore.employeeClass
+                  )" 
+                  @filter="(inputValue: any,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
+    )"
+    >
+                <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+                  <!-- <q-icon name="cancel" @click.stop.prevent="
+                    clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDatatable(
+                      DataStore.insignia,
+                      DataStore.employeeClass
+                    )
+                    " class="cursor-pointer" /> -->
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <q-space />
+              <div>
+                <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+                  <q-tooltip>เพิ่ม</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table :rows="DataStore.rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter"
+            row-key="id" :pagination-label="paginationLabel" v-model:pagination="pagination" :paging="true">
             <template v-slot:body-cell="props">
               <q-td :props="props">
                 <div v-if="props.col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
 
-                <div
-                  v-else-if="
-                    props.col.name == 'action' && props.row.returnDate == '-'
-                  "
-                >
+                <div v-else-if="props.col.name == 'action' && props.row.returnDate == '-'
+                  ">
                   <q-td>
-                    <q-btn
-                      label="คืนเครื่องราชฯ"
-                      @click="editData(props.row.id)"
-                      color="blue"
-                    />
+                    <q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
                   </q-td>
                 </div>
                 <div v-else-if="props.col.name == 'returnOrganization'">
                   {{
                     props.row.returnOrganization == null
-                      ? "-"
-                      : props.row.returnOrganization
+                    ? "-"
+                    : props.row.returnOrganization
                   }}
                 </div>
                 <div v-else>
@@ -697,17 +579,10 @@ const clearInsigniaFilters = (name: string) => {
       </q-tab-panel>
     </q-tab-panels>
 
-    <DialogForm
-      :modal="modal"
-      :close="close"
-      :close-and-fecth="closeAndFecth"
-      :round-id="selectRound == '0' ? 'all' : selectRound"
-      :action="action"
-      :profile-id="profileId"
-      v-model:selectRoundOption="selectRoundOption"
-      v-model:filterSelectRoundOption="filterSelectRoundOption"
-      :type-id="tab"
-    />
+    <DialogForm :modal="modal" :close="close" :close-and-fecth="closeAndFecth"
+      :round-id="selectRound == '0' ? 'all' : selectRound" :action="action" :profile-id="profileId"
+      v-model:selectRoundOption="selectRoundOption" v-model:filterSelectRoundOption="filterSelectRoundOption"
+      :type-id="tab" />
   </q-card>
   <q-card v-else>
     <div class="q-pa-md q-gutter-sm">

From 37b6c32e45cd4a575365610aae93637bc0e09571 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 16 Oct 2023 18:07:42 +0700
Subject: [PATCH 4/4] =?UTF-8?q?ui=20=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A2=20=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B9=80=E0=B8=A3=E0=B8=B5=E0=B8=A2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   8 +-
 .../1_Complaint/AddComplaintPage.vue          | 385 ++++++++++++++++++
 .../components/1_Complaint/MainPage.vue       | 256 +++++++++++-
 .../components/4_Order/MainPage.vue           |   2 +-
 .../components/5_Report/MainPage.vue          |   4 +-
 .../ุ6_Information/Channel/MainPage.vue        |   4 +-
 .../ุ6_Information/Director/MainPage.vue       |   2 +-
 .../11_discipline/interface/index/Main.ts     |   7 +-
 src/modules/11_discipline/router.ts           |  57 ++-
 .../11_discipline/stroes/ComplaintsStore.ts   |  31 ++
 10 files changed, 739 insertions(+), 17 deletions(-)
 create mode 100644 src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index c2717c0e1..fa3a8e852 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -431,13 +431,13 @@ const menuList = readonly<any[]>([
       {
         key: 11.4,
         label: "ออกคำสั่ง",
-        path: "",
+        path: "/discipline-order",
         role: "coin",
       },
       {
         key: 11.5,
         label: "รายงาน",
-        path: "",
+        path: "/discipline-report",
         role: "coin",
       },
       {
@@ -448,12 +448,12 @@ const menuList = readonly<any[]>([
         children: [
           {
             label: "กรรมการ",
-            path: "",
+            path: "/discipline-director",
             role: "coin",
           },
           {
             label: "ช่องทางการร้องเรียน",
-            path: "",
+            path: "/discipline-channel",
             role: "coin",
           },
         ],
diff --git a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
new file mode 100644
index 000000000..35aa831be
--- /dev/null
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@@ -0,0 +1,385 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import type { DataOption } from "../../interface/index/Main";
+
+// importStroe
+import { useCounterMixin } from "@/stores/mixin";
+import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
+
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const complainstStore = useComplainstDataStore();
+const { selectComplainantTpye } = complainstStore;
+
+const complainantType = ref<string>("");
+const complainantoptions = ref<DataOption[]>([
+  { id: "0", name: "บุคคล" },
+  { id: "1", name: "หน่ายงาน" },
+  { id: "2", name: "กรุงเทพหมานคร" },
+]);
+const complainant = ref<string>("");
+const office = ref<string>("");
+const agency = ref<string>("");
+const agencytoptions = ref<DataOption[]>([
+  { id: "0", name: "หน่ายงานเอ" },
+  { id: "1", name: "หน่ายงานบี" },
+  { id: "2", name: "หน่ายงานชี" },
+]);
+const topicComplaint = ref<string>("");
+const detail = ref<string>("");
+const datereceive = ref<Date>();
+const files = ref<any>();
+const fileDocDataUpload = ref<File[]>([]);
+
+async function selectComplainant(val: string) {
+  complainant.value = "";
+  office.value = "";
+  agency.value = "";
+  if (val === "0") {
+    await fectListname();
+  } else if (val === "1") {
+    await fectOffice();
+  }
+}
+// เรียกรายชื่อ
+async function fectListname() {
+  const listName = [
+    {
+      id: "1",
+      name: "นายเอ",
+    },
+    {
+      id: "2",
+      name: "นายบี",
+    },
+    {
+      id: "3",
+      name: "นายชี",
+    },
+  ];
+  selectComplainantTpye(listName);
+}
+async function fectOffice() {
+  // const listOffice = [
+  //   {
+  //     id: "1",
+  //     name: "สำนักเอ",
+  //   },
+  //   {
+  //     id: "2",
+  //     name: "สำนักเอ",
+  //   },
+  //   {
+  //     id: "3",
+  //     name: "สำนักเอ",
+  //   },
+  // ];
+}
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/discipline/complaints`)"
+    />
+    เพิ่มเรื่องร้องเรียน
+  </div>
+  <div class="col-12 q-mt-sm">
+    <q-card flat bordered>
+      <div class="col-12 row q-pa-md">
+        <div
+          class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
+        >
+          <div class="col-xs-12 col-sm-2">
+            <q-select
+              dense
+              outlined
+              v-model="complainantType"
+              :options="complainantoptions"
+              label="ผู้ร้องเรียน"
+              option-value="id"
+              option-label="name"
+              emit-value
+              map-options
+              :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+              lazy-rules
+              @update:model-value="selectComplainant(complainantType)"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2" v-if="complainantType === '0'">
+            <q-select
+              dense
+              outlined
+              v-model="complainant"
+              :options="complainstStore.optionListName"
+              label="ราชชื่อจากทะเบียรประวัติ"
+              option-value="id"
+              option-label="name"
+              emit-value
+              map-options
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2" v-if="complainantType === '1'">
+            <q-input dense outlined v-model="office" label="เลือกสำนักงาน" />
+          </div>
+          <div class="col-xs-12 col-sm-2">
+            <q-select
+              dense
+              outlined
+              v-model="agency"
+              :options="agencytoptions"
+              label="หน่วยงานที่พิจารณา"
+              option-value="id"
+              option-label="name"
+              emit-value
+              map-options
+              :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+              lazy-rules
+            />
+          </div>
+          <div class="col-xs-12 col-sm-12">
+            <q-input
+              dense
+              outlined
+              v-model="topicComplaint"
+              :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+              lazy-rules
+              label="เรื่องร้องเรียน"
+              type="textarea"
+              rows="5"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-12">
+            <q-input
+              dense
+              outlined
+              v-model="detail"
+              :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+              lazy-rules
+              label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
+              type="textarea"
+              rows="5"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="datereceive"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    datereceive != null ? date2Thai(datereceive) : null
+                  "
+                  label="วันที่รับเรื่อง"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`]"
+                  lazy-rules
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-2">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="datereceive"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    datereceive != null ? date2Thai(datereceive) : null
+                  "
+                  label="วันที่กำหนดวันพิจารณา"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่กำหนดวันพิจารณา'}`,
+                  ]"
+                  lazy-rules
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-2">
+            <q-select
+              dense
+              outlined
+              v-model="complainantType"
+              :options="complainantoptions"
+              label="ลักษณะความผิด"
+              option-value="id"
+              option-label="name"
+              emit-value
+              map-options
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2">
+            <q-select
+              dense
+              outlined
+              v-model="complainantType"
+              :options="complainantoptions"
+              label="ระดับการพิจารณา"
+              option-value="id"
+              option-label="name"
+              emit-value
+              map-options
+            />
+          </div>
+          <div class="col-xs-12 col-sm-3"></div>
+          <div class="col-xs-12 col-sm-2">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="datereceive"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    datereceive != null ? date2Thai(datereceive) : null
+                  "
+                  label="วันที่แจ้งเตือนล่ววงหน้า"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่แจ้งเตือนล่ววงหน้า'}`,
+                  ]"
+                  lazy-rules
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-2">
+            <q-select
+              dense
+              outlined
+              v-model="complainantType"
+              :options="complainantoptions"
+              label="รับเรื่องร้องเรียน"
+              option-value="id"
+              option-label="name"
+              emit-value
+              map-options
+            />
+          </div>
+          <div class="col-xs-12 col-sm-6"></div>
+          <div class="col-xs-12 col-sm-4">
+            <q-input
+              dense
+              outlined
+              v-model="office"
+              label="ผู้ร้องเรียน"
+              :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
+              lazy-rules
+            />
+          </div>
+          <div class="col-xs-12 col-sm-4">
+            <q-file
+              class="col-xs-12 col-sm-10"
+              outlined
+              dense
+              v-model="files"
+              @added="fileUploadDoc"
+              label="ไฟล์เอกสารหลักฐาน"
+              hide-bottom-space
+              lazy-rules
+              accept=".pdf,.xlsx,.doc"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+      </div>
+      <q-separator />
+      <div class="row col-12 q-pa-sm">
+        <q-space />
+        <q-btn flat round color="secondary" icon="mdi-content-save-outline"
+          ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+        >
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index d04385ff3..209bdcb7d 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -1,9 +1,257 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar";
+// importStroe
+import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
+const router = useRouter();
+
+const complainstStore = useComplainstDataStore();
+const { fectComplainst } = complainstStore;
+
+//ข้อมูล Table
+const filterTable = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "subject",
+    align: "left",
+    label: "เรื่อง",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "complainant",
+    align: "left",
+    label: "ผู้ถูกร้องเรียน",
+    sortable: true,
+    field: "complainant",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "offenseDescription",
+    align: "left",
+    label: "ลักษณะความผิด",
+    sortable: true,
+    field: "offenseDescription",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "creationDate",
+    align: "left",
+    label: "วันที่สร้างเรื่องร้องเรียน",
+    sortable: true,
+    field: "creationDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "considerationLevel",
+    align: "left",
+    label: "ระดับการพิจารณา",
+    sortable: true,
+    field: "considerationLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "considerationDeadlineDate",
+    align: "left",
+    label: "วันที่กำหนดพิจารณา",
+    sortable: true,
+    field: "considerationDeadlineDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "subject",
+  "detail",
+  "complainant",
+  "offenseDescription",
+  "creationDate",
+  "considerationLevel",
+  "considerationDeadlineDate",
+]);
+onMounted(async () => {
+  await fecthListComplaints();
+});
+
+async function fecthListComplaints() {
+  const listData = [
+    {
+      subject: "ทุจริตในหน้าที่",
+      detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
+      complainant: "นางศิรินภา คงน้อย",
+      offenseDescription: "ร้ายแรง",
+      creationDate: "2023-10-16",
+      considerationLevel: "ด่วนมาก",
+      considerationDeadlineDate: "2023-11-01",
+    },
+    {
+      subject: "ทุจริตในหน้าที่",
+      detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
+      complainant: "นายแก้ว คำ",
+      offenseDescription: "ร้ายแรง",
+      creationDate: "2023-10-16",
+      considerationLevel: "ด่วนมาก",
+      considerationDeadlineDate: "2023-11-01",
+    },
+    {
+      subject: "ทุจริตในหน้าที่",
+      detail:
+        "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
+      complainant: "นายภัทรานุย คงนอย",
+      offenseDescription: "ร้ายแรง",
+      creationDate: "2023-10-16",
+      considerationLevel: "ด่วนมาก",
+      considerationDeadlineDate: "2023-11-01",
+    },
+  ];
+  await fectComplainst(listData);
+}
+function redirectToPageadd() {
+  router.push(`/discipline/complaints/add`);
+}
+
+//pagination
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
 
 <template>
-  <div>
-    <h1>เรื่องร้องเรียน</h1>
+  <div class="toptitle text-dark col-12 row items-center">เรื่องร้องเรียน</div>
+  <div class="col-12 q-mt-sm">
+    <q-card flat bordered>
+      <div class="q-pa-md">
+        <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
+          <q-btn
+            flat
+            dense
+            round
+            color="primary"
+            icon="mdi-plus"
+            @click="redirectToPageadd()"
+            ><q-tooltip>เพิ่ม</q-tooltip></q-btn
+          >
+          <q-space />
+          <div class="col-2">
+            <q-input dense outlined v-model="filterTable" label="ค้นหา" />
+          </div>
+          <div class="col-2">
+            <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"
+              options-cover
+            />
+          </div>
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="complainstStore.rows"
+          :filter="filterTable"
+          row-key="subject"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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" style="height: 40px">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="subject" :props="props">
+                {{ props.row.subject }}
+              </q-td>
+              <q-td key="detail" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.detail }}
+                </div>
+              </q-td>
+              <q-td key="complainant" :props="props">
+                {{ props.row.complainant }}
+              </q-td>
+              <q-td key="offenseDescription" :props="props">
+                {{ props.row.offenseDescription }}
+              </q-td>
+              <q-td key="creationDate" :props="props">
+                {{ props.row.creationDate }}
+              </q-td>
+              <q-td key="considerationLevel" :props="props">
+                {{ props.row.considerationLevel }}
+              </q-td>
+              <q-td key="considerationDeadlineDate" :props="props">
+                {{ props.row.considerationDeadlineDate }}
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </d-table>
+      </div>
+    </q-card>
   </div>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/4_Order/MainPage.vue b/src/modules/11_discipline/components/4_Order/MainPage.vue
index d04385ff3..12505b8fb 100644
--- a/src/modules/11_discipline/components/4_Order/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Order/MainPage.vue
@@ -2,7 +2,7 @@
 
 <template>
   <div>
-    <h1>เรื่องร้องเรียน</h1>
+    <h1>ออกคำสั่ง</h1>
   </div>
 </template>
 
diff --git a/src/modules/11_discipline/components/5_Report/MainPage.vue b/src/modules/11_discipline/components/5_Report/MainPage.vue
index d04385ff3..29f73a485 100644
--- a/src/modules/11_discipline/components/5_Report/MainPage.vue
+++ b/src/modules/11_discipline/components/5_Report/MainPage.vue
@@ -2,8 +2,8 @@
 
 <template>
   <div>
-    <h1>เรื่องร้องเรียน</h1>
+    <h1>รายงาน</h1>
   </div>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue b/src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue
index d04385ff3..87ddd73fb 100644
--- a/src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue
@@ -2,8 +2,8 @@
 
 <template>
   <div>
-    <h1>เรื่องร้องเรียน</h1>
+    <h1>ช่องทางการร้องเรียน</h1>
   </div>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue b/src/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue
index d04385ff3..ebbd2a7f8 100644
--- a/src/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue
@@ -2,7 +2,7 @@
 
 <template>
   <div>
-    <h1>เรื่องร้องเรียน</h1>
+    <h1>กรรมการ</h1>
   </div>
 </template>
 
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 9870350dd..1a6136942 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -1,4 +1,7 @@
-
+interface DataOption {
+    id: string;
+    name: string;
+}
 export type {
-
+    DataOption
 };
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 0f41d90f9..825838651 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -2,6 +2,11 @@
 const complaintMain = () => import("@/modules/11_discipline/components/1_Complaint/MainPage.vue")
 const factsMain = () => import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue")
 const disciplinaryMain = () => import("@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue")
+const oredrMain = () => import("@/modules/11_discipline/components/4_Order/MainPage.vue")
+const report = () => import("@/modules/11_discipline/components/5_Report/MainPage.vue")
+const directorMain = () => import("@/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue")
+const channelMain = () => import("@/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue")
+const complaintAdd = () => import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue")
 
 
 export default [
@@ -15,6 +20,16 @@ export default [
             Role: "coin",
         },
     },
+    {
+        path: "/discipline/complaints/add",
+        name: "/discipline-complaints-add",
+        component: complaintAdd,
+        meta: {
+            Auth: true,
+            Key: [11.1],
+            Role: "coin",
+        },
+    },
     {
         path: "/discipline/investigatefacts",
         name: "/discipline-investigatefacts",
@@ -31,7 +46,47 @@ export default [
         component: disciplinaryMain,
         meta: {
             Auth: true,
-            Key: [9],
+            Key: [11.3],
+            Role: "coin",
+        },
+    },
+    {
+        path: "/discipline/order",
+        name: "/discipline-order",
+        component: oredrMain,
+        meta: {
+            Auth: true,
+            Key: [11.4],
+            Role: "coin",
+        },
+    },
+    {
+        path: "/discipline/report",
+        name: "/discipline-report",
+        component: report,
+        meta: {
+            Auth: true,
+            Key: [11.5],
+            Role: "coin",
+        },
+    },
+    {
+        path: "/discipline/director",
+        name: "/discipline-director",
+        component: directorMain,
+        meta: {
+            Auth: true,
+            Key: [11.6],
+            Role: "coin",
+        },
+    },
+    {
+        path: "/discipline/channel",
+        name: "/discipline-channel",
+        component: channelMain,
+        meta: {
+            Auth: true,
+            Key: [11.6],
             Role: "coin",
         },
     },
diff --git a/src/modules/11_discipline/stroes/ComplaintsStore.ts b/src/modules/11_discipline/stroes/ComplaintsStore.ts
index e69de29bb..d57c54d00 100644
--- a/src/modules/11_discipline/stroes/ComplaintsStore.ts
+++ b/src/modules/11_discipline/stroes/ComplaintsStore.ts
@@ -0,0 +1,31 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useComplainstDataStore = defineStore("complainst", () => {
+    const rows = ref<any>([])
+    const optionListName = ref<any>([])
+
+    function fectComplainst(data: any) {
+        let datalist = data.map((e: any) => ({
+            subject: e.subject,
+            detail: e.detail,
+            complainant: e.complainant,
+            offenseDescription: e.offenseDescription,
+            creationDate: e.creationDate,
+            considerationLevel: e.considerationLevel,
+            considerationDeadlineDate: e.considerationDeadlineDate,
+        }))
+        rows.value = datalist
+    }
+
+    function selectComplainantTpye(list: any) {
+        console.log(list);
+        optionListName.value = list
+    }
+    return {
+        rows,
+        optionListName,
+        fectComplainst,
+        selectComplainantTpye
+    }
+})
\ No newline at end of file