ปรับ table

src/modules/09_leave/components/1_Work/TableList.vue

@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 //importComponents
-import DialogDetail from "./DialogDetail.vue";
+import DialogDetail from "@/modules/09_leave/components/1_Work/DialogDetail.vue";
 
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
@@ -102,7 +102,6 @@ function colseDeyail() {
   modal.value = false;
 }
 
-
 //pagination
 const pagination = ref({
   descending: true,
@@ -284,18 +283,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
         </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> -->
   </d-table>
 
   <DialogDetail :modal="modal" :detail="dataDetail" :colse="colseDeyail" />

src/modules/09_leave/components/2_Leave/TableList.vue

@@ -215,18 +215,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
         </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> -->
     <template v-slot:loading>
       <q-inner-loading showing color="primary" />
     </template>

src/modules/09_leave/views/LeaveListMain.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 // importStroe
-import { useLeavelistDataStore } from "../stores/LeaveStore";
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 // importComponets
-import TableList from "../components/2_Leave/TableList.vue";
+import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
 
 const leaveStore = useLeavelistDataStore();
 const { fetchList, clearFilter } = leaveStore;

src/modules/09_leave/views/WorkingMain.vue

@@ -2,9 +2,9 @@
 import { ref, onMounted } from "vue";
 //import Stores
 import { useCounterMixin } from "@/stores/mixin";
-import { useWorklistDataStore } from "../stores/WorkStore";
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 //import Components
-import TableList from "../components/1_Work/TableList.vue";
+import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
 // use Store
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import type { QTableProps } from "quasar";
 
+// import type
 import type { DataList } from "@/modules/11_discipline/interface/response/complaint";
 // importStroe
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+// impoet Components
+import TableComplaint from "@/modules/11_discipline/components/1_Complaint/TableComplaint.vue";
 
 const router = useRouter();
 
@@ -14,90 +16,7 @@ const { fetchComplainst } = complainstStore; // function จาก stores
 
 //ข้อมูล Table
 const filterTable = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
+
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "subject",
-    align: "left",
-    label: "เรื่อง",
-    sortable: true,
-    field: "subject",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "complainant",
-    align: "left",
-    label: "ผู้ถูกร้องเรียน",
-    sortable: true,
-    field: "complainant",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "offenseDescription",
-    align: "left",
-    label: "ลักษณะความผิด",
-    sortable: true,
-    field: "offenseDescription",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "creationDate",
-    align: "left",
-    label: "วันที่สร้างเรื่องร้องเรียน",
-    sortable: true,
-    field: "creationDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "considerationLevel",
-    align: "left",
-    label: "ระดับการพิจารณา",
-    sortable: true,
-    field: "considerationLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "considerationDeadlineDate",
-    align: "left",
-    label: "วันที่กำหนดพิจารณา",
-    sortable: true,
-    field: "considerationDeadlineDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "subject",
-  "detail",
-  "complainant",
-  "offenseDescription",
-  "creationDate",
-  "considerationLevel",
-  "considerationDeadlineDate",
-]);
 onMounted(async () => {
   await fetchListComplaints();
 });
