<template> <div> <el-dialog title="机型设置" :visible.sync="comDiaLog" width="1100px" append-to-body > <el-button type="primary" @click="handleAdd">新增</el-button> <el-tabs v-model="activeName" > <el-tab-pane label="机型组件" name="first" > <el-table v-loading="loading" :data="modelComponentList"> <el-table-column label="组件类型" align="center" width="170px"> <template slot-scope="scope"> <p v-show=!scope.row.isShow> {{ scope.row.type_desc }}</p> <el-select v-model="scope.row.type" placeholder="请选择组件类型" clearable v-show="scope.row.isShow" @change="changeType(scope.row)"> <el-option v-for="item in comTypeList" :key="item.type" :label="item.type_desc" :value="item.type"> </el-option> </el-select> </template> </el-table-column> <el-table-column label="组件名称" align="center" width="170px"> <template slot-scope="scope"> <p v-show=!scope.row.isShow> {{ scope.row.component_name }}</p> <el-select v-model="scope.row.component_name" placeholder="请选择组件类型" clearable v-show="scope.row.isShow"> <el-option v-for="item in comTypeNameList" :key="item.id" :label="item.component_name" :value="item.component_name"> </el-option> </el-select> </template> </el-table-column> <el-table-column label="组件编码" align="center" prop="co_serial_no" /> <el-table-column label="ROS硬件编码" width="150px"> <template slot-scope="scope"> <p v-show=!scope.row.isShow> {{ scope.row.ros_code }}</p> <el-input v-model="scope.row.ros_code" clearable v-show="scope.row.isShow"/> </template> </el-table-column> <el-table-column label="备注说明" align="center" width="180px"> <template slot-scope="scope"> <p v-show=!scope.row.isShow> {{ scope.row.desc }}</p> <el-input v-model="scope.row.desc" clearable v-show="scope.row.isShow"/> </template> </el-table-column> <el-table-column label="组件状态" align="center" prop="state_desc"/> <el-table-column label="原料" align="center"> <template slot-scope="scope"> <el-button size="mini" type="text" @click="handleEditDialog(scope.row)" v-show=!scope.row.isShow>编辑组件属性</el-button> <el-button size="mini" type="text" @click="handleEnter(scope.$index, scope.row)" v-show=scope.row.isShow>确定</el-button> <el-button size="mini" type="text" @click="handlDelete(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </el-tab-pane> </el-tabs> <div slot="footer" class="dialog-footer" > <el-button type="primary" @click="comDiaLogCancel" >确定</el-button> <el-button @click="comDiaLogCancel">退出</el-button> </div> </el-dialog> <el-dialog title="编辑组件属性" :visible.sync="editDiaLog" width="900px" append-to-body> <el-row style="margin-bottom: 10px;"> <el-col :span="3"><div >组件名称:</div></el-col> <el-col :span="10"><div >{{componentName}}</div></el-col> </el-row> <el-row style="margin-bottom: 10px;"> <el-col :span="3"><div >组件属性:</div></el-col> <el-col :span="21"> <el-row v-for="(item,idx) in comAry" :key="idx"> <el-col :span="4"><div ><el-input v-model="item.pro_name" placeholder="输入属性名" clearable/></div></el-col> <el-col :span="6"> <div> <el-select v-model="item.type" placeholder="请选择属性类型" clearable> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </el-col> <el-col :span="4"><div ><el-input v-model="item.pro_ros_code" placeholder="ROS硬件编码" clearable/></div></el-col> <el-col :span="4"><div ><el-input v-model="item.desc" placeholder="备注描述" clearable/></div></el-col> <el-col :span="1.5"> <el-button @click="addItem">+</el-button> </el-col> <el-col :span="1"> <el-button v-show="comShow" @click="subtractItem(idx)">-</el-button> </el-col> </el-row> </el-col> </el-row> <div slot="footer" class="dialog-footer" > <el-button type="primary" @click="editDiaLogSubmit" >确定</el-button> <el-button @click="editDiaLogCancel">退出</el-button> </div> </el-dialog> </div> </template> <script> import {getModelComponentList,getComponentList,addComponent,addComponentProperty,getComponentPropertyList,delComponent} from "@/api/model/model"; export default { data() { return { // 遮罩层 loading: true, comDiaLog:false, activeName:"first", modelId:"", modelComponentList:[], editDiaLog:false, options:[ { value: 1, label: '开关' }, { value: 2, label: '状态' }, { value: 3, label: '时间(年月日)' }, { value: 4, label: '时间(日分秒)' }, { value: 5, label: '值' } ], comAry:[{pro_name:"",type:null,pro_ros_code:null,desc:""}], comTypeList:[], comTypeNameList:[], componentList:[], componentName:'', com_ros_code:'', comShow:true }; }, created() { }, methods: { addItem(){ this.comAry.push({pro_name:"",type:null,pro_ros_code:null,desc:""}); }, subtractItem(idx){ this.comAry.splice(idx, 1); if(this.comAry.length==1){ this.comShow=false } }, //弹出机型组件页面 handleModelComDialog(id){ this.comDiaLog=true; this.modelId=id; this.activeName="first"; this.getModelComponentList(); this.getComponentList(); }, getModelComponentList(){ this.loading = true; getModelComponentList(this.modelId).then((response) => { if(response.code==0){ this.modelComponentList = response.data; this.loading = false; } }); }, //弹出编辑组件属性 handleEditDialog(row){ this.componentName=row.component_name; this.com_ros_code=row.ros_code; this.comAry=[{pro_name:"",type:null,pro_ros_code:null,desc:""}], this.editDiaLog=true; this.getComponentPropertyList(row.model_id,row.ros_code); }, comDiaLogCancel(){ this.comDiaLog=false }, //关闭组件属性 editDiaLogCancel(){ this.editDiaLog=false }, //编辑组件属性 editDiaLogSubmit(){ var regular=/(^[+]{0,1}([0-9]+)$)/; let hang=0; for(let i=0;i<this.comAry.length;i++){ if(!regular.test(this.comAry[i].pro_ros_code)){ hang=i+1; this.$message.error('第'+hang+'行,ROS硬件编码,请输入大于0的正数'); return; }else{ this.comAry[i].pro_ros_code=parseFloat(this.comAry[i].pro_ros_code); } } let obj={ com_ros_code:this.com_ros_code, model_id:this.modelId, data:this.comAry } addComponentProperty(obj).then((response) => { if(response.code==0){ this.$modal.msgSuccess("修改组件属性成功!"); this.editDiaLog=false } }); }, //新增组件 handleAdd(){ var row={ type_desc: '', type: '', ros_code:'', desc:'', co_serial_no:'', isShow:true } this.modelComponentList.push(row); }, //获取组件类型list getComponentList(){ this.comTypeList=[]; getComponentList().then((response) => { if(response.code==0){ if(response.data.length>0){ this.componentList=response.data; for(let i=0;i<response.data.length;i++){ this.comTypeList.push({"type":response.data[i].type,"type_desc":response.data[i].type_desc}); } } } }); }, //获取组件类型下面的组件名称 changeType(row){ if(this.componentList.length>0){ for(let i=0;i<this.componentList.length;i++){ if(this.componentList[i].type==row.type){ row.type_desc=this.componentList[i].type_desc; this.comTypeNameList=this.componentList[i].data; break; } } } }, //提交组件 handleEnter(index,row){ if(row.type==""){ this.$message.error('请选择组件类型!'); return; } var regular=/(^[+]{0,1}([0-9]+)$)/; if(row.ros_code==""){ this.$message.error('请选择输入ROS硬件编码!'); return; }else{ if(!regular.test(row.ros_code)){ this.$message.error('ROS硬件编码,请输入大于0的正数'); return; } } row.isShow = false; let obj={ "model_id":this.modelId, "component_name":row.component_name, "co_serial_no":0, "ros_code":parseFloat(row.ros_code), "desc":row.desc, "type":row.type } addComponent([obj]).then((response) => { if(response.code==0){ this.$modal.msgSuccess("添加组件成功!"); this.getModelComponentList(); } }); }, //获取组件属性列表 getComponentPropertyList(model_id,ros_code){ this.comAry=[]; getComponentPropertyList(model_id,ros_code).then((response) => { if(response.code==0){ if(response.data.length>0){ for(let i=0;i<response.data.length;i++){ this.comAry.push({pro_name:response.data[i].pro_name,type:response.data[i].type, pro_ros_code:response.data[i].pro_ros_code,desc:response.data[i].desc}) } }else{ this.comAry=[{pro_name:"",type:null,pro_ros_code:null,desc:""}]; } } }); }, handlDelete(row){ delComponent(row.id,row.model_id).then((response) => { if(response.code==0){ this.$modal.msgSuccess("删除组件成功!"); this.getModelComponentList(); } }); } } }; </script> <style lang="scss"> </style>