IDCDatasync/IDCDatasync-vue
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成文件管理页面

Browse Source
This commit is contained in:
RenCheng 2025-01-21 17:34:36 +08:00
parent 20b9aa2f1c
commit ac75f9a594
7 changed files with 274 additions and 55 deletions

2
.env
View File

@ -1,3 +1,3 @@
NODE_ENV=production
NODE_ENV=development
VUE_APP_PLATFORM_NAME=
VUE_APP_SSO=false

2
.env.development
View File

@ -1,4 +1,4 @@
NODE_ENV=development
VUE_APP_API_BASE_URL=http://172.21.70.56:8081/jeecg-boot
VUE_APP_API_BASE_URL=http://rcproject.natapp1.cc/jeecg-boot
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

18
src/api/dirapi.js Normal file
View File

@ -0,0 +1,18 @@
import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'
//上传文件目录管理
const createDir = (params)=>postAction("/dir/createDir",params);
const logicDelDir = (params)=>deleteAction("/dir/logicDelDir",params);
const renameDir = (params)=>putAction("/dir/renameDir",params);
const dirtreeList = (params)=>getAction("/dir/treeList",params);
export {
createDir,
logicDelDir,
renameDir,
dirtreeList
}

22
src/api/fileapi.js Normal file
View File

@ -0,0 +1,22 @@
import { getAction, deleteAction, putAction, postAction, httpAction,uploadAction } from '@/api/manage'
//上传文件目录管理
const downloadFile = (params)=>httpAction("/file/downloadFile",params);
const filePreview = (params)=>getAction("/file/filePreview",params);
const logicDeleteFile = (params)=>deleteAction("/file/logicDeleteFile",params);
const pageList = (params)=>getAction("/file/pageList",params);
const uoloadFile = (params)=>uploadAction("/file/uoloadFile",params);
const verifyFileExist = (params)=>getAction("/file/verifyFileExist",params);
export {
downloadFile,
filePreview,
logicDeleteFile,
pageList,
uoloadFile,
verifyFileExist
}

1
src/components/page/PageHeader.vue
View File

@ -88,6 +88,7 @@
this.name = this.$route.name
this.$route.matched.forEach((item) => {
// item.name !== 'index' && this.breadList.push(item)
console.log(this.$route.matched);
this.breadList.push(item)
})
}

2
src/views/dashboard/Analysis.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div class="huanying"> 您好，欢迎使用数据同步系统</div>
<div class="huanying"> 您好，欢迎使用末端数据接入处理系统</div>
<!-- <index-chart v-if="indexStyle==1"></index-chart>
<index-bdc v-if="indexStyle==2"></index-bdc>
<index-task v-if="indexStyle==3"></index-task>

282
src/views/fileManage/index.vue
View File

