文章目录
第一种：共2层表单，均需校验。第2层表单可动态添加，且有el-table需要校验（el-table也可以动态添加的）
详细代码如下：
<template>
<div>
<scpsForm ref="dataInfo"
:rules="rules"
:disabled="params && params.disabled"
label-width="120px"
:model="dataInfo">
<el-tabs v-model="activeName1">
<el-tab-pane label="问题信息"
width="200px"
name="first">
<el-row class="mt10">
<el-col :span="12">
<el-form-item label="轮次："
prop="roundId">
<el-select style="width:100%"
filterable
value-key="id"
placeholder="请选择轮次"
v-model="dataInfo.roundId">
<el-option v-for="(item, index) in dictList.roundList"
:key="item.id+index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="问题编号："
prop="taskNo">
<el-input v-model="dataInfo.taskNo"
placeholder="请输入任问题号"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="问题描述："
prop="taskContent">
<el-input type="textarea"
placeholder="请输入问题描述"
:autosize="{ minRows: 3 }"
v-model="dataInfo.taskContent"
maxlength="1500"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="整改要求："
prop="taskTarget">
<el-input type="textarea"
placeholder="请输入整改要求"
:autosize="{ minRows: 3 }"
v-model="dataInfo.taskTarget"
maxlength="1000"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="问题类别："
prop="taskType">
<scpsSelect dictCode="gx_questionType"
v-model="dataInfo.taskType"></scpsSelect>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="整改期限："
style="display:inline-block"
:rules="{ required: true, message: '该项为必填', trigger: 'change' }"
prop="finishType">
<scpsCheckBox dictCode="gx_finishType"
@change="selectFinishType"
v-model="dataInfo.finishType">
</scpsCheckBox>
</el-form-item>
<el-form-item :rules="{ required: dataInfo.finishType.includes('0'), message: '请选择时间', trigger: 'change' }"
style="display:inline-block;margin-left:20px;"
label-width="0px"
prop="finishMonth">
<!-- : dataInfo.finishType.includes('0') -->
<el-date-picker type="month"
value-format="yyyy-MM"
placeholder="请选择时间"
v-model="dataInfo.finishMonth"
v-if="dataInfo.finishType.includes('0')"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="责任单位："
prop="responsibleUnitIds">
<el-select style="width:100%"
multiple
placeholder="请选择责任单位"
v-model="dataInfo.responsibleUnitIds">
<el-option v-for="(item, index) in dictList.zrdwList"
:key="item.id + index"
:label="item.name"
:value="item.id">
</el-option>
<!-- value-key="id" -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="督查单位："
prop="dominantUnitIds">
<el-select style="width:100%"
placeholder="请选择督导单位"
multiple
value-key="id"
@change="addDddList"
v-model="dataInfo.dominantUnitIds">
<el-option v-for="(item, index) in dictList.dddwList"
:key="item.id+index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="重点难点任务："
prop="isEmphasis">
<el-radio v-model="dataInfo.isEmphasis"
:disabled="params.status == 'read'"
:label="1">是</el-radio>
<el-radio v-model="dataInfo.isEmphasis"
:disabled="params.status == 'read'"
:label="0">否</el-radio>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="问题措施配置"
name="second">
<div style="height:100%">
<!-- el-card body-style="height:100%" -->
<!-- <template #header>整改措施</template> -->
<el-tabs v-model="editableTabsValue"
type="border-card"
:before-leave="beforeLeave"
tab-position="left">
<!-- type="card" -->
<el-tab-pane key="addMeasure">
<span slot="label">
<el-button type="primary"
size="mini"
round>
+添加措施
</el-button>
</span>
</el-tab-pane>
<template v-for="(row, index2) in dataInfo.rectificationMeasuresList">
<el-tab-pane :key="`dataInfo.rectificationMeasuresList${index2}`">
<span slot="label">
<!-- {{dataInfo.taskNo+'.'}}{{row.measuresNo||'--'}} -->
{{row.measuresNo||'--'}}
</span>
<el-row>
<actionIcon iconClass="del"
v-if="params.status != 'read' && dataInfo.rectificationMeasuresList.length > 1"
style="float:right"
@click="delRow(index2)" />
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="整改措施编号："
:prop="`rectificationMeasuresList.${index2}.measuresNo`"
:rules="[{required:true, message: '整改措施编号问题编号格式如：一（一）、二（一）、十一（三）......',trigger: 'blur'}]">
<!-- :rules="[{required:true, message: '整改措施编号必须为带小数的数值，如1.1、3.8等',trigger: 'blur'}]" -->
<!-- :rules="[].$addRule().$addRule('AllSpace')" -->
<!-- <span>{{dataInfo.taskNo}}.</span> -->
<el-input v-model="row.measuresNo"
placeholder="请输入整改措施编号"
size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="具体措施："
:prop="`rectificationMeasuresList.${index2}.specificMeasures`"
:rules="[].$addRule().$addRule('AllSpace')">
<el-input v-model="row.specificMeasures"
placeholder="请输入具体措施"
type="textarea"
:autosize="{ minRows: 3 }"
size="small"
maxlength="1000"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="措施类型："
:prop="`rectificationMeasuresList.${index2}.measuresType`"
:rules="[].$addRule(null, 'change')">
<scpsSelect dictCode="dc_measures_type"
placeholder="请选择措施类型"
style="width:100%"
size="small"
@change="
() => {
getAssessmentIndexList(row.measuresType, index2)
}
"
v-model="row.measuresType"></scpsSelect>
<!-- refresh() -->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="整改时限："
style="display:inline-block"
:rules="{ required: true, message: '该项为必填', trigger: 'change' }"
:prop="`rectificationMeasuresList.${index2}.finishType`">
<scpsCheckBox dictCode="gx_finishType"
@change="selectFinishLimit($event, index2)"
v-model="row.finishType">
</scpsCheckBox>
</el-form-item>
<el-form-item :rules="{
required: dataInfo.rectificationMeasuresList[index2].finishType.includes('0'),
message: '请选择时间',
trigger: 'change',
}"
style="display:inline-block;margin-left:20px;"
label-width="0px"
:prop="`rectificationMeasuresList.${index2}.finishMonth`">
<el-date-picker type="month"
value-format="yyyy-MM"
placeholder="请选择时间"
v-model="dataInfo.rectificationMeasuresList[index2].finishMonth"
v-if="dataInfo.rectificationMeasuresList[index2].finishType.includes('0')"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="督查单位："
:prop="`rectificationMeasuresList.${index2}.dominantUnitIds`">
<!-- :rules="[].$addRule(null, 'change')" -->
<el-select style="width:100%"
placeholder="请选择督导单位"
multiple
value-key="id"
v-model="row.dominantUnits">
<el-option v-for="(item, index) in dictList.dddwListSub"
:key="`dddwList:${index}`"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="责任单位："
:prop="`rectificationMeasuresList.${index2}.responsibleUnits`"
:rules="[].$addRule(null, 'change')">
<!-- :rules="[].$addRule()" -->
<el-select style="width:100%"
placeholder="请选择责任单位"
multiple
@change="addZrdwListSub(row.responsibleUnits,index2)"
@remove-tag="updateNextList(row.responsibleUnits, index2)"
v-model="row.responsibleUnits">
<el-option v-for="(item, index) in dictList.zrdwList"
:key="item.id + index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="审核单位："
:prop="`rectificationMeasuresList.${index2}.approveUnitId`"
:rules="[].$addRule(null, 'change')">
<el-select style="width:100%"
placeholder="请选择审核单位"
value-key="id"
v-model="row.approveUnitId">
<el-option v-for="(item, index) in dictList.dddwList"
:key="`dddwList:${index}`"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row class="tableBox">
<el-form-item label="考核指标：">
<el-table :data="row.indexAssigns"
border
style="width: 100%">
<el-table-column align="center"
label="指标项">
<template #default="{row}"
v-if="params.status == 'read'">
<el-input v-model="row.assessmentIndex.indexName"></el-input>
</template>
<template #default="{$index,row}"
v-else>
<el-form-item label-width="0"
:prop="`rectificationMeasuresList.${index2}.indexAssigns.${$index}.assessmentIndex.indexName`"
:rules="[].$addRule(null, 'change')">
<el-select style="width:100%"
placeholder="请选择"
filterable
allow-create
no-data-text="尚无指标，请自行输入指标名称"
@change="(r)=>{row.assessmentIndex.units = r.units,
row.assessmentIndex.computationRule = r.computationRule}"
value-key="indexName"
v-model="row.assessmentIndex.indexName">
<el-option v-for="(item, index) in assessmentIndexList[index2]"
:key="index"
:label="item.indexName"
:value="item">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center"
label="计算方式">
<template #default="{$index,row}">
<el-form-item label-width="0"
:prop="`rectificationMeasuresList.${index2}.indexAssigns.${$index}.assessmentIndex.computationRule`"
:rules="[].$addRule(null, 'change')">
<scpsSelect dictCode="gx_computationRule"
:filterable="false"
v-model="row.assessmentIndex.computationRule">
</scpsSelect>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center"
width="200px;">
<template #header>
目标值<br />数值/单位
</template>
<template #default="{$index,row}">
<el-row>
<el-col :span="11">
<el-form-item label-width="0"
:prop="`rectificationMeasuresList.${index2}.indexAssigns.${$index}.targetValue`"
:rules="[].$addRule()">
<el-input type="number"
:disabled="params.disabled"
v-model="row.targetValue"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item>/</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label-width="0"
:prop="`rectificationMeasuresList.${index2}.indexAssigns.${$index}.assessmentIndex.units`"
:rules="[].$addRule()">
<el-input :disabled="params.disabled"
v-model="row.assessmentIndex.units"></el-input>
</el-form-item>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column align="center"
label="责任单位"
style="width:300px;">
<template #default="{$index,row}">
<el-form-item :prop="`rectificationMeasuresList.${index2}.indexAssigns.${$index}.assignResponsibleUnits`"
:rules="[].$addRule(null, 'change')">
<el-select v-model="row.assignResponsibleUnits"
style="width:100%;"
multiple
placeholder="请选择">
<el-option v-for="item in dictList.zrdwListSubNext[index2]"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作"
align="center">
<template #default="{row}">
<el-button size="mini"
type="danger"
plain
@click="handleDelete(index2, row)">-</el-button>
</template>
</el-table-column>
</el-table>
<el-button size="mini"
style="width:100%"
type="primary"
plain
@click="handleAdd()">+</el-button>
</el-form-item>
</el-row>
</el-tab-pane>
</template>
</el-tabs>
</div>
</el-tab-pane>
</el-tabs>
</scpsForm>
</div>
</template>
<script>
import {
task_getTaskById_quting,
assessmentIndex_getListByCondition
} from "@/assets/mock/cuoshi.js";
import { plan_queryDepByUnitOrgType2_zrdwlist } from "@/assets/mock/index.js";
export default {
props: {
params: {
type: Object,
default: () => {}
}
},
data() {
//正整数校验
var valiNumberPass2 = (rule, value, callback) => {
let reg = /^[+]{0,1}(\d+)$/g;
if (value === "") {
callback(new Error("请输入内容"));
} else if (!reg.test(value)) {
callback(new Error("请输入0及0以上的整数"));
} else {
callback();
}
};
//包含小数的数字
var valiNumberPass1 = (rule, value, callback) => {
let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
if (value === "") {
callback(new Error("请输入内容"));
} else if (!reg.test(value)) {
callback(new Error("请输入数字"));
} else {
callback();
}
};
return {
createUnitId: "",
activeName1: "first",
taskBool: true,
dictList: {
roundList: [],
zrdwList: [],
zrdwListSubNext: [],
dddwList: [],
dddwListSub: [],
taskTypeList: []
},
assessmentIndexList: [],
dataInfo: {
finishType: "",
finishStatus: "4",
isEmphasis: 0,
rectificationMeasuresList: [
{
finishType: "",
indexAssigns: null
// [
// {
// assessmentIndex: {
// indexName: "",
// units: "",
// measuresType: "",
// computationRule: ""
// },
// targetValue: "",
// assignResponsibleUnits: []
// }
// ]
}
]
},
// 添加措施时模板
measeuresMock: {
finishType: "0",
indexAssigns: [
{
assessmentIndex: {
indexName: "",
units: "",
computationRule: ""
},
targetValue: "",
assignResponsibleUnits: []
}
]
},
// 整改措施tab
editableTabsValue: "1",
tabIndex: 1
// // 校验
// rules: {
// roundId: [].$addRule(null, "change"),
// taskNo: [
// {
// required: true,
// // validator: valiNumberPass2,
// message: "问题编号格式如：一、二、十一......",
// trigger: "blur"
// }
// ],
// taskContent: [].$addRule(),
// taskTarget: [].$addRule(),
// taskType: [].$addRule(null, "change"),
// // finishLimit: [].$addRule(),
// responsibleUnitIds: [].$addRule(null, "change"),
// finishStatus: [].$addRule(null, "change"),
// isEmphasis: [].$addRule(null, "change"),
// dominantUnitIds: [].$addRule()
// }
};
},
computed: {
// 校验规则
rules() {
return {
roundId: [].$addRule(null, "change"),
taskNo: [
{
required: true,
// validator: valiNumberPass2,
message: "问题编号格式如：一、二、十一......",
trigger: "blur"
}
],
taskContent: [].$addRule(),
taskTarget: [].$addRule(),
taskType: [].$addRule(null, "change"),
// finishLimit: [].$addRule(),
responsibleUnitIds: [].$addRule(null),
finishStatus: [].$addRule(null, "change"),
isEmphasis: [].$addRule(null, "change"),
dominantUnitIds: [].$addRule()
};
}
},
methods: {
// 整改措施tab——相关方法
getTabIndex() {
this.tabIndex = this.dataInfo.rectificationMeasuresList.length;
},
addTab() {
let newTabIndex = ++this.tabIndex + "";
this.editableTabsValue = newTabIndex;
this.dataInfo.rectificationMeasuresList.push({
finishType: "0",
indexAssigns: [
{
assessmentIndex: {
indexName: "",
units: "",
computationRule: ""
},
targetValue: "",
assignResponsibleUnits: []
}
]
});
this.getTabIndex();
this.$nextTick(() => {
this.$refs.dataInfo.clearValidate();
});
},
// 活动标签切换时触发
beforeLeave(currentName, oldName) {
var self = this;
//重点，如果name是add，则什么都不触发
if (currentName == "0") {
if (this.params.status != "read") {
this.addTab();
}
return false;
} else {
return;
}
},
// 考核指标——相关方法
handleAdd() {
const num = this.editableTabsValue - 1;
if (this.dataInfo.rectificationMeasuresList[num].indexAssigns == null) {
this.dataInfo.rectificationMeasuresList[num].indexAssigns = [];
}
this.dataInfo.rectificationMeasuresList[num].indexAssigns.push({
assessmentIndex: {
indexName: "",
units: "",
computationRule: ""
},
targetValue: "",
assignResponsibleUnits: []
});
},
handleDelete(index, row) {
const num = this.editableTabsValue - 1;
this.dataInfo.rectificationMeasuresList[num].indexAssigns.splice(
index,
1
);
},
//添加任务措施督导单位选项
addDddList(data) {
this.dictList.dddwListSub = [];
let list = JSON.parse(JSON.stringify(this.dictList.dddwList));
this.dictList.dddwListSub = list.filter(i => {
return data.includes(i.id);
});
},
// 获取指标列名称列表
/* assessmentIndex/getPageList
?measuresType=
&createUnitId=
&pageNo=1
&pageSize=999 */
async getAssessmentIndexList(val, index) {
let res = await this.$getAction("assessmentIndex/getPageList", {
measuresType: val,
createUnitId: this.$store.getters.userInfo.department.id,
pageNo: 1,
pageSize: 999
});
// res = assessmentIndex_getListByCondition;
this.$set(this.assessmentIndexList, index, res.records);
},
//add状态下——添加任务措施责任单位选项
addZrdwListSub(data, index) {
let res = [];
let list = JSON.parse(JSON.stringify(this.dictList.zrdwList));
res = list.filter(i => {
return data.includes(i.id);
});
this.$set(this.dictList.zrdwListSubNext, index, res);
},
// 删去某些多选选项后清空后面有关联的选项内容 并更新后续下拉列表的选项
updateNextList(data, index) {
this.dictList.zrdwListSubNext[index].filter(r => {
r.responsibleUnitId != data;
});
this.dataInfo.rectificationMeasuresList[index].indexAssigns.map(
h => (h.assignResponsibleUnits = "")
);
},
// 暂存+修改
save() {
this.$refs.dataInfo.validate(async valid => {
if (valid) {
if (this.dataInfo.finishType.includes("0")) {
if (
this.dataInfo.rectificationMeasuresList.filter(
r => r.finishMonth > this.dataInfo.finishMonth
).length > 0
) {
this.$message({
showClose: true,
message: "措施完成时限不能大于任务完成时限！",
type: "warning"
});
return;
}
}
if (this.params.status == "add") {
this.dataInfo.rectificationMeasuresList.map(item => {
if (item.indexAssigns != null) {
const _measuresType = item.measuresType;
item.indexAssigns.map(item => {
item.createUnitId = this.$store.getters.userInfo.department.id;
item.assessmentIndex.measuresType = _measuresType;
});
return item.indexAssigns;
}
});
}
// 指标项里面的责任单位格式// 只放indexname
this.dataInfo.rectificationMeasuresList.map(h => {
if (h.indexAssigns != null) {
h.indexAssigns.map(q => {
let _assignResponsibleUnits = [];
q.assignResponsibleUnits.map(item => {
if (item.responsibleUnitId) {
// 有responsibleUnitId
_assignResponsibleUnits.push(item);
} else {
// 没有responsibleUnitId
_assignResponsibleUnits.push({
responsibleUnitId: item
});
}
});
q.assignResponsibleUnits = _assignResponsibleUnits;
});
}
});
this.dataInfo.rectificationMeasuresList.map(h => {
if (h.indexAssigns != null) {
// 只放indexname
h.indexAssigns.map(item => {
if (typeof item.assessmentIndex.indexName == "object") {
let _assessmentIndex = item.assessmentIndex.indexName;
item.assessmentIndex = _assessmentIndex;
} else {
return;
}
});
}
});
let dataInfo = JSON.parse(JSON.stringify(this.dataInfo));
//映射任务的责任单位
dataInfo.responsibleUnitIds = dataInfo.responsibleUnitIds.map(
item => {
if (item === "id") return;
return {
id: item
};
}
);
//映射措施的责任单位和督导单位
dataInfo.rectificationMeasuresList.forEach(r => {
r.responsibleUnits = r.responsibleUnits.map(t => {
return { id: t };
});
r.dominantUnits = r.dominantUnits.map(t => {
return { id: t };
});
});
//去除全选字段
// dataInfo.responsibleUnitIds = dataInfo.responsibleUnitIds.filter(
// i => i.id !== "all"
// );
//任务责任转字符串
dataInfo.responsibleUnitIds = dataInfo.responsibleUnitIds
.map(r => {
return r.id;
})
.join(",");
if (this.params.status != "add") {
if (dataInfo.responsibleUnitIds instanceof Array) {
dataInfo.responsibleUnitIds = dataInfo.responsibleUnitIds
? dataInfo.responsibleUnitIds.join(",")
: "";
}
}
//任务督导转字符串
dataInfo.dominantUnitIds = dataInfo.dominantUnitIds
? dataInfo.dominantUnitIds.join(",")
: "";
if (this.params.status == "edit") {
await this.$putAction("task/edit", { ...dataInfo });
} else {
await this.$postAction("task/add", {
...dataInfo
});
}
this.$message({
showClose: true,
message: this.params.status !== "add" ? "修改成功" : "新增成功",
type: "success"
});
this.$emit("close");
} else {
this.$message({
showClose: true,
message: "部分字段格式有误或必填字段未填写！",
type: "warning"
});
}
});
},
// 下发：task/taskIssue?id=任务id
anotherSave() {
this.$getAction("task/taskIssue", {
id: this.params.infoData.id
});
this.$message({
showClose: true,
message: "下发成功",
type: "success"
});
this.$emit("close");
},
// 删除措施
delRow(index) {
if (this.dataInfo.rectificationMeasuresList.length > 1) {
this.$confirm(`是否删除改措施？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.dataInfo.rectificationMeasuresList.splice(index, 1),
this.getTabIndex(),
this.$message({
message: "操作成功！",
type: "success"
});
});
}
},
selectResponsibleUnit(data) {
if (data.includes("all") && this.taskBool) {
this.dataInfo.responsibleUnitIds = this.dictList.zrdwList.map(
i => i.id
);
this.taskBool = false;
}
if (!this.taskBool && !data.includes("all")) {
this.dataInfo.responsibleUnitIds = [];
this.taskBool = true;
}
//清空所有措施的责任单位选项
// this.dataInfo.rectificationMeasuresList.forEach(item => {
// item.responsibleUnits = [];
// });
},
// 获取各个列表
async getDict() {
let roundList = await this.$getAction("/round/pagelist", {
pageNo: 1,
pageSize: 9999
});
this.dictList.roundList = roundList.records;
// 获取责任单位
let zrdwList = await this.$getAction("plan/queryDepByUnitOrgType", {
pageNo: 1,
pageSize: 9999,
unitOrgType: 0
});
// let zrdwList = plan_queryDepByUnitOrgType2_zrdwlist;
this.dictList.zrdwList = zrdwList.records;
// this.dictList.zrdwList.unshift({ id: "all", name: "全选" });
// 获取督导单位
let dddwList = await this.$getAction("plan/queryDepByUnitOrgType", {
pageNo: 1,
pageSize: 9999,
unitOrgType: 4
});
this.dictList.dddwList = dddwList.records;
},
selectFinishType(data) {
if (!this.dataInfo.finishType.includes("0")) {
this.$refs.dataInfo.clearValidate("finishMonth");
}
},
selectFinishLimit(e, id) {
if (
!this.dataInfo.rectificationMeasuresList[id].finishType.includes("0")
) {
this.$refs.dataInfo.clearValidate(
`rectificationMeasuresList.${id}.finishMonth`
);
}
},
// 提取单位中的id，最终返回对应单位名称
getUnitName(target, val) {
let _zrdwlist = this.dictList.dddwList;
if (typeof target == "string") {
_zrdwlist.map(r => {
if (target == r.responsibleUnitId) {
target = r.name;
}
});
} else if (target instanceof Array) {
let _arr = [];
let _newArr = [];
target.map(h => {
_arr.push(h[val]);
});
_zrdwlist.map(r => {
_arr.map(h => {
if (r.responsibleUnitId == h) {
_newArr.push(r.name);
}
});
});
target = _newArr.join(",");
}
return target;
}
},
async created() {
await this.getDict();
this.$refs.dataInfo.clearValidate();
if (this.params.status !== "add") {
// 修改-查看详情：task/getTaskById?id=任务id&assignType=1
let res = await this.$getAction("task/getTaskById", {
id: this.params.infoData.id,
column: "create_time",
order: "desc",
assignType: 1
});
this.dataInfo = res[0];
// this.dataInfo = task_getTaskById_quting[0];
// 查看或编辑状态下_获取对应措施类型measuresType的指标列表
this.dataInfo.rectificationMeasuresList.map((item, index) => {
this.getAssessmentIndexList(item.measuresType, index);
});
this.dataInfo.rectificationMeasuresList.map((item, index) => {
let _responsibleUnitsIdArr = [];
_responsibleUnitsIdArr = item.responsibleUnits.map(r => r.id);
this.addZrdwListSub(_responsibleUnitsIdArr, index);
});
// this.$forceUpdate(this.dictList.zrdwListSubNext)
// 指标项中责任单位转换分割成数组
this.dataInfo.rectificationMeasuresList.forEach(item => {
item.indexAssigns.map(item => {
let _assignResponsibleUnits = [];
item.assignResponsibleUnits.forEach(item => {
_assignResponsibleUnits.push(item.responsibleUnitId);
});
item.assignResponsibleUnits = _assignResponsibleUnits;
});
});
//映射督导单位、责任单位、审核单位的值
this.dataInfo.rectificationMeasuresList.map(item => {
item.responsibleUnits = item.responsibleUnits.map(item => item.id);
item.dominantUnits = item.dominantUnits.map(item => item.id);
// 如果“审核单位”只返回一个id的字符串
// const _arr = [].push(item.approveUnitId);
// item.approveUnitId = _arr;
item.approveUnitName = this.getUnitName(
item.approveUnitId,
"approveUnitId"
);
});
//映射任问题信息中务督查单位选项
this.dataInfo.dominantUnitIds =
this.dataInfo.dominantUnitIds &&
this.dataInfo.dominantUnitIds.split(",");
let list = JSON.parse(JSON.stringify(this.dictList.dddwList));
this.dictList.dddwListSub = list.filter(i => {
return this.dataInfo.dominantUnitIds.includes(i.id);
});
// 映射问题信息中责任单位选项
this.dataInfo.responsibleUnitIds =
this.dataInfo.responsibleUnitIds &&
this.dataInfo.responsibleUnitIds.split(",");
// this.dataInfo.rectificationMeasuresList.map((r, index) => {
// r.responsibleUnitIds =
// this.dataInfo.rectificationMeasuresList[index].responsibleUnitIds &&
// this.dataInfo.rectificationMeasuresList[
// index
// ].responsibleUnitIds.split(",");
// });
let list1 = JSON.parse(JSON.stringify(this.dictList.zrdwList));
this.dictList.zrdwListSubNext.map(item => {
let res = list1.filter(i => {
this.dataInfo.rectificationMeasuresList.map(_item => {
_item.responsibleUnitIds.includes(i.id);
});
});
item = res;
});
}
await this.getTabIndex();
}
};
</script>
<style lang="less">
.el-table th,
.el-table tr {
height: 10px !important;
}
.el-tabs--top {
.el-tabs__content {
height: 616px;
overflow: hidden;
overflow-y: auto;
}
}
.el-tabs--left {
.el-tabs__content {
height: 583px;
overflow: hidden;
overflow-y: auto;
}
}
.tableBox {
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 0px;
}
}
</style>
第二种：共1层表单，需校验。表单中有el-table需要校验（el-table可以动态添加的）
<template>
<div>
<scpsForm ref="info1"
label-width="100px"
:model="infoData">
<el-tabs v-model="activeName1">
<el-tab-pane label="问题措施信息"
name="first">
<el-row>
<el-col :span="12">
<el-form-item label="措施编号:">
<el-input :value="infoData.measuresNo"
disabled></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="具体措施：">
<el-input v-model="infoData.specificMeasures"
type="textarea"
:autosize="{ minRows: 3 }"
size="small"
maxlength="1000"
disabled></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="措施类型：">
<scpsSelect dictCode="dc_measures_type"
style="width:100%"
size="small"
@change="()=>{getAssessmentIndexList(row.measuresType);}"
v-model="infoData.measuresType"
disabled></scpsSelect>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="整改时限："
style="display:inline-block">
<!-- <div v-dictionMap:gx_finishType="infoData.finishType"
class="inputSty"
disabled></div> -->
<scpsCheckBox dictCode="gx_finishType"
v-model="infoData.finishType"
disabled>
</scpsCheckBox>
</el-form-item>
<el-form-item style="display:inline-block;margin-left:20px;"
label-width="0px">
<el-date-picker type="month"
disabled
value-format="yyyy-MM"
v-model="infoData.finishMonth"
v-show="infoData.finishType.includes('0')"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="督查单位："
prop="dominantUnits">
<el-select style="width:100%"
multiple
disabled
v-model="infoData.dominantUnits">
<el-option v-for="(item) in dddwList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="责任单位："
prop="responsibleUnits">
<el-select style="width:100%"
multiple
disabled
v-model="infoData.responsibleUnits">
<el-option v-for="(item) in dddwList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="考核指标：">
<el-table :data="infoData.indexAssigns"
border
style="width: 80%">
<el-table-column align="center"
label="指标项">
<template #default="{row}">
<span>{{row.assessmentIndex.indexName}}</span>
</template>
</el-table-column>
<el-table-column align="center"
label="计算方式">
<template #default="{row}">
<span v-dictionMap:gx_computationRule="row.assessmentIndex.computationRule"></span>
</template>
</el-table-column>
<el-table-column align="center"
width="200px;"
label="目标值">
<template #default="{row}">
<span>{{row.targetValue}}</span>
<span>/</span>
<span>{{row.assessmentIndex.units}}</span>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-row>
</el-tab-pane>
<el-tab-pane label="措施指派"
name="second">
<scpsForm ref="info2"
:model="tableInfo"
:rules="rule"
v-if="params.status == 'edit'">
<el-row class="mt10">
<el-col :span="24">
<el-form-item label="责任单位："
label-width="100px"
prop="measuresResponsibleUnits">
<el-select style="width:100%"
:disabled="params.disabled"
multiple
@change="addZrdwList"
@remove-tag="updateSubNextList"
v-model="tableInfo.measuresResponsibleUnits">
<el-option v-for="(item) in zrdwList"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24"
class="tableBox">
<el-form-item label="考核指标："
label-width="100px">
</el-form-item>
<el-table border
:data="tableInfo.indexAssigns2"
style="width: 100%">
<el-table-column align="center"
prop="indexName"
label="指标项">
<template #default="{$index,row}">
<el-form-item :prop="`indexAssigns2.${$index}.assessmentIndex.indexName`"
:rules="[].$addRule(null, 'change')">
<el-select style="width:100%"
placeholder="请选择"
:disabled="params.disabled"
filterable
allow-create
no-data-text="尚无指标，请自行输入指标名称"
@change="(r)=>{row.assessmentIndex.units = r.units,
row.assessmentIndex.computationRule = r.computationRule}"
value-key="id"
v-model="row.assessmentIndex.indexName">
<el-option v-for="(item) in assessmentIndexList"
:key="item.id"
:label="item.indexName"
:value="item">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center"
prop="computationRule"
label="计算方式">
<template #default="{$index,row}">
<el-form-item :prop="`indexAssigns2[${$index}].assessmentIndex.computationRule`"
:rules="[].$addRule(null, 'change')">
<scpsSelect dictCode="gx_computationRule"
:filterable="false"
v-model="row.assessmentIndex.computationRule">
</scpsSelect>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center"
width="200px;"
prop="targetValue">
<template #header>
目标值<br />数值/单位
</template>
<template #default="{$index,row}">
<el-row>
<el-col :span="11">
<el-form-item :prop="`indexAssigns2[${$index}].targetValue`"
:rules="[].$addRule()">
<el-input type="number"
:disabled="params.disabled"
v-model="row.targetValue"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item>/</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item :prop="`indexAssigns2[${$index}].assessmentIndex.units`"
:rules="[].$addRule()">
<el-input :disabled="params.disabled"
v-model="row.assessmentIndex.units"></el-input>
</el-form-item>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column align="center"
prop="assignResponsibleUnits"
label="责任单位">
<template #default="{$index,row}">
<el-form-item :prop="`indexAssigns2[${$index}].assessmentIndex.units`"
:rules="[].$addRule(null, 'change')">
<el-select v-model="row.assignResponsibleUnits"
:disabled="params.disabled"
multiple=""
placeholder="请选择">
<el-option v-for="(item) in zrdwListSub"
:key="item.name"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作"
align="center"
v-if="params.status == 'edit'">
<template #default="{$index,row}">
<el-form-item>
<el-button size="mini"
type="danger"
plain
@click="handleDelete($index, row)">-</el-button>
</el-form-item>
</template>
</el-table-column>
</el-table>
<el-button size="mini"
style="width:100%"
type="primary"
plain
@click="handleAdd()">+</el-button>
</el-col>
</el-row>
</scpsForm>
</el-tab-pane>
</el-tabs>
</scpsForm>
</div>
</template>
<script>
import { mixinDetail } from "@/globalMixin";
export default {
mixins: [mixinDetail],
props: {
params: {
type: Object,
default: () => {}
}
},
data() {
return {
activeName1: "first",
infoData: {},
zrdwList: [],
dddwList: [],
qxzrdwList: [],
tableInfo: {
measuresResponsibleUnits: [],
indexAssigns2: null
// [
// {
// assessmentIndex: {
// indexName: "",
// units: "",
// computationRule: null
// },
// targetValue: "",
// assignResponsibleUnits: []
// }
// ]
},
zrdwListSub: [],
assessmentIndexList: []
};
},
computed: {
rule() {
return {
measuresResponsibleUnits: [].$addRule(null, "change")
};
}
},
methods: {
// 获取责任单位列表+督查单位列表
async getDict() {
let zrdwList = await this.$getAction("plan/queryDepByUnitOrgType", {
pageNo: 1,
pageSize: 9999,
unitOrgType: 2
});
this.zrdwList = zrdwList.records;
let dddwList = await this.$getAction("plan/queryDepByUnitOrgType", {
pageNo: 1,
pageSize: 9999,
unitOrgType: 3
});
this.dddwList = dddwList.records;
},
//添加任务措施责任单位选项
addZrdwList(data) {
this.zrdwListSub = [];
let list = JSON.parse(JSON.stringify(this.zrdwList));
this.zrdwListSub = list.filter(i => {
return data.indexOf(i.id) >= 0;
});
},
// 删去某些多选选项后清空后面有关联的选项内容 并更新后续下拉列表的选项
updateSubNextList(data) {
this.zrdwListSub.filter(r => {
r.responsibleUnitId != data;
});
this.tableInfo.indexAssigns2.map(r => (r.assignResponsibleUnits = ""));
},
/* assessmentIndex/getPageList
?measuresType=
&createUnitId=
&pageNo=1
&pageSize=999 */
async getAssessmentIndexList(val, index) {
let res = await this.$getAction("assessmentIndex/getPageList", {
measuresType: val,
createUnitId: "9ce9318e857c4c0a864c27982ba6620e", //gx-zhc 的 id
pageNo: 1,
pageSize: 999
});
this.assessmentIndexList = res.records;
// res = assessmentIndex_getListByCondition;
// this.$set(this.assessmentIndexList, index, res.records);
},
// 增加/删除 考核指标
handleAdd() {
if (this.tableInfo.indexAssigns2 == null) {
this.tableInfo.indexAssigns2 = [];
}
this.tableInfo.indexAssigns2.push({
assessmentIndex: {
indexName: "",
units: "",
computationRule: null
},
targetValue: "",
assignResponsibleUnits: []
});
},
handleDelete(index, row) {
this.tableInfo.indexAssigns2.splice(index, 1);
},
// 指派-提交：rectificationmeasures/assignCounty
async save(done) {
this.$refs.info2.validate(async valid => {
if (valid) {
if (this.tableInfo.indexAssigns2 != null) {
// 指标项里面的责任单位格式
this.tableInfo.indexAssigns2.map(item => {
let _assignResponsibleUnits = [];
item.assignResponsibleUnits.map(item => {
if (item.responsibleUnitId) {
// 有responsibleUnitId
_assignResponsibleUnits.push(item);
} else {
// 没有responsibleUnitId
_assignResponsibleUnits.push({
responsibleUnitId: item
});
}
});
item.assignResponsibleUnits = _assignResponsibleUnits;
});
// 只放indexname
this.tableInfo.indexAssigns2.map(item => {
if (typeof item.assessmentIndex.indexName == "object") {
let _assessmentIndex = item.assessmentIndex.indexName;
item.assessmentIndex = _assessmentIndex;
} else {
return;
}
});
}
let _responsibleUnits = [];
this.tableInfo.measuresResponsibleUnits.map(item => {
if (item.id) {
_responsibleUnits.push(item);
} else {
_responsibleUnits.push({
id: item
});
}
});
this.tableInfo.measuresResponsibleUnits = _responsibleUnits;
if (this.params.status == "edit") {
await this.$putAction("rectificationmeasures/assignCounty", {
id: this.infoData.id,
measuresNo: this.infoData.measuresNo,
measuresType: this.infoData.measuresType,
roundId: this.infoData.roundId,
taskId: this.infoData.taskId,
...this.tableInfo
});
this.$message({
type: "success",
message: "指派成功"
});
this.$emit("close");
}
} else {
this.$message({
type: "warning",
message: "请先完善信息！！"
});
}
});
}
},
async created() {
await this.getDict();
// 指派-查询基本信息：rectificationmeasures/getMeasuresById?id=措施id&assignType=1
let res = await this.$getAction("rectificationmeasures/getMeasuresById", {
id: this.params.infoData.id,
assignType: 1
});
this.infoData = res;
// 提取 获取的责任单位&督查单位数据 中的id，组成一个字符串数组
this.infoData.responsibleUnits = this.infoData.responsibleUnits.map(
item => {
return item.id;
}
);
this.infoData.dominantUnits = this.infoData.dominantUnits.map(item => {
return item.id;
});
this.getAssessmentIndexList(res.measuresType); // 查看或编辑状态下_获取对应措施类型measuresType的指标列表
// tableInfo 数据
this.tableInfo.measuresResponsibleUnits = res.measuresResponsibleUnits;
this.tableInfo.indexAssigns2 = res.indexAssigns2;
if (this.tableInfo.indexAssigns2 != null) {
this.tableInfo.indexAssigns2.map(item => {
item.assignResponsibleUnits = item.assignResponsibleUnits.map(r => {
return r.responsibleUnitId;
});
});
}
this.tableInfo.measuresResponsibleUnits = res.measuresResponsibleUnits.map(
item => {
return item.id;
}
);
this.addZrdwList(this.tableInfo.measuresResponsibleUnits);
}
};
</script>
<style lang="less">
.tableBox {
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 0px;
}
}
</style>
总结：注意两个案例中，el-table 中 prop校验的区别
第一种：2层表单可以动态添加不同对象A，而每一个对象A中又可以在table中添加若干个对象B。遍历比较复杂
第二种：其实算起来只有1层表单，第1层表单有table，而table可以动态添加若干份对象A
taskMeasures.vue // taskMeasuresAssign.vue
1952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
