UI สอบสวนความผิดทางวินัย

src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue

@@ -1,9 +1,259 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useInvestigateDisStore } from "../../stroes/InvestigateDisStore";
+
+import { useRouter } from "vue-router";
+const dataInvestigateDis = useInvestigateDisStore();
+const { fecthList } = dataInvestigateDis;
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  date2Thai,
+  success,
+  typeCategoryExam,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const filter = ref<string>(""); //search data table
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const visibleColumns = ref<String[]>([
+  "no",
+  "subject",
+  "interrogated",
+  "fault",
+  "penaltyLevel",
+  "caseFault",
+  "dateInvestigate",
+  "status",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "center",
+    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: "interrogated",
+    align: "left",
+    label: "ผู้ถูกสืบสวน",
+    sortable: true,
+    field: "interrogated",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fault",
+    align: "left",
+    label: "ลักษณะความผิด",
+    sortable: true,
+    field: "fault",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "penaltyLevel",
+    align: "left",
+    label: "ระดับโทษความผิด",
+    sortable: true,
+    field: "penaltyLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "caseFault",
+    align: "left",
+    label: "กรณีความผิด",
+    sortable: true,
+    field: "caseFault",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateInvestigate",
+    align: "left",
+    label: "วันที่สอบสวน",
+    sortable: true,
+    field: "dateInvestigate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+onMounted(async () => {
+  await fecthInvestigateDis();
+  await hideLoader();
+});
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      await deleteData(id);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+function fecthInvestigateDis() {
+  const data = [
+    {
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "ศิรินภา คงน้อยี่",
+      fault: "0",
+      penaltyLevel: "0",
+      caseFault: "test",
+      dateInvestigate: "test",
+      status: "0",
+      active: "1",
+    },
+    {
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "นายนครชัย วันดี",
+      fault: "1",
+      penaltyLevel: "0",
+      caseFault: "test",
+      dateInvestigate: "test",
+      status: "1",
+      active: "1",
+    },
+    {
+      subject: "กระทำทุจริตเงินกองทุน",
+      interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
+      fault: "1",
+      penaltyLevel: "0",
+      caseFault: "test",
+      dateInvestigate: "test",
+      status: "0",
+      active: "1",
+    },
+    {
+      subject: "พูดจาไม่สุภาพ",
+      interrogated: "นายปิยรมย์ ศิริธาราฟ",
+      fault: "2",
+      penaltyLevel: "0",
+      caseFault: "test",
+      dateInvestigate: "test",
+      status: "0",
+      active: "1",
+    },
+  ];
+  fecthList(data); // ส่งข้อมูลไป stores
+}
+
+const clickAdd = () => {
+  router.push(`/discipline/InvestigateDisciplinary/add`);
+};
+
+const deleteData = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.periodExamId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+</script>
 
 <template>
-  <div>
-    <h1>สอบสวนความผิดวินัย</h1>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการการสอบสวนความผิดทางวินัย
   </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="dataInvestigateDis.rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :add="clickAdd"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="subject" :props="props">
+              {{ props.row.subject }}
+            </q-td>
+            <q-td key="interrogated" :props="props">
+              {{ props.row.interrogated }}
+            </q-td>
+            <q-td key="fault" :props="props">
+              {{ props.row.fault }}
+            </q-td>
+            <q-td key="penaltyLevel" :props="props">
+              {{ props.row.penaltyLevel }}
+            </q-td>
+            <q-td key="caseFault" :props="props">
+              {{ props.row.caseFault }}
+            </q-td>
+            <q-td key="dateInvestigate" :props="props">
+              {{ props.row.dateInvestigate }}
+            </q-td>
+            <q-td key="status" :props="props">
+              {{ props.row.status }}
+            </q-td>
+            <q-td auto-width style="width: 10rem">
+              <q-btn color="primary" class="q-px-xl q-py-xs">ยื่นยันผล</q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
 </template>
 
-<style scoped></style>
+<style></style>