toggle

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>