可信代码库-AI大模型批量管理历史记录弹框前端开发

src/layouts/AILayout/ViewHistoryAside/BatchManageModal.vue

@@ -0,0 +1,211 @@
+<template>
+  <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>
+        <div class="mt-3 px-20">
+          <d-table
+            class="jyh-table"
+            :data="filteredTableData"
+            row-key="id"
+            @check-change="treeCheckChange"
+            :pagination="pagination"
+            :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 width="80" field="operation" header="操作">
+              <template #default="scope">
+                <d-icon style="cursor: pointer" @click="handleDelete(scope.row)" 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-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"
+            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>
+        <div class="mt-3 px-20">
+          <d-table
+            class="jyh-table"
+            :data="filteredTableData"
+            row-key="id"
+            @check-change="treeCheckChange"
+            :pagination="pagination"
+            :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 width="80" field="operation" header="操作">
+              <template #default="scope">
+                <d-icon style="cursor: pointer" @click="handleDelete(scope.row)" name="delete"></d-icon>
+              </template>
+            </d-column>
+          </d-table>
+        </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>
+        <d-button @click="handleCancel">取消</d-button>
+      </div>
+    </template>
+  </d-modal>
+</template>
+
+<script setup>
+import { ref, defineExpose, reactive } from 'vue';
+
+const selectTab = ref('dhls');
+// 控制弹框显示
+const visible = ref(false);
+
+// 搜索文本
+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 handleSearch = () => {
+  // 简单的过滤逻辑，根据搜索文本过滤表格数据
+  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) => {
+  console.log('选中的行:', row);
+};
+
+// 删除按钮点击事件处理函数
+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 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,
+});
+</script>
+
+<style scoped>
+.search-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+</style>

src/layouts/AILayout/ViewHistoryAside/ViewHistoryAside.vue

@@ -102,12 +102,13 @@
             </d-select>
           </div>
           <div class="control-right">
-            <d-button class="jyh-button2" variant="solid"  @click="handleBatchManage">
+            <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>
       </d-tab>
@@ -119,6 +120,7 @@
 
 <script setup>
 import { ref } from 'vue';
+import BatchManageModal from './BatchManageModal.vue'
 
 // 定义每个卡片的展开状态
 const selectTab = ref('dhls');
@@ -128,6 +130,14 @@ const historyLimit = ref('30');
 // 当前选中的卡片索引
 const selectedIndex = ref(null);
 const hoverIndex = ref(null);
+const BatchManageModalRef = ref(null);
+
+// 打开弹框的方法
+const openBatchManageModal = () => {
+  if (BatchManageModalRef.value) {
+    BatchManageModalRef.value.openModal();
+  }
+};
 
 const handleEdit = (item) => {
   console.log('编辑:', item);