🐞 fix: fixed:创建产品线添加和删除的bug

package-lock.json

@@ -5792,9 +5792,9 @@
 			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
 		},
 		"jsonc-parser": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-			"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+			"version": "3.2.1",
+			"resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
+			"integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
 			"dev": true
 		},
 		"jsoneditor": {
@@ -6035,15 +6035,23 @@
 			}
 		},
 		"mlly": {
-			"version": "1.4.2",
-			"resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.4.2.tgz",
-			"integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
+			"version": "1.6.1",
+			"resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.6.1.tgz",
+			"integrity": "sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==",
 			"dev": true,
 			"requires": {
-				"acorn": "^8.10.0",
-				"pathe": "^1.1.1",
+				"acorn": "^8.11.3",
+				"pathe": "^1.1.2",
 				"pkg-types": "^1.0.3",
-				"ufo": "^1.3.0"
+				"ufo": "^1.3.2"
+			},
+			"dependencies": {
+				"acorn": {
+					"version": "8.11.3",
+					"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz",
+					"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+					"dev": true
+				}
 			}
 		},
 		"mobius1-selectr": {
@@ -6383,9 +6391,9 @@
 			"dev": true
 		},
 		"pathe": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.1.tgz",
-			"integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+			"version": "1.1.2",
+			"resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.2.tgz",
+			"integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
 			"dev": true
 		},
 		"pause-stream": {
@@ -6808,9 +6816,9 @@
 			}
 		},
 		"scule": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmmirror.com/scule/-/scule-1.0.0.tgz",
-			"integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+			"version": "1.3.0",
+			"resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
+			"integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
 			"dev": true
 		},
 		"sdk-base": {
@@ -7297,9 +7305,9 @@
 			"dev": true
 		},
 		"ufo": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.3.1.tgz",
-			"integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
+			"version": "1.4.0",
+			"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.4.0.tgz",
+			"integrity": "sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==",
 			"dev": true
 		},
 		"unescape": {
@@ -7311,29 +7319,140 @@
 			}
 		},
 		"unimport": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.4.0.tgz",
-			"integrity": "sha512-M/lfFEgufIT156QAr/jWHLUn55kEmxBBiQsMxvRSIbquwmeJEyQYgshHDEvQDWlSJrVOOTAgnJ3FvlsrpGkanA==",
+			"version": "3.7.1",
+			"resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.7.1.tgz",
+			"integrity": "sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==",
 			"dev": true,
 			"requires": {
-				"@rollup/pluginutils": "^5.0.4",
+				"@rollup/pluginutils": "^5.1.0",
+				"acorn": "^8.11.2",
 				"escape-string-regexp": "^5.0.0",
-				"fast-glob": "^3.3.1",
-				"local-pkg": "^0.4.3",
-				"magic-string": "^0.30.3",
+				"estree-walker": "^3.0.3",
+				"fast-glob": "^3.3.2",
+				"local-pkg": "^0.5.0",
+				"magic-string": "^0.30.5",
 				"mlly": "^1.4.2",
 				"pathe": "^1.1.1",
 				"pkg-types": "^1.0.3",
-				"scule": "^1.0.0",
+				"scule": "^1.1.1",
 				"strip-literal": "^1.3.0",
-				"unplugin": "^1.5.0"
+				"unplugin": "^1.5.1"
 			},
 			"dependencies": {
+				"@rollup/pluginutils": {
+					"version": "5.1.0",
+					"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+					"integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+					"dev": true,
+					"requires": {
+						"@types/estree": "^1.0.0",
+						"estree-walker": "^2.0.2",
+						"picomatch": "^2.3.1"
+					},
+					"dependencies": {
+						"estree-walker": {
+							"version": "2.0.2",
+							"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+							"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+							"dev": true
+						}
+					}
+				},
+				"acorn": {
+					"version": "8.11.3",
+					"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz",
+					"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+					"dev": true
+				},
+				"chokidar": {
+					"version": "3.6.0",
+					"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
+					"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+					"dev": true,
+					"requires": {
+						"anymatch": "~3.1.2",
+						"braces": "~3.0.2",
+						"fsevents": "~2.3.2",
+						"glob-parent": "~5.1.2",
+						"is-binary-path": "~2.1.0",
+						"is-glob": "~4.0.1",
+						"normalize-path": "~3.0.0",
+						"readdirp": "~3.6.0"
+					}
+				},
 				"escape-string-regexp": {
 					"version": "5.0.0",
 					"resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
 					"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
 					"dev": true
+				},
+				"estree-walker": {
+					"version": "3.0.3",
+					"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+					"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+					"dev": true,
+					"requires": {
+						"@types/estree": "^1.0.0"
+					}
+				},
+				"fast-glob": {
+					"version": "3.3.2",
+					"resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
+					"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+					"dev": true,
+					"requires": {
+						"@nodelib/fs.stat": "^2.0.2",
+						"@nodelib/fs.walk": "^1.2.3",
+						"glob-parent": "^5.1.2",
+						"merge2": "^1.3.0",
+						"micromatch": "^4.0.4"
+					}
+				},
+				"glob-parent": {
+					"version": "5.1.2",
+					"resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+					"dev": true,
+					"requires": {
+						"is-glob": "^4.0.1"
+					}
+				},
+				"local-pkg": {
+					"version": "0.5.0",
+					"resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
+					"integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+					"dev": true,
+					"requires": {
+						"mlly": "^1.4.2",
+						"pkg-types": "^1.0.3"
+					}
+				},
+				"magic-string": {
+					"version": "0.30.8",
+					"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.8.tgz",
+					"integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+					"dev": true,
+					"requires": {
+						"@jridgewell/sourcemap-codec": "^1.4.15"
+					}
+				},
+				"unplugin": {
+					"version": "1.8.3",
+					"resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.8.3.tgz",
+					"integrity": "sha512-ZlLteXGDcyJgsbN2g4sZ3Dw6fpX1O5rjgeaA5MmQhhA2YxnTxsh43f8nDQgFOzcir0iv8GYMjtCV8MtyNnrhEg==",
+					"dev": true,
+					"requires": {
+						"acorn": "^8.11.3",
+						"chokidar": "^3.6.0",
+						"webpack-sources": "^3.2.3",
+						"webpack-virtual-modules": "^0.6.1"
+					}
+				},
+				"webpack-virtual-modules": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
+					"integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
+					"dev": true
 				}
 			}
 		},
