feat: 人事流程

This commit is contained in:
2025-03-09 16:07:01 +08:00
parent d335612b2f
commit a140dbc846
10 changed files with 435 additions and 160 deletions

View File

@@ -1,123 +1,144 @@
<template>
<div class="main">
<el-header style="background-color: #fff;display: flex;justify-content:center;border-radius: 10px">
<h1>员工离职申请表</h1>
</el-header>
<el-container style="background-color: #fff;border-radius: 10px;margin-top: 30px;flex-direction: column;padding: 20px">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div>基本信息</div>
<div>
<el-button type="primary" @click="saveFormToOffboarding">
<i class="el-icon-check"></i>提交
</el-button>
<div class="main">
<el-header style="background-color: #fff;display: flex;justify-content:center;border-radius: 10px">
<h1>员工离职申请表</h1>
</el-header>
<el-container style="background-color: #fff;border-radius: 10px;margin-top: 30px;flex-direction: column;padding: 20px">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div>基本信息</div>
<div>
<el-button type="primary" @click="saveFormToOffboarding">
<i class="el-icon-check"></i>提交
</el-button>
</div>
</div>
</div>
<el-divider></el-divider>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-row :gutter="18">
<el-col :span="12">
<el-form-item label="离职人员" required>
<el-select v-model="form.userId" filterable placeholder="请选择">
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.nickName"
:value="item.userId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="离职时间" required>
<el-date-picker
v-model="form.resignationDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="离职原因" required>
<el-input type="textarea" v-model="form.exitReason" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
</div>
</el-container>
</div>
<el-divider></el-divider>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-row :gutter="18">
<el-col :span="12">
<el-form-item label="离职人员" required>
<el-select v-model="form.userId" filterable placeholder="请选择">
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.nickName"
:value="item.userId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="离职时间" required>
<el-date-picker
v-model="form.resignationDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="离职原因" required>
<el-input type="textarea" v-model="form.exitReason" placeholder="请输入内容"></el-input>
</el-form-item>
<!-- 新增文件上传组件 -->
<el-form-item label="附件上传">
<el-upload
ref="upload"
:auto-upload="false"
:on-change="handleFileChange"
:on-remove="handleFileRemove"
multiple
:file-list="fileList">
<el-button size="small" type="primary">点击选择文件</el-button>
<div slot="tip" class="el-upload__tip">请上传相关文件支持多个文件</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</el-container>
</div>
</template>
<script>
import { addOffboarding } from "@/api/oa/offboarding";
import { listUser } from "@/api/system/user";
import { uploadFile, addFile } from '@/api/oa/document'
</template>
<script>
import {addOffboarding} from "@/api/oa/offboarding";
import {listUser} from "@/api/system/user";
export default {
name: "Offboarding",
dicts: [],
data() {
return{
form:{},
userList:[],
user:{}
}
},
created() {
export default {
name: "Offboarding",
dicts: [],
data() {
return {
form: {},
userList: [],
user: {},
fileList: [] // 存储选中的文件
}
},
created() {
this.getUserList();
},
methods: {
//获取用户列表
getUserList() {
listUser().then(res => {
this.userList = res.rows;
console.log(res.rows)
})
},
//保存离职信息
saveFormToOffboarding(){
addOffboarding(this.form).then(res=>{
this.$modal.msgSuccess("新增成功");
this.loading = false;
this.goBack()
})
},
/** 返回页面 */
goBack() {
// 关闭当前标签页并返回上个页面
this.$tab.closePage(this.$route)
this.$router.back()
},
querySearchAsync(queryString, cb) {
var userList = this.userList;
var results = queryString ? userList.filter(this.createStateFilter(queryString)) : userList;
methods: {
// 获取用户列表
getUserList() {
listUser().then(res => {
this.userList = res.rows;
})
},
// 文件状态改变时的处理
handleFileChange(file, fileList) {
this.fileList = fileList;
},
// 文件移除处理
handleFileRemove(file, fileList) {
this.fileList = fileList;
},
// 保存离职信息
async saveFormToOffboarding() {
try {
// 1. 文件上传
// 创建FormData对象
const formData = new FormData();
// 添加表单数据
formData.append('file', this.fileList[0].raw);
console.log(this.fileList, formData);
const data = uploadFile(formData);
console.log(data, this.form);
clearTimeout(this.timeout);
cb(results);
},
createStateFilter(queryString) {
return (user) => {
console.log(user);
return (user.nickName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
this.form.userId = item.userId
// 2. 文件绑定用户
await addFile({
userId: this.user.userId,
fileList: [{
fileName: data.newFileName,
filePath: data.url,
fileType: 1
}]
})
// 3. 提交离职信息
await addOffboarding(this.form);
this.$modal.msgSuccess("提交成功");
this.goBack();
} catch (error) {
this.$modal.msgError("提交失败");
}
},
/** 返回页面 */
goBack() {
this.$tab.closePage(this.$route);
this.$router.back();
}
}
},
}
</script>
<style scoped >
.main{
padding: 20px;
background: #f6f6f6;
}
</style>
}
</script>
<style scoped>
.main {
padding: 20px;
background: #f6f6f6;
}
</style>

View File

@@ -0,0 +1,128 @@
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>转正申请</span>
<el-tag :type="statusType">{{ statusText }}</el-tag>
</div>
<el-form ref="form" class="apply-form">
<el-form-item label="申请材料" prop="file">
<el-upload
action=""
:auto-upload="false"
:on-change="handleFileChange"
:file-list="fileList"
>
<el-button size="small" type="primary">选择文件</el-button>
<div slot="tip" class="el-upload__tip">支持PDF/DOC格式大小不超过50MB</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:loading="loading"
@click="handleSubmit"
>提交申请</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { submitProbation } from '@/api/oa/hr'
import { uploadFile, addFile } from '@/api/oa/document'
import { getOnboarding } from "@/api/oa/onboarding"
export default {
name: 'ProbationApply',
data() {
return {
loading: false,
fileList: [],
currentFile: null,
statusMap: {
pending: { label: '待审批', type: 'warning' },
success: { label: '已提交', type: 'success' }
},
userInfo: null,
}
},
mounted() {
console.log(this.$store.state.user)
// 获取用户入职信息
// this.getUserInfo()
},
computed: {
statusType() {
return this.statusMap[this.fileList.length ? 'success' : 'pending'].type
},
statusText() {
return this.statusMap[this.fileList.length ? 'success' : 'pending'].label
}
},
methods: {
async getUserInfo() {
const { data } = await getOnboarding(this.$store.state.user.id)
this.userInfo = data
},
handleFileChange(file) {
this.currentFile = file.raw
this.fileList = [file]
},
async handleSubmit() {
if (!this.currentFile) {
return this.$message.warning('请先选择申请文件')
}
try {
this.loading = true
// 1. 上传文件
const formData = new FormData()
formData.append('file', this.currentFile)
const data = await uploadFile(formData)
// 2. 将文件关联用户
await addFile({
userId: this.$store.state.user.id,
fileList: [{
fileName: data.originalFilename,
filePath: data.url,
fileType: 0,
}]
})
// 3. 提交申请
await submitProbation({
userId: this.$store.state.user.id,
// onboardingId: this.userInfo.onboardingId,
status: 1,
})
this.$message.success('申请提交成功')
this.fileList = []
} catch (error) {
this.$message.error('提交失败: ' + (error.message || error))
} finally {
this.loading = false
}
}
}
}
</script>
<style scoped>
.apply-form {
max-width: 600px;
margin: 20px auto;
}
.el-upload__tip {
color: #999;
font-size: 12px;
margin-top: 5px;
}
</style>

View File

@@ -1,293 +0,0 @@
<template>
<div class="file-manager">
<!-- 操作栏 -->
<el-row class="mb8" v-if="!readOnly">
<el-button type="primary" size="mini" @click="showAddDialog = true">添加文件</el-button>
<!-- <el-button type="danger" size="mini" :disabled="selectedFiles.length === 0" @click="handleDelete">删除选中</el-button> -->
</el-row>
<!-- 文件表格 -->
<el-table
v-loading="loading"
:data="fileList"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="fileName" label="文件名" min-width="200">
<template #default="{row}">
<div class="file-name-cell">
<span>{{ row.fileName }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="fileType" label="类型" width="120">
<template #default="{row}">
<el-tag effect="plain">{{ row.fileType }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="uploadTime" label="上传时间" width="180">
<template #default="{row}">{{ formatDate(row.uploadTime) }}</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right" v-if="!readOnly">
<template #default="{row}">
<!-- <el-button size="mini" type="text" @click="handlePreview(row)">预览</el-button> -->
<el-button size="mini" type="text" @click="handleDownload(row)">下载</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加文件对话框 -->
<el-dialog
title="添加文件"
:visible.sync="showAddDialog"
:modal="false"
width="600px"
@closed="resetUpload"
>
<el-upload
class="upload-demo"
drag
multiple
:auto-upload="false"
:on-change="handleFileChange"
:file-list="tempFiles"
:before-upload="beforeUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip">支持格式doc/docx/pdf/jpg/png单个文件不超过50MB</div>
</el-upload>
<el-form
ref="fileForm"
:model="formData"
label-width="80px"
class="file-form"
>
<el-form-item
v-for="(file, index) in tempFiles"
:key="file.uid"
:label="`文件 ${index + 1}`"
:prop="'files.' + index + '.fileName'"
:rules="{ required: true, message: '文件名不能为空', trigger: 'blur' }"
>
<div class="file-item">
<span class="file-name">{{ file.name }}</span>
<el-input
v-model="formData.files[index].fileName"
placeholder="请输入文件名"
style="width: 200px; margin-right: 10px;"
/>
<el-select
v-model="formData.files[index].fileType"
placeholder="选择类型"
>
<el-option
v-for="type in fileTypes"
:key="type"
:label="type.dictLabel"
:value="type.dictValue"
/>
</el-select>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="showAddDialog = false"> </el-button>
<el-button type="primary" @click="handleConfirmUpload">确认上传</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listDocument, addFile, uploadFile, getFileTypeList } from '@/api/oa/document'
export default {
name: 'UserFileManager',
props: {
userId: [Number, String],
readOnly: Boolean
},
data() {
return {
loading: false,
fileList: [],
selectedFiles: [],
showAddDialog: false,
tempFiles: [], // 临时存储选择的文件
formData: {
files: [] // 存储文件名和类型
},
fileTypes: []
}
},
watch: {
userId: {
immediate: true,
handler(newVal) {
newVal && this.loadFiles()
}
}
},
methods: {
async loadFiles() {
try {
this.loading = true
const res = await listDocument(this.userId)
this.fileList = res.data.fileList
console.log(this.fileList)
const fileTypes = await getFileTypeList();
this.fileTypes = fileTypes.rows;
} catch (error) {
this.$message.error('文件加载失败')
} finally {
this.loading = false
}
},
handleFileChange(file, fileList) {
this.tempFiles = fileList
// 初始化表单数据
this.formData.files = fileList.map(f => ({
fileName: f.name.replace(/\.[^/.]+$/, ""), // 去除扩展名作为默认文件名
fileType: '',
rawFile: f.raw
}))
},
beforeUpload(file) {
const isValidType = ['image/jpeg', 'image/png', 'application/pdf'].includes(file.type)
const isLt50M = file.size / 1024 / 1024 < 50
if (!isValidType) {
this.$message.error('不支持的文件格式!')
return false
}
if (!isLt50M) {
this.$message.error('文件大小不能超过50MB!')
return false
}
return false // 阻止自动上传
},
async handleConfirmUpload() {
try {
// 验证表单
console.log(this.formData.files)
// 上传所有文件
const uploadResults = await Promise.all(
this.formData.files.map(async file => {
const formData = new FormData()
formData.append('file', file.rawFile)
const res = await uploadFile(formData)
return {
fileName: file.fileName,
fileType: parseInt(file.fileType),
filepath: res.url // 假设返回结构包含url
}
})
)
// 调用添加文件接口
await addFile(this.userId, uploadResults)
this.$message.success('文件上传成功')
this.showAddDialog = false
this.loadFiles()
} catch (error) {
this.$message.error('文件上传失败: ' + (error.message || error))
}
},
async handleDelete() {
try {
const ids = this.selectedFiles.map(f => f.id)
await this.$confirm(`确定删除选中的 ${ids.length} 个文件吗?`, '提示', {
type: 'warning'
})
await this.$axios.delete('/api/files', { data: { ids } })
this.$message.success('删除成功')
this.loadFiles()
} catch (error) {
if (error !== 'cancel') {
this.$message.error('删除失败')
}
}
},
handleSelectionChange(selection) {
this.selectedFiles = selection
},
handleAdd() {
this.showAddDialog = true
},
handleUploadSuccess(res) {
if (res.code === 200) {
this.fileList.unshift(res.data)
this.$message.success('上传成功')
this.showAddDialog = false
}
},
formatSize(size) {
if (size > 1024 * 1024) {
return (size / 1024 / 1024).toFixed(1) + 'MB'
} else if (size > 1024) {
return (size / 1024).toFixed(1) + 'KB'
}
return size + 'B'
},
formatDate(timestamp) {
return new Date(timestamp).toLocaleString()
},
checkSelectable(row) {
return !this.readOnly
},
resetUpload() {
this.tempFiles = []
this.formData.files = []
this.$refs.fileForm?.resetFields()
},
handleSelectionChange(selection) {
this.selectedFiles = selection
},
}
}
</script>
<style scoped>
.file-manager {
padding: 20px;
}
.file-form {
margin-top: 20px;
}
.file-item {
display: flex;
align-items: center;
gap: 10px;
}
.file-name {
flex: none;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

View File

@@ -74,7 +74,7 @@
size="800px"
direction="rtl"
append-to-body>
<user-file-manager
<UserFileManager
:user-id="currentUser.userId"
:read-only="!hasEditPermission"
v-if="fileDrawerVisible" />
@@ -87,7 +87,7 @@
<script>
import { listUser } from "@/api/system/user";
import UserFileManager from "./FileList";
import UserFileManager from "@/components/FileList";
// import UserDetailDialog from "@/components/UserDetailDialog";
export default {

View File

@@ -30,7 +30,7 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@@ -49,16 +49,11 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="probationList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="probationList">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index"/>
<el-table-column label="姓名" align="center" prop="nickName"/>
<el-table-column label="性别" align="center" prop="sex">
<template slot-scope="scope">
<span>{{ scope.row.sex === '0' ? '男' : '女' }}</span>
</template>
</el-table-column>
<el-table-column label="部门" align="center" prop="dept.deptName"/>
<!-- <el-table-column label="部门" align="center" prop="dept.deptName"/> -->
<el-table-column label="试用期限" align="center" width="200">
<template slot-scope="scope">
<div>{{ scope.row.probationStart }} ~ {{ scope.row.probationEnd }}</div>
@@ -67,7 +62,7 @@
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<el-tag :type="statusMap[scope.row.status].type">
{{ statusMap[scope.row.status].label }}
@@ -81,7 +76,7 @@
type="text"
icon="el-icon-edit"
@click="handleRegular(scope.row)"
v-if="scope.row.status === '0'"
v-if="scope.row.status == 1"
>转正</el-button>
<el-button
size="mini"
@@ -126,14 +121,20 @@
<el-button type="primary" @click="submitRegular">确认</el-button>
</span>
</el-dialog>
<el-dialog :title="转正详情" :visible.sync="detailVisible" width="500px">
<FileList :userId="currentUserId" readonly="true" ></FileList>
</el-dialog>
</div>
</template>
<script>
// import { getProbationList, batchRegular } from '@/api/hr/probation'
import { listOnboarding, updateOnboarding } from '@/api/oa/onboarding'
import FileList from '@/components/FileList'
export default {
name: 'ProbationManage',
components: { FileList },
data() {
return {
queryParams: {
@@ -146,8 +147,12 @@ export default {
statusMap: {
'0': { label: '试用中', type: 'warning' },
'1': { label: '待审核', type: 'info' },
'2': { label: '已转正', type: 'success' }
'2': { label: '已转正', type: 'success' },
// '0': { label: '未批准', type: 'danger' },
// '1': { label: '已批准', type: 'success' }
},
showSearch: true,
loading: false,
probationList: [],
deptOptions: [],
multiple: true,
@@ -157,24 +162,47 @@ export default {
userIds: [],
effectiveDate: '',
remark: ''
}
},
currentUserId: '',
detailVisible: false,
total: 0,
}
},
mounted() {
this.getList();
console.log('挂在审核')
},
methods: {
getList() {
// getProbationList(this.queryParams).then(res => {
// this.probationList = res.rows
// this.total = res.total
// })
listOnboarding(this.queryParams).then(res => {
this.probationList = res.rows
this.total = res.total
})
},
handleRegular(row) {
this.form = {
userIds: [row.userId],
effectiveDate: '',
remark: ''
}
this.dialogTitle = `转正操作 - ${row.nickName}`
this.dialogVisible = true
// this.form = {
// userIds: [row.userId],
// effectiveDate: '',
// remark: ''
// }
// this.dialogTitle = `转正操作 - ${row.nickName}`
// this.dialogVisible = true
console.log('转正操作', row)
const joiningDate = new Date()
// 格式化为 YYYY-MM-DD
const year = joiningDate.getFullYear()
const month = String(joiningDate.getMonth() + 1).padStart(2, '0')
const day = String(joiningDate.getDate()).padStart(2, '0')
const formattedDate = `${year}-${month}-${day}`
updateOnboarding({
// onboardingId: row.onboardingId,
userId: row.userId,
status: 2,
joiningDate: formattedDate
}).then(res => {
this.getList()
this.$message.success('转正成功')
})
},
handleBatchRegular() {
this.form.userIds = this.selectedIds
@@ -192,6 +220,13 @@ export default {
if (days > 7) return 'success'
if (days > 3) return 'warning'
return 'danger'
},
handleDetail(row) {
this.currentUserId = row.userId;
this.detailVisible = true
},
resetQuery() {
}
}
}

View File

@@ -1,14 +1,6 @@
<template>
<div class="container">
<!-- 人事管理界面 -->
<div v-if="userRole === 'HR'">
<ProbationManage />
</div>
<!-- 员工申请界面 -->
<div v-else>
<ProbationApply />
</div>
<ProbationManage />
</div>
</template>
@@ -19,7 +11,7 @@ import ProbationManage from "./ProbationManage";
export default {
data() {
return {
userRole: 'HR', // 实际应从登录信息获取
userRole: 'DM', // 实际应从登录信息获取
}
},
components: {