![](https://img2020.cnblogs.com/blog/1228856/202112/1228856-20211223114045786-768337842.png)
<div v-loading='loading' v-show="isShow">
<div class="plan-box">
<div class="plan" v-for="item in cities" :key="item.id">
<label class="label-plan">
<input type="checkbox" id="" :value="JSON.stringify(item)" class="ipt">
</label>
<div class="plan-right">
<div class="item">
<span>设备模块</span>
<p>{{item.moduleName}}</p>
</div>
<div class="item">
<span>项目名称</span>
<p>{{item.fPartName}}</p>
</div>
<div class="item">
<span>点检频率(天)</span>
<p>{{item.cycle}}</p>
</div>
<div class="item">
<span>点检方法</span>
<p>{{item.fMethod}}</p>
</div>
<div class="item">
<span>内容和标准</span>
<p>{{item.fContent}}</p>
</div>
<div class="item">
<span>异常处理</span>
<p>{{item.fException}}</p>
</div>
<div class="item">
<span>状态</span>
<br />
<select id="mySelect" v-model="item.fStatus">
<option value="0">OK</option>
<option value="1">NG</option>
</select>
</div>
<div class="item">
<span>备注</span>
<br />
<textarea v-model="item.fRemark"></textarea>
</div>
</div>
</div>
</div>
<div class="boxBottom">
<label>
<input @change="selectAll" type="checkbox" style="margin-left:30px">
<span class="quanxuan">全选</span>
</label>
<div class="boxButton">
<el-button type="mini" @click="addParts()">备件更换</el-button>
<el-button type="mini" @click="submitForm('ruleForm',0)">保存</el-button>
<el-button type="mini" @click="submitForm('ruleForm',1)" style="background: #409EFF;color: white;">
提交
</el-button>
</div>
</div>
</div>
--------------------------------------------
data() {
return {
checkedCities: [],
cities: [],
isShow: true,
}
}
方法中:
// 根据设备查询点检项目
GetPlanByDeviceSN() {
this.loading = true;
// 调用封装好的get请求
this.$http.getForm('api/DeviceSpotCheckRecord/GetMaintainItemsByDevice', {
params: {
DeviceSN: this.deviceSN,
}
}).then(response => {
this.loading = false;
if (response.state == '0') { //请求成功
if (response.data == null || response.data == '') {
this.cities = []
return
}
this.cities = response.data;
// console.log('this.cities', this.cities)
let arr = []
for (let i = 0; i < this.cities.length; i++) {
this.cities[i].fStatus = '0';
if (this.cities[i].isSave == 1) {
arr.push(this.cities[i])
}
}
this.checkedCities = arr;
this.handleChecked(arr)
this.GetDeviceMaintainRecordList()
} else {
alert(response.message)
}
})
},
handleChecked(data) { //保存选中效果
this.$nextTick(() => {
let checklist = document.querySelectorAll('.ipt')
for (const iterator of checklist) {
let item = JSON.parse(iterator.value)
for (const key of data) {
if (item.id == key.id) {
iterator.checked = true
}
}
}
})
},
selectAll(event) { //全选、反选
let value = event.target.checked
let checklist = document.querySelectorAll('.ipt')
if (value) {
for (var i = 0; i < checklist.length; i++) {
checklist[i].checked = true
}
} else {
for (var i = 0; i < checklist.length; i++) {
checklist[i].checked = false
}
}
},
// 提交
submitFormOK() {
//选中的数组
// let arr = this.cities.filter(item => this.checkedCities.some(ele => ele === item.id))
let checklist = document.querySelectorAll('.ipt') //提交时获取已选择的项
let arr = []
for (let index = 0; index < checklist.length; index++) {
if (checklist[index].checked) { //获取true
arr.push(JSON.parse(checklist[index].value))
}
}
}
------------------------------------------
<style scoped>
div {
box-sizing: border-box;
}
.plan-box {
padding: 10px;
}
.plan {
100%;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
border: 1px solid #eee;
border-radius: 3px;
}
.plan label {
60px;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.plan .plan-right {
calc(100% - 60px);
min-height: 80px;
display: flex;
flex-wrap: wrap;
}
.plan-right .item {
/* display: flex;
align-items: center; */
25%;
/* margin-right: 40px; */
font-size: 14px;
padding: 5px;
}
.plan-right .item span {}
.plan-right .item p {
background: #f9f9f9;
padding: 6px 10px;
border-radius: 3px;
margin-left: 6px;
min- 40px;
/* height: 36px; */
/* line-height: 36px; */
margin: 0;
color: #666;
}
.plan-right .item select {
80px;
height: 30px;
background: #f9f9f9;
border-radius: 3px;
outline: none;
margin-top: 3px;
}
.plan:last-child {
margin-bottom: 50px;
}
.plan-right .item textarea {
90%;
margin-top: 3px;
}
>>>.el-checkbox__input.is-checked+.el-checkbox__label {
color: #272828;
}
</style>