wt_project_web_bak/src/layout/top.vue

<template>
  <div>
    <el-row
      class="flex flex-align-center flex-justify-between top"
      :class="dataType === 'project' ? 'bread' : 'bread-g'"
    >
      <el-col :span="12">
        <div class="flex flex-justify-start flex-align-center padding">
          <el-button
            icon="Menu"
            class="mr-20"
            circle
            @click="openMenu"
            v-if="mini"
          />
          <router-link to="/">
            <div class="flex flex-center">
              <img src="@/assets/svg/logo.svg" />
            </div>
          </router-link>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flex-child-average flex-justify-end flex padding-right">
          <div
            class="padding flex flex-align-center pointer"
            :class="dataType === 'project' ? 'black' : 'white'"
            @click="show = true"
          >
            <el-button icon="Search" circle color="#C1C4CB" />
          </div>
          <div class="padding flex flex-align-center pointer">
            <el-avatar
              class="mr-10"
              :size="30"
              :src="
                user.info.avatarUrl && user.info.avatarUrl.length > 0
                  ? user.info.avatarUrl
                  : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
              "
            />
            <el-dropdown @command="dropDown">
              <span class="flex flex-center">
                {{ user.info.userName }} / {{ user.info.deptName }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="info">个人中心</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-col>
    </el-row>
    <search :show="show" @close="show = false" />
  </div>
</template>

<script>
import navStore from '../store/nav.js'
import { useStore } from '../store/user.js'
import permissionStore from '@/store/permission.js'
import search from './search/index.vue'
import config from '../config/website.js'

export default {
  name: 'top',
  components: { search },
  setup() {
    const nav = navStore()
    const user = useStore()
    const permission = permissionStore()
    return { nav, user, permission }
  },
  data() {
    return {
      dataType: 'project',
      showImage: false,
      imgList: [],
      show: false,
      keywords: '',
      active: 0,
      type: [
        {
          key: 'project',
          value: '项目',
          count: 0
        },
        {
          key: 'file',
          value: '文档',
          count: 0
        },
        {
          key: 'picture',
          value: '图片',
          count: 0
        }
      ],
      params: {
        keyword: '',
        searchType: 'project',
        pages: 1,
        size: 10
      },
      data: [],
      total: '',
      isAll: 1,
      filterTypeName: '全部',
      resultCount: 0,
      title: '',
      mini: false
    }
  },
  created() {
    const tmp = localStorage.getItem('data-type')
    this.title = config.title
    if (tmp) {
      this.dataType = tmp
    }
    this.$bus.on('navChange', res => {
      console.log(res)
      this.dataType = res
    })
    this.$bus.on('sizeChange', res => {
      if (res < 1620) {
        this.mini = true
      } else {
        this.mini = false
      }
    })
  },
  methods: {
    config,
    dropDown(res) {
      if (res === 'info') {
        this.$router.push('/user')
      } else if (res === 'logout') {
        this.$api.login.logout().then(res => {
          if (res.success === 'true') {
            this.nav.cleanMenu()
            try {
              // this.permission.cleanPermission()
            } catch (err) {
              console.log(err)
            }

            this.$message.success('退出登录')
            this.$router.replace('/login')
          } else {
            this.$message.error(res.msg)
          }
        })
      } else if (res === '全部') {
        this.filterTypeName = res
        this.params.searchType = 'all'
        this.isAll = 1
        this.searchTotal()
      } else if (res === '项目') {
        this.filterTypeName = res
        this.isAll = 0
        this.params.searchType = 'project'
        this.searchTotal()
      } else if (res === '文档') {
        this.filterTypeName = res
        this.isAll = 0
        this.params.searchType = 'file'
        this.searchTotal()
      } else if (res === '图片') {
        this.filterTypeName = res
        this.isAll = 0
        this.params.searchType = 'picture'
        this.searchTotal()
      }
    },
    change(index, key) {
      this.active = index
      this.params.searchType = key
      if (this.params.searchType === 'all') {
        this.isAll = 1
        this.getTotal()
        this.$api.project.totalSearch(this.params).then(res => {
          if (res.code === 200) {
            this.data = res.data.result
            this.total = res.data.total
          }
        })
      } else {
        this.getTotal()
        this.$api.project.totalSearch(this.params).then(res => {
          if (res.code === 200) {
            this.data = res.data.result
            this.total = res.data.total
          }
        })
      }
    },
    searchTotal(res) {
      if (res.key === 'Enter' || res === 1) {
        this.getTotal()
        this.$api.project.totalSearch(this.params).then(res => {
          if (res.code === 200) {
            this.data = res.data.result
            this.total = res.data.total
          }
        })
      }
    },
    getTotal() {
      this.resultCount = 0
      this.$api.project.total({ keyword: this.params.keyword }).then(res => {
        if (res.code === 200) {
          this.type[0].count = res.data.projectTotal
          this.type[1].count = res.data.fileTotal
          this.type[2].count = res.data.pictureTotal
          this.type.forEach(sub => {
            this.resultCount = this.resultCount + sub.count
          })
        }
      })
    },
    detail(res) {
      if (this.params.searchType === 'project') {
        this.$api.project.projectInfo(res.projectId).then(res => {
          if (res.code === 200) {
            console.log(res)
            this.$router.push({
              path: '/home/details',
              query: {
                id: res.data.id,
                type: '0',
                ownerId: res.data.createUser
              }
            })
          }
        })
        this.show = false
      } else if (this.params.searchType === 'file') {
        const routeData = this.$router.resolve({
          path: '/home/file_detail',
          query: {
            id: res.fileId.replace('fileid-', ''),
            search: true,
            keywords: this.params.keyword
          }
        })
        window.open(routeData.href, '_blank')
      } else if (this.params.searchType === 'picture') {
        this.imgList = [res.url]
        this.showImage = true
      }
    },
    /**
     * 高级搜索框关闭
     */
    close() {
      this.params.keyword = ''
      this.show = false
    },
    openMenu() {
      this.$emit('openMenu')
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 60px;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 40px;
  position: fixed;
  border-bottom: whitesmoke solid 1px;
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
}

.avatar {
  background-color: #c4c3c3;
  width: 30px;
  height: 30px;
  border-radius: 15px;
}

.tab {
  width: 238px;
  height: 38px;
  background-color: #edf0f3;
  padding: 2px 10px;
  color: #707070;
  font-size: 13px;
}

.tab-active {
  width: 160px;
  flex-wrap: nowrap;
  color: white;
  font-size: 15px;
  background-color: #ab7630;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  text-align: center;
}

.bread {
  background: white;
  color: black;
}

.bread-g {
  background: #3978f1;

  :deep(.el-breadcrumb__inner a) {
    color: white;
  }

  :deep(.el-dropdown) {
    color: white;
  }

  :deep(.el-icon) {
    color: white;
  }

  :deep(.el-breadcrumb__separator) {
    color: white;
  }
}
</style>