cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可信代码库-AI大模型删除及批量删除功能对接与开发

Browse Source
This commit is contained in:
付民康
2025-06-03 15:59:59 +08:00
parent d18dfdd0c1
commit f08f8696d4
2 changed files with 263 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
src/views/Jyh/AI/Home/components/ViewHistoryAside/BatchManageModal.vue
View File

@@ -2,23 +2,33 @@
<d-modal v-model="visible" title="批量管理" :style="{ width: '800px' }">
<d-tabs class="jyh-tabs-4" type="wrapped" v-model="selectTab">
<d-tab id="dhls" title="对话历史">
<d-search icon-position="left" style="width: '100%'" placeholder="请输入搜索软件名称" v-model="searchText" @change="handleSearch"></d-search>
<d-search
icon-position="left"
style="width: 100%"
placeholder="请输入搜索内容"
v-model="searchText"
@change="handleSearch"
></d-search>
<div class="mt-3 px-20">
<d-table
class="jyh-table"
:data="filteredTableData"
:data="currentDhlsData"
row-key="id"
@check-change="treeCheckChange"
:pagination="pagination"
@check-change="handleCheckChange('dhls')"
:pagination="false"
:indent="32"
>
<d-column type="checkable" width="40" :checkable="checkable" reserve-check></d-column>
<d-column field="conversationContent" header="对话内容" show-overflow-tooltip></d-column>
<d-column field="agent" header="智能体" show-overflow-tooltip></d-column>
<d-column field="conversationTime" header="发起对话时间" show-overflow-tooltip></d-column>
<d-column field="title" header="对话内容" show-overflow-tooltip></d-column>
<!-- <d-column field="agent" header="智能体" show-overflow-tooltip></d-column>-->
<d-column field="createTime" header="发起对话时间" show-overflow-tooltip></d-column>
<d-column width="80" field="operation" header="操作">
<template #default="scope">
<d-icon style="cursor: pointer" @click="handleDelete(scope.row)" name="delete"></d-icon>
<d-icon
style="cursor: pointer"
@click="handleDelete([scope.row.conversationId], 'history')"
name="delete"
></d-icon>
</template>
</d-column>
</d-table>
@@ -26,46 +36,69 @@
<div class="mt-20 mb-20 flex justify-end">
<d-pagination
size="md"
:page-size="pageSize"
:total="dhlsList.length"
v-model:current-page="currentPage"
:page-size-options="[10, 20, 50]"
:total="pager.total"
v-model:pageSize="pager.pageSize"
v-model:pageIndex="pager.pageIndex"
:max-items="5"
:can-change-page-size="true"
:can-view-total="true"
@page-size-change="handlePageSizeChange"
@current-page-change="handlePageChange"
total-item-text="总计"
@page-index-change="getList()"
@page-size-change="getList()"
/>
</div>
</d-tab>
<d-tab id="scdh" title="收藏对话">
<d-search icon-position="left" style="width: '100%'" placeholder="请输入搜索软件名称" v-model="searchText" @change="handleSearch"></d-search>
<d-search
icon-position="left"
style="width: 100%"
placeholder="请输入搜索内容"
v-model="searchText"
@change="handleSearch"
></d-search>
<div class="mt-3 px-20">
<d-table
class="jyh-table"
:data="filteredTableData"
:data="currentCollectionData"
row-key="id"
@check-change="treeCheckChange"
:pagination="pagination"
@check-change="handleCheckChange('scdh')"
:pagination="false"
:indent="32"
>
<d-column type="checkable" width="40" :checkable="checkable" reserve-check></d-column>
<d-column field="conversationContent" header="对话内容" show-overflow-tooltip></d-column>
<d-column field="agent" header="智能体" show-overflow-tooltip></d-column>
<d-column field="conversationTime" header="发起对话时间" show-overflow-tooltip></d-column>
<d-column field="title" header="对话内容" show-overflow-tooltip></d-column>
<d-column field="createTime" header="发起对话时间" show-overflow-tooltip></d-column>
<d-column width="80" field="operation" header="操作">
<template #default="scope">
<d-icon style="cursor: pointer" @click="handleDelete(scope.row)" name="delete"></d-icon>
<d-icon
style="cursor: pointer"
@click="handleDelete([scope.row.conversationId], 'collection')"
name="delete"
></d-icon>
</template>
</d-column>
</d-table>
</div>
<div class="mt-20 mb-20 flex justify-end">
<d-pagination
size="md"
:page-size="pageSize"
:total="collectionList.length"
v-model:current-page="currentPage"
:page-size-options="[10, 20, 50]"
@page-size-change="handlePageSizeChange"
@current-page-change="handlePageChange"
total-item-text="总计"
/>
</div>
</d-tab>
</d-tabs>
<template #footer>
<div style="text-align: center; margin-bottom: 16px;">
<d-button variant="solid" class="mr-[8px]" @click="handleDeleteSelected">
<d-button
variant="solid"
class="mr-8"
@click="handleBatchDelete"
:disabled="!selectedRowKeys.length"
>
删除所选
</d-button>
<d-button @click="handleCancel">取消</d-button>
@@ -75,137 +108,191 @@
</template>
<script setup>
import { ref, defineExpose, reactive } from 'vue';
import { ref, computed, watch } from 'vue';
import axios from 'axios';
import { Message } from 'vue-devui/message';
const selectTab = ref('dhls');
// 控制弹框显示
// 接收父组件传递的用户名
const props = defineProps(['username']);
// 模态框状态
const visible = ref(false);
// 搜索文本
const selectTab = ref('dhls');
const searchText = ref('');
// 表格数据（模拟数据）
const tableData = ref([
{
id: 1,
conversationContent: '这是对话内容1',
agent: '智能体1',
conversationTime: '2024-01-01 10:00:00',
},
{
id: 2,
conversationContent: '这是对话内容2',
agent: '智能体2',
conversationTime: '2024-01-02 11:00:00',
},
]);
// 过滤后的表格数据
const filteredTableData = ref(tableData.value);
// 分页配置
const pagination = ref({
total: tableData.value.length,
current: 1,
pageSize: 10,
});
// 分页器数据
const pager = reactive({
pageIndex: 1,
pageSize: 10,
total: tableData.value.length,
});
// 表格复选框是否可勾选
const checkable = ref(true);
// 复选框选中状态变化时的回调函数
const treeCheckChange = (checkedRowKeys) => {
console.log('选中的行键:', checkedRowKeys);
};
// 数据列表
const dhlsList = ref([]); // 对话历史数据
const collectionList = ref([]); // 收藏对话数据
// 搜索按钮点击事件处理函数
const handleSearch = () => {
// 简单的过滤逻辑，根据搜索文本过滤表格数据
const filtered = tableData.value.filter((row) => {
return row.conversationContent.includes(searchText.value);
// 分页状态
const pageSize = ref(10); // 每页显示条数
const currentPage = ref(1); // 当前页码
// 计算当前页数据（对话历史）
const currentDhlsData = computed(() => {
const filteredData = dhlsList.value.filter(row =>
row.title.includes(searchText.value)
);
const start = (currentPage.value - 1) * pageSize.value;
return filteredData.slice(start, start + pageSize.value);
});
filteredTableData.value = filtered;
pagination.value.total = filtered.length;
pager.total = filtered.length;
pager.pageIndex = 1;
pagination.value.current = 1;
};
// 设置选中行
const setSelectRow = (row) => {
console.log('选中的行:', row);
};
// 计算当前页数据（收藏对话）
const currentCollectionData = computed(() => {
const filteredData = collectionList.value.filter(row =>
row.title.includes(searchText.value)
);
const start = (currentPage.value - 1) * pageSize.value;
return filteredData.slice(start, start + pageSize.value);
});
// 删除按钮点击事件处理函数
const handleDelete = (row) => {
// 从表格数据中删除该行
const index = tableData.value.findIndex((r) => r.id === row.id);
if (index > -1) {
tableData.value.splice(index, 1);
filteredTableData.value = tableData.value;
pagination.value.total = filteredTableData.value.length;
pager.total = filteredTableData.value.length;
// 接口调用 - 对话历史
const getQuestionHistory = async () => {
if (!props.username) {
Message.error('请先登录');
return;
}
try {
const { data } = await axios.get(
`${import.meta.env.VITE_AI_API_HOST}/api/conversationList?userId=${props.username}&list_type=history`
);
if (data.conversationList) {
dhlsList.value = data.conversationList
}
} catch (error) {
Message.error('获取对话历史失败');
}
};
// 取消按钮点击事件处理函数
// 接口调用 - 收藏对话
const getQuestionCollection = async () => {
if (!props.username) {
Message.error('请先登录');
return;
}
try {
const { data } = await axios.get(
`${import.meta.env.VITE_AI_API_HOST}/api/conversationList?userId=${props.username}&list_type=collection`
);
if (data.conversationList) {
collectionList.value = data.conversationList
}
} catch (error) {
Message.error('获取收藏对话失败');
}
};
// 打开模态框时加载数据
const openModal = async () => {
visible.value = true;
await getQuestionHistory();
await getQuestionCollection();
currentPage.value = 1; // 重置页码
};
// 搜索处理
const handleSearch = () => {
currentPage.value = 1; // 搜索后重置到第一页
};
// 分页大小变化
const handlePageSizeChange = (size) => {
pageSize.value = size;
currentPage.value = 1;
};
// 页码变化
const handlePageChange = (page) => {
currentPage.value = page;
};
// 选中的行ID
const selectedRowKeys = ref([]);
// 复选框选中状态变化
const handleCheckChange = (tabType, checkedKeys) => {
if (tabType === 'dhls') {
selectedRowKeys.value = checkedKeys;
} else {
selectedRowKeys.value = checkedKeys;
}
};
// 删除对话
const handleDelete = async (conversationIds, tabType) => {
if (!props.username) {
Message.error('请先登录');
return;
}
try {
const res = await axios.post(
`${import.meta.env.VITE_AI_API_HOST}/api/deleteConversation`,
{
userId: props.username,
conversationIdList: conversationIds
}
);
if (res.data.code === 20000) {
Message.success(res.data.message || '删除成功');
getQuestionHistory()
getQuestionCollection()
selectedRowKeys.value = []; // 清空选中项
} else {
Message.error(res.data.message || '删除失败');
}
} catch (error) {
console.error('删除对话失败:', error);
Message.error('网络错误，请重试');
}
};
// 批量删除
const handleBatchDelete = () => {
if (!selectedRowKeys.value.length) {
Message.warning('请先选择要删除的对话');
return;
}
// 确认删除提示
Message.confirm({
title: '确认删除',
content: `确定要删除选中的 ${selectedRowKeys.value.length} 条对话吗？`,
onConfirm: () => {
handleDelete(selectedRowKeys.value, selectTab.value);
}
});
};
// 关闭模态框
const handleCancel = () => {
visible.value = false;
};
// 确定按钮点击事件处理函数
const handleConfirm = () => {
console.log('确定按钮点击');
};
// 打开模态框
const openModal = () => {
visible.value = true;
};
// 关闭模态框
const handleClose = () => {
visible.value = false;
};
// 删除所选按钮点击事件处理函数
const handleDeleteSelected = () => {
const checkedRowKeys = [];
filteredTableData.value.forEach((row, index) => {
// 这里假设表格有一个属性来标记是否选中，比如isChecked
if (row.isChecked) {
checkedRowKeys.push(row.id);
}
});
checkedRowKeys.forEach((id) => {
const index = tableData.value.findIndex((r) => r.id === id);
if (index > -1) {
tableData.value.splice(index, 1);
}
});
filteredTableData.value = tableData.value;
pagination.value.total = filteredTableData.value.length;
pager.total = filteredTableData.value.length;
console.log('删除所选按钮点击');
};
// 暴露方法，供父组件调用
// 暴露方法供父组件调用
defineExpose({
openModal,
openModal
});
</script>
<style scoped>
.jyh-table {
width: 100%;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.d-table-cell {
padding: 12px 8px;
font-size: 14px;
color: #333;
}
.d-pagination {
margin-right: 20px;
}
.search-container {
display: flex;
align-items: center;
margin-bottom: 16px;
}
</style>

51
src/views/Jyh/AI/Home/components/ViewHistoryAside/ViewHistoryAside.vue
View File

@@ -66,7 +66,7 @@
/>
{{ item.is_collected ? '取消收藏' : '加入收藏' }}
</li>
<li class="menu-item" @click="handleDelete(item)">
<li class="menu-item" @click="handleDelete([item.conversationId])">
<d-icon name="icon-delete" style="font-size: 14px;padding-right: 4px" />删除
</li>
</ul>
@@ -108,15 +108,15 @@
<d-option value="0">0</d-option>
</d-select>
</div>
<!-- <div class="control-right">-->
<!-- <d-button class="jyh-button2" variant="solid" @click="openBatchManageModal">-->
<!-- <template #icon>-->
<!-- <d-icon name="icon-property-setting"></d-icon>-->
<!-- </template>-->
<!-- 批量管理-->
<!-- </d-button>-->
<!-- <BatchManageModal ref="BatchManageModalRef"/>-->
<!-- </div>-->
<div class="control-right">
<d-button class="jyh-button2" variant="solid" @click="openBatchManageModal">
<template #icon>
<d-icon name="icon-property-setting"></d-icon>
</template>
批量管理
</d-button>
<BatchManageModal :username="props.username" ref="BatchManageModalRef"/>
</div>
</div>
</d-tab>
<d-tab id="scdh" title="收藏对话">
@@ -180,7 +180,7 @@
<li class="menu-item" @click="toggleCollect(item)">
<d-icon name="icon-star" style="font-size: 14px;padding-right: 4px" />取消收藏
</li>
<li class="menu-item" @click="handleDelete(item)">
<li class="menu-item" @click="handleDelete([item.conversationId])">
<d-icon name="icon-delete" style="font-size: 14px;padding-right: 4px" />删除
</li>
</ul>
@@ -404,6 +404,35 @@ const getQuestionCollection = async () => {
}
};
// 删除对话
const handleDelete = async (conversationIds, tabType) => {
if (!props.username) {
Message.error('请先登录');
return;
}
try {
const res = await axios.post(
`${import.meta.env.VITE_AI_API_HOST}/api/deleteConversation`,
{
userId: props.username,
conversationIdList: conversationIds
}
);
if (res.data.code === 20000) {
Message.success(res.data.message || '删除成功');
getQuestionHistory()
getQuestionCollection()
} else {
Message.error(res.data.message || '删除失败');
}
} catch (error) {
console.error('删除对话失败:', error);
Message.error('网络错误，请重试');
}
};
onMounted(() => {
getQuestionHistory()
getQuestionCollection()