@@ -7350,19 +7469,19 @@
 			}
 		},
 		"unplugin-auto-import": {
-			"version": "0.16.6",
-			"resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.16.6.tgz",
-			"integrity": "sha512-M+YIITkx3C/Hg38hp8HmswP5mShUUyJOzpifv7RTlAbeFlO2Tyw0pwrogSSxnipHDPTtI8VHFBpkYkNKzYSuyA==",
+			"version": "0.16.7",
+			"resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.16.7.tgz",
+			"integrity": "sha512-w7XmnRlchq6YUFJVFGSvG1T/6j8GrdYN6Em9Wf0Ye+HXgD/22kont+WnuCAA0UaUoxtuvRR1u/mXKy63g/hfqQ==",
 			"dev": true,
 			"requires": {
-				"@antfu/utils": "^0.7.5",
-				"@rollup/pluginutils": "^5.0.2",
-				"fast-glob": "^3.3.0",
-				"local-pkg": "^0.4.3",
-				"magic-string": "^0.30.1",
-				"minimatch": "^9.0.2",
-				"unimport": "^3.0.14",
-				"unplugin": "^1.3.2"
+				"@antfu/utils": "^0.7.6",
+				"@rollup/pluginutils": "^5.0.5",
+				"fast-glob": "^3.3.1",
+				"local-pkg": "^0.5.0",
+				"magic-string": "^0.30.5",
+				"minimatch": "^9.0.3",
+				"unimport": "^3.4.0",
+				"unplugin": "^1.5.0"
 			},
 			"dependencies": {
 				"brace-expansion": {
@@ -7374,6 +7493,25 @@
 						"balanced-match": "^1.0.0"
 					}
 				},
+				"local-pkg": {
+					"version": "0.5.0",
+					"resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
+					"integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+					"dev": true,
+					"requires": {
+						"mlly": "^1.4.2",
+						"pkg-types": "^1.0.3"
+					}
+				},
+				"magic-string": {
+					"version": "0.30.8",
+					"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.8.tgz",
+					"integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+					"dev": true,
+					"requires": {
+						"@jridgewell/sourcemap-codec": "^1.4.15"
+					}
+				},
 				"minimatch": {
 					"version": "9.0.3",
 					"resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",

package.json

@@ -70,7 +70,7 @@
 		"prettier": "^2.8.1",
 		"sass": "^1.56.2",
 		"typescript": "^4.9.4",
-		"unplugin-auto-import": "^0.16.6",
+		"unplugin-auto-import": "^0.16.7",
 		"unplugin-vue-components": "^0.25.2",
 		"vite": "^4.0.0",
 		"vite-plugin-vue-setup-extend": "^0.4.0",

src/views/productCenter/productList/api.ts

@@ -64,4 +64,18 @@ export function getProductCardData(query) {
     params: query
   })
 }
