ปรับการแสดงผล action ในหน้ารายละเอียดของวินัย

src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue

@@ -3,17 +3,16 @@ 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 { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
-const $q = useQuasar()
+const $q = useQuasar();
-const mixin = useCounterMixin()
+const mixin = useCounterMixin();
-const { dialogConfirm } = mixin
+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: "",
@@ -30,7 +29,7 @@ const data = reactive<FormData>({
   daysExtend: null,
   statusResult: "",
   causeText: "",
-  complaintStatus: ""
+  complaintStatus: "NEW",
 });
 
 /** จำลองข้อมูลจาก api */
@@ -56,20 +55,55 @@ const fetchData = async () => {
  * บันทึกข้อมูลที่เเก้ไข
  * @param id ระบุ บุคคล
  */
-async function onSubmit(id:string){
+async function onSubmit(id: string) {
   // put
-  console.log("edit",id);
+  console.log("edit", id);
   router.push(`/discipline/investigatefacts`);
-};
+}
 
 /** ยืนยัน ส่งไปสอบสวน */
-function sentInvestigate(){
+function sentInvestigate() {
-  dialogConfirm($q,()=> confirmSentInvestigate(),'ยืนยันส่งไปสอบสวน','ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?')
+  dialogConfirm(
+    $q,
+    () => confirmSentInvestigate(),
+    "ยืนยันส่งไปสอบสวน",
+    "ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?"
+  );
+}
+
+/** ยืนยัน ยุติเรื่อง */
+function endInvestigate() {
+  dialogConfirm(
+    $q,
+    () => confirmEndInvestigate(),
+    "ยืนยันยุติเรื่อง",
+    "ต้องการยืนยันยุติเรื่องใช่หรือไม่?"
+  );
+}
+
+/** ยืนยัน ยกเลิกการยุติเรื่อง */
+function cancelInvestigate() {
+  dialogConfirm(
+    $q,
+    () => confirmCancelInvestigate(),
+    "ยืนยันยกเลิกการยุติเรื่อง",
+    "ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?"
+  );
 }
 
 /** ฟังชั่น ส่งไปสอบสวน*/
-function confirmSentInvestigate(){
+function confirmSentInvestigate() {
-  console.log('sent')
+  console.log("sent");
+}
+
+/** ฟังชั่น ยุติเรื่อง*/
+function confirmEndInvestigate() {
+  console.log("sent");
+}
+
+/** ฟังชั่น ยกเลิกการยุติเรื่อง*/
+function confirmCancelInvestigate() {
+  console.log("sent");
 }
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
@@ -95,10 +129,24 @@ onMounted(() => {
       <q-space />
       <div class="q-gutter-x-sm">
         <q-btn
+          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>
 

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -184,7 +184,6 @@ onMounted(async () => {
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
             <q-th auto-width />
-            <q-th auto-width />
           </q-tr>
         </template>
         <template v-slot:body="props">
@@ -209,19 +208,6 @@ onMounted(async () => {
             >
               {{ props.row.active }}
             </q-td>
-            <q-td auto-width>
-              <div>
-                <q-btn
-                  v-if="props.row.status === 'ยุติเรื่อง'"
-                  for="#cancel"
-                  dense
-                  unelevated
-                  color="primary"
-                  class="q-px-sm"
-                  >ยกเลิกยุติเรื่อง</q-btn
-                >
-              </div>
-            </q-td>
           </q-tr>
         </template>
       </d-table>