hotline-web/src/views/todo/seats/accept/Knowledge.vue

<template>
	<div class="knowledge-container">
		<el-tabs v-model="state.queryParams.Attribution" @tab-change="knowledgeRetrievalPaged">
			<el-tab-pane label="中心知识库" name="中心知识库"> </el-tab-pane>
			<el-tab-pane label="部门知识库" name="部门知识库"> </el-tab-pane>
		</el-tabs>
		<el-autocomplete
			v-model="state.queryParams.Keyword"
			:fetch-suggestions="querySearchAsync"
			placeholder="关键词"
			@select="handleSelect"
			class="mr10 w100 knowledge-input"
			clearable
			value-key="title"
		>
			<template #prefix>
				<SvgIcon name="ele-Search" size="16px" />
			</template>
			<template #suffix>
				<el-button class="knowledge-search-button" type="primary" :loading="state.loading" round @click="knowledgeRetrievalPaged">
					<SvgIcon name="ele-Search" size="16px" color="#fff" />
				</el-button>
			</template>
		</el-autocomplete>
		<div class="mt10 retrieval-content" v-loading="state.loading">
			<el-empty description="暂无数据" v-if="!state.knowledgeList.length" class="mb20">
				<template #image>
					<span></span>
				</template>
			</el-empty>
			<el-scrollbar>
				<div v-for="(v, i) in state.knowledgeList" :key="i" class="retrieval-content-item" @click="onPreview(v)">
					<h4 class="mb10 text-no-wrap">{{ v.title }}</h4>
					<div class="text-ellipsis2">{{ v.summary }}</div>
					<div class="flex-center-between mt10 color-info">
						<div>
							<span class="mr10">创建部门：{{ v.creatorOrgName }}</span>
							<span>创建时间：{{ formatDate(v.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
						</div>
						<div class="flex-center-align">
							<span class="flex-center-align"><SvgIcon name="ele-StarFilled" size="18px" class="mr3" />{{ v.score }}</span>
<!--							<span class="flex-center-align ml10"><SvgIcon name="ele-ChatDotSquare" size="16px" class="mr3" />{{ v.commentNum }}</span>-->
							<span class="flex-center-align ml10"><SvgIcon name="ele-View" size="16px" class="mr3" />{{ v.pageView }}</span>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
	<!-- 分页 -->
	<pagination
		:total="state.knowledgeTotal"
		v-model:page="state.queryParams.PageIndex"
		v-model:limit="state.queryParams.PageSize"
		@pagination="knowledgeRetrievalPaged"
		:pageSizes="[5, 10, 15, 20]"
		layout="total, prev, pager, next"
		class="pt10"
	/>
</template>
<script setup lang="ts" name="orderAcceptKnowledge">
// 定义变量内容
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { formatDate } from '/@/utils/formatTime';
import { knowledgeRetrieval } from '/@/api/knowledge/retrieval';
import { ElMessage } from 'element-plus';

const props = defineProps({
	type: {
		// 知识库类型 （中心|部门）
		type: String,
		default: '',
	},
	formData: {
		// 表单填写的数据
		type: Object,
		default: () => {
			return {};
		},
	},
});

const state = reactive<any>({
	loading: false, // 知识检索加载状态
	knowledgeList: [],
	knowledgeTotal: 0,
	queryParams: {
		PageIndex: 1,
		PageSize: 5,
		Keyword: null,
		Attribution: '中心知识库',
	},
});
//  知识检索
const knowledgeRetrievalPaged = async () => {
	// state.queryParams.Keyword = props.formData.hotSpotName ?? '';
	try {
		state.loading = true;
		const res: any = await knowledgeRetrieval(state.queryParams);
		state.knowledgeList = res.result?.items ?? [];
		state.knowledgeTotal = res.result?.total ?? 0;
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
const querySearchAsync = (queryString: string | null, cb: (arg: any) => void) => {
	if (queryString) {
		state.loading = true;
		knowledgeRetrieval({
			...state.queryParams,
			Keyword: queryString,
		})
			.then((res: any) => {
				state.loading = false;
				cb(res.result?.items ?? []);
			})
			.catch(() => {
				state.loading = false;
				cb([]);
			});
	} else {
		cb([]);
	}
};
const handleSelect = (item: Record<string, any>) => {
	state.queryParams.Keyword = item.title;
	knowledgeRetrievalPaged();
};
const router = useRouter(); // 路由
const route = useRoute(); // 路由
// 预览知识
const onPreview = (row: any) => {
	if (!router.hasRoute('knowledgePreview')) {
		ElMessage.warning('未找到知识查看页面');
		return;
	}
	router.push({
		name: 'knowledgePreview',
		params: {
			id: row.id,
			tagsViewName: '知识查看',
		},
	});
};
onMounted(() => {
	knowledgeRetrievalPaged();
});
defineExpose({
	knowledgeRetrievalPaged,
});
</script>

<style scoped lang="scss">
.knowledge-container {
	position: relative;
	:deep(.el-input__wrapper) {
		border-radius: 20px;
		background: var(--hotline-bg-main-color);
	}
	.knowledge-search-button {
		height: calc(100% - 6px);
	}

	.retrieval-content {
		&-item {
			border-bottom: var(--el-border);
			padding: 5px 15px;
			margin-bottom: 10px;
			cursor: pointer;
			&:last-child {
				margin-bottom: 0;
				border: none;
			}
			&:hover {
				color: var(--el-color-primary);
			}
		}
	}
}
</style>