ปรับ Workflow

src/components/Workflow/Main.vue

@@ -30,6 +30,21 @@ const rowsOperate = ref<any[]>([
 const modalSelectPerson = ref<boolean>(false);
 const modalApprove = ref<boolean>(false);
 
+const itemState = ref<any[]>([
+  {
+    stateNo: 1,
+    stateName: "Darft",
+  },
+  {
+    stateNo: 2,
+    stateName: "Operate",
+  },
+  {
+    stateNo: 3,
+    stateName: "Finish",
+  },
+]);
+
 function fetchData() {
   console.log(id, sysName);
 
@@ -75,14 +90,24 @@ onMounted(() => {
     <q-card-section>
       <div class="q-px-lg q-py-md">
         <q-timeline color="primary">
-          <!-- Draft -->
           <q-timeline-entry
-            title="Draft"
+            v-for="(step, index) in itemState"
+            :key="index"
+            :title="step.stateName"
             :icon="
-              state === 1 ? 'mdi-pencil' : state > 1 ? 'done' : 'mdi-numeric-1'
+              state === index + 1
+                ? 'mdi-pencil'
+                : state > index + 1
+                ? 'done'
+                : `mdi-numeric-${index + 1}`
             "
+            :color="state < index + 1 ? 'grey-4' : ''"
           >
-            <div class="row q-col-gutter-sm" v-if="state === 1">
+            <!-- Darft -->
+            <div
+              class="row q-col-gutter-sm"
+              v-if="step.stateName === 'Darft' && state === 1"
+            >
               <q-btn
                 v-if="isChangeState"
                 @click.prevent="onConfirmDraft"
@@ -90,17 +115,12 @@ onMounted(() => {
                 color="primary"
               />
             </div>
-          </q-timeline-entry>
 
-          <!-- Operate -->
+            <!-- Operate -->
-          <q-timeline-entry
+            <div
-            title="Operate"
+              class="q-col-gutter-sm"
-            :icon="
+              v-if="step.stateName === 'Operate' && state > 1"
-              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">
@@ -140,17 +160,6 @@ onMounted(() => {
               </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>