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

完成文件管理上传、修改删除，通用表格添加通用按钮操作，所有管理功能都添加通用函数处理

This commit is contained in:
junleea 2025-03-29 16:40:35 +08:00
parent 6b4d979fd6
commit fca2a8416e
11 changed files with 207 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -79,5 +79,6 @@ declare module '@vue/runtime-core' {
TableEdit: typeof import('./src/components/table-edit.vue')['default']
TableSearch: typeof import('./src/components/table-search.vue')['default']
Tabs: typeof import('./src/components/tabs.vue')['default']
UploadFile: typeof import('./src/components/upload-file.vue')['default']
}
}

16
src/components/table-custom.vue
View File

@ -59,6 +59,9 @@
<el-button type="danger" size="small" :icon="Link" @click="handlePush(row)" v-if="item.operate.push.link">
{{item.operate.push.label}}
</el-button>
<el-button type="danger" size="small" :icon="Link" @click="genOperate(row)" v-if="item.operate.gen.show">
{{item.operate.gen.label}}
</el-button>
</template>
<span v-else-if="item.formatter">
{{ item.formatter(row[item.prop]) }}
@ -147,7 +150,11 @@ const props = defineProps({
changePage: {
type: Function,
default: () => { }
}
},
genOperate: {
type: Function,
default: () => { }
},
})
let {
@ -199,6 +206,13 @@ const handlePush = (row) => {
.catch(() => { });
};
const handleGen = (row) => {
async () => {
console.log("gen row:", row);
props.genOperate(row);
}
};
const getIndex = (index: number) => {
return index + 1 + (currentPage.value - 1) * pageSize.value
}

6
src/components/table-search.vue
View File

@ -14,7 +14,7 @@
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="search">搜索</el-button>
<el-button :icon="Refresh" @click="resetForm(searchRef)">重置</el-button>
<el-button :icon="Refresh" @click="refresh">重置</el-button>
</el-form-item>
</el-form>
</div>
@ -38,6 +38,10 @@ const props = defineProps({
search: {
type: Function,
default: () => { }
},
refresh: {
type: Function,
default: () => { }
}
});

94
src/components/upload-file.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<div class="container">
<div class="content-title">支持拖拽</div>
<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">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip">只能上传 doc, docx, pdf, txt, png, jpg, jpeg 格式且不超过 5MB 的文件</div>
</el-upload>
<!-- <template #tip>
<div class="el-upload__tip">只能上传 doc, docx, pdf, txt, png, jpg, jpeg 格式且不超过 2MB 的文件</div>
</template> -->
</div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
const handle = (rawFile: any) => {
console.log(rawFile);
};
const allowedTypes = ['doc', 'docx', 'pdf', 'txt', 'png', 'jpg', 'jpeg'];
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) => {
const fileExtension = file.name.split('.').pop().toLowerCase();
const isAllowedType = allowedTypes.includes(fileExtension);
if (!isAllowedType) {
ElMessage.error('不允许的文件类型，仅支持 doc, docx, pdf, txt, png, jpg, jpeg 格式');
return false;
}
// 可以在这里进行文件验证等操作
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
ElMessage.error('上传文件大小不能超过 5MB');
}
return isLt2M;
};
</script>
<style scoped>
.content-title {
font-weight: 400;
line-height: 50px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
.upload-demo {
width: 30%;
}
</style>

4
src/store/permiss.ts
View File

@ -12,7 +12,7 @@ export const usePermissStore = defineStore('permiss', {
defaultList: <ObjectList>{
admin: [
'0',
'1',
'1', //系统管理
'11', //用户管理
'12',
'13',
@ -54,7 +54,7 @@ export const usePermissStore = defineStore('permiss', {
'55', //提示词生成
'56', //文件管理
],
user: ['0', '8', '7','9', '61','53'],
user: ['0', '1' ,'8', '7','9', '61','53','51','56'],
},
};
},

16
src/types/file.ts
View File

@ -1,6 +1,12 @@
export interface File {
name: string;
size: number;
type: string;
lastModified: number;
}
ID: number;
CreatedAt: string;
UpdatedAt: string;
DeletedAt: string;
UserFileName: string;
UploadType: string;
IsPrivate: boolean;
file_store_name: string;
}
export const fileUrl ="https://pm.ljsea.top/file/";

6
src/views/system/function.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true" v-if="userRole">新增</el-button>
</template>
@ -73,7 +73,7 @@ let columns = ref([
{ prop: 'Function', label: '功能' },
{ prop: 'Info', label: '描述信息' },
{ prop: 'CreatedAt', label: '创建时间',type: 'date' },
{ prop: 'operator', label: '操作', width: 250 , operate: { view: true, edit: true, delete: true,push: {link: false,label:"继续该会话"} }},
{ prop: 'operator', label: '操作', width: 250 , operate: { view: true, edit: true, delete: true,push: {link: false,label:"继续该会话"},gen: {show: false,label:"下载文件"} }},
])
const page = reactive({
index: 1,

77
src/views/system/manage-file.vue
View File

@ -1,11 +1,11 @@
<template>
<div>
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true" v-if="userRole">新增</el-button>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true" v-if="userRole">上传文件</el-button>
</template>
</TableCustom>
@ -14,9 +14,9 @@
: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
<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" />
<UploadFile></UploadFile>
</el-dialog>
<el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
<TableDetail :data="viewData"></TableDetail>
@ -26,15 +26,17 @@
<script setup lang="ts" name="system-user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { ElMessage,ElMessageBox } 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 { File,fileUrl } from '@/types/file';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import UploadFile from '@/components/upload-file.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
const userRole = localStorage.getItem('role') == 'admin';
@ -43,14 +45,14 @@ const page = reactive({
size: 10,
total: 122,
})
const tableData = ref<[]>([]);
const tableData = ref<File[]>([]);
// 查询相关
const query = reactive({
name: '',
});
const searchOpt = ref<FormOptionList[]>([
{ type: 'input', label: '会话ID：', prop: 'name' }
{ type: 'input', label: '文件名：', prop: 'name' }
])
const handleSearch = async () => {
// if (isFinite(query.name) == false){
@ -59,8 +61,12 @@ const handleSearch = async () => {
// }
let req={
token: localStorage.getItem('token'),
type: "ID",
id: parseInt(query.name)
type: "search",
file_name: query.name,
}
if (!req.file_name) {
ElMessage.error("请求参数不能为空");
return;
}
let result = await FindUserFileService(req);
tableData.value = result.data;
@ -75,7 +81,8 @@ let columns = ref([
{ 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:"继续该会话"} }},
{ prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: false,label:"继续该会话"} ,gen: {show: true,label:"下载文件"}},
align: 'center', fixed: 'right' },
])
const getData = async () => {
@ -129,9 +136,15 @@ const updateData = async (data) => {
try{
let req={
token:localStorage.getItem("token"),
id: data.ID,
name: data.Name
file_id: data.ID,
file_name: data.UserFileName,
};
console.log("update row data:", req);
//检查请求参数
if (!req.file_name) {
ElMessage.error("请求参数错误");
return;
}
result = await UpdateUserFileService(req)
if (result["code"] === 0) {
ElMessage.success("更新成功");
@ -143,7 +156,7 @@ const updateData = async (data) => {
console.log(e);
}
closeDialog();
handleSearch();
getData();
};
const addData = async (data) => {
@ -153,7 +166,7 @@ const addData = async (data) => {
token:localStorage.getItem("token"),
name: data.Name
};
result = await AddSessionService(req)
//result = await AddSessionService(req)
if (result["code"] === 0) {
ElMessage.success("新增成功");
} else {
@ -180,7 +193,7 @@ const viewData = ref({
row: {},
list: []
});
const handleView =async (row: Session) => {
const handleView =async (row: File) => {
viewData.value.row = row;
viewData.value.list = [
@ -188,8 +201,38 @@ const handleView =async (row: Session) => {
visible1.value = true;
};
const handleGenOperate = async (row: File) => {
console.log("gen row:", row);
//弹出提示框
ElMessageBox.confirm('确定要下载吗？', '提示', {
type: 'warning'
})
.then(async () => {
// 处理下载逻辑
downloadFile(row);
})
.catch(() => { });
}
const downloadFile = async (row: File) => {
const fileUrl_ = fileUrl+row.file_store_name;
const response = await fetch(fileUrl_)
const blob = await response.blob()
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = row.UserFileName // 设置下载的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
// 释放内存
window.URL.revokeObjectURL(url)
ElMessage.success('文件下载成功')
};
// 删除相关
const handleDelete = async (row: Session) => {
const handleDelete = async (row: File) => {
let req={
token: localStorage.getItem('token'),
id: row.ID,

10
src/views/system/manage-model.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true" v-if="userRole">新增</el-button>
</template>
@ -74,7 +74,7 @@ let columns = ref([
{ prop: 'Parameter', label: '参数', width: 250 },
{prop: 'Url', label: 'URl'},
{ prop: 'CreatedAt', label: '创建时间',type: 'date' },
{ prop: 'operator', label: '操作', width: 250 , operate: { view: true, edit: true, delete: true,push: {link: false,label:"继续该会话"} }},
{ prop: 'operator', label: '操作', width: 250 , operate: { view: true, edit: true, delete: true,push: {link: false,label:"继续该会话"},gen: {show: false,label:"下载文件"} }},
])
const page = reactive({
index: 1,
@ -190,6 +190,10 @@ const closeDialog = () => {
isEdit.value = false;
};
const handleGenOperate = async (row: File) => {
console.log("gen row:", row);
}
// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({

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

@ -1,9 +1,9 @@
<template>
<div>
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true" v-if="userRole">新增</el-button>
</template>
@ -80,7 +80,7 @@ let columns = ref([
{ prop: "Context", label: "会话背景参数" ,width: 100},
{ prop: 'CreatedAt', label: '创建时间',type: 'date',width: 150 },
{ prop: 'UpdatedAt', label: '更新时间',type: 'date',width: 150 },
{ prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: true,label:"继续该会话"} }},
{ prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: true,label:"继续该会话"},gen: {show: false,label:"下载文件"}}},
])
const getData = async () => {
@ -99,6 +99,10 @@ const changePage = (val: number) => {
getData();
};
const handleGenOperate = async (row: File) => {
console.log("gen row:", row);
}
// 新增弹窗
let options = ref<FormOption>({
labelWidth: '100px',

4
src/views/system/user.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
@ -73,7 +73,7 @@ let columns = ref([
{ prop: 'Role', label: '角色' },
{ prop: 'CreatedAt', label: '创建时间',type: 'date' },
{ prop: 'Email', label: '邮箱' },
{ prop: 'operator', label: '操作', width: 250 ,operate: { view: true, edit: true, delete: true ,push: {link: false,label:"继续该会话"}}},
{ prop: 'operator', label: '操作', width: 250 ,operate: { view: true, edit: true, delete: true ,push: {link: false,label:"继续该会话"},gen: {show: false,label:"下载文件"}}},
])
const page = reactive({
index: 1,