Merge branch 'test' of http://34.206.75.59:10880/ASJ_ADS/ads_web into test

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

@@ -94,10 +94,11 @@
           <el-form-item label="广告组名称" prop="adGroupName" style="width: 350px; margin-top: 20px">
             <el-input v-model="ruleForm.adGroupName" />
           </el-form-item>
+          <!-- 广告组商品表格 -->
           <el-form-item label="商品" prop="commodity" style="width: 100%; margin-top: 20px">
             <div style="width: 100%; height: 620px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
               <div style="width: 50%; border-right: 1px solid #c2c7cf">
-                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleGoodsTabs">
                   <el-tab-pane label="搜索" name="first">
                     <div style="margin-bottom: 10px">
                       <el-input v-model="searchInp" placeholder="Please input" class="input-with-select" @change="inpChange" clearable>
@@ -125,7 +126,7 @@
                       :header-cell-style="headerCellStyle"
                       @selection-change="handleSelectionChange">
                       <el-table-column type="selection" width="50" />
-                      <el-table-column prop="asin" label="商品" width="538">
+                      <el-table-column prop="asin" label="商品">
                         <template #default="scope">
                           <div style="display: flex; align-items: center">
                             <div style="margin-right: 8px; line-height: normal">
@@ -152,10 +153,10 @@
                       </el-table-column>
                       <el-table-column prop="name" label="Name" width="120" align="right">
                         <template #header>
-                          <el-button type="primary" size="normal" link @click="handleAdd">添加已选中</el-button>
+                          <el-button type="primary" size="normal" link @click="handleGoodsAdd">添加已选中</el-button>
                         </template>
                         <template #default="scope">
-                          <el-button type="primary" size="small" @click="addSingle(scope)" text>添加</el-button>
+                          <el-button type="primary" size="small" @click="addSingleGoods(scope)" text>添加</el-button>
                         </template>
                       </el-table-column>
                     </el-table>
@@ -169,6 +170,7 @@
                   </el-tab-pane>
                   <el-tab-pane label="输入" name="second">
                     <el-input
+                      style="padding: 10px;"
                       v-model="textarea"
                       :rows="20"
                       type="textarea"
@@ -177,7 +179,7 @@
                     <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
                       <el-button v-for="button in buttons" :key="button.text" :type="button.type" link>{{ button.text }}</el-button>
                     </div>
-                    <el-row :gutter="12" style="margin-top: 50px">
+                    <!-- <el-row :gutter="12" style="margin-top: 50px">
                       <el-col :span="12">
                         <el-card class="card-box" shadow="never" style="border: none; background-color: #e3f0de; height: 50px">
                           <div style="line-height: 15px">成功添加:</div>
@@ -194,7 +196,7 @@
                           </div>
                         </el-card>
                       </el-col>
-                    </el-row>
+                    </el-row> -->
                   </el-tab-pane>
                 </el-tabs>
               </div>
@@ -203,7 +205,7 @@
                   <template #header>
                     <div class="card-header">
                       <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedData.length }}</span>
-                      <el-button class="button" text bg @click="delAll">全部删除</el-button>
+                      <el-button class="button" text bg @click="delAllGoods">全部删除</el-button>
                     </div>
                   </template>
                   <!-- <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div> -->
@@ -216,9 +218,9 @@
                     height="520"
                     style="width: 100%"
                     :header-cell-style="headerCellStyle"
-                    @selection-change="handleAddedChange">
+                    @selection-change="handleAddedGoodsChange">
                     <el-table-column type="selection" width="50" />
-                    <el-table-column prop="asin" label="ASIN" width="538">
+                    <el-table-column prop="asin" label="ASIN">
                       <template #default="scope">
                         <div style="display: flex; align-items: center">
                           <div style="margin-right: 8px; line-height: normal">
@@ -247,10 +249,10 @@
                     </el-table-column>
                     <el-table-column prop="name" label="Name" width="120" align="right">
                       <template #header>
