上传规格

src/views/commodityManage/selectSpec.vue

+<template>
+    <el-card>
+        <h3>选择规格</h3>
+        <div>{{ data }}</div>
+        <div v-if="JSON.stringify(specData) != '[]'">
+            <div v-for="(item, i) in specData" :key="i">
+                <div style="margin-bottom: 20px;">
+                    <el-tag class="ml-2" effect="dark" size="large">{{ item.specification }}</el-tag>
+                </div>
+                <el-radio-group v-model="item.specRadio" size="small" @change="radioChange($event, item)">
+                    <el-radio-button v-for="(res, r) in item.values" :key="r" :label="res.value" />
+                </el-radio-group>
+                <!-- <el-tag v-for="(res, r) in item.values" :key="r" class="ml-2" :type="res.type"
+                    @click="productTag(item, res, i, r)">{{ res.value }}
+                </el-tag> -->
+                <el-divider />
+            </div>
+        </div>
+        <el-button v-if="JSON.stringify(specData) != '[]'" type="primary"
+            style="float: right; margin-right: 5%; margin-bottom: 20px;" @click="clickAdd">添加</el-button>
+    </el-card>
+
+    <el-card>
+        <h3>规格属性</h3>
+        <el-table :data="attributes">
+            <el-table-column label="规格属性">
+                <template #default="scope">
+                    <!-- <div>{{ scope.row }}</div> -->
+                    <el-tag v-for="(item, i) in scope.row.specifications.length" :key="i">{{
+                            scope.row.specifications[i]
+                    }}
+                    </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
+                <template #default="scope">
+                    <el-button type="danger" size="small" @click="handleAttributeDelete(scope.row)">删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-card>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, watch } from 'vue'
+
+let props = defineProps({
+    specData: {
+        type: Object,
+        default: []
+    }
+})
+
+let emits = defineEmits(['productsData'])
+
+let data = computed(() => {
+    if (JSON.stringify(props.specData) != '[]') {
+        specData.value = []
+        group(props.specData)
+    } else {
+        specData.value = []
+        attributes.value = []
+    }
+})
+
+let specList = ref([] as any)
+let attributes = ref([] as any)
+var specData = ref([] as any) //符合条件的数据
+
+watch(specData.value, (newVlaue: any) => {
+    if (JSON.stringify(newVlaue) === '[]') {
+        specData.value = []
+        attributes.value = []
+    }
+})
+
+let radioChange = (e: any, item: any) => {
+    console.log(e, item);
+    item.values.forEach((res: any) => {
+        if (specList.value.indexOf(res.value) != -1) {
+            let s = specList.value.indexOf(res.value)
+            if (specList.value[s] != e) {
+                specList.value.splice(s, 1)
+            }
+        }
+    })
+    if (specList.value.indexOf(e) == -1) specList.value.push(e)
+}
+
+let clickAdd = () => {
+    let data = {
+        id: attributes.value.length,
+        specifications: specList.value,
+        price: 0.0,
+        number: 0,
+        url: "",
+    }
+    attributes.value.push(data)
+    specList.value = []
+    specData.value = poty.value
+    emits('productsData', attributes.value)
+    console.log(attributes.value, '规格属性数据');
+}
+let handleAttributeDelete = (row: any) => {
+    let index = attributes.value.indexOf(row);
+    attributes.value.splice(index, 1);
+}
+
+// let productTag = (item: any, res: any, i: number, r: number) => {
+//     console.log(item, res, i, r);
+//     let type = specData.value[i].values[r].type
+//     if (type == 'success') {
+//         specData.value[i].values[r].type = 'info'
+//         if (specList.value.indexOf(res.value) != -1) {
+//             let s = specList.value.indexOf(res.value)
+//             specList.value.splice(s, 1)
+//             console.log(specList.value);
+//         }
+//     } else {
+//         // 判断同一级是否有重复的，只可以取一个
+//         item.values.forEach((item: any) => {
+//             if (specList.value.indexOf(item.value) != -1) {
+//                 let s = specList.value.indexOf(item.value)
+//                 specList.value.splice(s, 1)
+//                 specData.value[i].values[s].type = 'info'
+//             }
+//         })
+//         specData.value[i].values[r].type = 'success'
+//         if (specList.value.indexOf(res.value) == -1) {
+//             specList.value.push(res.value)
+//             console.log(specList.value);
+//         }
+//     }
+// }
+let poty = ref()
+
+// 把相同数据分组
+let group = (data: any) => {
+    let arr = [] as any //记录相同索引
+    let test1 = [...data] // 拷贝
+    let list = [] as any // 记录相同value
+    let spec = test1[0].specification // 记录specification
+    test1.forEach((item: any, i: number) => {
+        if (item.specification == test1[0].specification) {
+            arr.push(i)
+            list.push({
+                value: item.value,
+                type: 'info'
+            })
+        }
+    });
+    let sum = -1
+    arr.forEach((index: any) => {
+        sum++
+        if (arr.length > 1) {
+            if (index < 0) {
+                index = 0
+                test1.splice(index, 1)
+            } else {
+                index -= sum
+                test1.splice(index, 1)
+            }
+        } else {
+            test1.splice(index, 1)
+        }
+    });
+    specData.value.push({
+        specification: spec,
+        values: list,
+        specRadio: ''
+    })
+    if (test1.length === 0) return poty.value = [...specData.value]
+    else group(test1)
+}
+</script>
+ 
+<style lang="scss" scoped>
+.el-divider--horizontal {
+    margin: 12px 0 !important;
+}
+</style>
\ No newline at end of file

