添加受众成员逻辑

src/views/audience/audienceManage.vue

@@ -385,7 +385,6 @@
       okText="确认">
       <div style="display: flex; overflow-x: auto; overflow-y: auto; padding:20px">
         <div style="min-width: 800px">
-          左边
           <div>
             <div class="tab1">
               <a-form-item label="姓名">
@@ -457,7 +456,6 @@
           </div>
         </div>
         <div style="min-width: 200px;border-left: 1px solid #f2f6fe;margin-left:10px">
-          右边
           <div class="onerow">
             <div class="onleft">
               <div class="already">已选</div>
@@ -776,8 +774,11 @@ const ruleForm = ref({
   description: "",
 });
 const selectedRowKeys = ref([]);
+// const selectedRowKeysUser = ref(['1012311820121276416', '1035585259372150784','7003708665773555718', '7003708665777750025']);
 const selectedRowKeysUser = ref([]);
 const selectedRowUser = ref([]);
+const temSelectedRowKeysUser = ref([]);
+const temSelectedRowUser = ref([]);
 const selectedRowKeysUserTotal = ref([]);
 const selectedRowUserTotal = ref([]);
 const userTableRef = ref();
@@ -1202,8 +1203,46 @@ const onSelectChangeUser = (keys, rows) => {
   console.log('selectedRowKeysUser changed: ', keys,"rows:",rows);
   console.log('selectedRowKeysUser rows1: ', rows[0]);
   // console.log('selectedRowKeysUser rows2: ', rows[0].id);
-  selectedRowKeysUser.value = keys;
-  selectedRowUser.value = rows;
+  for(let i=0;i<rows.length;i++){
+    var flag=0;
+    for(let j=0;j<selectedRowUser.value.length;j++){
+      if(rows[i].id==selectedRowUser.value[j].id){
+        flag=1;
+        break;
+      }
+    }
+    // 这个新元素不在原数组中，添加进原数组
+    if(flag==0){
+      selectedRowUser.value.push(rows[i]);
+      selectedRowKeysUser.value.push(keys[i]);
+    }
+  }
+  // 删除行
+  var deleteRows = [];
+  for(let i=0;i<temSelectedRowUser.value.length;i++){
+    var flag1=0;
+    for(let j=0;j<rows.length;j++){
+      if(temSelectedRowUser.value[i].id==rows[j].id){
+        flag1=1;
+      }
+    }
+    if(flag1==0){
+      deleteRows.push(temSelectedRowUser.value[i]);
+    }
+  }
+  console.log('selectedRowKeysUser deleteRows:', deleteRows);
+  for(let i=0;i<deleteRows.length;i++){
+    for(let j=0;j<selectedRowUser.value.length;j++){
+      if(deleteRows[i].id==selectedRowUser.value[j].id){
+        selectedRowKeysUser.value.splice(j,1);
+        selectedRowUser.value.splice(j,1);
+        break;
+      }
+    }
+  }
+  // selectedRowKeysUser.value = keys;
+  // selectedRowUser.value = rows;
+  temSelectedRowUser.value = rows;
   console.log('selectedRowKeysUser selectedRowUser: ', selectedRowUser.value);
 };
 const removeUserClick = (index) => {
@@ -1261,13 +1300,24 @@ const getAudienceUserListFun = async () => {
   console.log("getAudienceUserList res:",res);
   if(res&&res.data.status==200){
     let dataList=[];
+    var selectedRowUserTemp = [];
     res.data.result.list.forEach(item=>{
       let oneItem = {
         ...item,
         key:item.id,
       }
       dataList.push(oneItem);
+
+      // 本页已选择项
+      selectedRowUser.value.forEach(item1=>{
+        if(item.id==item1.id){
+          selectedRowUserTemp.push(item1);
+          return
+        }
+      })
     });
+    console.log("getAudienceUserList selectedRowUserTemp:",selectedRowUserTemp);
+    temSelectedRowUser.value = selectedRowUserTemp;
     tableDataUser.value = dataList;
     tableTotalUser.value = res.data.result.total;
   }