ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง step

src/modules/13_salary/views/commandSalary.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import router from "@/router";
-import { useQuasar } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -18,14 +18,121 @@ import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrderPlacementDataStore } from "@/modules/10_order/store";
 
+const rows = ref<any>([])
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const DataStore = useOrderPlacementDataStore();
 const stroe = useOrderStore();
 const { showLoader, hideLoader, messageError } = mixin;
+/** pagination */
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 const commandCodes = ref<string[]>(["C-PM-33", "C-PM-34", "C-PM-35"]);
 
+/** ข้อมูลที่เเสดงใน คอลัม */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderName",
+    align: "left",
+    label: "คำสั่ง",
+    sortable: true,
+    field: "orderName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "orderNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "orderNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderTypeName",
+    align: "left",
+    label: "ประเภท",
+    sortable: false,
+    field: "orderTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderDate",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "orderDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderByOrganization",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "orderByOrganization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "signatoryBy",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: true,
+    field: "signatoryBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "orderStatusName",
+    align: "center",
+    label: "สถานะคำสั่ง",
+    sortable: true,
+    field: "orderStatusName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+/** หัวตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "orderName",
+  "orderNo",
+  "orderTypeName",
+  "orderDate",
+  "orderByOrganization",
+  "signatoryBy",
+  "orderStatusName",
+]);
+
 onMounted(async () => {
   await fiscalYearFilter();
   await OrderTypeFilter();
@@ -57,7 +164,7 @@ async function fetchOrderlist() {
 
 // สร้างคำสั่งใหม่
 const clickAdd = () => {
-  router.push({ name: "disciplineOrderAdd" });
+  router.push(`/salary/command/add`);
 };
 
 // รายการข้อมูลปีงบประมาณ
@@ -185,6 +292,25 @@ function filterSelector(val: any, update: Function, refData: string) {
       break;
   }
 }
+
+function redirectToPage(id:string,status:string){
+  let step = 1;
+  switch (status) {
+    case "จัดทำร่างคำสั่ง":
+      step = 1;
+      break;
+    case "บัญชีแนบท้าย":
+      step = 2;
+      break;
+    case "เลือกผู้ได้รับสำเนาคำสั่ง":
+      step = 3;
+      break;
+    default:
+      step = 4;
+      break;
+  }
+  router.push(`/salary/command/detail/${id}?step=${step}`);
+}
 </script>
 
 <template>
@@ -260,7 +386,7 @@ function filterSelector(val: any, update: Function, refData: string) {
           </q-input>
 
           <q-select
-            v-model="stroe.visibleColumns"
+            v-model="visibleColumns"
             multiple
             outlined
             dense
@@ -268,7 +394,7 @@ function filterSelector(val: any, update: Function, refData: string) {
             :display-value="$q.lang.table.columns"
             emit-value
             map-options
-            :options="stroe.columns"
+            :options="columns"
             option-value="name"
             options-cover
             style="min-width: 150px"
@@ -346,7 +472,47 @@ function filterSelector(val: any, update: Function, refData: string) {
           </q-card>
         </div>
         <div class="col-12">
-          <TableOrder :filterTable="filterKeyword" />
+          <d-table
+            for="table"
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="subject"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            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-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  @click="
+                    redirectToPage(props.row.id, props.row.status)
+                  "
+                >
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
         </div>
       </div>
     </q-card>