toggle

src/modules/05_command/views/lists.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -257,6 +257,14 @@ function filterSelector(val: string, update: Function) {
   });
 }
 
+/** เช็คการเปลี่ยนแปลงของค่า  isActive*/
+watch(
+  () => isActive.value,
+  () => {
+    searchByStatus();
+  }
+);
+
 /** เริ่มเมื่อโหลดหน้านี้*/
 onMounted(async () => {
   await Promise.all([fetchCommandType(), fetchCommandSys()]);
@@ -285,20 +293,18 @@ onMounted(async () => {
             </q-btn>
           </div> -->
           <q-space />
-          <div class="col-12 col-md-6">
-            <q-select
-              outlined
-              dense
-              v-model="isActive"
-              class="inputgreen"
-              label="สถานะการใช้งาน"
-              :options="activeOptions"
-              option-label="label"
-              option-value="value"
-              emit-value
-              map-options
-              @update:model-value="searchByStatus"
-            ></q-select>
+          <div class="col-12 col-md-6 q-py-sm">
+            <div class="row items-center no-wrap justify-end">
+              <q-badge
+                outline
+                :color="`${isActive ? `primary` : `orange`}`"
+                :label="`${isActive ? `Active` : `InActive`}`"
+              />
+              <label :class="`q-ml-lg toggle-control`">
+                <input type="checkbox" v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
           </div>
         </div>
         <q-separator />

src/modules/05_command/views/salaryLists.vue

@@ -53,7 +53,7 @@ const isActiveOption = ref<ActiveOptions[]>([
   },
 ]);
 const dataForm = reactive<ListTemplateSalary>({
-  id: '',
+  id: "",
   name: "",
   isActive: false,
 });
@@ -227,6 +227,7 @@ function updatePagination(newPagination: any) {
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
+/** เช็คการเปลี่ยนแปลงของค่า  pagination.value.rowsPerPage*/
 watch(
   () => pagination.value.rowsPerPage,
   async () => {
@@ -234,6 +235,13 @@ watch(
   }
 );
 
+/** เช็คการเปลี่ยนแปลงของค่า  isActive*/
+watch(
+  () => isActive.value,
+  async () => {
+    await fetchSalaryList();
+  }
+);
 /** เริ่มเมื่อโหลดหน้านี้*/
 onMounted(() => {
   getMainData();
@@ -280,32 +288,33 @@ onMounted(() => {
         <div v-if="activeOrderId !== ''">
           <div class="row q-pa-sm q-col-gutter-sm">
             <div class="col-12">
-              <div class="row q-gutter-sm">
-                <div class="col-3">
-                  <q-select
-                    outlined
+              <div class="row q-gutter-sm items-center">
+                <div>
+                  <q-btn
+                    flat
                     dense
-                    v-model="isActive"
-                    class="inputgreen"
-                    label="สถานะการใช้งาน"
-                    :options="isActiveOption"
-                    option-label="label"
-                    option-value="value"
-                    emit-value
-                    map-options
-                    @update:model-value="fetchSalaryList"
-                  ></q-select>
+                    round
+                    icon="add"
+                    color="add"
+                    @click="onDialogAdd"
+                    ><q-tooltip>เพิ่มข้อมูล</q-tooltip>
+                  </q-btn>
                 </div>
-                <q-btn
-                  flat
-                  dense
-                  round
-                  icon="add"
-                  color="add"
-                  @click="onDialogAdd"
-                  ><q-tooltip>เพิ่มข้อมูล</q-tooltip>
-                </q-btn>
+
                 <q-space />
+
+                <div class="row items-center no-wrap">
+                  <q-badge
+                    outline
+                    :color="`${isActive ? `primary` : `orange`}`"
+                    :label="`${isActive ? `ใช้` : `ไม่ใช้`}งาน`"
+                  />
+                  <label :class="`q-ml-lg toggle-control`">
+                    <input type="checkbox" v-model="isActive" />
+                    <span class="control"></span>
+                  </label>
+                </div>
+
                 <q-input
                   borderless
                   dense
@@ -336,6 +345,7 @@ onMounted(() => {
                   :options="columns"
                   option-value="name"
                   options-cover
+                  style="min-width: 150px"
                 />
               </div>
             </div>