From 1dfc67566d4af834b669803c39b51f646dc9b68a Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 9 May 2024 17:23:34 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_metadataNew/views/indicatorByPlan.vue  | 263 ++++++++----------
 .../01_metadataNew/views/indicatorByRole.vue  |  79 +-----
 2 files changed, 132 insertions(+), 210 deletions(-)

diff --git a/src/modules/01_metadataNew/views/indicatorByPlan.vue b/src/modules/01_metadataNew/views/indicatorByPlan.vue
index 08e87530c..543abc35d 100644
--- a/src/modules/01_metadataNew/views/indicatorByPlan.vue
+++ b/src/modules/01_metadataNew/views/indicatorByPlan.vue
@@ -260,157 +260,130 @@ onMounted(async () => {
     </div>
     <div class="col-xs-12 col-sm-9 q-pa-md row">
       <div class="col-12">
-        <div class="row q-col-gutter-sm items-center q-mb-sm">
-          <div
-            :class="`${
-              $q.screen.gt.md ? '' : 'col-12'
-            } row q-gutter-sm no-wrap`"
+        <div class="row q-col-gutter-sm items-center q-mb-sm no-wrap">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            style="width: 150px"
+            @update:model-value="fetchListProjectNew"
           >
-            <q-btn
-              flat
-              round
-              dense
-              icon="add"
-              color="primary"
-              @click="onClickAddOrView()"
-              v-if="!$q.screen.gt.md"
-            >
-              <q-tooltip>เพิ่ม</q-tooltip>
-            </q-btn>
-            <q-space v-if="!$q.screen.gt.md" />
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="year"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              style="width: 150px"
-              @update:model-value="fetchListProjectNew"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  outlined
-                  :model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
-                  :label="`${'ปีงบประมาณ'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                  <template v-if="year" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop.prevent="
-                        (year = null),
-                          (nodeData.page = 1),
-                          fetchListProjectNew()
-                      "
-                      class="cursor-pointer"
-                    />
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              dense
-              outlined
-              v-model="nodeData.round"
-              :options="roundOp"
-              label="รอบการประเมิน"
-              option-label="name"
-              option-value="id"
-              emit-value
-              map-options
-              @update:model-value="fetchListProjectNew"
-              style="min-width: 120px"
-            >
-              <template v-if="nodeData.round" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    (nodeData.round = ''), fetchListProjectNew()
-                  "
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-select>
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                :model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+                <template v-if="year" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="
+                      (year = null), (nodeData.page = 1), fetchListProjectNew()
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+          <q-select
+            dense
+            outlined
+            v-model="nodeData.round"
+            :options="roundOp"
+            label="รอบการประเมิน"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            @update:model-value="fetchListProjectNew"
+            style="min-width: 120px"
+          >
+            <template v-if="nodeData.round" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  (nodeData.round = ''), fetchListProjectNew()
+                "
+                class="cursor-pointer"
+              />
+            </template>
+          </q-select>
 
-            <q-btn
-              flat
-              round
-              dense
-              icon="add"
-              color="primary"
-              @click="onClickAddOrView()"
-              v-if="$q.screen.gt.md"
-            >
-              <q-tooltip>เพิ่ม</q-tooltip>
-            </q-btn>
-          </div>
+          <q-btn
+            flat
+            round
+            dense
+            icon="add"
+            color="primary"
+            @click="onClickAddOrView()"
+          >
+            <q-tooltip>เพิ่ม</q-tooltip>
+          </q-btn>
 
           <q-space />
-          <div
-            :class="`${
-              $q.screen.gt.md ? '' : 'col-12'
-            } row q-gutter-sm no-wrap`"
+
+          <q-checkbox
+            keep-color
+            v-model="isAll"
+            label="แสดงทั้งหมด"
+            color="primary"
+            @update:model-value="fetchListProjectNew"
           >
-            <q-checkbox
-              keep-color
-              v-model="isAll"
-              label="แสดงตำแหน่งทั้งหมด"
-              color="primary"
-              @update:model-value="fetchListProjectNew"
+            <q-tooltip
+              >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
             >
-              <q-tooltip
-                >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
-              >
-            </q-checkbox>
-            <q-space v-if="!$q.screen.gt.md" />
-            <q-input
-              standout
-              dense
-              v-model="nodeData.keyword"
-              ref="filterRef"
-              outlined
-              style="width: 150px"
-              placeholder="ค้นหา"
-              @keydown.enter.prevent="fetchListProjectNew"
-            >
-              <template v-slot:append>
-                <q-icon v-if="nodeData.keyword == ''" name="search" />
-                <q-icon
-                  v-if="nodeData.keyword !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="clearFilter"
-                />
-              </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: 120px"
-            />
-          </div>
+          </q-checkbox>
+          <q-input
+            standout
+            dense
+            v-model="nodeData.keyword"
+            ref="filterRef"
+            outlined
+            style="width: 150px"
+            placeholder="ค้นหา"
+            @keydown.enter.prevent="fetchListProjectNew"
+          >
+            <template v-slot:append>
+              <q-icon v-if="nodeData.keyword == ''" name="search" />
+              <q-icon
+                v-if="nodeData.keyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="clearFilter"
+              />
+            </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: 120px"
+          />
         </div>
 
         <div class="col-12">
diff --git a/src/modules/01_metadataNew/views/indicatorByRole.vue b/src/modules/01_metadataNew/views/indicatorByRole.vue
index c226989ab..1df51d385 100644
--- a/src/modules/01_metadataNew/views/indicatorByRole.vue
+++ b/src/modules/01_metadataNew/views/indicatorByRole.vue
@@ -245,57 +245,9 @@ onMounted(async () => {
     รายการตัวชี้วัดตามตำแหน่ง
   </div>
   <q-card flat bordered class="q-pa-md">
-    <div class="row q-mb-sm">
-      <div class="col-12 row q-mb-sm" v-if="!$q.screen.gt.md">
+
+      <div class="row q-gutter-sm no-wrap q-mb-sm">
         <q-select
-          dense
-          :model-value="formFilter.position"
-          label="ตำแหน่ง"
-          outlined
-          emit-value
-          map-options
-          fill-input
-          hide-selected
-          hide-bottom-space
-          option-label="name"
-          option-value="id"
-          class="inputgreen"
-          :options="positionOp"
-          use-input
-          @input-value="setModel"
-          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
-          @update:model-value="fetchList"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-          <template v-if="formFilter.position" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                formFilter.position = '';
-                fetchList();
-              "
-              class="cursor-pointer"
-            />
-          </template>
-        </q-select>
-        <q-btn
-          flat
-          round
-          dense
-          icon="add"
-          color="primary"
-          @click="onClickAddOrView()"
-        >
-          <q-tooltip>เพิ่ม</q-tooltip>
-        </q-btn>
-      </div>
-      <div class="row q-gutter-sm">
-        <q-select
-          v-if="$q.screen.gt.md"
           dense
           :model-value="formFilter.position"
           label="ตำแหน่ง"
@@ -397,22 +349,19 @@ onMounted(async () => {
             />
           </template>
         </q-select>
-      </div>
 
-      <q-btn
-        v-if="$q.screen.gt.md"
-        flat
-        round
-        dense
-        icon="add"
-        color="primary"
-        @click="onClickAddOrView()"
-      >
-        <q-tooltip>เพิ่ม</q-tooltip>
-      </q-btn>
+        <q-btn
+          flat
+          round
+          dense
+          icon="add"
+          color="primary"
+          @click="onClickAddOrView()"
+        >
+          <q-tooltip>เพิ่ม</q-tooltip>
+        </q-btn>
 
-      <q-space />
-      <div class="row q-gutter-sm">
+        <q-space />
         <q-input
           standout
           dense
@@ -449,7 +398,7 @@ onMounted(async () => {
           style="min-width: 150px"
         />
       </div>
-    </div>
+
 
     <div class="col-12">
       <d-table