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

<template>
  <div>
    <!-- 搜索区域 -->
    <div style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
      <el-select v-model="searchType" placeholder="请选择搜索类型" style="width: 150px;">
        <el-option label="按原料名称" value="name"></el-option>
        <el-option label="按营养名称" value="nutrient_name"></el-option>
      </el-select>
      <el-input
          v-model="searchKeyword"
          placeholder="请输入关键词"
          clearable
          style="width: 300px;"
          @keyup.enter="handleSearch"
      ></el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 原料列表 -->
    <el-table
        ref="mainTable"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        row-key="id"
        :expand-row-keys="expandRowKeys"
        @expand-change="handleExpandChange"
        @row-click="handleRowClick"
    >
      <el-table-column type="expand">
        <template #default="props">
          <div style="padding: 10px 20px;">
            <h4 style="margin-bottom: 16px;">营养成分</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="warning" @click="handleEditNutrients(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} from 'vue';
import {FeedApi} from '../../api/feed';
import {ElMessageBox, ElMessage} from 'element-plus';

export default {
  name: 'RawMaterialTable',
  emits: ['edit', 'edit-nutrients'], // 声明触发的事件
  setup(props, { emit }) {
    const mainTable = ref(null); // el-table 的引用
    const tableData = ref([]);
    const loading = ref(false);
    const searchKeyword = ref('');
    const searchType = ref('name'); // 默认按原料名称搜索
    const expandRowKeys = ref([]);

    const pagination = ref({
      page: 1,
      page_size: 10,
      total: 0,
    });

    const fetchRawMaterials = async () => {
      loading.value = true;
      try {
        const params = {
          page: pagination.value.page,
          page_size: pagination.value.page_size,
        };

        if (searchKeyword.value) {
          params[searchType.value] = searchKeyword.value;
        }

        const response = await FeedApi.getRawMaterials(params);

        if (response.data) {
          tableData.value = response.data.list;
          pagination.value.total = response.data.pagination.total;
        }
      } catch (error) {
        console.error('获取原料列表失败:', error);
        ElMessage.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 || 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);
          ElMessage.error('获取原料营养成分失败');
        }
      }
    };

    // 处理行点击事件
    const handleRowClick = (row, column) => {
      // 如果点击的是操作列，则不执行任何操作
      if (column.label === '操作') {
        return;
      }
      // 否则，切换行的展开状态
      mainTable.value.toggleRowExpansion(row);
    };

    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(() => {
        // 用户取消操作
      });
    };

    const handleEdit = (row) => {
      emit('edit', row); // 触发 edit 事件，并传递当前行数据
    };

    const handleEditNutrients = (row) => {
      emit('edit-nutrients', row); // 触发 edit-nutrients 事件
    };

    onMounted(() => {
      fetchRawMaterials();
    });

    return {
      mainTable, // 暴露出 ref
      tableData,
      loading,
      searchKeyword,
      searchType,
      pagination,
      expandRowKeys,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleExpandChange,
      handleRowClick, // 暴露出点击处理方法
      handleEdit,
      handleDelete,
      handleEditNutrients,
      fetchRawMaterials, // 将方法暴露出去
    };
  },
};
</script>