可信代码库-AI大模型批量管理历史记录弹框前端开发
This commit is contained in:
付民康
211
src/layouts/AILayout/ViewHistoryAside/BatchManageModal.vue
Normal file
211
src/layouts/AILayout/ViewHistoryAside/BatchManageModal.vue
Normal file
@@ -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>
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user