174 lines
7.6 KiB
Vue
174 lines
7.6 KiB
Vue
<template>
|
|
<div>
|
|
<el-form label-width="140px">
|
|
<el-form-item :label="title">
|
|
<el-button type="primary" size="small" @click="addDeviceCondition" :disabled="isdisabled">添加</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
:data="ConditionVOList" border style="margin-top:10px;margin-left:10px;width:901px">
|
|
<el-table-column :label="$t('scriptRecord.deviceType')" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.isAdded">{{scope.row.deviceType}}</div>
|
|
<el-select v-else v-model="scope.row.deviceType" placeholder="请选择" @change="changeDeviceType($event,scope.row)">
|
|
<el-option v-for="deviceType in deviceTypeList" :key="deviceType.value" :label="deviceType.label" :value="deviceType.value"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="$t('scriptRecord.deviceCode')" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.isAdded">{{scope.row.code}}</div>
|
|
<el-select v-else v-model="scope.row.code" placeholder="请选择">
|
|
<el-option v-for="deviceCode in deviceCodeList" :key="deviceCode.code" :label="deviceCode.name" :value="deviceCode.code"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="$t('scriptRecord.deviceCondition')" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.isAdded">{{scope.row.condition}}</div>
|
|
<el-select v-else v-model="scope.row.condition" placeholder="请选择">
|
|
<el-option v-for="deviceCondition in deviceCondList" :key="deviceCondition.condition" :label="deviceCondition.label" :value="deviceCondition.condition"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="$t('scriptRecord.paramDeviceType')" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.isAdded">{{scope.row.paramDeviceType}}</div>
|
|
<el-select v-else v-model="scope.row.paramDeviceType" placeholder="请选择" @change="changeParamDeviceType">
|
|
<el-option v-for="deviceType in deviceTypeList" :key="deviceType.value" :label="deviceType.label" :value="deviceType.value"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="$t('scriptRecord.paramDeviceCode')" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.isAdded">{{scope.row.paramCode}}</div>
|
|
<el-select v-else v-model="scope.row.paramCode" placeholder="请选择">
|
|
<el-option v-for="paramDeviceCode in paramDeviceCodeList" :key="paramDeviceCode.code" :label="paramDeviceCode.name" :value="paramDeviceCode.code"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="$t('scriptRecord.operation')" width="150">
|
|
<template slot-scope="scope">
|
|
<el-row v-if="scope.row.isAdded">
|
|
<el-button type="primary" size="mini" @click="deleteOperate(scope.$index)">删除</el-button>
|
|
</el-row>
|
|
<el-row v-else>
|
|
<el-button type="primary" size="mini" @click="determineOperate(scope.row)">确定</el-button>
|
|
<el-button type="primary" size="mini" @click="cancleOperate">取消</el-button>
|
|
</el-row>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import DeviceTypeDic from '@/scripts/DeviceTypeDic';
|
|
import Vue from 'vue';
|
|
import {getDeviceCodeByDeviceType,getDeviceCoditionByDeviceType} from '@/api/simulation';
|
|
export default {
|
|
name: 'deviceCondition',
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
ConditionVOList:{
|
|
type: Array,
|
|
required: true
|
|
},
|
|
isAdding:{
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
title:{
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
mounted(){
|
|
this.isdisabled=false;
|
|
},
|
|
data(){
|
|
return{
|
|
deviceTypeList:DeviceTypeDic.ConstSelect.deviceType,
|
|
deviceCodeList:[],
|
|
deviceCondList:[],
|
|
paramDeviceCodeList:[],
|
|
isdisabled:false,
|
|
}
|
|
},
|
|
methods:{
|
|
changeDeviceType(index,row){
|
|
let params = {deviceType:index};
|
|
let group=this.$props.group;
|
|
row.code="";
|
|
row.condition="";
|
|
getDeviceCodeByDeviceType(group,params).then(response =>{
|
|
let resultData=response.data;
|
|
resultData=this.changeData(index,resultData);
|
|
this.deviceCodeList=resultData;
|
|
})
|
|
getDeviceCoditionByDeviceType(params).then(response =>{
|
|
this.deviceCondList=response.data;
|
|
});
|
|
},
|
|
changeParamDeviceType(index){
|
|
let params = {deviceType:index};
|
|
let group=this.$props.group;
|
|
getDeviceCodeByDeviceType(group,params).then(response =>{
|
|
let resultData=response.data;
|
|
resultData=this.changeData(index,resultData);
|
|
this.paramDeviceCodeList=resultData;
|
|
})
|
|
},
|
|
changeData(param,data){
|
|
return param=="Train"?JSON.parse(JSON.stringify(data).replace(/groupNumber/g,"name")):data;
|
|
},
|
|
deleteOperate(data){
|
|
this.$props.ConditionVOList.splice(data,1);
|
|
},
|
|
determineOperate(data){
|
|
if(data.deviceType=="")
|
|
{
|
|
this.$messageBox(`请选择设备类型`);
|
|
return;
|
|
}
|
|
if(data.code=="")
|
|
{
|
|
this.$messageBox(`请选择设备编号`);
|
|
return;
|
|
}
|
|
if(data.condition=="")
|
|
{
|
|
this.$messageBox(`请选择设备条件`);
|
|
return;
|
|
}
|
|
this.$props.ConditionVOList[this.$props.ConditionVOList.length-1].isAdded=true;
|
|
this.isdisabled=false;
|
|
this.$emit("changeAdding",false);
|
|
},
|
|
cancleOperate(){
|
|
this.isdisabled=false;
|
|
this.$props.ConditionVOList.pop();
|
|
this.$emit("changeAdding",false);
|
|
},
|
|
addDeviceCondition(){
|
|
this.isdisabled=true;
|
|
let deviceCondition={
|
|
deviceType:"",
|
|
code:"",
|
|
condition:"",
|
|
paramCode:"",
|
|
paramDeviceType:null,
|
|
isAdded:false,
|
|
};
|
|
this.$emit("changeAdding",true);
|
|
this.$props.ConditionVOList.push(deviceCondition);
|
|
},
|
|
resetDisabled(){
|
|
this.isdisabled=false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|