288 lines
10 KiB
Vue
288 lines
10 KiB
Vue
<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> |