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

<template>
	<div class="knowledge-container">
		<el-tabs v-model="state.queryParams.Attribution" @tab-change="handleQuery">
			<el-tab-pane label="推荐知识库" name=""> </el-tab-pane>
			<el-tab-pane label="中心知识库" name="中心知识库"> </el-tab-pane>
			<el-tab-pane label="部门知识库" name="部门知识库"> </el-tab-pane>
		</el-tabs>
		<div class="knowledge-input">
			<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable class="mr10 w100" @keyup.enter="knowledgeRetrievalPaged">
				<template #prefix>
					<SvgIcon name="ele-Search" size="16px" />
				</template>
				<template #append>
					<el-button type="primary" @click="knowledgeRetrievalPaged" class="search-button" size="small" round
					><SvgIcon name="ele-Search" class="mr4" /> 查询
					</el-button>
				</template>
			</el-input>
		</div>
		<div class="mt5" style="display: flex; flex-wrap: wrap; justify-content: space-between" v-if="state.queryParams.Attribution === ''">
			<div style="display: flex">
				<div style="height: 32px; line-height: 32px">推荐类型：</div>
				<el-radio-group v-model="state.queryParams.recommendType" @change="changeRecommendType">
					<el-radio value="1">关键词推荐</el-radio>
					<el-radio value="2">热点推荐</el-radio>
				</el-radio-group>
			</div>
			<div style="display: flex">
				<div style="height: 32px; line-height: 32px">排序：</div>
				<el-radio-group v-model="state.queryParams.Sort" @change="handleQuery">
					<el-radio value="1">浏览量</el-radio>
					<el-radio value="2">收藏量</el-radio>
					<el-radio value="3">创建时间</el-radio>
				</el-radio-group>
			</div>
		</div>
		<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)">
					<div class="mb10" style="display: flex">
						<p class="text-no-wrap" style="flex: 1">{{ v.title }}</p>
						<el-button type="primary" size="small" @click.stop="changeYYType(v)" v-if="['ZiGong'].includes(themeConfig.appScope)">{{
								v.isChoose ? '取消引用' : '引用'
							}}</el-button>
					</div>
					<!--					<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
		@pagination="knowledgeRetrievalPaged"
		:total="state.knowledgeTotal"
		v-model:current-page="state.queryParams.PageIndex"
		v-model:page-size="state.queryParams.PageSize"
		layout="prev, pager, next"
		class="pt10"
	/>
</template>
<script setup lang="ts" name="orderAcceptKnowledge">
// 定义变量内容
import { onMounted, reactive, defineAsyncComponent, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { formatDate } from '@/utils/formatTime';
import { knowledgeRetrieval, knowledgeRetrievalAccept } from '@/api/knowledge/retrieval';
import { throttle } from '@/utils/tools';
import { useThemeConfig } from '@/stores/themeConfig';
import { storeToRefs } from 'pinia';
import { removeDuplicate } from '@/utils/arrayOperation';

const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页

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

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive<any>({
	loading: false, // 知识检索加载状态
	knowledgeList: [],
	knowledgeTotal: 0,
	queryParams: {
		PageIndex: 1,
		PageSize: 5,
		Keyword: null,
		RetrievalType: 0, // 检索类型
		Attribution: '',
		Sort: '1',
		recommendType: '1',
	},
});
// 手动查询，将页码设置为1
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	knowledgeRetrievalPaged();
};
//  知识查询
const knowledgeRetrievalPaged = throttle(async () => {
	try {
		state.loading = true;
		let request: EmptyObjectType = {};
		if (state.queryParams.recommendType === '1') {
			//关键词
			request = {
				...state.queryParams,
				Content: props.formData.content,
			};

			Reflect.deleteProperty(request, 'HotspotId');
		}
		if (state.queryParams.recommendType === '2') {
			//关键词
			request = {
				...state.queryParams,
				HotspotId: props.formData.hotspotId,
			};
			Reflect.deleteProperty(request, 'Content');
		}
		const { result } = await knowledgeRetrievalAccept(request);
		state.knowledgeList = result?.items ?? [];
		state.knowledgeTotal = result?.total ?? 0;
		if (props.formData.knowledgeQuote) {
			for (let i of state.knowledgeList) {
				for (let j of props.formData.knowledgeQuote) {
					if (i.id === j.key) {
						i.isChoose = true;
					}
				}
			}
		}
		state.loading = false;
	} catch (error) {
		console.log(error);
		state.loading = false;
	}
}, 300);
const router = useRouter(); //
// 预览知识
const onPreview = (row: any) => {
	router.push({
		name: 'knowledgePreview',
		params: {
			id: row.id,
			tagsViewName: '知识查看',
		},
	});
};
// 提供外部查询
const HotspotName = ref('');
const querySearch = async (name: string) => {
	try {
		// state.queryParams.Keyword = name;
		HotspotName.value = name;
		state.loading = true;
		const request = {
			...state.queryParams,
			HotspotName: name,
		};
		const res: any = await knowledgeRetrieval(request);
		state.knowledgeList = res.result?.items ?? [];
		state.knowledgeTotal = res.result?.total ?? 0;
		if (props.formData.knowledgeQuote) {
			for (let i of state.knowledgeList) {
				for (let j of props.formData.knowledgeQuote) {
					if (i.id === j.key) {
						i.isChoose = true;
					}
				}
			}
		}
		state.loading = false;
	} catch (error) {
		console.log(error);
		state.loading = false;
	}
};
// 切换推荐类型查询
const changeRecommendType = () => {
	knowledgeRetrievalPaged();
};
const emit = defineEmits(['changeYYType']);
const chooseArray = ref<EmptyArrayType>([]);
const changeYYType = (row: any) => {
	// 为了实现分页也能选中
	row.isChoose = !row.isChoose;
	if (row.isChoose) {
		chooseArray.value.push(row);
		removeDuplicate(chooseArray.value, row.id);
	}
	// 获取选中的数据
	const data = chooseArray.value.filter((v: any) => v.isChoose);
	const reData = data.map((v: any) => {
		return {
			key: v.id,
			value: v.title,
		};
	});
	console.log(reData);
	emit('changeYYType', reData);
};
watch(
	() => props.formData.hotspotId,
	() => {
		knowledgeRetrievalPaged();
	},
	{ immediate: true, deep: true }
);
onMounted(() => {
	knowledgeRetrievalPaged();
});
defineExpose({
	knowledgeRetrievalPaged,
	querySearch,
});
</script>

<style scoped lang="scss">
.knowledge-container {
	position: relative;
	.el-radio {
		margin-right: 10px;
		line-height: 32px;
	}
	.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>