UI แต่งตั้งคณะกรรมการทดลองงาน

src/modules/05_placement/components/probation/MainAppoint.vue

@@ -9,6 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 
 import type { AppointMainRows } from "@/modules/05_placement/interface/request/Main";
+import DialogOrder from "@/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
@@ -16,7 +17,11 @@ const { dialogRemove, showLoader, hideLoader, messageError, success } = mixin;
 const router = useRouter();
 
 const rows = ref<AppointMainRows[]>([]);
+const rowsOrder = ref<AppointMainRows[]>([]);
+
 const filterKeyword = ref<string>("");
+const filterKeywordOrder = ref<string>("");
+const modalOrder = ref<boolean>(false);
 
 const total = ref<number>(0);
 const totalList = ref<number>(1);
@@ -137,6 +142,17 @@ function convertText(val: string) {
   }
 }
 
+function onSendOrder() {
+  modalOrder.value = true;
+  rowsOrder.value = rows.value.filter(
+    (item: AppointMainRows) => item.status == "PENDING"
+  );
+}
+
+function closeModal() {
+  modalOrder.value = false;
+  rowsOrder.value = [];
+}
 watch(
   () => pagination.value.rowsPerPage,
   async () => {
@@ -149,13 +165,26 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-card flat>
+  <q-card flat class="q-pa-sm">
     <div class="row q-col-gutter-sm">
       <div class="col-12">
-        <div class="row q-gutter-x-sm">
+        <div class="row">
+          <div class="q-px-sm">
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              dense
+              color="add"
+              icon="mdi-account-arrow-right"
+              @click="onSendOrder"
+              ><q-tooltip>ส่งไปออกคำสั่ง</q-tooltip></q-btn
+            >
+          </div>
+
           <q-space />
           <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
+            class="col-xs-12 col-sm-3 col-md-2 q-mr-sm"
             standout
             dense
             v-model="filterKeyword"
@@ -296,4 +325,12 @@ onMounted(async () => {
       </div>
     </div>
   </q-card>
+
+  <DialogOrder
+    v-model:modal="modalOrder"
+    :close-modal="closeModal"
+    v-model:rows="rowsOrder"
+    v-model:filter-keyword="filterKeywordOrder"
+    :get-data="getData"
+  />
 </template>