添加原料按钮实现

src/components/feed/RawMaterialForm.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
+    <el-form-item label="原料名称" prop="name">
+      <el-input v-model="formData.name" placeholder="请输入原料名称"></el-input>
+    </el-form-item>
+    <el-form-item label="描述" prop="description">
+      <el-input
+        v-model="formData.description"
+        type="textarea"
+        :rows="3"
+        placeholder="请输入原料描述"
+      ></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm">提交</el-button>
+      <el-button @click="cancelForm">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { ref, reactive, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+
+export default {
+  name: 'RawMaterialForm',
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    initialData: {
+      type: Object,
+      default: () => ({
+        name: '',
+        description: '',
+      }),
+    },
+  },
+  emits: ['submit', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const formData = reactive({
+      name: '',
+      description: '',
+    });
+
+    // 监听 initialData 变化，用于编辑模式下初始化表单
+    watch(
+      () => props.initialData,
+      (newVal) => {
+        if (newVal) {
+          formData.name = newVal.name || '';
+          formData.description = newVal.description || '';
+        }
+      },
+      { immediate: true, deep: true }
+    );
+
+    const rules = {
+      name: [
+        { required: true, message: '请输入原料名称', trigger: 'blur' },
+        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
+      ],
+    };
+
+    const submitForm = () => {
+      formRef.value.validate((valid) => {
+        if (valid) {
+          emit('submit', { ...formData });
+        } else {
+          ElMessage.error('请检查表单项');
+          return false;
+        }
+      });
+    };
+
+    const cancelForm = () => {
+      emit('cancel');
+      resetForm();
+    };
+
+    const resetForm = () => {
+      formRef.value.resetFields();
+      // 手动重置 formData，因为 resetFields 不会重置未绑定 prop 的字段
+      formData.name = '';
+      formData.description = '';
+    };
+
+    return {
+      formRef,
+      formData,
+      rules,
+      submitForm,
+      cancelForm,
+      resetForm,
+    };
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/views/feed/RawMaterialList.vue

@@ -14,22 +14,44 @@
       </template>
       <raw-material-table ref="rawMaterialTableRef"></raw-material-table>
     </el-card>
+
+    <!-- 添加/编辑原料弹窗 -->
+    <el-dialog
+      v-model="showDialog"
+      :title="formTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      @close="handleCancel"
+    >
+      <raw-material-form
+        ref="rawMaterialFormRef"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      ></raw-material-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { ref } from 'vue';
 import { Refresh } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
 import RawMaterialTable from '../../components/feed/RawMaterialTable.vue';
+import RawMaterialForm from '../../components/feed/RawMaterialForm.vue';
+import { FeedApi } from '../../api/feed';
 
 export default {
   name: 'RawMaterialList',
   components: {
     RawMaterialTable,
     Refresh,
+    RawMaterialForm,
   },
   setup() {
     const rawMaterialTableRef = ref(null);
+    const rawMaterialFormRef = ref(null); // 用于引用 RawMaterialForm 组件
+    const showDialog = ref(false);
+    const formTitle = ref('添加原料');
 
     const refreshList = () => {
       if (rawMaterialTableRef.value) {
@@ -38,14 +60,41 @@ export default {
     };
 
     const addRawMaterial = () => {
-      // 待实现
+      formTitle.value = '添加原料';
-      console.log('add raw material');
+      showDialog.value = true;
+      // 确保在 dialog 显示后，表单组件被渲染，然后调用 resetForm
+      if (rawMaterialFormRef.value) {
+        rawMaterialFormRef.value.resetForm();
+      }
+    };
+
+    const handleSubmit = async (formData) => {
+      try {
+        await FeedApi.createRawMaterial(formData);
+        ElMessage.success('原料添加成功');
+        refreshList(); // 刷新列表
+        showDialog.value = false; // 关闭弹窗
+      } catch (error) {
+        ElMessage.error('原料添加失败: ' + (error.message || '未知错误'));
+      }
+    };
+
+    const handleCancel = () => {
+      showDialog.value = false;
+      if (rawMaterialFormRef.value) {
+        rawMaterialFormRef.value.resetForm(); // 关闭时重置表单
+      }
     };
 
     return {
       rawMaterialTableRef,
+      rawMaterialFormRef,
+      showDialog,
+      formTitle,
       refreshList,
       addRawMaterial,
+      handleSubmit,
+      handleCancel,
     };
   },
 };
@@ -99,4 +148,4 @@ export default {
     gap: 15px;
   }
 }
-</style>
+</style>