优化

src/views/planMange/monthlyPlan/config.js

@@ -55,13 +55,13 @@ export const buildFormColumns = (
 
 // 月计划列表表格列
 export const tableColumns = [
-    { prop: 'inspectionStationName', label: '运检站', fixed: true },
+    { prop: 'inspectionStationName', label: '运检站', fixed: true, width: '180' },
-    { prop: 'planMajorId', label: '专业', fixed: true },
+    { prop: 'planMajorName', label: '专业', fixed: true },
-    { prop: 'businessTypeId', label: '业务类型', fixed: true },
+    { prop: 'businessTypeName', label: '业务类型', fixed: true },
-    { prop: 'projectName', label: '项目名称', fixed: true },
+    { prop: 'projectName', label: '项目名称', fixed: true, width: '180' },
     { prop: 'workContent', label: '工作任务' },
     { prop: 'riskLevel', label: '风险等级' },
-    { prop: 'planCategoryId', label: '类别' },
+    { prop: 'planCategoryName', label: '类别' },
     { prop: 'workAmount', label: '工作量', width: '180', slot: 'workAmount' },
     { prop: 'towerBaseNumber', label: '基塔数' },
     { prop: 'plannedStartTime', label: '计划开始时间', width: '140' },
@@ -70,7 +70,7 @@ export const tableColumns = [
         prop: 'planPersonnel',
         label: '计划投入管理人员数量',
         formatter: (row) => {
-            return row.personneltList?.length || 0
+            return row.personneltList?.length || ''
         },
     },
 
@@ -83,7 +83,7 @@ export const tableColumns = [
         formatter: (row) => {
             return (
                 (dayjs(row.plannedEndTime).diff(dayjs(row.plannedStartTime), 'day') + 1) *
-                row.planSkilledWorkerDay
+                    row.planSkilledWorkerDay || ''
             )
         },
     },
@@ -95,7 +95,7 @@ export const tableColumns = [
         formatter: (row) => {
             return (
                 (dayjs(row.plannedEndTime).diff(dayjs(row.plannedStartTime), 'day') + 1) *
-                row.planAuxiliaryWorkerDay
+                    row.planAuxiliaryWorkerDay || ''
             )
         },
     },

src/views/planMange/monthlyPlan/edit.vue

@@ -109,9 +109,13 @@
                     <template v-for="(item, index) in formData.workloadList" :key="index">
                         <el-col :span="8">
                             <el-form-item
-                                :label="index == 0 ? '工作量' : ''"
+                                :prop="`workloadList.${index}.workloadCategoryId`"
-                                prop="workloadCategoryId"
+                                :class="{ 'hide-required': index !== 0 }"
                             >
+                                <template #label>
+                                    <span v-if="index == 0">工作量</span>
+                                    <span v-else style="visibility: hidden">工作量</span>
+                                </template>
                                 <el-select
                                     clearable
                                     placeholder="请选择工作量类别"
@@ -128,7 +132,10 @@
                             </el-form-item>
                         </el-col>
                         <el-col :span="4">
-                            <el-form-item label-width="0" prop="workloadNum">
+                            <el-form-item
+                                label-width="0"
+                                :prop="`workloadList.${index}.workloadNum`"
+                            >
                                 <el-input
                                     clearable
                                     style="width: 240px"
@@ -685,8 +692,10 @@ const getInitFormData = () => ({
 
 const formData = ref(getInitFormData())
 
-const rules = {
+// 动态生成 rules，为 workloadList 的每一项生成校验规则
-    planMajorId: [{ required: true, message: '请选择专业', trigger: 'change' }],
+const rules = computed(() => {
+    const baseRules = {
+        planMajorId: [{ required: true, message: '请选择专业', trigger: 'blur' }],
         businessTypeId: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
         riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
         planCategoryId: [{ required: true, message: '请选择类别', trigger: 'change' }],
@@ -695,42 +704,50 @@ const rules = {
             { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
         ],
         planPersonnelList: [{ required: true, message: '请选择计划投入管理人员', trigger: 'blur' }],
+    }
+
+    // 为 workloadList 的每一项生成对应的校验规则
+    // 当 workloadList 长度变化时，会自动重新计算，为每一项生成独立的校验规则
+    baseRules.workloadList = formData.value.workloadList.map(() => ({
         workloadCategoryId: [{ required: true, message: '请选择工作量类别', trigger: 'change' }],
         workloadNum: [
             { required: true, message: '请输入工作量', trigger: 'blur' },
             { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
         ],
+    }))
 
-    planCarNum: [
+    // 添加其他字段的规则
+    baseRules.planCarNum = [
         { required: true, message: '请输入管理人员车辆数', trigger: 'blur' },
         { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
-    ],
+    ]
-    planSkilledWorkerNum: [
+    baseRules.planSkilledWorkerNum = [
         { required: true, message: '请输入熟练工人员数量', trigger: 'blur' },
         { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
-    ],
+    ]
-
+    baseRules.planAuxiliaryWorkerNum = [
-    planAuxiliaryWorkerNum: [
         { required: true, message: '请输入辅助工人员数量', trigger: 'blur' },
         { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
-    ],
+    ]
-    planSkilledWorkerDay: [
+    baseRules.planSkilledWorkerDay = [
         { required: true, message: '请输入工日', trigger: 'blur' },
         { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
-    ],
+    ]
-    planAuxiliaryWorkerDay: [
+    baseRules.planAuxiliaryWorkerDay = [
         { required: true, message: '请输入工日', trigger: 'blur' },
         { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
-    ],
+    ]
-    planSubCarNum: [
+    baseRules.planSubCarNum = [
         { required: true, message: '请输入分包车辆数', trigger: 'blur' },
         { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
-    ],
+    ]
-    actualWorkingDay: [
+    baseRules.actualWorkingDay = [
         { required: true, message: '请输入实际工作天数', trigger: 'blur' },
         { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
-    ],
+    ]
-}
+
+    return baseRules
+})
 
 const onBack = () => {
     // 关闭当前标签页并跳转到月计划填报页面
@@ -798,6 +815,16 @@ const onAddWorkLoad = () => {
 
 const onDeleteWorkLoad = (index) => {
     formData.value.workloadList.splice(index, 1)
+    // 清除被删除项的校验状态
+    nextTick(() => {
+        // 由于数组索引变化，清除所有工作量项的校验状态
+        formData.value.workloadList.forEach((item, idx) => {
+            formRef.value?.clearValidate([
+                `workloadList.${idx}.workloadCategoryId`,
+                `workloadList.${idx}.workloadNum`,
+            ])
+        })
+    })
 }
 
 // 人员选择弹窗相关
@@ -946,15 +973,22 @@ const onChangeWorkLoadCategory = (event, index) => {
     const workloadCategory = planWorkLoadCategoryOptions.value.find(
         (item) => item.workloadCategoryId === workloadCategoryId,
     )
+    if (workloadCategory) {
         formData.value.workloadList[index].unitPrice = workloadCategory.unitPrice
-    formData.value.workloadList[index].workloadCategoryName = workloadCategory.workloadCategoryName
+        formData.value.workloadList[index].workloadCategoryName =
+            workloadCategory.workloadCategoryName
+    }
+
+    // 手动触发该字段的校验，确保校验规则正确执行
+    nextTick(() => {
+        formRef.value?.validateField(`workloadList.${index}.workloadCategoryId`)
+    })
 }
 
 // 获取详情
 const getDetail = async () => {
     const result = await getMonthlyPlanDetailAPI({ monthlyPlanId: route.query.monthlyPlanId })
 
-    console.log('result--', result)
     if (result.code === 200 && result.data) {
         const data = result.data
 
@@ -1054,16 +1088,89 @@ onMounted(() => {
 <style scoped lang="scss">
 .monthly-plan-edit {
     .page-header {
-        margin-bottom: 16px;
+        margin-bottom: 20px;
+        padding: 16px 20px;
+        background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
+        border-radius: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+
+        :deep(.el-page-header__left) {
+            .el-page-header__back {
+                padding: 8px;
+                border-radius: 6px;
+                transition: all 0.3s ease;
+                background-color: transparent;
+
+                &:hover {
+                    background-color: #f0f2f5;
+                    color: #1677ff;
+                    transform: translateX(-2px);
+                }
+
+                &::before {
+                    font-size: 16px;
+                    font-weight: 600;
+                }
+            }
+        }
+
+        :deep(.el-page-header__content) {
+            font-size: 18px;
+            font-weight: 600;
+            color: #1f2937;
+            margin-left: 12px;
+        }
+    }
+
+    // 隐藏索引不为 0 的工作量项的 required 标记（*号）
+    :deep(.hide-required) {
+        &.is-required .el-form-item__label::before {
+            display: none;
+        }
     }
 
     .card-section {
-        margin-bottom: 16px;
+        margin-bottom: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        overflow: hidden;
+        transition: box-shadow 0.3s ease;
+
+        &:hover {
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+
+        :deep(.el-card__header) {
+            padding: 16px 20px;
+            background-color: #fafbfc;
+            border-bottom: 1px solid #f0f2f5;
+        }
+
+        :deep(.el-card__body) {
+            padding: 24px 20px;
+        }
     }
 
     .card-header {
         font-weight: 600;
-        font-size: 14px;
+        font-size: 15px;
+        color: #1f2937;
+        position: relative;
+        padding-left: 12px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 4px;
+            height: 16px;
+            background: linear-gradient(180deg, #1677ff 0%, #4096ff 100%);
+            border-radius: 2px;
+        }
     }
 
     .page-footer {

src/views/planMange/monthlyPlan/index.vue

@@ -68,6 +68,8 @@ import {
     delMonthlyPlanAPI,
 } from '@/api/planMange/monthlyPlan.js'
 import { getInspectionStationSelectAPI, getMajorTypeCategorySelectAPI } from '@/api/common.js'
+import useDictStore from '@/store/modules/dict'
+import { selectDictLabel } from '@/utils/ruoyi'
 import config from './config'
 import ComTable from '@/components/ComTable/index.vue'
 import ComButton from '@/components/ComButton/index.vue'
@@ -75,9 +77,10 @@ import ComDialog from '@/components/ComDialog/index.vue'
 import AddForm from './addForm.vue'
 
 const { proxy } = getCurrentInstance()
+const dictStore = useDictStore()
 const { plan_risk_level } = proxy.useDict('plan_risk_level')
 const router = useRouter()
-const { tableColumns, dialogConfig, buildFormColumns } = config
+const { tableColumns: baseTableColumns, dialogConfig, buildFormColumns } = config
 
 const comTableRef = ref(null)
 const addFormRef = ref(null)
@@ -116,6 +119,30 @@ const formColumns = computed(() =>
     ),
 )
 
+// 创建动态 formatter 函数，每次执行时从 store 获取最新的字典数据
+const createDynamicDictFormatter = (dictType, fieldName = null) => {
+    return (row, column, cellValue) => {
+        const value = fieldName ? row[fieldName] : cellValue
+        // 每次执行时都从 store 获取最新的字典数据
+        const dictData = dictStore.getDict(dictType) || []
+        return selectDictLabel(dictData, value)
+    }
+}
+
+// 构建表格列配置，添加字典映射的 formatter
+const tableColumns = computed(() => {
+    return baseTableColumns.map((column) => {
+        if (column.prop === 'riskLevel') {
+            return {
+                ...column,
+                // 使用动态 formatter，每次执行时都会获取最新的字典数据
+                formatter: createDynamicDictFormatter('plan_risk_level', 'riskLevel'),
+            }
+        }
+        return column
+    })
+})
+
 // 操作列
 const actionColumns = [
     {