DeXun/fad_oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 档案管理前端

Browse Source
This commit is contained in:
flower-string
2025-03-08 15:22:29 +08:00
parent 4a1009e02e
commit ea298f00f6
7 changed files with 1230 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
ruoyi-ui/src/api/oa/document.js Normal file
View File

@@ -0,0 +1,34 @@
import request from '@/utils/request'
// 查询用户文件列表
export function listDocument(userId) {
return request({
url: '/oa/files/' + userId,
method: 'get',
})
}
/**
* 查询所有用户档案
*/
export function QueryDocument(query) {
return request({
url: '/oa/files/list',
method: 'get',
params: query
})
}
/**
* 为用户添加文件
*/
export function addFile(userId, fileList) {
return request({
url: '/oa/files',
method: 'post',
data: {
userId,
fileList
}
})
}

221
ruoyi-ui/src/views/oa/peoples/document/FileList.vue Normal file
View File

@@ -0,0 +1,221 @@
<template>
<div class="file-manager">
<!-- 操作栏 -->
<div class="operation-bar" v-if="!readOnly">
<el-button type="primary" size="mini" @click="handleAdd">添加文件</el-button>
<el-button type="danger" size="mini" :disabled="selectedFiles.length === 0" @click="handleDelete">删除选中</el-button>
<el-button size="mini" @click="handlePrint">打印列表</el-button>
<div class="selection-count" v-if="selectedFiles.length > 0">
已选 {{ selectedFiles.length }} 个文件
</div>
</div>
<!-- 文件表格 -->
<el-table
v-loading="loading"
:data="fileList"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
<el-table-column prop="fileName" label="文件名" min-width="200">
<template #default="{row}">
<div class="file-name-cell">
<i :class="fileIcon(row.fileType)" class="file-icon"></i>
<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="fileSize" label="大小" width="120">
<template #default="{row}">{{ formatSize(row.fileSize) }}</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" width="30%">
<el-upload
class="upload-demo"
drag
:action="uploadUrl"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">支持格式：doc/docx/pdf/jpg/png，单个文件不超过50MB</div>
</el-upload>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'UserFileManager',
props: {
userId: {
type: [Number, String],
required: true
},
readOnly: {
type: Boolean,
default: false
}
},
data() {
return {
loading: false,
fileList: [],
selectedFiles: [],
showAddDialog: false,
uploadUrl: `/api/files/upload?userId=${this.userId}`
}
},
watch: {
userId: {
immediate: true,
handler(newVal) {
if (newVal) this.loadFiles()
}
}
},
methods: {
async loadFiles() {
try {
this.loading = true
const res = await this.$axios.get(`/api/files/${this.userId}`)
this.fileList = res.data
} catch (error) {
this.$message.error('文件加载失败')
} finally {
this.loading = false
}
},
handleSelectionChange(selection) {
this.selectedFiles = selection
},
handleAdd() {
this.showAddDialog = true
},
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('删除失败')
}
}
},
handleUploadSuccess(res) {
if (res.code === 200) {
this.fileList.unshift(res.data)
this.$message.success('上传成功')
this.showAddDialog = false
}
},
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 true
},
fileIcon(type) {
const iconMap = {
'pdf': 'el-icon-document',
'doc': 'el-icon-document-check',
'docx': 'el-icon-document-check',
'jpg': 'el-icon-picture',
'png': 'el-icon-picture'
}
return iconMap[type.toLowerCase()] || 'el-icon-document'
},
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
}
}
}
</script>
<style scoped>
.file-manager {
padding: 20px;
}
.operation-bar {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.selection-count {
margin-left: auto;
color: #666;
font-size: 14px;
}
.file-name-cell {
display: flex;
align-items: center;
gap: 8px;
}
.file-icon {
font-size: 18px;
color: #409EFF;
}
.upload-demo {
text-align: center;
}
</style>

278
ruoyi-ui/src/views/oa/peoples/document/index.vue Normal file
View File

@@ -0,0 +1,278 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="姓名" prop="nickname">
<el-input
clearable
v-model="queryParams.nickname"
placeholder="根据姓名查询"
></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="queryParams.sex" placeholder="请选择性别">
<el-option label="男" value="0"></el-option>
<el-option label="女" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="学历" prop="highestDegree">
<el-input
v-model="queryParams.highestDegree"
placeholder="请输入学历"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:onboarding:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="peopleList" @selection-change="handleSelectionChange">
<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 v-if="scope.row.sex === '0'">男</span>
<span v-else>女</span>
</template>
</el-table-column>
<el-table-column label="部门" align="center" prop="dept.deptName"/>
<el-table-column label="入职日期" align="center" prop="joiningDate" width="180">
<template slot-scope="scope">
<span>{{scope.row.joiningDate!==null?scope.row.joiningDate:'未完成审批流程'}}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-add"
@click="openAddFile(scope.row)"
>添加文件</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-detail"
@click="handleDetail(scope.row)"
>详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<el-drawer
title="人员详情"
:visible.sync="open"
size="600px"
direction="rtl"
append-to-body
>
<!-- 操作按钮组 -->
<template #title>
<div class="drawer-header" v-if="!readOnly">
<span class="el-drawer__title">人员详情</span>
<div class="action-buttons">
<el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
<el-button type="danger" size="mini" @click="handleDelete">删除</el-button>
<el-button size="mini" @click="handlePrint">打印</el-button>
</div>
</div>
</template>
<!-- 内容区域 -->
<div class="drawer-content">
<!-- 多选操作 -->
<div class="selection-info" v-if="selectedItems.length">
已选择 {{ selectedItems.length }} 项
</div>
<!-- 详细信息列表 -->
<el-list :model="form" class="info-list">
<el-checkbox-group v-model="selectedItems">
<section class="info-section">
<el-list-item v-for="item in fileList" :key="item.id">
<template #default>
<div class="list-item-container">
<el-checkbox :label="item.label" class="list-checkbox"/>
<div class="info-label">{{ item.label }}：</div>
<div class="info-value">{{ item.value }}</div>
</div>
</template>
</el-list-item>
</section>
</el-checkbox-group>
</el-list>
</div>
</el-drawer>
<el-dialog :open="addFileDialog" title="添加文件">
<el-form :model="fileForm" label-width="80px">
</el-form>
</el-dialog>
</div>
</template>
<script>
import { listOnboarding, getOnboarding, delOnboarding, addOnboarding, updateOnboarding } from "@/api/oa/onboarding";
import {addUser, listUser, tempRole} from "@/api/system/user";
export default {
name: "Onboarding",
dicts: ['joining_status'],
data() {
return {
// 按钮loading
buttonLoading: false,
selectedItems: [],
readonly: true,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 入职管理表格数据
onboardingList: [],
peopleList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
addFileDialog: false,
fileForm: {},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
nickname: '',
sex: '',
userId: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
userName: [
{ required: true, message: "系统账号不能为空", trigger: "blur" }
],
nickName: [
{ required: true, message: "姓名不能为空", trigger: "blur" }
],
},
fileList: [],
};
},
created() {
this.getList();
},
methods: {
/** 新增入职员工界面 */
// toAddOnboarding(){
// this.$router.push({
// path: '/people/addOnboarding',
// })
// },
/** 查询人员列表列表 */
getList() {
this.loading = true;
listUser(this.queryParams).then(response => {
console.log(response);
this.peopleList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
onboardingId: undefined,
idPhoto: undefined,
userId: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
remark: undefined,
delFlag: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
openAddFile(row) {
console.log(row);
this.open = true;
this.readOnly = false;
},
openDetail(row) {
console.log(row);
this.open = true;
this.readOnly = true;
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.onboardingId)
this.single = selection.length!==1
this.multiple = !selection.length
},
addFile() {
},
deleteFiles() {
},
/** 导出按钮操作 */
handleExport() {
this.download('system/onboarding/export', {
...this.queryParams
}, `onboarding_${new Date().getTime()}.xlsx`)
}
}
};
</script>

340
ruoyi-ui/src/views/oa/peoples/document/update.vue Normal file
View File

@@ -0,0 +1,340 @@
<template>
<div class="main" v-loading="loading">
<div class="container">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="first">
<div class="">
<div style="display: flex;justify-content: space-between">
<h1 class="">员工入职登记信息表</h1>
<div style="display: flex;justify-content:center;align-items: center">
<el-button type="primary" @click="saveFormToOnboarding">
<i class="el-icon-check"></i>保存
</el-button>
</div>
</div>
<div class="">
<h2 class="">基础信息</h2>
<div style="display: flex">
<div>
<image-upload v-model="form.idPhoto" style="display: flex;justify-content:center;flex-direction: column;align-items: center;"/>
</div>
<div class="">
<div class="">
<el-row :gutter="15" style="margin:0px 30px">
<el-form ref="form" :model="form" :rules="rules">
<el-col :span="12">
<el-form-item label="姓名" required >
<el-input v-model="form.nickName" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="系统账号" required >
<el-input v-model="form.userName" placeholder="请输入办公系统账号" />
</el-form-item>
<el-form-item label="入职部门" required>
<el-select v-model="form.deptId" placeholder="请选择归属部门" class="w-full">
<el-option
v-for="item in deptOptions"
:label="item.label" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="身份证号" required>
<el-input v-model="form.idCard" placeholder="请输入身份证号" />
</el-form-item>
<el-form-item label="电话" required>
<el-input v-model="form.phonenumber" placeholder="请输入电话" />
</el-form-item>
<!-- <el-form-item label="职位">-->
<!-- <el-select v-model="form.position" placeholder="请选择职位" class="w-full">-->
<!-- <el-option label="开发工程师" value="developer" />-->
<!-- <el-option label="产品经理" value="pm" />-->
<!-- <el-option label="设计师" value="designer" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="入职日期" required>
<el-date-picker
v-model="form.joiningDate"
type="date"
placeholder="请选择入职日期"
class="w-full"
value-format="yyyy-MM-dd"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" required>
<el-radio-group v-model="form.sex">
<el-radio label="0">男</el-radio>
<el-radio label="1">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="银行卡号" required >
<el-input placeholder="请输入银行卡号" v-model="form.bankCard"></el-input>
</el-form-item>
<el-form-item label="最高学历" required>
<el-radio-group v-model="form.highestDegree">
<el-radio label="初中">初中</el-radio>
<el-radio label="高中">高中</el-radio>
<el-radio label="大专">大专</el-radio>
<el-radio label="本科">本科</el-radio>
<el-radio label="硕士">硕士</el-radio>
<el-radio label="博士">博士</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="民族">
<el-select v-model="form.ethnicity" placeholder="请选择民族" class="w-full">
<el-option label="汉族" value="han" />
<el-option label="少数民族" value="minority" />
</el-select>
</el-form-item>
<el-form-item label="出生日期" required>
<el-date-picker
v-model="form.birthDate"
type="date"
placeholder="请选择出生日期"
class="w-full"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="转正日期">
<el-date-picker
v-model="form.confirmDate"
type="date"
placeholder="请选择转正日期"
class="w-full"
value-format="yyyy-MM-dd"
/>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</div>
</div>
</div>
<el-divider></el-divider>
<div class="border-b pb-4">
<el-tabs>
<el-tab-pane label="扩展信息">
<div class="grid grid-cols-3 gap-6">
<el-form ref="form" :model="form" :rules="rules">
<el-row :gutter="18">
<el-col span="8">
<el-form-item label="婚姻状况">
<el-radio-group v-model="form.maritalStatus">
<el-radio label="未婚">未婚</el-radio>
<el-radio label="已婚">已婚</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="政治面貌">
<el-radio-group v-model="form.politicalStatus">
<el-radio label="群众">群众</el-radio>
<el-radio label="党员">党员</el-radio>
<el-radio label="预备党员">预备党员</el-radio>
<el-radio label="团员">团员</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col span="8">
<el-form-item label="身高">
<el-input v-model="form.height" placeholder="请输入身高（单位厘米）" />
</el-form-item>
<el-form-item label="体重">
<el-input v-model="form.weight" placeholder="请输入体重（单位千克）" />
</el-form-item>
</el-col>
<el-col span="8">
<el-form-item label="编制类型" >
<el-radio-group v-model="form.staffType">
<el-radio label="实习">实习</el-radio>
<el-radio label="试用">试用</el-radio>
<el-radio label="正式">正式</el-radio>
<el-radio label="兼职">兼职</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="户籍信息">
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="家庭住址">
<el-input v-model="form.address" placeholder="请输入家庭住址" />
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="紧急联系人">
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="紧急联系人1">
<el-input v-model="form.emergencyContact1" placeholder="请输入紧急联系人手机号" />
</el-form-item>
<el-form-item label="紧急联系人2">
<el-input v-model="form.emergencyContact2" placeholder="请输入紧急联系人手机号" />
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="其他">
<div class="p-4">其他内容(待拓展)</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="补充资料上传" name="second">
<div>
<div style="display: flex;justify-content: flex-end;align-items: center">
<el-button type="primary" @click="saveFormToOnboarding">
<i class="el-icon-check"></i>保存
</el-button>
</div>
<el-row :gutter="15">
<el-col span="15">
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="是否完成招聘与面试">
<el-radio-group v-model="form.recruitmentCompleted">
<el-radio :label="0">未完成</el-radio>
<el-radio :label="1">已完成</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否发放offer">
<el-radio-group v-model="form.offerIssued">
<el-radio :label="0">未发放</el-radio>
<el-radio :label="1">已发放</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否签约合同">
<el-radio-group v-model="form.contractSigned">
<el-radio :label="0">未完成</el-radio>
<el-radio :label="1">已完成</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否提交入职材料">
<el-radio-group v-model="form.documentsSubmitted">
<el-radio :label="0">未提交</el-radio>
<el-radio :label="1">已提交</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否完成入职培训">
<el-radio-group v-model="form.orientationCompleted">
<el-radio :label="0">未完成</el-radio>
<el-radio :label="1">已完成</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="入职状态">
<el-select v-model="form.joiningStatus" placeholder="请选择入职状态">
<el-option
v-for="dict in dict.type.joining_status"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否完成入职准备（权限分配工位分配等）">
<el-radio-group v-model="form.workConditionsPrepared">
<el-radio :label="0">未完成</el-radio>
<el-radio :label="1">已完成</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" placeholder="请输入备注" type="textarea"></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import {getOnboarding, updateOnboarding} from "@/api/oa/onboarding";
import {deptTreeSelect} from "@/api/system/user";
export default {
// dicts: ['joining_status'],
data() {
return {
activeName:"first",
loading:false,
// 表单参数
form: {},
// 表单校验
rules: {
onboardingId: [
{ required: true, message: "入职记录ID不能为空", trigger: "blur" }
],
highestDegree: [
{ required: true, message: "最高学历不能为空", trigger: "blur" }
],
},
deptOptions:[]
};
},
created() {
this.getDeptList();
this.getOnboardingById(this.$route.params.onboardingId);
},
methods: {
getDeptList(){
deptTreeSelect().then(response => {
this.deptOptions = response.data[0].children;
});
},
getOnboardingById(id){
getOnboarding(id).then(response => {
this.form = response.data;
})
},
saveFormToOnboarding(){
this.loading = true;
updateOnboarding(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.loading = false;
this.goBack()
})
},
/** 返回页面 */
goBack() {
// 关闭当前标签页并返回上个页面
this.$tab.closePage(this.$route)
this.$router.back()
},
}
};
</script>
<style scoped>
.main{
padding: 10px;
background-color: #f6f6f6;
}
.container{
margin: 10px;
padding: 10px;
background-color: white;
border-radius: 10px;
}
</style>

129
ruoyi-ui/src/views/oa/peoples/status/ProbationApply.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<div class="app-container apply-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>转正申请</span>
<el-tag :type="statusType">{{ statusText }}</el-tag>
</div>
<el-steps :active="activeStep" finish-status="success">
<el-step title="填写申请" />
<el-step title="部门审批" />
<el-step title="HR确认" />
</el-steps>
<el-form :model="form" :rules="rules" ref="form" class="apply-form">
<el-form-item label="试用总结" prop="summary">
<el-input
type="textarea"
:rows="5"
v-model="form.summary"
placeholder="请总结试用期间的工作成果、收获与不足"
/>
</el-form-item>
<el-form-item label="附件材料">
<el-upload
action="/api/upload"
multiple
:limit="3"
:file-list="fileList"
:on-success="handleUploadSuccess"
>
<el-button icon="el-icon-upload">上传文件</el-button>
<div class="el-upload__tip">支持PDF/DOC/PPT格式，单个文件不超过20MB</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交申请</el-button>
<el-button @click="saveDraft">保存草稿</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 申请记录 -->
<el-card class="box-card history-card">
<div slot="header">申请记录</div>
<el-table :data="historyList">
<el-table-column prop="applyDate" label="申请时间" width="180" />
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<el-tag :type="statusMap[scope.row.status].type">
{{ statusMap[scope.row.status].label }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="comment" label="审批意见" />
</el-table>
</el-card>
</div>
</template>
<script>
// import { getApplyInfo, submitApply } from '@/api/user/probation'
export default {
name: 'ProbationApply',
data() {
return {
activeStep: 1,
form: {
summary: '',
attachments: []
},
rules: {
summary: [
{ required: true, message: '请输入试用总结', trigger: 'blur' },
{ min: 100, message: '总结内容不少于100字', trigger: 'blur' }
]
},
fileList: [],
historyList: [],
statusMap: {
0: { label: '草稿', type: 'info' },
1: { label: '待审批', type: 'warning' },
2: { label: '已通过', type: 'success' },
3: { label: '已驳回', type: 'danger' }
}
}
},
computed: {
statusType() {
return this.historyList[0]?.status ? this.statusMap[this.historyList[0].status].type : 'info'
},
statusText() {
return this.historyList[0]?.status ? this.statusMap[this.historyList[0].status].label : '未申请'
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// submitApply(this.form).then(() => {
// this.$message.success('申请已提交')
// this.loadHistory()
// })
}
})
},
handleUploadSuccess(res) {
this.form.attachments.push(res.data)
},
loadHistory() {
// getApplyInfo().then(res => {
// this.historyList = res.data
// })
}
}
}
</script>
<style scoped>
.apply-form {
margin-top: 20px;
}
.history-card {
margin-top: 20px;
}
</style>

