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

<template>
  <div :class="$style.fullsearchContent">
    <a-card>
      <div :class="$style.searchResult">
        <span :class="$style.result"
          >为您找到相关结果<i>{{ total }}</i
          >条</span
        >
        <div :class="$style.option">
          搜索方式：
          <a-select default-value="splitWrod" @change="handleSearchChange">
            <a-select-option value="splitWrod">
              模糊搜索
            </a-select-option>
            <a-select-option value="fullword">
              精准搜索
            </a-select-option>
          </a-select>
          排序：
          <a-select default-value="score" @change="handleSearchsort">
            <a-select-option value="score">
              按相关性
            </a-select-option>
            <a-select-option value="dateAsc">
              按时间顺序
            </a-select-option>
            <a-select-option value="dateDesc">
              按时间倒序
            </a-select-option>
          </a-select>

          <a-button @click="handleExcel">导出Excel</a-button>
        </div>
      </div>
      <div :class="$style.fullResult">
        <a-list size="large" :pagination="pagination" :data-source="searchList" :loading="loading">
          <a-list-item slot="renderItem" key="item.title" slot-scope="item" :class="$style.item">
            <span slot="extra" :class="$style.btn" @click="fnSeeAtlas(item)"
              >查看图谱<a-icon type="fullscreen"
            /></span>
            <a-list-item-meta>
              <p slot="title" :class="$style.title">
                <a href="javascript:;" @click="fnReadDoc(item)">
                  <span
                    v-for="(s, key) in item.title"
                    :key="key"
                    :class="{ [$style.searchColor]: s[0] === '1' }"
                    >{{ s[1] }}</span
                  >
                </a>
              </p>
              <p slot="title" :class="$style.message"
                >摘要：
                <span
                  v-for="(s, key) in item.abstractMessage"
                  :key="key"
                  :class="{ [$style.searchColor]: s[0] === '1' }"
                  >{{ s[1] }}</span
                >
              </p>
              <p slot="title" :class="$style.category"
                >所属分类：
                <span>{{ item.categoryName }}</span>
                投稿人：<span>{{ item.creatorName }} </span> 创建时间：<span>
                  {{ item.creationTime }}
                </span>
              </p>
              <div slot="title" :class="$style.label">
                <span v-for="(tag, index) in item.tagNames" :key="index">{{ tag }}</span>
              </div>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>
    </a-card>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import download from '@/common/services/download'
import KmKnowledageService from '../km-knowledage-service'

import components from './_import-components/km-fullsearch-cotent-import'

export default {
  name: 'KmFullsearchCotent',
  components,
  props: {
    searchList: {
      type: Array,
      default: () => [],
    },
    searchVal: {
      type: String,
      default: '',
    },
    total: {
      type: Number,
      default: 0,
    },
    params: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pagination: {
        onChange: (page) => {
          this.pagination.current = page
          const startPosition = page === 1 ? '1' : (5 * (page - 1)).toString()
          this.$emit('onSearch', startPosition, 'startPosition')
        },
        current: 1,
        pageSize: 5,
        total: this.total,
      },
      loading: false,
      atlasUrl: '', // 图谱系统配置
    }
  },
  watch: {
    total(val) {
      this.pagination.total = val
    },
  },
  created() {
    this.fnGetAtlasUrl()
  },
  methods: {
    // 排序
    handleSearchsort(val) {
      this.$emit('onSearch', val, 'searchSort')
    },

    // 搜索方式
    handleSearchChange(val) {
      this.$emit('onSearch', val, 'searchType')
    },

    // 导出Excel
    handleExcel() {
      const newParams = JSON.parse(JSON.stringify(this.params))
      const tar = { exportCount: this.total }
      if (newParams.length > 1) {
        Object.assign(newParams[newParams.length - 1], tar)
      } else {
        Object.assign(newParams[0], tar)
      }
      KmKnowledageService.searchExport(newParams).then((res) => {
        const queryParams = {}
        queryParams.pathInfo = '/formfile/tmp/' + parseInt(res.id) + '.xls'
        KmKnowledageService.exportDownload(queryParams).then((r) => {
          // 下载
          const url = URL.createObjectURL(r)
          const fname = res.name
          download(url, fname)
        })
      })
    },

    // 查看知识
    fnReadDoc(record) {
      window.open(`#/km-knowledage-view?id=${record.beanId}&title=${record.title}`, '_blank')
    },

    // 获取图谱系统配置
    fnGetAtlasUrl() {
      const params = { name: 'we-km$knowledgeGraph' }
      KmKnowledageService.getKmSystemConfig(params).then((res) => {
        this.atlasUrl = res.data
      })
    },

    // 查看图谱
    fnSeeAtlas(record) {
      if (this.atlasUrl) {
        window.open(`${this.atlasUrl}${record.beanId}`, '_blank')
      } else {
        Message.warning('未找到知识图谱配置信息，请联系管理员。')
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$line-height: 30px;
$label-color: #989898;
$label-background-color: #f1f2f6;
.fullsearch-content {
  .search-result {
    padding: 20px 0;
    overflow: hidden;
    border-bottom: 1px solid $border-color-base;
    .result {
      float: left;
      line-height: $line-height;
      i {
        padding: 0 5px;
        font-style: normal;
        color: $primary-color;
      }
    }
    .option {
      float: right;
      :global(.ant-select) {
        margin-right: 20px;
      }
    }
  }
  .full-result {
    .item {
      :global(.ant-list-item-meta) {
        width: 80%;
      }
      :global(.ant-list-item-meta-content) {
        width: 100%;
      }
    }
    .search-color {
      font-style: normal;
      background: #fbcecb;
    }
    p {
      font-size: $font-size-base;
      line-height: $font-size-base;
    }

    .title {
      color: $primary-color;
    }
    .message {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .category {
      span {
        margin: 0 20px 0 0;
      }
    }
    .label {
      span {
        display: inline-block;
        padding: 5px 10px;
        margin: 2px 5px;
        font-size: $font-size-base;
        color: $label-color;
        background-color: $label-background-color;
        border-radius: 15px;
      }
    }
    .btn {
      color: $primary-color;
      cursor: pointer;
      i {
        padding-left: 10px;
      }
    }
  }
}
</style>