ปรับ วินัย

src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue

@@ -26,7 +26,7 @@ const {
   messageError,
   dialogConfirm,
   hideLoader,
-  dialogMessageNotify,
+  onSearchDataTable,
 } = mixin;
 
 const commandType = ref<string>(""); //ตัวแปรเก็บคำสั่งที่เลือก
@@ -34,10 +34,10 @@ const commandOp = ref<ListCommand[]>([]);
 const listCommand = ref<ListCommand[]>([]); // เก็บคำสั่งทั้งหมด
 
 const modalCommand = ref<boolean>(false);
-const optionsType = ref<[]>([]);
 const idPath = ref<string>(route.params.id as string);
 const type = ref<string>("");
 const rows = ref<DataPerson[]>([]);
+const rowsMain = ref<DataPerson[]>([]);
 const selected = ref<ResponseData[]>([]);
 const dataMapToSend = computed(() => {
   return selected.value.map((i: any) => ({
@@ -72,12 +72,6 @@ const props = defineProps({
   title: String,
 });
 
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 //popup ยืนยันส่งัว
 function saveOrder() {
   dialogConfirm(
@@ -136,13 +130,20 @@ function Reset() {
  */
 function filterSelector(val: string, update: Function) {
   update(() => {
-    commandType.value = val ? "" : commandType.value;
     commandOp.value = listCommand.value.filter(
       (v: any) => v.name.indexOf(val) > -1
     );
   });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    props?.filterKeyword2 ? props?.filterKeyword2 : "",
+    rowsMain.value,
+    props.columns ? props.columns : []
+  );
+}
+
 /**
  * เมื่อ props.modal เป็น true
  * กำหนดให้  selected เป็นค่าว่างและกำหนด filter ประเภทตำแหน่งตามประเภทการสอบ
@@ -157,6 +158,8 @@ watch(
         ? props.data.persons.filter((item: any) => item.status == "NEW")
         : [];
 
+      rowsMain.value = rows.value;
+
       const data = await storeCommand.getCommandTypes();
       listCommand.value = data.filter(
         (v: any) =>
@@ -178,78 +181,65 @@ watch(
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader :tittle="props.title" :close="closeModal" />
       <q-separator />
-      <q-card-section class="q-pt-none">
-        <div class="row justify-between">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-select
-                v-model="commandType"
-                dense
-                outlined
-                label="ประเภทคำสั่ง"
-                :options="commandOp"
-                option-label="name"
-                option-value="code"
-                emit-value
-                map-options
-                hide-selected
-                fill-input
-                use-input
-                style="width: 350px; max-width: auto"
-                @update:model-value="selected = []"
-                @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn
-                    ) "
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template></q-select
-              >
-            </q-toolbar>
-          </div>
-
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-              <q-select
-                v-model="props.visibleColumns"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="props.columns"
-                option-value="name"
-                style="min-width: 140px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
+      <q-card-section>
+        <div class="q-pb-sm row q-col-gutter-sm">
+          <q-select
+            v-model="commandType"
+            dense
+            outlined
+            label="ประเภทคำสั่ง"
+            :options="commandOp"
+            option-label="name"
+            option-value="code"
+            emit-value
+            map-options
+            hide-selected
+            fill-input
+            use-input
+            style="width: 350px; max-width: auto"
+            @update:model-value="selected = []"
+            @filter="(inputValue:any,
+              doneFn:Function) => filterSelector(inputValue, doneFn
+              ) "
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template></q-select
+          >
+          <q-space />
+          <q-input
+            borderless
+            outlined
+            dense
+            :model-value="filterKeyword2"
+            @update:model-value="updateInput"
+            placeholder="ค้นหา"
+            @keydown.enter.pervent="serchDataTable"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+          <q-select
+            v-model="props.visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="props.columns"
+            option-value="name"
+            style="min-width: 140px"
+          />
         </div>
 
         <d-table
           :columns="props.columns"
           :rows="rows"
-          :filter="filterKeyword2?.trim()"
           row-key="id"
           :visible-columns="props.visibleColumns"
           selection="multiple"
@@ -288,8 +278,9 @@ watch(
                 <div v-else-if="col.name === 'salary'">
                   {{ props.row.salary.toLocaleString() }}
                 </div>
+
                 <div v-else>
-                  {{ col.value }}
+                  {{ col.value ?? "-" }}
                 </div>
               </q-td>
             </q-tr>