bonus
/
yn_digital_gadgets_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

计划管理页面完善

This commit is contained in:
BianLzhaoMin 2025-12-18 16:32:36 +08:00
parent 61344a1943
commit eb8b82ab91
6 changed files with 436 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/api/planMange/plan.js Normal file
View File

@ -0,0 +1,37 @@
import request from '@/utils/request'
// 计划管理- 查询列表
export function listPlanAPI(query) {
return request({
url: '/personnel/getPersonnelList',
method: 'GET',
params: query,
})
}
// 计划管理- 新增
export function addPlanAPI(data) {
return request({
url: '/personnel/addPersonnel',
method: 'POST',
data,
})
}
// 计划管理- 修改
export function updatePlanAPI(data) {
return request({
url: '/personnel/updatePersonnel',
method: 'POST',
data,
})
}
// 计划管理- 删除
export function delPlanAPI(data) {
return request({
url: `/personnel/delPersonnel`,
method: 'POST',
data,
})
}

9
src/components/ComDialog/index.vue
View File

@ -67,15 +67,18 @@ const handleCloseInner = () => {
/* 全局样式：仅作用于带 com-dialog__outer / com-dialog__inner 类名的弹框 */
/* 外层 + 内层弹框通用外观 */
.el-dialog:not(.is-fullscreen) {
margin-top: 0 !important;
}
.com-dialog__outer,
.com-dialog__inner {
display: flex;
flex-direction: column;
margin: 0;
margin: 0 !important;
position: absolute;
top: 25%;
top: 50% !important;
left: 50%;
transform: translate(-50%, -25%);
transform: translate(-50%, -50%) !important;
min-height: var(--com-dialog-min-height);
max-height: var(--com-dialog-max-height);
border-radius: 16px;

2
src/views/login.vue
View File

@ -121,7 +121,7 @@
<!-- 底部版权信息 -->
<div class="el-login-footer">
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
<span>Copyright © 2018-2025 bonus.com.vip All Rights Reserved.</span>
</div>
</div>
</template>

175
src/views/planMange/plan/addAndEditForm.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<el-form
size="large"
label-width="auto"
:model="formData"
ref="formRef"
:rules="rules"
class="add-and-edit-form"
>
<!-- 月份 -->
<el-form-item label="月份" prop="month">
<el-date-picker
v-model="formData.month"
type="month"
value-format="YYYY-MM"
placeholder="请选择月份"
style="width: 100%"
/>
</el-form-item>
<!-- 项目名称 -->
<el-form-item label="项目名称" prop="projectName">
<el-input
clearable
maxlength="50"
show-word-limit
placeholder="请输入项目名称"
v-model.trim="formData.projectName"
/>
</el-form-item>
<!-- 作业内容 -->
<el-form-item label="作业内容" prop="workContent">
<el-input
type="textarea"
maxlength="500"
show-word-limit
:autosize="{ minRows: 3, maxRows: 6 }"
placeholder="请输入作业内容"
v-model.trim="formData.workContent"
/>
</el-form-item>
<!-- 实施部门 -->
<el-form-item label="实施部门" prop="deptId">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择实施部门"
v-model="formData.deptId"
>
<el-option
v-for="item in deptOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
</el-form-item>
<!-- 计划开始时间 -->
<el-form-item label="计划开始时间" prop="planStartDate">
<el-date-picker
v-model="formData.planStartDate"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择计划开始时间"
style="width: 100%"
/>
</el-form-item>
<!-- 计划结束时间 -->
<el-form-item label="计划结束时间" prop="planEndDate">
<el-date-picker
v-model="formData.planEndDate"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择计划结束时间"
style="width: 100%"
/>
</el-form-item>
<!-- 风险等级 -->
<el-form-item label="风险等级" prop="riskLevel">
<el-select
clearable
style="width: 100%"
placeholder="请选择风险等级"
v-model="formData.riskLevel"
>
<el-option
v-for="item in riskLevelOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
</el-form-item>
<!-- 备注 -->
<el-form-item label="备注" prop="remark">
<el-input
type="textarea"
maxlength="200"
show-word-limit
:autosize="{ minRows: 3, maxRows: 6 }"
placeholder="请输入备注"
v-model.trim="formData.remark"
/>
</el-form-item>
</el-form>
</template>
<script setup name="AddAndEditForm">
import { ref } from 'vue'
const props = defineProps({
formData: {
type: Object,
default: () => ({}),
},
})
const formRef = ref(null)
// 静态下拉选项（后续可替换为接口获取）
const deptOptions = [
{ label: '实施部门一', value: 1 },
{ label: '实施部门二', value: 2 },
]
const riskLevelOptions = [
{ label: '低风险', value: 1 },
{ label: '中风险', value: 2 },
{ label: '高风险', value: 3 },
]
const rules = {
month: [{ required: true, message: '请选择月份', trigger: 'change' }],
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
workContent: [{ required: true, message: '请输入作业内容', trigger: 'blur' }],
deptId: [{ required: true, message: '请选择实施部门', trigger: 'change' }],
planStartDate: [{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
planEndDate: [{ required: true, message: '请选择计划结束时间', trigger: 'change' }],
riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
}
// 暴露校验方法和重置方法给父组件
defineExpose({
validate: () => formRef.value.validate(),
resetFields: () => formRef.value.resetFields(),
clearValidate: () => formRef.value.clearValidate(),
})
</script>
<style lang="scss" scoped>
.add-and-edit-form {
padding: 10px 20px;
:deep(.el-radio-button__inner) {
border-radius: 20px;
margin-right: 10px;
border: 1px solid #dcdfe6 !important;
box-shadow: none !important;
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
border-left: 1px solid #dcdfe6 !important;
}
:deep(.el-radio-button.is-active .el-radio-button__inner) {
background-color: var(--el-color-primary-light-9);
color: var(--el-color-primary);
border-color: var(--el-color-primary) !important;
}
}
</style>

84
src/views/planMange/plan/config.js Normal file
View File

@ -0,0 +1,84 @@
import { reactive } from 'vue'
// 搜索表单配置（计划管理）
export const buildFormColumns = () => [
{
type: 'month',
prop: 'month',
placeholder: '请选择月份',
},
{
type: 'input',
prop: 'projectName',
placeholder: '请输入项目名称',
},
{
type: 'input',
prop: 'workContent',
placeholder: '请输入作业内容关键字',
},
{
type: 'select',
prop: 'deptId',
placeholder: '请选择实施部门',
options: [
{ label: '实施部门一', value: 1 },
{ label: '实施部门二', value: 2 },
],
},
{
type: 'select',
prop: 'riskLevel',
placeholder: '请选择风险等级',
options: [
{ label: '低风险', value: 1 },
{ label: '中风险', value: 2 },
{ label: '高风险', value: 3 },
],
},
]
export const tableColumns = [
{
prop: 'month',
label: '月份',
},
{
prop: 'projectName',
label: '项目名称',
},
{
prop: 'workContent',
label: '作业内容',
},
{
prop: 'deptName',
label: '实施部门',
},
{
prop: 'planStartDate',
label: '计划开始时间',
},
{
prop: 'planEndDate',
label: '计划结束时间',
},
{
prop: 'riskLevelName',
label: '风险等级',
},
]
export const dialogConfig = reactive({
outerVisible: false,
outerTitle: '新增计划',
outerWidth: '640px', // 根据图片缩小宽度更美观
minHeight: '400px',
maxHeight: '90vh',
})
export default {
tableColumns,
dialogConfig,
buildFormColumns,
}

137
src/views/planMange/plan/index.vue
View File

@ -1,10 +1,139 @@
<template>
<div>
<h1>计划管理</h1>
<div class="app-container">
<!-- 计划管理 -->
<ComTable
ref="comTableRef"
:form-columns="formColumns"
:table-columns="tableColumns"
:load-data="listPlanAPI"
:show-toolbar="true"
:show-action="true"
:action-columns="actionColumns"
>
<template #toolbar>
<ComButton type="primary" icon="Plus" @click="onHandleAdd">新建计划</ComButton>
<ComButton type="info" icon="Plus" pain @click="onHandleAdd">导入计划</ComButton>
</template>
</ComTable>
<ComDialog :dialog-config="dialogConfig" @closeDialogOuter="onCloseDialogOuter">
<template #outerContent>
<!-- 将表单抽离到独立组件中，保持 index.vue 简洁 -->
<AddAndEditForm ref="formRef" :form-data="addAndEditForm" />
<el-row class="common-btn-row">
<ComButton plain type="info" @click="onHandleCancel">取消</ComButton>
<ComButton @click="onHandleSave">保存</ComButton>
</el-row>
</template>
</ComDialog>
</div>
</template>
<script setup name="Plan"></script>
<script setup name="Plan">
import { ref, nextTick, getCurrentInstance, computed } from 'vue'
import { listPlanAPI, addPlanAPI, updatePlanAPI, delPlanAPI } from '@/api/planMange/plan.js'
<style></style>
import config from './config'
import ComTable from '@/components/ComTable/index.vue'
import ComButton from '@/components/ComButton/index.vue'
import ComDialog from '@/components/ComDialog/index.vue'
import AddAndEditForm from './addAndEditForm.vue'
const { tableColumns, dialogConfig, buildFormColumns } = config
const { proxy } = getCurrentInstance()
const formRef = ref(null)
const comTableRef = ref(null)
const editId = ref(null)
// 根据实时下拉数据构建搜索表单配置
const formColumns = computed(() => buildFormColumns())
// 1. 定义初始表单数据函数（优雅重置）——字段与表单保持同步
const getInitFormData = () => ({
month: '', // 月份
projectName: '', // 项目名称
workContent: '', // 作业内容
deptId: null, // 实施部门
planStartDate: '', // 计划开始时间
planEndDate: '', // 计划结束时间
riskLevel: null, // 风险等级
remark: '', // 备注
})
const addAndEditForm = ref(getInitFormData())
const actionColumns = [
{
label: '编辑',
type: 'primary',
link: true,
handler: (row) => {
editId.value = row.planId
dialogConfig.outerTitle = '编辑计划'
dialogConfig.outerVisible = true
// 2. 使用 nextTick 确保弹框和子组件挂载后再回显数据
nextTick(() => {
Object.assign(addAndEditForm.value, row)
})
},
},
{
label: '删除',
type: 'danger',
link: true,
handler: (row) => {
proxy.$modal.confirm('是否确认删除该计划？').then(async () => {
const result = await delPlanAPI(row.planId)
if (result.code === 200) {
proxy.$modal.msgSuccess('删除成功')
comTableRef.value?.refresh()
}
})
},
},
]
// 新增
const onHandleAdd = () => {
editId.value = null
dialogConfig.outerTitle = '新增计划'
dialogConfig.outerVisible = true
addAndEditForm.value = getInitFormData()
nextTick(() => {
formRef.value?.clearValidate()
})
}
// 取消
const onHandleCancel = () => {
dialogConfig.outerVisible = false
}
// 保存
const onHandleSave = async () => {
try {
// 3. 调用子组件暴露的 validate 方法
await formRef.value.validate()
const API = editId.value ? updatePlanAPI : addPlanAPI
const result = await API(addAndEditForm.value)
if (result.code === 200) {
proxy.$modal.msgSuccess(editId.value ? '编辑成功' : '新增成功')
dialogConfig.outerVisible = false
comTableRef.value?.refresh()
}
} catch (error) {
return Promise.reject(error)
}
}
// 关闭弹框统一处理
const onCloseDialogOuter = (visible) => {
dialogConfig.outerVisible = visible
if (!visible) {
formRef.value?.resetFields()
}
}
</script>