เรื่องร้องเรียน

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

@@ -25,6 +25,7 @@ const data = reactive<FormData>({
   daysExtend: null,
   statusResult: "",
   causeText: "",
+  complaintStatus: ""
 });
 
 /** จำลองข้อมูลจาก api */
@@ -44,6 +45,7 @@ const fetchData = async () => {
   data.daysExtend = null;
   data.statusResult = "ไม่ระบุ";
   data.causeText = "";
+  data.complaintStatus = "NEW";
 };
 
 /**
@@ -75,7 +77,25 @@ onMounted(() => {
         class="q-mr-sm"
         @click="$router.push(`/discipline/investigatefacts`)"
       />
-      แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id
+      <div class="q-ma-none">แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id</div>
+      <q-space />
+      <div class="q-gutter-x-sm">
+        <q-btn
+          v-if="data.complaintStatus === 'NEW'"
+          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"
+        />
+      </div>
     </div>
 
     <Form :on-submit="onSubmit" :data="data" />