feat(File): 在文件分页查询中添加文件路径筛选
- 在 PageFileInput 类中新增 FilePath 属性，用于筛选文件路径 - 这个改动允许用户在分页查询时根据文件路径进行筛选，提高了文件查询的灵活性和效率
This commit is contained in:
master
parent
6438995d47
commit
729c0c60f8
@ -1,124 +1,129 @@
|
||||
// Admin.NET 项目的版权、商标、专利和其他相关权利均受相应法律法规的保护。使用本项目应遵守相关法律法规和许可证的要求。
|
||||
//
|
||||
// 本项目主要遵循 MIT 许可证和 Apache 许可证（版本 2.0）进行分发和使用。许可证位于源代码树根目录中的 LICENSE-MIT 和 LICENSE-APACHE 文件。
|
||||
//
|
||||
// 不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，我们不承担任何责任！
|
||||
|
||||
namespace Admin.NET.Core.Service;
|
||||
|
||||
/// <summary>
|
||||
/// 文件分页查询
|
||||
/// </summary>
|
||||
public class PageFileInput : BasePageInput
|
||||
{
|
||||
/// <summary>
|
||||
/// 文件名称
|
||||
/// </summary>
|
||||
public string FileName { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件后缀
|
||||
/// </summary>
|
||||
public string? Suffix { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 开始时间
|
||||
/// </summary>
|
||||
public DateTime? StartTime { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 结束时间
|
||||
/// </summary>
|
||||
public DateTime? EndTime { get; set; }
|
||||
}
|
||||
|
||||
public class FileInput : BaseIdInput
|
||||
{
|
||||
}
|
||||
|
||||
public class DeleteFileInput : BaseIdInput
|
||||
{
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 上传文件
|
||||
/// </summary>
|
||||
public class UploadFileInput : SysFile
|
||||
{
|
||||
/// <summary>
|
||||
/// 文件
|
||||
/// </summary>
|
||||
[Required]
|
||||
public IFormFile File { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件路径
|
||||
/// </summary>
|
||||
public string Path { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件保存路径
|
||||
/// </summary>
|
||||
public string SavePath { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 允许格式：.jpeg.jpg.png.bmp.gif.tif
|
||||
/// </summary>
|
||||
public string AllowSuffix { get; set; }
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 上传文件Base64
|
||||
/// </summary>
|
||||
public class UploadFileFromBase64Input : SysFile
|
||||
{
|
||||
/// <summary>
|
||||
/// 文件内容
|
||||
/// </summary>
|
||||
public string FileDataBase64 { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件类型( "image/jpeg",)
|
||||
/// </summary>
|
||||
public string ContentType { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 保存路径
|
||||
/// </summary>
|
||||
public string Path { get; set; }
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 查询关联查询输入
|
||||
/// </summary>
|
||||
public class RelationQueryInput
|
||||
{
|
||||
/// <summary>
|
||||
/// 关联对象名称
|
||||
/// </summary>
|
||||
public string RelationName { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 关联对象Id
|
||||
/// </summary>
|
||||
public long? RelationId { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件类型：多个以","分割
|
||||
/// </summary>
|
||||
public string FileTypes { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 所属Id
|
||||
/// </summary>
|
||||
public long? BelongId { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件类型分割
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
public string[] GetFileTypeBS()
|
||||
{
|
||||
return FileTypes.Split(',');
|
||||
}
|
||||
// Admin.NET 项目的版权、商标、专利和其他相关权利均受相应法律法规的保护。使用本项目应遵守相关法律法规和许可证的要求。
|
||||
//
|
||||
// 本项目主要遵循 MIT 许可证和 Apache 许可证（版本 2.0）进行分发和使用。许可证位于源代码树根目录中的 LICENSE-MIT 和 LICENSE-APACHE 文件。
|
||||
//
|
||||
// 不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，我们不承担任何责任！
|
||||
|
||||
namespace Admin.NET.Core.Service;
|
||||
|
||||
/// <summary>
|
||||
/// 文件分页查询
|
||||
/// </summary>
|
||||
public class PageFileInput : BasePageInput
|
||||
{
|
||||
/// <summary>
|
||||
/// 文件名称
|
||||
/// </summary>
|
||||
public string FileName { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件路径
|
||||
/// </summary>
|
||||
public string FilePath { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件后缀
|
||||
/// </summary>
|
||||
public string? Suffix { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 开始时间
|
||||
/// </summary>
|
||||
public DateTime? StartTime { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 结束时间
|
||||
/// </summary>
|
||||
public DateTime? EndTime { get; set; }
|
||||
}
|
||||
|
||||
public class FileInput : BaseIdInput
|
||||
{
|
||||
}
|
||||
|
||||
public class DeleteFileInput : BaseIdInput
|
||||
{
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 上传文件
|
||||
/// </summary>
|
||||
public class UploadFileInput : SysFile
|
||||
{
|
||||
/// <summary>
|
||||
/// 文件
|
||||
/// </summary>
|
||||
[Required]
|
||||
public IFormFile File { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件路径
|
||||
/// </summary>
|
||||
public string Path { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件保存路径
|
||||
/// </summary>
|
||||
public string SavePath { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 允许格式：.jpeg.jpg.png.bmp.gif.tif
|
||||
/// </summary>
|
||||
public string AllowSuffix { get; set; }
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 上传文件Base64
|
||||
/// </summary>
|
||||
public class UploadFileFromBase64Input : SysFile
|
||||
{
|
||||
/// <summary>
|
||||
/// 文件内容
|
||||
/// </summary>
|
||||
public string FileDataBase64 { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件类型( "image/jpeg",)
|
||||
/// </summary>
|
||||
public string ContentType { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 保存路径
|
||||
/// </summary>
|
||||
public string Path { get; set; }
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 查询关联查询输入
|
||||
/// </summary>
|
||||
public class RelationQueryInput
|
||||
{
|
||||
/// <summary>
|
||||
/// 关联对象名称
|
||||
/// </summary>
|
||||
public string RelationName { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 关联对象Id
|
||||
/// </summary>
|
||||
public long? RelationId { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件类型：多个以","分割
|
||||
/// </summary>
|
||||
public string FileTypes { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 所属Id
|
||||
/// </summary>
|
||||
public long? BelongId { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 文件类型分割
|
||||
/// </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 { AdminResultIActionResult } from '../models';
|
||||
import { AdminResultListSysFile } from '../models';
|
||||
import { AdminResultObject } from '../models';
|
||||
import { AdminResultSqlSugarPagedListSysFile } from '../models';
|
||||
import { AdminResultString } from '../models';
|
||||
import { AdminResultSysFile } from '../models';
|
||||
@ -231,6 +232,49 @@ export const SysFileApiAxiosParamCreator = function (configuration?: Configurati
|
||||
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 获取文件分页列表 🔖
|
||||
@ -1909,6 +1953,19 @@ export const SysFileApiFp = function(configuration?: Configuration) {
|
||||
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 获取文件分页列表 🔖
|
||||
@ -2316,6 +2373,15 @@ export const SysFileApiFactory = function (configuration?: Configuration, basePa
|
||||
async apiSysFileFileGet(id?: number, options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultSysFile>> {
|
||||
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 获取文件分页列表 🔖
|
||||
@ -2692,6 +2758,16 @@ export class SysFileApi extends BaseAPI {
|
||||
public async apiSysFileFileGet(id?: number, options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultSysFile>> {
|
||||
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 获取文件分页列表 🔖
|
||||
|
||||
@ -90,6 +90,14 @@ export interface PageFileInput {
|
||||
*/
|
||||
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>
|
||||
<div class="sys-file-container">
|
||||
<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>
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="20" style="display: flex">
|
||||
<FolderTree ref="folderTreeRef" @node-click="handleNodeChange" />
|
||||
</pane>
|
||||
|
||||
<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-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-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
|
||||
|
||||
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
||||
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
|
||||
<template #toolbar_buttons>
|
||||
<el-button type="primary" icon="ele-Plus" @click="showUpload" v-auth="'sysFile/uploadFile'"> 上传 </el-button>
|
||||
</template>
|
||||
<template #toolbar_tools> </template>
|
||||
<template #empty>
|
||||
<el-empty :image-size="200" />
|
||||
</template>
|
||||
<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-row>
|
||||
<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-dialog v-model="state.visible" :lock-scroll="false" draggable overflow destroy-on-close width="400px">
|
||||
<template #header>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-UploadFilled /> </el-icon>
|
||||
<span> 上传文件 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-select v-model="state.fileType" placeholder="请选择文件类型" style="margin-bottom: 10px">
|
||||
<el-option label="相关文件" value="相关文件" />
|
||||
<el-option label="归档文件" value="归档文件" />
|
||||
</el-select>
|
||||
是否公开：
|
||||
<el-radio-group v-model="state.isPublic" style="margin-bottom: 10px">
|
||||
<el-radio :value="false">否</el-radio>
|
||||
<el-radio :value="true">是</el-radio>
|
||||
</el-radio-group>
|
||||
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
||||
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
|
||||
<template #toolbar_buttons>
|
||||
<el-button type="primary" icon="ele-Plus" @click="showUpload" v-auth="'sysFile/uploadFile'"> 上传 </el-button>
|
||||
</template>
|
||||
<template #toolbar_tools> </template>
|
||||
<template #empty>
|
||||
<el-empty :image-size="200" />
|
||||
</template>
|
||||
<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-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>
|
||||
<el-dialog v-model="state.visible" :lock-scroll="false" draggable overflow destroy-on-close width="400px">
|
||||
<template #header>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-UploadFilled /> </el-icon>
|
||||
<span> 上传文件 </span>
|
||||
</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>
|
||||
<div>
|
||||
<el-select v-model="state.fileType" placeholder="请选择文件类型" style="margin-bottom: 10px">
|
||||
<el-option label="相关文件" value="相关文件" />
|
||||
<el-option label="归档文件" value="归档文件" />
|
||||
</el-select>
|
||||
是否公开：
|
||||
<el-radio-group v-model="state.isPublic" style="margin-bottom: 10px">
|
||||
<el-radio :value="false">否</el-radio>
|
||||
<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>
|
||||
<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 { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
|
||||
import { Local } from '/@/utils/storage';
|
||||
|
||||
import { Splitpanes, Pane } from 'splitpanes';
|
||||
import 'splitpanes/dist/splitpanes.css';
|
||||
|
||||
import { downloadByUrl } from '/@/utils/download';
|
||||
|
||||
import VueOfficeDocx from '@vue-office/docx';
|
||||
import VueOfficeExcel from '@vue-office/excel';
|
||||
import VueOfficePdf from '@vue-office/pdf';
|
||||
import '@vue-office/docx/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 { getAPI } from '/@/utils/axios-utils';
|
||||
@ -152,9 +166,12 @@ const xGrid = ref<VxeGridInstance>();
|
||||
// const baseUrl = window.__env__.VITE_API_URL;
|
||||
const uploadRef = ref<UploadInstance>();
|
||||
const editRef = ref<InstanceType<typeof EditFile>>();
|
||||
const folderTreeRef = ref<InstanceType<typeof FolderTree>>();
|
||||
|
||||
const state = reactive({
|
||||
queryParams: {
|
||||
fileName: undefined,
|
||||
filePath: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
},
|
||||
@ -239,6 +256,7 @@ const handleQuery = async (reset = false) => {
|
||||
// 重置操作
|
||||
const resetQuery = async () => {
|
||||
state.queryParams.fileName = undefined;
|
||||
state.queryParams.filePath = undefined;
|
||||
state.queryParams.startTime = undefined;
|
||||
state.queryParams.endTime = undefined;
|
||||
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预览页面
|
||||
const showPreviewDialog = async (row: any) => {
|
||||
if (row.suffix == '.pdf') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user