Merge branch 'develop' into devTee

src/modules/14_KPI/router.ts

@@ -1,11 +1,13 @@
 const roundPage = () => import("@/modules/14_KPI/views/round.vue");
-const IndicatorByPlan = () => import("@/modules/14_KPI/views/indicatorByPlan.vue");
-const IndicatorByRole = () => import("@/modules/14_KPI/views/indicatorByRole.vue");
+const IndicatorByPlan = () =>
+  import("@/modules/14_KPI/views/indicatorByPlan.vue");
+const IndicatorByRole = () =>
+  import("@/modules/14_KPI/views/indicatorByRole.vue");
 const competencyPage = () => import("@/modules/14_KPI/views/competency.vue");
 
 export default [
   {
-    path: "/KPI",
+    path: "/KPI-round",
     name: "KPIRound",
     component: roundPage,
     meta: {
@@ -15,7 +17,7 @@ export default [
     },
   },
   {
-    path: "/KPI",
+    path: "/KPI-indicator-plan",
     name: "KPIIndicatorByPlan",
     component: IndicatorByPlan,
     meta: {
@@ -25,7 +27,7 @@ export default [
     },
   },
   {
-    path: "/KPI",
+    path: "/KPI-indicator-role",
     name: "KPIIndicatorByRole",
     component: IndicatorByRole,
     meta: {
@@ -35,7 +37,7 @@ export default [
     },
   },
   {
-    path: "/KPI",
+    path: "/KPI-competency",
     name: "KPICompetency",
     component: competencyPage,
     meta: {

src/modules/14_KPI/views/indicatorByPlan.vue

@@ -1,5 +1,249 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const router = useRouter();
+const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
+
+/** หัวตาราง */
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "indicatorNo",
+    align: "left",
+    label: "ลำดับตัวชี้วัด ",
+    sortable: true,
+    field: "indicatorNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "indicatorPass",
+    align: "left",
+    label: "รหัสตัวชี้วัด",
+    sortable: true,
+    field: "indicatorPass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "indicatorName",
+    align: "left",
+    label: "ชื่อตัวชี้วัด",
+    sortable: true,
+    field: "indicatorName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "indicatorNo",
+  "indicatorPass",
+  "indicatorName",
+]);
+
+const orgOp = ref<any[]>([
+  { id: "1", name: "กลุ่มงานช่วยนักบริหาร" },
+  { id: "2", name: "กลุ่มงานช่วยนักบริหาร 2" },
+]);
+
+const roundOp = ref<any[]>([
+  { id: "1", name: "รอบเมษายน" },
+  { id: "2", name: "รอบตุลาคม" },
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  org: "1",
+  round: "1",
+  keyword: "",
+});
+
+function fetchList() {
+  showLoader();
+  const data = [
+    {
+      id: "1",
+      indicatorNo: "1",
+      indicatorPass: "1กก",
+      indicatorName: "ตัวชี้วัด 1",
+    },
+    {
+      id: "2",
+      indicatorNo: "2",
+      indicatorPass: "2กก",
+      indicatorName: "ตัวชี้วัด 2",
+    },
+  ];
+  rows.value = data;
+  setTimeout(() => {
+    hideLoader();
+  }, 500);
+}
+
+function onClickAddOrView(status: boolean = false, id: string = "") {
+  //   status
+  //     ? router.push(`/development/scholarship/${id}`)
+  //     : router.push("/development/scholarship/add");
+}
+
+function onClickDelete(id: number) {
+  dialogRemove($q, () => {
+    rows.value.splice(id, 1);
+    success($q, "ลบข้อมูลสำเร็จ");
+  });
+}
+
+onMounted(() => {
+  fetchList();
+});
+</script>
+
 <template>
-    <div>
-        ตามแผนปฏิบัติราชการประจำปี
+  <div class="toptitle text-dark col-12 row items-center">
+    ตามแผนปฏิบัติราชการประจำปี
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar class="q-pa-none">
+      <div class="row q-gutter-x-sm">
+        <div>
+          <q-select
+            dense
+            outlined
+            v-model="formFilter.org"
+            :options="orgOp"
+            label="หน่วยงาน/ส่วนราชการ"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+          />
+        </div>
+        <div>
+          <q-select
+            dense
+            outlined
+            v-model="formFilter.round"
+            :options="roundOp"
+            label="รอบการประเมิน"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+          />
+        </div>
+      </div>
+      <q-toolbar-title>
+        <q-btn
+          flat
+          round
+          dense
+          icon="add"
+          color="primary"
+          @click="onClickAddOrView()"
+        >
+          <q-tooltip>เพิ่ม</q-tooltip>
+        </q-btn>
+      </q-toolbar-title>
+
+      <q-space />
+      <div class="row q-gutter-sm">
+        <div>
+          <q-input
+            standout
+            dense
+            v-model="formFilter.keyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="formFilter.keyword == ''" name="search" />
+              <q-icon
+                v-if="formFilter.keyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="formFilter.keyword = ''"
+              />
+            </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+      </div>
+    </q-toolbar>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <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-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="onClickAddOrView(true, props.row.id)"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                @click.stop.pervent="onClickDelete(props.rowIndex)"
+              >
+                <q-tooltip>ลบข้อมูล </q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
     </div>
-</template>
+  </q-card>
+</template>
+
+<style scoped></style>

src/modules/14_KPI/views/indicatorByRole.vue

@@ -1,5 +1,242 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const router = useRouter();
+const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
+
+/** หัวตาราง */
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "indicatorNo",
+    align: "left",
+    label: "ลำดับตัวชี้วัด ",
+    sortable: true,
+    field: "indicatorNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "indicatorPass",
+    align: "left",
+    label: "รหัสตัวชี้วัด",
+    sortable: true,
+    field: "indicatorPass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "indicatorName",
+    align: "left",
+    label: "ชื่อตัวชี้วัด",
+    sortable: true,
+    field: "indicatorName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "indicatorNo",
+  "indicatorPass",
+  "indicatorName",
+]);
+
+const positionOp = ref<any[]>([
+  { id: "1", name: "นักจัดการทั่วไป 1" },
+  { id: "2", name: "นักจัดการทั่วไป 2" },
+]);
+
+const roundOp = ref<any[]>([
+  { id: "1", name: "รอบเมษายน" },
+  { id: "2", name: "รอบตุลาคม" },
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  position: "1",
+  round: "1",
+  keyword: "",
+});
+
+function fetchList() {
+  showLoader();
+  const data = [
+    {
+      id: "1",
+      indicatorNo: "1",
+      indicatorPass: "1กก",
+      indicatorName: "ตัวชี้วัด 1",
+    },
+    {
+      id: "2",
+      indicatorNo: "2",
+      indicatorPass: "2กก",
+      indicatorName: "ตัวชี้วัด 2",
+    },
+  ];
+  rows.value = data;
+  setTimeout(() => {
+    hideLoader();
+  }, 500);
+}
+
+function onClickAddOrView(status: boolean = false, id: string = "") {
+  //   status
+  //     ? router.push(`/development/scholarship/${id}`)
+  //     : router.push("/development/scholarship/add");
+}
+
+function onClickDelete(id: number) {
+  dialogRemove($q, () => {
+    rows.value.splice(id, 1);
+    success($q, "ลบข้อมูลสำเร็จ");
+  });
+}
+
+onMounted(() => {
+  fetchList();
+});
+</script>
+
 <template>
-    <div>
-        ตามหน้าที่ความรับผิดชอบ
+  <div class="toptitle text-dark col-12 row items-center">
+    ตามหน้าที่ความรับผิดชอบ
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar class="q-pa-none">
+      <div class="row q-gutter-sm">
+        <q-select
+          dense
+          outlined
+          v-model="formFilter.position"
+          :options="positionOp"
+          label="ตำแหน่ง"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+        />
+        <q-select
+          dense
+          outlined
+          v-model="formFilter.round"
+          :options="positionOp"
+          label="ตำแหน่ง"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+        />
+      </div>
+      <q-toolbar-title>
+        <q-btn
+          flat
+          round
+          dense
+          icon="add"
+          color="primary"
+          @click="onClickAddOrView()"
+        >
+          <q-tooltip>เพิ่ม</q-tooltip>
+        </q-btn>
+      </q-toolbar-title>
+
+      <q-space />
+      <div class="row q-gutter-sm">
+        <q-input
+          standout
+          dense
+          v-model="formFilter.keyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="formFilter.keyword == ''" name="search" />
+            <q-icon
+              v-if="formFilter.keyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="formFilter.keyword = ''"
+            />
+          </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"
+        />
+      </div>
+    </q-toolbar>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <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-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="onClickAddOrView(true, props.row.id)"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                @click.stop.pervent="onClickDelete(props.rowIndex)"
+              >
+                <q-tooltip>ลบข้อมูล </q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
     </div>
-</template>
+  </q-card>
+</template>
+
+<style scoped></style>

src/modules/15_development/components/Other.vue

@@ -13,8 +13,13 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
-const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  calculateDurationYmd,
+  date2Thai,
+  messageError,
+} = useCounterMixin();
 
 const provinceOp = ref<DataOption[]>([]);
 const provinceOpMain = ref<DataOption[]>([]);
@@ -63,10 +68,46 @@ function changeDateStart() {
     const endDate = new Date(store.formAddProject.dateEnd);
     if (startDate > endDate) {
       store.formAddProject.dateEnd = null;
+      store.formAddProject.totalDate = null;
+    } else {
+      daysBetweenDates(
+        store.formAddProject.dateStart,
+        store.formAddProject.dateEnd
+      );
     }
   }
 }
 
