แก้ไข merg ออกคำสั่ง

src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row q-col-gutter-md">
-        <div class="row col-12 q-col-gutter-sm">
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="row q-pa-md">
+        <div class="col-xs-12 col-sm-3 col-md-2">
           <q-select
-            class="col-xs-10 col-sm-3 col-md-2"
             v-model="fiscalyear"
             label="ปีงบประมาณ"
             dense
@@ -42,7 +41,6 @@
         </div>
         <div class="col-xs-12 col-sm-3 col-md-2">
           <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
             standout
             dense
             v-model="filterKeyword"
@@ -50,6 +48,7 @@
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            class="q-ml-sm"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -61,8 +60,9 @@
               />
             </template>
           </q-input>
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
           <q-select
-            class="col-xs-12 col-sm-3 col-md-2"
             v-model="visibleColumns"
             multiple
             outlined
@@ -75,13 +75,15 @@
             option-value="name"
             options-cover
             style="min-width: 150px"
+            class="gt-xs q-ml-sm"
           />
         </div>
-        <div class="col-12">
-          <q-card bordered class="col-12 filter-card q-pa-sm">
-            <div class="row col-12 q-col-gutter-sm">
+      </div>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-card bordered class="col-12 filter-card">
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
               <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
                 v-model="OrderType"
                 label="ประเภท"
                 dense
@@ -98,8 +100,9 @@
                 :hide-dropdown-icon="false"
                 @update:model-value="searchFilterTable"
               />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
               <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
                 v-model="OrderStatus"
                 label="สถานะ"
                 dense
@@ -117,118 +120,117 @@
                 @update:model-value="searchFilterTable"
               />
             </div>
-          </q-card>
-        </div>
-        <div class="col-12">
-          <q-table
-            ref="table"
-            :columns="columns"
-            :rows="UpdataData"
-            :filter="filterKeyword"
-            row-key="Order"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
-            v-bind="attrs"
-            :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  key="Order"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
-                  {{ props.row.Order }}
-                </q-td>
-                <q-td
-                  key="OrderNum"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
-                  {{ props.row.OrderNum }}
-                </q-td>
-                <q-td
-                  key="OrderDate"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
-                  {{ props.row.OrderDate }}
-                </q-td>
-                <q-td
-                  key="OrderBy"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
-                  {{ props.row.OrderBy }}
-                </q-td>
-                <q-td
-                  key="Signer"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
-                  {{ props.row.Signer }}
-                </q-td>
-                <q-td
-                  key="OrderStatus"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
-                  <q-icon
-                    v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
-                    name="mdi-timer-sand"
-                    color="orange"
-                    class="text-h6"
-                  />
-                  <q-icon
-                    v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
-                    name="mdi-check"
-                    color="positive"
-                    class="text-h6"
-                  />
-                </q-td>
+          </div>
+        </q-card>
+      </div>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="UpdataData"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td
+                key="Order"
+                :props="props"
+                @click="redirectToPage(props.row.Order)"
+              >
+                {{ props.row.Order }}
+              </q-td>
+              <q-td
+                key="OrderNum"
+                :props="props"
+                @click="redirectToPage(props.row.Order)"
+              >
+                {{ props.row.OrderNum }}
+              </q-td>
+              <q-td
+                key="OrderDate"
+                :props="props"
+                @click="redirectToPage(props.row.Order)"
+              >
+                {{ props.row.OrderDate }}
+              </q-td>
+              <q-td
+                key="OrderBy"
+                :props="props"
+                @click="redirectToPage(props.row.Order)"
+              >
+                {{ props.row.OrderBy }}
+              </q-td>
+              <q-td
+                key="Signer"
+                :props="props"
+                @click="redirectToPage(props.row.Order)"
+              >
+                {{ props.row.Signer }}
+              </q-td>
+              <q-td
+                key="OrderStatus"
+                :props="props"
+                @click="redirectToPage(props.row.Order)"
+              >
+                <q-icon
+                  v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
+                  name="hourglass_top"
+                  color="orange"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </q-td>
 
-                <q-td auto-width>
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="red"
-                    @click="clickDelete(props.row.id)"
-                    icon="mdi-delete"
-                  >
-                    <q-tooltip>ลบข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-td>
-              </q-tr>
-            </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
-        </div>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.id)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
       </div>
     </q-card>
   </div>
@@ -250,7 +252,7 @@ const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
-  rowsPerPage: 5,
+  rowsPerPage: 10,
 });
 
 const mixin = useCounterMixin();
@@ -327,7 +329,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "OrderStatus",
-    align: "center",
+    align: "left",
     label: "สถานะคำสั่ง",
     sortable: false,
     field: "OrderStatus",
@@ -353,9 +355,9 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<FormOrderPlacementMainData[]>([
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@@ -364,9 +366,39 @@ const rows = ref<FormOrderPlacementMainData[]>([
 
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@@ -399,37 +431,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -701,7 +703,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #f1f1f1b0;
+  background-color: #ededed;
 }
 
 .toggle-expired-account {