Situation-Awareness-Platform-Frontend/src/layouts/AILayout/ViewHistoryAside/BatchManageModal.vue

<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>