feat: 岗位管理模块前端实现
前端实现：
- post.js: API接口封装（86行，8个接口）
- getPostList(): 分页查询
- getPostListByDept(): 按部门查询
- getPostListEnabled(): 获取启用的岗位
- getPostById(): 查询详情
- createPost(): 创建岗位
- updatePost(): 更新岗位
- deletePost(): 删除岗位
- updatePostStatus(): 更新状态
- post.vue: 岗位管理页面（416行）
- 搜索功能：岗位编码、名称、所属部门（树选择）、状态
- 表格展示：编码、名称、部门、职责、排序、状态、时间
- 状态开关：el-switch直接切换状态
- 新增/编辑对话框：
* 岗位编码、名称（必填）
* 所属部门（树选择器）
* 岗位职责、岗位要求（多行文本）
* 排序号、状态、备注
技术特点：
- 部门树选择器（el-tree-select）
- 状态开关（el-switch）
- 表单验证（必填项）
- 删除确认
模块状态：✅ 完整（前端+后端）
This commit is contained in:
zhangjf
parent
2b7c43366b
commit
84adda022e
85
fund-admin/src/api/post.js
Normal file
85
fund-admin/src/api/post.js
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取岗位列表（分页）
|
||||||
|
*/
|
||||||
|
export const getPostList = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/sys/api/v1/post/list',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据部门ID获取岗位列表
|
||||||
|
*/
|
||||||
|
export const getPostListByDept = (deptId) => {
|
||||||
|
return request({
|
||||||
|
url: `/sys/api/v1/post/list/dept/${deptId}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取所有启用的岗位列表
|
||||||
|
*/
|
||||||
|
export const getPostListEnabled = () => {
|
||||||
|
return request({
|
||||||
|
url: '/sys/api/v1/post/list/enabled',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取岗位详情
|
||||||
|
*/
|
||||||
|
export const getPostById = (postId) => {
|
||||||
|
return request({
|
||||||
|
url: `/sys/api/v1/post/${postId}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建岗位
|
||||||
|
*/
|
||||||
|
export const createPost = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/sys/api/v1/post',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新岗位
|
||||||
|
*/
|
||||||
|
export const updatePost = (postId, data) => {
|
||||||
|
return request({
|
||||||
|
url: `/sys/api/v1/post/${postId}`,
|
||||||
|
method: 'put',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除岗位
|
||||||
|
*/
|
||||||
|
export const deletePost = (postId) => {
|
||||||
|
return request({
|
||||||
|
url: `/sys/api/v1/post/${postId}`,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新岗位状态
|
||||||
|
*/
|
||||||
|
export const updatePostStatus = (postId, status) => {
|
||||||
|
return request({
|
||||||
|
url: `/sys/api/v1/post/${postId}/status`,
|
||||||
|
method: 'put',
|
||||||
|
params: { status }
|
||||||
|
})
|
||||||
|
}
|
||||||
415
fund-admin/src/views/system/post.vue
Normal file
415
fund-admin/src/views/system/post.vue
Normal file
@ -0,0 +1,415 @@
|
|||||||
|
<template>
|
||||||
|
<div class="post-container">
|
||||||
|
<el-card>
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<el-form :inline="true" :model="searchForm">
|
||||||
|
<el-form-item label="岗位编码">
|
||||||
|
<el-input v-model="searchForm.postCode" placeholder="请输入岗位编码" clearable style="width: 150px;" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="岗位名称">
|
||||||
|
<el-input v-model="searchForm.postName" placeholder="请输入岗位名称" clearable style="width: 150px;" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所属部门">
|
||||||
|
<el-tree-select
|
||||||
|
v-model="searchForm.deptId"
|
||||||
|
:data="deptTreeOptions"
|
||||||
|
placeholder="请选择部门"
|
||||||
|
clearable
|
||||||
|
check-strictly
|
||||||
|
:render-after-expand="false"
|
||||||
|
style="width: 200px;"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px;">
|
||||||
|
<el-option label="启用" :value="1" />
|
||||||
|
<el-option label="禁用" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="handleReset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作栏 -->
|
||||||
|
<el-row style="margin-bottom: 15px;">
|
||||||
|
<el-button type="primary" @click="handleAdd">新增岗位</el-button>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="loading" stripe>
|
||||||
|
<el-table-column prop="postId" label="岗位ID" width="80" />
|
||||||
|
<el-table-column prop="postCode" label="岗位编码" width="120" />
|
||||||
|
<el-table-column prop="postName" label="岗位名称" width="150" />
|
||||||
|
<el-table-column prop="deptId" label="所属部门" width="150">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ getDeptName(row.deptId) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="postDuty" label="岗位职责" width="200" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="sortOrder" label="排序" width="80" align="center" />
|
||||||
|
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-switch
|
||||||
|
v-model="row.status"
|
||||||
|
:active-value="1"
|
||||||
|
:inactive-value="0"
|
||||||
|
@change="handleStatusChange(row)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createdTime" label="创建时间" width="180" />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="page.current"
|
||||||
|
v-model:page-size="page.size"
|
||||||
|
:total="page.total"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchData"
|
||||||
|
@current-change="fetchData"
|
||||||
|
style="margin-top: 20px; justify-content: flex-end;"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 新增/编辑对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:title="form.postId ? '编辑岗位' : '新增岗位'"
|
||||||
|
width="600px"
|
||||||
|
>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="岗位编码" prop="postCode">
|
||||||
|
<el-input v-model="form.postCode" placeholder="请输入岗位编码" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="岗位名称" prop="postName">
|
||||||
|
<el-input v-model="form.postName" placeholder="请输入岗位名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-form-item label="所属部门" prop="deptId">
|
||||||
|
<el-tree-select
|
||||||
|
v-model="form.deptId"
|
||||||
|
:data="deptTreeOptions"
|
||||||
|
placeholder="请选择部门"
|
||||||
|
clearable
|
||||||
|
check-strictly
|
||||||
|
:render-after-expand="false"
|
||||||
|
style="width: 100%;"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="岗位职责">
|
||||||
|
<el-input
|
||||||
|
v-model="form.postDuty"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入岗位职责描述"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="岗位要求">
|
||||||
|
<el-input
|
||||||
|
v-model="form.postRequirement"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入岗位要求"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="排序号">
|
||||||
|
<el-input-number v-model="form.sortOrder" :min="0" style="width: 100%;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio :value="1">启用</el-radio>
|
||||||
|
<el-radio :value="0">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input
|
||||||
|
v-model="form.remark"
|
||||||
|
type="textarea"
|
||||||
|
:rows="2"
|
||||||
|
placeholder="请输入备注"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import {
|
||||||
|
getPostList,
|
||||||
|
createPost,
|
||||||
|
updatePost,
|
||||||
|
deletePost,
|
||||||
|
updatePostStatus
|
||||||
|
} from '../../api/post'
|
||||||
|
import { getDeptTree } from '../../api/dept'
|
||||||
|
|
||||||
|
// 搜索表单
|
||||||
|
const searchForm = reactive({
|
||||||
|
postCode: '',
|
||||||
|
postName: '',
|
||||||
|
deptId: null,
|
||||||
|
status: null
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([])
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
const page = reactive({
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 对话框
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const form = reactive({
|
||||||
|
postId: null,
|
||||||
|
postCode: '',
|
||||||
|
postName: '',
|
||||||
|
postDuty: '',
|
||||||
|
postRequirement: '',
|
||||||
|
deptId: null,
|
||||||
|
sortOrder: 0,
|
||||||
|
status: 1,
|
||||||
|
remark: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
const rules = {
|
||||||
|
postCode: [
|
||||||
|
{ required: true, message: '请输入岗位编码', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
postName: [
|
||||||
|
{ required: true, message: '请输入岗位名称', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 部门树选项
|
||||||
|
const deptTreeOptions = ref([])
|
||||||
|
|
||||||
|
// 部门映射（用于显示部门名称）
|
||||||
|
const deptMap = ref({})
|
||||||
|
|
||||||
|
// 加载部门树
|
||||||
|
const loadDeptTree = async () => {
|
||||||
|
try {
|
||||||
|
const data = await getDeptTree()
|
||||||
|
deptTreeOptions.value = convertToTreeSelect(data)
|
||||||
|
buildDeptMap(data)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载部门树失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转换为TreeSelect格式
|
||||||
|
const convertToTreeSelect = (data) => {
|
||||||
|
return data.map(item => ({
|
||||||
|
value: item.deptId,
|
||||||
|
label: item.deptName,
|
||||||
|
children: item.children ? convertToTreeSelect(item.children) : []
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 构建部门映射
|
||||||
|
const buildDeptMap = (data) => {
|
||||||
|
data.forEach(item => {
|
||||||
|
deptMap.value[item.deptId] = item.deptName
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
buildDeptMap(item.children)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取部门名称
|
||||||
|
const getDeptName = (deptId) => {
|
||||||
|
return deptMap.value[deptId] || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
const fetchData = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
current: page.current,
|
||||||
|
size: page.size,
|
||||||
|
postCode: searchForm.postCode || undefined,
|
||||||
|
postName: searchForm.postName || undefined,
|
||||||
|
deptId: searchForm.deptId || undefined,
|
||||||
|
status: searchForm.status !== null && searchForm.status !== '' ? searchForm.status : undefined
|
||||||
|
}
|
||||||
|
const res = await getPostList(params)
|
||||||
|
tableData.value = res.records
|
||||||
|
page.total = res.total
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载数据失败:', error)
|
||||||
|
ElMessage.error(error.message || '加载数据失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const handleSearch = () => {
|
||||||
|
page.current = 1
|
||||||
|
fetchData()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const handleReset = () => {
|
||||||
|
searchForm.postCode = ''
|
||||||
|
searchForm.postName = ''
|
||||||
|
searchForm.deptId = null
|
||||||
|
searchForm.status = null
|
||||||
|
page.current = 1
|
||||||
|
fetchData()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
const handleAdd = () => {
|
||||||
|
Object.assign(form, {
|
||||||
|
postId: null,
|
||||||
|
postCode: '',
|
||||||
|
postName: '',
|
||||||
|
postDuty: '',
|
||||||
|
postRequirement: '',
|
||||||
|
deptId: null,
|
||||||
|
sortOrder: 0,
|
||||||
|
status: 1,
|
||||||
|
remark: ''
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
Object.assign(form, {
|
||||||
|
postId: row.postId,
|
||||||
|
postCode: row.postCode,
|
||||||
|
postName: row.postName,
|
||||||
|
postDuty: row.postDuty,
|
||||||
|
postRequirement: row.postRequirement,
|
||||||
|
deptId: row.deptId,
|
||||||
|
sortOrder: row.sortOrder,
|
||||||
|
status: row.status,
|
||||||
|
remark: row.remark
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
await formRef.value.validate()
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.warning('请检查表单填写是否完整')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (form.postId) {
|
||||||
|
await updatePost(form.postId, form)
|
||||||
|
ElMessage.success('更新成功')
|
||||||
|
} else {
|
||||||
|
await createPost(form)
|
||||||
|
ElMessage.success('创建成功')
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
await fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('保存失败:', error)
|
||||||
|
ElMessage.error(error.message || '操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态变更
|
||||||
|
const handleStatusChange = async (row) => {
|
||||||
|
try {
|
||||||
|
await updatePostStatus(row.postId, row.status)
|
||||||
|
ElMessage.success('状态更新成功')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('状态更新失败:', error)
|
||||||
|
ElMessage.error(error.message || '状态更新失败')
|
||||||
|
// 回滚状态
|
||||||
|
row.status = row.status === 1 ? 0 : 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const handleDelete = async (row) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定要删除该岗位吗？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
|
||||||
|
await deletePost(row.postId)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
|
||||||
|
// 如果是最后一条且不是第一页，返回上一页
|
||||||
|
if (tableData.value.length === 1 && page.current > 1) {
|
||||||
|
page.current--
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
if (error !== 'cancel') {
|
||||||
|
console.error('删除失败:', error)
|
||||||
|
ElMessage.error(error.message || '删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
loadDeptTree()
|
||||||
|
fetchData()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.post-container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user