菜品增加规格字段

src/views/dish/lists/edit.vue

@@ -71,6 +71,54 @@
                                 </div>
                             </div>
                         </el-form-item>
+                      <el-form-item label="菜品规格" prop="specs">
+                          <div class="w-full block mb-4">
+                            <el-button type="primary" @click="handleSpecs">+</el-button>
+                          </div>
+                          <div class="flex flex-col gap-4">
+                            <div v-for="(spec, index) in formData.specs" :key="index" class="w-full">
+                                <div class="flex items-center">
+                                    <el-input
+                                        v-model="spec.name"
+                                        placeholder="请输入规格名称"
+                                        class="w-60 mr-2"
+                                    />
+<!--                                    <el-button type="primary" @click="handleSpecs()">添加规格项</el-button>-->
+                                    <el-button type="danger" @click="removeSpec(index)">删除</el-button>
+                                </div>
+
+                                <div class="mt-2 ml-4">
+                                    <el-tag
+                                        v-for="(tag, idx) in spec.items"
+                                        :key="idx"
+                                        class="mx-1 mb-2"
+                                        closable
+                                        :disable-transitions="false"
+                                        @close="handleClose(index, idx)"
+                                    >
+                                        {{ tag.tag }}
+                                    </el-tag>
+                                    <el-input
+                                        v-if="spec.inputVisible"
+                                        ref="InputRef"
+                                        v-model="spec.inputValue"
+                                        class="w-20 ml-1"
+                                        size="small"
+                                        @keyup.enter="handleInputConfirm(index)"
+                                        @blur="handleInputConfirm(index)"
+                                    />
+                                    <el-button
+                                        v-else
+                                        class="button-new-tag ml-1"
+                                        size="small"
+                                        @click="showInput(index)"
+                                    >
+                                        + 添加
+                                    </el-button>
+                                </div>
+                            </div>
+                        </div>
+                      </el-form-item>
                         <el-form-item label="排序" prop="sort">
                             <div>
                                 <el-input-number v-model="formData.sort" :min="0" :max="9999" />
@@ -113,7 +161,8 @@ const formData = reactive<any>({
     visit: 0,
     sort: 0,
     isShow: 1,
-    summary: 0
+    summary: 0,
+    specs: [] // 规格
 })
 
 const { removeTab } = useMultipleTabs()
@@ -125,6 +174,7 @@ const rules = reactive({
     image: [{ required: true, message: '添加菜品图片', trigger: 'change' }]
 })
 
+// getDetails 函数修改
 const getDetails = async () => {
     const data = await articleDetail({
         id: route.query.id
@@ -136,6 +186,26 @@ const getDetails = async () => {
             formData[key] = Number(formData[key])
         }
     })
+
+    // 转换规格数据
+    if (data.specsList && data.specsList.length > 0) {
+        const specsMap = new Map()
+        data.specsList.forEach((spec: { name: string; value: string; id: number }) => {
+            if (!specsMap.has(spec.name)) {
+                specsMap.set(spec.name, {
+                    name: spec.name,
+                    items: [],
+                    inputVisible: false,
+                    inputValue: ''
+                })
+            }
+            specsMap.get(spec.name).items.push({
+                id: spec.id,
+                tag: spec.value
+            })
+        })
+        formData.specs = Array.from(specsMap.values())
+    }
 }
 
 const { optionsData } = useDictOptions<{
@@ -148,10 +218,40 @@ const { optionsData } = useDictOptions<{
 
 const handleSave = async () => {
     await formRef.value?.validate()
+    if (formData.specs.length >= 5) {
+        feedback.msgWarning('最多添加5个规格')
+        return
+    }
+    const specsList: Array<{
+        name: string;
+        value: string;
+        status: number;
+        articleId: number | null;
+        id: number | null;
+        img: string | null;
+    }> = [];
+    formData.specs.forEach((spec: { name: string; items: Array<{id: number|null, tag: string}> }) => {
+        spec.items.forEach(item => {
+            specsList.push({
+                name: spec.name,
+                value: item.tag,
+                status: 1,
+                articleId: formData.id || null,
+                id: item.id || null,
+                img: null
+            })
+        })
+    })
+
+    const submitData = {
+        ...formData,
+        specsList
+    }
+
     if (route.query.id) {
-        await articleEdit(formData)
+        await articleEdit(submitData)
     } else {
-        await articleAdd(formData)
+        await articleAdd(submitData)
     }
     feedback.msgSuccess('操作成功')
     removeTab()
@@ -159,4 +259,55 @@ const handleSave = async () => {
 }
 
 route.query.id && getDetails()
+
+// 添加规格
+const handleSpecs = () => {
+    if (!formData.specs) {
+        formData.specs = []
+    }
+    formData.specs.push({
+        name: '',
+        items: [],
+        inputVisible: false,
+        inputValue: ''
+    })
+}
+
+// 删除规格
+const removeSpec = (index: number) => {
+    formData.specs.splice(index, 1)
+}
+
+// 显示输入框
+const showInput = (specIndex: number) => {
+    formData.specs[specIndex].inputVisible = true
+    nextTick(() => {
+        InputRef.value?.input?.focus()
+    })
+}
+
+// 确认输入
+const handleInputConfirm = (specIndex: number) => {
+    const spec = formData.specs[specIndex]
+    if (spec.inputValue) {
+        spec.items.push({
+            id: null,
+            tag: spec.inputValue
+        })
+    }
+    spec.inputVisible = false
+    spec.inputValue = ''
+}
+
+// 删除标签
+const handleClose = (specIndex: number, tagIndex: number) => {
+    formData.specs[specIndex].items.splice(tagIndex, 1)
+}
+
+// 添加规格项
+const handleAddSpecItem = (index: number) => {
+    showInput(index)
+}
+
+const InputRef = ref()
 </script>