parent
9aae1104f2
commit
d7925fffc7
4 changed files with 914 additions and 592 deletions
@ -1,428 +1,555 @@ |
|||||||
<!-- addDialog.vue --> |
|
||||||
<template> |
<template> |
||||||
<el-dialog append-to-body="false" :title="title" :model-value="visible" width="80%" @close="handleClose"> |
<el-dialog |
||||||
<!-- 单个 Form 包裹所有内容（基础信息 + 表格） --> |
append-to-body="false" |
||||||
<el-form ref="addForm" :model="addForm" :rules="addRules" label-width="140px"> |
:title="title" |
||||||
<!-- 全局错误提示 --> |
:model-value="visible" |
||||||
<div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;"> |
width="70%" |
||||||
{{ formError }} |
@close="handleClose" |
||||||
</div> |
|
||||||
|
> |
||||||
|
<!-- 单个 Form 包裹所有内容（基础信息 + 表格） --> |
||||||
|
<el-form ref="addForm" :model="addForm" :rules="addRules" label-width="140px"> |
||||||
|
<!-- 全局错误提示 --> |
||||||
|
<div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px"> |
||||||
|
{{ formError }} |
||||||
|
</div> |
||||||
|
|
||||||
<!-- 项目基础信息表单 --> |
<!-- 项目基础信息表单 --> |
||||||
<el-row> |
<el-row> |
||||||
<el-col :span="8"> |
<el-col :span="8"> |
||||||
<el-form-item label="项目名称" prop="projectName"> |
<el-form-item label="项目名称" prop="projectName"> |
||||||
<el-input :disabled="isDetail" v-model="addForm.projectName"></el-input> |
<el-input :disabled="isDetail" v-model="addForm.projectName"></el-input> |
||||||
</el-form-item> |
</el-form-item> |
||||||
</el-col> |
</el-col> |
||||||
<el-col :span="8"> |
<el-col :span="8"> |
||||||
<el-form-item label="项目类型" prop="bcId"> |
<el-form-item label="项目类型" prop="bcId"> |
||||||
<el-select :disabled="isDetail" v-model="addForm.bcId"> |
<el-select :disabled="isDetail" v-model="addForm.bcId"> |
||||||
<el-option label="成本效率" :value="'310'"></el-option> |
<el-option label="成本效率" :value="'310'"></el-option> |
||||||
<el-option label="成本效率1" :value="'311'"></el-option> |
<el-option label="成本效率1" :value="'311'"></el-option> |
||||||
</el-select> |
</el-select> |
||||||
</el-form-item> |
</el-form-item> |
||||||
</el-col> |
</el-col> |
||||||
<el-col :span="8"> |
<el-col :span="8"> |
||||||
<el-form-item label="制单部门" prop="touchingDept"> |
<el-form-item label="制单部门" prop="touchingDept"> |
||||||
<el-select :disabled="isDetail" v-model="addForm.touchingDept"> |
<el-select :disabled="isDetail" v-model="addForm.touchingDept"> |
||||||
<el-option label="化学镀镍一班崔胜伟" value="61"></el-option> |
<el-option label="化学镀镍一班崔胜伟" value="61"></el-option> |
||||||
<el-option label="部门二" value="62"></el-option> |
<el-option label="部门二" value="62"></el-option> |
||||||
</el-select> |
</el-select> |
||||||
</el-form-item> |
</el-form-item> |
||||||
</el-col> |
</el-col> |
||||||
</el-row> |
</el-row> |
||||||
<el-row> |
<el-row> |
||||||
<el-col :span="24"> |
<el-col :span="24"> |
||||||
<el-form-item label="项目背景" prop="projectBackcloth"> |
<el-form-item label="项目背景" prop="projectBackcloth"> |
||||||
<el-input :disabled="isDetail" type="textarea" v-model="addForm.projectBackcloth"></el-input> |
<el-input |
||||||
</el-form-item> |
:disabled="isDetail" |
||||||
</el-col> |
type="textarea" |
||||||
</el-row> |
v-model="addForm.projectBackcloth" |
||||||
<el-row> |
></el-input> |
||||||
<el-col :span="24"> |
</el-form-item> |
||||||
<el-form-item label="项目目标" prop="projectTarget"> |
</el-col> |
||||||
<el-input :disabled="isDetail" type="textarea" v-model="addForm.projectTarget"></el-input> |
</el-row> |
||||||
</el-form-item> |
<el-row> |
||||||
</el-col> |
<el-col :span="24"> |
||||||
</el-row> |
<el-form-item label="项目目标" prop="projectTarget"> |
||||||
<el-row> |
<el-input |
||||||
<el-col :span="24"> |
:disabled="isDetail" |
||||||
<el-form-item label="预期效果" prop="desiredResult"> |
type="textarea" |
||||||
<el-input :disabled="isDetail" type="textarea" v-model="addForm.desiredResult"></el-input> |
v-model="addForm.projectTarget" |
||||||
</el-form-item> |
></el-input> |
||||||
</el-col> |
</el-form-item> |
||||||
</el-row> |
</el-col> |
||||||
<el-row> |
</el-row> |
||||||
<el-col :span="8"> |
<el-row> |
||||||
<el-form-item label="项目负责人" prop="projectHead"> |
<el-col :span="24"> |
||||||
<el-select :disabled="isDetail" v-model="addForm.projectHead"> |
<el-form-item label="预期效果" prop="desiredResult"> |
||||||
<el-option label="admin" :value="1"></el-option> |
<el-input |
||||||
<el-option label="负责人二" :value="2"></el-option> |
:disabled="isDetail" |
||||||
</el-select> |
type="textarea" |
||||||
</el-form-item> |
v-model="addForm.desiredResult" |
||||||
</el-col> |
></el-input> |
||||||
<el-col :span="8"> |
</el-form-item> |
||||||
<el-form-item label="成员名称" prop="memberName"> |
</el-col> |
||||||
<el-select :disabled="isDetail" v-model="addForm.memberName" multiple placeholder="请选择成员名称"> |
</el-row> |
||||||
<el-option label="测试" :value="521"></el-option> |
<el-row> |
||||||
<el-option label="成员二" :value="2"></el-option> |
<el-col :span="8"> |
||||||
</el-select> |
<el-form-item label="项目负责人" prop="projectHead"> |
||||||
</el-form-item> |
<el-select :disabled="isDetail" v-model="addForm.projectHead"> |
||||||
</el-col> |
<el-option label="admin" :value="1"></el-option> |
||||||
</el-row> |
<el-option label="负责人二" :value="2"></el-option> |
||||||
<el-row> |
</el-select> |
||||||
<el-col :span="8"> |
</el-form-item> |
||||||
<el-form-item label="项目支持人" prop="projectSupportMan"> |
</el-col> |
||||||
<el-select :disabled="isDetail" v-model="addForm.projectSupportMan"> |
<el-col :span="8"> |
||||||
<el-option label="测试" value="521"></el-option> |
<el-form-item label="成员名称" prop="memberName"> |
||||||
<el-option label="支持人二" value="2"></el-option> |
<el-select |
||||||
</el-select> |
:disabled="isDetail" |
||||||
</el-form-item> |
v-model="addForm.memberName" |
||||||
</el-col> |
multiple |
||||||
<el-col :span="8"> |
placeholder="请选择成员名称" |
||||||
<el-form-item label="项目开始时间" prop="projectStartTime"> |
> |
||||||
<el-date-picker :disabled="isDetail" style="width: 100%" v-model="addForm.projectStartTime" |
<el-option label="测试" :value="521"></el-option> |
||||||
type="datetime" placeholder="选择日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"> </el-date-picker> |
<el-option label="成员二" :value="2"></el-option> |
||||||
</el-form-item> |
</el-select> |
||||||
</el-col> |
</el-form-item> |
||||||
<el-col :span="8"> |
</el-col> |
||||||
<el-form-item label="项目结束预期时间" prop="projectDesiredEnd"> |
</el-row> |
||||||
<el-date-picker :disabled="isDetail" style="width: 100%" v-model="addForm.projectDesiredEnd" |
<el-row> |
||||||
type="datetime" placeholder="选择日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker> |
<el-col :span="8"> |
||||||
</el-form-item> |
<el-form-item label="项目支持人" prop="projectSupportMan"> |
||||||
</el-col> |
<el-select :disabled="isDetail" v-model="addForm.projectSupportMan"> |
||||||
</el-row> |
<el-option label="测试" value="521"></el-option> |
||||||
|
<el-option label="支持人二" value="2"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-form-item label="项目开始时间" prop="projectStartTime"> |
||||||
|
<el-date-picker |
||||||
|
:disabled="isDetail" |
||||||
|
style="width: 100%" |
||||||
|
v-model="addForm.projectStartTime" |
||||||
|
type="datetime" |
||||||
|
placeholder="选择日期" |
||||||
|
format="YYYY-MM-DD HH:mm:ss" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-form-item label="项目结束预期时间" prop="projectDesiredEnd"> |
||||||
|
<el-date-picker |
||||||
|
:disabled="isDetail" |
||||||
|
style="width: 100%" |
||||||
|
v-model="addForm.projectDesiredEnd" |
||||||
|
type="datetime" |
||||||
|
placeholder="选择日期" |
||||||
|
format="YYYY-MM-DD HH:mm:ss" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
<!-- 里程碑表格操作 --> |
<!-- 里程碑表格操作 --> |
||||||
<div style="margin: 10px 0" v-if="!isDetail"> |
<div style="margin: 10px 0" v-if="!isDetail"> |
||||||
<el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">插入一行</el-button> |
<el-button type="primary" @click="handleOpenDialog">插入一行</el-button> |
||||||
</div> |
<el-button type="danger" @click="delTable">删除选中行</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
<!-- 里程碑表格 --> |
<!-- 里程碑表格 --> |
||||||
<el-table :data="addForm.stoneList" ref="detailTable" border> |
<el-table :data="addForm.stoneList" ref="detailTable" border @select="selectChange"> |
||||||
<el-table-column type="selection"></el-table-column> |
<el-table-column type="selection"></el-table-column> |
||||||
<el-table-column type="index" width="80" label="序号"></el-table-column> |
<el-table-column type="index" width="80" label="序号"></el-table-column> |
||||||
<el-table-column align="center" :width="isDetail ? '120' : ''" label="里程碑计划"> |
<el-table-column align="center" :width="isDetail ? '120' : ''" label="里程碑计划"> |
||||||
<template #default="scope"> |
<template #default="scope"> |
||||||
<template v-if="!isDetail"> |
<template v-if="!isDetail"> |
||||||
<el-form-item label-width="0" :prop="`stoneList[${scope.$index}].milestonePlan`" |
<el-form-item |
||||||
:rules="addRules.milestonePlan"> |
label-width="0" |
||||||
<el-input v-model="scope.row.milestonePlan" placeholder="请输入里程碑计划"></el-input> |
:prop="`stoneList[${scope.$index}].milestonePlan`" |
||||||
</el-form-item> |
:rules="addRules.milestonePlan" |
||||||
</template> |
> |
||||||
<template v-else> |
<el-input |
||||||
<span>{{ scope.row.milestonePlan }}</span> |
v-model="scope.row.milestonePlan" |
||||||
</template> |
placeholder="请输入里程碑计划" |
||||||
</template> |
></el-input> |
||||||
</el-table-column> |
</el-form-item> |
||||||
<el-table-column align="center" :width="isDetail ? '120' : ''" label="里程碑负责人" prop="milestoneMan"> |
</template> |
||||||
<template #default="scope"> |
<template v-else> |
||||||
<template v-if="!isDetail"> |
<span>{{ scope.row.milestonePlan }}</span> |
||||||
<el-form-item label-width="0" :prop="`stoneList[${scope.$index}].milestoneMan`" |
</template> |
||||||
:rules="addRules.milestoneMan"> |
</template> |
||||||
<el-select v-model="scope.row.milestoneMan" placeholder="请选择里程碑负责人"> |
</el-table-column> |
||||||
<el-option label="负责人一" :value="1"></el-option> |
<el-table-column |
||||||
<el-option label="负责人二" :value="2"></el-option> |
align="center" |
||||||
</el-select> |
:width="isDetail ? '120' : ''" |
||||||
</el-form-item> |
label="里程碑负责人" |
||||||
</template> |
prop="milestoneMan" |
||||||
<template v-else> |
> |
||||||
<span>{{ scope.row.milestoneMan }}</span> |
<template #default="scope"> |
||||||
</template> |
<template v-if="!isDetail"> |
||||||
</template> |
<el-form-item |
||||||
</el-table-column> |
label-width="0" |
||||||
<el-table-column align="center" :width="isDetail ? '120' : ''" label="里程碑输出物" prop="outputMaterial"> |
:prop="`stoneList[${scope.$index}].milestoneMan`" |
||||||
<template #default="scope"> |
:rules="addRules.milestoneMan" |
||||||
<template v-if="!isDetail"> |
> |
||||||
<el-form-item label-width="0" :prop="`stoneList[${scope.$index}].outputMaterial`" |
<el-select v-model="scope.row.milestoneMan" placeholder="请选择里程碑负责人"> |
||||||
:rules="addRules.outputMaterial"> |
<el-option label="负责人一" :value="1"></el-option> |
||||||
<el-input v-model="scope.row.outputMaterial" placeholder="请输入里程碑输出物"></el-input> |
<el-option label="负责人二" :value="2"></el-option> |
||||||
</el-form-item> |
</el-select> |
||||||
</template> |
</el-form-item> |
||||||
<template v-else> |
</template> |
||||||
<span>{{ scope.row.outputMaterial }}</span> |
<template v-else> |
||||||
</template> |
<span>{{ scope.row.milestoneMan }}</span> |
||||||
</template> |
</template> |
||||||
</el-table-column> |
</template> |
||||||
<el-table-column align="center" :width="isDetail ? '180' : ''" label="里程碑节点" prop="milestoneNode"> |
</el-table-column> |
||||||
<template #default="scope"> |
<el-table-column |
||||||
<template v-if="!isDetail"> |
align="center" |
||||||
<el-form-item label-width="0" :prop="`stoneList[${scope.$index}].milestoneNode`" |
:width="isDetail ? '120' : ''" |
||||||
:rules="addRules.milestoneNode"> |
label="里程碑输出物" |
||||||
<el-date-picker v-model="scope.row.milestoneNode" type="datetime" placeholder="选择日期时间" |
prop="outputMaterial" |
||||||
style="width: 100%" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/> |
> |
||||||
</el-form-item> |
<template #default="scope"> |
||||||
</template> |
<template v-if="!isDetail"> |
||||||
<template v-else> |
<el-form-item |
||||||
<span>{{ scope.row.milestoneNode }}</span> |
label-width="0" |
||||||
</template> |
:prop="`stoneList[${scope.$index}].outputMaterial`" |
||||||
</template> |
:rules="addRules.outputMaterial" |
||||||
</el-table-column> |
> |
||||||
<!-- 详情页专属列 --> |
<el-input |
||||||
<el-table-column v-if="isDetail" align="center" label="执行类型" prop="executeType"></el-table-column> |
v-model="scope.row.outputMaterial" |
||||||
<el-table-column v-if="isDetail" align="center" label="延期时间" prop="delayTime"></el-table-column> |
placeholder="请输入里程碑输出物" |
||||||
<el-table-column v-if="isDetail" align="center" label="核查结果" prop="checkResult"></el-table-column> |
></el-input> |
||||||
<el-table-column v-if="isDetail" align="center" label="核查人" prop="checkMan"></el-table-column> |
</el-form-item> |
||||||
<el-table-column v-if="isDetail" align="center" label="评价等级" prop="grade"></el-table-column> |
</template> |
||||||
<el-table-column v-if="isDetail" align="center" label="评价人" prop="gradeMan"></el-table-column> |
<template v-else> |
||||||
<el-table-column v-if="isDetail" width="200" align="center" label="业务领导评价" |
<span>{{ scope.row.outputMaterial }}</span> |
||||||
prop="evaluate"></el-table-column> |
</template> |
||||||
<el-table-column v-if="isDetail" align="center" label="附件"> |
</template> |
||||||
<el-button type="text">附件</el-button> |
</el-table-column> |
||||||
</el-table-column> |
<el-table-column |
||||||
<!-- 通用操作列 --> |
align="center" |
||||||
<el-table-column label="操作"> |
:width="isDetail ? '180' : ''" |
||||||
<template #default="scope"> |
label="里程碑节点" |
||||||
<el-button plain type="danger" @click="handleDelTable(scope.$index)">删除</el-button> |
prop="milestoneNode" |
||||||
</template> |
> |
||||||
</el-table-column> |
<template #default="scope"> |
||||||
</el-table> |
<template v-if="!isDetail"> |
||||||
</el-form> |
<el-form-item |
||||||
<!-- 弹窗底部按钮 --> |
label-width="0" |
||||||
<template #footer> |
:prop="`stoneList[${scope.$index}].milestoneNode`" |
||||||
<span class="dialog-footer"> |
:rules="addRules.milestoneNode" |
||||||
<el-button @click="visible = false">取 消</el-button> |
> |
||||||
<el-button type="primary" @click="handleSubmitForm">确 定</el-button> |
<el-date-picker |
||||||
</span> |
v-model="scope.row.milestoneNode" |
||||||
</template> |
type="datetime" |
||||||
</el-dialog> |
placeholder="选择日期时间" |
||||||
|
style="width: 100%" |
||||||
|
format="YYYY-MM-DD HH:mm:ss" |
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<span>{{ scope.row.milestoneNode }}</span> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<!-- 详情页专属列 --> |
||||||
|
<el-table-column |
||||||
|
v-if="isDetail" |
||||||
|
align="center" |
||||||
|
label="执行类型" |
||||||
|
prop="executeType" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
v-if="isDetail" |
||||||
|
align="center" |
||||||
|
label="延期时间" |
||||||
|
prop="delayTime" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
v-if="isDetail" |
||||||
|
align="center" |
||||||
|
label="核查结果" |
||||||
|
prop="checkResult" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
v-if="isDetail" |
||||||
|
align="center" |
||||||
|
label="核查人" |
||||||
|
prop="checkMan" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
v-if="isDetail" |
||||||
|
align="center" |
||||||
|
label="评价等级" |
||||||
|
prop="grade" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
v-if="isDetail" |
||||||
|
align="center" |
||||||
|
label="评价人" |
||||||
|
prop="gradeMan" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column |
||||||
|
v-if="isDetail" |
||||||
|
width="200" |
||||||
|
align="center" |
||||||
|
label="业务领导评价" |
||||||
|
prop="evaluate" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column v-if="isDetail" align="center" label="附件"> |
||||||
|
<el-button type="text">附件</el-button> |
||||||
|
</el-table-column> |
||||||
|
<!-- 通用操作列 --> |
||||||
|
<!-- <el-table-column label="操作"> |
||||||
|
<template #default="scope"> |
||||||
|
<el-button plain type="danger" @click="handleDelTable(scope.$index)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> --> |
||||||
|
</el-table> |
||||||
|
</el-form> |
||||||
|
<!-- 弹窗底部按钮 --> |
||||||
|
<template #footer> |
||||||
|
<span class="dialog-footer"> |
||||||
|
<el-button @click="visible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="handleSubmitForm">确 定</el-button> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import { addProcess } from '../../api/flowManagement/index' |
import { addProcess } from '../../api/flowManagement/index'; |
||||||
export default { |
export default { |
||||||
name: 'AddDialog', |
name: 'AddDialog', |
||||||
props: { |
props: { |
||||||
title: { |
title: { |
||||||
type: String, |
type: String, |
||||||
required: true |
required: true, |
||||||
}, |
}, |
||||||
visible: { |
visible: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
required: true, |
required: true, |
||||||
default: false |
default: false, |
||||||
}, |
|
||||||
addForm: { |
|
||||||
type: Object, |
|
||||||
required: true, |
|
||||||
default: () => ({ |
|
||||||
id: 0, |
|
||||||
paCode: "", |
|
||||||
touchingMan: "", |
|
||||||
touchingDept: "", |
|
||||||
touchingTime: "", |
|
||||||
projectName: "", |
|
||||||
bcId: 0, |
|
||||||
projectBackcloth: "", |
|
||||||
projectTarget: "", |
|
||||||
desiredResult: "", |
|
||||||
projectStartTime: "", |
|
||||||
projectDesiredEnd: "", |
|
||||||
projectEnd: "", |
|
||||||
projectSupportMan: "", |
|
||||||
projectHead: "", |
|
||||||
memberId: 0, |
|
||||||
memberName: "", |
|
||||||
approvalStatus: 0, |
|
||||||
stoneList: [] // 里程碑数组 |
|
||||||
}) |
|
||||||
} |
|
||||||
}, |
}, |
||||||
data() { |
addForm: { |
||||||
return { |
type: Object, |
||||||
formError: '', |
required: true, |
||||||
addRules: { |
default: () => ({ |
||||||
projectName: [ |
id: 0, |
||||||
{ required: true, message: '请填写项目名称', trigger: ['blur', 'submit'] } |
paCode: '', |
||||||
], |
touchingMan: '', |
||||||
bcId: [ |
touchingDept: '', |
||||||
{ required: true, message: '请选择项目类型', trigger: ['change', 'submit'] } |
touchingTime: '', |
||||||
], |
projectName: '', |
||||||
touchingDept: [ |
bcId: 0, |
||||||
{ required: true, message: '请选择制单部门', trigger: ['change', 'submit'] } |
projectBackcloth: '', |
||||||
], |
projectTarget: '', |
||||||
projectBackcloth: [ |
desiredResult: '', |
||||||
{ required: true, message: '请填写项目背景', trigger: ['blur', 'submit'] } |
projectStartTime: '', |
||||||
], |
projectDesiredEnd: '', |
||||||
projectTarget: [ |
projectEnd: '', |
||||||
{ required: true, message: '请填写项目目标', trigger: ['blur', 'submit'] } |
projectSupportMan: '', |
||||||
], |
projectHead: '', |
||||||
desiredResult: [ |
memberId: 0, |
||||||
{ required: true, message: '请填写预期效果', trigger: ['blur', 'submit'] } |
memberName: '', |
||||||
], |
approvalStatus: 0, |
||||||
projectHead: [ |
stoneList: [], // 里程碑数组 |
||||||
{ required: true, message: '请选择项目负责人', trigger: ['change', 'submit'] } |
}), |
||||||
], |
}, |
||||||
memberName: [ |
}, |
||||||
{ required: true, message: '请选择成员名称', trigger: ['change', 'submit'] } |
data() { |
||||||
], |
return { |
||||||
projectSupportMan: [ |
formError: '', |
||||||
{ required: true, message: '请选择项目支持人', trigger: ['change', 'submit'] } |
addRules: { |
||||||
], |
projectName: [{ required: true, message: '请填写项目名称', trigger: ['blur', 'submit'] }], |
||||||
projectStartTime: [ |
bcId: [{ required: true, message: '请选择项目类型', trigger: ['change', 'submit'] }], |
||||||
{ required: true, message: '请选择项目开始时间', trigger: ['change', 'submit'] } |
touchingDept: [ |
||||||
], |
{ required: true, message: '请选择制单部门', trigger: ['change', 'submit'] }, |
||||||
projectDesiredEnd: [ |
], |
||||||
{ required: true, message: '请选择项目结束预期时间', trigger: ['change', 'submit'] } |
projectBackcloth: [ |
||||||
], |
{ required: true, message: '请填写项目背景', trigger: ['blur', 'submit'] }, |
||||||
stoneList: [ |
], |
||||||
{ |
projectTarget: [{ required: true, message: '请填写项目目标', trigger: ['blur', 'submit'] }], |
||||||
required: true, |
desiredResult: [{ required: true, message: '请填写预期效果', trigger: ['blur', 'submit'] }], |
||||||
message: '请至少添加一行里程碑数据', |
projectHead: [ |
||||||
trigger: 'submit', |
{ required: true, message: '请选择项目负责人', trigger: ['change', 'submit'] }, |
||||||
type: 'array' |
], |
||||||
}, |
memberName: [{ required: true, message: '请选择成员名称', trigger: ['change', 'submit'] }], |
||||||
{ |
projectSupportMan: [ |
||||||
validator: (rule, value, callback) => { |
{ required: true, message: '请选择项目支持人', trigger: ['change', 'submit'] }, |
||||||
if (value.length === 0) { |
], |
||||||
callback(new Error('请至少添加一行里程碑数据')); |
projectStartTime: [ |
||||||
} else { |
{ required: true, message: '请选择项目开始时间', trigger: ['change', 'submit'] }, |
||||||
callback(); |
], |
||||||
} |
projectDesiredEnd: [ |
||||||
}, |
{ required: true, message: '请选择项目结束预期时间', trigger: ['change', 'submit'] }, |
||||||
trigger: 'submit' |
], |
||||||
} |
stoneList: [ |
||||||
], |
{ |
||||||
|
required: true, |
||||||
|
message: '请至少添加一行里程碑数据', |
||||||
|
trigger: 'submit', |
||||||
|
type: 'array', |
||||||
|
}, |
||||||
|
{ |
||||||
|
validator: (rule, value, callback) => { |
||||||
|
if (value.length === 0) { |
||||||
|
callback(new Error('请至少添加一行里程碑数据')); |
||||||
|
} else { |
||||||
|
callback(); |
||||||
|
} |
||||||
|
}, |
||||||
|
trigger: 'submit', |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
// 里程碑数组项字段校验 |
// 里程碑数组项字段校验 |
||||||
milestonePlan: [ |
milestonePlan: [ |
||||||
{ required: true, message: '请填写里程碑计划', trigger: ['blur', 'submit'] } |
{ required: true, message: '请填写里程碑计划', trigger: ['blur', 'submit'] }, |
||||||
], |
], |
||||||
milestoneMan: [ |
milestoneMan: [ |
||||||
{ required: true, message: '请选择里程碑负责人', trigger: ['change', 'submit'] } |
{ required: true, message: '请选择里程碑负责人', trigger: ['change', 'submit'] }, |
||||||
], |
], |
||||||
outputMaterial: [ |
outputMaterial: [ |
||||||
{ required: true, message: '请输入里程碑输出物', trigger: ['blur', 'submit'] } |
{ required: true, message: '请输入里程碑输出物', trigger: ['blur', 'submit'] }, |
||||||
], |
], |
||||||
milestoneNode: [ |
milestoneNode: [ |
||||||
{ required: true, message: '请选择里程碑节点', trigger: ['change', 'submit'] } |
{ required: true, message: '请选择里程碑节点', trigger: ['change', 'submit'] }, |
||||||
] |
], |
||||||
} |
}, |
||||||
} |
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 判断是否为详情页 |
||||||
|
isDetail() { |
||||||
|
return this.title === '详情'; |
||||||
}, |
}, |
||||||
computed: { |
}, |
||||||
// 判断是否为详情页 |
methods: { |
||||||
isDetail() { |
handleClose() { |
||||||
return this.title === '详情'; |
this.$emit('close ', false); |
||||||
} |
this.formError = ''; |
||||||
|
this.$refs.addForm?.resetFields(); |
||||||
|
}, |
||||||
|
selectChange(list, row) { |
||||||
|
row._select = !row._select; |
||||||
|
}, |
||||||
|
// 删除选中行 |
||||||
|
delTable() { |
||||||
|
this.addForm.stoneList = this.addForm.stoneList.filter(row => !row._select); |
||||||
|
}, |
||||||
|
// 插入里程碑行 |
||||||
|
handleOpenDialog() { |
||||||
|
const newRow = { |
||||||
|
id: 0, |
||||||
|
fmProjectApplication: {}, |
||||||
|
attachList: [], // 附件列表默认空数组 |
||||||
|
paId: 0, |
||||||
|
paIndex: `${(this.addForm.stoneList?.length || 0) + 1}`, |
||||||
|
milestonePlan: '', |
||||||
|
milestoneMan: '', |
||||||
|
outputMaterial: '', |
||||||
|
milestoneNode: '', |
||||||
|
milestoneMemo: '', |
||||||
|
evolve: '', |
||||||
|
lastPlan: '', |
||||||
|
grade: -32768, |
||||||
|
score: 0, |
||||||
|
executeResult: 0, |
||||||
|
executeType: '', |
||||||
|
delayTime: '', |
||||||
|
checkResult: 0, |
||||||
|
checkMan: '', |
||||||
|
checkTime: '', |
||||||
|
gradeMan: '', |
||||||
|
evaluate: '', |
||||||
|
okTime: '', |
||||||
|
delayDate: false, |
||||||
|
fileId: '', |
||||||
|
}; |
||||||
|
if (!this.addForm.stoneList) this.addForm.stoneList = []; |
||||||
|
this.addForm.stoneList.push(newRow); |
||||||
|
|
||||||
|
// this.$emit('open-dialog', newRow); // 通知父组件 |
||||||
|
}, |
||||||
|
// 删除里程碑行 |
||||||
|
handleDelTable(index) { |
||||||
|
this.$confirm('确定删除该条数据么?', '提示', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
cancelButtonText: '取消', |
||||||
|
type: 'warning', |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.addForm.stoneList.splice(index, 1); |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.$emit('del-table', index); // 通知父组件 |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
}, |
}, |
||||||
methods: { |
formatSubmitData(form) { |
||||||
handleClose() { |
const submitData = JSON.parse(JSON.stringify(form)); |
||||||
this.$emit('close ', false); |
if (Array.isArray(submitData.memberName)) { |
||||||
this.formError = ''; |
submitData.memberName = submitData.memberName.map(item => String(item)).join(','); |
||||||
this.$refs.addForm?.resetFields(); |
} |
||||||
}, |
submitData.stoneList = submitData.stoneList.map(row => { |
||||||
// 插入里程碑行 |
const { fmProjectApplication, attachList, paIndex, ...validData } = row; |
||||||
handleOpenDialog() { |
return validData; |
||||||
const newRow = { |
}); |
||||||
id: 0, |
return submitData; |
||||||
fmProjectApplication: {}, |
}, |
||||||
attachList: [], // 附件列表默认空数组 |
async handleSubmitForm() { |
||||||
paId: 0, |
this.formError = ''; |
||||||
paIndex: `${(this.addForm.stoneList?.length || 0) + 1}`, |
this.$refs.addForm.validate((isValid, invalidFields) => { |
||||||
milestonePlan: "", |
if (!isValid) { |
||||||
milestoneMan: "", |
this.formError = '存在未完善的字段，请检查红色提示'; |
||||||
outputMaterial: "", |
this.$nextTick(() => { |
||||||
milestoneNode: "", |
const firstError = document.querySelector('.el-form-item.is-error'); |
||||||
milestoneMemo: "", |
if (firstError) { |
||||||
evolve: "", |
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
||||||
lastPlan: "", |
|
||||||
grade: -32768, |
|
||||||
score: 0, |
|
||||||
executeResult: 0, |
|
||||||
executeType: "", |
|
||||||
delayTime: "", |
|
||||||
checkResult: 0, |
|
||||||
checkMan: "", |
|
||||||
checkTime: "", |
|
||||||
gradeMan: "", |
|
||||||
evaluate: "", |
|
||||||
okTime: "", |
|
||||||
delayDate: false, |
|
||||||
fileId: "" |
|
||||||
}; |
|
||||||
if (!this.addForm.stoneList) this.addForm.stoneList = []; |
|
||||||
this.addForm.stoneList.push(newRow); |
|
||||||
this.$message.success('插入成功'); |
|
||||||
this.$emit('open-dialog', newRow); // 通知父组件 |
|
||||||
}, |
|
||||||
// 删除里程碑行 |
|
||||||
handleDelTable(index) { |
|
||||||
this.$confirm('确定删除该条数据么?', '提示', { |
|
||||||
confirmButtonText: '确定', |
|
||||||
cancelButtonText: '取消', |
|
||||||
type: 'warning' |
|
||||||
}).then(() => { |
|
||||||
this.addForm.stoneList.splice(index, 1); |
|
||||||
this.$message.success('删除成功'); |
|
||||||
this.$emit('del-table', index); // 通知父组件 |
|
||||||
}).catch(() => { }); |
|
||||||
}, |
|
||||||
formatSubmitData(form) { |
|
||||||
const submitData = JSON.parse(JSON.stringify(form)); |
|
||||||
if (Array.isArray(submitData.memberName)) { |
|
||||||
submitData.memberName = submitData.memberName.map(item => String(item)).join(','); |
|
||||||
} |
} |
||||||
submitData.stoneList = submitData.stoneList.map(row => { |
}); |
||||||
const { fmProjectApplication, attachList, paIndex, ...validData } = row; |
return; |
||||||
return validData; |
} |
||||||
}); |
const submitData = this.formatSubmitData(this.addForm); |
||||||
return submitData; |
try { |
||||||
}, |
const res = addProcess(submitData); |
||||||
async handleSubmitForm() { |
if (res.code === 200) { |
||||||
this.formError = ''; |
this.$message.success('提交成功'); |
||||||
this.$refs.addForm.validate((isValid, invalidFields) => { |
this.visible = false; |
||||||
if (!isValid) { |
this.$emit('submit-form', submitData); |
||||||
this.formError = '存在未完善的字段，请检查红色提示'; |
} else { |
||||||
this.$nextTick(() => { |
this.$message.error(res.msg || '提交失败'); |
||||||
const firstError = document.querySelector('.el-form-item.is-error'); |
} |
||||||
if (firstError) { |
this.visible = false; |
||||||
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
this.$emit('submit-form', submitData); |
||||||
} |
} catch (err) { |
||||||
}); |
this.$message.error(err.message); |
||||||
return; |
console.error('提交失败：', err); |
||||||
} |
|
||||||
const submitData = this.formatSubmitData(this.addForm) |
|
||||||
try { |
|
||||||
const res = addProcess(submitData); |
|
||||||
if (res.code === 200) { |
|
||||||
this.$message.success('提交成功'); |
|
||||||
this.visible = false; |
|
||||||
this.$emit('submit-form', submitData); |
|
||||||
} else { |
|
||||||
this.$message.error(res.msg || '提交失败'); |
|
||||||
} |
|
||||||
this.visible = false; |
|
||||||
this.$emit('submit-form', submitData); |
|
||||||
} catch (err) { |
|
||||||
this.$message.error(err.message); |
|
||||||
console.error('提交失败：', err); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
} |
||||||
} |
}); |
||||||
|
}, |
||||||
|
}, |
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style lang="scss" scoped> |
||||||
/* 统一错误提示样式（和 addEditDialog 一致） */ |
// 优化表单字段样式 |
||||||
.error-message { |
:deep(.el-table .el-form-item) { |
||||||
font-size: 14px; |
margin-bottom: 0; // 去掉默认边距 |
||||||
line-height: 1.5; |
|
||||||
} |
} |
||||||
|
|
||||||
|
// 错误提示样式优化 |
||||||
:deep(.el-form-item__error) { |
:deep(.el-form-item__error) { |
||||||
font-size: 12px; |
font-size: 12px; |
||||||
white-space: nowrap; |
white-space: nowrap; |
||||||
z-index: 10; |
z-index: 10; |
||||||
background: #fff; |
background: #fff; |
||||||
padding: 2px 4px; |
padding: 2px 4px; |
||||||
border: 1px solid #f56c6c; |
border: 1px solid #f56c6c; |
||||||
border-radius: 4px; |
border-radius: 4px; |
||||||
} |
} |
||||||
|
|
||||||
:deep(.el-table .el-form-item) { |
.el-table__row { |
||||||
margin-bottom: 0; |
height: 80px !important; |
||||||
} |
} |
||||||
</style> |
|
||||||
|
.el-table__cell { |
||||||
|
vertical-align: middle !important; |
||||||
|
} |
||||||
|
|
||||||
|
.error-message { |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1.5; |
||||||
|
} |
||||||
|
:deep(.el-table .el-table__cell) { |
||||||
|
height: 50px !important; |
||||||
|
padding: 0 !important; |
||||||
|
line-height: 50px !important; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
|
|||||||
Loading…
Reference in new issue