添加商品属性编辑功能

src/views/commodityManage/components/addSpecifications.vue

 <template>
-    <el-dialog v-model="showVisiable" title="添加规格属性" width="30%" :before-close="handleClose">
+    <el-dialog v-model="showVisiable" :title="title" width="30%" :before-close="handleClose">
         <el-form ref="formRef" :rules="rules" :model="formData" status-icon label-position="left" label-width="120px">
             <el-form-item label="BOM编码" prop="bomCode">
                 <el-input v-model="formData.bomCode" />
@@ -21,9 +21,10 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
 
-let emits = defineEmits(['clickAdd'])
+let emits = defineEmits(['clickAdd', 'clickEdit'])
 let showVisiable = ref(false)
 let formRef = ref()
+let title = ref('添加规格属性')
 let rules = ref({
     bomCode: { required: true, message: '', trigger: 'blur' },
     model: { required: true, message: '', trigger: 'blur' },
@@ -38,8 +39,13 @@ let formData = ref({
 let handleAdd = () => {
     formRef.value?.validate((valid: boolean) => {
         if (valid) {
-            showVisiable.value = false
-            emits('clickAdd', formData.value)
+            if (title.value === '添加规格属性') {
+                showVisiable.value = false
+                emits('clickAdd', formData.value)
+            } else {
+                showVisiable.value = false
+                emits('clickEdit', formData.value)
+            }
         }
     })
 }
@@ -55,6 +61,7 @@ let handleClose = () => {
 defineExpose({
     showVisiable,
     formData,
+    title,
     handleClose
 })
 </script>

src/views/commodityManage/components/selectSpec.vue

@@ -44,8 +44,10 @@
                     </el-tag>
                 </template>
             </el-table-column>
-            <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
+            <el-table-column align="center" label="操作" width="155" class-name="small-padding fixed-width">
                 <template #default="scope">
+                    <el-button type="primary" size="small" @click="handleAttributeEdit(scope.$index, scope.row)">编辑
+                    </el-button>
                     <el-button type="danger" size="small" @click="handleAttributeDelete(scope.row)">删除
                     </el-button>
                 </template>
@@ -53,7 +55,7 @@
         </el-table>
     </el-card>
 
-    <add-specifications ref="specificationsRef" @clickAdd="clickAdd" />
+    <add-specifications ref="specificationsRef" @clickAdd="clickAdd" @clickEdit="clickEdit" />
 </template>
 
 <script setup lang='ts'>
@@ -164,12 +166,13 @@ let radioChange = (e: any, item: any) => {
 // 打开添加规格属性框
 let showAddSpec = () => {
     if (specList.value.length === 0) return ElMessage({ type: 'warning', message: '请先选择规格属性' })
-    specificationsRef.value.showVisiable = true
     specificationsRef.value.formData = {
         bomCode: '',
         model: '',
         productName: ''
     }
+    specificationsRef.value.title = '添加规格属性'
+    specificationsRef.value.showVisiable = true
 }
 
 // 添加规格属性
@@ -189,12 +192,27 @@ let clickAdd = (formData: any) => {
     emits('productsData', specificationData.value)
     // console.log(attributes.value, '规格属性数据');
 }
+
+let clickEdit = (formData: any) => {
+    if (typeof formData.updateTime !== 'undefined') formData.updateTime = null
+    specificationData.value[editIndex.value] = formData
+
+}
+
+let editIndex = ref() //编辑规格的下标
+// 修改规格属性数据
+let handleAttributeEdit = (index: number, row: any) => {
+    specificationsRef.value.formData = row
+    editIndex.value = index
+    specificationsRef.value.title = '编辑规格属性'
+    specificationsRef.value.showVisiable = true
+}
+
 // 删除规格属性数据
 let handleAttributeDelete = (row: any) => {
     let index = specificationData.value.indexOf(row);
     let deleteIndexData: any = {} // 记录要被删除的数据
-    console.log(specificationData.value[index].deleted, 'specificationData.value[index].deleted');
-
+    // console.log(specificationData.value[index].deleted, 'specificationData.value[index].deleted');
     if (typeof specificationData.value[index].deleted !== 'undefined') { // deleted标为ture即为删除
         deleteIndexData = specificationData.value[index] // 记录要被删除的数据
         deleteIndexData.deleted = true

src/views/commodityManage/edit.vue

@@ -577,6 +577,8 @@ let handleSpecificationClose = () => {
     specForm.value.value = specForm.value.value[0]
     specForm.value.customSpec = dictTableIndexSwitch.value
     specifications.value[dictTableIndex.value] = specForm.value
+    dictName.value = null
+    dictValue.value = null
     specVisiable.value = false;
 }
 let handleSpecificationAdd = () => {
@@ -587,13 +589,25 @@ let handleSpecificationAdd = () => {
         })
         if (dictValue.value) {
             for (let s of dictValue.value) {
+                for (let i of specifications.value) {
+                    if (s == i.value) {
+                        return ElMessage({
+                            type: 'warning',
+                            message: '已存在 ' + s + ' 规格值'
+                        })
+                    }
+                }
                 specifications.value.push({
                     specification: dictName.value,
                     value: s,
                     customSpec: dictSwitch.value
                 })
             }
+            dictValue.value = null
+            dictName.value = null
+            specForm.value = { specification: "", value: "", picUrl: "", customSpec: false }
             specVisiable.value = false;
+            dictSwitch.value = false
         } else {
             ElMessage({
                 type: 'warning',

src/views/commodityManage/shelves.vue

@@ -437,7 +437,9 @@ let handleSpecificationAdd = () => {
                     customSpec: dictSwitch.value
                 })
             }
-            specForm.value.customSpec = false
+            dictValue.value = null
+            dictName.value = null
+            specForm.value = { specification: "", value: "", picUrl: "", customSpec: false }
             specVisiable.value = false;
             dictSwitch.value = false
         } else {
@@ -446,7 +448,7 @@ let handleSpecificationAdd = () => {
                 message: '请选择规格值'
             })
         }
-    } else {
+    } else { // 编辑
         specForm.value.value = specForm.value.value[0]
         specifications.value[dictTableIndex.value] = specForm.value
         specifications.value?.forEach((item: any) => {
@@ -464,6 +466,8 @@ let handleSpecificationClose = () => {
     specForm.value.value = specForm.value.value[0]
     specForm.value.customSpec = dictTableIndexSwitch.value
     specifications.value[dictTableIndex.value] = specForm.value
+    dictValue.value = null
+    dictName.value = null
     specVisiable.value = false;
 }