init

src/views/dish/add.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="dish-form">
+    <h2>新增菜品</h2>
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      class="form"
+    >
+      <el-form-item label="菜品名称" prop="dishName">
+        <el-input v-model="form.dishName" placeholder="请输入菜品名称" />
+      </el-form-item>
+
+      <el-form-item label="菜品分类" prop="dishType">
+        <el-select v-model="form.dishType" placeholder="请选择分类">
+          <el-option
+            v-for="item in dishTypes"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="价格" prop="dishPrice">
+        <el-input-number
+          v-model="form.dishPrice"
+          :precision="2"
+          :step="0.1"
+          :min="0"
+        />
+      </el-form-item>
+
+      <el-form-item label="配料" prop="dishIngredients">
+        <el-input
+          v-model="form.dishIngredients"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入配料"
+        />
+      </el-form-item>
+
+      <el-form-item label="图片" prop="dishImage">
+        <el-upload
+          class="avatar-uploader"
+          :http-request="handleUpload"
+          :show-file-list="false"
+          :before-upload="beforeUpload"
+        >
+          <img v-if="form.dishImage" :src="form.dishImage" class="avatar" />
+          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">提交</el-button>
+        <el-button @click="$router.back()">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import { addDish } from '@/api/dish'
+
+const router = useRouter()
+const formRef = ref(null)
+
+const dishTypes = [
+  { label: '热菜过油', value: '1' },
+  { label: '热菜不过油', value: '2' },
+  { label: '素菜', value: '3' },
+  { label: '凉菜', value: '4' },
+  { label: '汤', value: '5' }
+]
+
+const form = ref({
+  dishName: '',
+  dishType: '',
+  dishPrice: 0,
+  dishIngredients: '',
+  dishImage: ''
+})
+
+const rules = {
+  dishName: [
+    { required: true, message: '请输入菜品名称', trigger: 'blur' }
+  ],
+  dishType: [
+    { required: true, message: '请选择菜品分类', trigger: 'change' }
+  ],
+  dishPrice: [
+    { required: true, message: '请输入价格', trigger: 'blur' }
+  ]
+}
+
+const handleUpload = async (options) => {
+  const file = options.file
+  // 这里可以使用FileReader读取文件并预览
+  const reader = new FileReader()
+  reader.readAsDataURL(file)
+  reader.onload = () => {
+    form.value.dishImage = reader.result // 保存为base64格式
+  }
+  // 如果需要上传到服务器，可以在提交表单时一起处理
+  // 现在我们直接在本地预览
+}
+
+const beforeUpload = (file) => {
+  const isImage = file.type.startsWith('image/')
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件!')
+    return false
+  }
+  if (!isLt2M) {
+    ElMessage.error('图片大小不能超过 2MB!')
+    return false
+  }
+  return true
+}
+
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    await addDish(form.value)
+    ElMessage.success('添加成功')
+    router.push('/dish/list')
+  } catch (error) {
+    console.error(error)
+  }
+}
+</script>
+
+<style scoped>
+.dish-form {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.form {
+  margin-top: 20px;
+}
+
+.avatar-uploader {
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 178px;
+  height: 178px;
+}
+
+.avatar-uploader:hover {
+  border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+  line-height: 178px;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+  object-fit: cover;
+}
+</style>