完成文件管理页面

.env

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

.env.development

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

src/api/dirapi.js

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

src/api/fileapi.js

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

src/components/page/PageHeader.vue

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

src/views/dashboard/Analysis.vue

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

src/views/fileManage/index.vue

@@ -6,11 +6,23 @@
                 <a-layout-sider>
                     <div class="siderHeader">文件目录</div>
                     <div class="flodContent">
-                        <a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys"
+                         <a-dropdown :trigger="['contextmenu']">
-                            v-model:selectedKeys="selectedKeys">
+                           <a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys"
-                            <a-tree-node v-for="itemNode in treeData" :key="itemNode.id"
+                                v-model:selectedKeys="selectedKeys" @select="changeSelect">
-                                :title="itemNode.title"></a-tree-node>
+                                <a-tree-node v-for="itemNode in treeData" :key="itemNode.id"
-                        </a-directory-tree>
+                                    :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="search" style="margin-left: 21px" @click="searchgetFileList">查询</a-button>
-                                        <a-button type="primary" icon="reload" style="margin-left: 8px">重置</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>
+                                 <input
-                                <a-button type="primary" icon="reload" style="margin-left: 8px">删除</a-button>
+                                    type="file"
-                                <a-button type="primary" icon="search" style="margin-left: 21px">批量执行</a-button>
+                                    @change="getUpFileData" style="display:none;" id="file">
-                                <a-button type="primary" icon="reload" style="margin-left: 8px">数据导入</a-button>
+                                    <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"
+                        <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" class="fileTable"
-                            :dataSource="dataSource" :pagination="ipagination" :loading="loading"
+                            :dataSource="dataSource" :pagination="searchFileTable" :loading="loading"
-                            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                             @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: [],
+            treeData: [
-            queryParam: {
+            ],
-                keyWord: ''
+            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',
+                    dataIndex: 'fileSize'
-                    scopedSlots: { customRender: "avatarslot" }
                 },
 
                 {
-                    title: '所属模型',
+                    title: '文件类型',
                     align: "center",
                     width: 80,
-                    dataIndex: 'sex_dictText',
+                    dataIndex: 'fileTypeName'
-                    sorter: true
                 },
                 {
-                    title: '标签',
+                    title: '创建人',
                     align: "center",
                     width: 100,
-                    dataIndex: 'birthday'
+                    dataIndex: 'createByName'
-                },
-                {
-                    title: '导入用户',
-                    align: "center",
-                    width: 100,
-                    dataIndex: 'phone'
-                },
-                {
-                    title: '部门',
-                    align: "center",
-                    width: 180,
-                    dataIndex: 'orgCodeTxt'
                 },
                 {
                     title: '操作',
@@ -193,10 +199,10 @@ export default {
 
             ],
             /* 分页参数 */
-            ipagination: {
+            searchFileTable: {
                 current: 1,
-                pageSize: 5,
+                pageSize: 10,
-                pageSizeOptions: ['5', '10', '20'],
+                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;