hotline-web/src/views/knowledge/browse/index.vue

<template>
	<div class="knowledge-browse-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<splitpanes class="h100" Vertical>
				<pane min-size="16" max-size="25" size="16">
					<el-input v-model="filterText" placeholder="请填写知识分类名称" class="input-with-select mb10" clearable @input="onQueryChanged" :disabled="state.typeLoading">
					</el-input>
					<el-scrollbar style="height: calc(100% - 40px);'" ref="scrollBarRef">
						<el-skeleton :loading="state.typeLoading" animated :rows="10">
							<template #default>
								<el-auto-resizer class="table">
									<template #default="{ height }">
										<el-tree-v2
											:data="state.knowledgeOptions"
											highlight-current
											:expand-on-click-node="false"
											:props="{ children: 'children', label: 'name' }"
											@node-click="handleNodeClick"
											ref="typeRef"
											:filter-method="filterNodeType"
											:item-size="32"
											empty-text="暂无知识分类"
											:height="height"
											node-key="id"
										>
											<template #default="{ node }">
												<text-tooltip :content="node.label" effect="dark" placement="top"></text-tooltip>
											</template>
										</el-tree-v2>
									</template>
								</el-auto-resizer>
							</template>
						</el-skeleton>
					</el-scrollbar>
				</pane>
				<pane class="h100" style="display: flex; flex-direction: column; flex: 1">
					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent :disabled="state.tableLoading">
						<el-form-item prop="Title">
							<el-input v-model="state.queryParams.Title" placeholder="标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
						</el-form-item>
						<el-form-item prop="CreatorName">
							<el-input v-model="state.queryParams.CreatorName" placeholder="浏览人" clearable @keyup.enter="handleQuery" class="keyword-input" />
						</el-form-item>
						<el-form-item label="浏览时间" prop="crTime">
							<el-date-picker
								v-model="state.queryParams.crTime"
								type="datetimerange"
								unlink-panels
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								:shortcuts="shortcuts"
								@change="handleQuery"
								value-format="YYYY-MM-DD[T]HH:mm:ss"
								:default-time="defaultTimeStartEnd"
							/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="handleQuery" :loading="state.tableLoading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
							<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.tableLoading">
								<SvgIcon name="ele-Refresh" class="mr5" />重置
							</el-button>
						</el-form-item>
					</el-form>
					<vxe-toolbar
						ref="toolbarRef"
						:loading="state.tableLoading"
						custom
						:refresh="{
							queryMethod: handleQuery,
						}"
						:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
					>
					</vxe-toolbar>
					<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
						<vxe-table
							border
							:loading="state.tableLoading"
							:data="state.tableData"
							:column-config="{ resizable: true }"
							:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
							ref="tableRef"
							height="auto"
							auto-resize
							show-overflow
							:scrollY="{ enabled: true, gt: 100 }"
							id="knowledgeBrowse"
							:custom-config="{ storage: true }"
							showHeaderOverflow
							:params="{ exportMethod: KnowledgePageViewExport, exportParams: requestParams }"
						>
							<vxe-column field="knowledgeTitle" title="标题" min-width="200"></vxe-column>
							<vxe-column field="creatorName" title="浏览人" min-width="120"></vxe-column>
							<vxe-column field="browseTime" title="浏览时长(分)" min-width="150"></vxe-column>
							<vxe-column field="creationTime" title="浏览时间" width="160">
								<template #default="{ row }">
									{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
								</template>
							</vxe-column>
						</vxe-table>
					</div>
					<pagination
						@pagination="queryList"
						:total="state.total"
						v-model:current-page="state.queryParams.PageIndex"
						v-model:page-size="state.queryParams.PageSize"
						:disabled="state.tableLoading"
					/>
				</pane>
			</splitpanes>
		</div>
	</div>
</template>

<script lang="tsx" setup name="knowledgeBrowse">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import Other from '@/utils/other';
import { treeList } from '@/api/knowledge/type';
import { formatDate } from '@/utils/formatTime';
import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
import { KnowledgePageViewExport, KnowledgePageViewPaged } from '@/api/knowledge/browse';

const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
// 定义变量内容
const state = reactive<any>({
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 20, // 每页条数
		Title: null, // 标题
		CreatorName: null, // 浏览人
		crTime: [], // 创建时间
		StartTime: null,
		EndTime: null,
		KnowledgeTypeId: null, // 知识分类Id
	},
	tableData: [], // 表格数据
	total: 0, // 总条数
	loading: false, // 加载状态
	tableLoading: false, // 表格加载状态
	knowledgeOptions: [], //知识库类型数据
});
const ruleFormRef = ref<FormInstance>(); //表单ref
const filterText = ref(''); // 搜索部门名称
const typeRef = ref<RefType>(); // 树形ref
const onQueryChanged = (query: string) => {
	if (query) {
		typeRef.value!.filter(query);
	} else {
		typeRef.value!.filter(query);
		typeRef.value?.setExpandedKeys([]);
	}
};
// 搜索分类名称
const filterNodeType = (value: string, data: any) => {
	if (!value) return true;
	return data.name.includes(value);
};

/** 搜索按钮操作 节流操作 */
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
/** 获取用户列表 */
const requestParams = ref<EmptyObjectType>({});
const queryList = () => {
	state.tableLoading = true;
	requestParams.value = Other.deepClone(state.queryParams);
	requestParams.value.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
	requestParams.value.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
	Reflect.deleteProperty(requestParams.value, 'crTime');
	KnowledgePageViewPaged(requestParams.value)
		.then((response: any) => {
			state.tableData = response?.result.items ?? [];
			state.total = response?.result.total;
			state.tableLoading = false;
		})
		.catch(() => {
			state.tableLoading = false;
		});
};
// 点击节点
const handleNodeClick = (data: any) => {
	state.queryParams.KnowledgeTypeId = data.id;
	queryList();
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	state.queryParams.KnowledgeTypeId = null;
	typeRef.value?.setCurrentKey(null);
	handleQuery();
};
// 获取知识分类
const getKnowledgeType = async () => {
	state.typeLoading = true;
	try {
		const res: any = await treeList({ IsEnable: true });
		state.knowledgeOptions = res.result ?? [];
		state.typeLoading = false;
	} catch (error) {
		state.typeLoading = false;
	}
};
const toolbarRef = ref<RefType>();
const tableRef = ref<RefType>();
onMounted(() => {
	queryList();
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
	getKnowledgeType();
});
</script>