增加原料管理界面

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>

src/layouts/MainLayout.vue

@@ -17,7 +17,7 @@
           :collapse="isCollapse"
           :collapse-transition="false"
           router
-          :default-openeds="['/device-management', '/monitor', '/pms', '/alarm']"
+          :default-openeds="['/device-management', '/monitor', '/pms', '/alarm', '/feed']"
       >
         <el-menu-item index="/">
           <el-icon>
@@ -70,6 +70,22 @@
           </el-menu-item>
         </el-sub-menu>
 
+        <!-- 饲料管理二级菜单 -->
+        <el-sub-menu index="/feed">
+          <template #title>
+            <el-icon>
+              <TakeawayBox />
+            </el-icon>
+            <span>饲料管理</span>
+          </template>
+          <el-menu-item index="/feed/raw-materials">
+            <el-icon>
+              <Tickets/>
+            </el-icon>
+            <template #title>原料管理</template>
+          </el-menu-item>
+        </el-sub-menu>
+
         <el-menu-item index="/plans">
           <el-icon>
             <Calendar/>
@@ -280,7 +296,8 @@ import {
   ScaleToOriginal,
   OfficeBuilding,
   Management,
-  Bell
+  Bell,
+  TakeawayBox
 } from '@element-plus/icons-vue';
 import { getActiveAlarms } from '../api/alarm'; // 导入告警API
 
@@ -312,7 +329,8 @@ export default {
     ScaleToOriginal,
     OfficeBuilding,
     Management,
-    Bell
+    Bell,
+    TakeawayBox
   },
   setup() {
     const route = useRoute();
@@ -396,7 +414,7 @@ export default {
 
     const activeMenu = computed(() => {
       const path = route.path;
-      if (path.startsWith('/monitor') || path.startsWith('/pms') || path.startsWith('/devices') || path.startsWith('/device-templates') || path.startsWith('/alarms')) {
+      if (path.startsWith('/monitor') || path.startsWith('/pms') || path.startsWith('/devices') || path.startsWith('/device-templates') || path.startsWith('/alarms') || path.startsWith('/feed')) {
         return path;
       }
       return route.path;

src/router/index.js

@@ -23,6 +23,7 @@ import WeighingBatchesView from '../views/monitor/WeighingBatchesView.vue';
 import WeighingRecordsView from '../views/monitor/WeighingRecordsView.vue';
 import AlarmList from '../views/alarm/AlarmList.vue';
 import ThresholdAlarmList from '../views/alarm/ThresholdAlarmList.vue';
+import RawMaterialList from '../views/feed/RawMaterialList.vue';
 
 const routes = [
     {path: '/', component: Home, meta: {requiresAuth: true, title: '系统首页'}},
@@ -34,6 +35,7 @@ const routes = [
     {path: '/login', component: LoginForm},
     {path: '/pms/farm-management', name: 'PigFarmManagement', component: PigFarmManagementView, meta: { requiresAuth: true, title: '栏舍管理' }},
     {path: '/pms/batch-management', name: 'PigBatchManagement', component: PigBatchManagementView, meta: { requiresAuth: true, title: '猪群管理' }},
+    {path: '/feed/raw-materials', component: RawMaterialList, meta: {requiresAuth: true, title: '原料管理'}},
     {path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: {requiresAuth: true, title: '设备命令日志'}},
     {path: '/monitor/medication-logs', component: MedicationLogsView, meta: {requiresAuth: true, title: '用药记录'}},
     {path: '/monitor/notifications', component: NotificationLogView, meta: {requiresAuth: true, title: '通知记录'}},

src/views/feed/RawMaterialList.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="raw-material-list-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-container">
+            <h2 class="page-title">原料管理</h2>
+            <el-button type="text" @click="refreshList" class="refresh-btn" title="刷新原料列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
+          <el-button type="primary" @click="addRawMaterial">添加原料</el-button>
+        </div>
+      </template>
+      <raw-material-table ref="rawMaterialTableRef"></raw-material-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { Refresh } from '@element-plus/icons-vue';
+import RawMaterialTable from '../../components/feed/RawMaterialTable.vue';
+
+export default {
+  name: 'RawMaterialList',
+  components: {
+    RawMaterialTable,
+    Refresh,
+  },
+  setup() {
+    const rawMaterialTableRef = ref(null);
+
+    const refreshList = () => {
+      if (rawMaterialTableRef.value) {
+        rawMaterialTableRef.value.fetchRawMaterials();
+      }
+    };
+
+    const addRawMaterial = () => {
+      // 待实现
+      console.log('add raw material');
+    };
+
+    return {
+      rawMaterialTableRef,
+      refreshList,
+      addRawMaterial,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.raw-material-list-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+@media (max-width: 768px) {
+  .raw-material-list-container {
+    padding: 10px;
+  }
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
+</style>