入职流程完成

ruoyi-ui/src/views/temp.vue

@@ -18,8 +18,8 @@
     <!-- 初始状态 -->
     <div v-if="currentStep === 0" class="initiation-card">
       <div class="welcome-section">
-        <el-image 
-          src="https://example.com/onboarding-illustration.svg" 
+        <el-image
+          src="https://example.com/onboarding-illustration.svg"
           class="welcome-illustration"
           :preview-src-list="[]">
           <div slot="error" class="image-slot">
@@ -30,8 +30,8 @@
         <p class="welcome-subtitle">让我们开始您的入职流程</p>
       </div>
 
-      <el-button 
-        type="primary" 
+      <el-button
+        type="primary"
         class="start-button"
         @click="startOnboarding"
         :loading="loading">
@@ -50,31 +50,19 @@
     <!-- 表单状态 -->
     <transition name="el-fade-in">
       <div v-if="currentStep === 1" class="form-container">
-        <el-skeleton :rows="5" animated v-if="loading" />
-        
+        <el-skeleton :rows="5" animated v-if="loading"/>
+
         <div v-else class="form-content">
           <div class="form-header">
             <h3>入职信息登记（1/2）</h3>
-            <el-progress :percentage="50" :show-text="false" />
+
+          </div>
+          <div class="form-conf" v-if="formOpen">
+            <parser :key="new Date().getTime()" :form-conf="formData" @submit="submit" ref="parser" @getData="getData"/>
+          </div>
+          <div class="form-actions">
+            <el-button @click="currentStep = 0">上一步</el-button>
           </div>
-          
-          <el-form 
-            :model="employeeData" 
-            class="employee-form"
-            label-position="top">
-            <!-- 表单字段 -->
-            <el-form-item label="姓名">
-              <el-input v-model="employeeData.name"></el-input>
-            </el-form-item>
-            <el-form-item label="邮箱">
-              <el-input v-model="employeeData.email"></el-input>
-            </el-form-item>
-            
-            <div class="form-actions">
-              <el-button @click="currentStep = 0">上一步</el-button>
-              <el-button type="primary" @click="submitForm">提交审核</el-button>
-            </div>
-          </el-form>
         </div>
       </div>
     </transition>
@@ -93,31 +81,98 @@
 </template>
 
 <script>
+import Parser from "@/utils/generator/parser";
+import {
+  detailProcess,
+  getProcessForm,
+  listOwnProcess,
+  listProcess,
+  listTodoProcess,
+  startProcess
+} from "@/api/workflow/process";
+import {complete} from "@/api/workflow/task";
+
 export default {
+  components: {Parser},
   data() {
     return {
       currentStep: 0, // 0-开启流程 1-填写资料 2-等待审核
       loading: false,
-      employeeData: {
-        name: "",
-        email: ""
-      }
+      formOpen: false,
+      formData: {
+
+      },
+      taskForm: {},
+      queryParams: {
+        category: "onboarding",
+        pageSize: 10,
+        pageNum: 1,
+      },
+      deployId: "",
+      definitionId: "",
+      procInsId: null,
+      dateRange: [],
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
+    getList() {
+      this.loading = true;
+      listOwnProcess(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.todoList = response.rows;
+        console.log(response);
+        if (response.rows.length > 0) {
+          this.currentStep=2
+          this.loading = false
+        }else{
+          listProcess(this.queryParams).then(response => {
+            this.deployId = response.rows[0].deploymentId;
+            this.definitionId = response.rows[0].definitionId;
+            this.loading = false
+          })
+        }
+      })
+    },
+
+    submit(data) {
+      if (data && this.definitionId) {
+        // 启动流程并将表单数据加入流程变量
+        startProcess(this.definitionId, JSON.stringify(data.valData)).then(res => {
+          this.$modal.msgSuccess(res.msg);
+          this.currentStep = 2;
+        })
+      }
+    },
+
     async startOnboarding() {
       this.loading = true
       try {
-        await new Promise(resolve => setTimeout(resolve, 1500))
+        this.initData()
         this.currentStep = 1
       } finally {
         this.loading = false
       }
-    },
-    submitForm() {
-      // 这里添加实际提交逻辑
-      this.currentStep = 2
-    },
+    }
+    ,
+
+    initData() {
+      getProcessForm({
+        definitionId: this.definitionId,
+        deployId: this.deployId,
+        procInsId: this.procInsId
+      }).then(res => {
+        if (res.data) {
+          this.formData = res.data;
+          this.formOpen = true
+          this.loading = false
+        }
+      })
+    }
+    ,
+
+
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
         confirmButtonText: '确定',
@@ -129,7 +184,32 @@ export default {
         })
       }).catch(() => {
       });
-    },
+    }
+    ,
+
+    /** 接收子组件传的值 */
+    getData(data) {
+      if (data) {
+        const variables = [];
+        data.fields.forEach(item => {
+          let variableData = {};
+          variableData.label = item.__config__.label
+          // 表单值为多个选项时
+          if (item.__config__.defaultValue instanceof Array) {
+            const array = [];
+            item.__config__.defaultValue.forEach(val => {
+              array.push(val)
+            })
+            variableData.val = array;
+          } else {
+            variableData.val = item.__config__.defaultValue
+          }
+          variables.push(variableData)
+        })
+        this.variables = variables;
+      }
+    }
+    ,
   }
 }
 </script>
@@ -163,6 +243,14 @@ export default {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
 }
 
+.form-content {
+  padding-top: 360px;
+}
+
+.form-conf {
+  margin-top: 40px;
+}
+
 .form-actions {
   margin-top: 40px;
   display: flex;
@@ -175,7 +263,6 @@ export default {
   align-items: center;
   justify-content: center;
   position: relative;
-  overflow: hidden;
   padding: 2rem;
   height: 100vh;
 }
@@ -253,6 +340,7 @@ export default {
 
 .process-steps {
   margin: 2rem 0;
+
   ::v-deep .el-step__head {
     width: 24px;
     height: 24px;
@@ -286,7 +374,7 @@ export default {
 .form-container {
   background: white;
   border-radius: 16px;
-  padding: 40px;
+  padding: 20px;
   width: 100%;
   max-width: 800px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
@@ -294,7 +382,8 @@ export default {
   z-index: 1;
 
   .form-header {
-    margin-bottom: 2rem;
+    margin-bottom: 5rem;
+
     h3 {
       font-size: 1.5rem;
       margin-bottom: 1rem;
@@ -327,14 +416,14 @@ export default {
     top: 10px;
     width: 95%;
     padding: 10px;
-    
+
     ::v-deep .el-step__title {
       font-size: 12px;
     }
   }
-  
+
   .onboarding-container {
     padding-top: 80px;
   }
 }
-</style>
+</style>