5 changed files with 26 additions and 405 deletions
@ -1,400 +0,0 @@ |
|||
<template> |
|||
<div class="personnel-approval-demo"> |
|||
<el-card class="demo-card" shadow="hover"> |
|||
<template #header> |
|||
<div class="card-header"> |
|||
<h3>人员添加审批功能演示</h3> |
|||
<p class="desc">该功能展示如何将人员添加接入审批流程</p> |
|||
</div> |
|||
</template> |
|||
|
|||
<!-- 审批配置选择 --> |
|||
<div class="section"> |
|||
<h4>第一步：选择审批配置</h4> |
|||
<el-form :model="form" label-width="120px" size="default"> |
|||
<el-form-item label="是否使用审批:"> |
|||
<el-switch |
|||
v-model="form.useApproval" |
|||
active-text="启用审批流程" |
|||
inactive-text="直接添加" |
|||
@change="onApprovalToggle"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
v-if="form.useApproval" |
|||
label="审批配置:" |
|||
required> |
|||
<el-select |
|||
v-model="form.approvalConfigId" |
|||
placeholder="请选择审批配置" |
|||
:loading="configLoading" |
|||
clearable> |
|||
<el-option |
|||
v-for="config in approvalConfigs" |
|||
:key="config.id" |
|||
:label="config.config_name" |
|||
:value="config.id"> |
|||
<span>{{ config.config_name }}</span> |
|||
<span style="float: right; color: #8492a6;">{{ config.description }}</span> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- 人员信息填写 --> |
|||
<div class="section"> |
|||
<h4>第二步：填写人员信息</h4> |
|||
<el-form :model="personnelForm" :rules="rules" ref="personnelFormRef" label-width="120px"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="姓名:" prop="name"> |
|||
<el-input v-model="personnelForm.name" placeholder="请输入姓名"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="性别:" prop="gender"> |
|||
<el-radio-group v-model="personnelForm.gender"> |
|||
<el-radio :label="0">男</el-radio> |
|||
<el-radio :label="1">女</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="手机号:" prop="phone"> |
|||
<el-input v-model="personnelForm.phone" placeholder="请输入手机号"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="状态:" prop="status"> |
|||
<el-select v-model="personnelForm.status" placeholder="请选择状态"> |
|||
<el-option label="正常" :value="1"></el-option> |
|||
<el-option label="禁用" :value="0"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-form-item label="家庭住址:"> |
|||
<el-input v-model="personnelForm.address" placeholder="请输入家庭住址"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="学历:"> |
|||
<el-select v-model="personnelForm.education" placeholder="请选择学历"> |
|||
<el-option label="高中及以下" value="高中及以下"></el-option> |
|||
<el-option label="大专" value="大专"></el-option> |
|||
<el-option label="本科" value="本科"></el-option> |
|||
<el-option label="硕士" value="硕士"></el-option> |
|||
<el-option label="博士" value="博士"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="个人简介:"> |
|||
<el-input |
|||
v-model="personnelForm.profile" |
|||
type="textarea" |
|||
:rows="3" |
|||
placeholder="请输入个人简介"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="是否系统用户:"> |
|||
<el-switch |
|||
v-model="personnelForm.isSysUser" |
|||
active-text="是" |
|||
inactive-text="否"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<div class="section"> |
|||
<h4>第三步：提交申请</h4> |
|||
<el-button |
|||
type="primary" |
|||
size="large" |
|||
:loading="submitLoading" |
|||
@click="handleSubmit"> |
|||
{{ form.useApproval ? '提交审批申请' : '直接添加人员' }} |
|||
</el-button> |
|||
<el-button |
|||
size="large" |
|||
@click="handleReset"> |
|||
重置表单 |
|||
</el-button> |
|||
</div> |
|||
|
|||
<!-- 结果展示 --> |
|||
<div v-if="result" class="section result-section"> |
|||
<h4>处理结果</h4> |
|||
<el-alert |
|||
:title="result.title" |
|||
:description="result.description" |
|||
:type="result.type" |
|||
show-icon |
|||
:closable="false"> |
|||
</el-alert> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<!-- 审批流程状态展示 --> |
|||
<el-card v-if="showApprovalStatus" class="approval-status-card" shadow="hover"> |
|||
<template #header> |
|||
<h3>审批流程状态</h3> |
|||
</template> |
|||
<div class="approval-flow"> |
|||
<el-steps :active="currentStep" finish-status="success" align-center> |
|||
<el-step |
|||
v-for="(step, index) in approvalSteps" |
|||
:key="index" |
|||
:title="step.title" |
|||
:description="step.description"> |
|||
</el-step> |
|||
</el-steps> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive, onMounted } from 'vue' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import { apiRequest } from '@/utils/request' |
|||
|
|||
// 响应式数据 |
|||
const form = reactive({ |
|||
useApproval: false, |
|||
approvalConfigId: null |
|||
}) |
|||
|
|||
const personnelForm = reactive({ |
|||
name: '', |
|||
gender: 0, |
|||
phone: '', |
|||
address: '', |
|||
education: '', |
|||
profile: '', |
|||
status: 1, |
|||
isSysUser: false, |
|||
info: {} |
|||
}) |
|||
|
|||
const approvalConfigs = ref([]) |
|||
const configLoading = ref(false) |
|||
const submitLoading = ref(false) |
|||
const result = ref(null) |
|||
const showApprovalStatus = ref(false) |
|||
const currentStep = ref(0) |
|||
const approvalSteps = ref([]) |
|||
|
|||
// 表单验证规则 |
|||
const rules = { |
|||
name: [ |
|||
{ required: true, message: '请输入姓名', trigger: 'blur' } |
|||
], |
|||
phone: [ |
|||
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
|||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' } |
|||
], |
|||
gender: [ |
|||
{ required: true, message: '请选择性别', trigger: 'change' } |
|||
], |
|||
status: [ |
|||
{ required: true, message: '请选择状态', trigger: 'change' } |
|||
] |
|||
} |
|||
|
|||
const personnelFormRef = ref() |
|||
|
|||
// 获取审批配置列表 |
|||
const loadApprovalConfigs = async () => { |
|||
configLoading.value = true |
|||
try { |
|||
const response = await apiRequest({ |
|||
url: '/adminapi/personnel/approval-configs', |
|||
method: 'GET' |
|||
}) |
|||
if (response.data.code === 1) { |
|||
approvalConfigs.value = response.data.data.list || [] |
|||
} |
|||
} catch (error) { |
|||
ElMessage.error('获取审批配置失败') |
|||
} finally { |
|||
configLoading.value = false |
|||
} |
|||
} |
|||
|
|||
// 审批开关切换 |
|||
const onApprovalToggle = (value) => { |
|||
if (value && approvalConfigs.value.length === 0) { |
|||
loadApprovalConfigs() |
|||
} |
|||
if (!value) { |
|||
form.approvalConfigId = null |
|||
} |
|||
} |
|||
|
|||
// 提交表单 |
|||
const handleSubmit = async () => { |
|||
// 验证表单 |
|||
const valid = await personnelFormRef.value.validate() |
|||
if (!valid) { |
|||
return |
|||
} |
|||
|
|||
// 如果使用审批流程，检查是否选择了配置 |
|||
if (form.useApproval && !form.approvalConfigId) { |
|||
ElMessage.warning('请选择审批配置') |
|||
return |
|||
} |
|||
|
|||
submitLoading.value = true |
|||
try { |
|||
const submitData = { |
|||
...personnelForm, |
|||
use_approval: form.useApproval ? 1 : 0, |
|||
approval_config_id: form.approvalConfigId || 0 |
|||
} |
|||
|
|||
const response = await apiRequest({ |
|||
url: '/adminapi/personnel/personnel', |
|||
method: 'POST', |
|||
data: submitData |
|||
}) |
|||
|
|||
if (response.data.code === 1) { |
|||
if (form.useApproval) { |
|||
result.value = { |
|||
title: '审批申请提交成功', |
|||
description: `已成功提交人员添加审批申请，流程ID: ${response.data.data.process_id}，请等待审批人处理。`, |
|||
type: 'success' |
|||
} |
|||
showApprovalDemo() |
|||
} else { |
|||
result.value = { |
|||
title: '人员添加成功', |
|||
description: `人员 ${personnelForm.name} 添加成功，ID: ${response.data.data.id}`, |
|||
type: 'success' |
|||
} |
|||
} |
|||
} else { |
|||
result.value = { |
|||
title: '提交失败', |
|||
description: response.data.msg || '操作失败，请重试', |
|||
type: 'error' |
|||
} |
|||
} |
|||
} catch (error) { |
|||
result.value = { |
|||
title: '提交失败', |
|||
description: '网络错误，请稍后重试', |
|||
type: 'error' |
|||
} |
|||
} finally { |
|||
submitLoading.value = false |
|||
} |
|||
} |
|||
|
|||
// 展示审批流程演示 |
|||
const showApprovalDemo = () => { |
|||
showApprovalStatus.value = true |
|||
approvalSteps.value = [ |
|||
{ title: '提交申请', description: '用户提交人员添加申请' }, |
|||
{ title: '部门审批', description: '部门负责人审批' }, |
|||
{ title: 'HR审批', description: 'HR部门审批' }, |
|||
{ title: '完成', description: '审批完成，创建人员记录' } |
|||
] |
|||
currentStep.value = 1 // 模拟当前在第二步 |
|||
} |
|||
|
|||
// 重置表单 |
|||
const handleReset = () => { |
|||
personnelFormRef.value.resetFields() |
|||
form.useApproval = false |
|||
form.approvalConfigId = null |
|||
result.value = null |
|||
showApprovalStatus.value = false |
|||
} |
|||
|
|||
// 组件挂载时初始化 |
|||
onMounted(() => { |
|||
// 可以在这里初始化一些演示数据 |
|||
personnelForm.name = '张三' |
|||
personnelForm.phone = '13800138000' |
|||
personnelForm.address = '北京市朝阳区' |
|||
personnelForm.education = '本科' |
|||
personnelForm.profile = '具有丰富的教学经验，专业技能扎实。' |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.personnel-approval-demo { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.demo-card { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.card-header { |
|||
text-align: center; |
|||
} |
|||
|
|||
.card-header h3 { |
|||
margin: 0 0 10px 0; |
|||
color: #303133; |
|||
} |
|||
|
|||
.card-header .desc { |
|||
margin: 0; |
|||
color: #909399; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.section { |
|||
margin-bottom: 30px; |
|||
padding-bottom: 20px; |
|||
border-bottom: 1px solid #ebeef5; |
|||
} |
|||
|
|||
.section:last-child { |
|||
border-bottom: none; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.section h4 { |
|||
margin: 0 0 20px 0; |
|||
color: #606266; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.result-section { |
|||
background: #f8f9fa; |
|||
padding: 20px; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
.approval-status-card { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.approval-flow { |
|||
padding: 20px 0; |
|||
} |
|||
|
|||
:deep(.el-step__description) { |
|||
color: #909399; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
:deep(.el-alert__description) { |
|||
font-size: 14px; |
|||
line-height: 1.6; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue