修改机型

src/api/model/model.js

@@ -4,7 +4,7 @@ import request from "@/utils/request";
 // 机型组件
 export function getModelComponentList(id) {
   return request({
-    url: "/v1/model/component?model_id=" + id,
+    url: "/v1/model/component?model_id=" + id  + "&limit=1000",
     method: "get",
   });
 }
@@ -18,6 +18,33 @@ export function getModelList() {
   });
 }
 
+// 机型组件类型列表
+export function getComponentList() {
+  return request({
+    url: "/v1/component",
+    method: "get",
+  });
+}
+
+// 新增机型组件
+export function addComponent(data) {
+  return request({
+    url: "/v1/add/model/component",
+    method: "post",
+    data: data,
+  });
+}
+
+// 新增机型组件属性
+export function addComponentProperty(data) {
+  return request({
+    url: "/v1/add/model/component/property",
+    method: "post",
+    data: data,
+  });
+}
+
+
 
 
 

src/views/machine/model/modelCom.vue

 <template>
   <div>
-    <el-dialog title="机型设置" :visible.sync="comDiaLog" width="900px" append-to-body >
+    <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-tab-pane label="机型组件" name="first" >          
           <el-table v-loading="loading" :data="modelComponentList"> 
-            <el-table-column label="组件类型" align="center" prop="type_desc" />
-            <el-table-column label="组件名称" align="center" prop="component_name" />
-            <el-table-column label="组件编码" align="center" prop="ros_code" />
-            <el-table-column label="备注说明" align="center"  prop=""/>
+            <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="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"/>
             <el-table-column label="原料" align="center">
               <template slot-scope="scope">
-                <el-button size="mini" type="text" @click="handleEditDialog(scope.row)">编辑组件属性</el-button>
+                <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)(scope.row)">删除</el-button>
               </template> 
             </el-table-column>
@@ -23,15 +60,14 @@
         <el-button @click="comDiaLogCancel">退出</el-button>
       </div>
     </el-dialog>
-    <el-dialog title="编辑组件属性" :visible.sync="editDiaLog" width="800px" append-to-body>
+    <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 >{{}}</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="20">
-           
+        <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="输入属性名"/></div></el-col>
             <el-col :span="6">
@@ -46,10 +82,14 @@
                 </el-select>
               </div>
             </el-col>
-            <el-col :span="6"><div ><el-input v-model="item.pro_ros_code" placeholder="输入ROS硬件编码"/></div></el-col>
-            <el-col :span="2">
+            <el-col :span="4"><div ><el-input v-model="item.pro_ros_code" placeholder="ROS硬件编码"/></div></el-col>
+            <el-col :span="4"><div ><el-input v-model="item.desc" placeholder="备注描述"/></div></el-col>
+            <el-col :span="1.5">
               <el-button @click="addItem">+</el-button>
             </el-col>
+            <el-col :span="1">
+              <el-button @click="subtractItem(idx)">-</el-button>
+            </el-col>
           </el-row>
         </el-col>
       </el-row>
@@ -62,8 +102,7 @@
   </div>
 </template>
 <script>
-import {getModelComponentList} from "@/api/model/model";
-
+import {getModelComponentList,getComponentList,addComponent,addComponentProperty} from "@/api/model/model";
 export default { 
   data() {
     return {
@@ -76,32 +115,32 @@ export default {
       editDiaLog:false,
       options:[
         {
-          value: '1',
+          value: 1,
           label: '开关'
         },
         {
-          value: '2',
+          value: 2,
           label: '状态'
         },
         {
-          value: '3',
+          value: 3,
           label: '时间(年月日)'
         },
         {
-          value: '4',
+          value: 4,
           label: '时间(日分秒)'
         },
         {
-          value: '5',
+          value: 5,
           label: '值'
         }
       ],
-      pro_name:"",
-      type:"",
-      pro_ros_code:"",
-      comAry:[{pro_name:"",type:"",pro_ros_code:""}],
-      
-     
+      comAry:[{pro_name:"",type:null,pro_ros_code:null,desc:""}],  
+      comTypeList:[],
+      comTypeNameList:[],
+      componentList:[],
+      componentName:'',
+      com_ros_code:''
     };
   },
   created() {
@@ -110,16 +149,18 @@ export default {
 
   methods: {
     addItem(){
-      this.comAry.push({pro_name:"",type:"",pro_ros_code:""});
-
-      console.log("this.comAry",this.comAry);
+      this.comAry.push({pro_name:"",type:null,pro_ros_code:null,desc:""});      
     },
+    subtractItem(idx){
+      this.comAry.splice(idx, 1);
+    },      
     //弹出机型组件页面
     handleModelComDialog(id){
       this.comDiaLog=true;
       this.modelId=id;
       this.activeName="first"; 
       this.getModelComponentList();
+      this.getComponentList();
     },
     getModelComponentList(){
       this.loading = true;
@@ -131,19 +172,89 @@ export default {
       });
     },
     //弹出编辑组件属性
-    handleEditDialog(){
+    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;
     },
     comDiaLogCancel(){
       this.comDiaLog=false
     },
+    //编辑组件属性
     editDiaLogCancel(){
-      this.editDiaLog=false
-    }
-    
+      for(let i=0;i<this.comAry.length;i++){
+        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){
+      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();    
+        }       
+      });
+    }   
   }
-
-
 };
 </script>