<el-button type="primary"
icon="el-icon-circle-plus-outline"
:size="$formSize"
@click="addDevice"
:disabled="readOnly">添加</el-button>
<div v-for="(item,index) in actionList" :key="item.devId" class="block">
<el-form ref="actionBlockForm"
:model="item"
:rules="formBlockRule"
:size="$formSize"
label-width="130px">
<el-form-item :label="'执行设备'+(index < 10 ? '0' + (index+1) : (index+1))" prop="devAlias">
<el-input v-model="item.devAlias" style="width: 300px;" disabled></el-input>
</el-form-item>
<el-form-item label="控制" prop="checkList">
<el-checkbox-group v-model="item.checkList">
<el-checkbox v-for="(item1,index1) in item.currentProperty"
@change="handleCheckboxChange(index, item1.identifier)"
:key="index1"
:label="item1.identifier"
:disabled="readOnly">{{item1.identifierDesc}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<el-button :size="$formSize"
class="button-delete-primary"
:disabled="readOnly"
icon="el-icon-delete"
@click="delBlock(index)">删除</el-button>
</div>
<el-button :size="$buttonSize"
class="button-minwidth"
type="primary"
:disabled="readOnly"
:loading="btnLoading"
@click="onSubmit">提交</el-button>
data(){
return{
actionList:[],
formBlockRule:{
devAlias:[{ required: true, message: '执行设备名称不能为空', trigger: "blur" }],
checkList:[{ type:'array', required: true, message: '请至少选择一个选项', trigger: 'change'} ]
}
}
},
methods:{
addDevice(){
},
handleCheckboxChange(index,value){
if(value!=='multiSwitch'){
let arr =this.actionList[index].checkList.filter((item) => item !== 'multiSwitch')
this.actionList[index].checkList=arr
}else{
this.actionList[index].checkList=['multiSwitch']
}
},
delBlock(index){
this.actionList.splice(index, 1);
},
onSubmit(){
function validateList(formArr) {
let arr = [];
formArr.forEach((item) => {
arr.push(
new Promise((resolve) => {
item.validate((valid) => {
if (!valid) {
resolve(false);
}
resolve(true);
});
})
);
});
return arr;
}
const validateactionBlockForm = () => {
return new Promise((resolve) => {
let formArr = this.$refs["actionBlockForm"];
if (!formArr) {
resolve(true);
return;
}
Promise.all(validateList(formArr)).then((res) => {
if (res.includes(false)) {
resolve(false);
} else {
resolve(true);
}
});
})
}
validateactionBlockForm().then((res) => {
if (!res) return;
}
}