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

src/views/Jyh/AI/Home/components/ViewHistoryAside/BatchManageModal.vue

@@ -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"
+            @check-change="handleCheckChange('dhls')"
-            :pagination="pagination"
+            :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="title" header="对话内容" show-overflow-tooltip></d-column>
-            <d-column field="agent" 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="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"
+            @page-size-change="handlePageSizeChange"
-            v-model:pageSize="pager.pageSize"
+            @current-page-change="handlePageChange"
-            v-model:pageIndex="pager.pageIndex"
-            :max-items="5"
-            :can-change-page-size="true"
-            :can-view-total="true"
             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"
+            @check-change="handleCheckChange('scdh')"
-            :pagination="pagination"
+            :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="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 field="conversationTime" 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;">
+      <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) => {
+const dhlsList = ref([]); // 对话历史数据
-  console.log('选中的行键:', checkedRowKeys);
+const collectionList = ref([]); // 收藏对话数据
-};
 
-// 搜索按钮点击事件处理函数
+// 分页状态
-const handleSearch = () => {
+const pageSize = ref(10); // 每页显示条数
-  // 简单的过滤逻辑，根据搜索文本过滤表格数据
+const currentPage = ref(1); // 当前页码
-  const filtered = tableData.value.filter((row) => {
-    return row.conversationContent.includes(searchText.value);
-  });
-  filteredTableData.value = filtered;
-  pagination.value.total = filtered.length;
-  pager.total = filtered.length;
-  pager.pageIndex = 1;
-  pagination.value.current = 1;
-};
 
-// 设置选中行
+// 计算当前页数据（对话历史）
-const setSelectRow = (row) => {
+const currentDhlsData = computed(() => {
-  console.log('选中的行:', row);
+  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);
+});
 
-// 删除按钮点击事件处理函数
+// 计算当前页数据（收藏对话）
-const handleDelete = (row) => {
+const currentCollectionData = computed(() => {
-  // 从表格数据中删除该行
+  const filteredData = collectionList.value.filter(row =>
-  const index = tableData.value.findIndex((r) => r.id === row.id);
+    row.title.includes(searchText.value)
-  if (index > -1) {
+  );
-    tableData.value.splice(index, 1);
+  const start = (currentPage.value - 1) * pageSize.value;
-    filteredTableData.value = tableData.value;
+  return filteredData.slice(start, start + pageSize.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>

src/views/Jyh/AI/Home/components/ViewHistoryAside/ViewHistoryAside.vue

@@ -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">-->
+          <div class="control-right">
-<!--            <d-button class="jyh-button2" variant="solid"  @click="openBatchManageModal">-->
+            <d-button class="jyh-button2" variant="solid"  @click="openBatchManageModal">
-<!--              <template #icon>-->
+              <template #icon>
-<!--                <d-icon name="icon-property-setting"></d-icon>-->
+                <d-icon name="icon-property-setting"></d-icon>
-<!--              </template>-->
+              </template>
-<!--              批量管理-->
+              批量管理
-<!--            </d-button>-->
+            </d-button>
-<!--            <BatchManageModal ref="BatchManageModalRef"/>-->
+            <BatchManageModal :username="props.username" ref="BatchManageModalRef"/>
-<!--          </div>-->
+          </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()