modelCom.vue

<template>
  <div>
    <el-dialog title="机型设置" :visible.sync="comDiaLog" width="1100px" append-to-body >
      <el-button type="primary" @click="handleAdd" v-hasPermi="['machine:model:add']">新增</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 v-hasPermi="['machine:model:edit']" 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 v-hasPermi="['machine:model:del']" size="mini" type="text" @click="handlDelete(scope.$index,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.list;
          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();    
        }else if(response.code==21001){          
          this.$message.error('该机型已有机器绑定,请重新填写!');
        }    
      })
    },
    //获取组件属性列表
    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(index,row){
      if(!row.id){
        this.modelComponentList.splice(index,1);
        return;
      }
      delComponent(row.id,row.model_id).then((response) => {
        if(response.code==0){
          this.$modal.msgSuccess("删除组件成功!");
          this.getModelComponentList();    
        }       
      });
    }   
  }
};
</script>

<style lang="scss">

</style>