10 changed files with 128 additions and 414 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