Game-Backstage-Management-System/src/components/dataAnalysis/HeaderCard.vue

<!--

* @FileDescription: 用于数据展示页面的头部位置展示信息

* @Author: FFF

-->

<script setup lang="ts">
import router from '@/router'
import DropDownSelection from './DropDownSelection.vue'
import type { DropDownInfo, HeaderCardProps } from '@/types/dataAnalysis'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import WithIconSelect from '@/components/common/WithIconSelect.vue'

const props = withDefaults(defineProps<HeaderCardProps>(), {
  openDateSelect: false,
  defaultPf: 'web',
  needPfSelect: true,
  needBreadcrumb: false
})

const emits = defineEmits(['changePf', 'changeDate'])

// 平台下拉框信息
const platFormOptionInfo: DropDownInfo = {
  defaultSelect: props.defaultPf,
  title: '请选择平台',
  optionsList: [
    {
      value: 'web',
      label: 'Web'
    },
    {
      value: 'wx',
      label: '微信'
    },
    {
      value: 'tt',
      label: '抖音'
    }
  ]
}
// {
//   wx: '/img/platformIcon/wx.svg',
//   tt: '/img/platformIcon/tt.svg',
//   web: '/img/platformIcon/web.svg'
// }
// const dropDownInfo = {
//   selectInfo: [
//     {
//       icon: '/img/platformIcon/wx.svg',
//       value: 'wx',
//       label: '微信',
//       isSelected: true
//     },
//     {
//       icon: '/img/platformIcon/tt.svg',
//       value: 'tt',
//       label: '抖音',
//       isSelected: true
//     }
//   ]
// }

// 快速选择日期
const shortcuts = [
  {
    text: '上一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

// 选择的日期
const selectDate = ref<Array<Date>>(shortcuts[0].value())

// 日期变化
const dateChange = (val: any) => {
  emits('changeDate', val)
}

// 平台变化
const changePf = (val: any) => {
  emits('changePf', val)
}

// 控制日期范围
/**
 * @description: 禁止选取今天之后的日期
 * @param {*} date
 * @return {*}
 */
const disableDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const breadcrumbList = reactive<
  Array<{
    title: string
    pathName: string
  }>
>([])

// 是否可点击
const breadcrumbCanClick = computed(() => breadcrumbList.length > 1)

// 返回总览
const goBack = (index: number) => {
  if (breadcrumbCanClick) {
    router.push(breadcrumbList[index].pathName).then(() => {
      breadcrumbList.splice(index + 1, breadcrumbList.length - 1)
    })
  }
}

/**
 * @description: 添加导航栏的信息
 * @param {*} title 标题
 * @param {*} pathName 对应的路由name
 * @return {*}
 */
const addPath = (title: string, pathName: string) => {
  breadcrumbList.push({ title, pathName })
}

/**
 * @description: 当跳转到其他页面的时候，就需要清除掉这里的面包屑导航
 * @return {*}
 */
const clearBreadcrumb = () => {
  let nowName = router.currentRoute.value.name
  // 如果现在是第一个导航，那么清除掉，这个是为了当直接点击左侧导航栏进入table页的时候可以清空
  // 第二个条件是当切换到其他导航的时候，也给他清空掉
  if (
    nowName === breadcrumbList[0].pathName ||
    breadcrumbList.every((item) => item.pathName !== nowName)
  ) {
    breadcrumbList.splice(1, breadcrumbList.length - 1)
  }
}

const watchRoute = watch(
  () => [router.currentRoute.value],
  () => {
    clearBreadcrumb()
  },
  { deep: true }
)

if (!props.needBreadcrumb) watchRoute()

defineExpose({
  addPath,
  clearBreadcrumb
})

onMounted(() => {
  breadcrumbList.push({
    title: props.title,
    pathName: router.currentRoute.value.name as string
  })
  dateChange(selectDate.value)
})

interface DropdownItem {
  value: string
  icon: string
  label: string
  isSelected: boolean
}

const selectInfo = reactive<Array<DropdownItem>>([
  {
    value: 'web',
    icon: '/img/platformIcon/web.svg',
    label: '网页',
    isSelected: true
  },
  {
    value: 'wx',
    icon: '/img/platformIcon/wx.svg',
    label: '微信',
    isSelected: false
  },
  {
    value: 'tt',
    icon: '/img/platformIcon/tt.svg',
    label: '抖音',
    isSelected: false
  }
])

const changePlatForm = (val: Array<any>) => {
  emits('changePf', val)
}

watch(
  () => selectInfo,
  (newval) => {
    console.log('new')
    console.log(newval)
  }
)
</script>

<template>
  <div class="headerCard">
    <p class="titleBox">
      <span
        @click="breadcrumbCanClick ? goBack(index) : ''"
        v-for="(item, index) in breadcrumbList"
        :class="[
          index === breadcrumbList.length - 1 ? 'activeCrumbs' : 'noActive',
          breadcrumbCanClick ? 'canClick' : 'unAble'
        ]"
      >
        <span v-if="index === 0" class="titleContent">
          {{ item.title }}
        </span>
        <span v-else>
          <span class="divLine">/</span>
          <span class="titleContent">{{ item.title }}</span>
        </span>
      </span>
    </p>

    <div class="selectBox" v-if="props.needPfSelect">
      <el-divider direction="vertical" />
      <div class="selectItem">
        <WithIconSelect @change-pf="changePlatForm" :slect-info="selectInfo"></WithIconSelect>
        <!-- <DropDownSelection
          @changeSelect="changePf"
          :defaultSelect="platFormOptionInfo.defaultSelect"
          :title="platFormOptionInfo.title"
          :optionsList="platFormOptionInfo.optionsList"
        ></DropDownSelection> -->
      </div>
    </div>
    <div v-if="props.openDateSelect" class="datePicker">
      <el-date-picker
        v-model="selectDate"
        :disabled-date="disableDate"
        :unlink-panels="false"
        @change="dateChange"
        type="daterange"
        range-separator="至"
        start-placeholder="Start date"
        end-placeholder="End date"
        :shortcuts="shortcuts"
        :size="'small'"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<style scoped>
.headerCard {
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background-color: white;
}

.canClick {
  cursor: pointer;
}

.unAble {
  cursor: default;
}

.activeCrumbs {
  font-size: 18px;
  color: #17233d;
  font-weight: 600;
}

.noActive {
  font-size: 16px;
  color: rgba(23, 35, 61, 0.55);
}

.selectBox {
  display: inline-flex;
}

.selectItem {
  width: 50%;
}

.datePicker {
  display: inline-flex;
  align-items: center;
  /* 可以将他单独的右对齐 */
  margin-left: auto;
}

.dateItem {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 4%;
}

.canSelect {
  background-color: #cce3f8;
  color: black;
}

.selected {
  background-color: #2d8cf0;
}

.disableSelect {
  color: #c7c9cc;
  background-color: white;
}

.disableSelect:hover {
  cursor: no-drop;
}

.divLine {
  margin: 0 5px;
}
</style>