diantou/src_product/iam/audit/auditsource/km/knowledge-search/km-fullsearch-header.vue

<template>
  <div :class="$style.searchheader">
    <div :class="$style.topbg">
      <div :class="$style.logo"></div>
      <a-divider type="vertical" />
      <h2>全文检索</h2>
    </div>
    <div :class="$style.bottombg">
      <a-select label-in-value :default-value="{ key: 'file' }" :size="size" @change="handleChange">
        <a-select-option v-for="item in selectTypeData" :key="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
      <div :class="$style.inputsearch">
        <a-input-search
          v-model="inputValue"
          :size="size"
          show-search
          placeholder="请输入搜索内容"
          :class="$style.input"
          @change="onInputChange"
          @search="onBtnSearch"
        />
        <a-select
          v-decorator="['value']"
          :size="size"
          :class="$style.selectsearch"
          placeholder=""
          show-search
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          :open="isOpen"
          label-in-value
          @search="onOptinonSearch"
          @change="onSelectChange"
        >
          <a-select-option v-for="(item, index) in data" :key="index">
            {{ item }}
          </a-select-option>
        </a-select>
      </div>
      <span :class="$style.result" @click="onResultSearch">在结果中搜索</span>
    </div>
    <!-- 用户信息 -->
    <div :class="$style.userarea">
      <slot name="userinfo">
        <a-dropdown :class="$style.userinfowrap">
          <div>
            <a-avatar
              :class="$style.userinfo"
              icon="user"
              :src="`api/mobile/v1/user-manager/userAvatar/${userInfo.account}` | sdResource"
              alt="avatar"
            />
            {{ userInfo.name }}
            <a-icon type="down" />
          </div>
          <a-menu slot="overlay">
            <a-menu-item @click="$router.push('/sd-frame/sd-account-info')">
              <a-icon type="user" />个人中心
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item @click="logout"> <a-icon type="logout" />退出登录 </a-menu-item>
          </a-menu>
        </a-dropdown>
      </slot>
      <a-divider type="vertical" />
      <div :class="$style.gobance" @click="$router.push('/sd-frame')">
        进入工作台
      </div>
    </div>
  </div>
</template>

<script>
import loginService from '@/login/login-service'
import storeMixin from '@/common/store-mixin'
import KmKnowledageService from '../km-knowledage-service'

import components from './_import-components/km-fullsearch-header-import'
const selectTypeData = [
  {
    label: '文件',
    value: 'file',
  },
  {
    label: '应用',
    value: 'apply',
  },
]
export default {
  name: 'KmFullsearchHeader',
  components,
  mixins: [storeMixin],
  props: {
    searchVal: {
      type: String,
      default: '请输入搜索内容',
    },
  },
  data() {
    return {
      data: [],
      inputValue: this.searchVal === '请输入搜索内容' ? '' : this.searchVal,
      value: '',
      selectTypeData,
      isApply: false,
      isOpen: false,
      size: 'large',
    }
  },
  methods: {
    // 文件/应用
    handleChange(val) {
      if (val.key === 'apply') {
        this.$emit('handleSelect', 'apply')
        this.isApply = true
      } else {
        this.$emit('handleSelect', 'file')
        this.isApply = false
      }
    },
    // 输入框提示
    getSeachInputTip(text) {
      this.data = []
      KmKnowledageService.seachInputTip(text).then((res) => {
        if (res.data && res.data.length > 0) {
          this.data = res.data
        } else {
          this.data.push(text)
        }
      })
    },
    // input change
    onInputChange(e) {
      this.value = e.target.value
      this.isOpen = true
      this.onOptinonSearch(e.target.value)
    },
    onSelectChange(val) {
      this.value = val.label.trim()
      this.inputValue = val.label.trim()
      this.isOpen = false
      this.$emit('onSearch', this.inputValue, 'searchText')
    },
    onOptinonSearch(val) {
      this.getSeachInputTip(val)
    },
    // 搜索
    onBtnSearch() {
      if (this.isApply) {
        this.$emit('onSearch', this.inputValue, 'fileType')
      } else {
        this.isOpen = false
        this.$emit('onSearch', this.inputValue, 'searchText')
      }
    },
    // 在结果中搜索
    onResultSearch() {
      this.$emit('onSearch', this.inputValue, 'searchResult')
    },
    // 退出登录
    logout() {
      loginService.doLogout()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$fontcolor: #fff;
.searchheader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  .topbg {
    display: flex;
    align-items: center;
    .logo {
      display: inline-block;
      width: 256px;
      height: 64px;
      background: url('~@custom/images/logo.png') no-repeat center;
    }
    h2 {
      color: $fontcolor;
      /* stylelint-disable-next-line */
      margin-bottom: 0;
      margin-left: 20px;
    }
  }
  .bottombg {
    display: flex;
    align-items: center;
    .inputsearch {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 570px;
      height: 40px;
      .input {
        z-index: 20;
      }
      .selectsearch {
        position: absolute;
        width: 570px;
        opacity: 0;
      }
    }
    .result {
      display: flex;
      align-items: center;
      height: 40px;
      margin-left: 1.5rem;
      color: $fontcolor;
      cursor: pointer;
    }
  }

  .userarea {
    position: absolute;
    top: 5px;
    right: 15px;
    display: flex;
    align-items: center;
    color: $fontcolor;
    .gobance {
      cursor: pointer;
    }
    .userinfowrap {
      padding-right: 10px;
      cursor: pointer;
      &:hover {
        /* stylelint-disable-next-line */
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
    .userinfo {
      margin: 0 10px;
    }
  }
}
</style>