-                        <el-button type="primary" size="normal" link @click="handleDel">删除已选中</el-button>
+                        <el-button type="primary" size="normal" link @click="delSelectedGoods">删除已选中</el-button>
                       </template>
                       <template #default="scope">
-                        <el-button type="primary" size="small" @click="delSingle(scope)" text>删除</el-button>
+                        <el-button type="primary" size="small" @click="delSingleGoods(scope)" text>删除</el-button>
                       </template>
                     </el-table-column>
                   </el-table>
@@ -258,7 +260,7 @@
               </div>
             </div>
           </el-form-item>
-
+          <!-- 自动定向 -->
           <div class="column-item">
             <p style="color: #606266; font-weight: 450"><span style="color: #e47470">*</span> 自动定向</p>
             <el-radio-group v-model="ruleForm.autoRedirect" @change="changeBid">
@@ -275,6 +277,7 @@
               </div>
             </el-radio-group>
           </div>
+          <!-- 自动定向---按目标组设置出价 -->
           <el-card v-if="showCard" class="box-card">
             <div>
               <div style="color: #8e9095">
@@ -341,6 +344,7 @@
 
           <div style="font-size: 20px; font-weight: bold; margin-top: 30px">否定词</div>
           <hr />
+          <!-- 否定词表格 -->
           <el-form-item prop="matchType" style="width: 100%; margin-top: 20px">
             <div style="width: 100%; height: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
               <div style="width: 50%; border-right: 1px solid #c2c7cf">
@@ -371,7 +375,7 @@
                   </template>
                   <div class="card-body">
                     <el-table :data="tableData" style="width: 100%" :header-row-style="changeNegTableHeader">
-                      <el-table-column prop="negativeWords" label="否定词" width="628" />
+                      <el-table-column prop="negativeWords" label="否定词" width="auto" />
                       <el-table-column prop="operate" label="操作" width="60" align="right">
                         <template #default="scope">
                           <el-button type="primary" size="small" @click="delSingleNegative(scope)" text>删除</el-button>
@@ -386,14 +390,15 @@
           </el-form-item>
 
           <div style="font-size: 20px; font-weight: bold; margin-top: 30px">否定商品</div>
-          <hr />
+          <hr />          
+          <!-- 否定商品表格 -->
           <el-form-item prop="matchType" style="width: 100%; margin-top: 20px">
             <div style="width: 100%; height: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
               <div style="width: 50%; border-right: 1px solid #c2c7cf">
-                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+                <el-tabs v-model="negativeTabs" class="demo-tabs" @tab-click="handleNegGoodsTabs">
                   <el-tab-pane label="搜索" name="first">
                     <div style="margin-bottom: 10px">
-                      <el-input placeholder="按ASIN搜索" v-model="negativeInput" @change="searchNegative" clearable />
+                      <el-input placeholder="按ASIN搜索" v-model="negativeInput" @change="searchNegativeGoods" clearable />
                     </div>
                     <el-table
                       height="415"
@@ -401,9 +406,8 @@
                       v-loading="loading"
                       :data="negativeTableData"
                       :header-cell-style="headerCellStyle"
-                      @selection-change="handleSelectionChange"
                       :show-header="false">
-                      <el-table-column prop="asin" label="商品" width="588">
+                      <el-table-column prop="asin" label="商品">
                         <template #default="scope">
                           <div style="display: flex; align-items: center">
                             <div style="margin-right: 8px; line-height: normal">
@@ -421,11 +425,9 @@
                         </template>
                       </el-table-column>
                       <el-table-column prop="name" label="Name" width="120" align="right">
-                        <template #header>
-
-                        </template>
+                        <template #header> </template>
                         <template #default="scope">
-                          <el-button type="primary" size="small" @click="addSingleNegative(scope)" text>添加</el-button>
+                          <el-button type="primary" size="small" @click="addSingleNegativeGoods(scope)" text>添加</el-button>
                         </template>
                       </el-table-column>
                     </el-table>
@@ -437,9 +439,9 @@
                       type="textarea"
                       placeholder="请输入关键词，多个关键词使用逗号或者换行符分隔。(最多添加1000个关键词)"
                       maxlength="11000"
