<template>
|
<AHMContainer type="card">
|
<template #aside>
|
<LeftTreeByMgr
|
v-loading="treeLoading"
|
class="h100"
|
ref="leftTreeRef"
|
:defaultProps="{
|
id: 'group_id',
|
label: 'group_name',
|
children: 'children',
|
}"
|
defaultExpandAll
|
:treedata="listTreeData"
|
title-name="分组列表"
|
:show-more-operate="false"
|
:show-add="false"
|
:current-node-key="currentListID"
|
:node-icon="() => 'ele-Document'"
|
@click="handleClickNode"
|
>
|
</LeftTreeByMgr>
|
</template>
|
|
<template #header>
|
<!-- 查询、重置、排序、增加表单 -->
|
<el-form :inline="true" :model="graphQueryParams">
|
<el-form-item label="名称" prop="title">
|
<el-input v-model="graphQueryParams.title" style="width: 226.4px" placeholder="文件名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
|
<el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
|
<el-button icon="ele-Plus" @click="importData()" type="primary"> 导入数据 </el-button>
|
</el-form-item>
|
</el-form></template
|
>
|
<template #main
|
><!-- 数据展示表格 -->
|
<div class="flex-auto flex-column h-full" v-if="state.isShowTrendFun">
|
<el-table
|
v-loading="formulaTableLoading"
|
ref="draggableFormulaTableRef"
|
border
|
row-key="id"
|
class="flex-auto"
|
:row-class-name="isFormulaTableDrag ? 'cursor-move' : 'cursor-pointer'"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="displayTableData"
|
highlight-current-row
|
>
|
<el-table-column type="index" label="序号" width="55" fixed="left" align="center"></el-table-column>
|
<el-table-column prop="name" label="文件名称" fixed="left" show-overflow-tooltip align="left" />
|
<el-table-column prop="type" width="120" label="文件类型" show-overflow-tooltip align="center" />
|
<el-table-column prop="size" width="120" label="文件大小" show-overflow-tooltip align="center" />
|
<el-table-column prop="time" label="上传时间" show-overflow-tooltip width="280" align="center"></el-table-column>
|
<el-table-column label="操作" width="120" fixed="right" show-overflow-tooltip align="center">
|
<template #default="scope">
|
<div class="space-x-2.5">
|
<el-tooltip effect="dark" content="文本" placement="top">
|
<i
|
class="ywifont ywicon-wendang !text-[17px] cursor-pointer text-blue-400"
|
@click="openOperateDemoPage(scope.row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="分块" placement="top">
|
<i
|
class="ywifont ywicon-01wenjianfenkuai !text-[17px] cursor-pointer text-blue-400"
|
@click="handleViewKnowledgeFile(scope.row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="删除" placement="top">
|
<i
|
class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer"
|
@click="deleteCurrentFormulaRow(scope.row)"
|
></i>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
</AHMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
import * as agentGroupApi from '/@/api/ai/agentGroup';
|
import { delete_knowledge_file, list_knowledge_file } from '/@/api/knowledge/group';
|
import AHMContainer from '/@/components/layout/AHMContainer.vue';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import mittBus from '/@/utils/mitt';
|
import { useCompRef } from '/@/utils/types';
|
import { convertFileSize, convertListToTree } from '/@/utils/util';
|
import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics';
|
const state = reactive({
|
tableParams: {
|
PageIndex: 1,
|
PageSize: 10,
|
},
|
tableTotal: 0,
|
isShowTrendFun: true,
|
showViewBack: false,
|
detailTitle: '',
|
});
|
//#region ====================== 左侧树数据，tree init ======================
|
const leftTreeRef = useCompRef(LeftTreeByMgr);
|
const treeLoading = ref(false);
|
const listData = ref([]);
|
const currentListID = computed(() => currentNode.value?.group_id);
|
const currentNode = ref(null);
|
const listTreeData = computed(() => {
|
const byParentData = convertListToTree(listData.value, {
|
ID: 'group_id',
|
ParentID: 'p_group_id',
|
Children: 'children',
|
});
|
const result = [];
|
byParentData.forEach((item) => {
|
if (item.group_type == OptClassificationMap[classificationEnum.Knowledge]) {
|
result.push(item);
|
}
|
});
|
return result;
|
});
|
|
const handleClickNode = (data) => {
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.id);
|
});
|
currentNode.value = data;
|
getCategoryTableData();
|
};
|
const getListTreeData = async () => {
|
const res = await agentGroupApi.getSceneGroupTreeByPost();
|
listData.value = res.groups || [];
|
const firstListTreeNode = listTreeData.value[0];
|
if (firstListTreeNode) {
|
handleClickNode(firstListTreeNode);
|
} else {
|
categoryTableData.value = [];
|
currentNode.value = null;
|
}
|
};
|
//#endregion
|
//#region ====================== 获取、删除表格数据 ======================
|
const formulaTableLoading = ref(false);
|
const categoryTableData = ref([]);
|
const isFormulaTableDrag = ref(false);
|
const getCategoryTableData = async () => {
|
const res = await list_knowledge_file({
|
group_id: currentListID.value,
|
}).finally(() => {});
|
if (res?.json_ok) {
|
const resData = (res.values || []) as [];
|
resData.forEach((item) => {
|
item.size = convertFileSize(item.size);
|
});
|
categoryTableData.value = resData;
|
} else {
|
ElMessage.error('获取文档列表失败' + (res?.json_msg ? `，${JSON.stringify(res.json_msg)}` : ''));
|
}
|
};
|
const deleteCurrentFormulaRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除文档列表：【${row.name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await delete_knowledge_file({
|
file_id: row.id,
|
});
|
|
if (res.json_ok) {
|
ElMessage.success('删除文档列表成功');
|
const index = categoryTableData.value.findIndex((d) => d.id === row.id);
|
categoryTableData.value.splice(index, 1);
|
} else {
|
ElMessage.error('删除文档列表失败' + (res?.json_msg ? `，${JSON.stringify(res.json_msg)}` : ''));
|
}
|
});
|
};
|
//#endregion
|
|
//#endregion
|
|
//#region ====================== 搜索表格，对表格排序 ======================
|
const graphQueryParams = ref({
|
title: '',
|
});
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(categoryTableData, graphQueryParams, () => {
|
displayTableData.value = categoryTableData.value;
|
});
|
//#endregion
|
|
//#region ====================== 跳转文档详情页面 init======================
|
const router = useRouter();
|
const openOperateDemoPage = (row: any) => {
|
router.push({
|
name: 'ViewFile',
|
query: {
|
id: row.id,
|
},
|
});
|
};
|
const handleViewKnowledgeFile = (row) => {
|
router.push({
|
name: 'ViewSegmentationFile',
|
query: {
|
id: row.id,
|
},
|
});
|
};
|
//导入数据
|
const importData = () => {
|
router.push({
|
name: 'AddGraph',
|
query: {
|
group_id: currentListID.value,
|
title: currentNode.value.group_name,
|
},
|
});
|
};
|
//#endregion
|
//#region ====================== 挂载时获取初始数据 ======================
|
onMounted(() => {
|
getListTreeData();
|
mittBus.on('addGraphObj', (obj) => {
|
categoryTableData.value.push(obj);
|
});
|
});
|
//#endregion
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-card__body) {
|
padding-bottom: unset;
|
}
|
</style>
|
