From 20b9aa2f1cb90d1fee1df143c32c06ba59c186a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=88=90=E6=98=8E?= <15110151257@163.com>
Date: Mon, 20 Jan 2025 18:05:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=96=87=E4=BB=B6=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/less/Suless.less         |  12 +-
 src/components/page/PageLayout.vue  |  61 +++---
 src/views/fileManage/index.vue      | 288 ++++++++++++++++++++++++++++
 src/views/system/PermissionList.vue |   2 +-
 4 files changed, 325 insertions(+), 38 deletions(-)
 create mode 100644 src/views/fileManage/index.vue

diff --git a/src/assets/less/Suless.less b/src/assets/less/Suless.less
index e277225..030b1e2 100644
--- a/src/assets/less/Suless.less
+++ b/src/assets/less/Suless.less
@@ -1045,13 +1045,15 @@ tr.ant-table-expanded-row:hover {
 
 .content {
   .table-operator {
-    position: absolute;
-    margin-bottom: 18px;
-    right: 10px;
-    top:30px;
+    // position: absolute;
+    // margin-bottom: 18px;
+    // right: 10px;
+    // top:30px;
+    padding: 10px 0;
+    text-align: right;
 
     button {
-      margin-right: 8px;
+      margin: 0 8px 0 0;
     }
   }
 }
\ No newline at end of file
diff --git a/src/components/page/PageLayout.vue b/src/components/page/PageLayout.vue
index ce88978..497958d 100644
--- a/src/components/page/PageLayout.vue
+++ b/src/components/page/PageLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div :style="!$route.meta.pageHeader ? 'margin: 0;' : null">
     <!-- pageHeader , route meta hideHeader:true on hide -->
-    <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
+    <!-- <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
       <slot slot="action" name="action"></slot>
       <slot slot="content" name="headerContent"></slot>
       <div slot="content" v-if="!this.$slots.headerContent && desc">
@@ -13,23 +13,22 @@
               <span>{{ link.title }}</span>
             </a>
           </template>
-        </div>
-      </div>
-      <slot slot="extra" name="extra"></slot>
-      <div slot="pageMenu">
-        <div class="page-menu-search" v-if="search">
-          <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
-        </div>
-        <div class="page-menu-tabs" v-if="tabs && tabs.items">
-          <!-- @change="callback" :activeKey="activeKey" -->
-          <a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
-            <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
-          </a-tabs>
-        </div>
-      </div>
-    </page-header>
-    <div class="leftMenu"></div>
-    <div class="content">
+</div>
+</div>
+<slot slot="extra" name="extra"></slot>
+<div slot="pageMenu">
+  <div class="page-menu-search" v-if="search">
+    <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
+  </div>
+  <div class="page-menu-tabs" v-if="tabs && tabs.items">
+    <a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
+      <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
+    </a-tabs>
+  </div>
+</div>
+</page-header>
+<div class="leftMenu"></div> -->
+    <div class="content"> 
       <div :class="['page-header-index-wide']">
         <slot></slot>
       </div>
@@ -79,26 +78,24 @@ export default {
       type: Object,
       default: () => { }
     }
-  },
-  methods: {
-  }
+  },  
 }
 </script>
 
 <style lang="less" scoped>