src/views/commodityManage/shelves.vue

@@ -102,13 +102,7 @@
                 <h3>商品规格</h3>
                 <el-row :gutter="20" type="flex" align="middle" style="padding: 20px 0">
                     <el-col :span="10">
-                        <el-radio-group v-model="multipleSpec" @change="specChanged">
-                            <!-- <el-radio-button :label="false">默认标准规格</el-radio-button> -->
-                            <el-radio-button :label="true">多规格支持</el-radio-button>
-                        </el-radio-group>
-                    </el-col>
-                    <el-col v-if="multipleSpec" :span="10">
-                        <el-button :plain="true" type="primary" @click="handleSpecificationShow">添加</el-button>
+                        <el-button type="primary" @click="handleSpecificationShow">添加</el-button>
                     </el-col>
                 </el-row>
 
@@ -126,8 +120,7 @@
                             <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40" />
                         </template>
                     </el-table-column>
-                    <el-table-column v-if="multipleSpec" align="center" label="操作" width="250"
-                        class-name="small-padding fixed-width">
+                    <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
                         <template #default="scope">
                             <el-button type="danger" size="small" @click="handleSpecificationDelete(scope.row)">删除
                             </el-button>
@@ -171,6 +164,8 @@
                 </el-dialog>
             </el-card>
 
+            <selectSpec :specData="specifications" @productsData="productsData"/>
+
             <el-card class="box-card">
                 <h3>商品参数</h3>
                 <el-button type="primary" @click="handleAttributeShow">添加</el-button>
@@ -218,6 +213,7 @@ import { ElMessageBox, ElMessage, ElNotification } from "element-plus";
 import richTextEditor from '@/components/richTextEditor.vue'
 import { listGoods } from "@/services/api/commodityManage/list";
 import { getDictList, getDictItemList } from '@/services/api/market/auxiliary'
+import selectSpec from './selectSpec.vue'
 
 let shelvesDrawer = ref(false)
 let newKeywordVisible = ref(false);
@@ -244,7 +240,6 @@ let goods = ref({
 let goodsParts = ref()
 let specVisiable = ref(false);
 let specForm = ref({ specification: "", value: "", picUrl: "" });
-let multipleSpec = ref(true);
 let specifications = ref([] as any);
 let productVisiable = ref(false);
 let productForm = ref({
@@ -319,6 +314,9 @@ let handleCancel = () => {
     attributes.value = []
     shelvesDrawer.value = false
 }
+let productsData = (data: any) => {
+    products.value = data
+}
 let handlePublish = () => {
     const finalGoods = {
         goods: goods.value,
@@ -397,15 +395,7 @@ let handleRemove = (file: any, fileList: any) => {
         }
     }
 }
-let specChanged = (label: any) => {
-    if (label === false) {
-        specifications.value = [];
-        products.value = [];
-    } else {
-        specifications.value = [];
-        products.value = [];
-    }
-}
+
 let uploadSpecPicUrl = (res: any) => {
     console.log('上传成功');
     // specForm.value.picUrl = res.data.url;
@@ -427,6 +417,14 @@ 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
@@ -451,6 +449,7 @@ let dictItemList = ref()
 let dictName = ref()
 let dictValue = ref()
 let dictChange = (id: any) => {
+    specForm.value.value = ''
     getDictItemList({ dictId: id }).then((res: any) => {
         if (res.code === 200) {
             dictItemList.value = res.data.records