整合前端
This commit is contained in:
砂糖
429
ruoyi-ui/src/views/temp.vue
Normal file
429
ruoyi-ui/src/views/temp.vue
Normal file
@@ -0,0 +1,429 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user