ปรับ filter KPI Devalopment

2024-12-10 12:11:19 +07:00 · 2024-12-10 12:11:19 +07:00 · 6a50b6965f
commit 6a50b6965f
parent 4d225f860b
4 changed files with 100 additions and 31 deletions
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
@ -20,11 +20,13 @@ const {
  findPosMasterNoOld,
  findOrgNameOld,
  date2Thai,
+  onSearchDataTable,
 } = mixin;

 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);

 //หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@ -210,6 +212,7 @@ function getData() {
    .then((res) => {
      const data = res.data.result;
      rows.value = data;
+      rowsMain.value = data;
    })
    .catch((e) => {
      messageError($q, e);
@ -218,12 +221,24 @@ function getData() {
      hideLoader();
    });
 }
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watch(
  () => modal.value,
  (n) => {
    if (n == true) {
      getData();
-    } else rows.value = [];
+    } else {
+      rows.value = [];
+      rowsMain.value = [];
+    }
  }
 );
 </script>
@ -233,13 +248,43 @@ watch(
      <DialogHeader tittle="ข้อมูลการช่วยราชการ" :close="close" />
      <q-separator />
      <q-card-section>
-        <div class="row">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12 row">
+            <q-space />
+            <div class="row q-col-gutter-sm">
+              <q-input
+                dense
+                outlined
+                v-model="filterKeyword"
+                label="ค้นหา"
+                @keydown.enter.pervent="serchDataTable"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </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"
+                style="min-width: 140px"
+              />
+            </div>
+          </div>
+
          <div class="col-12">
            <d-table
              ref="table"
              :columns="columns"
              :rows="rows"
-              :filter="filterKeyword"
              row-key="id"
              flat
              bordered
--- a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
@ -112,7 +112,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);

 const kpiUserPlannedId = ref<string>("");
-const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const modalEvaluate = ref<boolean>(false);
@ -257,7 +256,6 @@ watch(
        ref="table"
        :columns="columns"
        :rows="rows"
-        :filter="filterKeyword"
        row-key="id"
        flat
        bordered
--- a/src/modules/14_KPI/views/mainDetail.vue
+++ b/src/modules/14_KPI/views/mainDetail.vue
@ -20,7 +20,14 @@ interface ListMain {
 const profileId = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { messageError, findOrgName, showLoader, hideLoader, date2Thai } = mixin;
+const {
+  messageError,
+  findOrgName,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  onSearchDataTable,
+} = mixin;

 const mode = ref<any>($q.screen.gt.xs);
 const profileImg = ref<string>("");
@ -41,6 +48,7 @@ const sizeImg = ref<string>("");

 /** Table */
 const rows = ref<ListMain[]>([]);
+const rowsMain = ref<ListMain[]>([]);
 const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
  {
@ -150,6 +158,7 @@ async function getList(id: string) {
    .then(async (res) => {
      const data = await res.data.result;
      rows.value = data;
+      rowsMain.value = data;
    })
    .catch((e) => {
      messageError($q, e);
@ -208,6 +217,14 @@ function onDetail(id: string) {
  router.push(`/probation/detail/${profileId.value}/${id}`);
 }

+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
  await getMain();
 });
@ -225,6 +242,11 @@ onMounted(async () => {
      @click="router.go(-1)"
    />
    รายละเอียดงานที่ได้รับมอบหมาย
+    {{
+      formData.firstName
+        ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+        : ""
+    }}
  </div>
  <div class="row q-col-gutter-md">
    <div v-if="$q.screen.gt.xs" class="col-12">
@ -236,6 +258,7 @@ onMounted(async () => {
              : "-"
          }}</span>
        </div>
+        <q-separator />
        <q-resize-observer @resize="onResize" />
        <q-card-section class="q-pa-md">
          <div class="row">
@ -324,31 +347,21 @@ onMounted(async () => {
        </q-list>
      </q-card>
    </div>
+
    <div class="col-12 row">
      <q-card bordered class="col-12 q-pa-md">
        <div class="row">
          <q-space />
          <q-input
-            class="inputgreen"
            outlined
            dense
            v-model="filter"
            label="ค้นหา"
            :style="mode ? `max-width: 200px` : `max-width: 150px`"
+            @keydown.enter.pervent="serchDataTable"
          >
            <template v-slot:append>
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
-              <q-icon
-                v-else
-                name="search"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
+              <q-icon name="search" />
            </template>
          </q-input>
          <q-select
@ -359,7 +372,6 @@ onMounted(async () => {
            outlined
            emit-value
            map-options
-            
            options-dense
            option-value="name"
            style="min-width: 140px"
@ -378,7 +390,6 @@ onMounted(async () => {
            :rows="rows"
            :columns="columns"
            :grid="!$q.screen.gt.xs"
-            :filter="filter.trim()"
            :rows-per-page-options="[10, 25, 50, 100]"
            :visible-columns="visibleColumns"
            :virtual-scroll-sticky-size-start="48"
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@ -9,7 +9,7 @@ import type { QTableProps } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";

 const $q = useQuasar();
-const { date2Thai } = useCounterMixin();
+const { date2Thai, onSearchDataTable } = useCounterMixin();

 //prosp
 const isProfile = defineModel<boolean>("isProfile", { required: true });
@ -18,6 +18,8 @@ const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });
 //ข้อมุล Table
 const keyword = ref<string>("");
 const rows = ref<ResRecord[]>([]);
+const rowsMain = ref<ResRecord[]>([]);
+
 // baseColumns
 const baseColumns = ref<QTableProps["columns"]>([
  {
@ -67,6 +69,11 @@ const baseColumns = ref<QTableProps["columns"]>([
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
+    format(val, row) {
+      return row.firstName
+        ? `${row.prefix}${row.firstName} ${row.lastName}`
+        : "-";
+    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
@ -239,6 +246,15 @@ function fetchDataProject() {
  rows.value = listPerson.value.filter(
    (e: ResRecord) => e.isProfile === isProfile.value
  );
+  rowsMain.value = rows.value;
+}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
 }

 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
@ -250,7 +266,14 @@ onMounted(() => {
 <template>
  <q-toolbar style="padding: 0px" class="q-mb-xs">
    <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+      @keydown.enter.pervent="serchDataTable"
+    >
      <template v-slot:append>
        <q-icon name="search" />
      </template>
@ -281,7 +304,6 @@ onMounted(() => {
      :columns="columns"
      :rows="rows"
      :paging="true"
-      :filter="keyword"
      v-model:pagination="pagination"
      :rows-per-page-options="[20, 50, 100]"
      :visible-columns="visibleColumns"
@ -318,13 +340,6 @@ onMounted(() => {
              </q-icon>
            </div>

-            <div v-else-if="col.name == 'fullName'">
-              {{
-                props.row.firstName
-                  ? `${props.row.prefix}${props.row.firstName}${props.row.lastName}`
-                  : "-"
-              }}
-            </div>
            <div v-else-if="col.name === 'org'" class="table_ellipsis">
              {{ col.value ? col.value : "-" }}
            </div>