-                      style="padding: 0 20px" />
+                      style="padding: 10px 10px" />
                     <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
-                      <el-button style="margin-right: 18px" type="primary" text bg @click="addNegativeGoods">添加</el-button>
+                      <el-button style="margin-right: 10px" type="primary" text bg @click="addNegativeGoods">添加</el-button>
                     </div>
                   </el-tab-pane>
                 </el-tabs>
@@ -460,8 +462,8 @@
                     height="415"
                     style="width: 100%"
                     :header-cell-style="headerCellStyle"
-                    @selection-change="handleAddedChange">
-                    <el-table-column prop="asin" label="商品" width="588">
+                    @selection-change="handleAddedNegGoods">
+                    <el-table-column prop="asin" label="商品">
                       <template #default="scope">
                         <div style="display: flex; align-items: center">
                           <div style="margin-right: 8px; line-height: normal">
@@ -527,6 +529,7 @@ const pageSize = ref(20) // 每页显示条目数
 const totalItems = ref() // 数据总量
 const showCard = ref(false)
 const activeName = ref('first')
+const negativeTabs = ref('first')
 const searchInp = ref('')
 const select = ref('name')
 const select2 = ref('latest')
@@ -630,6 +633,20 @@ function changeBid() {
 // 切换投放类型
 function changeType() {}
 
+// 处理分页器当前页变化
+function handleCurrentChange(newPage) {
+  currentPage.value = newPage
+  loading.value = true
+  setTableData()
+}
+// 处理分页器每页显示条目数变化
+function handleSizeChange(newSize) {
+  pageSize.value = newSize
+  currentPage.value = 1 // 重置到第一页
+}
+
+
+// ---------------------广告组商品表格模块---------------------
 function setTableData(asin = '', sku = '') {
   return request({
     url: '/api/sellers/listings/',
@@ -654,44 +671,7 @@ function setTableData(asin = '', sku = '') {
     })
 }
 
-// 处理分页器当前页变化
-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) => !addedData.value.some((added) => added.sku === sel.sku) // 假设使用sku作为唯一标识
-  )
-  // 如果有新的不重复项，加入到addedData.value中
-  if (newSelections.length > 0) {
-    addedData.value.push(...newSelections)
-  }
-  // console.log('addedData', addedData.value)
-}
-// 获取addedTable中已选中的项
-function handleAddedChange(selection) {
-  addedSels = selection
-}
-// 删除第二个table中已经选中的项
-function handleDel() {
-  addedData.value = addedData.value.filter((item) => !addedSels.includes(item))
-  addedSels = []
-}
-function addSingle(scope) {
+function addSingleGoods(scope) {
   console.log('scope', scope.row)
 
   const isAlreadyAdded = addedData.value.some((item) => item.sku === scope.row.sku)
@@ -702,19 +682,7 @@ function addSingle(scope) {
   }
 }
 
-
-function addSingleNegative(scope) {
-  console.log('scope', scope.row)
-
-  const isAlreadyAdded = addedNegetiveTableData.value.some((item) => item.sku === scope.row.sku)
-  if (!isAlreadyAdded) {
-    addedNegetiveTableData.value.push(scope.row)
-  } else {
-    console.log('Item is already added.')
-  }
-}
-
-function delSingle(scope) {
+function delSingleGoods(scope) {
   const index = addedData.value.findIndex((item) => item.sku === scope.row.sku)
 
   if (index !== -1) {
@@ -725,24 +693,15 @@ function delSingle(scope) {
   }
 }
 
-function delSingleNegativeGoods(scope) {
-  const index = addedNegetiveTableData.value.findIndex((item) => item.sku === scope.row.sku)
-
-  if (index !== -1) {
-    addedNegetiveTableData.value.splice(index, 1)
-    console.log('Item removed successfully.')
-  } else {
-    console.log('Item not found.')
-  }
-}
-// 全部删除已添加商品列表
-function delAll() {
+function delAllGoods() {
   addedData.value = []
   // addedData.value.splice(0, addedData.value.length)
 }
 
-function delAllNegativeGoods() {
-  addedNegetiveTableData.value = []
+// 删除第二个table中已经选中的项
+function delSelectedGoods() {
+  addedData.value = addedData.value.filter((item) => !addedSels.includes(item))
+  addedSels = []
 }
 
 function inpChange(e) {
@@ -767,10 +726,32 @@ function selChange(e) {
     setTableData('', value)
   }
 }
+// 点击表格选项触发事件
+function handleSelectionChange(selection) {
+  selections = selection
+}
+// 获取addedTable中已选中的项
+function handleAddedGoodsChange(selection) {
+  addedSels = selection
+}
+// 添加已选中的项
+function handleGoodsAdd() {
+  // 过滤掉已经存在于addedData.value中的项
+  const newSelections = selections.filter(
+    (sel) => !addedData.value.some((added) => added.sku === sel.sku) // 使用sku作为唯一标识
+  )
+  // 如果有新的不重复项，加入到addedData.value中
+  if (newSelections.length > 0) {
+    addedData.value.push(...newSelections)
+  }
+}
+// 点击Tab
+const handleGoodsTabs = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
 
-let negativeList = reactive([])
-const tableData = negativeList
 
+// ---------------------否定词模块---------------------
 function addNegative() {
   // 删除 negativeTextarea 前后的空格
   const trimmedText = ruleForm.negativeTextarea.trim()
@@ -794,12 +775,16 @@ function addNegative() {
       console.log('有空项目,未被添加到列表中')
     }
   })
-
   // 清空输入框
   ruleForm.negativeTextarea = ''
   console.log(negativeList)
 }
 
+function delAllNegative() {
+  // negativeList.splice(0, negativeList.length)
+  negativeList.length = 0
+}
+
 function delSingleNegative(scope) {
   const index = negativeList.findIndex((item) => item.negativeWords === scope.row.negativeWords)
   if (negativeList.length) {
@@ -809,10 +794,13 @@ function delSingleNegative(scope) {
     console.log('无效的索引，无法删除条目')
   }
 }
-function delAllNegative() {
-  // negativeList.splice(0, negativeList.length)
-  negativeList.length = 0
-}
+
+
+//  ---------------------否定商品模块---------------------
+let negativeList = reactive([])
+const tableData = negativeList
+let inputAddedNegGoods = ref([])
+
 function setNegativeTableData(asin = '',) {
   return request({
     url: '/api/sellers/listings/',
@@ -826,6 +814,7 @@ function setNegativeTableData(asin = '',) {
   })
     .then((resp) => {
       negativeTableData.value = resp.data
+      inputAddedNegGoods.value = resp.data
       loading.value = false
     })
     .catch((error) => {
@@ -834,7 +823,53 @@ function setNegativeTableData(asin = '',) {
     })
 }
 
-function searchNegative(e) {
+// 输入tab的textarea
+function addNegativeGoods() {
+  console.log('ruleForm.negativeGoodsTextarea', ruleForm.negativeGoodsTextarea)
+  loading.value = true
+
+  setNegativeTableData(ruleForm.negativeGoodsTextarea)
+    .then(() => {
+      addedNegetiveTableData.value = [...addedNegetiveTableData.value, ...inputAddedNegGoods.value]
+    })
+    .catch((error) => {
+      console.error('Error fetching data:', error)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+
+
+function addSingleNegativeGoods(scope) {
+  console.log('scope', scope.row)
+
+  const isAlreadyAdded = addedNegetiveTableData.value.some((item) => item.sku === scope.row.sku)
+  if (!isAlreadyAdded) {
+    addedNegetiveTableData.value.push(scope.row)
+  } else {
+    console.log('Item is already added.')
+  }
+}
+
+function delAllNegativeGoods() {
+  addedNegetiveTableData.value = []
+}
+
+function delSingleNegativeGoods(scope) {
+  const index = addedNegetiveTableData.value.findIndex((item) => item.sku === scope.row.sku)
+
+  if (index !== -1) {
+    addedNegetiveTableData.value.splice(index, 1)
+    console.log('Item removed successfully.')
+  } else {
+    console.log('Item not found.')
+  }
+}
+
+function searchNegativeGoods(e) {
+  console.log(e)
   if (e === '') {
     negativeTableData.value = []
   } else {
@@ -842,10 +877,17 @@ function searchNegative(e) {
   }
 }
 
-function addNegativeGoods(e) {
-  setNegativeTableData(e)
+function handleAddedNegGoods(selection) {
+  addedSels = selection
+}
+
+function handleNegGoodsTabs(tab: TabsPaneContext, event: Event) {
+  // console.log(tab, event)
 }
 
+
+
+// ---------------------自定义校验模块---------------------
 function checkBid(value, callback, bidField) {
   const bid = parseFloat(value)
   const budget = parseFloat(ruleForm.budget)
@@ -865,7 +907,6 @@ function checkBid(value, callback, bidField) {
   }
 }
 
-// 动态生成校验规则的函数
 function getValidationRules(fieldName) {
   // 默认校验规则
   const commonRules = [
@@ -927,6 +968,7 @@ watch(
   }
 )
 
+// 表单提交
 async function submitForm(formEl: FormInstance | undefined) {
   if (!formEl) return
   await formEl.validate((valid, fields) => {
@@ -944,13 +986,8 @@ function resetForm(formEl: FormInstance | undefined) {
 }
 
 
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
-}
-
 // 修改表头样式
 const headerCellStyle = (args) => {
-  // console.log('args', args)
   if (args.rowIndex === 0) {
     return {
       backgroundColor: 'rgba(245, 245, 245, 0.9)',
@@ -959,7 +996,6 @@ const headerCellStyle = (args) => {
 }
 
 function changeNegTableHeader(args) {
-  console.log('args', args)
   if (args.rowIndex === 0) {
     return {
       color: '#505968',
@@ -976,6 +1012,7 @@ onMounted(() => {
 defineOptions({
   name: 'SpCreateCampaigns',
 })
+
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,227 @@
+<template>
+  <el-form
+    :label-position="labelPosition"
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="120px"
+    class="demo-ruleForm"
+    :size="formSize"
+    status-icon>
+
+    <el-form-item prop="matchType" style="width: 100%; margin-top: 20px">
+            <div style="width: 100%; height: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
+              <div style="width: 50%; border-right: 1px solid #c2c7cf">
+                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+                  <el-tab-pane label="搜索" name="first">
+                    <div style="margin-bottom: 10px">
+                      <el-input placeholder="按ASIN搜索" v-model="negativeInput" @change="searchNegative" clearable />
+                    </div>
+                    <el-table
+                      height="415"
+                      style="width: 100%"
+                      v-loading="loading"
+                      :data="negativeTableData"
+                      :header-cell-style="headerCellStyle"
+                      :show-header="false">
+                      <el-table-column prop="asin" label="商品">
+                        <template #default="scope">
+                          <div style="display: flex; align-items: center">
+                            <div style="margin-right: 8px; line-height: normal">
+                              <el-image class="img-box" :src="scope.row.image_link" />
+                            </div>
+                            <div>
+                              <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
+                                <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
+                              </el-tooltip>
+                              <span>
+                                ASIN: <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
+                              </span>
+                            </div>
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="name" label="Name" width="120" align="right">
+                        <template #header> </template>
+                        <template #default="scope">
+                          <el-button type="primary" size="small" @click="addSingleNegative(scope)" text>添加</el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-tab-pane>
+                  <el-tab-pane label="输入" name="second">
+                    <el-input
+                      v-model="ruleForm.negativeGoodsTextarea"
+                      :rows="17"
+                      type="textarea"
+                      placeholder="请输入关键词，多个关键词使用逗号或者换行符分隔。(最多添加1000个关键词)"
+                      maxlength="11000"
+                      style="padding: 10px 10px" />
+                    <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
+                      <el-button style="margin-right: 10px" type="primary" text bg @click="addNegativeGoods">添加</el-button>
+                    </div>
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+              <div style="width: 50%">
+                <el-card class="box-card" shadow="never">
+                  <template #header>
+                    <div class="card-header">
+                      <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedNegetiveTableData.length }}</span>
+                      <el-button class="button" text bg @click="delAllNegativeGoods">全部删除</el-button>
+                    </div>
+                  </template>
+                  <div class="card-body"></div>
+                </el-card>
+                <div style="padding: 0 10px 0 10px; margin-top: -12px">
+                  <el-table
+                    :data="addedNegetiveTableData"
+                    height="415"
+                    style="width: 100%"
+                    :header-cell-style="headerCellStyle"
+                    @selection-change="handleAddedChange">
+                    <el-table-column prop="asin" label="商品">
+                      <template #default="scope">
+                        <div style="display: flex; align-items: center">
+                          <div style="margin-right: 8px; line-height: normal">
+                            <el-image class="img-box" :src="scope.row.image_link" />
+                          </div>
+                          <div>
+                            <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
+                              <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
+                            </el-tooltip>
+                            <span
+                              >ASIN:
+                              <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
+                            </span>
+                          </div>
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="120" align="right">
+                      <template #default="scope">
+                        <el-button type="primary" size="small" @click="delSingleNegativeGoods(scope)" text>删除</el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive, ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
+import { request } from '/@/utils/service'
+
+
+const shopInfo = useShopInfo()
+const { profile } = storeToRefs(shopInfo)
+const formSize = ref('default')
+const labelPosition = ref('top')
+const loading = ref(true)
+const ruleFormRef = ref<FormInstance>()
+interface RuleForm {
+  negativeGoodsTextarea: string
+}
+const ruleForm = reactive<RuleForm>({
+  negativeGoodsTextarea: '',
+})
+const rules = computed(() => ({}))
+const activeName = ref('first')
+const negativeInput = ref('')
+const negativeTableData = ref([])
+let addedSels = []
+const addedNegetiveTableData = ref([])
+
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+function setNegativeTableData(asin = '',) {
+  return request({
+    url: '/api/sellers/listings/',
+    method: 'GET',
+    params: {
+      // page: currentPage.value,
+      // limit: pageSize.value,
+      profile_id: profile.value.profile_id,
+      asin,
+    },
+  })
+    .then((resp) => {
+      negativeTableData.value = resp.data
+      loading.value = false
+    })
+    .catch((error) => {
+      console.error('Error fetching data:', error)
+      loading.value = false
+    })
+}
+
+function searchNegative(e) {
+  if (e === '') {
+    negativeTableData.value = []
+  } else {
+    setNegativeTableData(e)
+  }
+}
+
+function addSingleNegative(scope) {
+  console.log('scope', scope.row)
+
+  const isAlreadyAdded = addedNegetiveTableData.value.some((item) => item.sku === scope.row.sku)
+  if (!isAlreadyAdded) {
+    addedNegetiveTableData.value.push(scope.row)
+  } else {
+    console.log('Item is already added.')
+  }
+}
+
+function addNegativeGoods() {
+  // console.log('ruleForm.negativeGoodsTextarea', ruleForm.negativeGoodsTextarea)
+  const x = setNegativeTableData(ruleForm.negativeGoodsTextarea)
+  console.log('x', x)
+}
+
+function delAllNegativeGoods() {
+  addedNegetiveTableData.value = []
+}
+
+function delSingleNegativeGoods(scope) {
+  const index = addedNegetiveTableData.value.findIndex((item) => item.sku === scope.row.sku)
+
+  if (index !== -1) {
+    addedNegetiveTableData.value.splice(index, 1)
+    console.log('Item removed successfully.')
+  } else {
+    console.log('Item not found.')
+  }
+}
+
+function handleAddedChange(selection) {
+  addedSels = selection
+}
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+
+const headerCellStyle = (args) => {
+  // console.log('args', args)
+  if (args.rowIndex === 0) {
+    return {
+      backgroundColor: 'rgba(245, 245, 245, 0.9)',
+    }
+  }
+}
+
+</script>
+
+<style></style>