wt_project_web_bak/src/layout/top.vue

<template>
  <div>
    <el-row class='flex flex-align-center flex-justify-between top'>
      <el-col :span='12'>
        <div class='flex flex-justify-start flex-align-center padding'>
          <img class="ml-10" src="../assets/svg/top.svg"/>
          <el-breadcrumb class='ml-10' separator="/">
            <el-breadcrumb-item v-for='item in nav.menus' :key='item.id'>
              <a :href="item.fullPath">{{ item.name }}</a>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </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" @click="show = true">
            <el-icon class="mr-5">
              <Search/>
            </el-icon>
            <span>搜索</span>
          </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.name }} / {{ 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>
    <el-dialog v-model='show' append-to-body width='40%'>
      <div class="flex flex-col">
        <div class="flex flex-center">
          <div class="mr-5">
            <el-dropdown @command='dropDown'>
              <div class="flex flex-center">
                <el-icon size="25px">
                  <Search/>
                </el-icon>
                <span style='width: 40px' class='text-center'> {{filterTypeName}}</span>
                <el-icon size="20px">
                  <CaretBottom/>
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command='全部'>全部</el-dropdown-item>
                  <el-dropdown-item command='项目'>项目</el-dropdown-item>
                  <el-dropdown-item command='文档'>文档</el-dropdown-item>
                  <el-dropdown-item command='图片'>图片</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="full-width flex flex-center">
            <el-input
                clearable
                v-model='params.keyword'
                class='append'
                placeholder="输入关键字搜索"
                @keydown="searchTotal"
            >
            </el-input>
            <el-button type='primary' class='ml-20' @click='searchTotal(1)'>搜 索</el-button>
          </div>
        </div>
<!--        结果展示-->
        <div  v-if="isAll === 1" class="flex flex-justify-center flex-align-start mt-15">
          <div  v-for="(item,index) in type" :key='item.key' class="flex flex-center tab" @click="change(index,item.key)">
            <el-badge :value='item.count' :hidden='item.count === 0'>
              <div :class="active === index ? 'tab-active' : ''" class="pointer">{{item.value }}
              </div>
            </el-badge>
          </div>
        </div>
        <el-empty v-if="data && data.length === 0" description='暂无数据'/>
        <div v-else style='min-height: 300px'>
          <div  class="mt-10 border-bottom padding flex flex-center flex-justify-between" v-for="sub in data" :key='sub.id'>
            <span v-if='params.searchType === "project" '>{{ sub.projectName }}</span>
            <span v-else>{{ sub.title }}</span>
            <el-button text type='primary' @click='detail(sub)'>详情</el-button>
          </div>
        </div>
        <div class="full-width mt-10 flex flex-justify-end">
          <el-pagination small layout="prev, pager, next" :total="total"/>
        </div>
      </div>
    </el-dialog>
    <el-image-viewer
        v-if='showImage'
        :url-list="imgList"
        @close='showImage = false'
    />
  </div>
</template>

<script>
import navStore from '../store/nav.js'
import { useStore } from '../store/user.js'
import permissionStore from '@/store/permission.js'

export default {
  name: 'top',
  setup () {
    const nav = navStore()
    const user = useStore()
    const permission = permissionStore()
    return { nav, user, permission }
  },
  data () {
    return {
      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
    }
  },
  created () {
  },
  methods: {
    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-', '') } })
        window.open(routeData.href, '_blank')
      } else if (this.params.searchType === 'picture') {
        this.imgList = [res.url]
        this.showImage = true
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.top {
  height: 60px;
  z-index: 1;
  background-color: white;
  top: 0;
  left: 200px;
  right: 0;
  position: fixed;
  border-bottom: whitesmoke solid 1px;
  box-shadow: 0 5px 10px -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;
}
</style>