popup ==> รับทราบ/พิจารณา/แสดงความเห็น

src/components/Workflow/DialogApprove.vue

@@ -1,18 +1,33 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
 const modal = defineModel<boolean>("modal", { required: true });
 
 const isAcknowledge = ref<boolean>(false);
-const isConsider = ref<boolean>(false);
-const isComment = ref<boolean>(false);
+const isConsider = ref<boolean>(true);
+const isComment = ref<boolean>(true);
 
-function onSubmit() {}
+const acknowledge = ref<boolean>(false);
+const consider = ref<string>("");
+const comment = ref<string>("");
+
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
 
 function onCloseModal() {
   modal.value = false;
+  acknowledge.value = false;
+  consider.value = "";
+  comment.value = "";
 }
 </script>
 
@@ -27,34 +42,56 @@ function onCloseModal() {
         <q-separator />
 
         <q-card-section>
-          <div class="q-gutter-xs q-pt-sm">
-            <div>
+          <div class="q-gutter-xs">
+            <div v-if="isAcknowledge">
               <q-checkbox
                 keep-color
                 color="primary"
                 dense
-                v-model="isAcknowledge"
-                label="ให้เลือกรับทราบ"
-                @update:model-value="(isConsider = false), (isComment = false)"
+                v-model="acknowledge"
+                label="รับทราบ"
               />
             </div>
-            <div v-if="!isAcknowledge">
-              <q-checkbox
-                dense
-                keep-color
-                color="primary"
-                v-model="isConsider"
-                label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
-              />
+            <div v-if="!isAcknowledge && isConsider">
+              <div class="text-weight-bold">พิจารณา (อนุมัติ/ไม่อนุมัติ)</div>
+              <div class="q-pa-sm q-gutter-sm">
+                <q-radio
+                  dense
+                  keep-color
+                  color="primary"
+                  v-model="consider"
+                  label="อนุมัติ"
+                  val="approve"
+                />
+                <q-radio
+                  dense
+                  keep-color
+                  color="primary"
+                  v-model="consider"
+                  label="ไม่อนุมัติ"
+                  val="reject"
+                />
+              </div>
             </div>
-            <div v-if="!isAcknowledge">
-              <q-checkbox
-                dense
-                keep-color
-                color="primary"
-                v-model="isComment"
-                label="ให้แสดงความเห็นในเอกสาร"
-              />
+
+            <div v-if="!isAcknowledge && isComment">
+              <div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
+              <div class="q-pa-sm q-gutter-sm">
+                <div class="col-12">
+                  <q-input
+                    dense
+                    outlined
+                    label="ความเห็น"
+                    v-model="comment"
+                    type="textarea"
+                    lazy-rules
+                    :rules="[
+                      (val:string) => !!val || `${'กรุณากรอกความเห็น'}`,
+                    ]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </q-card-section>
@@ -63,7 +100,7 @@ function onCloseModal() {
 
         <q-card-actions align="right">
           <q-btn
-            label="บันทึกข้อมูล"
+            label="บันทึก"
             color="public"
             type="submit"
             :disable="!isAcknowledge && !isConsider && !isComment"

src/components/Workflow/Main.vue

@@ -28,6 +28,7 @@ const rowsOperate = ref<any[]>([
   },
 ]);
 const modalSelectPerson = ref<boolean>(false);
+const modalApprove = ref<boolean>(false);
 
 function fetchData() {
   console.log(id, sysName);
@@ -64,6 +65,11 @@ onMounted(() => {
     <div class="bg-grey-1 q-pa-sm col-12 row items-center">
       <div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
       <q-space />
+      <q-btn
+        @click.prevent="modalApprove = true"
+        label="DialogApprove"
+        color="public"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <q-card-section>
@@ -152,5 +158,5 @@ onMounted(() => {
 
   <DialogSelectPerson v-model:modal="modalSelectPerson" />
 
-  <!-- <DialogApprove v-model:modal="modalSelectPerson" /> -->
+  <DialogApprove v-model:modal="modalApprove" />
 </template>