perf: 商品编辑完成

src/views/goods/commodity/detail-dialog/edit-method.ts

@@ -87,10 +87,10 @@ export const handleGetNewAdminCategoryData = (data: any) => {
 export const handleGetNewSkuList = (data: any) => {
   return data.map((item: any) => ({
     ...item,
-    name: item.vvSkuPropertyValueList.reduce((str: string, cur: any) => {
+    name: item.vvSkuPropertyValueList.reduce((str: string, cur: any, index: number) => {
       cur.categoryPropertyName = cur.productPropertyName
       cur.categoryPropertyValue = cur.productPropertyValue
-      str += cur.productPropertyValue
+      str += index === 0 ? cur.productPropertyValue : '-' + cur.productPropertyValue
       return str
     }, '')
   }))

src/views/goods/commodity/detail-dialog/index.vue

@@ -103,24 +103,51 @@
             trigger="click"
           >
             <template #reference>
-              <el-button type="primary" class="ml-2 !text-white" @click="visiblePropertyLine = true"
+              <el-button type="primary" class="ml-2 !text-white" @click="onClickAddPropertyTypeBtn"
                 >新增属性类型</el-button
               >
             </template>
-            <el-input v-model="inputPropertyLineValue" @keyup.enter="onAddPropertyLine"></el-input>
+            <el-input
+              ref="propertyTypeInputRef"
+              v-model="inputPropertyLineValue"
+              @keyup.enter="onAddPropertyLine($dialog.data.adminCategoryId, inputPropertyLineValue)"
+              @blur="visiblePropertyLine = false"
+            ></el-input>
           </el-popover>
         </el-form-item>
       </el-form>
       <div ref="dragRef">
         <dl v-for="(item, index) in adminCategoryData" :key="item.id" class="flex items-center">
-          <dt class="text-sm text-[#666] mb-2">{{ item.categoryPropertyName }}：</dt>
+          <dt class="text-sm text-[#666] mb-2">
+            <span v-if="editPropertyTypeIndex !== index">{{ item.categoryPropertyName }}</span>
+            <el-input
+              ref="editPropertyTypeInputRef"
+              v-else
+              v-model="editPropertyTypeValue"
+              size="small"
+              class="w-20"
+              @keyup.enter="handleEditPropertyTypeConfirm(item)"
+              @blur="editPropertyTypeIndex = NaN"
+            />：
+          </dt>
           <dd class="flex mb-2">
             <div v-for="child in item.vvPropertyValueList" :key="item.id + '-' + child.id">
+              <el-input
+                v-if="curPropertyValueId === item.id + '-' + child.id"
+                ref="editPropertyValueInputRef"
+                class="w-20"
+                size="small"
+                v-model="inputEditPropertyValue"
+                @keyup.enter="onEditPropertyValue(child, skuList)"
+                @blur="curPropertyValueId = ''"
+              ></el-input>
               <el-tag
+                v-else
                 closable
                 effect="plain"
                 :type="colors[index % 4]"
                 class="mr-1"
+                @click="onClickPropertyValue(item, child)"
                 @close="onDeletePropertyValue(index, child.id)"
                 >{{ child.categoryPropertyValue }}</el-tag
               >
@@ -136,12 +163,29 @@
             />
             <el-button
               v-else
-              class="button-new-tag ml-1"
+              type="primary"
+              class="button-new-tag ml-1 !text-white"
               size="small"
               @click="onAddPropertyValue(index)"
             >
               + 新增
             </el-button>
+            <el-button
+              type="warning"
+              class="button-new-tag ml-1 !text-white"
+              size="small"
+              @click="onEditPropertyTypeBtn(index)"
+            >
+              修改属性
+            </el-button>
+            <el-button
+              type="danger"
+              class="button-new-tag ml-1 !text-white"
+              size="small"
+              @click="onDeletePropertyTypeBtn(index, adminCategoryData, skuList)"
+            >
+              删除属性
+            </el-button>
           </dd>
         </dl>
       </div>
@@ -189,6 +233,19 @@ import {
   handleGetNewSkuList
 } from './edit-method'
 import { handleValidFormData, handleGetSubmitParams } from './submit-method'
+import {
+  editPropertyTypeIndex,
+  editPropertyTypeValue,
+  editPropertyTypeInputRef,
+  onEditPropertyTypeBtn,
+  handleEditPropertyTypeConfirm,
+  onDeletePropertyTypeBtn,
+  inputEditPropertyValue,
+  editPropertyValueInputRef,
+  onClickPropertyValue,
+  onEditPropertyValue,
+  curPropertyValueId
+} from './init-method'
 import categoryConfig from './category-config.vue'
 import wanEditor from './editor.vue'
 import fileUploadBtn from '@/components/FileUploadBtn/index.vue'
@@ -258,6 +315,14 @@ const htmlContent = ref('自定义')
 const onDeletePropertyValue = (index: number, id: number) =>
   onClosePropertyValue(index, id, skuList)
 
+const propertyTypeInputRef = ref()
+const onClickAddPropertyTypeBtn = () => {
+  visiblePropertyLine.value = true
+  nextTick(() => {
+    propertyTypeInputRef.value.input!.focus()
+  })
+}
+
 const router = useRouter()
 const onSubmit = () => {
   const msg = handleValidFormData(
@@ -285,6 +350,7 @@ const onSubmit = () => {
     console.warn('----- my data is res: ', res)
   })
 }
+
 init()
 </script>
 

src/views/goods/commodity/detail-dialog/init-method.ts

@@ -0,0 +1,37 @@
+export const editPropertyTypeIndex = ref(NaN)
+export const editPropertyTypeValue = ref('')
+export const editPropertyTypeInputRef = ref()
+export const onEditPropertyTypeBtn = (index: number) => {
+  editPropertyTypeIndex.value = index
+  nextTick(() => {
+    editPropertyTypeInputRef.value[0].input!.focus()
+  })
+}
+
+export const handleEditPropertyTypeConfirm = async (item: any) => {
+  item.categoryPropertyName = editPropertyTypeValue.value
+  editPropertyTypeIndex.value = NaN
+}
+
+export const onDeletePropertyTypeBtn = (index: number, adminCategoryData: any, skuList: any) => {
+  adminCategoryData.splice(index, 1)
+  skuList.length = 0
+}
+
+export const curPropertyValueId = ref('')
+export const inputEditPropertyValue = ref('')
+export const editPropertyValueInputRef = ref()
+
+export const onClickPropertyValue = (item: any, child: any) => {
+  curPropertyValueId.value = item.id + '-' + child.id
+  inputEditPropertyValue.value = child.categoryPropertyValue
+  nextTick(() => {
+    editPropertyValueInputRef.value[0].input!.focus()
+  })
+}
+
+export const onEditPropertyValue = (child: any, skuList: any) => {
+  child.categoryPropertyValue = inputEditPropertyValue.value
+  curPropertyValueId.value = ''
+  inputEditPropertyValue.value = ''
+}

src/views/goods/commodity/detail-dialog/use-method.ts

@@ -104,18 +104,20 @@ export const usePropertyValue = () => {
   const handleInputConfirm = (lineIndex: number, skuList: TSkuList[] = []) => {
     if (inputValue.value) {
       const id = Math.random()
-      adminCategoryData[lineIndex].vvPropertyValueList.push({
+      const newData = {
         id,
+        categoryPropertyName: adminCategoryData[lineIndex].categoryPropertyName,
         categoryPropertyValue: inputValue.value,
         isAdd: true
+      }
+      adminCategoryData[lineIndex].vvPropertyValueList.push({ ...newData })
+      if (skuList?.length && skuList[0].vvSkuPropertyValueList.length < adminCategoryData.length) {
+        skuList.forEach((item: TSkuList) => {
+          item.name += '-' + inputValue.value
+          item.vvSkuPropertyValueList.push({ ...newData })
         })
-      skuList.push(
-        ...generateAddSkuList(
-          lineIndex,
-          { id, categoryPropertyValue: inputValue.value },
-          adminCategoryData
-        )
-      )
+      }
+      skuList.push(...generateAddSkuList(lineIndex, { ...newData }, adminCategoryData))
     }
     inputVisibles.value[lineIndex] = false
     inputValue.value = ''
@@ -159,12 +161,13 @@ export const usePropertyValue = () => {
     console.warn('----- my data is result111: ', result)
     return result
   }
-  const onAddPropertyLine = () => {
+  const onAddPropertyLine = (categoryId: number, val: string) => {
     visiblePropertyLine.value = false
+    console.warn('----- my data is inputPropertyLineValue: ', val)
     adminCategoryData.push({
       id: Math.random(),
-      categoryId: 17,
-      categoryName: '',
+      categoryId,
+      categoryName: val,
       visiblePropertyLine,
       categoryPropertyName: inputPropertyLineValue.value,
       vvPropertyValueList: []