<template>
|
<div class="class_overview">
|
<div style="float: left; width: 100%; height: 50px;">
|
<span>请选择项目：</span>
|
<el-select v-model="value" placeholder="请选择" size="small">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
|
<el-button type="primary" style="float: right;" @click="addProject">新建项目</el-button>
|
|
</div>
|
<div style="float: left; margin-left: 1%; width: 69%; height: 80vh; ">
|
<div class="z_shadow" style="float: left; margin: 10px; margin-top: 0px; width: 46%; height: 43%; border: 1px solid #e4eef9;"></div>
|
<div class="z_shadow" style="float: left; margin: 10px; margin-top: 0px; width: 46%; height: 43%; border: 1px solid #e4eef9;"></div>
|
<div class="z_shadow" style="float: left; margin: 10px; width: 46%; height: 43%; border: 1px solid #e4eef9;"></div>
|
<div class="z_shadow" style="float: left; margin: 10px; padding: 10px; box-sizing: border-box; width: 46%; height: 43%; border: 1px solid #e4eef9;">
|
<h3 style="margin: 0px;">文档库</h3>
|
<div class="files_div">
|
<div style="width: 0px; height: 0px;">
|
<iframe ref="frame_export" style="width: 0px; height: 0px;"></iframe>
|
</div>
|
<div v-if="fileLevel > 0">
|
<el-button type="text" size="mini" @click="upFile_click">上一级</el-button>
|
</div>
|
<div v-for="(file, k) in fileList" :key="k" @click="file_click(file)" class="file_div">
|
<i v-if="file.type==='isfiles'" class="el-icon-folder"></i>
|
<i v-else-if="file.type==='isfile'" class="el-icon-tickets"></i>
|
<span>{{file.name}}</span>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<div class="z_shadow" style="float: right; margin-right: 1%; width: 28%; height: 70vh; border: 1px solid #e4eef9;"></div>
|
|
|
<el-dialog @close="Cancel" width="70%" top="50px" :visible.sync="dialog_1" append-to-body>
|
<newProject @closeNewProject="closeNewProject"></newProject>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import newProject from '../components/popup/newProject.vue'
|
|
export default {
|
components: {
|
newProject
|
},
|
data() {
|
return {
|
options: [
|
{
|
value: '选项1',
|
label: '项目1'
|
}, {
|
value: '选项2',
|
label: '项目2'
|
}, {
|
value: '选项3',
|
label: '项目3'
|
}, {
|
value: '选项4',
|
label: '项目4'
|
}, {
|
value: '选项5',
|
label: '项目5'
|
}
|
],
|
value: '',
|
dialog_1: false,
|
fileLevel: 0,
|
fileList: [],
|
}
|
},
|
mounted() {
|
let fileList1 = [
|
{name: "文件名称1", type: "isfile", path: ""},
|
{name: "文件名称2", type: "isfile", path: ""},
|
{name: "文件夹名称", type: "isfiles", path: ""},
|
];
|
this.fileList = fileList1;
|
},
|
|
methods: {
|
file_click(file) {
|
if (file.type == 'isfiles') {
|
let fileList2 = [
|
{name: "子文件名称1", type: "isfile", path: ""},
|
{name: "子文件名称2", type: "isfile", path: ""},
|
{name: "子文件夹名称", type: "isfiles", path: ""},
|
];
|
this.fileList = fileList2;
|
this.fileLevel ++;
|
}
|
else {
|
//下载
|
this.$refs.frame_export.src = "";
|
}
|
},
|
upFile_click() {
|
this.fileLevel --;
|
|
let fileList2 = [
|
{name: "文件名称1", type: "isfile", path: ""},
|
{name: "文件名称2", type: "isfile", path: ""},
|
{name: "文件夹名称", type: "isfiles", path: ""},
|
];
|
this.fileList = fileList2;
|
},
|
addProject() {
|
this.dialog_1 = true;
|
|
},
|
Cancel() {
|
|
},
|
closeNewProject() {
|
this.dialog_1 = false
|
},
|
}
|
|
}
|
</script>
|
|
<style>
|
.class_overview {
|
text-align: left;
|
background-color: #dee0e2;
|
}
|
|
.files_div{
|
height: 90%;
|
overflow: auto;
|
}
|
.file_div {
|
width: 30%;
|
height: 20px;
|
float: left;
|
}
|
.file_div :hover {
|
cursor: pointer;
|
font-weight: bold;
|
}
|
</style>
|
