<template>
|
<div class="homeBox">
|
<div class="herderBox">
|
<p>文件</p>
|
<div class="viewChangeBox">
|
<el-icon :size="16" v-if="viewMode == 0" @click="setViewMode"><Calendar /></el-icon>
|
<el-icon :size="16" v-if="viewMode == 1" @click="setViewMode"><Menu /></el-icon>
|
</div>
|
<div class="search">
|
<el-input v-model="searchKey" size="small" placeholder="关键字搜索">
|
<template #append>
|
<el-button :icon="Search" />
|
</template>
|
</el-input>
|
</div>
|
</div>
|
<div class="toolBox">
|
<div class="checkBox" v-if="viewMode == 0">
|
<el-checkbox
|
v-model="checkBoxState.check"
|
:indeterminate="checkBoxState.indeterminate"
|
@change="handleCheckAllChange"
|
/>
|
<span class="checkText">{{
|
checkBoxState.selectCount > 0
|
? `已选 ${checkBoxState.selectCount} 项`
|
: `共 ${checkBoxState.totalCount} 项`
|
}}</span>
|
</div>
|
<div class="sortBox" v-if="viewMode == 0">
|
<el-dropdown trigger="click" @command="sortChange">
|
<span class="sortText">
|
<el-icon :size="16"><Sort /></el-icon>
|
<span>
|
按{{ sortState.fields[sortState.selectFieldIndex].name
|
}}{{ sortState.types[sortState.selectTypeIndex].name }}排序
|
</span>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item
|
v-for="(item, index) in sortState.fields"
|
:key="item.value"
|
:command="'fields.' + item.value"
|
>
|
<p>
|
<span>
|
<el-icon v-if="sortState.selectFieldIndex == index" :size="16" color="#409EFF">
|
<Check />
|
</el-icon>
|
</span>
|
<span>{{ item.name }}</span>
|
</p>
|
</el-dropdown-item>
|
<el-dropdown-item
|
v-for="(item, index) in sortState.types"
|
:key="item.value"
|
:divided="index == 0"
|
:command="'types.' + item.value"
|
>
|
<p>
|
<span>
|
<el-icon v-if="sortState.selectTypeIndex == index" :size="16" color="#409EFF">
|
<Check />
|
</el-icon>
|
</span>
|
<span>{{ item.name }}</span>
|
</p>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
<div class="fileList">
|
<div v-if="viewMode == 0" class="blockBox">
|
<div class="fileItem" v-for="item in tableData">
|
<div class="iconBox">
|
<img :src="item.img" alt="" />
|
</div>
|
<p class="name">{{ item.name }}</p>
|
<p class="time">{{ item.createDate }}</p>
|
</div>
|
</div>
|
<el-table v-if="viewMode == 1" :data="tableData" style="width: 100%">
|
<el-table-column type="selection" width="55" />
|
<el-table-column type="index" width="80" />
|
<el-table-column prop="name" label="名称" sortable />
|
<el-table-column prop="createDate" label="创建时间" width="200" sortable />
|
<el-table-column prop="size" label="大小" width="200" sortable />
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive } from 'vue'
|
import { Search, Check } from '@element-plus/icons-vue'
|
import { useRouter, RouterView } from 'vue-router'
|
const router = useRouter()
|
|
// 搜索
|
const searchKey = ref('')
|
|
// 选择框
|
const checkBoxState = reactive({
|
selectCount: 0,
|
totalCount: 0,
|
check: false,
|
indeterminate: false
|
})
|
|
const handleCheckAllChange = (val) => {
|
if (val) {
|
checkBoxState.check = true
|
} else {
|
checkBoxState.check = false
|
}
|
checkBoxState.indeterminate = false
|
}
|
|
// 排序
|
const sortState = reactive({
|
fields: [
|
{
|
name: '名称',
|
value: 'Name'
|
},
|
{
|
name: '创建时间',
|
value: 'CreateDate'
|
},
|
{
|
name: '文件大小',
|
value: 'Size'
|
}
|
],
|
types: [
|
{
|
name: '升序',
|
value: 'Asc'
|
},
|
{
|
name: '降序',
|
value: 'Desc'
|
}
|
],
|
selectFieldIndex: 1,
|
selectTypeIndex: 1
|
})
|
|
const sortChange = (command) => {
|
const type = command.split('.')[0]
|
const data = command.split('.')[1]
|
if (type == 'fields') {
|
sortState.selectFieldIndex = sortState.fields.findIndex((item) => item.value == data)
|
} else {
|
sortState.selectTypeIndex = sortState.types.findIndex((item) => item.value == data)
|
}
|
}
|
|
// 视图模式 0:块状视图 1:表格视图
|
const viewMode = ref(0)
|
const setViewMode = () => {
|
if (viewMode.value == 0) {
|
viewMode.value = 1
|
} else {
|
viewMode.value = 0
|
}
|
}
|
|
// 文件列表
|
const tableData = ref([])
|
</script>
|
|
<style lang="less">
|
.homeBox {
|
width: 100%;
|
height: 100%;
|
padding: 50px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
.herderBox {
|
overflow: hidden;
|
margin-bottom: 20px;
|
p {
|
float: left;
|
font-size: 20px;
|
font-weight: bold;
|
line-height: 32px;
|
}
|
.search {
|
float: right;
|
margin-right: 20px;
|
}
|
.viewChangeBox {
|
float: right;
|
line-height: 32px;
|
i {
|
cursor: pointer;
|
vertical-align: sub;
|
}
|
}
|
}
|
.toolBox {
|
overflow: hidden;
|
margin-bottom: 10px;
|
line-height: 32px;
|
.checkBox {
|
float: left;
|
.checkText {
|
display: inline-block;
|
line-height: 32px;
|
vertical-align: top;
|
margin-left: 8px;
|
}
|
}
|
.sortBox {
|
float: right;
|
.sortText {
|
width: 150px;
|
line-height: 32px;
|
cursor: pointer;
|
i,
|
span {
|
vertical-align: middle;
|
}
|
}
|
}
|
}
|
.fileList {
|
flex: 1;
|
overflow: auto;
|
.blockBox {
|
overflow: hidden;
|
.fileItem {
|
width: 140px;
|
float: left;
|
margin: 20px;
|
padding: 15px;
|
border-radius: 10px;
|
cursor: context-menu;
|
&:hover {
|
background-color: #f1f1f1;
|
}
|
.iconBox {
|
width: 100%;
|
height: 140px;
|
margin-bottom: 10px;
|
position: relative;
|
img {
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
margin: auto;
|
border-radius: 6px;
|
}
|
}
|
.name {
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
margin-bottom: 8px;
|
}
|
.time {
|
font-size: 12px;
|
color: #999;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
