ui ==> Workflow

src/components/CardProfile.vue

@@ -5,6 +5,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
+import type { PropType } from "vue";
 import type { FormProfile } from "@/interface/main";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
@@ -15,12 +16,11 @@ import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const $q = useQuasar();
-const { messageError, findOrgNameOld, findOrgName } = useCounterMixin();
+const { findOrgNameOld, findOrgName } = useCounterMixin();
 
 /** propsDataProfile*/
 const props = defineProps({
-  data: { type: Object, required: true },
+  data: { type: Object as PropType<DataProfile>, required: true },
   type: { type: String, default: "" },
 });
 

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>

src/components/Workflow/DialogSelectPerson.vue

@@ -12,11 +12,9 @@ const $q = useQuasar();
 const { dialogConfirm } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const operator = defineModel<string>("operator", {
-  default: "officer",
-});
 
 /** table*/
+const selected = ref<any[]>([]);
 const rows = ref<any[]>([
   {
     fullName: "นายศรัณย์ ศิลาดี",
@@ -25,7 +23,6 @@ const rows = ref<any[]>([
     organization: "",
   },
 ]);
-const selected = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "fullName",
@@ -65,25 +62,16 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const isAcknowledge = ref<boolean>(false);
+const isConsider = ref<boolean>(false);
+const isComment = ref<boolean>(false);
+
 function fetchLists() {}
 
 function onSubmit() {
   dialogConfirm($q, () => {});
 }
 
-function convertLabelBtn(name: string) {
-  switch (name) {
-    case "officer":
-      return "การเจ้าหน้าที่";
-    case "personnelOfficer":
-      return "สำนักงานการเจ้าหน้าที่";
-    case "commander":
-      return "ผู้บังคับบัญชา";
-    case "authority":
-      return "ผู้มีอำนาจ";
-  }
-}
-
 function onCloseModal() {
   modal.value = false;
   selected.value = [];
@@ -115,7 +103,6 @@ watch(modal, (val) => {
             :paging="true"
             dense
             :rows-per-page-options="[10, 25, 50, 100]"
-            class="tableTb"
             selection="single"
             v-model:selected="selected"
           >
@@ -152,19 +139,51 @@ watch(modal, (val) => {
                 </q-td>
               </q-tr>
             </template>
-          </d-table></q-card-section
-        >
+          </d-table>
+          <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="convertLabelBtn(operator)"
+            label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
             color="public"
             type="submit"
-            :disable="selected.length === 0"
+            :disable="
+              selected.length === 0 ||
+              (!isAcknowledge && !isConsider && !isComment)
+            "
           >
-            <q-tooltip>{{ convertLabelBtn(operator) }}</q-tooltip>
           </q-btn>
         </q-card-actions>
       </q-form>

src/components/Workflow/Main.vue

@@ -1,5 +1,156 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
+import DialogApprove from "@/components/Workflow/DialogApprove.vue";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const { id, sysName } = defineProps({
+  id: { type: String, require: true },
+  sysName: { type: String, require: true },
+});
+
+const state = ref<number>(1);
+const isChangeState = ref<boolean>(false);
+const isOperate = ref<boolean>(false);
+
+const rowsOperate = ref<any[]>([
+  {
+    fullName: "ชื่อนาม - สกุล",
+    comment: "ความเห็น",
+    position: " บริหาร - ต้น ",
+    status: "อนุมัติ",
+  },
+]);
+const modalSelectPerson = ref<boolean>(false);
+
+function fetchData() {
+  console.log(id, sysName);
+
+  const data = {
+    stateNo: 1,
+    step: 1,
+    can_view: true,
+    can_update: true,
+    can_operate: true,
+    can_change_state: true,
+    can_delete: false,
+    can_cancel: false,
+  };
+
+  state.value = data.stateNo;
+  isChangeState.value = data.can_change_state;
+  isOperate.value = data.can_operate;
+}
+
+function onConfirmDraft() {
+  dialogConfirm($q, () => {
+    state.value++;
+  });
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
 
 <template>
-  <div></div>
+  <q-card bordered class="row col-12">
+    <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 />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-card-section>
+      <div class="q-px-lg q-py-md">
+        <q-timeline color="primary">
+          <!-- Draft -->
+          <q-timeline-entry
+            title="Draft"
+            :icon="
+              state === 1 ? 'mdi-pencil' : state > 1 ? 'done' : 'mdi-numeric-1'
+            "
+          >
+            <div class="row q-col-gutter-sm" v-if="state === 1">
+              <q-btn
+                v-if="isChangeState"
+                @click.prevent="onConfirmDraft"
+                label="Next Step"
+                color="primary"
+              />
+            </div>
+          </q-timeline-entry>
+
+          <!-- Operate -->
+          <q-timeline-entry
+            title="Operate"
+            :icon="
+              state === 2 ? 'mdi-pencil' : state > 2 ? 'done' : 'mdi-numeric-2'
+            "
+            :color="state < 2 ? 'grey-4' : ''"
+          >
+            <div class="q-col-gutter-sm" v-if="state > 1">
+              <div>
+                <q-list bordered separator style="min-width: 20vw">
+                  <q-item v-for="(item, index) in rowsOperate" :key="index">
+                    <q-item-section>
+                      <q-item-label
+                        >{{ item.fullName }}
+                        {{ `(${item.position})` }}</q-item-label
+                      >
+                      <q-item-label caption lines="2">{{
+                        item.comment
+                      }}</q-item-label>
+                    </q-item-section>
+
+                    <q-item-section side top>
+                      <q-item-label class="text-green">
+                        {{ item.status }}</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+
+              <div v-if="isOperate && state === 2">
+                <q-btn
+                  @click.prevent="modalSelectPerson = true"
+                  label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
+                  color="public"
+                />
+              </div>
+
+              <div v-if="isChangeState && state === 2">
+                <q-btn
+                  @click.prevent="onConfirmDraft"
+                  label="Next Step"
+                  color="primary"
+                />
+              </div>
+            </div>
+          </q-timeline-entry>
+
+          <!-- Finish -->
+          <q-timeline-entry
+            title="Finish"
+            :icon="
+              state === 3 ? 'mdi-pencil' : state > 3 ? 'done' : 'mdi-numeric-4'
+            "
+            :color="state < 3 ? 'grey-4' : ''"
+          >
+            <div class="row q-col-gutter-sm"></div>
+          </q-timeline-entry>
+        </q-timeline>
+      </div>
+    </q-card-section>
+  </q-card>
+
+  <DialogSelectPerson v-model:modal="modalSelectPerson" />
+
+  <!-- <DialogApprove v-model:modal="modalSelectPerson" /> -->
 </template>