zhiyu_duanju_distribution_manage_front/src/layout/components/header/index.vue

<template>
  <div class="flex flex-row w-full h-16 border-l border-gray-200 drop-shadow dark:border-l-0"
    style="background-color: var(--header-bg-color)">
    <div class="flex flex-row justify-between w-full">
      <div class="flex flex-row min-w-[17rem]">
        <div class="flex items-center w-8 h-full ml-2 hover:cursor-pointer" @click="store.changeExpaned">
          <Icon name="list-bullet" class="w-6 h-8" />
        </div>
        <div class="flex items-center pl-3 w-96 sm:pl-0" v-if="isShowNavData">
          <!-- <Breadcrumbs /> -->
          <el-select :disabled="isAdverDisabled" style="width:260px;" v-model="navData.advertiser" filterable
            value-key="id" remote @change="adverChange" reserve-keyword placeholder="请选择投手" :remote-method="remoteMethod">
            <el-option v-for="item in navDataArr" :key="item.id" :label="item.username" :value="item" />
          </el-select>
          <el-select v-model="navData.app" style="width:260px;" class="m-2" @change="appChange" clearable filterable
            placeholder="请选择" size="default">
            <el-option v-for="item in miniPrograms" :key="item.id" :label="item.name" :value="item.app_name">
              <div class="flex items-center">
                <el-image :src="item.type_logo" style="width: 20px; height: 20px" class="mr-5" fit="contain"></el-image>
                <span class="mr-5">{{ item.name }}</span>
              </div>
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="flex w-52 sm:min-w-[18rem] flex-row item-center pl-1 sm:pl-0 justify-end sm:justify-between mr-4">
        <div class="hidden w-3/5 sm:flex">

          <!-- 菜单切换 -->
          <!-- <MenuSelect /> -->
          <!-- 搜索 -->
          <MenuSearch />
          <!-- 多语言 -->
          <Lang />
          <!-- 暗黑主题 -->
          <Theme />
          <!-- <Notification /> -->
        </div>
        <Profile />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useAppStore } from '@/stores/modules/app'
import { advertiserListAdvertiser } from '@/api/advertiser/index'
import Notification from './notification.vue'
import MenuSearch from './menuSearch.vue'
import MenuSelect from './menuSelect.vue'
import { useUserStore } from '@/stores/modules/user/index'
import Cache from '@/support/cache';
import router from '@/router'
const store = useAppStore()
const miniPrograms = ref([])
const navData = ref({})
const navDataArr = ref([])
const searchMenuVisiable = ref(false)
const isAdverDisabled = ref(false)
const userStore = useUserStore()
const adverChange = (e) => {
  console.log(e, 'userStore', userStore.roles, navData.value, 'navData.value');
  navData.value.app = ''
  miniPrograms.value = e.miniPrograms
}
const remoteMethod = (query: string) => {
  if (query) {
    init({ username: query })
  } else {
    init({})
  }
}
const isShowNavData = computed(() => {
  console.log(userStore.getRoles, 'getRoles');
  if (userStore.getRoles?.some(el => (el?.identify == 'optimizer'))) {
    navData.value.advertiser = navDataArr.value[0]
    isAdverDisabled.value = true;
    miniPrograms.value = navDataArr.value[0]?.miniPrograms
  }
  return userStore.getRoles?.some(el => (el?.identify == 'optimizer'))
})
const appChange = (e) => {
  initPer()
  console.log(e, 'appChange', userStore.roles, navData.value, 'appChange.valappChangeappChangeue');
  Cache.set('nav_data', JSON.stringify(navData.value));

  // router.push('/')
  // let timer = setTimeout(() => {
  //   location.reload()
  //   clearTimeout(timer)
  // }, 100)
  searchMenuVisiable.value = false
}

const initPer = () => {
  userStore.getUserInfo().then(res => {
    const {
      id,
      username,
      email,
      avatar,
      permissions,
      roles,
      rememberToken,
      status
    } = res;
    // set user info
    userStore.setId(id);
    userStore.setUsername(username);
    userStore.setEmail(email);
    userStore.setRoles(roles);
    userStore.setRememberToken(rememberToken);
    userStore.setStatus(status);
    userStore.setAvatar(avatar);
    userStore.setPermissions(permissions);
  })
}

const init = (params?: object) => {
  advertiserListAdvertiser({ ...params, limit: 50 }).then(res => {
    console.log(res, 'advertiserListAdvertiseradvertiserListAdvertiser');
    navDataArr.value = res.data
  })
}
onMounted(() => {
  init()
  let timer = setTimeout(() => {
    if (JSON.parse(Cache.get('nav_data'))) {
      navData.value = JSON.parse(Cache.get('nav_data')) || {}
      miniPrograms.value = JSON.parse(Cache.get('nav_data'))?.advertiser?.miniPrograms || []
    } else {
      if (miniPrograms.value.length > 0) {
        navData.value.app = miniPrograms.value[0].app_name
        Cache.set('nav_data', JSON.stringify(navData.value));
        initPer()
      }
    }
    clearTimeout(timer)
  }, 300);
})
</script>