198
ruoyi-ui/src/views/oa/peoples/status/ProbationManage.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="姓名" prop="nickname">
<el-input
clearable
v-model="queryParams.nickname"
placeholder="根据姓名查询"
></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="试用状态">
<el-option label="试用中" value="0"></el-option>
<el-option label="待审核" value="1"></el-option>
<el-option label="已转正" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="部门" prop="deptId">
<el-select
v-model="queryParams.deptId"
placeholder="选择部门"
clearable
>
<el-option
v-for="dept in deptOptions"
:key="dept.deptId"
:label="dept.deptName"
:value="dept.deptId"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-check"
size="mini"
@click="handleBatchRegular"
:disabled="multiple"
>批量转正</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="probationList" @selection-change="handleSelectionChange">
<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" width="200">
<template slot-scope="scope">
<div>{{ scope.row.probationStart }} ~ {{ scope.row.probationEnd }}</div>
<el-tag :type="getRemainingDaysStatus(scope.row.remainingDays)">
剩余{{ scope.row.remainingDays }}天
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-tag :type="statusMap[scope.row.status].type">
{{ statusMap[scope.row.status].label }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleRegular(scope.row)"
v-if="scope.row.status === '0'"
>转正</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 转正对话框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
<el-form :model="form" label-width="80px">
<el-form-item label="生效日期">
<el-date-picker
v-model="form.effectiveDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择转正日期"
/>
</el-form-item>
<el-form-item label="转正意见">
<el-input
type="textarea"
:rows="4"
v-model="form.remark"
placeholder="请输入转正意见"
/>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitRegular">确认</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// import { getProbationList, batchRegular } from '@/api/hr/probation'
export default {
name: 'ProbationManage',
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 10,
nickname: '',
status: '',
deptId: null
},
statusMap: {
'0': { label: '试用中', type: 'warning' },
'1': { label: '待审核', type: 'info' },
'2': { label: '已转正', type: 'success' }
},
probationList: [],
deptOptions: [],
multiple: true,
dialogVisible: false,
dialogTitle: '',
form: {
userIds: [],
effectiveDate: '',
remark: ''
}
}
},
methods: {
getList() {
// getProbationList(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
},
handleBatchRegular() {
this.form.userIds = this.selectedIds
this.dialogTitle = `批量转正 (${this.selectedIds.length}人)`
this.dialogVisible = true
},
submitRegular() {
// batchRegular(this.form).then(() => {
// this.$message.success('操作成功')
// this.dialogVisible = false
// this.getList()
// })
},
getRemainingDaysStatus(days) {
if (days > 7) return 'success'
if (days > 3) return 'warning'
return 'danger'
}
}
}
</script>

30
ruoyi-ui/src/views/oa/peoples/status/index.vue Normal file
View File

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