@@ -139,18 +58,6 @@ async function fetchListComplaints() {
 function redirectToPageadd() {
   router.push(`/discipline/complaints/add`);
 }
-
-//pagination
-const pagination = ref({
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 </script>
 
 <template>
@@ -184,7 +91,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
             <q-select
               id="visibleColumns"
               for="visibleColumns"
-              v-model="visibleColumns"
+              v-model="complainstStore.visibleColumns"
               multiple
               outlined
               dense
@@ -192,53 +99,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
               :display-value="$q.lang.table.columns"
               emit-value
               map-options
-              :options="columns"
+              :options="complainstStore.columns"
               option-value="name"
               options-cover
             />
           </div>
         </q-toolbar>
-        <d-table
+        <TableComplaint :filterTable="filterTable" />
-          id="table"
-          ref="table"
-          :columns="columns"
-          :rows="complainstStore.rows"
-          :filter="filterTable"
-          row-key="subject"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :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-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-                <div v-if="col.name == 'detail'">
-                  <div class="table_ellipsis">
-                    {{ props.row.detail }}
-                  </div>
-                </div>
-                <div v-else>
-                  {{ col.value }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
       </div>
     </q-card>
   </div>

src/modules/11_discipline/components/1_Complaint/TableComplaint.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// import type
+import type { QTableProps } from "quasar";
+// importStroe
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+
+const complainstStore = useComplainstDataStore();
+
+const props = defineProps({
+  filterTable: {
+    type: String,
+    default: "",
+  },
+});
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "subject",
+    align: "left",
+    label: "เรื่อง",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "complainant",
+    align: "left",
+    label: "ผู้ถูกร้องเรียน",
+    sortable: true,
+    field: "complainant",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "offenseDescription",
+    align: "left",
+    label: "ลักษณะความผิด",
+    sortable: true,
+    field: "offenseDescription",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "creationDate",
+    align: "left",
+    label: "วันที่สร้างเรื่องร้องเรียน",
+    sortable: true,
+    field: "creationDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "considerationLevel",
+    align: "left",
+    label: "ระดับการพิจารณา",
+    sortable: true,
+    field: "considerationLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "considerationDeadlineDate",
+    align: "left",
+    label: "วันที่กำหนดพิจารณา",
+    sortable: true,
+    field: "considerationDeadlineDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "subject",
+  "detail",
+  "complainant",
+  "offenseDescription",
+  "creationDate",
+  "considerationLevel",
+  "considerationDeadlineDate",
+]);
+
+onMounted(() => {
+  complainstStore.columns = columns.value;
+  complainstStore.visibleColumns = visibleColumns.value;
+});
+
+//pagination
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+
+<template>
+  <d-table
+    id="table"
+    ref="table"
+    :columns="columns"
+    :rows="complainstStore.rows"
+    :filter="props.filterTable"
+    row-key="subject"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="complainstStore.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" style="height: 40px">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-if="col.name == 'detail'">
+            <div class="table_ellipsis">
+              {{ props.row.detail }}
+            </div>
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+</template>
+
+<style scoped></style>

src/modules/11_discipline/components/4_Order/MainPage.vue

@@ -1,81 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import type { QTableProps } from "quasar";
 import type { DataList } from "../../interface/response/order";
 
 // importStroe
 import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
+// importComponents
+import tableOrder from "@/modules/11_discipline/components/4_Order/TableOrder.vue";
 
 const router = useRouter();
 const OrderStore = useOrderStore();
 const { fetchOrder } = OrderStore; // function จาก stores
 
-// ข้อมูล table
+// filter ข้อมูลใน table
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "subject",
-    align: "left",
-    label: "เรื่อง",
-    sortable: true,
-    field: "subject",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "ordernumber",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "ordernumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "dateOrder",
-    align: "left",
-    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
-    sortable: true,
-    field: "dateOrder",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "orderby",
-    align: "left",
-    label: "คำสั่งโดย",
-    sortable: true,
-    field: "orderby",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "signer",
-    align: "left",
-    label: "ผู้ลงนาม",
-    sortable: true,
-    field: "signer",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "statusorder",
-    align: "left",
-    label: "สถานะของคำสั่ง",
-    sortable: true,
-    field: "statusorder",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "subject",
-  "ordernumber",
-  "dateOrder",
-  "orderby",
-  "signer",
-  "statusorder",
-]);
 const filterTable = ref<string>("");
 
 onMounted(async () => {
@@ -117,18 +54,6 @@ async function fetchListOrder() {
 function redirectToPageadd() {
   router.push(`/discipline-order/add`);
 }
-
-//pagination
-const pagination = ref({
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 </script>
 
 <template>
@@ -162,7 +87,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           <div class="col-2">
             <q-select
               for="visibleColumns"
-              v-model="visibleColumns"
+              v-model="OrderStore.visibleColumns"
               multiple
               outlined
               dense
@@ -170,45 +95,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
               :display-value="$q.lang.table.columns"
               emit-value
               map-options
-              :options="columns"
+              :options="OrderStore.columns"
               option-value="name"
               options-cover
             />
           </div>
         </q-toolbar>
-        <d-table
+        <tableOrder :filterTable="filterTable" />
-          for="table"
-          ref="table"
-          :columns="columns"
-          :rows="OrderStore.rows"
-          :filter="filterTable"
-          row-key="subject"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :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-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div>
-                  {{ col.value }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
       </div>
     </q-card>
   </div>

src/modules/11_discipline/components/4_Order/TableOrder.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// importType
+import type { QTableProps } from "quasar";
+// importStroe
+import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
+
+const OrderStore = useOrderStore();
+
+const props = defineProps({
+  filterTable: {
+    type: String,
+    default: "",
+  },
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "subject",
+    align: "left",
+    label: "เรื่อง",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "ordernumber",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "ordernumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "dateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderby",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "orderby",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "signer",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: true,
+    field: "signer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusorder",
+    align: "left",
+    label: "สถานะของคำสั่ง",
+    sortable: true,
+    field: "statusorder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "subject",
+  "ordernumber",
+  "dateOrder",
+  "orderby",
+  "signer",
+  "statusorder",
+]);
+
+onMounted(() => {
+  OrderStore.columns = columns.value;
+  OrderStore.visibleColumns = visibleColumns.value;
+});
+
+//pagination
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+
+<template>
+  <d-table
+    for="table"
+    ref="table"
+    :columns="columns"
+    :rows="OrderStore.rows"
+    :filter="props.filterTable"
+    row-key="subject"
+    flat
+    bordered
+    dense
+    class="custom-header-table"
+    :visible-columns="OrderStore.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" style="height: 40px">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+</template>
+
+<style scoped></style>

src/modules/11_discipline/store/ComplaintsStore.ts

@@ -3,10 +3,13 @@ import { ref } from "vue";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import type { DataList } from "@/modules/11_discipline/interface/response/complaint"
+import type { QTableProps } from "quasar";
 
 
 export const useComplainstDataStore = defineStore("DisciplineComplainst", () => {
     const rows = ref<DataList[]>([])
+    const visibleColumns = ref<string[]>([]);
+    const columns = ref<QTableProps["columns"]>([]);
     function fetchComplainst(data: DataList[]) {
         let datalist = data.map((e: DataList) => ({
             subject: e.subject,
@@ -19,6 +22,7 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         }))
         rows.value = datalist
     }
+    // filter options
     const complainantoptionsMain = ref<DataOption[]>()
     const complainantoptions = ref<DataOption[]>()
     const agencytoptionsMain = ref<DataOption[]>()
@@ -51,14 +55,19 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
 
         })
     }
+
     return {
         rows,
-        optionListName,
+        visibleColumns,
+        columns,
         fetchComplainst,
         selectComplainantTpye,
         filterSelector,
         fetchOptioin,
         complainantoptions,
         agencytoptions,
+        optionListName,
+
+
     }
 })

src/modules/11_discipline/store/OrderStore.ts

@@ -1,10 +1,12 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-
+import type { QTableProps } from "quasar";
 import type { DataList } from "@/modules/11_discipline/interface/response/order"
 
 export const useOrderStore = defineStore("DisciplineOrder", () => {
     const rows = ref<DataList[]>([])
+    const columns = ref<QTableProps["columns"]>([]);
+    const visibleColumns = ref<string[]>([]);
     async function fetchOrder(data: DataList[]) {
         let datalist = data.map((e: DataList) => ({
             subject: e.subject,
@@ -21,6 +23,8 @@ export const useOrderStore = defineStore("DisciplineOrder", () => {
 
     return {
         rows,
+        columns,
+        visibleColumns,
         fetchOrder
     }
 })