แก้ฟิลเตอร์ จากล่างขึ้นบนถึง พ้นราชการ

2024-12-03 15:28:53 +07:00 · 2024-12-03 15:28:53 +07:00 · e9280ca4f3
commit e9280ca4f3
parent 35422c6963
21 changed files with 260 additions and 69 deletions
--- a/src/modules/06_retirement/components/01_retirement/RetirementDetail.vue
+++ b/src/modules/06_retirement/components/01_retirement/RetirementDetail.vue
@ -31,6 +31,7 @@ const {
  date2Thai,
  dateToISO,
  findOrgName,
+  onSearchDataTable,
 } = mixin;
 const myForm = ref<QForm | null>(null);

@ -120,6 +121,7 @@ const columns = ref<any["columns"]>([
  },
 ]);
 const rows = ref<RetirementList[]>([]);
+const rowsData = ref<RetirementList[]>([]);
 const visibleColumns = ref<string[]>([
  "order",
  "name",
@ -157,7 +159,7 @@ async function fetchlistprofile(id: string) {

      // รายชื่อผู้เกษียณอายุราชการ
      if (data.profile !== null) {
-        rows.value = data.profile.map((e: any) => ({
+        const listData = data.profile.map((e: any) => ({
          id: e.id,
          profileId: e.profileId,
          order: e.order,
@ -183,6 +185,8 @@ async function fetchlistprofile(id: string) {
          child4: e.child4,
          child4Id: e.child4Id,
        }));
+        rows.value = listData;
+        rowsData.value = listData;
      }

      if (statusReport.value == false) {
@ -407,6 +411,14 @@ function updatemodalPersonal(modal: boolean) {
  modalPersonal.value = modal;
 }

+async function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /** Hook */
 onMounted(async () => {
  retireld.value = retireld_params.toString();
@ -517,6 +529,7 @@ onMounted(async () => {
              placeholder="ค้นหา"
              style="max-width: 200px"
              class="q-ml-sm"
+              @keydown.enter="onSearch"
            >
              <template v-slot:append>
                <q-icon name="search" />
@ -549,7 +562,6 @@ onMounted(async () => {
          :rows="rows"
          :columns="columns"
          row-key="order"
-          :filter="filter.trim()"
          :visible-columns="visibleColumns"
          no-data-label="ไม่มีข้อมูล"
          :pagination-label="paginationLabel"
--- a/src/modules/06_retirement/components/02_resign/Table.vue
+++ b/src/modules/06_retirement/components/02_resign/Table.vue
@ -23,10 +23,11 @@ const stroeResign = useDataStore();
 const { statusText } = stroe;
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const { messageError, date2Thai, showLoader, hideLoader,onSearchDataTable } = mixin;

 /** Table */
 const rows = ref<ResponseItems[]>([]);
+const rowsData = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
@ -196,6 +197,7 @@ async function fecthlist() {
    .then(async (res) => {
      const data = await res.data.result;
      rows.value = data;
+      rowsData.value = data;
    })
    .catch((e) => {
      messageError($q, e);
@ -223,6 +225,14 @@ function onRedirectToDetail(type: string, id: string) {
  router.push(`/retirement/${type}${test}/${id}`);
 }

+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**Hook */
 onMounted(async () => {
  status.value = stroeResign.formQurey.status;
@ -283,6 +293,7 @@ onMounted(async () => {
            outlined
            debounce="300"
            placeholder="ค้นหา"
+            @keydown.enter="onSearch"
          >
            <template v-slot:append>
              <q-icon name="search" />
@ -309,7 +320,6 @@ onMounted(async () => {
        <d-table
          :columns="columns"
          :rows="rows"
-          :filter="filterKeyword.trim()"
          row-key="id"
          :visible-columns="visibleColumns"
          v-model:pagination="pagination"
--- a/src/modules/06_retirement/components/03_resignEmp/Table.vue
+++ b/src/modules/06_retirement/components/03_resignEmp/Table.vue
@ -23,10 +23,11 @@ const stroeResign = useDataStore();
 const { statusText } = stroe;
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const { messageError, date2Thai, showLoader, hideLoader,onSearchDataTable } = mixin;

 /** Table */
 const rows = ref<ResponseItems[]>([]);
+const rowsData = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
@ -195,6 +196,7 @@ async function fecthlist() {
    .then(async (res) => {
      const data = await res.data.result;
      rows.value = data;
+      rowsData.value = data;
    })
    .catch((e) => {
      messageError($q, e);
@ -223,6 +225,14 @@ function onRedirectToDetail(type: string, id: string) {
  router.push(`/retirement/${type}${test}/${id}`);
 }

+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**Hook */
 onMounted(async () => {
  statusEMP.value = stroeResign.formQureyEMP.status;
@ -284,15 +294,10 @@ onMounted(async () => {
            outlined
            debounce="300"
            placeholder="ค้นหา"
+            @keydown.enter="onSearch"
          >
            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filterKeyword = ''"
-              />
+              <q-icon name="search" />
            </template>
          </q-input>

@ -316,7 +321,6 @@ onMounted(async () => {
        <d-table
          :columns="columns"
          :rows="rows"
-          :filter="filterKeyword.trim()"
          row-key="id"
          :visible-columns="visibleColumns"
          v-model:pagination="pagination"
--- a/src/modules/06_retirement/components/06_dismissOrder/DialogSendToCommand.vue
+++ b/src/modules/06_retirement/components/06_dismissOrder/DialogSendToCommand.vue
@ -9,10 +9,22 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";

 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import type { ResponseData } from "@/modules/06_retirement/interface/response/out";

 import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
 import DialogHeader from "@/components/DialogHeader.vue";

+/** props*/
+const props = defineProps({
+  closeModal: Function,
+  fecthlistRecevice: Function,
+});
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<ResponseData[]>("rows", { required: true });
+const rowsData = defineModel<ResponseData[]>("rowsData", { required: true });
+const filterKeyword = defineModel<string>("filterKeyword2", { required: true });
+
 /** use */
 const $q = useQuasar();
 const { statusText } = useTransferDataStore();
@ -36,10 +48,11 @@ const {
  dialogConfirm,
  hideLoader,
  date2Thai,
+  onSearchDataTable,
 } = mixin;

 /** คอลัมน์ */
-const columns2 = ref<QTableProps["columns"]>([
+const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
@ -112,7 +125,7 @@ const columns2 = ref<QTableProps["columns"]>([
  },
 ]);
 /** คอลัมน์ที่แสดง */
-const visibleColumns2 = ref<string[]>([
+const visibleColumns = ref<string[]>([
  "no",
  "fullname",
  "positionLevel",
@ -121,15 +134,6 @@ const visibleColumns2 = ref<string[]>([
  "status",
 ]);

-/** props*/
-const props = defineProps({
-  modal: Boolean,
-  closeModal: Function,
-  fecthlistRecevice: Function,
-  rows2: Array,
-  filterKeyword2: String,
-});
-
 const modalCommand = ref<boolean>(false);

 /**
@ -164,15 +168,23 @@ function Reset() {
  emit("update:filterKeyword2", "");
 }

+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watchEffect(() => {
-  if (props.modal === true) {
+  if (modal.value === true) {
    selected.value = [];
    updateInput("");
  }
 });
 </script>
 <template>
-  <q-dialog v-model="props.modal" persistent>
+  <q-dialog v-model="modal" persistent>
    <q-card style="width: 1200px; max-width: 80vw">
      <DialogHeader tittle="ส่งไปออกคำสั่งให้ออก" :close="closeModal" />
      <q-separator />
@ -185,16 +197,16 @@ watchEffect(() => {
              outlined
              dense
              debounce="300"
-              :model-value="filterKeyword2"
-              @update:model-value="updateInput"
+              v-model="filterKeyword"
              placeholder="ค้นหา"
+              @keydown.enter="onSearch"
            >
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
            <q-select
-              v-model="visibleColumns2"
+              v-model="visibleColumns"
              multiple
              outlined
              dense
@ -202,7 +214,7 @@ watchEffect(() => {
              :display-value="$q.lang.table.columns"
              emit-value
              map-options
-              :options="columns2"
+              :options="columns"
              option-value="name"
              style="min-width: 140px"
              class="gt-xs q-ml-sm"
@ -211,11 +223,10 @@ watchEffect(() => {

          <div class="col-12">
            <d-table
-              :columns="columns2"
-              :rows="rows2"
-              :filter="filterKeyword2?.trim()"
+              :columns="columns"
+              :rows="rows"
              row-key="id"
-              :visible-columns="visibleColumns2"
+              :visible-columns="visibleColumns"
              selection="multiple"
              v-model:selected="selected"
            >
--- a/src/modules/06_retirement/views/01_retirement.vue
+++ b/src/modules/06_retirement/views/01_retirement.vue
@ -21,7 +21,8 @@ const mixin = useCounterMixin();
 const useStoreRetire = useDataStoreRetirement();
 const { tab, type } = storeToRefs(useDataStoreRetirement());
 const { clickTab } = useStoreRetire;
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const { messageError, date2Thai, showLoader, hideLoader, onSearchDataTable } =
+  mixin;

 const fiscalyear = ref<number>(); // ปี
 const yearOptionsFilter = ref<any>({
@ -91,6 +92,7 @@ const columns = ref<QTableProps["columns"]>([
 // ข้อมูลตาราง (จำลอง)
 const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
+const rowsData = ref<resMain[]>([]);
 const yearOptions = ref<any>([{ id: "", year: "ทั้งหมด" }]);

 // ประกาศเกษียณอายุราชการ
@ -101,7 +103,7 @@ async function fetchRetirement(type: string, year: any) {
    .get(config.API.retirement(type, year))
    .then((res) => {
      let data = res.data.result;
-      rows.value = data.map((items: any) => ({
+      const listData = data.map((items: any) => ({
        id: items.id,
        signDate: date2Thai(items.signDate) ?? "-",
        Date: date2Thai(items.createdAt),
@ -113,6 +115,9 @@ async function fetchRetirement(type: string, year: any) {
        json: items.json,
        document: items.document,
      }));
+      rows.value = listData;
+      rowsData.value = listData;
+
      let option: any[] = [];
      data.map((items: any) => {
        option.push({
@ -215,6 +220,14 @@ function typeReportChangeName(val: string) {
  }
 }

+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watch(type, () => {
  fetchRetirement(type.value, currentYear);
 });
@ -309,6 +322,7 @@ onMounted(async () => {
                outlined
                debounce="300"
                placeholder="ค้นหา"
+                @keydown.enter="onSearch"
              >
                <template v-slot:append>
                  <q-icon name="search" />
@ -336,7 +350,6 @@ onMounted(async () => {
              ref="table"
              :columns="columns"
              :rows="rows"
-              :filter="filterKeyword.trim()"
              row-key="name"
              flat
              bordered
--- a/src/modules/06_retirement/views/04_exitInterview.vue
+++ b/src/modules/06_retirement/views/04_exitInterview.vue
@ -26,10 +26,12 @@ const {
  hideLoader,
  success,
  dialogConfirm,
+  onSearchDataTable
 } = mixin;

 /** คอลัมน์ */
 const rows = ref<ResponseItems[]>([]);
+const rowsData = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
@ -186,6 +188,7 @@ async function fecthlist() {
        });
      });
      rows.value = list;
+      rowsData.value = list;
      console.log(rows.value);

      filters.value = list;
@ -279,6 +282,14 @@ function openModalCalendar(rows: any) {
  daterow.value = convertThaiDateToNumeric(rows.datetext);
 }

+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /** HOOK */
 onMounted(async () => {
  await fecthlist();
@ -319,6 +330,7 @@ onMounted(async () => {
              outlined
              debounce="300"
              placeholder="ค้นหา"
+              @keydown.enter="onSearch"
            >
              <template v-slot:append>
                <q-icon name="search" />
@ -344,7 +356,6 @@ onMounted(async () => {
          <d-table
            :columns="columns"
            :rows="rows"
-            :filter="filterKeyword.trim()"
            row-key="id"
            :visible-columns="visibleColumns"
          >
--- a/src/modules/06_retirement/views/05_deceased.vue
+++ b/src/modules/06_retirement/views/05_deceased.vue
@ -13,10 +13,11 @@ import { checkPermission } from "@/utils/permissions";
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, findOrgName } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, findOrgName ,onSearchDataTable} = mixin;

 /** คอลัมน์ */
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const pagination = ref({
  sortBy: "createdAt",
  descending: true,
@ -118,6 +119,7 @@ async function fectListDecased() {
    .then((res) => {
      const data = res.data.result;
      rows.value = data;
+      rowsData.value = data;
    })
    .catch((e) => {
      messageError($q, e);
@ -135,6 +137,14 @@ function nextPage(id: string) {
  router.push("/retirement/deceased/" + id);
 }

+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**Hook */
 onMounted(() => {
  fectListDecased();
@ -159,6 +169,7 @@ onMounted(() => {
              outlined
              debounce="300"
              placeholder="ค้นหา"
+              @keydown.enter="onSearch"
            >
              <template v-slot:append>
                <q-icon name="search" />
@ -185,7 +196,6 @@ onMounted(() => {
            ref="table"
            :columns="columns"
            :rows="rows"
-            :filter="filterKeyword.trim()"
            row-key="fullname"
            flat
            bordered
--- a/src/modules/06_retirement/views/06_dismissOrder.vue
+++ b/src/modules/06_retirement/views/06_dismissOrder.vue
@ -25,7 +25,7 @@ const {
  showLoader,
  hideLoader,
  success,
-
+  onSearchDataTable,
  dialogRemove,
 } = mixin;
 const { statusText } = transferStore;
@ -48,7 +48,9 @@ const filterRef = ref<any>(null);

 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const rows = ref<ResponseData[]>([]);
+const rowsData = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
+const rowsData2 = ref<ResponseData[]>([]);
 const filters = ref<ResponseData[]>([]);
 const columns = ref<QTableProps["columns"]>([
  {
@ -145,6 +147,7 @@ function openModalOrder() {
      r.date
  );
  rows2.value = row;
+  rowsData2.value = row;
 }

 //นำข้อมูลมาแสดง
@ -155,6 +158,7 @@ async function getData() {
    .then((res: any) => {
      const data = res.data.result;
      rows.value = data;
+      rowsData.value = data;
      filters.value = data;
    })
    .catch((e) => {
@ -191,6 +195,14 @@ function closeModal() {
  modal.value = false;
 }

+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
  await getData();
 });
@ -225,6 +237,7 @@ onMounted(async () => {
              outlined
              debounce="300"
              placeholder="ค้นหา"
+              @keydown.enter="onSearch"
            >
              <template v-slot:append>
                <q-icon name="search" />
@ -251,7 +264,6 @@ onMounted(async () => {
          <d-table
            :columns="columns"
            :rows="rows"
-            :filter="filterKeyword.trim()"
            row-key="id"
            :visible-columns="visibleColumns"
            v-model:pagination="pagination"
@ -345,7 +357,8 @@ onMounted(async () => {
  <DialogSendToCommand
    v-model:modal="modal"
    :closeModal="closeModal"
-    :rows2="rows2"
+    v-model:rows="rows2"
+    v-model:rowsData="rowsData2"
    v-model:filterKeyword2="filterKeyword2"
    :fecthlistRecevice="getData"
  />