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

components.d.ts

@@ -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']
   }
 }

src/components/table-custom.vue

@@ -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
 }

src/components/table-search.vue

@@ -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: () => { }
 	}
 });
 

src/components/upload-file.vue

@@ -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>

src/store/permiss.ts

@@ -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'],
             },
         };
     },

src/types/file.ts

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

src/views/system/function.vue

@@ -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,

src/views/system/manage-file.vue

@@ -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",
+        type: "search",
-        id: parseInt(query.name)
+        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,
+            file_id: data.ID,
-            name: data.Name
+            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,

src/views/system/manage-model.vue

@@ -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({

src/views/system/manage-session.vue

@@ -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',

src/views/system/user.vue

@@ -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,