ljydlv
/
sawAdmin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改通用chat页面，修改会话管理页面，添加文件上传功能、文件管理功能（未全部完成）

This commit is contained in:
junleea 2025-03-28 21:34:11 +08:00
parent 4d0f14713b
commit 6b4d979fd6
11 changed files with 489 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

366
README.md
View File

@ -1,306 +1,72 @@
<template>
<div class="chat-container">
<!-- 消息列表 -->
<el-card class="chat-messages" shadow="never" ref="messageContainer">
<div
v-for="(message, index) in messages"
:key="index"
:class="['message', message.role]"
<div>
<el-upload
class="upload-demo"
action="http://localhost:8080/upload"
:data="uploadData"
:headers="headers"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
ref="uploadRef"
>
<div class="message-avatar">
<span v-if="message.role === 'assistant'">💬</span>
<span v-else>👤</span>
</div>
<div class="message-content">
<div v-html="renderMarkdown(message.content)"></div>
</div>
</div>
<div v-if="loading" class="loading-indicator">Loading...</div>
</el-card>
<!-- 输入区域 -->
<el-card class="chat-input" shadow="never">
<el-row :gutter="10">
<el-col :span="20">
<el-input
v-model="inputMessage"
type="textarea"
:rows="2"
placeholder="输入消息..."
@keyup.enter="sendMessage"
/>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="sendMessage">Send</el-button>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import { ElCard, ElInput, ElButton } from "element-plus";
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
import { ElMessage } from "element-plus";
import { GetMessageService } from "@/api/im";
import MarkdownIt from "markdown-it";
import hljs from "highlight.js";
import bash from "highlight.js/lib/languages/bash";
import javascript from "highlight.js/lib/languages/javascript";
import typescript from "highlight.js/lib/languages/typescript";
import java from "highlight.js/lib/languages/java";
import sql from "highlight.js/lib/languages/sql";
import nginx from "highlight.js/lib/languages/nginx";
import json from "highlight.js/lib/languages/json";
import yaml from "highlight.js/lib/languages/yaml";
import xml from "highlight.js/lib/languages/xml";
import shell from "highlight.js/lib/languages/shell";
interface Message {
role: "user" | "assistant";
content: string;
finished?: boolean;
}
hljs.registerLanguage("bash", bash);
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("typescript", typescript);
hljs.registerLanguage("java", java);
hljs.registerLanguage("sql", sql);
hljs.registerLanguage("nginx", nginx);
hljs.registerLanguage("json", json);
hljs.registerLanguage("yaml", yaml);
hljs.registerLanguage("xml", xml);
hljs.registerLanguage("shell", shell);
const md = new MarkdownIt({
html: true,
linkify: true,
breaks: true,
xhtmlOut: true,
typographer: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return (
'<pre class="hljs"><code>' +
hljs.highlight(lang, str, true).value +
"</code></pre>"
);
} catch (__) {}
}
return (
'<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>"
);
},
});
const loading = ref(false);
const isUserScrolling = ref<boolean>(false);
const messages = reactive([]);
const inputMessage = ref("");
const socket = ref(null);
const currentAIMessage = ref("");
const messageContainer = ref(null);
const sessionID = ref(0);
const renderMarkdown = (content: string) => {
return md.render(content);
};
onMounted(() => {
let url =
"wss://pm.ljsea.top/im/ai_chat_ws?" +
"token=" +
localStorage.getItem("token");
socket.value = new WebSocket(url);
socket.value.onopen = () => {
console.log("WebSocket 连接已建立");
ElMessage.success("连接成功");
};
const container = document.querySelector('.messages-wrapper') as HTMLElement | null;
if (container) {
container.addEventListener('scroll', handleScroll);
}
socket.value.onmessage = (event) => {
let msg: WSMessage = JSON.parse(event.data);
const existingMessage = messages.find(
(msg) => msg.role === "assistant" && !msg.finished
);
// if (msg.msg.msg.done) {
// messages.push({ role: 'assistant', content: currentAIMessage.value });
// currentAIMessage.value = '';
// scrollToBottom();
// return;
// }
if (existingMessage) {
// 追加内容
existingMessage.content += msg.msg.msg.response;
} else {
// 新消息
messages.push({
role: "assistant",
content: msg.msg.msg.response,
finished: false,
});
}
console.log("resp:", msg);
sessionID.value = msg.session_id;
currentAIMessage.value += msg.msg.msg.response;
scrollToBottom();
if (msg.msg.msg.done) {
const assistantMessage = messages[messages.length - 1];
assistantMessage.finished = true;
}
};
socket.value.onclose = () => {
console.log("WebSocket 连接已关闭");
ElMessage.error("连接已关闭");
};
socket.value.onerror = (error) => {
console.error("WebSocket 发生错误:", error);
};
});
onUnmounted(() => {
if (socket.value) {
socket.value.close();
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
interface UploadData {
upload_type: string;
auth_type: string;
md5: string;
type: string;
}
});
const sendMessage = () => {
let msg = {
msg: inputMessage.value,
type: "ollama",
function: "gen-ai-chat",
session_id: sessionID.value,
};
if (inputMessage.value.trim() === "") return;
messages.push({ role: "user", content: inputMessage.value, finished: true });
socket.value.send(JSON.stringify(msg));
inputMessage.value = "";
//getMessage();
scrollToBottom();
};
const scrollToBottom = (): void => {
nextTick(() => {
if (messageContainer.value && !isUserScrolling.value) {
messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
export default defineComponent({
setup() {
const uploadData: UploadData = {
upload_type: 'your_upload_type',
auth_type: 'your_auth_type',
md5: 'your_md5_value',
type: 'your_type'
};
const headers = {
'Content-Type': 'multipart/form-data'
};
const uploadRef = ref(null);
const handleSuccess = (response: any, file: any, fileList: any) => {
console.log('上传成功', response);
};
const handleError = (error: any, file: any, fileList: any) => {
console.log('上传失败', error);
};
const beforeUpload = (file: any) => {
// 可以在这里进行文件验证等操作
return true;
};
return {
uploadData,
headers,
uploadRef,
handleSuccess,
handleError,
beforeUpload
};
}
});
};
// 监听用户滚动行为，判断是否在手动滚动历史消息
const handleScroll = (): void => {
const container = document.querySelector(
".messages-wrapper"
) as HTMLElement | null;
if (container) {
const scrollBottom =
container.scrollHeight - container.scrollTop - container.clientHeight;
isUserScrolling.value = scrollBottom > 50; // 如果距离底部超过50px，则认为在查看历史消息
</script>
<style scoped>
.upload-demo {
margin-top: 20px;
}
};
const getMessage = async () => {
let result = {};
try {
let req = {
token: localStorage.getItem("token"),
session_id: sessionID.value,
};
result = await GetMessageService(req);
if (result["code"] === 0) {
console.log(result["data"]);
}
} catch (e) {
console.log(e);
}
return {};
};
</script>
<style scoped>
.chat-container {
display: flex;
flex-direction: column;
height: 100%; /* 使用视口高度确保容器占满整个屏幕 */
padding: 20px;
box-sizing: border-box;
}
.chat-messages {
flex: 1;
overflow-y: auto; /* 允许垂直滚动 */
padding: 10px;
margin-bottom: 20px;
position: relative;
display: flex;
flex-direction: column;
}
.messages-wrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end; /* 默认将新消息对齐到底部 */
overflow-y: auto; /* 确保内部可以滚动 */
height: 100%;
}
.message {
display: flex;
margin-bottom: 15px;
}
.message.user {
justify-content: flex-end;
}
.message-avatar {
width: 40px;
text-align: center;
line-height: 40px;
font-size: 20px;
margin-right: 10px;
}
.message.assistant .message-avatar {
margin-right: 0;
margin-left: 10px;
}
.message-content {
background-color: #f0f9eb;
border: 1px solid #e1f3d8;
border-radius: 4px;
padding: 10px 15px;
white-space: pre-wrap;
max-width: 70%;
}
.message.assistant .message-content {
background-color: #f3f4f6;
border: 1px solid #dce4eb;
max-width: 70%;
}
.loading-indicator {
text-align: center;
color: #999;
font-size: 16px;
}
.chat-input {
width: 100%;
}
.el-input {
width: 100%;
}
</style>
</style>

49
src/api/file.ts Normal file
View File

@ -0,0 +1,49 @@
import request from '@/utils/request2';
export const FindUserFileService = (Data) => {
const params = new URLSearchParams();
for (let key in Data) {
params.append(key, Data[key])
}
return request.post('/file/file_list', params,{
headers: {
'token': Data.token, //token
}
})
}
export const AddUserFileService = (Data) => {
const params = new URLSearchParams();
for (let key in Data) {
params.append(key, Data[key])
}
return request.post('/model/create', params,{
headers: {
'token': Data.token, //token
}
})
}
export const UpdateUserFileService = (Data) => {
const params = new URLSearchParams();
for (let key in Data) {
params.append(key, Data[key])
}
return request.post('/file/file_update', params,{
headers: {
'token': Data.token, //token
}
})
}
export const DelUserFileService = (Data) => {
const params = new URLSearchParams();
for (let key in Data) {
params.append(key, Data[key])
}
return request.post('/file/file_delete', params,{
headers: {
'token': Data.token, //token
}
})
}

8
src/components/menu.ts
View File

@ -36,7 +36,13 @@ export const menuData: Menus[] = [
pid: '1',
index: '/function',
title: '功能管理',
}
},
{
id: '56',
pid: '1',
index: '/manage-file',
title: '文件管理',
},
],
},

9
src/router/index.ts
View File

@ -50,6 +50,15 @@ const routes: RouteRecordRaw[] = [
},
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/function.vue'),
},
{
path: '/manage-file',
name: 'manage-file',
meta: {
title: '文件管理',
permiss: '56',
},
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/manage-file.vue'),
},
{
path: '/manage-session',
name: 'manage-session',

1
src/store/permiss.ts
View File

@ -52,6 +52,7 @@ export const usePermissStore = defineStore('permiss', {
'53', //通用人机对话
'54', //功能管理
'55', //提示词生成
'56', //文件管理
],
user: ['0', '8', '7','9', '61','53'],
},

6
src/types/file.ts Normal file
View File

@ -0,0 +1,6 @@
export interface File {
name: string;
size: number;
type: string;
lastModified: number;
}

59
src/views/element/upload.vue
View File

@ -1,11 +1,13 @@
<template>
<div class="container">
<div class="content-title">支持拖拽</div>
<div class="plugins-tips">
Element Plus自带上传组件。 访问地址：
<a href="https://element-plus.org/zh-CN/component/upload.html" target="_blank">Element Plus Upload</a>
</div>
<el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple
<el-upload class="upload-demo" drag
action="https://pm.ljsea.top/file/upload" multiple
:data="uploadData"
:headers="headers"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:on-change="handle">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
@ -13,20 +15,51 @@
<em>点击上传</em>
</div>
</el-upload>
<div class="content-title">支持裁剪</div>
<div class="plugins-tips">
vue-cropper：一个简单的vue图片裁剪插件。 访问地址：
<a href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a>。 示例请查看
<router-link to="/ucenter">个人中心-我的头像</router-link>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const handle = (rawFile: any) => {
console.log(rawFile);
};
interface UploadData {
upload_type: string;
auth_type: string;
md5: string;
type: string;
}
const uploadData: UploadData = {
upload_type: 'file',
auth_type: 'public',
md5: '',
type: 'file',
};
const headers = {
"token": localStorage.getItem('token') || '',
};
const handleSuccess = (response: any, file: any, fileList: any) => {
let res = response;
if (res.code !== 0){
ElMessage.error(res.error);
return;
}
console.log('上传成功', res);
ElMessage.success('上传成功');
};
const handleError = (error: any, file: any, fileList: any) => {
console.log('上传失败', error);
ElMessage.error('上传失败');
};
const beforeUpload = (file: any) => {
// 可以在这里进行文件验证等操作
return true;
};
</script>
<style scoped>
@ -39,6 +72,6 @@ const handle = (rawFile: any) => {
}
.upload-demo {
width: 360px;
width: 30%;
}
</style>

9
src/views/system/file-chat.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

125
src/views/system/gen-chat.vue
View File

@ -2,9 +2,9 @@
<div class="chat-app">
<!-- 历史会话侧边栏 -->
<div class="history-sessions" v-if="sessionIsShow">
<div >
<el-button type="primary" @click="clearCurrent">新会话</el-button>
</div>
<div>
<el-button type="primary" @click="clearCurrent">新会话</el-button>
</div>
<el-card class="session-card">
<template #header>
<h3>当前会话</h3>
@ -30,21 +30,26 @@
</el-scrollbar>
</el-card>
</div>
<div>
<div @click="showSession" style="cursor: pointer">
<el-icon v-if="sessionIsShow">
<Expand />
</el-icon>
<el-icon v-else>
<Fold />
</el-icon>
</div>
</div>
<!-- 原有的聊天区域 -->
<div class="chat-container">
<div>
<div @click="showSession" style="cursor: pointer">
<el-icon v-if="sessionIsShow">
<Expand />
</el-icon>
<el-icon v-else>
<Fold />
</el-icon>
</div>
</div>
<!-- 消息列表 -->
<el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
<el-card
class="chat-messages"
shadow="never"
ref="messagesContainer"
v-if="messages.length > 0"
>
<div
v-for="(message, index) in messages"
:key="index"
@ -58,8 +63,12 @@
<div v-html="renderMarkdown(message.content)"></div>
<!-- 添加复制 -->
<div>
<el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
</div>
<el-button
type="text"
:icon="DocumentCopy"
@click="copyMessage(message.content)"
></el-button>
</div>
</div>
</div>
<div v-if="loading" class="loading-indicator">Loading...</div>
@ -72,14 +81,24 @@
<el-input
v-model="inputMessage"
type="textarea"
:rows="2"
:rows="5"
placeholder="输入消息..."
@keyup.enter="sendMessage"
/>
<el-text v-model="inputMessage" aria-placeholder="输入信息...."></el-text>
<el-text
v-model="inputMessage"
aria-placeholder="输入信息...."
></el-text>
</el-col>
<el-col :span="4" style="text-align: center">
<el-button @click="sendMessage" type="success" :icon="Check" round :disabled="loading">发送</el-button>
<el-button
@click="sendMessage"
type="success"
:icon="Check"
round
:disabled="loading"
>发送</el-button
>
</el-col>
</el-row>
</el-card>
@ -93,13 +112,13 @@ import { ElCard, ElInput, ElButton } from "element-plus";
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
import { ElMessage } from "element-plus";
import { GetMessageService } from "@/api/im";
import {Check, Loading, DocumentCopy} from '@element-plus/icons-vue'
import { Check, Loading, DocumentCopy } from "@element-plus/icons-vue";
import MarkdownIt from "markdown-it";
import hljs from "highlight.js";
import { Session } from "@/types/session";
import { FindSessionService } from "@/api/session";
import markdownItHighlightjs from 'markdown-it-highlightjs';
import markdownItKatex from 'markdown-it-katex';
import markdownItHighlightjs from "markdown-it-highlightjs";
import markdownItKatex from "markdown-it-katex";
import mermaidPlugin from "@agoose77/markdown-it-mermaid";
import "katex/dist/katex.min.css";
interface Message {
@ -147,34 +166,34 @@ const copyCode = (code: string) => {
};
const doButtonD = () => {
const codeBlocks = document.querySelectorAll('pre code');
const codeBlocks = document.querySelectorAll("pre code");
codeBlocks.forEach((codeBlock) => {
//先查看是否已经添加了复制按钮
if (codeBlock.parentNode.querySelector('.code-controls')) {
if (codeBlock.parentNode.querySelector(".code-controls")) {
return;
}
// 获取代码类型
const codeType = codeBlock.className.replace('hljs ', '');
const codeType = codeBlock.className.replace("hljs ", "");
// 创建代码类型显示元素
const codeTypeElement = document.createElement('span');
codeTypeElement.textContent = codeType.split('-')[1];
const codeTypeElement = document.createElement("span");
codeTypeElement.textContent = codeType.split("-")[1];
codeTypeElement.setAttribute("background-color", "rgba(0, 0, 0, 0.1)");
codeTypeElement.setAttribute("padding", "3px 6px");
codeTypeElement.setAttribute("border-radius", "4px");
codeTypeElement.setAttribute("font-size", "0.9em");
// 创建复制按钮
const copyButton = document.createElement('button');
const copyButton = document.createElement("button");
copyButton.setAttribute("background-color", "dodgerblue");
copyButton.setAttribute("display", "flex");
copyButton.setAttribute("align-items", "center");
copyButton.setAttribute("padding", "5px 10px");
copyButton.setAttribute("cursor", "pointer");
copyButton.setAttribute("border-radius", "4px");
copyButton.textContent = '复制';
copyButton.textContent = "复制";
copyButton.classList.add();
copyButton.addEventListener('click', () => {
copyButton.addEventListener("click", () => {
copyCode(codeBlock.textContent);
});
@ -183,16 +202,14 @@ const doButtonD = () => {
// pre.style.position = 'relative';
// 创建一个容器用于放置代码类型和复制按钮
const controlsContainer = document.createElement('div');
controlsContainer.classList.add('code-controls');
const controlsContainer = document.createElement("div");
controlsContainer.classList.add("code-controls");
controlsContainer.appendChild(codeTypeElement);
controlsContainer.appendChild(copyButton);
// 将容器添加到代码块父元素中
pre.insertBefore(controlsContainer, codeBlock);
});
};
onMounted(() => {
@ -250,6 +267,7 @@ onMounted(() => {
};
socket.value.onerror = (error) => {
socket.value = new WebSocket(url);
console.error("WebSocket 发生错误:", error);
};
});
@ -271,10 +289,20 @@ const sendMessage = () => {
function: "gen-ai-chat",
session_id: sessionID.value,
};
try {
socket.value.send(JSON.stringify(msg));
} catch (e) {
ElMessage.error("发送失败!连接已断开！");
return;
}
if (sessionID.value == 0) {
sessionName.value = inputMessage.value;
}
messages.push({ role: "user", content: inputMessage.value, finished: true });
socket.value.send(JSON.stringify(msg));
inputMessage.value = "";
scrollToBottom();
nextTick(() => {
scrollToBottom(); // 新增滚动调用
});
loading.value = true;
if (sessionID.value == 0) {
sessionName.value = msg.msg;
@ -351,11 +379,14 @@ const getMessage = async (session_id: number) => {
return {};
};
const copyMessage = (content: string) => {
navigator.clipboard.writeText(content).then(() => {
ElMessage.success('复制成功');
}).catch((error) => {
ElMessage.error('复制失败: ' + error);
});
navigator.clipboard
.writeText(content)
.then(() => {
ElMessage.success("复制成功");
})
.catch((error) => {
ElMessage.error("复制失败: " + error);
});
};
</script>
<style scoped>
@ -393,6 +424,7 @@ const copyMessage = (content: string) => {
display: flex;
flex-direction: column;
padding: 20px;
height: 100%;
box-sizing: border-box;
}
@ -401,7 +433,8 @@ const copyMessage = (content: string) => {
overflow-y: auto; /* 允许垂直滚动 */
padding: 10px;
margin-bottom: 20px;
scrollbar-width: 20px;
scrollbar-width: 10px;
height: 90%;
position: relative;
display: flex;
flex-direction: column;
@ -505,18 +538,16 @@ const copyMessage = (content: string) => {
}
.copy-code-button {
background-color:dodgerblue;
color:white;
background-color: dodgerblue;
color: white;
width: 30px;
height: 20px;
border:0;
border: 0;
display: flex;
align-items: center;
}
.el-icon-copy {
margin-right: 5px;
}
</style>

211
src/views/system/manage-file.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div>
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true" v-if="userRole">新增</el-button>
</template>
</TableCustom>
</div>
<el-dialog :title="isEdit ? '编辑': '编辑'" v-model="visible" width="700px" destroy-on-close
:close-on-click-modal="false" @close="closeDialog">
<TableEdit :form-data="rowData" :options="options_edit" :edit="isEdit" :update="updateData" />
</el-dialog>
<el-dialog :title="isAdd ? '新增' : '新增'" v-model="visible_add" width="700px" destroy-on-close
:close-on-click-modal="false" @close="closeDialog">
<TableEdit :form-data="rowData" :options="options" :edit="isAdd" :update="addData" />
</el-dialog>
<el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
<TableDetail :data="viewData"></TableDetail>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="system-user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { Session } from '@/types/session';
import {FindUserFileService} from "@/api/file";
import {UpdateUserFileService} from "@/api/file";
import {DelUserFileService} from "@/api/file";
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
const userRole = localStorage.getItem('role') == 'admin';
const page = reactive({
index: 1,
size: 10,
total: 122,
})
const tableData = ref<[]>([]);
// 查询相关
const query = reactive({
name: '',
});
const searchOpt = ref<FormOptionList[]>([
{ type: 'input', label: '会话ID：', prop: 'name' }
])
const handleSearch = async () => {
// if (isFinite(query.name) == false){
// ElMessage.error("请输入正确的会话ID");
// return;
// }
let req={
token: localStorage.getItem('token'),
type: "ID",
id: parseInt(query.name)
}
let result = await FindUserFileService(req);
tableData.value = result.data;
page.total = result.data.length;
};
// 表格相关
let columns = ref([
{ type: 'index', label: '序号', width: 55, align: 'center' },
{ prop: 'ID', label: '文件ID', width: 50 },
{ prop: 'UserFileName', label: '文件名' ,width: 300},
{ prop: "UploadType", label: "上传类型",width: 100},
{ prop: 'CreatedAt', label: '创建时间',type: 'date',width: 200 },
{ prop: 'UpdatedAt', label: '更新时间',type: 'date',width: 200 },
{ prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: false,label:"继续该会话"} }},
])
const getData = async () => {
let req={
token: localStorage.getItem('token'),
type: "all"
}
let result = await FindUserFileService(req);
tableData.value = result.data;
page.total = result.data.length;
};
getData();
const changePage = (val: number) => {
page.index = val;
getData();
};
// 新增弹窗
let options = ref<FormOption>({
labelWidth: '100px',
span: 12,
list: [
{ type: 'input', label: '文件名称', prop: 'UserFileName', required: true },
]
})
//编辑弹窗
let options_edit = ref<FormOption>({
labelWidth: '100px',
span: 12,
list: [
{ type: 'input', label: '文件名称', prop: 'UserFileName', required: true },
]
})
const visible = ref(false);
const visible_add = ref(false);
const isEdit = ref(false);
const isAdd = ref(false);
const rowData = ref({});
const handleEdit = async (row: Session) => {
let data = row;
rowData.value = data;
console.log("edit_row_data:", rowData.value);
isEdit.value = true;
visible.value = true;
};
const updateData = async (data) => {
let result ={}
try{
let req={
token:localStorage.getItem("token"),
id: data.ID,
name: data.Name
};
result = await UpdateUserFileService(req)
if (result["code"] === 0) {
ElMessage.success("更新成功");
} else {
ElMessage.error("更新失败");
}
}catch(e){
console.log(e);
}
closeDialog();
handleSearch();
};
const addData = async (data) => {
let result ={}
try{
let req={
token:localStorage.getItem("token"),
name: data.Name
};
result = await AddSessionService(req)
if (result["code"] === 0) {
ElMessage.success("新增成功");
} else {
ElMessage.error("新增失败");
}
}catch(e){
console.log(e);
}
closeDialog();
handleSearch();
};
const closeDialog = () => {
visible.value = false;
visible_add.value = false;
isEdit.value = false;
};
// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
row: {},
list: []
});
const handleView =async (row: Session) => {
viewData.value.row = row;
viewData.value.list = [
]
visible1.value = true;
};
// 删除相关
const handleDelete = async (row: Session) => {
let req={
token: localStorage.getItem('token'),
id: row.ID,
}
try{
let result = await DelUserFileService(req);
if(result["code"] === 0){
ElMessage.success("删除成功");
handleSearch();
}else{
ElMessage.error("删除失败");
}
}catch(e){
console.log(e);
}
}
</script>
<style scoped></style>

13
src/views/system/manage-session.vue
View File

@ -42,6 +42,12 @@ import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
const userRole = localStorage.getItem('role') == 'admin';
const page = reactive({
index: 1,
size: 10,
total: 122,
})
const tableData = ref<Session[]>([]);
// 查询相关
const query = reactive({
@ -76,12 +82,7 @@ let columns = ref([
{ prop: 'UpdatedAt', label: '更新时间',type: 'date',width: 150 },
{ prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: true,label:"继续该会话"} }},
])
const page = reactive({
index: 1,
size: 10,
total: 122,
})
const tableData = ref<Session[]>([]);
const getData = async () => {
let req={
token: localStorage.getItem('token'),