SP新建广告活动--商品搜索,添加,删除功能已完成

src/views/adManage/sp/campaigns/CreateCampaigns/index.vue

@@ -88,39 +88,6 @@
               </el-input>
             </div>
           </el-form-item>
-
-          <!-- <el-form
-            :label-position="labelPosition"
-            ref="ruleFormRef2"
-            :model="ruleForm2"
-            :rules="rules2"
-            label-width="120px"
-            class="demo-ruleForm"
-            :size="formSize"
-            status-icon>
-            <el-form-item label="按展示位置调整出价" prop="placeBid">
-              <p style="color: #8e9196">除了出价策略外，您还可以将出价提高多达900%</p>
-              <div class="gap-items">
-                <div class="gap-item">搜索结果顶部(首页)</div>
-                <el-input v-model="ruleForm2.placeBid" class="gap-item">
-                  <template #append>%</template>
-                </el-input>
-              </div>
-              <div class="gap-items">
-                <div class="gap-item">商品首页</div>
-                <el-input v-model="ruleForm2.firstPage" class="gap-item">
-                  <template #append>%</template>
-                </el-input>
-              </div>
-              <div class="gap-items">
-                <div class="gap-item">搜索结果的其余位置</div>
-                <el-input v-model="ruleForm2.other" class="gap-item">
-                  <template #append>%</template>
-                </el-input>
-              </div>
-            </el-form-item>
-          </el-form> -->
-
           <!-- 广告组 -->
           <div style="font-size: 20px; font-weight: bold; margin-top: 30px">广告组</div>
           <hr />
@@ -133,7 +100,7 @@
                 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                   <el-tab-pane label="搜索" name="first">
                     <div style="margin-bottom: 10px">
-                      <el-input v-model="input3" placeholder="Please input" class="input-with-select" @change="inpChange" clearable >
+                      <el-input v-model="searchInp" placeholder="Please input" class="input-with-select" @change="inpChange" clearable >
                         <template #prepend>
                           <el-select v-model="select" style="width: 100px" @change="selChange">
                             <el-option label="名称" value="name" />
@@ -173,11 +140,11 @@
                               <span style="margin: 0 5px; color: #cacdd4;">|</span>
                               <span style="color: #6d7784;">{{ scope.row.quantity }}</span>
                             </div>
-                            <span>ASIN: 
-                              <span class="data-color" style="margin-right: 8px;">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
+                            <span>
+                              ASIN: <span class="data-color" style="margin-right: 8px;">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
                             </span>
-                            <span>SKU: 
-                              <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
+                            <span>
+                              SKU: <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
                             </span>
                             </div>      
                           </div>
@@ -187,6 +154,9 @@
                         <template #header>
                           <el-button type="primary" size="normal" link @click="handleAdd">添加已选中</el-button>
                         </template>
+                        <template #default="scope">
+                          <el-button type="primary" size="small" @click="addSingle(scope)" text>添加</el-button>
+                        </template>
                       </el-table-column>
                     </el-table>
                     <el-pagination
@@ -232,7 +202,7 @@
                 <el-card class="box-card" shadow="never">
                   <template #header>
                     <div class="card-header">
-                      <span>Card name</span>
+                      <span style="font-weight: 550; font-size: 15px; color: #1f2128;">已添加: {{ addedData.length }}</span>
                       <el-button class="button" text @click="delAll">全部删除</el-button>
                     </div>
                   </template>
@@ -277,6 +247,9 @@
                       <template #header>
                         <el-button type="primary" size="normal" link @click="handleDel">删除已选中</el-button>
                       </template>
+                      <template #default="scope">
+                          <el-button type="primary" size="small" @click="delSingle(scope)" text>删除</el-button>
+                        </template>
                     </el-table-column>
                   </el-table>
                 </div>
@@ -319,30 +292,6 @@
     dateRange,
   })
   const loading = ref(true)
