btn right

src/modules/05_placement/components/PlacementTable.vue

@@ -66,7 +66,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "BMAOfficer",
-    align: "left",
+    align: "center",
     label: "ข้าราชการฯ กทม.",
     sortable: true,
     field: "BMAOfficer",
@@ -77,7 +77,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "Status",
-    align: "left",
+    align: "center",
     label: "สถานะการบรรจุ",
     sortable: true,
     field: "Status",
@@ -86,30 +86,63 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
 ]);
-const rows = [{
-  position: 1,
-  Name: "setthawut",
-  ExamOrder: 1,
-  Unit: "chamomind",
-  ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
-  BMAOfficer: true,
-  Status: "บรรจุเเล้ว",
-
-
-},
-{
-  position: 1,
-  Name: "setthawut",
-  ExamOrder: 1,
-  Unit: "chamomind",
-  ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
-  BMAOfficer: true,
-  Status: "บรรจุเเล้ว",
-
-
-},
+const rows = [
+  {
+    position: 1,
+    Name: "setthawut",
+    ExamOrder: 1,
+    Unit: "chamomind",
+    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "บรรจุเเล้ว",
+  },
+  {
+    position: 1,
+    Name: "setthawut",
+    ExamOrder: 1,
+    Unit: "chamomind",
+    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "ยังไม่บรรจุ",
+  },
+  {
+    position: 1,
+    Name: "setthawut",
+    ExamOrder: 1,
+    Unit: "chamomind",
+    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+  },
+  
+  {
+    position: 1,
+    Name: "setthawut",
+    ExamOrder: 1,
+    Unit: "chamomind",
+    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+  },
+  
+  {
+    position: 1,
+    Name: "setthawut",
+    ExamOrder: 1,
+    Unit: "chamomind",
+    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "เตรียมบรรจุ",
+  },{
+    position: 1,
+    Name: "setthawut",
+    ExamOrder: 1,
+    Unit: "chamomind",
+    ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
+    BMAOfficer: true,
+    Status: "บรรจุเเล้ว",
+  },
 
 ];
 const clickCancel = async () => {
@@ -117,31 +150,26 @@ const clickCancel = async () => {
 };
 </script>
 <template>
-  
-    <q-form ref="myForm">
+  <q-form ref="myForm">
     <Table
       :rows="rows"
       :columns="columns"
-
       v-model:editvisible="editvisible"
-
       :cancel="clickCancel"
-
       :history="true"
       :boss="true"
       :saveNoDraft="true"
     >
       <template #columns="props">
         <q-tr :props="props">
-     
-            <q-icon
-              class="q-mr-sm"
-              size="15px"
-              color="primary"
-              name="mdi-bookmark"
-              v-if="props.row.isDirector"
-            ></q-icon>
-        
+          <q-icon
+            class="q-mr-sm"
+            size="15px"
+            color="primary"
+            name="mdi-bookmark"
+            v-if="props.row.isDirector"
+          ></q-icon>
+
           <q-td
             v-for="col in props.cols"
             :key="col.name"
@@ -149,7 +177,6 @@ const clickCancel = async () => {
             @click="selectData(props.row)"
             class="cursor-pointer"
           >
-
             <div v-if="col.name == 'isActive'" class="table_ellipsis">
               <div v-if="!editvisible">
                 <q-icon
@@ -178,22 +205,46 @@ const clickCancel = async () => {
             <div v-else class="table_ellipsis">
               {{ col.value }}
             </div>
-
           </q-td>
           <q-td auto-width>
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="clickHistory(props.row)"
-            />
+            <div v-if="props.row.Status === 'บรรจุเเล้ว'">
+                <div></div>
+            </div>
+            <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
+              <q-btn
+                color="blue"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-account-alert"
+                
+              />
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-account-remove"
+                
+              />
+            </div>
+            <div v-else align="right">
+
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-account-remove"
+                
+              />
+            </div>
           </q-td>
         </q-tr>
       </template>
     </Table>
   </q-form>
-
 </template>

src/modules/05_placement/components/PlacementTableView.vue

@@ -188,7 +188,7 @@
           
         </template>
         <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
-        <template #body="props">
+        <template #body="props" >
           <slot v-bind="props" name="columns"></slot>
         </template>
       </q-table>

src/modules/05_placement/interface/request/placement.ts

@@ -6,6 +6,7 @@ interface TableName {
   ReportingDate: string; //วันที่รายงานตัว
   BMAOfficer: boolean;
   Status: string;
+  checkList: any;
 
 }