guoziwei_ui/src/components/stats/FullDataList.vue

<template>
  <TopicFullDataListSection
    ref="sectionRef"
    title="全量数据列表"
    export-label="导出筛选结果"
    :columns="TOPIC1_FULL_COLUMNS"
    :rows="rows"
    :page-size="10"
    @export="handleExport"
    @row-action="$emit('row-action', $event)"
  >
    <template #filters>
      <div class="filter-bar">
        <label class="filter-item filter-item--wide">
          <span>关键词</span>
          <input
            :value="filters.keyword"
            type="search"
            placeholder="编号 / 坐落 / 企业"
            @input="patchFilters({ keyword: $event.target.value })"
          />
        </label>
        <BaseSelect
          text="房屋用途"
          :selected-text="fwUsageLabel"
          :options="fwUsageOptions"
          :select-width="168"
          :max-options-height="240"
          @selected="patchFilters({ fwUsage: $event })"
        />
        <BaseSelect
          text="所属集团"
          :selected-text="groupLabel"
          :options="GROUP_FILTER_OPTIONS"
          @selected="patchFilters({ group: $event })"
        />
        <BaseSelect
          text="房龄"
          :selected-text="ageLabel"
          :options="AGE_FILTER_OPTIONS"
          @selected="patchFilters({ age: $event })"
        />
        <BaseSelect
          text="使用状态"
          :selected-text="utilLabel"
          :options="UTIL_FILTER_OPTIONS"
          @selected="patchFilters({ util: $event })"
        />
        <BaseSelect
          text="土地类型"
          :selected-text="landTypeLabel"
          :options="landTypeOptions"
          :select-width="168"
          :max-options-height="240"
          @selected="patchFilters({ landUsage: $event })"
        />
        <BaseButton
          class="filter-bar__reset"
          text="重置"
          variant="outline"
          @click="$emit('reset')"
        />
      </div>
    </template>

    <template #hint>
      <p class="filter-hint">
        当前筛选：<strong>{{ filterHint.summary }}</strong> · 共 {{ filterHint.total }} 条
      </p>
    </template>
  </TopicFullDataListSection>
</template>

<script setup>
import { showSuccess, showWarning } from '@/utils/message';
import { exportTableExcel } from '@/utils/exportExcel';
import { computed, ref, defineProps, defineEmits, defineExpose } from 'vue';
import BaseSelect from '@/components/base/BaseSelect.vue';
import BaseButton from '@/components/base/BaseButton.vue';
import TopicFullDataListSection from '@/components/stats/TopicFullDataListSection.vue';
import { TOPIC1_FULL_COLUMNS } from '@/utils/fullListColumns';
import {
  AGE_BUCKET_LABELS,
  AGE_FILTER_OPTIONS,
  GROUP_FILTER_OPTIONS,
  UTIL_FILTER_OPTIONS,
  buildFilterHint,
} from '@/utils/topic1AssetList';

const props = defineProps({
  filters: {
    type: Object,
    required: true,
  },
  rows: {
    type: Array,
    default: () => [],
  },
  fwUsageOptions: {
    type: Array,
    default: () => [{ text: '全部', value: '' }],
  },
  landTypeOptions: {
    type: Array,
    default: () => [{ text: '全部', value: '' }],
  },
});

const emit = defineEmits(['update:filters', 'reset', 'row-action']);

const sectionRef = ref(null);

const fwUsageLabel = computed(() => props.filters.fwUsage || '全部');

const groupLabel = computed(() =>
  props.filters.group === '全部' ? '全部集团' : props.filters.group
);

const ageLabel = computed(() =>
  props.filters.age === '全部'
    ? '全部'
    : (AGE_BUCKET_LABELS[props.filters.age] ?? props.filters.age)
);

const utilLabel = computed(() =>
  props.filters.util === '全部' ? '全部' : props.filters.util
);

const landTypeLabel = computed(() => props.filters.landUsage || '全部');

const filterHint = computed(() => buildFilterHint(props.filters, props.rows.length));

const patchFilters = (patch) => {
  const pieKeys = ['fwUsage', 'landType', 'landUsage'];
  const clearsPie = 'group' in patch || 'age' in patch || 'util' in patch;
  const next = { ...props.filters, ...patch };
  if (clearsPie) {
    pieKeys.forEach((key) => {
      next[key] = '';
    });
  }
  if ('fwUsage' in patch) {
    next.landUsage = '';
    next.landType = '';
  }
  if ('landUsage' in patch) {
    next.fwUsage = '';
    next.landType = '';
  }
  emit('update:filters', next);
};

const handleExport = () => {
  const result = exportTableExcel({
    columns: TOPIC1_FULL_COLUMNS,
    rows: props.rows,
    filenameBase: '专题1-全量数据列表',
  });
  if (!result.ok) {
    showWarning('当前筛选结果为空，无法导出');
    return;
  }
  showSuccess(`已导出 ${result.count} 条记录（${result.filename}）`);
};

defineExpose({
  scrollIntoView: () => {
    sectionRef.value?.scrollIntoView();
  },
});
</script>