houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <ContentWrap>
3     <!-- 搜索工作栏 -->
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11       <el-form-item label="对话编号" prop="conversationId">
12         <el-input
13           v-model="queryParams.conversationId"
14           placeholder="请输入对话编号"
15           clearable
16           @keyup.enter="handleQuery"
17           class="!w-240px"
18         />
19       </el-form-item>
20       <el-form-item label="用户编号" prop="userId">
21         <el-select
22           v-model="queryParams.userId"
23           clearable
24           placeholder="请输入用户编号"
25           class="!w-240px"
26         >
27           <el-option
28             v-for="item in userList"
29             :key="item.id"
30             :label="item.nickname"
31             :value="item.id"
32           />
33         </el-select>
34       </el-form-item>
35       <el-form-item label="创建时间" prop="createTime">
36         <el-date-picker
37           v-model="queryParams.createTime"
38           value-format="YYYY-MM-DD HH:mm:ss"
39           type="daterange"
40           start-placeholder="开始日期"
41           end-placeholder="结束日期"
42           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
43           class="!w-240px"
44         />
45       </el-form-item>
46       <el-form-item>
47         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
48         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
49       </el-form-item>
50     </el-form>
51   </ContentWrap>
52
53   <!-- 列表 -->
54   <ContentWrap>
55     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
56       <el-table-column label="消息编号" align="center" prop="id" width="180" fixed="left" />
57       <el-table-column
58         label="对话编号"
59         align="center"
60         prop="conversationId"
61         width="180"
62         fixed="left"
63       />
64       <el-table-column label="用户" align="center" prop="userId" width="180">
65         <template #default="scope">
66           <span>{{ userList.find((item) => item.id === scope.row.userId)?.nickname }}</span>
67         </template>
68       </el-table-column>
69       <el-table-column label="角色" align="center" prop="roleName" width="180" />
70       <el-table-column label="消息类型" align="center" prop="type" width="100" />
71       <el-table-column label="模型标识" align="center" prop="model" width="180" />
72       <el-table-column label="消息内容" align="center" prop="content" width="300" />
73       <el-table-column
74         label="创建时间"
75         align="center"
76         prop="createTime"
77         :formatter="dateFormatter"
78         width="180px"
79       />
80       <el-table-column label="回复消息编号" align="center" prop="replyId" width="180" />
81       <el-table-column label="携带上下文" align="center" prop="useContext" width="100">
82         <template #default="scope">
83           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.useContext" />
84         </template>
85       </el-table-column>
86       <el-table-column label="操作" align="center" fixed="right">
87         <template #default="scope">
88           <el-button
89             link
90             type="danger"
91             @click="handleDelete(scope.row.id)"
92             v-hasPermi="['ai:chat-message:delete']"
93           >
94             删除
95           </el-button>
96         </template>
97       </el-table-column>
98     </el-table>
99     <!-- 分页 -->
100     <Pagination
101       :total="total"
102       v-model:page="queryParams.pageNo"
103       v-model:limit="queryParams.pageSize"
104       @pagination="getList"
105     />
106   </ContentWrap>
107 </template>
108
109 <script setup lang="ts">
110 import { dateFormatter } from '@/utils/formatTime'
111 import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
112 import * as UserApi from '@/api/system/user'
113 import { DICT_TYPE } from '@/utils/dict'
114
115 const message = useMessage() // 消息弹窗
116 const { t } = useI18n() // 国际化
117
118 const loading = ref(true) // 列表的加载中
119 const list = ref<ChatMessageVO[]>([]) // 列表的数据
120 const total = ref(0) // 列表的总页数
121 const queryParams = reactive({
122   pageNo: 1,
123   pageSize: 10,
124   conversationId: undefined,
125   userId: undefined,
126   content: undefined,
127   createTime: []
128 })
129 const queryFormRef = ref() // 搜索的表单
130 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
131
132 /** 查询列表 */
133 const getList = async () => {
134   loading.value = true
135   try {
136     const data = await ChatMessageApi.getChatMessagePage(queryParams)
137     list.value = data.list
138     total.value = data.total
139   } finally {
140     loading.value = false
141   }
142 }
143
144 /** 搜索按钮操作 */
145 const handleQuery = () => {
146   queryParams.pageNo = 1
147   getList()
148 }
149
150 /** 重置按钮操作 */
151 const resetQuery = () => {
152   queryFormRef.value.resetFields()
153   handleQuery()
154 }
155
156 /** 删除按钮操作 */
157 const handleDelete = async (id: number) => {
158   try {
159     // 删除的二次确认
160     await message.delConfirm()
161     // 发起删除
162     await ChatMessageApi.deleteChatMessageByAdmin(id)
163     message.success(t('common.delSuccess'))
164     // 刷新列表
165     await getList()
166   } catch {}
167 }
168
169 /** 初始化 **/
170 onMounted(async () => {
171   getList()
172   // 获得用户列表
173   userList.value = await UserApi.getSimpleUserList()
174 })
175 </script>