You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
264 lines
9.1 KiB
264 lines
9.1 KiB
1 month ago
|
<template>
|
||
|
|
<el-dialog :title="title" append-to-body :modelValue="openShow" width="70%" @close="closeDialog">
|
||
|
|
<div style="margin-bottom: 12px" v-if="moldAddMore">
|
||
|
|
<el-button type="primary" @click="addTable">插入一行</el-button>
|
||
|
|
<el-button type="danger" @click="delTable">删除选中行</el-button>
|
||
|
|
</div>
|
||
|
|
<!-- 单个 Form 包裹整个表格 -->
|
||
|
|
<el-form
|
||
|
|
ref="tableForm"
|
||
|
|
:model="form"
|
||
|
|
:rules="formRules"
|
||
|
|
label-width="0px"
|
||
|
|
>
|
||
|
|
<!-- 全局错误提示 -->
|
||
|
|
<div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;">
|
||
|
|
{{ formError }}
|
||
|
|
</div>
|
||
|
|
<el-table :data="form.tableData" @select="selectChange" border>
|
||
|
|
<el-table-column type="selection" width="55"></el-table-column>
|
||
|
|
<!-- 绩效任务名称 -->
|
||
|
|
<el-table-column align="center" label="绩效任务名称">
|
||
|
|
<template #header>
|
||
|
|
<span><i style="color: red">*</i>绩效任务名称</span>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<el-form-item :prop="`tableData[${scope.$index}].taskName`" :rules="formRules.taskName">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.taskName"
|
||
|
|
placeholder="请输入"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<!-- 绩效填报人 -->
|
||
|
|
<el-table-column align="center" label="绩效填报人">
|
||
|
|
<template #header>
|
||
|
|
<span><i style="color: red">*</i>绩效填报人</span>
|
||
|
|
</template>
|
||
|
|
<template #default="scope">
|
||
|
|
<el-form-item :prop="`tableData[${scope.$index}].reportUser`" :rules="formRules.reportUser">
|
||
|
|
<el-select
|
||
|
|
v-model="scope.row.reportUser"
|
||
|
|
placeholder="请选择绩效填报人"
|
||
|
|
filterable
|
||
|
|
remote
|
||
|
|
:remote-method="remoteMethod"
|
||
|
|
:loading="loading"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in userData"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.realName"
|
||
|
|
:value="item.id"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="closeDialog">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {pageListUser,addItem} from '@/api/performanceManagement/templateMaintenance'
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
showDialog:{
|
||
|
|
type:Boolean,
|
||
|
|
default:false
|
||
|
|
},
|
||
|
|
moldAddMore:{
|
||
|
|
type:Boolean,
|
||
|
|
default:false
|
||
|
|
},
|
||
|
|
title:{
|
||
|
|
type:String,
|
||
|
|
default:''
|
||
|
|
},
|
||
|
|
checkRow:{
|
||
|
|
type:Object,
|
||
|
|
default:() => {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
openShow:false,
|
||
|
|
formError:'',
|
||
|
|
form:{
|
||
|
|
tableData:[]
|
||
|
|
},
|
||
|
|
loading:false,
|
||
|
|
userData:[],
|
||
|
|
formRules:{
|
||
|
|
// 表格数据数组的整体校验（可选：如最少1行数据）
|
||
|
|
tableData: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: '请至少添加一行数据',
|
||
|
|
trigger: 'submit',
|
||
|
|
type: 'array' // 明确类型为数组
|
||
|
|
},
|
||
|
|
{
|
||
|
|
validator: (rule, value, callback) => {
|
||
|
|
if (value.length === 0) {
|
||
|
|
callback(new Error('请至少添加一行数据'));
|
||
|
|
} else {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
trigger: 'submit'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
// 数组中每一项的 wcId 字段校验
|
||
|
|
taskName: [
|
||
|
|
{ required: true, message: '请输入绩效任务名称', trigger: ['change', 'submit'] }
|
||
|
|
],
|
||
|
|
// 数组中每一项的 wcId 字段校验
|
||
|
|
reportUser: [
|
||
|
|
{ required: true, message: '请选择绩效填报人', trigger: ['change', 'submit'] }
|
||
|
|
],
|
||
|
|
},
|
||
|
|
detailRow:{}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
this.openShow = this.showDialog
|
||
|
|
if(this.title == "新增"){
|
||
|
|
this.form.tableData = []
|
||
|
|
this.addTable()
|
||
|
|
}else{
|
||
|
|
this.detailRow = JSON.parse(JSON.stringify(this.checkRow))
|
||
|
|
this.form.tableData = []
|
||
|
|
this.form.tableData.push(this.detailRow)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
closeDialog(val){
|
||
|
|
this.openShow = false
|
||
|
|
this.$emit('closeDialog',val)
|
||
|
|
},
|
||
|
|
addTable(){
|
||
|
|
this.form.tableData.push({
|
||
|
|
_select:false,
|
||
|
|
taskName:"",
|
||
|
|
reportUser:""
|
||
|
|
})
|
||
|
|
},
|
||
|
|
selectChange(list, row){
|
||
|
|
row._select = !row._select;
|
||
|
|
},
|
||
|
|
// 删除选中行
|
||
|
|
delTable() {
|
||
|
|
this.form.tableData = this.form.tableData.filter(row => !row._select);
|
||
|
|
},
|
||
|
|
remoteMethod(query){
|
||
|
|
console.log('query============',query)
|
||
|
|
this.loading = true
|
||
|
|
if(query == ""){
|
||
|
|
pageListUser({
|
||
|
|
current:1,size:300
|
||
|
|
}).then(res =>{
|
||
|
|
this.userData = res.data.data.records
|
||
|
|
this.loading = false
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
pageListUser({
|
||
|
|
current:1,size:300,
|
||
|
|
realName:query
|
||
|
|
}).then(res =>{
|
||
|
|
this.userData = res.data.data.records
|
||
|
|
this.loading = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 提交表单（单次校验所有行）
|
||
|
|
submitForm() {
|
||
|
|
this.formError = '';
|
||
|
|
// 调用单个 Form 的校验方法
|
||
|
|
this.$refs.tableForm.validate((isValid, invalidFields) => {
|
||
|
|
if (!isValid) {
|
||
|
|
// 校验失败：显示提示并滚动到第一个错误字段
|
||
|
|
this.formError = '存在未完善的字段，请检查表格中的红色提示';
|
||
|
|
|
||
|
|
this.$nextTick(() => {
|
||
|
|
// 找到第一个错误字段并滚动到视图
|
||
|
|
const firstError = document.querySelector('.el-form-item.is-error');
|
||
|
|
if (firstError) {
|
||
|
|
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// 校验通过：准备提交数据（过滤无用字段）
|
||
|
|
const submitData = this.form.tableData.map(row => {
|
||
|
|
const { _select, ...validData } = row; // 剔除选择状态字段
|
||
|
|
return validData;
|
||
|
|
});
|
||
|
|
|
||
|
|
if(this.title == "新增"){
|
||
|
|
addItem(submitData).then(res =>{
|
||
|
|
if(res.data.code == 200){
|
||
|
|
this.$message.success('新增成功')
|
||
|
|
this.closeDialog(true)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
addItem(submitData).then(res =>{
|
||
|
|
if(res.data.code == 200){
|
||
|
|
this.$message.success('修改成功')
|
||
|
|
this.closeDialog(true)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
// 优化表单字段样式
|
||
|
|
:deep(.el-table .el-form-item) {
|
||
|
|
margin-bottom: 0; // 去掉默认边距
|
||
|
|
}
|
||
|
|
|
||
|
|
// 错误提示样式优化
|
||
|
|
:deep(.el-form-item__error) {
|
||
|
|
font-size: 12px;
|
||
|
|
white-space: nowrap;
|
||
|
|
z-index: 10;
|
||
|
|
background: #fff;
|
||
|
|
padding: 2px 4px;
|
||
|
|
border: 1px solid #f56c6c;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 表格行高适配 textarea
|
||
|
|
.el-table__row {
|
||
|
|
height: 80px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|