✨ feat: 创建成功后刷新list置灰

src/views/productCenter/productList/components/ProductDialog/ProductList.vue

@@ -22,9 +22,10 @@
               <el-collapse v-model="activeNames" class="padding-0-10" style="border: none">
                 <el-collapse-item v-for="(item, index) in data" :key="item.parentAsin" :name="String(index)">
                   <template #title>
-                    <el-checkbox v-model="item.checked" @click.stop="" @change="checkAll(item, item.checked)">
+                    <el-checkbox v-model="item.checked" @click.stop="" @change="checkAll(item, item.checked)" :disabled="item.allChildrenExist">
                       {{ item.parentAsin }}
                     </el-checkbox>
+                    <p style="margin-left: 10px;">111---{{ item.allChildrenExist }}</p>
                     <el-tag style="margin-left: 8px" effect="plain" size="small" round
                       >{{ item.num }}
                       <span v-if="item.num == '1'">ASIN</span>
@@ -34,7 +35,8 @@
                   <ul class="list-container">
                     <li v-for="child in item.childAsin" :key="child.asin">
                       <div class="list-content">
-                        <el-checkbox v-model="child.checked" @change="checkSingle(item)" />
+                        <el-checkbox v-if="child.isExist == false" v-model="child.checked" @change="checkSingle(item)" />
+
                         <img :src="child.Image" class="image-item" />
                         <div>
                           <el-tooltip effect="dark" :content="child.Title" placement="top-start">
@@ -44,7 +46,10 @@
                             <span class="item-font">${{ child.Price ? child.Price : '--' }}</span>
                             | <span class="item-quantity">{{ child.Quantity ? '有库存' : '缺货' }}</span>
                           </div>
-                          <div><span class="item-asin">ASIN:</span> {{ child.Asin }}</div>
+                          <div>
+                            <span class="item-asin">ASIN:</span> {{ child.Asin }}
+                            <span v-if="child.isExist" class="exist-item">此商品已存在</span>
+                          </div>
                         </div>
                       </div>
                     </li>
@@ -136,7 +141,7 @@ const activeNames = ref([])
 const infiniteLoad = ref(false)
 let currentPage = 1
 let total = 0
-let limit = 10
+let limit = 20
 
 function load() {
   if (currentPage * limit < total) {
@@ -164,10 +169,12 @@ async function fetchAllProduct() {
       }
       total = res.total
     }
+    checkParentItems()
   } catch (error) {
     console.log('error:', error)
   } finally {
     infiniteLoad.value = false
+    // checkParentItems()
     activeNames.value = data.value.map((_, index) => String(index))
   }
 }
@@ -295,6 +302,14 @@ function removeSelectedItems() {
   clearAddedSelections()
 }
 
+function checkParentItems() {
+  data.value.forEach((parentItem) => {
+    // 检查是否每个子项的isExist都为true
+    const allExist = parentItem.childAsin.every((child) => child.isExist)
+    parentItem.allChildrenExist = allExist // 新增属性，用于控制父Asin的checkbox是否禁用
+  })
+}
+
 // 判断是否有选中的项 给模板提供用来判断是否显示删除已选中的按钮
 const hasSelectedItems = computed(() => {
   return selectedData.value.some((parentItem) => {
@@ -317,6 +332,15 @@ emitter.on('ProductLineDialog-sendDetailData', (value: any) => {
   selectedData.value = value.data
 })
 
+emitter.on('ProductLineDialog-reloading', (value: any) => {
+  if(value.reloading) {
+    data.value.splice(0)
+    currentPage = 1
+    fetchAllProduct()
+    removeAllItems()
+  }
+})
+
 onMounted(() => {
   fetchAllProduct()
   emitter.on('ProductLineDialog-closeDialog', (value: any) => {
@@ -324,6 +348,8 @@ onMounted(() => {
       removeAllItems()
     }
   })
+
+  
 })
 
 onBeforeUnmount(() => {
@@ -397,7 +423,7 @@ onBeforeUnmount(() => {
 .list-content {
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
+  /* margin-bottom: 10px; */
 }
 .image-item {
   width: 50px;
@@ -436,4 +462,9 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: row-reverse;
 }
+.exist-item {
+  margin-left: 20px;
+  color: #86909c;
+  font-weight: 700;
+}
 </style>

src/views/productCenter/productList/components/ProductDialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="createProductDialog" @close="closeDialog" title="新建产品线" width="1300">
+  <el-dialog v-model="createProductDialog" @close="closeDialog"  title="新建产品线" width="1300">
     <el-form
       v-loading="load"
       ref="ruleFormRef"
@@ -98,8 +98,9 @@ async function updateProductLine() {
     console.log('error:', error)
   }
 }
-
+let isClose = false
 function closeDialog() {
+  isClose = true
   isUpdate.value = false
   ruleForm.productLineName = ''
   emitter.emit('ProductLineDialog-closeDialog', { clear: true })
@@ -132,10 +133,11 @@ const updateForm = async (formEl: FormInstance | undefined) => {
 
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
-  await formEl.validate((valid, fields) => {
+  await formEl.validate(async (valid, fields) => {
     if (valid) {
       console.log('submit!')
-      createProductLine()
+      await createProductLine()
+      emitter.emit('ProductLineDialog-reloading', { reloading: true })
     } else {
       console.log('error submit!', fields)
     }

src/views/productCenter/productList/components/ProductSelectCard/index.vue

@@ -19,11 +19,11 @@
               <el-button :icon="Delete" text size="small" style="margin-left: 0">删除</el-button>
             </div>
           </el-popover>
-          <div style="padding: 10px; position: relative">
+          <div class="left-part-container">
             <div class="product-line-name">{{ item.productlineName }}</div>
 
             <div class="custom-part">
-              <div class="total-sales">{{ item.totalSales }}</div>
+              <div class="total-sales">${{ item.totalSales }}</div>
               <span class="label">总销售额</span>
             </div>
           </div>
@@ -191,4 +191,8 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
 }
+.left-part-container {
+  padding: 10px;
+  position: relative;
+}
 </style>