pig-farm-controller-fe/src/components/feed/RawMaterialTable.vue

<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>