增加原料管理界面

2025-11-21 16:57:50 +08:00
parent f925df405f
commit 733c346887
4 changed files with 314 additions and 4 deletions
--- a/src/components/feed/RawMaterialTable.vue
+++ b/src/components/feed/RawMaterialTable.vue
@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <!-- 原料列表 -->
+    <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id"
+              :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div style="padding: 10px 20px;">
+            <h4>营养成分</h4>
+            <el-table :data="props.row.raw_material_nutrients" border>
+              <el-table-column prop="nutrient_name" label="营养名称"></el-table-column>
+              <el-table-column prop="value" label="含量"></el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="原料名称"></el-table-column>
+      <el-table-column prop="description" label="描述"></el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+        style="margin-top: 20px;"
+        :current-page="pagination.page"
+        :page-size="pagination.page_size"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import {ref, onMounted, defineExpose} from 'vue';
+import {FeedApi} from '../../api/feed';
+import {ElMessageBox, ElMessage} from 'element-plus';
+
+export default {
+  name: 'RawMaterialTable',
+  setup() {
+    const tableData = ref([]);
+    const loading = ref(false);
+    const searchKeyword = ref('');
+    const searchType = ref('rawMaterial');
+    const expandRowKeys = ref([]);
+
+    const pagination = ref({
+      page: 1,
+      page_size: 10,
+      total: 0,
+    });
+
+    const fetchRawMaterials = async () => {
+      loading.value = true;
+      try {
+        let response;
+        if (searchType.value === 'rawMaterial') {
+          response = await FeedApi.getRawMaterials({
+            name: searchKeyword.value,
+            page: pagination.value.page,
+            page_size: pagination.value.page_size,
+          });
+        } else {
+          const nutrientResponse = await FeedApi.getNutrients({
+            name: searchKeyword.value,
+            page: pagination.value.page,
+            page_size: pagination.value.page_size,
+          });
+          // 从营养数据中提取原料
+          const rawMaterials = [];
+          if (nutrientResponse.data && nutrientResponse.data.list) {
+            nutrientResponse.data.list.forEach(nutrient => {
+              if (nutrient.raw_materials) {
+                nutrient.raw_materials.forEach(rm => {
+                  // 避免重复添加
+                  if (!rawMaterials.some(item => item.id === rm.id)) {
+                    rawMaterials.push({
+                      id: rm.id,
+                      name: rm.name,
+                      // 模拟其他字段
+                      description: '通过营养搜索',
+                      raw_material_nutrients: []
+                    });
+                  }
+                });
+              }
+            });
+          }
+           response = { data: { list: rawMaterials, pagination: { total: rawMaterials.length } } };
+        }
+
+        if (response.data) {
+          tableData.value = response.data.list;
+          pagination.value.total = response.data.pagination.total;
+        }
+      } catch (error) {
+        console.error('获取原料列表失败:', error);
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    const handleSearch = () => {
+      pagination.value.page = 1;
+      fetchRawMaterials();
+    };
+
+    const handleSizeChange = (size) => {
+      pagination.value.page_size = size;
+      fetchRawMaterials();
+    };
+
+    const handleCurrentChange = (page) => {
+      pagination.value.page = page;
+      fetchRawMaterials();
+    };
+
+    const handleExpandChange = async (row, expandedRows) => {
+      const isExpanded = expandedRows.some(r => r.id === row.id);
+      if (isExpanded && row.raw_material_nutrients.length === 0) {
+        try {
+          const response = await FeedApi.getRawMaterialById(row.id);
+          if (response.data) {
+            const index = tableData.value.findIndex(item => item.id === row.id);
+            if (index !== -1) {
+              tableData.value[index].raw_material_nutrients = response.data.raw_material_nutrients;
+            }
+          }
+        } catch (error) {
+          console.error('获取原料详情失败:', error);
+        }
+      }
+    };
+
+    const handleDelete = (row) => {
+      ElMessageBox.confirm(
+          `确定要删除原料 "${row.name}" 吗？`,
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+      ).then(async () => {
+        try {
+          await FeedApi.deleteRawMaterial(row.id);
+          ElMessage.success('删除成功');
+          await fetchRawMaterials();
+        } catch (error) {
+          ElMessage.error('删除失败: ' + (error.message || '未知错误'));
+        }
+      }).catch(() => {
+        // 用户取消操作
+      });
+    };
+
+    onMounted(() => {
+      fetchRawMaterials();
+    });
+
+    defineExpose({
+      fetchRawMaterials,
+    });
+
+    return {
+      tableData,
+      loading,
+      searchKeyword,
+      searchType,
+      pagination,
+      expandRowKeys,
+      handleSearch,
+      handleSizeChange,
+      handleCurrentChange,
+      handleExpandChange,
+      handleEdit: (row) => console.log('edit', row),
+      handleDelete,
+    };
+  },
+};
+</script>