ui ==> Workflow

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>