pig-farm-controller-fe/src/components/GenericMonitorList.vue

<template>
  <div class="generic-monitor-list">
    <el-card shadow="never">
      <el-form :inline="true" :model="filters" class="filter-form">
        <el-form-item v-for="col in filterableColumns" :key="col.dataIndex" :label="col.title">
          <template v-if="col.filterType === 'text'">
            <el-input
                v-model="filters[col.dataIndex]"
                :placeholder="`搜索 ${col.title}`"
                clearable
                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            ></el-input>
          </template>
          <template v-else-if="col.filterType === 'number'">
            <el-input-number
                v-model="filters[col.dataIndex]"
                :placeholder="`搜索 ${col.title}`"
                :controls="false"
                clearable
                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            ></el-input-number>
          </template>
          <template v-else-if="col.filterType === 'dateRange'">
            <el-date-picker
                v-model="filters[col.dataIndex]"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            ></el-date-picker>
          </template>
          <template v-else-if="col.filterType === 'select'">
            <el-select
                v-model="filters[col.dataIndex]"
                :placeholder="`选择 ${col.title}`"
                clearable
                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            >
              <el-option
                  v-for="option in col.filterOptions"
                  :key="option.value"
                  :label="option.text"
                  :value="option.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="col.filterType === 'boolean'">
            <el-select
                v-model="filters[col.dataIndex]"
                :placeholder="`选择 ${col.title}`"
                clearable
                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            >
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button @click="resetFilters">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
          :data="data"
          v-loading="loading"
          border
          stripe
          style="width: 100%"
          table-layout="auto"
          :fit="true"
          :scrollbar-always-on="true"
          @sort-change="handleSortChange"
      >
        <el-table-column
            v-for="col in tableColumns"
            :key="col.key"
            :prop="col.prop"
            :label="col.title"
            :sortable="col.sorter ? 'custom' : false"
            :formatter="col.formatter"
            :min-width="col.minWidth"
        >
          <template v-if="col.render" #default="{ row }">
            <component :is="col.render(row)"/>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          background
          style="margin-top: 20px; text-align: right;"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, watch, computed} from 'vue';
import {ElMessage} from 'element-plus';

const props = defineProps({
  fetchData: {
    type: Function,
    required: true,
  },
  columnsConfig: {
    type: Array,
    required: true,
  },
});

const data = ref([]);
const loading = ref(false);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const filters = reactive({});
const sortOrder = reactive({
  prop: undefined,
  order: undefined,
});

const filterableColumns = computed(() => {
  return props.columnsConfig.filter(col => col.filterType);
});

const tableColumns = computed(() => {
  return props.columnsConfig.map(col => {
    const newCol = {...col};
    newCol.prop = Array.isArray(col.dataIndex) ? col.dataIndex.join('.') : col.dataIndex;

    // 添加智能默认 formatter
    if (!newCol.formatter) {
      newCol.formatter = (row, column, cellValue) => {
        if (typeof cellValue === 'object' && cellValue !== null) {
          try {
            return JSON.stringify(cellValue, null, 2); // 格式化为可读的JSON字符串
          } catch (e) {
            console.warn('Failed to stringify object for display:', cellValue, e);
            return '[Object]'; // 无法序列化时显示简短提示
          }
        } else if (Array.isArray(cellValue)) {
            return cellValue.join(', '); // 数组也默认用逗号连接
        }
        return cellValue;
      };
    }

    return newCol;
  });
});

const loadData = async () => {
  loading.value = true;
  try {
    const params = {
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
      ...filters,
      orderBy: sortOrder.prop,
      order: sortOrder.order === 'ascending' ? 'asc' : (sortOrder.order === 'descending' ? 'desc' : undefined),
    };

    // 将日期范围筛选转换为 start_time 和 end_time
    filterableColumns.value.forEach(col => {
      if (col.filterType === 'dateRange' && filters[col.dataIndex] && filters[col.dataIndex].length === 2) {
        params[`start_time`] = filters[col.dataIndex][0];
        params[`end_time`] = filters[col.dataIndex][1];
        delete params[col.dataIndex];
      }
    });

    const result = await props.fetchData(params);
    data.value = result.list;
    pagination.total = result.total;
  } catch (error) {
    console.error('Failed to fetch data:', error);
    ElMessage.error('获取数据失败，请稍后再试。');
  } finally {
    loading.value = false;
  }
};

const handleSizeChange = (val) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
  loadData();
};

const handleCurrentChange = (val) => {
  pagination.currentPage = val;
  loadData();
};

const handleSortChange = ({prop, order}) => {
  sortOrder.prop = prop;
  sortOrder.order = order;
  loadData();
};

const handleFilterChange = (key, value) => {
  filters[key] = value;
  pagination.currentPage = 1;
};

const resetFilters = () => {
  for (const key in filters) {
    delete filters[key];
  }
  sortOrder.prop = undefined;
  sortOrder.order = undefined;
  pagination.currentPage = 1;
  loadData();
};

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

</script>

<style scoped>
.generic-monitor-list {
  padding: 20px;
}

.filter-form {
  margin-bottom: 20px;
}

.el-card {
  border: none;
}
</style>