430 lines
9.1 KiB
Vue
430 lines
9.1 KiB
Vue
<template>
|
||
<div class="onboarding-container">
|
||
<!-- 全局步骤条 -->
|
||
<div class="global-steps">
|
||
<el-steps :active="currentStep" align-center>
|
||
<el-step title="开启流程" description="启动入职流程"></el-step>
|
||
<el-step title="填写资料" description="完善个人信息"></el-step>
|
||
<el-step title="等待审核" description="提交审批"></el-step>
|
||
</el-steps>
|
||
</div>
|
||
|
||
<!-- 动态背景装饰 -->
|
||
<div class="decorative-background">
|
||
<div class="gradient-circle blue"></div>
|
||
<div class="gradient-circle purple"></div>
|
||
</div>
|
||
|
||
<!-- 初始状态 -->
|
||
<div v-if="currentStep === 0" class="initiation-card">
|
||
<div class="welcome-section">
|
||
<el-image
|
||
src="https://example.com/onboarding-illustration.svg"
|
||
class="welcome-illustration"
|
||
:preview-src-list="[]">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-user-solid"></i>
|
||
</div>
|
||
</el-image>
|
||
<h2 class="welcome-title">欢迎加入团队！</h2>
|
||
<p class="welcome-subtitle">让我们开始您的入职流程</p>
|
||
</div>
|
||
|
||
<el-button
|
||
type="primary"
|
||
class="start-button"
|
||
@click="startOnboarding"
|
||
:loading="loading">
|
||
{{ loading ? '正在准备表单...' : '开启入职流程' }}
|
||
<i class="el-icon-right"></i>
|
||
</el-button>
|
||
<el-button
|
||
type="danger"
|
||
class="logout-button"
|
||
@click="logout"
|
||
>
|
||
退出登录
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 表单状态 -->
|
||
<transition name="el-fade-in">
|
||
<div v-if="currentStep === 1" class="form-container">
|
||
<el-skeleton :rows="5" animated v-if="loading"/>
|
||
|
||
<div v-else class="form-content">
|
||
<div class="form-header">
|
||
<h3>入职信息登记（1/2）</h3>
|
||
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
|
||
<!-- 审核状态 -->
|
||
<transition name="el-fade-in">
|
||
<div v-if="currentStep === 2" class="review-status">
|
||
<el-result
|
||
icon="success"
|
||
title="提交成功"
|
||
subTitle="您的资料已提交审核，请等待审批">
|
||
</el-result>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</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,
|
||
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 {
|
||
this.initData()
|
||
this.currentStep = 1
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
}
|
||
,
|
||
|
||
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: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$store.dispatch('LogOut').then(() => {
|
||
location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
|
||
})
|
||
}).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>
|
||
|
||
<style scoped lang="scss">
|
||
.global-steps {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 90%;
|
||
max-width: 800px;
|
||
z-index: 2;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.onboarding-container {
|
||
padding-top: 100px; /* 为步骤条留出空间 */
|
||
}
|
||
|
||
.review-status {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
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;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 调整原有样式适应新结构 */
|
||
.onboarding-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
padding: 2rem;
|
||
height: 100vh;
|
||
}
|
||
|
||
.decorative-background {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
|
||
.gradient-circle {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(60px);
|
||
opacity: 0.15;
|
||
|
||
&.blue {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: linear-gradient(45deg, #409EFF, #79bbff);
|
||
top: 20%;
|
||
left: 10%;
|
||
}
|
||
|
||
&.purple {
|
||
width: 250px;
|
||
height: 250px;
|
||
background: linear-gradient(45deg, #B37FEB, #9254de);
|
||
bottom: 15%;
|
||
right: 10%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.initiation-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
||
backdrop-filter: blur(10px);
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
text-align: center;
|
||
}
|
||
|
||
.welcome-section {
|
||
margin-bottom: 2rem;
|
||
|
||
.welcome-illustration {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 0 auto 1.5rem;
|
||
border-radius: 50%;
|
||
background: #f0f7ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 4rem;
|
||
color: #409EFF;
|
||
}
|
||
|
||
.welcome-title {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 0.5rem;
|
||
color: #303133;
|
||
}
|
||
|
||
.welcome-subtitle {
|
||
color: #909399;
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
.process-steps {
|
||
margin: 2rem 0;
|
||
|
||
::v-deep .el-step__head {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
|
||
.start-button, .logout-button {
|
||
width: 100%;
|
||
height: 50px;
|
||
font-size: 1.1rem;
|
||
border-radius: 12px;
|
||
transition: all 0.3s ease;
|
||
margin-left: 0;
|
||
margin-top: 10px;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
||
}
|
||
|
||
i {
|
||
margin-left: 8px;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
&:hover i {
|
||
transform: translateX(3px);
|
||
}
|
||
}
|
||
|
||
.form-container {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
width: 100%;
|
||
max-width: 800px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
.form-header {
|
||
margin-bottom: 5rem;
|
||
|
||
h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.onboarding-container {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.initiation-card,
|
||
.form-container {
|
||
padding: 24px;
|
||
}
|
||
|
||
.welcome-illustration {
|
||
width: 150px !important;
|
||
height: 150px !important;
|
||
}
|
||
}
|
||
|
||
.initiation-card {
|
||
margin-top: 60px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.global-steps {
|
||
top: 10px;
|
||
width: 95%;
|
||
padding: 10px;
|
||
|
||
::v-deep .el-step__title {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.onboarding-container {
|
||
padding-top: 80px;
|
||
}
|
||
}
|
||
</style>
|