This commit is contained in:
BianLzhaoMin
parent
3659b0ffe3
commit
06d22c9a2b
|
|
@ -55,13 +55,13 @@ export const buildFormColumns = (
|
|||
|
||||
// 月计划列表表格列
|
||||
export const tableColumns = [
|
||||
{ prop: 'inspectionStationName', label: '运检站', fixed: true },
|
||||
{ prop: 'planMajorId', label: '专业', fixed: true },
|
||||
{ prop: 'businessTypeId', label: '业务类型', fixed: true },
|
||||
{ prop: 'projectName', label: '项目名称', fixed: true },
|
||||
{ prop: 'inspectionStationName', label: '运检站', fixed: true, width: '180' },
|
||||
{ prop: 'planMajorName', label: '专业', fixed: true },
|
||||
{ prop: 'businessTypeName', 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 || ''
|
||||
)
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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="workloadCategoryId"
|
||||
:prop="`workloadList.${index}.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 = {
|
||||
planMajorId: [{ required: true, message: '请选择专业', trigger: 'change' }],
|
||||
// 动态生成 rules，为 workloadList 的每一项生成校验规则
|
||||
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' },
|
||||
],
|
||||
|
||||
planAuxiliaryWorkerNum: [
|
||||
]
|
||||
baseRules.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 {
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue