UI มอบหมายหน้าที่ความรับผิดชอบ

src/modules/02_users/views/03_permissionsView.vue

@@ -194,6 +194,7 @@ const reqMaster = reactive<FilterReqMaster>({
   id: "",
   type: 0,
   isAll: false,
+  isBlank: false,
   page: 1,
   pageSize: 10,
   keyword: "",
@@ -379,10 +380,11 @@ watch([() => reqMaster.pageSize], () => {
 
 /** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนจำนวนต่อแแแถว*/
 watch(
-  () => reqMaster.isAll,
+  () => [reqMaster.isAll, reqMaster.isBlank],
   () => {
     reqMaster.page = 1;
-    fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
+    reqMaster.id &&
+      fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
   }
 );
 
@@ -502,6 +504,17 @@ onMounted(() => {
               <q-toolbar style="padding: 0">
                 <q-space />
                 <div class="row q-gutter-md">
+                  <div>
+                    <q-checkbox
+                      keep-color
+                      v-model="reqMaster.isBlank"
+                      label="แสดงเฉพาะตำแหน่งว่าง"
+                      color="primary"
+                    >
+                      <q-tooltip>แสดงเฉพาะตำแหน่งว่าง</q-tooltip>
+                    </q-checkbox>
+                  </div>
+
                   <div>
                     <q-checkbox
                       keep-color