feat(历史记录): 添加滑动删除功能并优化批量删除交互
This commit is contained in:
parent
142541a80d
commit
ef41da80ff
|
|
@ -51,40 +51,69 @@
|
|||
>
|
||||
<view class="date-header">{{ group.id }}</view>
|
||||
|
||||
<view
|
||||
class="history-item"
|
||||
v-for="item in group.conversation"
|
||||
:key="item.id"
|
||||
>
|
||||
<!-- 批量删除模式下的选择框 -->
|
||||
<view
|
||||
class="item-checkbox"
|
||||
v-if="isBatchDeleteMode"
|
||||
@click="toggleItemSelection(item.id)"
|
||||
>
|
||||
<view
|
||||
class="checkbox"
|
||||
:class="{ checked: selectedItems.includes(item.id) }"
|
||||
<view v-for="item in group.conversation" :key="item.id">
|
||||
<uni-swipe-action ref="swipeActionRef">
|
||||
<uni-swipe-action-item
|
||||
:disabled="isBatchDeleteMode"
|
||||
:threshold="0.3"
|
||||
:auto-close="true"
|
||||
@change="handleSwipeChange($event, item.id)"
|
||||
>
|
||||
<text class="checkmark" v-if="selectedItems.includes(item.id)"
|
||||
>✓</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view
|
||||
class="right-btn-box"
|
||||
@touchend.stop="handleSingleDelete(item)"
|
||||
>
|
||||
<!-- <u-icon name="trash" color="#fff" size="34"></u-icon> -->
|
||||
<image
|
||||
src="/static/common/images/icon_delete.png"
|
||||
mode="widthFix"
|
||||
style="width: 32rpx; height: 32rpx"
|
||||
/>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 历史记录内容 -->
|
||||
<view class="item-content">
|
||||
<view class="item-header">
|
||||
<view class="item-icon">
|
||||
<image
|
||||
class="icon-image"
|
||||
src="/static/common/images/icon_chat2.png"
|
||||
/>
|
||||
<view
|
||||
class="history-item"
|
||||
:class="{
|
||||
'no-right-radius': openedItems[item.id] === 'right',
|
||||
}"
|
||||
>
|
||||
<!-- 批量删除模式下的选择框 -->
|
||||
<view
|
||||
class="item-checkbox"
|
||||
v-if="isBatchDeleteMode"
|
||||
@click="toggleItemSelection(item.id)"
|
||||
>
|
||||
<view
|
||||
class="checkbox"
|
||||
:class="{ checked: selectedItems.includes(item.id) }"
|
||||
>
|
||||
<text
|
||||
class="checkmark"
|
||||
v-if="selectedItems.includes(item.id)"
|
||||
>✓</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 历史记录内容 -->
|
||||
<view class="item-content">
|
||||
<view class="item-header">
|
||||
<view class="item-icon">
|
||||
<image
|
||||
class="icon-image"
|
||||
src="/static/common/images/icon_chat2.png"
|
||||
/>
|
||||
</view>
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
</view>
|
||||
<!-- <view class="item-description">{{ item.content }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
</view>
|
||||
<!-- <view class="item-description">{{ item.content }}</view> -->
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -111,10 +140,12 @@
|
|||
|
||||
<script>
|
||||
import HeaderBar from "@/components/HeaderBar.vue";
|
||||
import UniSwipeAction from "@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HeaderBar,
|
||||
UniSwipeAction,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -129,6 +160,7 @@ export default {
|
|||
selectAll: false, // 是否全选
|
||||
chatHistoryAI: [], // ai咨询历史记录
|
||||
chatHistoryTeacher: [], // 人工咨询历史记录
|
||||
openedItems: {}, // 记录每个项目的滑动状态
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -170,6 +202,26 @@ export default {
|
|||
this.isBatchDeleteMode = false;
|
||||
},
|
||||
|
||||
// 重置滑动状态
|
||||
closeAllSwipeActions() {
|
||||
const swipeActionRefs = this.$refs.swipeActionRef || [];
|
||||
const refs = Array.isArray(swipeActionRefs)
|
||||
? swipeActionRefs
|
||||
: [swipeActionRefs];
|
||||
|
||||
refs.forEach((ref) => {
|
||||
if (ref && typeof ref.closeAll === "function") {
|
||||
ref.closeAll();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 清空 openedItems 并调用 closeAllSwipeActions()
|
||||
resetSwipeState() {
|
||||
this.openedItems = {};
|
||||
this.closeAllSwipeActions();
|
||||
},
|
||||
|
||||
// 获取ai历史记录
|
||||
async getChatHistoryList() {
|
||||
this.$u.api.GetConversationPage().then((res) => {
|
||||
|
|
@ -189,7 +241,7 @@ export default {
|
|||
// };
|
||||
// });
|
||||
// }
|
||||
console.log("this.chatHistoryAI", this.chatHistoryAI);
|
||||
// console.log("this.chatHistoryAI", this.chatHistoryAI);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -279,6 +331,7 @@ export default {
|
|||
}
|
||||
|
||||
this.activeTab = tab;
|
||||
this.resetSwipeState();
|
||||
// 切换tab时，刷新当前tab的历史记录
|
||||
if (tab === "1") {
|
||||
this.getChatHistoryList();
|
||||
|
|
@ -300,6 +353,7 @@ export default {
|
|||
// 取消批量删除模式
|
||||
cancelBatchDelete() {
|
||||
this.resetBatchState();
|
||||
this.resetSwipeState();
|
||||
},
|
||||
|
||||
// 点击“批量删除”菜单项，进入批量删除模式
|
||||
|
|
@ -313,6 +367,9 @@ export default {
|
|||
// 切换批量删除模式
|
||||
toggleBatchDeleteMode() {
|
||||
this.isBatchDeleteMode = !this.isBatchDeleteMode;
|
||||
if (this.isBatchDeleteMode) {
|
||||
this.resetSwipeState();
|
||||
}
|
||||
if (!this.isBatchDeleteMode) {
|
||||
// 退出批量删除模式时清空选中项
|
||||
this.selectedItems = [];
|
||||
|
|
@ -369,7 +426,9 @@ export default {
|
|||
if (isAiTab) {
|
||||
res = await this.$u.api.DeleteDialogueManagement({ id: deleteIds });
|
||||
} else {
|
||||
res = await this.$u.api.DeleteDialogueApi({ dialogueManagementIds: deleteIds });
|
||||
res = await this.$u.api.DeleteDialogueApi({
|
||||
dialogueManagementIds: deleteIds,
|
||||
});
|
||||
}
|
||||
|
||||
if (res && res.succeed === true) {
|
||||
|
|
@ -399,6 +458,55 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 处理滑动操作变化
|
||||
handleSwipeChange(e, itemId) {
|
||||
this.$set(this.openedItems, itemId, e);
|
||||
},
|
||||
|
||||
// 处理单个删除操作
|
||||
async handleSingleDelete(item) {
|
||||
if (!item || !item.id) return;
|
||||
if (this.isBatchDeleteMode) return;
|
||||
|
||||
const isAiTab = this.activeTab === "1";
|
||||
const deleteIds = [item.id];
|
||||
|
||||
try {
|
||||
let res = null;
|
||||
if (isAiTab) {
|
||||
res = await this.$u.api.DeleteDialogueManagement({ id: deleteIds });
|
||||
} else {
|
||||
res = await this.$u.api.DeleteDialogueApi({
|
||||
dialogueManagementIds: deleteIds,
|
||||
});
|
||||
}
|
||||
|
||||
if (res && res.succeed === true) {
|
||||
if (isAiTab) {
|
||||
this.getChatHistoryList();
|
||||
} else {
|
||||
this.GetDialogueList_User();
|
||||
}
|
||||
|
||||
this.$refs.uToast.show({
|
||||
title: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$refs.uToast.show({
|
||||
title: (res && (res.msg || res.message)) || "删除失败",
|
||||
type: "error",
|
||||
});
|
||||
} catch (e) {
|
||||
this.$refs.uToast.show({
|
||||
title: "删除失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -520,6 +628,19 @@ export default {
|
|||
}
|
||||
|
||||
.history-list {
|
||||
.right-btn-box {
|
||||
width: 160rpx;
|
||||
color: #ffffff;
|
||||
background-color: #ff4757;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.date-group {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
|
@ -534,7 +655,15 @@ export default {
|
|||
.history-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 0;
|
||||
padding: 24rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
transition: border-radius 0.3s;
|
||||
|
||||
&.no-right-radius {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
margin-right: 24rpx;
|
||||
|
|
|
|||
Loading…
Reference in New Issue