提交文件管理界面
This commit is contained in:
王成明
parent
d375bca56a
commit
20b9aa2f1c
src
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
288
src/views/fileManage/index.vue
Normal file
288
src/views/fileManage/index.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
selectedRowKeys.length }}</a>项
|
||||
<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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user