add workflow

src/modules/02_transfer/views/AddTransfer.vue

@@ -9,13 +9,15 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { QForm } from "quasar";
 
+import Workflow from "@/components/Workflow/Main.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
-const id = ref<string>(""); //id path
+const id = ref<string>(route.params.id.toString()); //id path
 const files = ref<any>(); //ไฟล์
 const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
 const noteReason = ref<string>(""); //เหตุผล
@@ -89,7 +91,6 @@ function fileOpen(url: string) {
  */
 onMounted(() => {
   if (route.params.id !== undefined) {
-    id.value = route.params.id.toString();
     fecthDataTransfer(id.value);
   }
 });
@@ -119,9 +120,9 @@ onMounted(() => {
         @validation-success="saveData"
       >
         <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 row q-col-gutter-sm">
                 <q-input
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
@@ -134,6 +135,7 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
+
                 <q-input
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
@@ -147,6 +149,7 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
                 />
+
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
@@ -163,6 +166,7 @@ onMounted(() => {
                       <q-icon name="attach_file" /> </template
                   ></q-file>
                 </div>
+
                 <div class="col-12 row" v-if="routeName != 'addTransfer'">
                   <q-card bordered flat class="full-width">
                     <div
@@ -191,23 +195,18 @@ onMounted(() => {
                     </q-list>
                   </q-card>
                 </div>
+
+                <!-- Workflow -->
+                <div class="col-12">
+                  <Workflow :id="id" :sys-name="`transfer`" />
+                </div>
               </div>
             </div>
-          </div>
+          </q-card-section>
+
           <q-separator v-if="routeName == 'addTransfer'" />
-          <q-card-actions
-            align="right"
-            class="row col-12"
-            v-if="routeName == 'addTransfer'"
-          >
-            <q-space />
-            <q-btn
-              unelevated
-              class="q-px-md items-center"
-              color="primary"
-              label="ยื่นเรื่องขอโอน"
-              type="onsubmit"
-            />
+          <q-card-actions align="right" v-if="routeName == 'addTransfer'">
+            <q-btn color="primary" label="ยื่นเรื่องขอโอน" type="onsubmit" />
           </q-card-actions>
         </q-card>
       </q-form>