ui ==> Workflow

src/components/Workflow/DialogApprove.vue

@@ -1,5 +1,76 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const isAcknowledge = ref<boolean>(false);
+const isConsider = ref<boolean>(false);
+const isComment = ref<boolean>(false);
+
+function onSubmit() {}
+
+function onCloseModal() {
+  modal.value = false;
+}
+</script>
 
 <template>
-  <div></div>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 700px">
+      <q-form q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`รับทราบ/พิจารณา/แสดงความเห็น`"
+          :close="onCloseModal"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="q-gutter-xs q-pt-sm">
+            <div>
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="isAcknowledge"
+                label="ให้เลือกรับทราบ"
+                @update:model-value="(isConsider = false), (isComment = false)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isConsider"
+                label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isComment"
+                label="ให้แสดงความเห็นในเอกสาร"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            label="บันทึกข้อมูล"
+            color="public"
+            type="submit"
+            :disable="!isAcknowledge && !isConsider && !isComment"
+          >
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>