feat(File): 在文件分页查询中添加文件路径筛选
- 在 PageFileInput 类中新增 FilePath 属性，用于筛选文件路径 - 这个改动允许用户在分页查询时根据文件路径进行筛选，提高了文件查询的灵活性和效率
This commit is contained in:
master
parent
6438995d47
commit
729c0c60f8
@ -1,124 +1,129 @@
|
|||||||
// Admin.NET 项目的版权、商标、专利和其他相关权利均受相应法律法规的保护。使用本项目应遵守相关法律法规和许可证的要求。
|
// Admin.NET 项目的版权、商标、专利和其他相关权利均受相应法律法规的保护。使用本项目应遵守相关法律法规和许可证的要求。
|
||||||
//
|
//
|
||||||
// 本项目主要遵循 MIT 许可证和 Apache 许可证（版本 2.0）进行分发和使用。许可证位于源代码树根目录中的 LICENSE-MIT 和 LICENSE-APACHE 文件。
|
// 本项目主要遵循 MIT 许可证和 Apache 许可证（版本 2.0）进行分发和使用。许可证位于源代码树根目录中的 LICENSE-MIT 和 LICENSE-APACHE 文件。
|
||||||
//
|
//
|
||||||
// 不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，我们不承担任何责任！
|
// 不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，我们不承担任何责任！
|
||||||
|
|
||||||
namespace Admin.NET.Core.Service;
|
namespace Admin.NET.Core.Service;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件分页查询
|
/// 文件分页查询
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public class PageFileInput : BasePageInput
|
public class PageFileInput : BasePageInput
|
||||||
{
|
{
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件名称
|
/// 文件名称
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string FileName { get; set; }
|
public string FileName { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件后缀
|
/// 文件路径
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string? Suffix { get; set; }
|
public string FilePath { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 开始时间
|
/// 文件后缀
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public DateTime? StartTime { get; set; }
|
public string? Suffix { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 结束时间
|
/// 开始时间
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public DateTime? EndTime { get; set; }
|
public DateTime? StartTime { get; set; }
|
||||||
}
|
|
||||||
|
/// <summary>
|
||||||
public class FileInput : BaseIdInput
|
/// 结束时间
|
||||||
{
|
/// </summary>
|
||||||
}
|
public DateTime? EndTime { get; set; }
|
||||||
|
}
|
||||||
public class DeleteFileInput : BaseIdInput
|
|
||||||
{
|
public class FileInput : BaseIdInput
|
||||||
}
|
{
|
||||||
|
}
|
||||||
/// <summary>
|
|
||||||
/// 上传文件
|
public class DeleteFileInput : BaseIdInput
|
||||||
/// </summary>
|
{
|
||||||
public class UploadFileInput : SysFile
|
}
|
||||||
{
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件
|
/// 上传文件
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Required]
|
public class UploadFileInput : SysFile
|
||||||
public IFormFile File { get; set; }
|
{
|
||||||
|
/// <summary>
|
||||||
/// <summary>
|
/// 文件
|
||||||
/// 文件路径
|
/// </summary>
|
||||||
/// </summary>
|
[Required]
|
||||||
public string Path { get; set; }
|
public IFormFile File { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件保存路径
|
/// 文件路径
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string SavePath { get; set; }
|
public string Path { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 允许格式：.jpeg.jpg.png.bmp.gif.tif
|
/// 文件保存路径
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string AllowSuffix { get; set; }
|
public string SavePath { get; set; }
|
||||||
}
|
|
||||||
|
/// <summary>
|
||||||
/// <summary>
|
/// 允许格式：.jpeg.jpg.png.bmp.gif.tif
|
||||||
/// 上传文件Base64
|
/// </summary>
|
||||||
/// </summary>
|
public string AllowSuffix { get; set; }
|
||||||
public class UploadFileFromBase64Input : SysFile
|
}
|
||||||
{
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件内容
|
/// 上传文件Base64
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string FileDataBase64 { get; set; }
|
public class UploadFileFromBase64Input : SysFile
|
||||||
|
{
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件类型( "image/jpeg",)
|
/// 文件内容
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string ContentType { get; set; }
|
public string FileDataBase64 { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 保存路径
|
/// 文件类型( "image/jpeg",)
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string Path { get; set; }
|
public string ContentType { get; set; }
|
||||||
}
|
|
||||||
|
/// <summary>
|
||||||
/// <summary>
|
/// 保存路径
|
||||||
/// 查询关联查询输入
|
/// </summary>
|
||||||
/// </summary>
|
public string Path { get; set; }
|
||||||
public class RelationQueryInput
|
}
|
||||||
{
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 关联对象名称
|
/// 查询关联查询输入
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string RelationName { get; set; }
|
public class RelationQueryInput
|
||||||
|
{
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 关联对象Id
|
/// 关联对象名称
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public long? RelationId { get; set; }
|
public string RelationName { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件类型：多个以","分割
|
/// 关联对象Id
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public string FileTypes { get; set; }
|
public long? RelationId { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 所属Id
|
/// 文件类型：多个以","分割
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public long? BelongId { get; set; }
|
public string FileTypes { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 文件类型分割
|
/// 所属Id
|
||||||
/// </summary>
|
/// </summary>
|
||||||
/// <returns></returns>
|
public long? BelongId { get; set; }
|
||||||
public string[] GetFileTypeBS()
|
|
||||||
{
|
/// <summary>
|
||||||
return FileTypes.Split(',');
|
/// 文件类型分割
|
||||||
}
|
/// </summary>
|
||||||
|
/// <returns></returns>
|
||||||
|
public string[] GetFileTypeBS()
|
||||||
|
{
|
||||||
|
return FileTypes.Split(',');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -20,6 +20,7 @@ import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } fr
|
|||||||
import { AccountTypeEnum } from '../models';
|
import { AccountTypeEnum } from '../models';
|
||||||
import { AdminResultIActionResult } from '../models';
|
import { AdminResultIActionResult } from '../models';
|
||||||
import { AdminResultListSysFile } from '../models';
|
import { AdminResultListSysFile } from '../models';
|
||||||
|
import { AdminResultObject } from '../models';
|
||||||
import { AdminResultSqlSugarPagedListSysFile } from '../models';
|
import { AdminResultSqlSugarPagedListSysFile } from '../models';
|
||||||
import { AdminResultString } from '../models';
|
import { AdminResultString } from '../models';
|
||||||
import { AdminResultSysFile } from '../models';
|
import { AdminResultSysFile } from '../models';
|
||||||
@ -231,6 +232,49 @@ export const SysFileApiAxiosParamCreator = function (configuration?: Configurati
|
|||||||
options: localVarRequestOptions,
|
options: localVarRequestOptions,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @summary 获取文件路径 🔖
|
||||||
|
* @param {*} [options] Override http request option.
|
||||||
|
* @throws {RequiredError}
|
||||||
|
*/
|
||||||
|
apiSysFileFolderGet: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||||
|
const localVarPath = `/api/sysFile/folder`;
|
||||||
|
// use dummy base URL string because the URL constructor only accepts absolute URLs.
|
||||||
|
const localVarUrlObj = new URL(localVarPath, 'https://example.com');
|
||||||
|
let baseOptions;
|
||||||
|
if (configuration) {
|
||||||
|
baseOptions = configuration.baseOptions;
|
||||||
|
}
|
||||||
|
const localVarRequestOptions :AxiosRequestConfig = { method: 'GET', ...baseOptions, ...options};
|
||||||
|
const localVarHeaderParameter = {} as any;
|
||||||
|
const localVarQueryParameter = {} as any;
|
||||||
|
|
||||||
|
// authentication Bearer required
|
||||||
|
// http bearer authentication required
|
||||||
|
if (configuration && configuration.accessToken) {
|
||||||
|
const accessToken = typeof configuration.accessToken === 'function'
|
||||||
|
? await configuration.accessToken()
|
||||||
|
: await configuration.accessToken;
|
||||||
|
localVarHeaderParameter["Authorization"] = "Bearer " + accessToken;
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = new URLSearchParams(localVarUrlObj.search);
|
||||||
|
for (const key in localVarQueryParameter) {
|
||||||
|
query.set(key, localVarQueryParameter[key]);
|
||||||
|
}
|
||||||
|
for (const key in options.params) {
|
||||||
|
query.set(key, options.params[key]);
|
||||||
|
}
|
||||||
|
localVarUrlObj.search = (new URLSearchParams(query)).toString();
|
||||||
|
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
|
||||||
|
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
|
||||||
|
|
||||||
|
return {
|
||||||
|
url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
|
||||||
|
options: localVarRequestOptions,
|
||||||
|
};
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @summary 获取文件分页列表 🔖
|
* @summary 获取文件分页列表 🔖
|
||||||
@ -1909,6 +1953,19 @@ export const SysFileApiFp = function(configuration?: Configuration) {
|
|||||||
return axios.request(axiosRequestArgs);
|
return axios.request(axiosRequestArgs);
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @summary 获取文件路径 🔖
|
||||||
|
* @param {*} [options] Override http request option.
|
||||||
|
* @throws {RequiredError}
|
||||||
|
*/
|
||||||
|
async apiSysFileFolderGet(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<AdminResultObject>>> {
|
||||||
|
const localVarAxiosArgs = await SysFileApiAxiosParamCreator(configuration).apiSysFileFolderGet(options);
|
||||||
|
return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
|
||||||
|
const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
|
||||||
|
return axios.request(axiosRequestArgs);
|
||||||
|
};
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @summary 获取文件分页列表 🔖
|
* @summary 获取文件分页列表 🔖
|
||||||
@ -2316,6 +2373,15 @@ export const SysFileApiFactory = function (configuration?: Configuration, basePa
|
|||||||
async apiSysFileFileGet(id?: number, options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultSysFile>> {
|
async apiSysFileFileGet(id?: number, options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultSysFile>> {
|
||||||
return SysFileApiFp(configuration).apiSysFileFileGet(id, options).then((request) => request(axios, basePath));
|
return SysFileApiFp(configuration).apiSysFileFileGet(id, options).then((request) => request(axios, basePath));
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @summary 获取文件路径 🔖
|
||||||
|
* @param {*} [options] Override http request option.
|
||||||
|
* @throws {RequiredError}
|
||||||
|
*/
|
||||||
|
async apiSysFileFolderGet(options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultObject>> {
|
||||||
|
return SysFileApiFp(configuration).apiSysFileFolderGet(options).then((request) => request(axios, basePath));
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @summary 获取文件分页列表 🔖
|
* @summary 获取文件分页列表 🔖
|
||||||
@ -2692,6 +2758,16 @@ export class SysFileApi extends BaseAPI {
|
|||||||
public async apiSysFileFileGet(id?: number, options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultSysFile>> {
|
public async apiSysFileFileGet(id?: number, options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultSysFile>> {
|
||||||
return SysFileApiFp(this.configuration).apiSysFileFileGet(id, options).then((request) => request(this.axios, this.basePath));
|
return SysFileApiFp(this.configuration).apiSysFileFileGet(id, options).then((request) => request(this.axios, this.basePath));
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @summary 获取文件路径 🔖
|
||||||
|
* @param {*} [options] Override http request option.
|
||||||
|
* @throws {RequiredError}
|
||||||
|
* @memberof SysFileApi
|
||||||
|
*/
|
||||||
|
public async apiSysFileFolderGet(options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultObject>> {
|
||||||
|
return SysFileApiFp(this.configuration).apiSysFileFolderGet(options).then((request) => request(this.axios, this.basePath));
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @summary 获取文件分页列表 🔖
|
* @summary 获取文件分页列表 🔖
|
||||||
|
|||||||
@ -90,6 +90,14 @@ export interface PageFileInput {
|
|||||||
*/
|
*/
|
||||||
fileName?: string | null;
|
fileName?: string | null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件路径
|
||||||
|
*
|
||||||
|
* @type {string}
|
||||||
|
* @memberof PageFileInput
|
||||||
|
*/
|
||||||
|
filePath?: string | null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 文件后缀
|
* 文件后缀
|
||||||
*
|
*
|
||||||
|
|||||||
148
Web/src/views/system/file/component/folderTree.vue
Normal file
148
Web/src/views/system/file/component/folderTree.vue
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
<template lang="">
|
||||||
|
<el-card class="box-card" shadow="hover" body-style="height:100%; overflow:auto;padding:5px;">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="tree-h-flex">
|
||||||
|
<div class="tree-h-left">
|
||||||
|
<el-input :prefix-icon="Search" v-model="filterText" placeholder="文件夹名称" />
|
||||||
|
</div>
|
||||||
|
<div class="tree-h-right">
|
||||||
|
<el-dropdown @command="handleCommand">
|
||||||
|
<el-button style="margin-left: 8px; width: 34px">
|
||||||
|
<el-icon class="el-icon--center">
|
||||||
|
<MoreFilled />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="expandAll">全部展开</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="collapseAll">全部折叠</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="rootNode">根节点</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="refresh">刷新</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div style="margin-bottom: 45px" v-loading="state.loading">
|
||||||
|
<el-tree
|
||||||
|
ref="treeRef"
|
||||||
|
class="filter-tree"
|
||||||
|
:data="state.folderData"
|
||||||
|
node-key="id"
|
||||||
|
:props="{ children: 'children', label: 'name' }"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
@node-click="nodeClick"
|
||||||
|
highlight-current
|
||||||
|
check-strictly
|
||||||
|
accordion
|
||||||
|
lazy
|
||||||
|
:load="loadNode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, reactive, ref, watch } from 'vue';
|
||||||
|
import type { ElTree } from 'element-plus';
|
||||||
|
import { Search, MoreFilled } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
import { getAPI } from '/@/utils/axios-utils';
|
||||||
|
import { SysFileApi } from '/@/api-services/api';
|
||||||
|
|
||||||
|
const filterText = ref('');
|
||||||
|
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
folderData: [] as any,
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initTreeData();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(filterText, (val) => {
|
||||||
|
treeRef.value!.filter(val);
|
||||||
|
});
|
||||||
|
|
||||||
|
const initTreeData = async () => {
|
||||||
|
state.loading = true;
|
||||||
|
var res = await getAPI(SysFileApi).apiSysFileFolderGet();
|
||||||
|
state.folderData = res.data.result ?? [];
|
||||||
|
state.loading = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadNode = async (node: any, resolve: any) => {
|
||||||
|
console.log(node);
|
||||||
|
if (node.data == undefined || Array.isArray(node.data)) return;
|
||||||
|
state.loading = true;
|
||||||
|
var data = state.folderData.find(u => u.id == node.data.id);
|
||||||
|
state.loading = false;
|
||||||
|
console.log(data);
|
||||||
|
if (data)
|
||||||
|
resolve(data.children);
|
||||||
|
else
|
||||||
|
resolve([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取已经选择
|
||||||
|
const getCheckedKeys = () => {
|
||||||
|
return treeRef.value!.getCheckedKeys();
|
||||||
|
};
|
||||||
|
|
||||||
|
const filterNode = (value: string, data: any) => {
|
||||||
|
if (!value) return true;
|
||||||
|
return data.name.includes(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCommand = async (command: string | number | object) => {
|
||||||
|
if ('expandAll' == command) {
|
||||||
|
for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
|
||||||
|
treeRef.value!.store._getAllNodes()[i].expanded = true;
|
||||||
|
}
|
||||||
|
} else if ('collapseAll' == command) {
|
||||||
|
for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
|
||||||
|
treeRef.value!.store._getAllNodes()[i].expanded = false;
|
||||||
|
}
|
||||||
|
} else if ('refresh' == command) {
|
||||||
|
initTreeData();
|
||||||
|
} else if ('rootNode' == command) {
|
||||||
|
emits('node-click', { id: 0, name: '' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 与父组件的交互逻辑
|
||||||
|
const emits = defineEmits(['node-click']);
|
||||||
|
|
||||||
|
const nodeClick = (node: any) => {
|
||||||
|
emits('node-click', { id: node.id, name: node.name });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出对象
|
||||||
|
defineExpose({ initTreeData, getCheckedKeys });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box-card {
|
||||||
|
flex: 1;
|
||||||
|
> :deep(.el-card__header) {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tree-h-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-h-left {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-h-right {
|
||||||
|
width: 42px;
|
||||||
|
min-width: 42px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,119 +1,127 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sys-file-container">
|
<div class="sys-file-container">
|
||||||
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
|
<splitpanes class="default-theme">
|
||||||
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
|
<pane size="20" style="display: flex">
|
||||||
<el-row :gutter="10">
|
<FolderTree ref="folderTreeRef" @node-click="handleNodeChange" />
|
||||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
</pane>
|
||||||
<el-form-item label="文件名称" prop="fileName">
|
|
||||||
<el-input v-model="state.queryParams.fileName" placeholder="文件名称" clearable @keyup.enter.native="handleQuery(true)" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
||||||
<el-form-item label="开始时间" prop="name">
|
|
||||||
<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" class="w100" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
||||||
<el-form-item label="结束时间" prop="code">
|
|
||||||
<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" class="w100" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
|
<pane size="80" style="display: flex; flex-direction: column">
|
||||||
|
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
|
||||||
|
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||||
|
<el-form-item label="文件名称" prop="fileName">
|
||||||
|
<el-input v-model="state.queryParams.fileName" placeholder="文件名称" clearable @keyup.enter.native="handleQuery(true)" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||||
|
<el-form-item label="开始时间" prop="name">
|
||||||
|
<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" class="w100" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||||
|
<el-form-item label="结束时间" prop="code">
|
||||||
|
<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" class="w100" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
<el-row>
|
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
|
||||||
<el-col>
|
|
||||||
<el-button-group>
|
|
||||||
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysFile/page'" :loading="options.loading"> 查询 </el-button>
|
|
||||||
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
|
|
||||||
</el-button-group>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
<el-row>
|
||||||
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
|
<el-col>
|
||||||
<template #toolbar_buttons>
|
<el-button-group>
|
||||||
<el-button type="primary" icon="ele-Plus" @click="showUpload" v-auth="'sysFile/uploadFile'"> 上传 </el-button>
|
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysFile/page'" :loading="options.loading"> 查询 </el-button>
|
||||||
</template>
|
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
|
||||||
<template #toolbar_tools> </template>
|
</el-button-group>
|
||||||
<template #empty>
|
</el-col>
|
||||||
<el-empty :image-size="200" />
|
</el-row>
|
||||||
</template>
|
</el-card>
|
||||||
<template #row_suffix="{ row }">
|
|
||||||
<el-tag round>{{ row.suffix }}</el-tag>
|
|
||||||
</template>
|
|
||||||
<template #row_isPublic="{ row }">
|
|
||||||
<el-tag v-if="row.isPublic === true" type="success">是</el-tag>
|
|
||||||
<el-tag v-else type="danger">否</el-tag>
|
|
||||||
</template>
|
|
||||||
<template #row_url="{ row }">
|
|
||||||
<el-image
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="fetchFileUrl(row)"
|
|
||||||
alt="无法预览"
|
|
||||||
lazy
|
|
||||||
hide-on-click-modal
|
|
||||||
:preview-src-list="[fetchFileUrl(row)]"
|
|
||||||
:initial-index="0"
|
|
||||||
fit="scale-down"
|
|
||||||
preview-teleported
|
|
||||||
></el-image>
|
|
||||||
</template>
|
|
||||||
<template #row_buttons="{ row }">
|
|
||||||
<el-tooltip content="编辑" placement="top">
|
|
||||||
<el-button icon="ele-Edit" size="small" text type="primary" @click="handleEdit(row)" v-auth="'sysFile/update'" />
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip content="删除" placement="top">
|
|
||||||
<el-button icon="ele-Delete" size="small" text type="danger" @click="handleDelete(row)" v-auth="'sysFile/delete'" />
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip content="预览" placement="top">
|
|
||||||
<el-button icon="ele-View" size="small" text type="primary" @click="showPreviewDialog(row)" v-auth="'sysFile/preview'" />
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip content="下载" placement="top">
|
|
||||||
<el-button icon="ele-Download" size="small" text type="primary" @click="handleDownload(row)" v-auth="'sysFile/downloadFile'" />
|
|
||||||
</el-tooltip>
|
|
||||||
</template>
|
|
||||||
</vxe-grid>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-dialog v-model="state.visible" :lock-scroll="false" draggable overflow destroy-on-close width="400px">
|
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
||||||
<template #header>
|
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
|
||||||
<div style="color: #fff">
|
<template #toolbar_buttons>
|
||||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-UploadFilled /> </el-icon>
|
<el-button type="primary" icon="ele-Plus" @click="showUpload" v-auth="'sysFile/uploadFile'"> 上传 </el-button>
|
||||||
<span> 上传文件 </span>
|
</template>
|
||||||
</div>
|
<template #toolbar_tools> </template>
|
||||||
</template>
|
<template #empty>
|
||||||
<div>
|
<el-empty :image-size="200" />
|
||||||
<el-select v-model="state.fileType" placeholder="请选择文件类型" style="margin-bottom: 10px">
|
</template>
|
||||||
<el-option label="相关文件" value="相关文件" />
|
<template #row_suffix="{ row }">
|
||||||
<el-option label="归档文件" value="归档文件" />
|
<el-tag round>{{ row.suffix }}</el-tag>
|
||||||
</el-select>
|
</template>
|
||||||
是否公开：
|
<template #row_isPublic="{ row }">
|
||||||
<el-radio-group v-model="state.isPublic" style="margin-bottom: 10px">
|
<el-tag v-if="row.isPublic === true" type="success">是</el-tag>
|
||||||
<el-radio :value="false">否</el-radio>
|
<el-tag v-else type="danger">否</el-tag>
|
||||||
<el-radio :value="true">是</el-radio>
|
</template>
|
||||||
</el-radio-group>
|
<template #row_url="{ row }">
|
||||||
|
<el-image
|
||||||
|
style="width: 60px; height: 60px"
|
||||||
|
:src="fetchFileUrl(row)"
|
||||||
|
alt="无法预览"
|
||||||
|
lazy
|
||||||
|
hide-on-click-modal
|
||||||
|
:preview-src-list="[fetchFileUrl(row)]"
|
||||||
|
:initial-index="0"
|
||||||
|
fit="scale-down"
|
||||||
|
preview-teleported
|
||||||
|
></el-image>
|
||||||
|
</template>
|
||||||
|
<template #row_buttons="{ row }">
|
||||||
|
<el-tooltip content="编辑" placement="top">
|
||||||
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="handleEdit(row)" v-auth="'sysFile/update'" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="删除" placement="top">
|
||||||
|
<el-button icon="ele-Delete" size="small" text type="danger" @click="handleDelete(row)" v-auth="'sysFile/delete'" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="预览" placement="top">
|
||||||
|
<el-button icon="ele-View" size="small" text type="primary" @click="showPreviewDialog(row)" v-auth="'sysFile/preview'" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="下载" placement="top">
|
||||||
|
<el-button icon="ele-Download" size="small" text type="primary" @click="handleDownload(row)" v-auth="'sysFile/downloadFile'" />
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
</vxe-grid>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
<el-upload ref="uploadRef" drag :auto-upload="false" :limit="1" :file-list="state.fileList" action="" :on-change="handleChange" accept=".jpg,.png,.bmp,.gif,.txt,.pdf,.xlsx,.docx">
|
<el-dialog v-model="state.visible" :lock-scroll="false" draggable overflow destroy-on-close width="400px">
|
||||||
<el-icon class="el-icon--upload">
|
<template #header>
|
||||||
<ele-UploadFilled />
|
<div style="color: #fff">
|
||||||
</el-icon>
|
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-UploadFilled /> </el-icon>
|
||||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<span> 上传文件 </span>
|
||||||
<template #tip>
|
</div>
|
||||||
<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
|
|
||||||
</template>
|
</template>
|
||||||
</el-upload>
|
<div>
|
||||||
</div>
|
<el-select v-model="state.fileType" placeholder="请选择文件类型" style="margin-bottom: 10px">
|
||||||
<template #footer>
|
<el-option label="相关文件" value="相关文件" />
|
||||||
<span class="dialog-footer">
|
<el-option label="归档文件" value="归档文件" />
|
||||||
<el-button @click="state.visible = false">取消</el-button>
|
</el-select>
|
||||||
<el-button type="primary" @click="handleUpload">确定</el-button>
|
是否公开：
|
||||||
</span>
|
<el-radio-group v-model="state.isPublic" style="margin-bottom: 10px">
|
||||||
</template>
|
<el-radio :value="false">否</el-radio>
|
||||||
</el-dialog>
|
<el-radio :value="true">是</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
|
||||||
|
<el-upload ref="uploadRef" drag :auto-upload="false" :limit="1" :file-list="state.fileList" action="" :on-change="handleChange" accept=".jpg,.png,.bmp,.gif,.txt,.pdf,.xlsx,.docx">
|
||||||
|
<el-icon class="el-icon--upload">
|
||||||
|
<ele-UploadFilled />
|
||||||
|
</el-icon>
|
||||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||||
|
<template #tip>
|
||||||
|
<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="state.visible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleUpload">确定</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</pane>
|
||||||
|
</splitpanes>
|
||||||
|
|
||||||
<el-drawer :title="state.fileName" v-model="state.docxVisible" size="70%" destroy-on-close>
|
<el-drawer :title="state.fileName" v-model="state.docxVisible" size="70%" destroy-on-close>
|
||||||
<vue-office-docx :src="state.docxUrl" style="height: calc(100vh - 37px)" @rendered="handleRendered" @error="handleError" />
|
<vue-office-docx :src="state.docxUrl" style="height: calc(100vh - 37px)" @rendered="handleRendered" @error="handleError" />
|
||||||
@ -135,13 +143,19 @@ import { ElMessageBox, ElMessage, UploadInstance } from 'element-plus';
|
|||||||
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
|
import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
|
||||||
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
|
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
|
||||||
import { Local } from '/@/utils/storage';
|
import { Local } from '/@/utils/storage';
|
||||||
|
|
||||||
|
import { Splitpanes, Pane } from 'splitpanes';
|
||||||
|
import 'splitpanes/dist/splitpanes.css';
|
||||||
|
|
||||||
import { downloadByUrl } from '/@/utils/download';
|
import { downloadByUrl } from '/@/utils/download';
|
||||||
|
|
||||||
import VueOfficeDocx from '@vue-office/docx';
|
import VueOfficeDocx from '@vue-office/docx';
|
||||||
import VueOfficeExcel from '@vue-office/excel';
|
import VueOfficeExcel from '@vue-office/excel';
|
||||||
import VueOfficePdf from '@vue-office/pdf';
|
import VueOfficePdf from '@vue-office/pdf';
|
||||||
import '@vue-office/docx/lib/index.css';
|
import '@vue-office/docx/lib/index.css';
|
||||||
import '@vue-office/excel/lib/index.css';
|
import '@vue-office/excel/lib/index.css';
|
||||||
|
|
||||||
|
import FolderTree from '/@/views/system/file/component/folderTree.vue';
|
||||||
import EditFile from '/@/views/system/file/component/editFile.vue';
|
import EditFile from '/@/views/system/file/component/editFile.vue';
|
||||||
|
|
||||||
import { getAPI } from '/@/utils/axios-utils';
|
import { getAPI } from '/@/utils/axios-utils';
|
||||||
@ -152,9 +166,12 @@ const xGrid = ref<VxeGridInstance>();
|
|||||||
// const baseUrl = window.__env__.VITE_API_URL;
|
// const baseUrl = window.__env__.VITE_API_URL;
|
||||||
const uploadRef = ref<UploadInstance>();
|
const uploadRef = ref<UploadInstance>();
|
||||||
const editRef = ref<InstanceType<typeof EditFile>>();
|
const editRef = ref<InstanceType<typeof EditFile>>();
|
||||||
|
const folderTreeRef = ref<InstanceType<typeof FolderTree>>();
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
queryParams: {
|
queryParams: {
|
||||||
fileName: undefined,
|
fileName: undefined,
|
||||||
|
filePath: undefined,
|
||||||
startTime: undefined,
|
startTime: undefined,
|
||||||
endTime: undefined,
|
endTime: undefined,
|
||||||
},
|
},
|
||||||
@ -239,6 +256,7 @@ const handleQuery = async (reset = false) => {
|
|||||||
// 重置操作
|
// 重置操作
|
||||||
const resetQuery = async () => {
|
const resetQuery = async () => {
|
||||||
state.queryParams.fileName = undefined;
|
state.queryParams.fileName = undefined;
|
||||||
|
state.queryParams.filePath = undefined;
|
||||||
state.queryParams.startTime = undefined;
|
state.queryParams.startTime = undefined;
|
||||||
state.queryParams.endTime = undefined;
|
state.queryParams.endTime = undefined;
|
||||||
await xGrid.value?.commitProxy('reload');
|
await xGrid.value?.commitProxy('reload');
|
||||||
@ -301,6 +319,15 @@ const gridEvents: VxeGridListeners<SysFile> = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 树组件点击
|
||||||
|
const handleNodeChange = async (node: any) => {
|
||||||
|
state.queryParams.fileName = undefined;
|
||||||
|
state.queryParams.filePath = node.name;
|
||||||
|
state.queryParams.startTime = undefined;
|
||||||
|
state.queryParams.endTime = undefined;
|
||||||
|
await handleQuery();
|
||||||
|
};
|
||||||
|
|
||||||
// 打开Pdf预览页面
|
// 打开Pdf预览页面
|
||||||
const showPreviewDialog = async (row: any) => {
|
const showPreviewDialog = async (row: any) => {
|
||||||
if (row.suffix == '.pdf') {
|
if (row.suffix == '.pdf') {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user