ทะเบียนประวัติ: แก้ไอคอน, คำ

src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue

@@ -224,25 +224,38 @@ onMounted(() => {
 });
 </script>
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary">
-    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
-      <q-tooltip>เพิ่ม</q-tooltip>
-    </q-btn>
+  <div class="row items-center q-gutter-x-sm q-py-sm">
+    <q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
+      ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
     <q-space />
     <q-input
+      standout
       dense
-      outlined
       v-model="formFilter.keyword"
-      label="ค้นหา"
-      class="q-mr-sm"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      debounce="300"
     >
       <template v-slot:append>
-        <q-icon name="search" />
+        <q-icon
+          v-if="formFilter.keyword == ''"
+          name="search"
+          @click.stop.prevent="formFilter.keyword = ''"
+          class="cursor-pointer"
+        />
+        <q-icon
+          v-if="formFilter.keyword"
+          name="cancel"
+          @click.stop.prevent="formFilter.keyword = ''"
+          class="cursor-pointer"
+        />
       </template>
     </q-input>
-
     <q-select
-      v-if="modelView === 'table'"
+      v-if="modelView == 'table'"
       v-model="visibleColumns"
       multiple
       outlined
@@ -255,14 +268,12 @@ onMounted(() => {
       option-value="name"
       options-cover
       style="min-width: 150px"
-      class="q-mr-sm"
     />
-
     <q-btn-toggle
-      dense
       v-model="modelView"
-      toggle-color="grey-4"
+      dense
       class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
       :options="[
         { value: 'table', slot: 'table' },
         { value: 'card', slot: 'card' },
@@ -271,23 +282,24 @@ onMounted(() => {
       <template v-slot:table>
         <q-icon
           name="format_list_bulleted"
-          size="sm"
+          size="24px"
           :style="{
             color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
+
       <template v-slot:card>
         <q-icon
           name="mdi-view-grid-outline"
-          size="sm"
+          size="24px"
           :style="{
             color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
     </q-btn-toggle>
-  </q-toolbar>
+  </div>
 
   <d-table
     ref="table"
@@ -414,6 +426,26 @@ onMounted(() => {
         direction-links
       ></q-pagination>
     </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
   </d-table>
 
   <q-dialog v-model="modalDialog" persistent>
@@ -516,6 +548,7 @@ onMounted(() => {
                   </div>
                   <div class="col-xs-6 col-sm-6 col-md-6">
                     <datepicker
+                      menu-class-name="modalfix"
                       v-model="formData.refCommandDate"
                       :locale="'th'"
                       autoApply