协议编辑调试

src/components/config_point/toolLibrary/settingDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog title="配置集成工具库" :visible.sync="dialogTableVisible" width="70%">
-    <el-button type="default" style="margin-bottom: 20px" @click="handleEdit">添加协议</el-button>
+    <el-button type="default" style="margin-bottom: 20px" @click="handleEdit(1)">添加协议</el-button>
     <el-table :data="gridData" border height="500" :header-cell-style="{background:'#F3F4F7'}">
       <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
       <el-table-column property="Type" label="协议类型" show-overflow-tooltip align="center"></el-table-column>
@@ -28,7 +28,7 @@
       </el-table-column>
       <el-table-column property="address" label="操作" align="center">
         <template slot-scope="scope">
-          <el-button @click="handleEdit(scope.$index, scope.row)">编辑
+          <el-button @click="handleEdit(2,scope.$index, scope.row)">编辑
           </el-button>
          
             <el-button @click="handleDelete(scope.$index, scope.row)" slot="reference" type="danger" >删除</el-button>
@@ -41,7 +41,7 @@
       :title="title"
       :visible.sync="innerVisible"
       append-to-body>
-      <el-form :model="form">
+      <el-form :model="form" :rules="rules" ref="ruleForm">
         <el-form-item label="协议类型" v-if="this.title=='添加协议'">
           <el-select v-model="form.Type" filterable @change="handleChangeProtocolType"
                      placeholder="请选择">
@@ -52,10 +52,11 @@
         <el-form-item label="协议类型" v-if="this.title=='编辑协议'">
             <el-input v-model="form.Type" autocomplete="off" disabled style="width: 220px"/>
         </el-form-item>
-        <el-form-item label="协议名称">
+        <el-form-item label="协议名称" prop="Name">
           <el-input v-model="form.Name" autocomplete="off" placeholder="请输入协议名称，必须唯一" style="width: 220px"/>
         </el-form-item>
-        <el-form-item label="上传软件版本">
+        <!-- <p v-if="msg1" style="color: #F56C6C">请输入协议名称</p> -->
+        <el-form-item label="上传软件版本" prop="Application">
           <el-upload
             action="String"
             :on-change="changeItem1"
@@ -64,11 +65,13 @@
             <span style="padding-left:20px;" v-if="file1">文件名：{{file1}}</span>
           </el-upload>
         </el-form-item>
+        <!-- <p v-if='msg2' style="color: #F56C6C">请上传软件版本</p> -->
         <el-form-item label="特殊说明">
-          <el-input type="textarea" v-model="form.Renark" :autosize="{ minRows: 4, maxRows: 4}" style="width: 220px"/>
+          <el-input type="textarea" v-model="form.Remark" placeholder="请输入描述内容，300个字以内" :autosize="{ minRows: 4, maxRows: 4}" style="width: 220px"/>
         </el-form-item>
         <el-form-item label="适用厂家">
-          <el-input type="textarea" v-model="form.Scope" :autosize="{ minRows: 4, maxRows: 4}" style="width: 220px"/>
+          <el-input type="textarea" v-model="form.Scope" 
+          placeholder="请输入描述内容，300个字以内" :autosize="{ minRows: 4, maxRows: 4}" style="width: 220px"/>
         </el-form-item>
         <el-form-item label="使用说明">
           <el-upload
@@ -85,12 +88,12 @@
             >
             <i class="el-icon-upload"></i><span style="padding-left:20px;" v-if="file3">文件名：{{file3}}</span>
           </el-upload>
-        </el-form-item>
+        </el-form-item>  
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="innerVisible = false">取 消</el-button>
-        <el-button type="primary" @click="save">保 存</el-button>
-      </div>
+       <div slot="footer" class="dialog-footer">
+            <el-button @click="innerVisible = false">取 消</el-button>
+            <el-button type="primary" @click="save">保 存</el-button>
+          </div>
     </el-dialog>
   </el-dialog>
 </template>
@@ -122,19 +125,32 @@
         }],
         dialogTableVisible: false,
         innerVisible: false,
-        title: '',
+        title: '添加协议',
         form: {
-          name: '',
-          ProtocolType: '',
-          copyright: '',
-          data1: '',
-          data2: '',
-          see: '',
-          new: ''
+          Name: '',
+          Type:"",
+          Remark: '',
+          Scope: '',
+          Eg: '',
+          Manual: '',
+          Application: ''
         },
+         rules: {
+          Name: [
+            { required: true, message: '请输入协议名称', trigger: 'blur' }
+          ],
+           Application: [
+            { type: 'date', required: true, message: '', trigger: 'change' }
+          ],
+         },
         file1:"",
         file2:"",
         file3:"",
