1

src/views/report/components/dialog/handlePerson.vue

@@ -2,18 +2,21 @@
   <div>
     <el-dialog  title="配案人员" :visible.sync="visible" width="800px" :close-on-click-modal="false"  :before-close="handleClose" append-to-body>
       <div style="height:calc(100vh - 250px)">
+        <div class="header">
+          <el-button type="primary" size="small" @click="add">添加</el-button>
+        </div>
         <el-table 
             ref="table"
             border
             :data="tableData"
             row-key="id"
             style="width: 100%"
-            height="calc(100% - 0px)"
+            height="calc(100% - 50px)"
             v-loading="loading">
             <el-table-column prop="name" label="姓名" min-width="220">
                 <template slot-scope="scope">
                     <div>
-                        <div v-if="model == 'list'">
+                        <div v-if="scope.row.id  && editMessage.id!=scope.row.id">
                             {{ scope.row.name }}
                         </div>
                         <div v-else>
@@ -40,7 +43,7 @@
             <el-table-column prop="email" label="邮箱" min-width="220">
                 <template slot-scope="scope">
                     <div>
-                        <div v-if="model == 'list'">
+                        <div v-if="scope.row.id  && editMessage.id!=scope.row.id">
                             {{ scope.row.email }}
                         </div>
                         <div v-else>
@@ -67,13 +70,13 @@
             <el-table-column label="操作" width="180px">
                 <template slot-scope="scope">
                     <div>
-                        <div v-if="model == 'list'">
+                        <div v-if="scope.row.id  && editMessage.id!=scope.row.id">
                             <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
                             <el-button type="text" size="small" @click="remove(scope.row)">移除</el-button>
                         </div>
                         <div v-else>
                             <el-button type="text" size="small" @click="save(scope.row)">保存</el-button>
-                            <el-button v-if="model=='edit'" type="text" size="small" @click="cancel(scope.row)">取消</el-button>
+                            <el-button type="text" size="small" @click="cancel(scope.row,scope.$index)">取消</el-button>
                         </div>
                     </div>
                 </template>
@@ -96,7 +99,7 @@ export default {
         visible:false,
         tableData:[],
         loading:false,
-        model:'List',
+        model:'list',
         IPREmailList:{
             queryParams:{
                 current:0,
@@ -118,6 +121,7 @@ export default {
   methods: {
     open(reportId){
       this.reportId =reportId
+      this.editMessage = {}
       this.getList()
       this.visible = true
     },
@@ -125,30 +129,33 @@ export default {
       var params = {
         reportId:this.reportId
       }
+      this.model = 'list'
       this.loading = true
       var api = 'matchCasePersonQuery'
       this.$api[api](params).then(response=>{
         if(response.code == 200){
-          if(response.data.id){
-            this.tableData = [response.data]
-            this.model = 'list'
-          }else{
-            this.tableData = [{}]
-            this.model = 'add'
-          }
+          this.tableData = response.data
           this.loading = false
         }
       }).catch(error=>{
           this.tableData = []
-          this.model = 'list'
           this.loading = false
       })
     },
     handleClose(){
         this.visible = false
     },
+    //添加
+    add(){
+      this.tableData.push({})
+      this.model = 'add'
+    },
     //编辑
     edit(row){
+      if(this.model != 'list' ){
+        this.$message.warning('已有数据正在编辑，请先保存修改的数据')
+        return
+      }
         this.model = 'edit'
         this.editMessage = JSON.parse(JSON.stringify(row))
     },
@@ -180,9 +187,16 @@ export default {
       })
     },
     //取消编辑
-    cancel(row){
-        row = this.editMessage
-        this.model = 'list'
+    cancel(row,index){
+      if(this.model == 'add'){
+        this.tableData.splice(index,1)
+        return
+      }else{
+        row = JSON.parse(JSON.stringify(this.editMessage))
+        this.editMessage = {}
+      }
+      this.model = 'list'
+        
     },
     //保存
     save(row){
@@ -200,7 +214,7 @@ export default {
         return
       }
       var a = '添加'
-      if(this.model == 'edit'){
+      if(row.id){
         a = '修改'
       }
       this.loading = true
@@ -264,4 +278,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.header{
+  height: 50px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
 </style>