hotline-admin/src/views/knowledge/retrieval/index.vue

<template>
	<div class="knowledge-retrieval-container layout-pd">
    <el-card shadow="never">
      <div class="input-box">
        <el-input v-model="state.queryParams.Keyword" placeholder="关键词" class="input-with-select" @input="queryList" clearable>
          <template #prepend>
            <el-select v-model="state.queryParams.RetrievalType" size="large" placeholder="请选择" style="width: 100px">
              <el-option v-for="item in state.typeList" :key="item.value" :label="item.label" :value="item.value" class="w1" />
            </el-select>
          </template>
          <template #append>
            <el-button type="primary" size="large" class="btn" :loading="state.loading" @click="queryList" v-auth="'knowledge:process:query'"
            >搜索</el-button
            >
          </template>
        </el-input>
      </div>
      <el-divider />
      <div v-loading="state.loading">
        <template v-if="state.retrievalList.length && state.queryParams.Keyword">
          <div v-for="(v, i) in state.retrievalList" :key="i" class="retrieval-content-item" @click="onPreview(v)" title="查看详情">
            <h4 class="mb10">{{ v.title }}</h4>
            <div class="text-ellipsis2" v-html="queryTitleLight(v.content)"></div>
          </div>
        </template>
        <template v-else>
          <Empty type="search" description="暂无结果" />
        </template>
      </div>

      <!-- 分页 -->
      <pagination
          :total="state.total"
          v-model:page="state.queryParams.PageIndex"
          v-model:limit="state.queryParams.PageSize"
          @pagination="queryList"
      />
    </el-card>

	</div>
</template>

<script setup lang="ts" name="knowledgeRetrieval">
import {reactive} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
import {auth} from '/@/utils/authFunction';
import {knowledgeRetrieval} from '/@/api/knowledge/retrieval';

const state = reactive<any>({
	queryParams: {
		// 查询条件
		PageIndex: 1,
		PageSize: 10,
		Keyword: '',
		RetrievalType: 0,
	},
	total: 0,
	loading: false,
	typeList: [
		{
			label: '全文',
			value: 0,
		},
		{
			label: '标题',
			value: 1,
		},
		{
			label: '正文',
			value: 2,
		},
	],
	retrievalList: [],
});
const router = useRouter();
// 预览
const onPreview = (row: any) => {
	router.push({
		name: 'knowledgePreview',
		params: {
			id: row.id,
			isAddPv: 'isAddPv',
			tagsViewName: '知识预览',
		},
	});
};
const queryTitleLight = (titleInfo: string) => {
  return titleInfo.replace(
      new RegExp(state.queryParams.Keyword, 'g'),
      `<span style="color:var(--el-color-danger)">${state.queryParams.Keyword}</span>`
  );
};
const queryList = () => {
	if (!auth('knowledge:process:query')) ElMessage.error('抱歉，您没有权限知识检索');
	else {
    if(!state.queryParams.Keyword) {
      state.retrievalList = [];
      state.total = 0;
      return;
    }
		state.loading = true;
    state.retrievalList = [];
    state.total = 0;
		knowledgeRetrieval(state.queryParams)
			.then((res: any) => {
				state.retrievalList = res.result?.items ?? [];
				state.total = res.result?.total ?? 0;
				state.loading = false;
			})
			.catch(() => {
				state.loading = false;
        state.retrievalList = [];
        state.total = 0;
			});
	}
}
</script>

<style scoped lang="scss">
.knowledge-retrieval-container {
	.input-box {
		width: 80%;
		margin: 10px auto;
		.input-with-select {
			:deep(.el-input-group__prepend) {
				background-color: var(--el-fill-color-blank);
			}
		}
	}
	.retrieval-content {
		&-item {
			border: var(--el-border);
			border-radius: var(--el-border-radius-base);
			padding: 20px;
			margin-bottom: 20px;
			cursor: pointer;
			&:last-child {
				margin-bottom: 0;
			}
			&:hover {
				box-shadow: 0 0 0 1px var(--el-color-primary) inset;
			}
		}
	}
}
</style>