+export function getProductDetail(query) {
+  return request({
+    url: '/api/sellers/productlinedetail/',
+    method: 'GET',
+    params: query
+  })
+}
+export function postUpdateProductLine(body) {
+  return request({
+    url: '/api/sellers/productlinedetail/update/',
+    method: 'POST',
+    data: body
+  })
+}
 

src/views/productCenter/productList/components/ProductLineDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="createProductDialog" title="新建产品线" width="1300">
+  <el-dialog v-model="createProductDialog" @close="closeDialog" title="新建产品线" width="1300">
     <el-form
       v-loading="load"
       ref="ruleFormRef"
@@ -24,7 +24,8 @@
       </el-form-item>
       <el-form-item>
         <div style="display: flex; flex-direction: row-reverse">
-          <el-button style="margin-left: 10px" color="#3c59b0" @click="submitForm(ruleFormRef)"> 创建 </el-button>
+          <el-button v-if="!isUpdate" style="margin-left: 10px" color="#3c59b0" @click="submitForm(ruleFormRef)"> 创建 </el-button>
+          <el-button v-if="isUpdate" style="margin-left: 10px" color="#3c59b0" @click="updateForm(ruleFormRef)"> 确定 </el-button>
           <el-button plain @click="createProductDialog = false">取消</el-button>
         </div>
       </el-form-item>
@@ -37,17 +38,72 @@ import { onBeforeUnmount, reactive, ref, inject } from 'vue'
 import emitter from '/@/utils/emitter'
 import type { FormInstance, FormRules } from 'element-plus'
 import ProductList from '../components/ProductList.vue'
-import { postCreateProductLine } from '../api'
+import { postCreateProductLine, getProductDetail, postUpdateProductLine } from '../api'
 import { ElMessage } from 'element-plus'
 
 const profile = <any>inject('profile')
 
 const createProductDialog = ref(false)
+const load = ref(false)
+let asinList = []
+let productlineId = ''
+const isUpdate = ref(false)
 
 emitter.on('open-productLine-dialog', (value: any) => {
   createProductDialog.value = value.isVisible
 })
 
+emitter.on('ProductList-asinList', (value: any) => {
+  asinList = value
+})
+
+emitter.on('ProductTab-editProductCard', (value: any) => {
+  productlineId = value.data.productlineId
+  fetchProductDetail()
+
+  isUpdate.value = true
+  createProductDialog.value = value.isVisible
+  ruleForm.productLineName = value.data.productlineName
+})
+
+async function fetchProductDetail() {
+  const query = {
+    profileId: profile.value.profile_id,
+    productlineId: productlineId,
+  }
+  try {
+    const response = await getProductDetail(query)
+    emitter.emit('ProductLineDialog-sendDetailData', { data: response.data })
+  } catch (error) {
+    console.log('error:', error)
+  }
+}
+
+async function updateProductLine() {
+  const body = {
+    profileId: profile.value.profile_id,
+    productLineName: ruleForm.productLineName,
+    asinList: asinList,
+  }
+  try {
+    const response = await postUpdateProductLine(body)
+    if (response.data.code == 'success') {
+      ElMessage.success('更新成功')
+    } else if (response.data.code == 'error') {
+      ElMessage.warning(`${response.data.description}`)
+    } else {
+      ElMessage.error('更新失败')
+    }
+  } catch (error) {
+    console.log('error:', error)
+  }
+}
+
+function closeDialog() {
+  isUpdate.value = false
+  emitter.emit('ProductLineDialog-closeDialog', { clear: true })
+}
+
 // 表单相关
 interface RuleForm {
   productLineName: string
@@ -61,6 +117,18 @@ const rules = reactive<FormRules<RuleForm>>({
   productLineName: [{ required: true, message: '请输入产品线名称', trigger: 'blur' }],
 })
 
+const updateForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      updateProductLine()
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid, fields) => {
@@ -73,18 +141,12 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   })
 }
 