+function changeDateEnd() {
+  daysBetweenDates(
+    store.formAddProject.dateStart,
+    store.formAddProject.dateEnd
+  );
+}
+
+async function daysBetweenDates(date1: any, date2: any) {
+  const newStartDate = resetTimeToMidnight(new Date(date1));
+  const newEndDate = resetTimeToMidnight(new Date(date2));
+
+  const differenceInMilliseconds =
+    newEndDate.getTime() - newStartDate.getTime();
+
+  const differenceInDays = Math.floor(
+    differenceInMilliseconds / (1000 * 60 * 60 * 24)
+  );
+
+  store.formAddProject.totalDate = differenceInDays + 1;
+}
+
+function resetTimeToMidnight(date: Date): Date {
+  const newDate = new Date(date);
+  newDate.setHours(0);
+  newDate.setMinutes(0);
+  newDate.setSeconds(0);
+  newDate.setMilliseconds(0);
+  return newDate;
+}
+
 /**
  * Fuction Filter จังหวัด
  * @param val ค่าตัวพิมพ์ค้นหา
@@ -136,6 +177,7 @@ onMounted(() => {
         :enableTimePicker="false"
         week-start="0"
         :min-date="store.formAddProject.dateStart"
+        @update:model-value="changeDateEnd()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{

src/modules/15_development/views/MainPage.vue

@@ -144,7 +144,7 @@ onMounted(() => {
     รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0px">
+    <q-toolbar style="padding: 0">
       <datepicker
         menu-class-name="modalfix"
         v-model="formQuery.year"
@@ -177,75 +177,95 @@ onMounted(() => {
           </q-input>
         </template>
       </datepicker>
-      <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-toolbar-title>
         <q-btn
           flat
           round
-          color="blue"
-          icon="mdi-arrow-down-bold-circle-outline"
+          dense
+          icon="add"
+          color="primary"
+          @click="onClickAddOrView()"
         >
-          <q-menu>
-            <q-list style="min-width: 100px" dense>
-              <q-item clickable v-close-popup v-for="items in itemDownload">
-                <q-item-section avatar>
-                  <q-icon :color="items.color" :name="items.icon" />
-                </q-item-section>
-                <q-item-section :class="`text-${items.color}`">{{
-                  items.label
-                }}</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-          <q-tooltip>ดาวน์โหลด</q-tooltip>
+          <q-tooltip>เพิ่ม</q-tooltip>
         </q-btn>
+      </q-toolbar-title>
 
-        <q-input
-          standout
-          dense
-          v-model="formQuery.keyword"
-          ref="filterRef"
-          outlined
-          placeholder="ค้นหา"
-          @keyup.enter="fetchListProject"
-        >
-          <template v-slot:append>
-            <q-icon v-if="formQuery.keyword == ''" name="search" />
-            <q-icon
-              v-if="formQuery.keyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="(formQuery.keyword = ''), fetchListProject()"
-            />
-          </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"
-        />
+      <q-space />
+      <div class="row q-gutter-sm">
+        <div>
+          <q-btn
+            flat
+            round
+            color="blue"
+            icon="mdi-arrow-down-bold-circle-outline"
+          >
+            <q-menu>
+              <q-list style="min-width: 100px" dense>
+                <q-item clickable v-close-popup v-for="items in itemDownload">
+                  <q-item-section avatar>
+                    <q-icon :color="items.color" :name="items.icon" />
+                  </q-item-section>
+                  <q-item-section :class="`text-${items.color}`">{{
+                    items.label
+                  }}</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+        </div>
+        <div>
+          <q-input
+            standout
+            dense
+            v-model="formQuery.keyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            @keyup.enter="fetchListProject"
+          >
+            <template v-slot:append>
+              <q-icon v-if="formQuery.keyword == ''" name="search" />
+              <q-icon
+                v-if="formQuery.keyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="(formQuery.keyword = ''), fetchListProject()"
+              />
+            </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
       </div>
     </q-toolbar>
+    <!-- <q-toolbar class="q-gutter-x-sm" style="padding: 0px">
+      <div>
+      
+      </div>
+
+      <q-space />
+
+      <div class="row q-gutter-md">
+       
+       
+       
+      </div>
+    </q-toolbar> -->
 
     <div class="col-12">
       <d-table

src/modules/15_development/views/Scholarship.vue

@@ -158,46 +158,52 @@ onMounted(() => {
     รายการข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0px">
+    <q-toolbar class="q-pa-none">
       <div class="row q-gutter-sm">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formFilter.year"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              lazy-rules
-              outlined
-              :model-value="Number(formFilter.year) + 543"
-              :label="`${'ปีงบประมาณ'}`"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-select
-          dense
-          outlined
-          v-model="formFilter.type"
-          :options="options"
-          label="เลือกประเภททุน"
-        />
+        <div>
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formFilter.year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                lazy-rules
+                outlined
+                :model-value="Number(formFilter.year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+              >
+                <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>
+          <q-select
+            dense
+            outlined
+            v-model="formFilter.type"
+            :options="options"
+            label="เลือกประเภททุน"
+          />
+        </div>
+      </div>
+      <q-toolbar-title>
         <q-btn
           flat
           round
@@ -208,65 +214,68 @@ onMounted(() => {
         >
           <q-tooltip>เพิ่ม</q-tooltip>
         </q-btn>
-      </div>
+      </q-toolbar-title>
 
       <q-space />
       <div class="row q-gutter-sm">
-        <q-btn
-          flat
-          round
-          color="blue"
-          icon="mdi-arrow-down-bold-circle-outline"
-        >
-          <q-menu>
-            <q-list style="min-width: 100px" dense>
-              <q-item clickable v-close-popup v-for="items in itemDownload">
-                <q-item-section avatar>
-                  <q-icon :color="items.color" :name="items.icon" />
-                </q-item-section>
-                <q-item-section :class="`text-${items.color}`">{{
-                  items.label
-                }}</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-          <q-tooltip>ดาวน์โหลด</q-tooltip>
-        </q-btn>
-
-        <q-input
-          standout
-          dense
-          v-model="formFilter.keyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon v-if="formFilter.keyword == ''" name="search" />
-            <q-icon
-              v-if="formFilter.keyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="formFilter.keyword = ''"
-            />
-          </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"
-        />
+        <div>
+          <q-btn
+            flat
+            round
+            color="blue"
+            icon="mdi-arrow-down-bold-circle-outline"
+          >
+            <q-menu>
+              <q-list style="min-width: 100px" dense>
+                <q-item clickable v-close-popup v-for="items in itemDownload">
+                  <q-item-section avatar>
+                    <q-icon :color="items.color" :name="items.icon" />
+                  </q-item-section>
+                  <q-item-section :class="`text-${items.color}`">{{
+                    items.label
+                  }}</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+        </div>
+        <div>
+          <q-input
+            standout
+            dense
+            v-model="formFilter.keyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="formFilter.keyword == ''" name="search" />
+              <q-icon
+                v-if="formFilter.keyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="formFilter.keyword = ''"
+              />
+            </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
       </div>
     </q-toolbar>