From 18e1e0d2bd4d475eb91079b4137935ff319294cf Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 21 Nov 2023 10:29:11 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=A7=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Complaint/EditPage.vue       |  37 ++
 .../2_InvestigateFacts/EditPage.vue           |  30 +-
 .../components/2_InvestigateFacts/Form.vue    | 353 +++++++++---------
 .../3_InvestigateDisciplinary/EditPage.vue    |  68 ++--
 4 files changed, 277 insertions(+), 211 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
index e62edf161..4429996c0 100644
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@@ -2,11 +2,16 @@
 import { onMounted, reactive, ref } from "vue";
 import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
 import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
 import type {
   FormData,
   ArrayPerson,
 } from "@/modules/11_discipline/interface/request/complaint";
+import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
+const mixin = useCounterMixin()
+const { dialogConfirm } = mixin
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
@@ -75,6 +80,35 @@ async function onSubmit() {
   router.push(`/discipline/complaints`);
 }
 
+/** ยืนยัน มีมูลส่งไปสืบสวน */
+function sentInvestigate(){
+  dialogConfirm($q,()=> confirmSentInvestigate(),'ยืนยันส่งไปสืบสวน','ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?')
+}
+
+/** ยืนยัน ยุติเรื่อง */
+function endInvestigate(){
+  dialogConfirm($q,()=> confirmEndInvestigate(),'ยืนยันยุติเรื่อง','ต้องการยืนยันยุติเรื่องใช่หรือไม่?')
+}
+
+/** ยืนยัน ยกเลิกการยุติเรื่อง */
+function cancelInvestigate(){
+  dialogConfirm($q,()=> confirmCancelInvestigate(),'ยืนยันยกเลิกการยุติเรื่อง','ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?')
+}
+
+/** ฟังชั่น มีมูลส่งไปสืบสวน*/
+function confirmSentInvestigate(){
+  console.log('sent')
+}
+
+/** ฟังชั่น ยุติเรื่อง*/
+function confirmEndInvestigate(){
+  console.log('sent')
+}
+
+/** ฟังชั่น ยกเลิกการยุติเรื่อง*/
+function confirmCancelInvestigate(){
+  console.log('sent')
+}
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(() => {
   console.log(data);
@@ -101,16 +135,19 @@ onMounted(() => {
           v-if="data.complaintStatus === 'NEW'"
           label="มีมูลส่งไปสืบสวน"
           color="public"
+          @click="sentInvestigate"
         />
         <q-btn
           v-if="data.complaintStatus === 'NEW'"
           label="ยุติเรื่อง"
           color="red-7"
+          @click="endInvestigate"
         />
         <q-btn
           v-if="data.complaintStatus === 'STOP'"
           label="ยกเลิกการยุติเรื่อง"
           color="red-7"
+          @click="cancelInvestigate"
         />
       </div>
     </div>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index 792bc8fb5..402afa4b0 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -3,7 +3,12 @@ import { onMounted, reactive, ref } from "vue";
 import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
 import type { FormData } from "@/modules/11_discipline/interface/request/investigate";
 import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin  } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { dialogConfirm } = mixin
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
@@ -45,7 +50,6 @@ const fetchData = async () => {
   data.daysExtend = null;
   data.statusResult = "ไม่ระบุ";
   data.causeText = "";
-  data.complaintStatus = "NEW";
 };
 
 /**
@@ -58,6 +62,16 @@ async function onSubmit(id:string){
   router.push(`/discipline/investigatefacts`);
 };
 
+/** ยืนยัน ส่งไปสอบสวน */
+function sentInvestigate(){
+  dialogConfirm($q,()=> confirmSentInvestigate(),'ยืนยันส่งไปสอบสวน','ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?')
+}
+
+/** ฟังชั่น ส่งไปสอบสวน*/
+function confirmSentInvestigate(){
+  console.log('sent')
+}
+
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
   fetchData();
@@ -81,19 +95,9 @@ onMounted(() => {
       <q-space />
       <div class="q-gutter-x-sm">
         <q-btn
-          v-if="data.complaintStatus === 'NEW'"
-          label="มีมูลส่งไปออกคำสั่ง"
+          label="ส่งไปสอบสวน"
           color="public"
-        />
-        <q-btn
-          v-if="data.complaintStatus === 'NEW'"
-          label="ยุติเรื่อง"
-          color="red-7"
-        />
-        <q-btn
-          v-if="data.complaintStatus === 'STOP'"
-          label="ยกเลิกการยุติเรื่อง"
-          color="red-7"
+          @click="sentInvestigate"
         />
       </div>
     </div>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index 8cd3a852b..ae1fb1ade 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -13,10 +13,10 @@ import { diffDates } from "@fullcalendar/core/internal";
 const $q = useQuasar();
 
 /**เรียกใช้ store */
-const investigateFactStore = useInvestigateFactStore(); 
-const mixin = useCounterMixin(); 
-const { filterFnOptionsType } = investigateFactStore; 
-const { date2Thai, dialogConfirm } = mixin; 
+const investigateFactStore = useInvestigateFactStore();
+const mixin = useCounterMixin();
+const { filterFnOptionsType } = investigateFactStore;
+const { date2Thai, dialogConfirm } = mixin;
 
 const complaintsOptions = ref<any>([]);
 const isUpdate = ref<boolean>(false);
@@ -65,7 +65,7 @@ const formData = reactive<FormData>({
   daysExtend: null,
   statusResult: "ยังไม่ระบุ",
   causeText: "",
-  complaintStatus:''
+  complaintStatus: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -132,7 +132,7 @@ function calEndDate(val: string) {
   formData.dateEnd = new Date(dateNew.setDate(date.getDate() + Number(val)));
 }
 
-/** 
+/**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
@@ -158,9 +158,9 @@ watch(props.data, async () => {
 });
 </script>
 <template>
-  <q-card flat bordered class="col-12 q-mt-sm">
+  <q-card flat bordered class="q-mt-sm">
     <form @submit.prevent="validateForm">
-      <div class="q-pa-md">
+      <div class="q-pa-md q-col-gutter-md">
         <div class="col-xs-12 row items-center q-col-gutter-md">
           <div class="col-6">
             <q-select
@@ -174,6 +174,7 @@ watch(props.data, async () => {
               label="เรื่องร้องเรียน"
               emit-value
               map-options
+              hide-bottom-space
               option-label="name"
               option-value="id"
               use-input
@@ -201,6 +202,7 @@ watch(props.data, async () => {
               :options="investigateFactStore.faultOp"
               label="ลักษณะความผิด"
               emit-value
+              hide-bottom-space
               map-options
               option-label="name"
               option-value="id"
@@ -222,6 +224,7 @@ watch(props.data, async () => {
             <q-select
               for="#investigation"
               outlined
+              hide-bottom-space
               dense
               ref="investigationRef"
               :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
@@ -245,57 +248,53 @@ watch(props.data, async () => {
               </template>
             </q-select>
           </div>
+        </div>
 
-          <div v-if="formData.investigation === '003'" class="col-12">
-            <q-input
-              for="#other"
-              class="full-width cursor-pointer"
-              outlined
-              ref="otherRef"
-              dense
-              borderless
-              v-model="formData.other"
-              hide-bottom-space
-              :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
-              type="textarea"
-              :rules="[
-                (val) =>
-                  formData.investigation === '003'
-                    ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                    : true,
-              ]"
-            />
-          </div>
+        <div v-if="formData.investigation === '003'" class="col-12">
+          <q-input
+            for="#other"
+            class="full-width cursor-pointer"
+            outlined
+            ref="otherRef"
+            dense
+            borderless
+            v-model="formData.other"
+            hide-bottom-space
+            :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+            type="textarea"
+            :rules="[
+              (val) =>
+                formData.investigation === '003'
+                  ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                  : true,
+            ]"
+          />
+        </div>
 
-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
+        <div class="row">
+          <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+            <div
+              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
             >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
-              >
-                วันที่สืบสวน
-                <q-checkbox
-                  v-if="data != null"
-                  for="#clickTime"
-                  size="md"
-                  v-model="formData.clickTime"
-                  label="ขยายเวลา"
-                  color="primary"
-                  dense
-                  class="text-weight-medium q-ml-sm"
-                  keep-color
-                />
-              </div>
+              วันที่สืบสวน
+              <q-checkbox
+                v-if="data != null"
+                for="#clickTime"
+                size="md"
+                v-model="formData.clickTime"
+                label="ขยายเวลา"
+                color="primary"
+                dense
+                class="text-weight-medium q-ml-sm"
+                keep-color
+              />
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="q-pa-sm">
+              <div class="q-col-gutter-sm row">
+                <div class="col-3" v-if="!formData.clickTime">
 
-              <div class="col-12"><q-separator /></div>
-
-              <div class="col-xs-12 col-sm-12 q-pa-sm row">
-                <div class="q-col-gutter-sm row">
                   <datepicker
-                    v-if="!formData.clickTime"
                     menu-class-name="modalfix"
                     :readonly="isUpdate"
                     v-model="formData.date"
@@ -339,9 +338,10 @@ watch(props.data, async () => {
                       </q-input>
                     </template>
                   </datepicker>
+                </div>
 
+                <div class="col-3" v-if="formData.clickTime">
                   <q-select
-                    v-if="formData.clickTime"
                     for="#daysExtend"
                     outlined
                     dense
@@ -371,7 +371,9 @@ watch(props.data, async () => {
                       </q-item>
                     </template>
                   </q-select>
-
+                </div>
+                
+                <div class="col-3">
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.dateEnd"
@@ -418,138 +420,139 @@ watch(props.data, async () => {
                   </datepicker>
                 </div>
               </div>
-            </q-card>
-          </div>
+            </div>
+          </q-card>
+        </div>
 
-          <div class="col-12">
-            <q-input
-              for="#complaintdetail"
-              class="full-width cursor-pointer"
-              outlined
-              ref="complaintdetailRef"
-              dense
-              lazy-rules
-              borderless
-              v-model="formData.complaintdetail"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
-              ]"
-              hide-bottom-space
-              :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
-              type="textarea"
-            />
-          </div>
+        <div class="col-12">
+          <q-input
+            for="#complaintdetail"
+            class="full-width cursor-pointer"
+            outlined
+            ref="complaintdetailRef"
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.complaintdetail"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
+            ]"
+            hide-bottom-space
+            :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
+            type="textarea"
+          />
+        </div>
 
-          <div class="col-12">
-            <q-file
-              for="#fileComplaint"
-              outlined
-              ref="fileComplaintRef"
-              dense
-              v-model="formData.fileComplaint"
-              label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
-              lazy-rules
-              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
-              hide-bottom-space
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-          </div>
+        <div class="col-12">
+          <q-file
+            for="#fileComplaint"
+            outlined
+            ref="fileComplaintRef"
+            dense
+            v-model="formData.fileComplaint"
+            label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
+            lazy-rules
+            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
 
-          <div class="col-12">
-            <q-input
-              for="#detail"
-              class="full-width cursor-pointer"
-              outlined
-              ref="detailRef"
-              dense
-              lazy-rules
-              borderless
-              v-model="formData.detail"
-              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-              hide-bottom-space
-              :label="`${'รายละเอียด'}`"
-              type="textarea"
-            />
-          </div>
+        <div class="col-12">
+          <q-input
+            for="#detail"
+            class="full-width cursor-pointer"
+            outlined
+            ref="detailRef"
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.detail"
+            :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+            hide-bottom-space
+            :label="`${'รายละเอียด'}`"
+            type="textarea"
+          />
+        </div>
 
-          <div class="col-12">
-            <q-file
-              for="#evidenceFiles"
+        <div class="col-12">
+          <q-file
+            for="#evidenceFiles"
+            outlined
+            dense
+            ref="evidenceFilesRef"
+            v-model="formData.evidenceFiles"
+            label="ไฟล์เอกสารหลักฐาน"
+            lazy-rules
+            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="row col-12 q-col-gutter-md">
+          <div class="col-3">
+            <q-select
+              for="#fault"
               outlined
               dense
-              ref="evidenceFilesRef"
-              v-model="formData.evidenceFiles"
-              label="ไฟล์เอกสารหลักฐาน"
               lazy-rules
-              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-              hide-bottom-space
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-          </div>
-          
-          <div class="row col-12 q-col-gutter-md">
-            <div class="col-3">
-              <q-select
-                for="#fault"
-                outlined
-                dense
-                lazy-rules
-                ref="statusResultRef"
-                v-model="formData.statusResult"
-                :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
-                :options="investigateFactStore.statusResultOptions"
-                label="ผลการสืบสวน"
-                emit-value
-                map-options
-                option-label="name"
-                option-value="id"
-                use-input
-                @filter="(inputValue: any,
+              ref="statusResultRef"
+              v-model="formData.statusResult"
+              :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
+              :options="investigateFactStore.statusResultOptions"
+              label="ผลการสืบสวน"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              use-input
+              @filter="(inputValue: any,
                 doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                 )"
-                ><template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
 
-            <div v-if="formData.statusResult == 'have_cause'" class="col-3">
-              <q-select
-                for="#fault"
-                outlined
-                dense
-                ref="causeTextRef"
-                v-model="formData.causeText"
-                :rules="[(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`]"
-                :options="investigateFactStore.causeTextOptions"
-                label="ร้ายแรง/ไม่ร้ายแรง"
-                emit-value
-                map-options
-                option-label="name"
-                option-value="id"
-                use-input
-                ><template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
+          <div v-if="formData.statusResult == 'have_cause'" class="col-3">
+            <q-select
+              for="#fault"
+              outlined
+              dense
+              ref="causeTextRef"
+              v-model="formData.causeText"
+              :rules="[(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`]"
+              :options="investigateFactStore.causeTextOptions"
+              label="ร้ายแรง/ไม่ร้ายแรง"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              use-input
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
           </div>
         </div>
       </div>
+
       <q-separator />
       <div class="row col-12 q-pa-sm">
         <q-space />
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index c37eb7b45..14be718e6 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -3,12 +3,15 @@ import { onMounted, reactive, ref } from "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";
-
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 
-
 /** ข้อมูล v-model ของฟอร์ม */
 const data = reactive<FormData>({
   complaint: "",
@@ -34,36 +37,51 @@ const data = reactive<FormData>({
 
 /** จำลองข้อมูลจาก api */
 const fetchData = async () => {
-  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")
-  data.casefault = "test1"
-  data.typefault = "2"
-  data.faultLevel = "2"
-  data.refLaw = "test"
-  data.detailComplaint = "รายละเอียด"
-  data.whereInvestigate = "ที่ไหน"
-  data.trueDetail = "รายละเอียด"
-  data.evidence = "รายละเอียด"
-  data.recordAccuser = "รายละเอียด"
-  data.witnesses = "รายละเอียด"
-  data.InvestResults = "รายละเอียด"
-  data.filesEvidence = null
-  data.filesRecordAccuser = null
-  data.filesWitnesses = null
-  data.filesEtc = null
+  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");
+  data.casefault = "test1";
+  data.typefault = "2";
+  data.faultLevel = "2";
+  data.refLaw = "test";
+  data.detailComplaint = "รายละเอียด";
+  data.whereInvestigate = "ที่ไหน";
+  data.trueDetail = "รายละเอียด";
+  data.evidence = "รายละเอียด";
+  data.recordAccuser = "รายละเอียด";
+  data.witnesses = "รายละเอียด";
+  data.InvestResults = "รายละเอียด";
+  data.filesEvidence = null;
+  data.filesRecordAccuser = null;
+  data.filesWitnesses = null;
+  data.filesEtc = null;
 };
 
 /**
  * บันทึกข้อมูลที่เเก้ไข
  * @param id ระบุ บุคคล
  */
-const onSubmit = async (id:string) => {
+const onSubmit = async (id: string) => {
   console.log("edit");
   router.push(`/discipline/disciplinary`);
 };
 
+/** ยืนยัน ส่งไปออกคำสั่ง */
+function sentIssue() {
+  dialogConfirm(
+    $q,
+    () => confirmSentIssue(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+}
+
+/** ฟังชั่น ส่งไปออกคำสั่ง*/
+function confirmSentIssue() {
+  console.log("sent");
+}
+
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
   fetchData();
@@ -82,7 +100,11 @@ onMounted(() => {
         class="q-mr-sm"
         @click="$router.push(`/discipline/disciplinary`)"
       />
-      แก้ไขการสอบสวนความผิดทางวินัย {{ id }}#id
+      <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย {{ id }}#id</div>
+      <q-space />
+      <div class="q-gutter-x-sm">
+        <q-btn label="ส่งไปออกคำสั่ง" color="public" @click="sentIssue" />
+      </div>
     </div>
     <Form :on-submit="onSubmit" :data="data" />
   </div>