编辑按钮实现

src/components/feed/RawMaterialTable.vue

@@ -60,7 +60,8 @@ import {ElMessageBox, ElMessage} from 'element-plus';
 
 export default {
   name: 'RawMaterialTable',
-  setup() {
+  emits: ['edit'], // 声明触发的事件
+  setup(props, { emit }) {
     const tableData = ref([]);
     const loading = ref(false);
     const searchKeyword = ref('');
@@ -155,6 +156,10 @@ export default {
       });
     };
 
+    const handleEdit = (row) => {
+      emit('edit', row); // 触发 edit 事件，并传递当前行数据
+    };
+
     onMounted(() => {
       fetchRawMaterials();
     });
@@ -170,10 +175,10 @@ export default {
       handleSizeChange,
       handleCurrentChange,
       handleExpandChange,
-      handleEdit: (row) => console.log('edit', row),
+      handleEdit,
       handleDelete,
       fetchRawMaterials, // 将方法暴露出去
     };
   },
 };
-</script>
+</script>

src/views/feed/RawMaterialList.vue

@@ -9,10 +9,11 @@
               <el-icon :size="20"><Refresh /></el-icon>
             </el-button>
           </div>
-          <el-button type="primary" @click="addRawMaterial">添加原料</el-button>
+          <el-button type="primary" @click="handleAddRawMaterial">添加原料</el-button>
         </div>
       </template>
-      <raw-material-table ref="rawMaterialTableRef"></raw-material-table>
+      <!-- 确保只有一个 raw-material-table 实例，并正确绑定事件 -->
+      <raw-material-table ref="rawMaterialTableRef" @edit="handleEdit"></raw-material-table>
     </el-card>
 
     <!-- 添加/编辑原料弹窗 -->
@@ -23,8 +24,12 @@
       :close-on-click-modal="false"
       @close="handleCancel"
     >
+      <!-- 只有在弹窗显示时才渲染表单组件，并传递编辑状态和初始数据 -->
       <raw-material-form
+        v-if="showDialog"
         ref="rawMaterialFormRef"
+        :isEdit="isEditMode"
+        :initialData="currentEditData"
         @submit="handleSubmit"
         @cancel="handleCancel"
       ></raw-material-form>
@@ -33,7 +38,7 @@
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue'; // 导入 nextTick
 import { Refresh } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import RawMaterialTable from '../../components/feed/RawMaterialTable.vue';
@@ -51,6 +56,8 @@ export default {
     const rawMaterialTableRef = ref(null);
     const rawMaterialFormRef = ref(null); // 用于引用 RawMaterialForm 组件
     const showDialog = ref(false);
+    const isEditMode = ref(false); // 标识当前是新增模式还是编辑模式
+    const currentEditData = ref(null); // 存储当前正在编辑的原料数据
     const formTitle = ref('添加原料');
 
     const refreshList = () => {
@@ -59,31 +66,56 @@ export default {
       }
     };
 
-    const addRawMaterial = () => {
+    // 处理添加原料按钮点击事件
+    const handleAddRawMaterial = () => {
       formTitle.value = '添加原料';
+      isEditMode.value = false; // 新增模式
+      currentEditData.value = null; // 清空编辑数据
       showDialog.value = true;
-      // 确保在 dialog 显示后，表单组件被渲染，然后调用 resetForm
-      if (rawMaterialFormRef.value) {
-        rawMaterialFormRef.value.resetForm();
-      }
+      // 在 nextTick 中执行，确保 DOM 更新完成，表单组件被渲染后才调用 resetForm
+      nextTick(() => {
+        rawMaterialFormRef.value?.resetForm();
+      });
     };
 
+    // 处理编辑按钮点击事件
+    const handleEdit = (row) => {
+      formTitle.value = '编辑原料';
+      isEditMode.value = true; // 编辑模式
+      currentEditData.value = { ...row }; // 存储当前编辑数据，进行深拷贝
+      showDialog.value = true;
+    };
+
+    // 处理表单提交
     const handleSubmit = async (formData) => {
       try {
-        await FeedApi.createRawMaterial(formData);
-        ElMessage.success('原料添加成功');
+        let message = '';
+        if (isEditMode.value) {
+          // 编辑模式
+          await FeedApi.updateRawMaterial(currentEditData.value.id, formData);
+          message = '原料更新成功';
+        } else {
+          // 新增模式
+          await FeedApi.createRawMaterial(formData);
+          message = '原料添加成功';
+        }
+        ElMessage.success(message);
         refreshList(); // 刷新列表
         showDialog.value = false; // 关闭弹窗
       } catch (error) {
-        ElMessage.error('原料添加失败: ' + (error.message || '未知错误'));
+        ElMessage.error('操作失败: ' + (error.message || '未知错误'));
       }
     };
 
+    // 处理弹窗取消或关闭
     const handleCancel = () => {
       showDialog.value = false;
+      // 关闭弹窗时重置表单和编辑状态
       if (rawMaterialFormRef.value) {
-        rawMaterialFormRef.value.resetForm(); // 关闭时重置表单
+        rawMaterialFormRef.value.resetForm();
       }
+      isEditMode.value = false;
+      currentEditData.value = null;
     };
 
     return {
@@ -91,8 +123,11 @@ export default {
       rawMaterialFormRef,
       showDialog,
       formTitle,
+      isEditMode,
+      currentEditData,
       refreshList,
-      addRawMaterial,
+      handleAddRawMaterial,
+      handleEdit,
       handleSubmit,
       handleCancel,
     };