เพิ่ม filter ค้นหาและคอลัมน์

src/modules/08_registryEmployee/views/Main.vue

@@ -35,7 +35,7 @@ const {
 } = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
 
 const router = useRouter();
-const filterRef = ref<QInput>();
+const filterRef = ref<any>(null);
 const filter = ref<string>("");
 const id = ref<string>("");
 
@@ -241,8 +241,8 @@ const checkNull = (text: string) =>
   text == null
     ? ""
     : text == "00000000-0000-0000-0000-000000000000"
-      ? ""
+    ? ""
-      : text;
+    : text;
 
 // คลิก icon ส่งไปออกคำสั่ง (เปิด dialog)
 const modaladdOrder = ref<boolean>(false); // dialog ส่งไปออกคำสั่ง
@@ -255,10 +255,22 @@ const clickCloseSendModal = () => {
   modaladdOrder.value = false;
 };
 
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   filter.value = "";
   filterRef.value!.focus();
+  filterKeyword2.value = "";
 };
 
 // เพิ่มข้อมูลลูกจ้าง
@@ -298,6 +310,7 @@ const deleteData = async (id: string) => {
 // **** เริ่มในส่วนของการเลือกตำแหน่ง ***//
 const rowsPosition = ref<any>([]); // รายการข้อมูลในตารางกำหนดตำแหน่ง
 const filters = ref<FormRegistryEmployee[]>([]);
+const filterKeyword2 = ref<string>("");
 const modal = ref<boolean>(false); // เปิด-ปิด dialod กำหนดตำแหน่ง
 const selectedPosition = ref<any>([]); // เก็บตำแหน่งที่เลือก
 
@@ -425,10 +438,7 @@ const checkSave = () => {
 // เช็คข้อมูลก่อนบันทึกการกำหนดตำแหน่ง
 const saveData = async () => {
   if (selectedPosition.value.length == 0) {
-    dialogMessageNotify(
+    dialogMessageNotify($q, "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง");
-      $q,
-      "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง"
-    );
     return;
   } else {
     await savePosition();
@@ -550,7 +560,7 @@ const getPosition = async (id: string) => {
     });
 };
 
-// ดึงข้อมูลตำแหน่ง (root tree) 
+// ดึงข้อมูลตำแหน่ง (root tree)
 const selected = ref([]);
 const nodeTree = async () => {
   showLoader();
@@ -577,14 +587,16 @@ const rows = ref<FormRegistryEmployee[]>([]);
 const showEmployeeTemp = async () => {
   showLoader();
 
-  let cirteria = [{
+  let cirteria = [
-    criteriaType: "employee_class",
+    {
-    criteriaValue: "temp",
+      criteriaType: "employee_class",
-  },
+      criteriaValue: "temp",
-  {
+    },
-    criteriaType: "is_retire",
+    {
-    criteriaValue: "false",
+      criteriaType: "is_retire",
-  }];
+      criteriaValue: "false",
+    },
+  ];
 
   if (selected.value == null) return;
   await http
@@ -652,28 +664,64 @@ const showEmployeeTemp = async () => {
       <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="clickAddOrder">
+      <q-btn
+        flat
+        round
+        color="primary"
+        icon="mdi-account-arrow-right"
+        @click="clickAddOrder"
+      >
         <q-tooltip>ส่งรายชื่อไปออกคำสั่ง</q-tooltip>
       </q-btn>
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
-        <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
+        <q-input
-          style="max-width: 200px" class="q-ml-sm">
+          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" />
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
-        <q-select v-model="visibleColumnsEmployeeTemp" :display-value="$q.lang.table.columns" multiple outlined dense
+        <q-select
-          :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
+          v-model="visibleColumnsEmployeeTemp"
-          class="gt-xs q-ml-sm" />
+          :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>
     </div>
     <div class="col-12 q-pt-sm">
-      <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumnsEmployeeTemp" :filter="filter"
+      <d-table
-        row-key="id">
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumnsEmployeeTemp"
+        :filter="filter"
+        row-key="id"
+      >
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -684,16 +732,32 @@ const showEmployeeTemp = async () => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="no"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.rowIndex + 1 }}
             </q-td>
-            <q-td key="fullname" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="fullname"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.fullname }}
             </q-td>
-            <q-td key="newAgency" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
-              <div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
+              key="newAgency"
-                props.row.draftPositionEmployee == null
+              :props="props"
-                ">
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              <div
+                class="col-12"
+                v-if="
+                  props.row.draftOrganizationOrganization == null &&
+                  props.row.draftPositionEmployee == null
+                "
+              >
                 <div class="text-weight-medium">
                   {{ "-" }}
                 </div>
@@ -707,8 +771,15 @@ const showEmployeeTemp = async () => {
                 </div>
               </div>
             </q-td>
-            <q-td key="currentAgency" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
-              <div class="col-12" v-if="props.row.oc == null && props.row.position == null">
+              key="currentAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              <div
+                class="col-12"
+                v-if="props.row.oc == null && props.row.position == null"
+              >
                 <div class="text-weight-medium">
                   {{ "-" }}
                 </div>
@@ -722,69 +793,154 @@ const showEmployeeTemp = async () => {
                 </div>
               </div>
             </q-td>
-            <q-td key="amount" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="amount"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.amount }}
             </q-td>
-            <q-td key="govAge" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="govAge"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.govAge }}
             </q-td>
