จัดโค้ด รายการการสอบสวนความผิดทางวินัย

2023-11-10 15:32:11 +07:00 · 2023-11-10 15:32:11 +07:00 · c216c29abe
commit c216c29abe
parent f4ee2b89fc
7 changed files with 167 additions and 132 deletions
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
@ -1,11 +1,10 @@
 <script setup lang="ts">
-import Form from "@/modules/11_discipline/components/3_investigateDisciplinary/Form.vue";
+import Form from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue";
 import { useRoute, useRouter } from "vue-router";
 const router = useRouter();

-// บันทึกข้อมูล
+/** บันทึกข้อมูลเเละ route กลับหน้าหลัก */
 const onSubmit = async () => {
-  // post
  console.log("add");
  router.push(`/discipline/disciplinary`);
 };
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
@ -14,7 +14,7 @@ const selected = ref<directorType[]>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;

-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+/** ค้นหาคอลัม */
 const visibleColumns2 = ref<string[]>([
  "no",
  "nameDirector",
@ -24,6 +24,8 @@ const visibleColumns2 = ref<string[]>([
  "telephone",
  "role"
 ]);
+
+/**ข้อมูลหัว ตาราง*/
 const columns2 = ref<QTableProps["columns"]>([
  {
    name: "no",
@ -104,6 +106,7 @@ const columns2 = ref<QTableProps["columns"]>([
  },
 ]);

+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
  Modal: Boolean,
  clickClose: Function,
@ -119,8 +122,8 @@ const checkSelected = computed(() => {
  console.log(checkSelected.value);
 });

-//popup ยืนยันส่งัว
-const saveDirector = () => {
+/** popup ยืนยันส่งัว */
+function saveDirector(){
  dialogConfirm(
    $q,
    () => DirectorSave(),
@ -128,17 +131,22 @@ const saveDirector = () => {
    "ต้องการยืนยันเพิ่มรายชื่อกรรมการ?"
  );
 };
-//ส่งไปออกคำสั่ง
-const DirectorSave = async () => {};
+
+/** ส่งไปออกคำสั่ง */
+async function DirectorSave(){};

 const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
-const updateInput = (value: any) => {
+
+function updateInput(value: any){
  emit("update:filterKeyword2", value);
 };
-//รีเซ็ตค่าในช่องค้นหา
-const Reset = () => {
+
+/**รีเซ็ตค่าในช่องค้นหา */
+function Reset(){
  emit("update:filterKeyword2", "");
 };
+
+/** เช็คค่า props.Modal === true */
 watchEffect(() => {
  if (props.Modal === true) {
    selected.value = [];
@ -172,6 +180,7 @@ watchEffect(() => {
            />
          </template>
        </q-input>
+
        <d-table
          :columns="columns2"
          :rows="rows2"
@ -181,15 +190,6 @@ watchEffect(() => {
          selection="multiple"
          v-model:selected="selected"
        >
-          <template v-slot:header-selection="scope">
-            <!-- <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            /> -->
-          </template>
-
          <template v-slot:body="props">
            <q-tr :props="props" class="cursor-pointer">
              <q-td>
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue
@ -5,10 +5,12 @@ import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
+
 const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
 });

+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
  count: Number,
  pass: Number,
@ -46,10 +48,12 @@ const emit = defineEmits([
  "update:inputvisible",
  "update:editvisible",
 ]);
-const updateInput = (value: string | number | null) => {
+
+function updateInput(value: string | number | null){
  emit("update:inputfilter", value);
 };
-const updateVisible = (value: []) => {
+
+function updateVisible(value: []){
  emit("update:inputvisible", value);
 };

--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@ -1,19 +1,17 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
-import Form from "@/modules/11_discipline/components/3_investigateDisciplinary/Form.vue";
+import Form from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue";
 import type { FormData } from "@/modules/11_discipline/interface/request/disciplinary";
 import { useRouter, useRoute } from "vue-router";

 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
-onMounted(() => {
-  fetchData();
-});

-// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+
+/** ข้อมูล v-model ของฟอร์ม */
 const data = reactive<FormData>({
-  Complaint: "",
+  complaint: "",
  dateInvestigate: null,
  dateAllegation: null,
  dateEvident: null,
@ -33,8 +31,10 @@ const data = reactive<FormData>({
  filesWitnesses: null,
  filesEtc: null,
 });
+
+/** จำลองข้อมูลจาก api */
 const fetchData = async () => {
-  data.Complaint = "test1"
+  data.complaint = "test1"
  data.dateInvestigate = new Date("2023-11-08T14:58:00")
  data.dateAllegation = new Date("2023-11-08T14:58:00")
  data.dateEvident = new Date("2023-11-08T14:58:00")
@ -55,12 +55,19 @@ const fetchData = async () => {
  data.filesEtc = null
 };

-// แก้ไขข้อมูล
-const onSubmit = async () => {
-  // put
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
+const onSubmit = async (id:string) => {
  console.log("edit");
  router.push(`/discipline/disciplinary`);
 };
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(() => {
+  fetchData();
+});
 </script>
 <template>
  <div class="col-xs-12 col-sm-12 col-md-11">
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@ -3,51 +3,18 @@ import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+
 import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
-import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+
 import type {
  FormData,
  disciplinaryRef,
 } from "@/modules/11_discipline/interface/request/disciplinary";
+
 const investigateDis = useInvestigateDisStore();
 const { fecthDirector } = investigateDis;
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
-onMounted(async () => {
-  await fecthDirector([
-    {
-      nameDirector: "นาง เกสินี เจียรสุมัย",
-      position: "ครู",
-      duty: "ประธาน",
-      email: "e@email.com",
-      telephone: "0800808080",
-      role: "4",
-    },
-    {
-      nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
-      position: "ทดลองงาน",
-      duty: "เลขานุการ",
-      email: "g@gmail.com",
-      telephone: "0614565145",
-      role: "6",
-    },
-  ]);
-  await hideLoader();
-});
-
-const popup = () => {
-  modal.value = true;
-  filterKeyword2.value = "";
-};

 const mixin = useCounterMixin();
 const { date2Thai, hideLoader, dialogConfirm } = mixin;
@ -64,6 +31,9 @@ const dateInvestigate = ref<Date>(new Date());
 const dateAllegation = ref<Date>(new Date());
 const dateEvident = ref<Date>(new Date());
 const filterKeyword2 = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+
+/** ตัวแปร ref สำหรับแสดง validate */
 const complaintRef = ref<Object | null>(null);
 const dateInvestigateRef = ref<Object | null>(null);
 const dateAllegationRef = ref<Object | null>(null);
@ -85,11 +55,23 @@ const evidenceRef = ref<Object | null>(null);
 const recordAccuserRef = ref<Object | null>(null);
 const complaintsOptions = ref<any>([]);

-const fileDocDataUpload = ref<File[]>([]);
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+
 const initialPagination = ref<any>({
  rowsPerPage: 0,
 });

+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
  complaint: "",
  dateInvestigate: null,
@ -112,6 +94,7 @@ const formData = reactive<FormData>({
  filesEtc: null,
 });

+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: disciplinaryRef = {
  complaint: complaintRef,
  dateInvestigate: dateInvestigateRef,
@ -134,6 +117,13 @@ const objectdisciplinary: disciplinaryRef = {
  filesEtc: filesEtcRef,
 };

+/** เปิด dialog */
+function popup(){
+  modal.value = true;
+  filterKeyword2.value = "";
+};
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function validateForm() {
  const hasError = [];
  for (const key in objectdisciplinary) {
@ -152,24 +142,26 @@ function validateForm() {
    console.log(hasError);
  }
 }
-
+/**  search data table*/
+const filter = ref<string>("");
 const routeName = router.currentRoute.value.name;

-const clickClose = () => {
+/** ฟังชั่นปิด dialog */
+function clickClose() {
  modal.value = false;
-};
+}

-// เรียกข้อมูลของรอบการเสนอขอ
-
-const filter = ref<string>(""); //search data table
-
-const fileUploadDoc = async (files: any) => {
+async function fileUploadDoc(files: any) {
  files.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
-};
+}

-// คลิกบันทึก
+/**
+ * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
+ * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
+ * หากยกเลิกจะกลับไปหน้าฟอร์ม
+ */
 function onSubmit() {
  dialogConfirm(
    $q,
@ -182,13 +174,16 @@ function onSubmit() {
  );
 }

-const deleteData = async (id: string) => {
+/** ฟังชั่น delect */
+async function deleteData(id: string) {
  console.log("delete");
-};
+}

-const clickBack = () => {
-  router.push(`/discipline/disciplinary`);
-};
+/**
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
 watch(props.data, async () => {
  formData.complaint = props.data.complaint;
  formData.dateInvestigate = props.data.dateInvestigate;
@ -210,6 +205,31 @@ watch(props.data, async () => {
  formData.filesWitnesses = props.data.filesWitnesses;
  formData.filesEtc = props.data.filesEtc;
 });
+
+/**เมื่อเริ่มโหลดหน้า 
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(async () => {
+  await fecthDirector([
+    {
+      nameDirector: "นาง เกสินี เจียรสุมัย",
+      position: "ครู",
+      duty: "ประธาน",
+      email: "e@email.com",
+      telephone: "0800808080",
+      role: "4",
+    },
+    {
+      nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
+      position: "ทดลองงาน",
+      duty: "เลขานุการ",
+      email: "g@gmail.com",
+      telephone: "0614565145",
+      role: "6",
+    },
+  ]);
+  await hideLoader();
+});
 </script>
 <template>
  <div class="col-xs-12 col-sm-12 col-md-11">
@ -375,7 +395,7 @@ watch(props.data, async () => {
                  </q-input>
                </template>
              </datepicker>
-              
+
              <div class="row col-12">
                <q-card
                  bordered
@ -465,6 +485,7 @@ watch(props.data, async () => {
                :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                lazy-rules
              />
+
              <q-input
                class="col-xs-12 col-sm-6"
                dense
@ -477,6 +498,7 @@ watch(props.data, async () => {
                :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
                lazy-rules
              />
+
              <q-select
                dense
                class="col-xs-12 col-sm-3"
@ -492,6 +514,7 @@ watch(props.data, async () => {
                :options="investigateDis.optionsTypefault"
                label="ลักษณะความผิด"
              />
+
              <q-select
                dense
                class="col-xs-12 col-sm-3"
@ -507,6 +530,7 @@ watch(props.data, async () => {
                :options="investigateDis.optionsfaultLevel"
                label="ระดับโทษความผิด"
              />
+
              <q-input
                class="col-xs-12 col-sm-6"
                dense
@ -521,6 +545,7 @@ watch(props.data, async () => {
                ]"
                lazy-rules
              />
+
              <q-input
                class="col-12"
                dense
@ -533,6 +558,7 @@ watch(props.data, async () => {
                type="textarea"
                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
              />
+
              <q-input
                class="col-12"
                dense
@ -545,6 +571,7 @@ watch(props.data, async () => {
                type="textarea"
                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
              />
+
              <div class="row col-12">
                <q-card
                  bordered
@ -570,6 +597,7 @@ watch(props.data, async () => {
                      type="textarea"
                      :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
                    />
+
                    <q-file
                      class="col-12 q-mt-sm"
                      outlined
@ -615,6 +643,7 @@ watch(props.data, async () => {
                      type="textarea"
                      :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
                    />
+
                    <q-file
                      class="col-12 q-mt-sm"
                      outlined
@ -660,6 +689,7 @@ watch(props.data, async () => {
                      type="textarea"
                      :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
                    />
+
                    <q-file
                      class="col-12 q-mt-sm"
                      outlined
@ -692,6 +722,7 @@ watch(props.data, async () => {
                type="textarea"
                :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
              />
+
              <q-file
                class="col-12"
                outlined
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@ -1,23 +1,36 @@
 <script setup lang="ts">
 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 { useInvestigateDisStore } from "../../store/InvestigateDisStore";
-
 import { useRouter } from "vue-router";
-const dataInvestigateDis = useInvestigateDisStore();
-const { fecthList } = dataInvestigateDis;
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "../../store/InvestigateDisStore";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+
 const $q = useQuasar(); // show dialog
-const mixin = useCounterMixin();
 const router = useRouter();
-const { hideLoader } = mixin;
 const filter = ref<string>(""); //search data table
+const mixin = useCounterMixin();
+const dataInvestigateDis = useInvestigateDisStore();
+const { hideLoader } = mixin;
+const { fecthList } = dataInvestigateDis;
+
 const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
 });

+/**
+ * ไปหน้าแก้ไข
+ * @param id ไอดีเฉพาะ รายบุคคล
+ */
+function openEdit(id:string) {
+  console.log(id)
+  router.push(`/discipline/disciplinary/${id}`)
+}
+
+/**เมื่อเริ่มโหลดหน้า 
+ * ส่งข้อมูลจำลองไปยัง store
+ */
 onMounted(async () => {
  fecthList([
    {
@ -67,11 +80,6 @@ onMounted(async () => {
  ]);
  await hideLoader();
 });
-
-function openEdit(id:string) {
-  console.log(id)
-  router.push(`/discipline/disciplinary/${id}`)
-}
 </script>

 <template>
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@ -2,6 +2,8 @@
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";

+const table = ref<any>(null);
+const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const pagination = ref({
@ -10,21 +12,12 @@ const pagination = ref({
  page: 1,
  rowsPerPage: 10,
 });
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});

+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
  count: Number,
  pass: Number,
  notpass: Number,
-
  inputfilter: String,
  name: String,
  icon: String,
@ -49,23 +42,29 @@ const emit = defineEmits([
  "update:inputvisible",
  "update:editvisible",
 ]);
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};

-const resetFilter = () => {
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+function updateInput(value: string | number | null) {
+  emit("update:inputfilter", value);
+}
+
+function updateVisible(value: []) {
+  emit("update:inputvisible", value);
+}
+
+function resetFilter() {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  emit("update:inputfilter", "");
  filterRef.value.focus();
-};
+}
 </script>

 <template>
  <div class="q-pb-sm row q-col-gutter-sm">
-    <!--  -->
    <div class="q-gutter-sm" v-if="nornmalData == true">
      <q-btn
        to="/discipline/investigate-disciplinary/add"
@ -117,7 +116,6 @@ const resetFilter = () => {
      emit-value
      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
    >
-      <template> </template>
    </q-select>
  </div>
  <d-table
@ -141,18 +139,6 @@ const resetFilter = () => {
    <template #body="props">
      <slot v-bind="props" name="columns"></slot>
    </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>
 </template>