-
-  let respData
-  function setTableData(asin = '', sku = '') {
-    return request({
-    url: '/api/sellers/listings/',
-    method: 'GET',
-    params: {
-      page: currentPage.value,
-      limit: pageSize.value,
-      profile_id: profile.value.profile_id,
-      asin,
-      sku,
-    },
-  }).then((resp) => {
-    fullTableData.value = resp.data
-    totalItems.value = resp.total
-    currentPage.value = resp.page
-    loading.value = false
-  }).catch((error) => {
-    console.error('Error fetching data:', error)
-    loading.value = false
-  });
-}
-
   const fullTableData = ref([]) // 表格数据
   let addedData = ref([])   // 已添加的商品数据
   let selections = []  // 添加选中的项
@@ -351,24 +300,45 @@
   const pageSize = ref(20) // 每页显示条目数
   const totalItems = ref() // 数据总量
 
+  function setTableData(asin = '', sku = '') {
+    return request({
+      url: '/api/sellers/listings/',
+      method: 'GET',
+      params: {
+        page: currentPage.value,
+        limit: pageSize.value,
+        profile_id: profile.value.profile_id,
+        asin,
+        sku,
+      },
+      }).then((resp) => {
+        fullTableData.value = resp.data
+        totalItems.value = resp.total
+        currentPage.value = resp.page
+        loading.value = false
+      }).catch((error) => {
+        console.error('Error fetching data:', error)
+        loading.value = false
+      })
+  }
+
   // 处理分页器当前页变化
   function handleCurrentChange(newPage) {
     currentPage.value = newPage
     loading.value = true
     setTableData()
   }
-
   // 处理分页器每页显示条目数变化
   function handleSizeChange(newSize) {
     pageSize.value = newSize
     currentPage.value = 1 // 重置到第一页
   }
+
   // 点击表格选项触发事件
   function handleSelectionChange(selection) {
     selections = selection
   }
-
-  // 处理添加按钮点击事件
+  // 添加已选中的项
   function handleAdd() {
     // 过滤掉已经存在于addedData.value中的项
     const newSelections = selections.filter(sel => 
@@ -378,14 +348,12 @@
     if (newSelections.length > 0) {
       addedData.value.push(...newSelections)
     }
-    console.log('addedData', addedData.value)
+    // console.log('addedData', addedData.value)
   }
-
+  // 获取addedTable中已选中的项
   function handleAddedChange(selection) {
-    console.log(111, selection)
     addedSels = selection
   }
-
   // 删除第二个table中已经选中的项
   function handleDel() {
     addedData.value = addedData.value.filter(
@@ -393,14 +361,33 @@
     )
     addedSels = []
   }
+  function addSingle(scope) {
+    console.log('scope', scope.row)
+
+    const isAlreadyAdded = addedData.value.some(item => item.sku === scope.row.sku)
+    if (!isAlreadyAdded) {
+      addedData.value.push(scope.row)
+    } else {
+      console.log('Item is already added.')
+    }
+  }
+  function delSingle(scope) {
+    const index = addedData.value.findIndex(item => item.sku === scope.row.sku)
 
+    if (index !== -1) {
+      addedData.value.splice(index, 1)
+      console.log('Item removed successfully.')
+    } else {
+      console.log('Item not found.')
+    }
+  }
+  // 全部删除
   function delAll() {
     addedData.value = []
   }
 
   function inpChange(e) {
     const value = e
-    console.log(123, select.value)
     if (select.value === 'asin') {
       loading.value = true
       setTableData(value)
@@ -411,7 +398,15 @@
   }
 
   function selChange(e) {
-    console.log(e)
+    console.log('e', e)
+    const value = e
+    if (select.value === 'asin' && searchInp.value) {
+      loading.value = true
+      setTableData(value)
+    } else if (select.value === 'sku'  && searchInp.value) {
+      loading.value = true
+      setTableData('', value)
+    }
   }
 
   // 修改表头样式
@@ -483,7 +478,6 @@
     await formEl.validate((valid, fields) => {
       if (valid) {
         console.log('submit!')
-        console.log('budget', ruleForm.budget)
       } else {
         console.log('error submit!', fields)
       }
@@ -511,7 +505,7 @@
     console.log(tab, event)
   }
 
-  const input3 = ref('')
+  const searchInp = ref('')
   const select = ref('name')
   const select2 = ref('latest')
   const textarea = ref('')