前后端代码解构
This commit is contained in:
@@ -1,128 +0,0 @@
|
||||
<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>
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" label-width="80px">
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="formData.type">
|
||||
<el-option label="其他" :value="0" />
|
||||
<el-option label="旷工" :value="3" />
|
||||
<el-option label="请假" :value="1" />
|
||||
<el-option label="迟到" :value="4" />
|
||||
<el-option label="早退" :value="6" />
|
||||
<el-option label="未打卡" :value="5" />
|
||||
<el-option label="出差" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="奖惩标记">
|
||||
<el-select v-model="formData.flag">
|
||||
<el-option label="奖励" :value="1" />
|
||||
<el-option label="惩罚" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="金额" prop="price">
|
||||
<el-input-number v-model="formData.price" :min="0" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="日期" prop="signTime">
|
||||
<el-date-picker v-model="formData.signTime" type="date" format="yyyy-MM-DD" placeholder="选择日期" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="reason">
|
||||
<el-input v-model="formData.reason" type="textarea" />
|
||||
</el-form-item>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认创建</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
type: '',
|
||||
flag: 0,
|
||||
reason: '',
|
||||
signTime: '',
|
||||
price: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.$emit('submit', this.formData)
|
||||
this.resetForm();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.formData = {
|
||||
type: '',
|
||||
flag: 0,
|
||||
reason: '',
|
||||
signTime: '',
|
||||
price: 0
|
||||
}
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
this.resetForm();
|
||||
this.$emit('cancel')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
v-loading="loading"
|
||||
@selection-change="$emit('selection-change', $event)"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="nickName" label="姓名" />
|
||||
<el-table-column prop="realSalary" label="实发工资" />
|
||||
<el-table-column prop="baseSalary" label="基本工资" />
|
||||
<el-table-column prop="payTime" label="发薪日期" />
|
||||
<el-table-column label="操作" width="180">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button size="mini" @click="$emit('detail', row)">详情</el-button>
|
||||
<!-- <el-button size="mini" type="danger" @click="$emit('delete', row)">删除</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
:current-page="pagination.page"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@current-change="page => $emit('page-change', { page, pageSize: pagination.pageSize })"
|
||||
@size-change="pageSize => $emit('page-change', { page: 1, pageSize })"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Array, // 全部数据
|
||||
loading: Boolean,
|
||||
pagination: Object // 包含 page/pageSize
|
||||
},
|
||||
computed: {
|
||||
// 前端分页计算
|
||||
tableData() {
|
||||
const start = (this.pagination.page - 1) * this.pagination.pageSize
|
||||
const end = start + this.pagination.pageSize
|
||||
const newData = this.data.slice(start, end)
|
||||
return newData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,282 +0,0 @@
|
||||
<template>
|
||||
<div class="salary-container">
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row class="operation-bar">
|
||||
<el-col :span="12" class="text-right">
|
||||
<el-date-picker
|
||||
v-model="currentMonth"
|
||||
type="month"
|
||||
value-format="yyyy-MM"
|
||||
@change="handleMonthChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 工资类型切换 -->
|
||||
<el-tabs v-model="activeTab" @tab-click="fetchData">
|
||||
<el-tab-pane label="员工工资" name="staff">
|
||||
<salary-table
|
||||
:data="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@selection-change="handleSelection"
|
||||
@detail="showDetail"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="工人工资" name="worker">
|
||||
<salary-table
|
||||
:data="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@selection-change="handleSelection"
|
||||
@detail="showDetail"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<el-drawer
|
||||
:title="'奖惩详情'"
|
||||
:visible.sync="dialogVisible"
|
||||
size="50%"
|
||||
>
|
||||
<salary-form @submit="handleSubmit" @cancel="dialogVisible = false"></salary-form>
|
||||
<el-table :data="salaryDetails">
|
||||
<el-table-column label="奖惩标记" prop="flag">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.flag === 1 ? 'success' : 'danger'"
|
||||
disable-transitions
|
||||
>
|
||||
{{ scope.row.flag === 1 ? '奖励' : '惩罚' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="理由" prop="reason" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
placement="left"
|
||||
width="400"
|
||||
trigger="hover"
|
||||
:content="scope.row.reason"
|
||||
:disabled="!scope.row.reason || scope.row.reason.length <= 50"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="text-ellipsis">
|
||||
{{ truncateText(scope.row.reason) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 自定义内容区域 -->
|
||||
<div class="reason-popover">
|
||||
<div class="popover-header">
|
||||
<span>详细理由</span>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleCopy(scope.row.reason)"
|
||||
>
|
||||
<i class="el-icon-document-copy"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="popover-content">
|
||||
{{ scope.row.reason }}
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="涉及时间" prop="signTime"></el-table-column>
|
||||
<el-table-column label="涉及金额" prop="price"></el-table-column>
|
||||
<el-table-column label="类型" prop="type"></el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SalaryTable from './components/SalaryTable'
|
||||
import SalaryForm from './components/SalaryForm'
|
||||
import {
|
||||
getCalcHistory,
|
||||
getWorkersCalcHistory,
|
||||
deleteSalaryItem,
|
||||
createSalaryItem,
|
||||
getSalaryItemDetail
|
||||
} from '@/api/oa/salary'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SalaryTable,
|
||||
SalaryForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'staff',
|
||||
currentMonth: this.getDefaultMonth(),
|
||||
tableData: [],
|
||||
loading: false,
|
||||
pagination: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
selectedRows: [],
|
||||
dialogVisible: false,
|
||||
dialogMode: 'add',
|
||||
currentEditData: null,
|
||||
salaryDetails: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
getDefaultMonth() {
|
||||
const d = new Date()
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
|
||||
},
|
||||
|
||||
truncateText(text) {
|
||||
if (!text) return '-'
|
||||
return text.length > 20
|
||||
? text.substring(0, 20) + '...'
|
||||
: text
|
||||
},
|
||||
|
||||
async fetchData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
payTime: `${this.currentMonth}-01`,
|
||||
pageNum: this.pagination.page,
|
||||
pageSize: this.pagination.pageSize
|
||||
}
|
||||
|
||||
const api = this.activeTab === 'staff' ? getCalcHistory : getWorkersCalcHistory
|
||||
const res = await api(params)
|
||||
this.tableData = res.rows
|
||||
this.pagination.total = res.total
|
||||
} catch (error) {
|
||||
this.$message.error('数据加载失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
handleSelection(selection) {
|
||||
this.selectedRows = selection
|
||||
},
|
||||
|
||||
async handleDelete(row) {
|
||||
try {
|
||||
await this.$confirm('确认删除该记录吗？', '提示', { type: 'warning' })
|
||||
await deleteSalaryItem(row.salaryItemId)
|
||||
this.$message.success('删除成功')
|
||||
this.fetchDetail(this.currentEditData.salaryId)
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
openDialog(mode, row = null) {
|
||||
this.dialogMode = mode
|
||||
this.currentEditData = row ? { ...row } : null
|
||||
this.dialogVisible = true
|
||||
},
|
||||
|
||||
async showDetail(row) {
|
||||
this.dialogVisible = true;
|
||||
this.currentEditData = row;
|
||||
this.fetchDetail(row.salaryId)
|
||||
},
|
||||
|
||||
fetchDetail(id) {
|
||||
console.log('获取详情')
|
||||
getSalaryItemDetail(id).then(res => {
|
||||
this.salaryDetails = res.rows;
|
||||
})
|
||||
},
|
||||
|
||||
async handleSubmit(formData) {
|
||||
console.log(formData);
|
||||
const result = await createSalaryItem({
|
||||
...formData,
|
||||
salaryId: this.currentEditData.salaryId
|
||||
});
|
||||
this.fetchDetail(this.currentEditData.salaryId)
|
||||
},
|
||||
|
||||
handlePageChange({ page, pageSize }) {
|
||||
this.pagination.page = page
|
||||
this.pagination.pageSize = pageSize
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
handleMonthChange() {
|
||||
this.pagination.page = 1
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.salary-container {
|
||||
padding: 20px;
|
||||
}
|
||||
.operation-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-ellipsis {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 内容容器 */
|
||||
.reason-popover {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.popover-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* 内容样式 */
|
||||
.popover-content {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 文本省略 */
|
||||
.text-ellipsis {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
@@ -1,191 +0,0 @@
|
||||
<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-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select v-model="queryParams.sex" placeholder="请选择性别">
|
||||
<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-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" />
|
||||
</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>{{ 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="joiningDate" width="180">
|
||||
<template slot-scope="scope">
|
||||
<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="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" />
|
||||
|
||||
<!-- 文件管理抽屉 -->
|
||||
<el-drawer :title="`${currentUser.nickName} - 文件管理`"
|
||||
:visible.sync="fileDrawerVisible"
|
||||
size="800px"
|
||||
direction="rtl"
|
||||
append-to-body>
|
||||
<UserFileManager
|
||||
:user-id="currentUser.userId"
|
||||
:read-only="!hasEditPermission"
|
||||
v-if="fileDrawerVisible" />
|
||||
</el-drawer>
|
||||
|
||||
<!-- 人员详情对话框 -->
|
||||
<!-- <user-detail-dialog :visible.sync="detailDialogVisible" :user-id="currentUser.userId" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listUser } from "@/api/system/user";
|
||||
import UserFileManager from "@/components/FileList";
|
||||
// import UserDetailDialog from "@/components/UserDetailDialog";
|
||||
|
||||
export default {
|
||||
name: "Onboarding",
|
||||
components: {
|
||||
UserFileManager,
|
||||
// UserDetailDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
nickname: '',
|
||||
sex: '',
|
||||
highestDegree: '',
|
||||
userId: undefined,
|
||||
},
|
||||
// 页面状态
|
||||
loading: true,
|
||||
showSearch: true,
|
||||
fileDrawerVisible: false,
|
||||
detailDialogVisible: false,
|
||||
// 数据
|
||||
peopleList: [],
|
||||
total: 0,
|
||||
currentUser: {},
|
||||
// 权限状态
|
||||
hasEditPermission: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.checkPermissions();
|
||||
},
|
||||
methods: {
|
||||
/** 获取人员列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listUser(this.queryParams).then(response => {
|
||||
this.peopleList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 权限检查 */
|
||||
checkPermissions() {
|
||||
// 根据实际权限系统实现，示例使用固定值
|
||||
this.hasEditPermission = this.$store.getters.roles.includes('HR');
|
||||
},
|
||||
|
||||
/** 打开文件管理 */
|
||||
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();
|
||||
},
|
||||
|
||||
/** 重置查询 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
/** 处理选中 */
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedUsers = selection;
|
||||
},
|
||||
|
||||
/** 导出数据 */
|
||||
handleExport() {
|
||||
this.download('system/onboarding/export', {
|
||||
...this.queryParams
|
||||
}, `onboarding_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可根据需要添加自定义样式 */
|
||||
.drawer-footer {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,340 +0,0 @@
|
||||
<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>
|
||||
@@ -1,184 +0,0 @@
|
||||
<template>
|
||||
<div class="salary-container">
|
||||
<!-- 操作栏 -->
|
||||
<div class="operation-bar">
|
||||
<el-button type="primary" @click="showUploadDialog">新增计算</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 上传弹窗组件 -->
|
||||
<SalaryUploadDialog
|
||||
:visible.sync="uploadVisible"
|
||||
@submit="handleCalculate"
|
||||
@closed="handleDialogClosed"
|
||||
/>
|
||||
|
||||
<!-- 计算结果展示 -->
|
||||
<div class="result-area">
|
||||
<!-- 历史记录 -->
|
||||
<div class="history-section" v-if="!showCurrentResult">
|
||||
<h3>薪资列表</h3>
|
||||
<el-table :data="historyData" stripe>
|
||||
<el-table-column prop="nickName" label="员工"></el-table-column>
|
||||
<el-table-column prop="baseSalary" label="基础工资"></el-table-column>
|
||||
<el-table-column prop="realSalary" label="实发工资"></el-table-column>
|
||||
<el-table-column prop="payTime" label="发薪时间" width="120"></el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="showDetail(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 本次结果 -->
|
||||
<div class="current-result" v-else>
|
||||
<h3>{{ currentMonth }} 薪资计算结果</h3>
|
||||
<el-table :data="currentResult" border>
|
||||
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||
<el-table-column prop="baseSalary" label="基本工资"></el-table-column>
|
||||
<el-table-column prop="bonus" label="奖金"></el-table-column>
|
||||
<el-table-column prop="deduction" label="扣款"></el-table-column>
|
||||
<el-table-column prop="total" label="实发工资">
|
||||
<template slot-scope="scope">
|
||||
<span class="highlight">¥ {{scope.row.total}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="summary">
|
||||
<span>合计人数：{{currentResult.length}} 人</span>
|
||||
<span class="total-amount">总金额：¥ {{totalAmount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SalaryUploadDialog from '../components/SalaryUploadDialog'
|
||||
import { calculateSalary, getCalcHistory, convertToDateString } from '@/api/oa/salary'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SalaryUploadDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadVisible: false,
|
||||
currentResult: [],
|
||||
showCurrentResult: false,
|
||||
currentMonth: '',
|
||||
historyData: [],
|
||||
query: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
payTime: "2025-03-01"
|
||||
},
|
||||
StaffSalaryList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalAmount() {
|
||||
return this.currentResult.reduce((sum, item) => sum + item.total, 0)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const firstDayOfLastMonth = new Date();
|
||||
firstDayOfLastMonth.setMonth(firstDayOfLastMonth.getMonth() - 1, 1);
|
||||
const firstDayStr = [
|
||||
firstDayOfLastMonth.getFullYear(),
|
||||
(firstDayOfLastMonth.getMonth() + 1).toString().padStart(2, '0'),
|
||||
'01'
|
||||
].join('-');
|
||||
this.getHistoryData(firstDayStr)
|
||||
},
|
||||
methods: {
|
||||
showUploadDialog() {
|
||||
this.uploadVisible = true
|
||||
},
|
||||
|
||||
async handleCalculate(params) {
|
||||
try {
|
||||
const { result } = await calculateSalary(params)
|
||||
this.currentResult = result
|
||||
this.currentMonth = params.month
|
||||
this.showCurrentResult = true
|
||||
|
||||
// 刷新历史数据
|
||||
const firstDayStr = convertToDateString(params.month)
|
||||
this.getHistoryData(firstDayStr)
|
||||
|
||||
this.$message.success('计算完成')
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || '计算失败')
|
||||
}
|
||||
},
|
||||
|
||||
handleDialogClosed() {
|
||||
// 可在此处添加关闭后的清理逻辑
|
||||
},
|
||||
|
||||
// 获取计算历史
|
||||
async getHistoryData(monthStr) {
|
||||
try {
|
||||
const { rows } = await getCalcHistory({
|
||||
payTime: monthStr
|
||||
})
|
||||
this.historyData = rows
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || '获取计算历史失败')
|
||||
}
|
||||
},
|
||||
|
||||
showDetail(row) {
|
||||
// 查看历史详情逻辑
|
||||
console.log('查看详情', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 保持原有样式不变 */
|
||||
.salary-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.operation-bar {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.result-area {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.history-section h3,
|
||||
.current-result h3 {
|
||||
color: #303133;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #67C23A;
|
||||
font-weight: bold;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #E6A23C;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<div class="salary-container">
|
||||
<!-- 操作栏 -->
|
||||
<div class="operation-bar">
|
||||
<el-button type="primary" @click="showUploadDialog">新增计算</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 上传弹窗 -->
|
||||
<SalaryUploadDialog
|
||||
:visible.sync="uploadVisible"
|
||||
@submit="handleCalculate"
|
||||
@closed="handleDialogClosed"
|
||||
/>
|
||||
|
||||
<!-- 计算结果展示 -->
|
||||
<div class="result-area">
|
||||
<!-- 历史记录 -->
|
||||
<div class="history-section" v-if="!showCurrentResult">
|
||||
<h3>薪资列表</h3>
|
||||
<el-table :data="historyData" stripe>
|
||||
<el-table-column prop="nickName" label="员工"></el-table-column>
|
||||
<el-table-column prop="baseSalary" label="基础工资"></el-table-column>
|
||||
<el-table-column prop="realSalary" label="实发工资"></el-table-column>
|
||||
<el-table-column prop="payTime" label="发薪时间" width="120"></el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="showDetail(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 本次结果 -->
|
||||
<div class="current-result" v-else>
|
||||
<h3>{{ currentMonth }} 薪资计算结果</h3>
|
||||
<el-table :data="currentResult" border>
|
||||
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||
<el-table-column prop="baseSalary" label="基本工资"></el-table-column>
|
||||
<el-table-column prop="bonus" label="奖金"></el-table-column>
|
||||
<el-table-column prop="deduction" label="扣款"></el-table-column>
|
||||
<el-table-column prop="total" label="实发工资">
|
||||
<template slot-scope="scope">
|
||||
<span class="highlight">¥ {{scope.row.total}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="summary">
|
||||
<span>合计人数：{{currentResult.length}} 人</span>
|
||||
<span class="total-amount">总金额：¥ {{totalAmount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SalaryUploadDialog from '../components/SalaryUploadDialog'
|
||||
import { calculateSalary, uploadOssFile, getWorkersCalcHistory, convertToDateString } from '@/api/oa/salary'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SalaryUploadDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadVisible: false,
|
||||
isUploading: false,
|
||||
month: '',
|
||||
fileList: [],
|
||||
currentResult: [],
|
||||
showCurrentResult: false,
|
||||
currentMonth: '',
|
||||
historyData: [],
|
||||
filePath: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSubmit() {
|
||||
return this.month && this.fileList.length > 0
|
||||
},
|
||||
totalAmount() {
|
||||
return this.currentResult.reduce((sum, item) => sum + item.total, 0)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const firstDayOfLastMonth = new Date();
|
||||
firstDayOfLastMonth.setMonth(firstDayOfLastMonth.getMonth() - 1, 1);
|
||||
|
||||
const firstDayStr = [
|
||||
firstDayOfLastMonth.getFullYear(),
|
||||
(firstDayOfLastMonth.getMonth() + 1).toString().padStart(2, '0'),
|
||||
'01'
|
||||
].join('-');
|
||||
this.getHistoryData(firstDayStr)
|
||||
},
|
||||
methods: {
|
||||
showUploadDialog() {
|
||||
this.uploadVisible = true
|
||||
},
|
||||
|
||||
handleFileChange(file, fileList) {
|
||||
// 限制单个文件上传
|
||||
this.fileList = [fileList[fileList.length - 1]]
|
||||
},
|
||||
|
||||
async handleCalculate(params) {
|
||||
try {
|
||||
const { result } = await calculateSalary(params)
|
||||
this.currentResult = result
|
||||
this.currentMonth = params.month
|
||||
this.showCurrentResult = true
|
||||
|
||||
// 刷新历史数据
|
||||
const firstDayStr = convertToDateString(params.month)
|
||||
this.getHistoryData(firstDayStr)
|
||||
|
||||
this.$message.success('计算完成')
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || '计算失败')
|
||||
}
|
||||
},
|
||||
|
||||
handleDialogClosed() {
|
||||
// 可在此处添加关闭后的清理逻辑
|
||||
},
|
||||
|
||||
// 上传文件
|
||||
async handleUpload() {
|
||||
const formData = new FormData()
|
||||
formData.append('file', this.fileList[0].raw)
|
||||
|
||||
const { data } = await uploadOssFile(formData)
|
||||
|
||||
const filePath = '/data' + data.url.split('/data')[1];
|
||||
this.filePath = filePath;
|
||||
message.success('上传成功');
|
||||
},
|
||||
|
||||
resetUpload() {
|
||||
this.fileList = []
|
||||
this.month = ''
|
||||
},
|
||||
|
||||
showDetail(row) {
|
||||
// 查看历史详情逻辑
|
||||
console.log('查看详情', row)
|
||||
},
|
||||
|
||||
// 获取计算历史
|
||||
async getHistoryData(monthStr) {
|
||||
try {
|
||||
const { rows } = await getWorkersCalcHistory({
|
||||
payTime: monthStr
|
||||
})
|
||||
this.historyData = rows
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || '获取计算历史失败')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.salary-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.operation-bar {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.result-area {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.history-section h3,
|
||||
.current-result h3 {
|
||||
color: #303133;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #67C23A;
|
||||
font-weight: bold;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #E6A23C;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upload-demo {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,129 +0,0 @@
|
||||
<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>
|
||||
@@ -1,233 +0,0 @@
|
||||
<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="getList">搜索</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">
|
||||
<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="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" prop="status">
|
||||
<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 == 1"
|
||||
>转正</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>
|
||||
|
||||
<el-dialog :title="转正详情" :visible.sync="detailVisible" width="500px">
|
||||
<FileList :userId="currentUserId" readonly="true" ></FileList>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listOnboarding, updateOnboarding } from '@/api/oa/onboarding'
|
||||
import FileList from '@/components/FileList'
|
||||
|
||||
export default {
|
||||
name: 'ProbationManage',
|
||||
components: { FileList },
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
nickname: '',
|
||||
status: '',
|
||||
deptId: null
|
||||
},
|
||||
statusMap: {
|
||||
'0': { label: '试用中', type: 'warning' },
|
||||
'1': { label: '待审核', type: 'info' },
|
||||
'2': { label: '已转正', type: 'success' },
|
||||
// '0': { label: '未批准', type: 'danger' },
|
||||
// '1': { label: '已批准', type: 'success' }
|
||||
},
|
||||
showSearch: true,
|
||||
loading: false,
|
||||
probationList: [],
|
||||
deptOptions: [],
|
||||
multiple: true,
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
form: {
|
||||
userIds: [],
|
||||
effectiveDate: '',
|
||||
remark: ''
|
||||
},
|
||||
currentUserId: '',
|
||||
detailVisible: false,
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
console.log('挂在审核')
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
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
|
||||
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
|
||||
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'
|
||||
},
|
||||
handleDetail(row) {
|
||||
this.currentUserId = row.userId;
|
||||
this.detailVisible = true
|
||||
},
|
||||
resetQuery() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<ProbationManage />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProbationApply from "./ProbationApply";
|
||||
import ProbationManage from "./ProbationManage";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userRole: 'DM', // 实际应从登录信息获取
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ProbationApply,
|
||||
ProbationManage,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user