@ -6,11 +6,23 @@
<a-layout-sider>
<div class="siderHeader">文件目录</div>
<div class="flodContent">
<a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys">
<a-tree-node v-for="itemNode in treeData" :key="itemNode.id"
:title="itemNode.title"></a-tree-node>
</a-directory-tree>
<a-dropdown :trigger="['contextmenu']">
<a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys" @select="changeSelect">
<a-tree-node v-for="itemNode in treeData" :key="itemNode.id"
:title="itemNode.title" :value="itemNode">
</a-tree-node>
</a-directory-tree>
<template #overlay>
<a-menu class="menu" @click="menuClick">
<a-menu-item key="1">添加</a-menu-item>
<a-menu-item key="2">重命名</a-menu-item>
<a-menu-item key="3">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</a-layout-sider>
<a-layout-content>
@ -87,50 +99,58 @@
<a-col :span="12">
<a-form layout="inline">
<a-form-item>
<a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
<a-input placeholder="请输入" v-model="searchFile.queryCondition"></a-input>
</a-form-item>
<a-form-item>
<a-button type="primary" icon="search" style="margin-left: 21px">查询</a-button>
<a-button type="primary" icon="reload" style="margin-left: 8px">重置</a-button>
<a-button type="primary" icon="search" style="margin-left: 21px" @click="searchgetFileList">查询</a-button>
<a-button type="primary" icon="reload" style="margin-left: 8px" @click="reloadFileList">重置</a-button>
</a-form-item>
</a-form>
</a-col>
<a-col :span="12" style="text-align: right;">
<a-button type="primary" icon="search" style="margin-left: 21px">文件移动</a-button>
<a-button type="primary" icon="reload" style="margin-left: 8px">删除</a-button>
<a-button type="primary" icon="search" style="margin-left: 21px">批量执行</a-button>
<a-button type="primary" icon="reload" style="margin-left: 8px">数据导入</a-button>
<input
type="file"
@change="getUpFileData" style="display:none;" id="file">
<a-button type="primary" style="margin-left: 8px" @click="clickfile">
<a-icon type="upload"/>
文件上传
</a-button>
</input>
</a-col>
</a-row>
</div>
<div style="margin-top: 15px">
<a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
:dataSource="dataSource" :pagination="ipagination" :loading="loading"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
<a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" class="fileTable"
:dataSource="dataSource" :pagination="searchFileTable" :loading="loading"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a>下载</a>
<a @click="download(record,$event)">下载</a>&nbsp; <a @click="viewFile(record,$event)">预览</a>&nbsp; <a @click="DeleteFile(record,$event)">删除</a>
</span>
</a-table>
</div>
</a-layout-content>
</a-layout>
</div>
<a-modal v-model:open="isopen" :title="modalTitle" ok-text="确认" cancel-text="取消" @ok="hideModal">
<a-input placeholder="请输入" v-model="dirName" style="color: #000000 !important"></a-input>
</a-modal>
</div>
</template>
<script>
import guaz from '@assets/guaz.png'
import {createDir,logicDelDir,renameDir,dirtreeList} from '@/api/dirapi'
import {downloadFile,filePreview,logicDeleteFile,pageList,uoloadFile} from '@/api/fileapi'
export default {
name: "fileManage",
data() {
return {
dirName:"",
guaz,
expandedKeys: [],
selectedKeys: [],
treeData: [],
queryParam: {
keyWord: ''
},
treeData: [
],
isopen:false,
columns: [
{
title: "序号",
@ -138,50 +158,36 @@ export default {
customRender: (text, record, index) => `${index + 1}`,
},
{
title: '名称',
title: '文件名称',
align: "center",
dataIndex: 'username',
dataIndex: 'fileName',
width: 120,
sorter: true
},
{
title: '类型',
title: '文件后缀',
align: "center",
width: 100,
dataIndex: 'realname',
dataIndex: 'fileSuffix',
},
{
title: '大小',
title: '文件大小',
align: "center",
width: 120,
dataIndex: 'avatar',
scopedSlots: { customRender: "avatarslot" }
dataIndex: 'fileSize'
},
{
title: '所属模型',
title: '文件类型',
align: "center",
width: 80,
dataIndex: 'sex_dictText',
sorter: true
dataIndex: 'fileTypeName'
},
{
title: '标签',
title: '创建人',
align: "center",
width: 100,
dataIndex: 'birthday'
},
{
title: '导入用户',
align: "center",
width: 100,
dataIndex: 'phone'
},
{
title: '部门',
align: "center",
width: 180,
dataIndex: 'orgCodeTxt'
dataIndex: 'createByName'
},
{
title: '操作',
@ -193,10 +199,10 @@ export default {
],
/* 分页参数 */
ipagination: {
searchFileTable: {
current: 1,
pageSize: 5,
pageSizeOptions: ['5', '10', '20'],
pageSize: 10,
pageSizeOptions: ['5', '10', '20','50','100'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
@ -206,18 +212,188 @@ export default {
},
dataSource: [],
loading: false,
selectedRowKeys: []
selectedRowKeys: [],
selectId:"0",
modalTitle:"",
modelType:"",
searchFile:{
"dirId":"",
"queryCondition":"",
"pageNum":"",
"pageSize":"",
},
}
},
created() {
},
mounted() {
this.getDirList();
},
computed: {
uploadAction() {
return window._CONFIG['domianURL'] + "/file/uoloadFile";
},
},
methods: {
onSelectChange() {
clickfile(){
document.getElementById("file").click();
},
getUpFileData(e){
if(this.selectId == "0"){
this.$message.warning("必须选择查询目录");
return;
}
let formData = new FormData()
const file = e.target.files[0];
formData.append('dirId', this.selectId);
formData.append('fileShare', false);
formData.append("fileName",document.getElementById("file").files[0].name);
formData.append("fileSuffix",'.'+(document.getElementById("file").files[0].name.split('.').slice(-1)[0]));
formData.append("fileSize",(document.getElementById("file").files[0].size/1024).toFixed(2));
formData.append("md5Value",Date.now());
formData.append("shareTotal","0");
formData.append("shareIndex","0");
formData.append("currShareM5","0");
formData.append("file",e.target.files[0]);
uoloadFile(formData).then((res) => {
if (res.success) {
this.getFileList();
}
this.$message.warning(res.message);
})
},
download(item){
let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
window.open(apiBaseUrl+"/file/downloadFile?fileId="+item.id);
},
viewFile(item){
filePreview({fileId:item.id}).then((res) => {
if (res.success) {
window.open("http://"+res.result,"_blank");
} else {
this.$message.warning(res.message);
}
});
},
DeleteFile(item){
var that = this;
that.$confirm({
title: "确认删除",
content: "是否删除选中文件?",
onOk: function () {
logicDeleteFile({id:item.id}).then((res) => {
that.$message.warning(res.message);
that.searchgetFileList();
});
}
});
},
onSelectChange(selectedRowKeys, selectedRows) {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
handleTableChange() {
},
reloadFileList(){
this.searchFile.queryCondition = "";
this.searchFile.pageNum = 1;
this.searchFile.pageSize = 10;
this.getFileList();
},
searchgetFileList(){
this.searchFile.dirId = this.selectId;
this.searchFile.pageNum = this.searchFileTable.current;
this.searchFile.pageSize = this.searchFileTable.pageSize;
this.getFileList();
},
getFileList(){
if(this.selectId == "0"){
this.$message.warning("必须选择查询目录");
return;
}
pageList(this.searchFile).then((res) => {
if (res.success) {
this.dataSource = res.result.rows
this.searchFileTable.total = res.result.total
} else {
this.$message.warning(res.message);
}
});
},
hideModal(){
this.isopen =false;
switch(this.modelType) {
case "create":
createDir({pid:this.selectId,dirName:this.dirName}).then((res) => {
if (res.success) {
this.treeData = res.result
this.getDirList();
} else {
this.$message.warning(res.message);
}
});
break;
case "rename":
renameDir({id:this.selectId,dirName:this.dirName}).then((res) => {
if (res.success) {
this.treeData = res.result
this.getDirList();
} else {
this.$message.warning(res.message);
}
});
break;
}
},
getDirList(){
dirtreeList({dirName:""}).then((res) => {
if (res.success) {
this.treeData = res.result
} else {
this.$message.warning(res.message);
}
});
},
menuClick(value){
switch(value.key) {
case "1":
this.createDir();
break;
case "2":
this.renameDir();
break;
case "3":
this.logicDelDir();
break;
}
},
createDir(){
this.modalTitle = "添加节点";
this.isopen =true;
this.modelType = "create";
this.dirName="";
},
logicDelDir(){
var that = this;
this.$confirm({
title: "确认删除",
content: "是否删除选中目录?",
onOk: function () {
logicDelDir({id:that.selectId}).then((res) => {
that.$message.warning(res.message);
that.getDirList();
});
}
});
},
renameDir(){
this.modalTitle = "重命名节点";
this.isopen =true;
this.modelType = "rename";
this.dirName="";
},
changeSelect(selectedKeys,e){
this.selectId = e.node.dataRef.id
}
}
}
@ -239,7 +415,9 @@ export default {
padding: 0 100px;
margin-bottom: 8px;
}
.menu{
background: #ffffff !important;
}
.filecontent {
height: calc(100vh - 48px);
padding: 20px 30px;