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>
|