计划管理页面完善

src/api/planMange/plan.js

@@ -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,
+    })
+}

src/components/ComDialog/index.vue

@@ -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;

src/views/login.vue

@@ -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>

src/views/planMange/plan/addAndEditForm.vue

@@ -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>

src/views/planMange/plan/config.js

@@ -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,
+}

src/views/planMange/plan/index.vue

@@ -1,10 +1,139 @@
 <template>
-    <div>
+    <div class="app-container">
-        <h1>计划管理</h1>
+        <!-- 计划管理 -->
+        <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>