WholeProcessPlatform/frontend/src/modules/zengzhizhanjiansheyunxing/WholeValuedStationOverviewDetail/index.vue

<template>
  <div class="whole-valued-station-detail">
    <!-- 搜索表单 -->
    <a-form layout="inline" class="search-form">
      <a-form-item label="年份">
        <a-date-picker
          v-model:value="yearValue"
          picker="year"
          :allow-clear="false"
          format="YYYY"
          value-format="YYYY"
        />
      </a-form-item>
      <a-form-item label="">
        <a-input
          v-model:value="search"
          placeholder="请输入设施名称"
          allow-clear
          style="width: 200px"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleSearch">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <!-- 表格 -->
    <div class="table-wrapper">
      <BasicTable
        ref="tableRef"
        :columns="columns"
        :scroll-y="500"
        :scroll-x="800"
        :list-url="listUrl"
        :search-params="searchParams"
        :transform-data="customTransform"
      >
        <template #action="{ record }">
          <!-- 操作列 -->
          <a @click="handleViewDetail(record)" class="text-link"> 查看详情 </a>
        </template>
      </BasicTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, h, onMounted } from 'vue';
import {
  qgcoverviewGetOverviewSecond,
  overviewGetOverviewSecond
} from '@/api/zzfl';
import BasicTable from '@/components/BasicTable/index.vue';
import { List } from 'ant-design-vue';
import { useModelStore } from '@/store/modules/model';
const modelStore = useModelStore();
// 渲染逗号分隔的文本为列表
const renderList = (text: string) => {
  if (!text) return '-';
  const items = text.split(',');
  return h(
    List,
    { size: 'small' },
    {
      renderItem: (item: string) => h(List.Item, {}, () => item),
      default: () => items.map(item => h(List.Item, {}, () => item))
    }
  );
};

// ==================== Props ====================
const props = defineProps<{
  time?: string; // 年份，格式 YYYY
  all?: boolean; // 是否为全国概览模式
  baseId?: string; // 基地ID
}>();

// ==================== 搜索状态 ====================
const yearValue = ref(props.time || `${new Date().getFullYear()}`);
const search = ref('');

// ==================== 接口URL ====================
const listUrl = computed(() => {
  return props.all ? qgcoverviewGetOverviewSecond : overviewGetOverviewSecond;
});

// ==================== 搜索参数 ====================
const searchParams = computed(() => ({
  sort: [],
  group: [],
  select: [],
  groupResultFlat: false
}));

// ==================== 表格列配置 ====================
const columns = [
  {
    key: 'stnm',
    title: '设施名称',
    dataIndex: 'stnm',
    fixed: 'left',
    width: 120,
    ellipsis: true
  },
  {
    key: 'ennm',
    title: '服务电站',
    dataIndex: 'ennm',
    fixed: 'left',
    width: 120,
    ellipsis: true
  },
  {
    key: 'totalInv',
    title: '总投资',
    dataIndex: 'totalInv',
    width: 120
  },
  {
    key: 'planFtp',
    title: '计划放流种类',
    dataIndex: 'planFtp',
    width: 160,
    customRender: ({ text }: { text: string }) => renderList(text)
  },
  {
    key: 'fcntjh',
    title: '计划放流数量',
    dataIndex: 'fcntjh',
    width: 140
  },
  {
    key: 'realftp',
    title: '实际放流种类',
    dataIndex: 'realftp',
    width: 160,
    customRender: ({ text }: { text: string }) => renderList(text)
  },
  {
    key: 'realfcntStr',
    title: '实际放流数量',
    dataIndex: 'realfcntStr',
    width: 160,
    customRender: ({ text }: { text: string }) => renderList(text)
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
    fixed: 'right',
    slots: { customRender: 'action' }
  }
];

// ==================== 过滤条件构建 ====================
const tableRef = ref();

// 构建查询过滤条件
const getFilter = () => {
  return {
    logic: 'and',
    filters: [
      {
        field: 'year',
        operator: 'eq',
        dataType: 'string',
        value: yearValue.value
      },
      props.all && props.baseId && props.baseId !== 'all'
        ? {
            field: 'baseId',
            operator: 'eq',
            dataType: 'string',
            value: props.baseId
          }
        : null,
      search.value
        ? {
            field: 'stnm',
            operator: 'contains',
            dataType: 'string',
            value: search.value
          }
        : null
    ].filter(Boolean)
  };
};

// ==================== 数据转换 ====================
const customTransform = (res: any) => {
  return {
    records: res?.data?.data || [],
    total: res?.data?.total || 0
  };
};

// ==================== 搜索与重置 ====================
const handleSearch = () => {
  const filter = getFilter();
  tableRef.value?.getList(filter);
};

const handleReset = () => {
  yearValue.value = props.time || `${new Date().getFullYear()}`;
  search.value = '';
  handleSearch();
};

// 查看详情
const handleViewDetail = (record: any) => {
  modelStore.modalVisible = true;
  modelStore.params = record;
  modelStore.title = record.stnm;
  modelStore.params.sttp = 'FB';
  modelStore.filter.year = yearValue.value;
  //    modelStore.params.s = record.stnm;
};
// ==================== 监听 time prop 变化 ====================
watch(
  () => props.time,
  newVal => {
    if (newVal) {
      yearValue.value = newVal;
      handleSearch();
    }
  },
  { immediate: true }
);
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped>
.whole-valued-station-detail {
  width: 100%;

  .search-form {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
  }

  .table-wrapper {
    width: 100%;
  }
}
.text-link {
  color: #2f6b98;

  &:hover {
    color: #40a9ff;
  }
}
</style>