//效果
<template>
<div class="form-page">
<el-form
:model="formData"
:rules="rules"
label-width="120px"
class="form gloal-form-info"
>
<div class="form-content">
<el-row>
<el-col :span="12">
<el-form-item label="清单名称" prop="listName">
<el-input
v-model="formData.listName"
placeholder="请输入清单名称"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="检查部门" prop="checkBranch">
<el-select
v-model="formData.checkBranch"
@change="changeCheckBranch"
placeholder="请选择"
clearable
>
<el-option
v-for="(item, index) of checkBranchList"
:key="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="层数" clearable prop="numberPlies">
<el-input-number
v-model="formData.numberPlies"
:precision="0"
controls-position="right"
:min="0"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="是否有地下部分"
clearable
prop="isUndergroundPart"
>
<el-radio-group
v-model="formData.isUndergroundPart"
@change="changeRadio"
>
<el-radio :label="1">是</el-radio>
<el-radio :label="2">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<div
class="input-event"
v-for="(iitem, index) in formData.formList"
:key="index"
>
<i class="close-event" @click="deleteform(index)">-</i>
<el-row :span="12">
<el-col>
<el-form-item
label="检查事项"
:prop="'formList.' + index + 'checkThing'"
:rules="[
{
required: true,
message: '请选择检查事项',
trigger: 'change',
},
]"
>
<el-input
v-model="formData.formList[index].checkThing"
placeholder="请输入检查事项"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
<div
class="input-content"
v-for="(item2, index2) in formData.formList[index].list"
:key="index2"
>
<i class="close-content" @click="deleteContent(index, index2)">-</i>
<el-row :span="12">
<el-col>
<el-form-item
label="检查内容"
:rules="[
{
required: true,
message: '请选择检查内容',
trigger: 'change',
},
]"
:prop="`formList[${index}].list[${index2}].checkContent`"
>
<el-input
v-model="formData.formList[index].list[index2].checkContent"
placeholder="请输入检查内容"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="检查标准"
:prop="`formList[${index}].list[${index2}].checkStandard`"
>
<el-input
v-model="
formData.formList[index].list[index2].checkStandard
"
placeholder="请输入检查标准"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="addBtn" @click="addContent(index)">添加内容</div>
</div>
<div class="eventAdd" @click="addEvent()">添加事件</div>
</div>
</el-form>
</div>
</template>
<script>
// eslint-disable-next-line
export default {
data() {
return {
rules: {},
formData: {
numberPlies: "",
listName: "",
checkBranch: "",
isUndergroundPart: "",
formList: [
{
checkThing: "",
checkContent: "",
checkStandard: "",
list: [
{
checkContent: "",
checkStandard: "",
},
],
},
],
},
checkBranchList: [],
};
},
methods: {
getHourse() {
getList({ type: "position_of_type" }).then((res) => {
if (res.success) {
this.checkBranchList = res.data || [];
}
});
},
changeRadio() {},
addContent(index) {
this.formData.formList[index].list.push({
checkContent: "",
checkStandard: "",
});
},
changeCheckBranch() {},
addEvent() {
this.formData.formList.push({
checkThing: "",
checkContent: "",
checkStandard: "",
list: [
{
checkContent: "",
checkStandard: "",
},
],
});
},
deleteform(index) {
this.formData.formList.splice(index, 1);
},
deleteContent(index, index2) {
this.formData.formList[index].list.splice(index2, 1);
},
},
};
</script>
<style lang="less" scoped>
.el-input,
.el-select,
.el-input-number,
.el-textarea {
width: 100%;
}
.global-form-info {
padding: 0;
margin-top: 0;
}
.addBtn {
text-align: center;
border: 1px solid #3967d3;
width: 150px;
height: 40px;
line-height: 40px;
margin: 0 auto;
color: #3967d3;
border-radius: 5px;
}
.eventAdd {
text-align: center;
border: 1px solid #3967d3;
width: 150px;
height: 40px;
line-height: 40px;
margin: 0 auto;
background: #3967d3;
border-radius: 5px;
color: #ffffff;
margin-top: 20px;
}
//检查事项
.input-event {
border: 1px dashed #d9d9d9;
margin: 20px 20px 20px 20px;
padding: 20px;
position: relative;
.close-event {
color: #3967d3;
position: absolute;
top: 0;
right: 0;
font-size: 30px;
z-index: 2;
transform: translate(50%, -50%);
width: 30px;
height: 30px;
display: block;
border: 2px solid rgb(165, 9, 9);
border-radius: 50%;
font-style: normal;
font-size: 30px;
text-align: center;
line-height: 30px;
}
}
.input-content {
border: 1px dashed #d9d9d9;
margin: 20px;
padding: 10px;
position: relative;
.close-content {
color: #3967d3;
position: absolute;
top: 0;
right: 0;
font-size: 30px;
z-index: 2;
transform: translate(50%, -50%);
width: 30px;
height: 30px;
display: block;
border: 2px solid rgb(165, 9, 9);
border-radius: 50%;
font-style: normal;
font-size: 30px;
text-align: center;
line-height: 30px;
}
}
.form-content :nth-child(5) :nth-child(3) .close-content {
font-size: 0 !important;
border: none;
}
.form-content :nth-child(5) .close-event {
font-size: 0 !important;
border: none;
}
</style>