-            <q-td key="dateAppoint" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="dateAppoint"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.dateAppoint }}
             </q-td>
-            <q-td key="dateStart" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="dateStart"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.dateStart }}
             </q-td>
-            <q-td key="salaryDate" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="salaryDate"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.salaryDate }}
             </q-td>
-            <q-td key="refSalary" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="refSalary"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.refSalary }}
             </q-td>
-            <q-td key="age" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="age"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.age }}
             </q-td>
-            <q-td key="fullnameOld" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="fullnameOld"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.fullnameOld }}
             </q-td>
-            <q-td key="createdAt" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="createdAt"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.createdAt }}
             </q-td>
-            <q-td key="isLeave" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="isLeave"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.isLeave }}
             </q-td>
 
-            <q-td key="leaveDateOrder" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="leaveDateOrder"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.leaveDateOrder }}
             </q-td>
-            <q-td key="statustext" :props="props" @click="redirectToPage(props.row.id, props.row.status)">
+            <q-td
+              key="statustext"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.statustext }}
             </q-td>
             <q-td auto-width>
-              <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+              <q-btn
+                icon="mdi-dots-vertical"
+                size="12px"
+                color="grey-7"
+                flat
+                round
+                dense
+              >
                 <q-menu transition-show="jump-down" transition-hide="jump-up">
                   <q-list dense style="min-width: 160px">
-                    <q-item clickable v-close-popup @click="editDetail(props.row)" :disable="props.row.status == 'REPORT' ||
+                    <q-item
-                      props.row.status == 'DONE'
+                      clickable
-                      ">
+                      v-close-popup
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      @click="editDetail(props.row)"
-                        <q-icon :color="props.row.status == 'REPORT' ||
+                      :disable="
-                          props.row.status == 'DONE'
+                        props.row.status == 'REPORT' ||
-                          ? 'grey'
+                        props.row.status == 'DONE'
-                          : 'blue'
+                      "
-                          " size="xs" name="mdi-account-settings" />
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          :color="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                              ? 'grey'
+                              : 'blue'
+                          "
+                          size="xs"
+                          name="mdi-account-settings"
+                        />
                       </q-item-section>
                       <q-item-section>กำหนดตำแหน่ง</q-item-section>
                     </q-item>
                     <q-separator />
-                    <q-item clickable v-close-popup @click="clickDelete(props.row.id)" :disable="props.row.status == 'REPORT' ||
+                    <q-item
-                      props.row.status == 'DONE'
+                      clickable
-                      ">
+                      v-close-popup
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      @click="clickDelete(props.row.id)"
-                        <q-icon :color="props.row.status == 'REPORT' ||
+                      :disable="
-                          props.row.status == 'DONE'
+                        props.row.status == 'REPORT' ||
-                          ? 'grey'
+                        props.row.status == 'DONE'
-                          : 'red-7'
+                      "
-                          " size="xs" name="mdi-delete" />
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          :color="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                              ? 'grey'
+                              : 'red-7'
+                          "
+                          size="xs"
+                          name="mdi-delete"
+                        />
                       </q-item-section>
                       <q-item-section>ลบ</q-item-section>
                     </q-item>
@@ -805,20 +961,85 @@ const showEmployeeTemp = async () => {
       <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
       <q-separator />
       <q-card-section class="q-pa-sm">
-        <d-table :rows="rowsPosition" :columns="columnsPosition" row-key="id" selection="single"
+        <div class="row justify-end">
-          v-model:selected="selectedPosition" :visible-columns="visibleColumnsPosition">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                ref="filterRef"
+                debounce="300"
+                :model-value="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumnsPosition"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columnsPosition"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+        <d-table
+          :rows="rowsPosition"
+          :columns="columnsPosition"
+          :filter="filterKeyword2"
+          row-key="id"
+          selection="single"
+          v-model:selected="selectedPosition"
+          :visible-columns="visibleColumnsPosition"
+        >
           <template v-slot:body-selection="scope">
-            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
           </template>
         </d-table>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn dense unelevated label="บันทึก" color="public" @click="checkSave" class="q-px-md">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="checkSave"
+          class="q-px-md"
+        >
         </q-btn>
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <DialogSendToCommand :modal="modaladdOrder" :closeDialog="clickCloseSendModal" :rows="rows" :fetch-new-list="showEmployeeTemp"/>
+  <DialogSendToCommand
-</template>
+    :modal="modaladdOrder"
+    :closeDialog="clickCloseSendModal"
+    :rows="rows"
+    :fetch-new-list="showEmployeeTemp"
+  />
+</template>