lingji-work-fe/src/views/components/dataEngine/topHeader.vue

<template>
  <view>
    <!-- 头部 -->
    <a-space
      direction="vertical"
      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-20px"
      style="background-color: #fff; width: 100%; padding: 24px; color: #737478; font-size: 14px"
    >
      <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
        <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">行业大类</span>
        <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
          <a-tag
            v-for="item in industriesTree"
            :key="item.id"
            size="Medium"
            :checkable="true"
            :checked="selectedIndustry == item.id"
            style="padding: 10px 16px; border-radius: 30px; height: 28px"
            :style="
              selectedIndustry == item.id
                ? 'color: #6D4CFE; background-color: #F0EDFF'
                : 'color: #3C4043; background-color: #F7F8FA'
            "
            @check="handleIndustryCheck(item.id)"
            >{{ item.name }}</a-tag
          >
        </div>
      </a-space>
      <!-- 二级类目 -->
      <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
        <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">二级类目</span>
        <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
          <a-tag
            v-for="item in subCategories"
            :key="item.id"
            size="Medium"
            :checkable="true"
            :checked="selectedSubCategory == item.id"
            style="padding: 10px 16px; border-radius: 30px; height: 28px"
            :style="
              selectedSubCategory == item.id
                ? 'color: #6d4cfe; background-color: #f0edff'
                : 'color: #3C4043; background-color: #F7F8FA'
            "
            @check="handleSubCategoryCheck(item.id)"
            >{{ item.name }}</a-tag
          >
        </div>
      </a-space>
      <!-- </a-space> -->
      <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
        <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">时间筛选</span>
        <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
          <a-tag
            v-for="item in timePeriods"
            :key="item.value"
            size="Medium"
            :checkable="true"
            :checked="selectedTimePeriod == item.value"
            style="padding: 10px 16px; border-radius: 30px; height: 28px"
            :style="
              selectedTimePeriod == item.value
                ? 'color: #6d4cfe; background-color: #f0edff'
                : 'color: #3C4043; background-color: #F7F8FA'
            "
            @check="handleTimePeriodCheck(item.value)"
            >{{ item.label }}
          </a-tag>
        </div>
      </a-space>
      <!-- 搜索区域 -->
      <a-space style="margin-left: 'auto'">
        <a-button type="primary" size="medium" @click="handleSearch">
          <template #icon>
            <icon-search />
          </template>
          <!-- Use the default slot to avoid extra spaces -->
          <template #default>搜索</template>
        </a-button>
        <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
          <template #icon>
            <icon-refresh />
          </template>
          <template #default>重置</template>
        </a-button>
      </a-space>
    </a-space>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { fetchIndustriesTree } from '@/api/all/index';

const emit = defineEmits<(e: 'search') => void>();
// 行业大类
const industriesTree = ref([]);
// 数据状态
const selectedIndustry = ref();
const selectedSubCategory = ref(0);
const selectedTimePeriod = ref('7');

// 暴露这些状态给父组件
defineExpose({
  selectedIndustry,
  selectedSubCategory,
  selectedTimePeriod,
});
// 二级类目选项
const subCategories = ref([]);
// 时间周期选项
const timePeriods = [
  {
    value: '7',
    label: '近7天',
  },
  {
    value: '15',
    label: '近15天',
  },
  {
    value: '30',
    label: '近30天',
  },
];

const handleIndustryCheck = (id) => {
  selectedIndustry.value = id;
  console.log(industriesTree.value);
  for (let i = 0; i < industriesTree.value.length; i++) {
    if (industriesTree.value[i].id == id) {
      subCategories.value = [];
      subCategories.value = [...industriesTree.value[i].children];
      subCategories.value.unshift({ id: 0, name: '全部' });
      selectedSubCategory.value = 0;
      break;
    }
  }
};

const handleSubCategoryCheck = (id) => {
  selectedSubCategory.value = id;
};

const handleTimePeriodCheck = (value) => {
  selectedTimePeriod.value = value;
};

onMounted(() => {
  getIndustriesTree();
});
// 获取行业大类数据
const getIndustriesTree = async () => {
  const res = await fetchIndustriesTree();
  if (res.code == 200) {
    let data = res['data'];
    industriesTree.value = data;
    selectedIndustry.value = data[0].id;
    selectedSubCategory.value = 0;
    subCategories.value = [...industriesTree.value[0].children];
    subCategories.value.unshift({ id: 0, name: '全部' });
  }
};
// 搜索
const handleSearch = () => {
  emit('search');
};
const handleReset = () => {
  selectedIndustry.value = industriesTree.value[0].id;
  selectedSubCategory.value = 0;
  selectedTimePeriod.value = '7';
};
</script>

<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
  background-color: var(--color-fill-2);
}

:deep(.arco-table-tr):hover {
  background-color: var(--color-fill-1);
}
:deep(.arco-btn-outline) {
  color: #6d4cfe !important;
  border-color: #6d4cfe !important;
}
:deep(.arco-modal-body) {
  padding: 0px;
}
.reset-btn {
  border-radius: 4px;
  border: 1px solid var(--BG-500, #b1b2b5);
  background: var(--BG-white, #fff);
  &:hover {
    border: 1px solid var(--BG-500, #b1b2b5);
  }
}
</style>