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 16:58:37 +08:00
parent ea298f00f6
commit a4faa6b48a
4 changed files with 281 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ruoyi-ui/.env.development
View File

@@ -5,8 +5,8 @@ VUE_APP_TITLE = 福安德综合办公系统
ENV = 'development'
# 若依管理系统/开发环境
VUE_APP_BASE_API = '/prod-api'
# VUE_APP_BASE_API = 'http://110.41.139.73:8080'
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = 'http://110.41.139.73:8080'
# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/'

24
ruoyi-ui/src/api/oa/document.js
View File

@@ -31,4 +31,28 @@ export function addFile(userId, fileList) {
fileList
}
})
}
/**
* 文件上传
*/
export function uploadFile(file) {
return request({
url: '/common/upload',
method: 'post',
data: file,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 获取文件类型字典
*/
export function getFileTypeList() {
return request({
url: '/system/dict/data/list?dictType=people_file_type',
method: 'get'
})
}

242
ruoyi-ui/src/views/oa/peoples/document/FileList.vue
View File

@@ -1,15 +1,10 @@
<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-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
@@ -18,11 +13,10 @@
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
<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">
<i :class="fileIcon(row.fileType)" class="file-icon"></i>
<span>{{ row.fileName }}</span>
</div>
</template>
@@ -32,50 +26,90 @@
<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="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-dialog
title="添加文件"
:visible.sync="showAddDialog"
:modal="false"
width="600px"
@closed="resetUpload"
>
<el-upload
class="upload-demo"
drag
:action="uploadUrl"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
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" slot="tip">支持格式：doc/docx/pdf/jpg/png，单个文件不超过50MB</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: {
type: [Number, String],
required: true
},
readOnly: {
type: Boolean,
default: false
}
userId: [Number, String],
readOnly: Boolean
},
data() {
return {
@@ -83,14 +117,18 @@ export default {
fileList: [],
selectedFiles: [],
showAddDialog: false,
uploadUrl: `/api/files/upload?userId=${this.userId}`
tempFiles: [], // 临时存储选择的文件
formData: {
files: [] // 存储文件名和类型
},
fileTypes: []
}
},
watch: {
userId: {
immediate: true,
handler(newVal) {
if (newVal) this.loadFiles()
newVal && this.loadFiles()
}
}
},
@@ -98,8 +136,11 @@ export default {
async loadFiles() {
try {
this.loading = true
const res = await this.$axios.get(`/api/files/${this.userId}`)
this.fileList = res.data
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 {
@@ -107,12 +148,61 @@ export default {
}
},
handleSelectionChange(selection) {
this.selectedFiles = selection
handleFileChange(file, fileList) {
this.tempFiles = fileList
// 初始化表单数据
this.formData.files = fileList.map(f => ({
fileName: f.name.replace(/\.[^/.]+$/, ""), // 去除扩展名作为默认文件名
fileType: '',
rawFile: f.raw
}))
},
handleAdd() {
this.showAddDialog = true
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() {
@@ -132,6 +222,14 @@ export default {
}
},
handleSelectionChange(selection) {
this.selectedFiles = selection
},
handleAdd() {
this.showAddDialog = true
},
handleUploadSuccess(res) {
if (res.code === 200) {
this.fileList.unshift(res.data)
@@ -140,32 +238,6 @@ export default {
}
},
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'
@@ -181,7 +253,17 @@ export default {
checkSelectable(row) {
return !this.readOnly
}
},
resetUpload() {
this.tempFiles = []
this.formData.files = []
this.$refs.fileForm?.resetFields()
},
handleSelectionChange(selection) {
this.selectedFiles = selection
},
}
}
</script>
@@ -191,31 +273,21 @@ export default {
padding: 20px;
}
.operation-bar {
margin-bottom: 15px;
.file-form {
margin-top: 20px;
}
.file-item {
display: flex;
align-items: center;
gap: 12px;
gap: 10px;
}
.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;
.file-name {
flex: none;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

283
ruoyi-ui/src/views/oa/peoples/document/index.vue
View File

@@ -1,26 +1,18 @@
<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-input clearable v-model="queryParams.nickname" placeholder="根据姓名查询" />
</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-option label="男" value="0" />
<el-option label="女" value="1" />
</el-select>
</el-form-item>
<el-form-item label="学历" prop="highestDegree">
<el-input
v-model="queryParams.highestDegree"
placeholder="请输入学历"
clearable
@keyup.enter.native="handleQuery"
/>
<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>
@@ -28,251 +20,172 @@
</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-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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
</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" 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>
<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" prop="joiningDate" width="180">
<template slot-scope="scope">
<span>{{scope.row.joiningDate!==null?scope.row.joiningDate:'未完成审批流程'}}</span>
<span>{{ 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>
<el-button size="mini" type="text" icon="el-icon-add"
@click="handleFileManagement(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"
/>
<!-- 分页 -->
<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 :title="`${currentUser.nickName} - 文件管理`"
:visible.sync="fileDrawerVisible"
size="800px"
direction="rtl"
append-to-body>
<user-file-manager
:user-id="currentUser.userId"
:read-only="!hasEditPermission"
v-if="fileDrawerVisible" />
</el-drawer>
<el-dialog :open="addFileDialog" title="添加文件">
<el-form :model="fileForm" label-width="80px">
</el-form>
</el-dialog>
<!-- 人员详情对话框 -->
<!-- <user-detail-dialog :visible.sync="detailDialogVisible" :user-id="currentUser.userId" /> -->
</div>
</template>
<script>
import { listOnboarding, getOnboarding, delOnboarding, addOnboarding, updateOnboarding } from "@/api/oa/onboarding";
import {addUser, listUser, tempRole} from "@/api/system/user";
import { listUser } from "@/api/system/user";
import UserFileManager from "./FileList";
// import UserDetailDialog from "@/components/UserDetailDialog";
export default {
name: "Onboarding",
dicts: ['joining_status'],
components: {
UserFileManager,
// UserDetailDialog
},
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: '',
highestDegree: '',
userId: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
userName: [
{ required: true, message: "系统账号不能为空", trigger: "blur" }
],
nickName: [
{ required: true, message: "姓名不能为空", trigger: "blur" }
],
},
fileList: [],
// 页面状态
loading: true,
showSearch: true,
fileDrawerVisible: false,
detailDialogVisible: false,
// 数据
peopleList: [],
total: 0,
currentUser: {},
// 权限状态
hasEditPermission: false
};
},
created() {
this.getList();
this.checkPermissions();
},
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();
/** 权限检查 */
checkPermissions() {
// 根据实际权限系统实现，示例使用固定值
this.hasEditPermission = this.$store.getters.roles.includes('HR');
},
// 表单重置
reset() {
this.form = {
onboardingId: undefined,
idPhoto: undefined,
userId: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
remark: undefined,
delFlag: undefined
};
this.resetForm("form");
/** 打开文件管理 */
handleFileManagement(row) {
this.currentUser = row;
this.fileDrawerVisible = true;
this.hasEditPermission = true;
},
/** 搜索按钮操作 */
/** 打开详情 */
handleDetail(row) {
this.currentUser = row;
this.fileDrawerVisible = true;
this.hasEditPermission = false;
},
/** 搜索 */
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
this.selectedUsers = selection;
},
addFile() {
},
deleteFiles() {
},
/** 导出按钮操作 */
/** 导出数据 */
handleExport() {
this.download('system/onboarding/export', {
...this.queryParams
}, `onboarding_${new Date().getTime()}.xlsx`)
}, `onboarding_${new Date().getTime()}.xlsx`);
}
}
};
</script>
<style scoped>
/* 可根据需要添加自定义样式 */
.drawer-footer {
margin-top: 20px;
text-align: right;
}
</style>