ปรับ table

2023-10-20 10:31:07 +07:00 · 2023-10-20 10:31:07 +07:00 · 9e3fb8bff7
commit 9e3fb8bff7
parent dd43268931
10 changed files with 319 additions and 285 deletions
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/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" />
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/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>
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/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;
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/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();
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/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
-          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>
+        <TableComplaint :filterTable="filterTable" />
      </div>
    </q-card>
  </div>
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/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>
--- a/src/modules/11_discipline/components/4_Order/MainPage.vue
+++ b/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
-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",
-]);
+// filter ข้อมูลใน table
 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
-          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>
+        <tableOrder :filterTable="filterTable" />
      </div>
    </q-card>
  </div>
--- a/src/modules/11_discipline/components/4_Order/TableOrder.vue
+++ b/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>
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/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,
+
+
    }
 })
--- a/src/modules/11_discipline/store/OrderStore.ts
+++ b/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
    }
 })