+        // msg1:false,
+        // msg2:false,
+        formData1:null,
+        formData2:null,
+        formData3:null,
         options: [
           {
             value: 'modbus-tcp',
@@ -200,33 +216,106 @@
         dowloadProtocol(params,res=>{
         })
       },
-      handleEdit(index, row) {
+      handleEdit(tb,index, row) {
         this.innerVisible = true
-        if (row) {
+        console.log(row,tb)
+        if (tb==2) {
+          console.log(row)
           this.title = '编辑协议'
           this.form = row
+          this.file1 = row.Application
+          this.file2 = row.Manual
+          this.file3 = row.Eg
         } else {
           this.title = '添加协议'
+          this.form = {
+            Name:"",
+            Type:"",
+            Application:'',
+            Eg:"",
+            Manual:"",
+            Remark: '',
+            Scope: '',
+          }
+          this.file1 = ''
+          this.file2 = ''
+          this.file3 = ''
         }
       },
       save(){
-        if(this.title = '添加协议'){
-          let params = this.form
-          addProtocol(params,res=>{
-            console.log(res)
-            if(res.Result=='success'){
-              this.innerVisible = false
-              this.getTxOption()
-            }
-          })
-        }else if(this.title = '编辑协议'){
-          let params = this.form
-          updateProtocol(params,res=>{
-            if(res.Result=='success'){
+        if(this.title == '添加协议'){
+          if(this.form.Name && this.file1){
+            let params = this.form
+            addProtocol(params,res=>{
+              console.log(res)
+              if(res.Result=='success'){
                 this.innerVisible = false
-                this.getTxOption()
+                if(this.file1){
+                   this.formData1.append('protocolId',res.Message)
+                   uploadProtocol(this.formData1,res=>{
+                     if(res.Result=='success'){
+                       console.log('文件上传成功')
+                     }
+                   })
+                }
+                if(this.file2){
+                   this.formData2.append('protocolId',res.Message)
+                    uploadProtocol(this.formData2,res=>{
+                      if(res.Result=='success'){
+                        console.log('文件上传成功')
+                      }
+                    })
+                }
+               if(this.file3){
+                   this.formData3.append('protocolId',res.Message)
+                  uploadProtocol(this.formData3,res=>{
+                    if(res.Result=='success'){
+                      console.log('文件上传成功')
+                    }
+                  })
+               }
+                 this.getTxOption()
+              }
+            })
+          }
+        }else if(this.title == '编辑协议'){
+           if(this.form.Name && this.file1){
+            let params = {
+              Content:[
+                 this.form
+              ]
             }
-          })
+            updateProtocol(params,res=>{
+              if(res.Result=='success'){
+                   this.innerVisible = false
+                    if(this.formData1){
+                        this.formData1.append('protocolId',this.form.Id)
+                        uploadProtocol(this.formData1,res=>{
+                          if(res.Result=='success'){
+                            console.log('文件上传成功')
+                          }
+                        })
+                    }
+                    if(this.formData2){
+                        this.formData2.append('protocolId',this.form.Id)
+                          uploadProtocol(this.formData2,res=>{
+                            if(res.Result=='success'){
+                              console.log('文件上传成功')
+                            }
+                          })
+                    }
+                    if(this.formData3){
+                          this.formData3.append('protocolId',this.form.Id)
+                          uploadProtocol(this.formData3,res=>{
+                            if(res.Result=='success'){
+                              console.log('文件上传成功')
+                            }
+                          })
+                    }
+                    this.getTxOption()
+              }
+            })
+           }
         }
       },
       handleDelete(index, row) {
@@ -248,44 +337,36 @@
       },
       changeItem1(file, fileList) {
         this.file1 = file.name
-        let formData = new FormData()
-        formData.append('multipartFile',file.raw)
-        formData.append('property','Application')
-        formData.append('protocolId',this.form.Id)
-        uploadProtocol(formData,res=>{
-          if(res.Result=='success'){
-            console.log('文件上传成功')
-          }
-        })
+        this.formData1 = null
+        this.formData1 = new FormData()
+        this.formData1.append('multipartFile',file.raw)
+        this.formData1.append('property','Application')
       },
       changeItem2(file, fileList) {
         this.file2 = file.name
-        let formData = new FormData();
-        formData.append('multipartFile',file.raw)
-        formData.append('property','Manual')
-        formData.append('protocolId',this.form.Id)
-        uploadProtocol(formData,res=>{
-          if(res.Result=='success'){
-             console.log('文件上传成功')
-          }
-        })
+        this.formData2 = null
+        this.formData2 = new FormData();
+        this.formData2.append('multipartFile',file.raw)
+        this.formData2.append('property','Manual')
       },
       changeItem3(file, fileList) {
         this.file3 = file.name
-        let formData = new FormData()
-        formData.append('multipartFile',file.raw)
-        formData.append('property','Eg')
-        formData.append('protocolId',this.form.Id)
-        uploadProtocol(formData,res=>{
-          if(res.Result=='success'){
-            console.log('文件上传成功')
-          }
-        })
+        this.formData3 = null
+        this.formData3 = new FormData()
+        this.formData3.append('multipartFile',file.raw)
+        this.formData3.append('property','Eg')
       }
     }
   }
 </script>
 
-<style scoped>
+<style lang='less'>
+.el-form{
+  .el-form-item__label{
+    width:108px;
+    display: inline-block;
+  }
+}
+
 
 </style>