-const load = ref(false)
-let asinList = []
-emitter.on('asinList', (value: any) => {
-  asinList = value
-})
-
 async function createProductLine() {
   load.value = true
   const body = {
     profileId: profile.value.profile_id,
     productLineName: ruleForm.productLineName,
-    asinList: asinList
+    asinList: asinList,
   }
   try {
     const response = await postCreateProductLine(body)

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

@@ -10,7 +10,7 @@
             <div class="list-bar">
               <span class="padding-0-10">商品列表</span>
               <vxe-button
-                style="position: absolute; margin: 3px; right: 0; color: #3c59b0;"
+                style="position: absolute; margin: 3px; right: 0; color: #3c59b0"
                 type="text"
                 content="添加"
                 icon="vxe-icon-add"
@@ -22,7 +22,7 @@
               <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="stopOpen" @change="checkAll(item, item.checked)">
+                    <el-checkbox v-model="item.checked" @click.stop="" @change="checkAll(item, item.checked)">
                       {{ item.parentAsin }}
                     </el-checkbox>
                     <el-tag style="margin-left: 8px" effect="plain" size="small" round>{{ item.num }}ASIN</el-tag>
@@ -59,7 +59,7 @@
               :rows="15"
               type="textarea"
               placeholder="请输入ASIN, 多个ASIN使用逗号、空格或换行符分隔" />
-            <div style="display: flex; flex-direction: row-reverse;">
+            <div style="display: flex; flex-direction: row-reverse">
               <el-button :disabled="!textarea" type="primary" text bg>添加</el-button>
             </div>
           </div>
@@ -85,7 +85,7 @@
           <el-collapse v-model="activeNames" class="padding-0-10" style="border: none">
             <el-collapse-item v-for="(item, index) in selectedData" :key="item.parentAsin" :name="String(index)">
               <template #title>
-                <el-checkbox v-model="item.checked" @click.stop="stopOpen" @change="checkAll(item, item.checked)">{{ item.parentAsin }}</el-checkbox>
+                <el-checkbox v-model="item.checked" @click.stop="" @change="checkAll(item, item.checked)">{{ item.parentAsin }}</el-checkbox>
                 <el-tag style="margin-left: 8px" effect="plain" size="small" round>{{ item.num }}ASIN</el-tag>
               </template>
               <ul class="list-container">
@@ -130,7 +130,7 @@ const data = ref([])
 const selectedData = ref([])
 const activeNames = ref([])
 const infiniteLoad = ref(false)
-let currentPage = 1
+let currentPage = 57
 let total = 0
 let limit = 10
 
@@ -206,7 +206,6 @@ function getSelectedItems() {
   return selectedItems
 }
 
-// 获取所有选中项的深拷贝并取消勾选状态
 function handleSelectedItems() {
   const newSelectedItems = getSelectedItems().map((item) => ({
     ...item,
@@ -215,47 +214,38 @@ function handleSelectedItems() {
     childAsin: item.childAsin.map((child) => ({ ...child, checked: false })), // 取消子项勾选状态
   }))
 
-  // 更新selectedData以包含新选中的项，如果项已存在，则合并子项，并确保不重复
   newSelectedItems.forEach((newItem) => {
     const existingItemIndex = selectedData.value.findIndex((item) => item.parentAsin === newItem.parentAsin)
     if (existingItemIndex !== -1) {
-      // 合并子项，并确保不重复添加相同的子项
+      // 已存在的子项
       const existingChildren = selectedData.value[existingItemIndex].childAsin
+
+      // 新的子项，确保不重复
       const newChildren = newItem.childAsin
-      const mergedChildren = [...existingChildren]
+      const updatedChildren = existingChildren.slice() // 创建现有子项的副本
+
+      // 添加新的子项，如果它们不存在于现有子项中
       newChildren.forEach((newChild) => {
-        if (!mergedChildren.some((child) => child.asin === newChild.asin)) {
-          mergedChildren.push(newChild)
+        if (!updatedChildren.some((child) => child.Asin === newChild.Asin)) {
+          updatedChildren.push(newChild)
         }
       })
 
       // 更新现有项的子项和子项数量
-      selectedData.value[existingItemIndex].childAsin = mergedChildren
-      selectedData.value[existingItemIndex].num = mergedChildren.length // 更新子项数量
+      selectedData.value[existingItemIndex].childAsin = updatedChildren
+      selectedData.value[existingItemIndex].num = updatedChildren.length
     } else {
       // 如果不存在相同的父Asin，则添加新项
       selectedData.value.push(newItem)
     }
   })
-  // console.log('selectedData', selectedData.value)
-  const asinList = selectedData.value.map(item => {
-    return {
-      parentAsin: item.parentAsin,
-      childAsin: item.childAsin.map(childItem => {
-        return {
-          Asin: childItem.Asin,
-          Image: childItem.Image,
-          Title: childItem.Title
-        }
-      }),
-    }
-  })
-  emitter.emit('asinList', asinList)
-  clearSelections()
+
+  clearShowListSelections()
+  updateAsinList()
 }
 
-// 清除所有选中状态的辅助函数
-function clearSelections() {
+// 清除左侧list的选中状态
+function clearShowListSelections() {
   data.value.forEach((parentItem) => {
     parentItem.checked = false // 取消父项的选中状态
     parentItem.childAsin.forEach((childItem) => {
@@ -264,22 +254,41 @@ function clearSelections() {
   })
 }
 
+// 清除已添加的选中状态
+function clearAddedSelections() {
+  selectedData.value.forEach((parentItem) => {
+    parentItem.checked = false
+    parentItem.childAsin.forEach((childItem) => {
+      childItem.checked = false
+    })
+  })
+}
+
+// 更新asinList并发射事件
+function updateAsinList() {
+  const asinList = selectedData.value.map((item) => ({
+    parentAsin: item.parentAsin,
+    childAsin: item.childAsin.map((child) => ({
+      Asin: child.Asin,
+      Image: child.Image,
+      Title: child.Title,
+    })),
+  }))
+  emitter.emit('ProductList-asinList', asinList)
+}
+
 function removeAllItems() {
   selectedData.value.splice(0)
 }
 
 function removeSelectedItems() {
   selectedData.value = selectedData.value.filter((parentItem) => {
-    // 过滤掉父项下所有被选中的子项
     parentItem.childAsin = parentItem.childAsin.filter((childItem) => !childItem.checked)
-    // 仅保留未被完全移除的父项（即至少有一个子项未被选中）
-    return parentItem.childAsin.length > 0
+    return parentItem.childAsin.length > 0 // 仅保留有子项的父项
   })
-}
 
-// 阻止点击选择框时打开折叠面板
-function stopOpen() {
-  // console.log(1213)
+  // 重置剩余的所有项的勾选状态
+  clearAddedSelections()
 }
 
 // 判断是否有选中的项 给模板提供用来判断是否显示删除已选中的按钮
@@ -288,8 +297,22 @@ const hasSelectedItems = computed(() => {
     return parentItem.childAsin.some((childItem) => childItem.checked)
   })
 })
+
+emitter.on('ProductLineDialog-sendDetailData', (value: any) => {
+  selectedData.value = value.data
+})
+
 onMounted(() => {
   fetchAllProduct()
+  emitter.on('ProductLineDialog-closeDialog', (value: any) => {
+    if(value.clear === true) {
+      removeAllItems()
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  emitter.all.clear()
 })
 </script>
 

src/views/productCenter/productList/components/ProductTab.vue

@@ -15,7 +15,7 @@
               <el-icon class="custom-icon" @click.stop=""><MoreFilled /></el-icon>
             </template>
             <div class="custom-popoer">
-              <el-button :icon="Edit" text size="small">编辑</el-button>
+              <el-button :icon="Edit" text size="small" @click="editCard(item)">编辑</el-button>
               <el-button :icon="Delete" text size="small" style="margin-left: 0;">删除</el-button>
             </div>
           </el-popover>
@@ -34,10 +34,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, inject, ref, nextTick, watchEffect } from 'vue'
+import { onMounted, inject, ref } from 'vue'
 import { getProductCardData } from '../api'
 import * as echarts from 'echarts'
 import { Edit, Delete } from '@element-plus/icons-vue'
+import emitter from '/@/utils/emitter';
 
 const profile = <any>inject('profile')
 
@@ -50,7 +51,6 @@ async function fetchProductCardData() {
   try {
     const { data } = await getProductCardData({ profileId: profile.value.profile_id })
     cardData.value = data
-    // console.log('🚀 ~ cardData.value', cardData.value)
   } catch (error) {
     console.log('error:', error)
   }
@@ -58,7 +58,7 @@ async function fetchProductCardData() {
 
 function initChart() {
   cardData.value.forEach((item, index) => {
-    const chartId = `chart${index}-${item.productlineId}`
+  const chartId = `chart${index}-${item.productlineId}`
     const el = document.getElementById(chartId)
     // const el:any = document.querySelector('#' + chartId)
     if (el) {
@@ -116,8 +116,10 @@ function initChart() {
 
 function selectCard(index: number, item: any) {
   selectedCardIndex.value = index
-  console.log('🚀 ~ selectedCardIndex.value', selectedCardIndex.value)
-  console.log('Selected card data:', item)
+}
+
+function editCard(item) {
+  emitter.emit('ProductTab-editProductCard', {isVisible: true, data: item })
 }
 
 onMounted(async () => {