-.leftMenu {
-  width: 260px;
-  height: calc(100vh - 64px);
-  background-color: #00467C;
-  position: absolute;
-  left: 0;
-}
+// .leftMenu {
+//   width: 260px;
+//   height: calc(100vh - 64px);
+//   background-color: #00467C;
+//   position: absolute;
+//   left: 0;
+// }
 
 .content {
-  width: calc(100vw - 261px);
-  position: absolute;
-  left: 260px;
-  top: 140px;
+  // width: calc(100vw - 261px);
+  // position: absolute;
+  // left: 260px;
+  // top: 140px;
 
   .link {
     margin-top: 16px;
diff --git a/src/views/fileManage/index.vue b/src/views/fileManage/index.vue
new file mode 100644
index 0000000..bc28ec6
--- /dev/null
+++ b/src/views/fileManage/index.vue
@@ -0,0 +1,288 @@
+<template>
+    <div class="pageBackground">
+        <div class="breadHeader">文件管理/列表</div>
+        <div class="filecontent">
+            <a-layout>
+                <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>
+                    </div>
+                </a-layout-sider>
+                <a-layout-content>
+                    <div class="main">
+                        <div class="quarter-div">
+                            <a-row>
+                                <a-col :span="12" style="text-align: center;">
+                                    <img style="margin-top: 10px;" :src="guaz" />
+                                </a-col>
+                                <a-col :span="12">
+                                    <div style="margin-top: 14px">598</div>
+                                    <div>文件总数</div>
+                                </a-col>
+                            </a-row>
+                        </div>
+                        <div class="quarter-div">
+                            <a-row>
+                                <a-col :span="12" style="text-align: center;">
+                                    <img style="margin-top: 10px;" :src="guaz" />
+                                </a-col>
+                                <a-col :span="12">
+                                    <div style="margin-top: 14px">20</div>
+                                    <div>图片</div>
+                                </a-col>
+                            </a-row>
+                        </div>
+                        <div class="quarter-div">
+                            <a-row>
+                                <a-col :span="12" style="text-align: center;">
+                                    <img style="margin-top: 10px;" :src="guaz" />
+                                </a-col>
+                                <a-col :span="12">
+                                    <div style="margin-top: 14px">45</div>
+                                    <div>音频</div>
+                                </a-col>
+                            </a-row>
+                        </div>
+                        <div class="quarter-div">
+                            <a-row>
+                                <a-col :span="12" style="text-align: center;">
+                                    <img style="margin-top: 10px;" :src="guaz" />
+                                </a-col>
+                                <a-col :span="12">
+                                    <div style="margin-top: 14px">98</div>
+                                    <div>数据库文件</div>
+                                </a-col>
+                            </a-row>
+                        </div>
+                        <div class="quarter-div">
+                            <a-row>
+                                <a-col :span="12" style="text-align: center;">
+                                    <img style="margin-top: 10px;" :src="guaz" />
+                                </a-col>
+                                <a-col :span="12">
+                                    <div style="margin-top: 14px">112</div>
+                                    <div>视频</div>
+                                </a-col>
+                            </a-row>
+                        </div>
+                        <div class="quarter-div">
+                            <a-row>
+                                <a-col :span="12" style="text-align: center;">
+                                    <img style="margin-top: 10px;" :src="guaz" />
+                                </a-col>
+                                <a-col :span="12">
+                                    <div style="margin-top: 14px">36</div>
+                                    <div>文档</div>
+                                </a-col>
+                            </a-row>
+                        </div>
+                    </div>
+                    <div style="margin-top: 20px;">
+                        <a-row>
+                            <a-col :span="12">
+                                <a-form layout="inline">
+                                    <a-form-item>
+                                        <a-input placeholder="请输入" v-model="queryParam.keyWord"></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-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>
+                            </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 }"
+                            @change="handleTableChange">
+                            <span slot="action" slot-scope="text, record">
+                                <a>下载</a>
+                            </span>
+                        </a-table>
+                    </div>
+                </a-layout-content>
+            </a-layout>
+        </div>
+    </div>
+</template>
+<script>
+import guaz from '@assets/guaz.png'
+export default {
+    name: "fileManage",
+    data() {
+        return {
+            guaz,
+            expandedKeys: [],
+            selectedKeys: [],
+            treeData: [],
+            queryParam: {
+                keyWord: ''
+            },
+            columns: [
+                {
+                    title: "序号",
+                    width: 70,
+                    customRender: (text, record, index) => `${index + 1}`,
+                },
+                {
+                    title: '名称',
+                    align: "center",
+                    dataIndex: 'username',
+                    width: 120,
+                    sorter: true
+                },
+                {
+                    title: '类型',
+                    align: "center",
+                    width: 100,
+                    dataIndex: 'realname',
+                },
+                {
+                    title: '大小',
+                    align: "center",
+                    width: 120,
+                    dataIndex: 'avatar',
+                    scopedSlots: { customRender: "avatarslot" }
+                },
+
+                {
+                    title: '所属模型',
+                    align: "center",
+                    width: 80,
+                    dataIndex: 'sex_dictText',
+                    sorter: true
+                },
+                {
+                    title: '标签',
+                    align: "center",
+                    width: 100,
+                    dataIndex: 'birthday'
+                },
+                {
+                    title: '导入用户',
+                    align: "center",
+                    width: 100,
+                    dataIndex: 'phone'
+                },
+                {
+                    title: '部门',
+                    align: "center",
+                    width: 180,
+                    dataIndex: 'orgCodeTxt'
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    scopedSlots: { customRender: 'action' },
+                    align: "center",
+                    width: 170
+                }
+
+            ],
+            /* 分页参数 */
+            ipagination: {
+                current: 1,
+                pageSize: 5,
+                pageSizeOptions: ['5', '10', '20'],
+                showTotal: (total, range) => {
+                    return range[0] + "-" + range[1] + " 共" + total + "条"
+                },
+                showQuickJumper: true,
+                showSizeChanger: true,
+                total: 0
+            },
+            dataSource: [],
+            loading: false,
+            selectedRowKeys: []
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        onSelectChange() {
+
+        },
+        handleTableChange() {
+
+        }
+    }
+}
+</script>
+
+<style scoped>
+.pageBackground {
+    background: #dee3ee;
+    height: 100vh;
+    font-size: 23px;
+}
+
+.breadHeader {
+    height: 40px;
+    background: #FFFFFF;
+    line-height: 40px;
+    font-size: 18px;
+    color: #a3a8bb;
+    padding: 0 100px;
+    margin-bottom: 8px;
+}
+
+.filecontent {
+    height: calc(100vh - 48px);
+    padding: 20px 30px;
+    background: #FFFFFF;
+}
+
+.siderHeader {
+    height: 50px;
+    color: #212224;
+    line-height: 50px;
+    font-size: 20px;
+    background: #ebf0ff;
+    text-align: center;
+}
+
+.flodContent {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+}
+
+.main {
+    width: 100%;
+    height: 100px;
+    /* position: absolute; */
+}
+
+.quarter-div {
+    width: 15%;
+    height: 100px;
+    float: left;
+    margin-right: 26px;
+    background: #edf2ff;
+    border: 1px solid #d3e5fd;
+    border-radius: 10px;
+}
+
+/deep/ .ant-layout-sider {
+    background: #f6f8ff !important;
+    border: 1px solid #dfe4f3;
+    border-radius: 10px;
+    height: calc(100vh - 180px);
+    min-width: 200px !important;
+    margin-left: 0px;
+    margin-right: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/PermissionList.vue b/src/views/system/PermissionList.vue
index f7732ad..0ccbd0c 100644
--- a/src/views/system/PermissionList.vue
+++ b/src/views/system/PermissionList.vue
@@ -21,7 +21,7 @@
         selectedRowKeys.length }}</a>项&nbsp;&nbsp;
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
-      <div style="height:640px;overflow:auto;">
+      <div style="height:calc(100vh - 128px);overflow:auto;">
       <a-table
         :columns="columns"
         size="middle"