|
@@ -1,269 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="other-container" style="margin-top: 178px;">
|
|
|
- <IHeader />
|
|
|
- <div style="padding-top: 10px;background: #FFF;margin-top:20px;">
|
|
|
- <div style="width: 200px;display:inline-block;">
|
|
|
- <el-menu
|
|
|
- :default-active="selectDepartId.toString()"
|
|
|
- class="el-menu-vertical-demo"
|
|
|
- @select="handleSelectDepart">
|
|
|
- <template v-for="(item, index) in list">
|
|
|
- <el-menu-item :index="item.id.toString()">
|
|
|
- <span>{{ item.value }}</span>
|
|
|
- </el-menu-item>
|
|
|
- </template>
|
|
|
- </el-menu>
|
|
|
- </div>
|
|
|
- <div style="width: 800px;display:inline-block;padding: 0 20px;vertical-align: top;">
|
|
|
- <div style="margin: 10px;position:relative;">
|
|
|
- <i class="el-icon-location"></i>
|
|
|
- <el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>我的文件列表</el-breadcrumb-item>
|
|
|
- </el-breadcrumb>
|
|
|
- <div style="position:absolute;right: -10px;top:-5px;">
|
|
|
- <el-autocomplete
|
|
|
- popper-class="my-autocomplete"
|
|
|
- v-model="state3"
|
|
|
- :fetch-suggestions="querySearch"
|
|
|
- clearable
|
|
|
- placeholder="搜索文件"
|
|
|
- size="mini"
|
|
|
- @select="handleSelectFile">
|
|
|
- <i
|
|
|
- class="el-icon-search el-input__icon"
|
|
|
- slot="suffix"
|
|
|
- />
|
|
|
- <template slot-scope="props">
|
|
|
- <div class="name">{{ props.item.value }}<span class="addr">({{ props.item.address }})</span></div>
|
|
|
- </template>
|
|
|
- </el-autocomplete>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-card class="box-card" v-if="!isShowMore">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>{{ selectDepartName }} 文件分类1</span>
|
|
|
- <el-button style="float: right; padding: 3px 0;color: #999;font-size: 12px;" type="text" @click="handleOpenMore(1)">更多></el-button>
|
|
|
- </div>
|
|
|
- <div v-for="o in 4" :key="o" class="text item">
|
|
|
- <div style="display: inline-block;width: 100%;">
|
|
|
- <el-link target="_blank" download="下载文件名" :href="require('@/icons/img/logo-apple.png')" :underline="false">
|
|
|
- <el-button class="fl" type="text">{{ selectDepartName + ' 文件名文件名' + o }}</el-button>
|
|
|
- </el-link>
|
|
|
- <span class="fr" style="color: #b4b4b4;">{{'2021-05-14 08:49:5' + o }}</span>
|
|
|
- <span style="clear: both;"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card" v-if="!isShowMore">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>{{ selectDepartName }} 文件分类2</span>
|
|
|
- <el-button style="float: right; padding: 3px 0;color: #999;font-size: 12px;" type="text" @click="handleOpenMore(2)">更多></el-button>
|
|
|
- </div>
|
|
|
- <div v-for="o in 4" :key="o" class="text item">
|
|
|
- <div style="display: inline-block;width: 100%;">
|
|
|
- <el-link target="_blank" download="下载文件名" :href="require('@/icons/img/logo-apple.png')" :underline="false">
|
|
|
- <el-button class="fl" type="text">{{ selectDepartName + ' 文件名文件名' + o }}</el-button>
|
|
|
- </el-link>
|
|
|
- <span class="fr" style="color: #b4b4b4;">{{'2021-05-14 08:49:5' + o }}</span>
|
|
|
- <span style="clear: both;"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card" v-if="!isShowMore">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>{{ selectDepartName }} 文件分类3</span>
|
|
|
- <el-button style="float: right; padding: 3px 0;color: #999;font-size: 12px;" type="text" @click="handleOpenMore(3)">更多></el-button>
|
|
|
- </div>
|
|
|
- <div v-for="o in 4" :key="o" class="text item">
|
|
|
- <div style="display: inline-block;width: 100%;">
|
|
|
- <el-link target="_blank" download="下载文件名" :href="require('@/icons/img/logo-apple.png')" :underline="false">
|
|
|
- <el-button class="fl" type="text">{{ selectDepartName + ' 文件名文件名' + o }}</el-button>
|
|
|
- </el-link>
|
|
|
- <span class="fr" style="color: #b4b4b4;">{{'2021-05-14 08:49:5' + o }}</span>
|
|
|
- <span style="clear: both;"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card" v-if="isShowMore">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>{{ selectDepartName }} 文件分类所有文件</span>
|
|
|
- <el-button style="float: right; padding: 3px 0;color: #999;font-size: 12px;" type="text" @click="handleCloseMore">返回</el-button>
|
|
|
- </div>
|
|
|
- <div v-for="o in 20" :key="o" class="text item">
|
|
|
- <div style="display: inline-block;width: 100%;">
|
|
|
- <el-link target="_blank" download="下载文件名" :href="require('@/icons/img/logo-apple.png')" :underline="false">
|
|
|
- <el-button class="fl" type="text">{{ selectDepartName + ' 文件名文件名' + o }}</el-button>
|
|
|
- </el-link>
|
|
|
- <span class="fr" style="color: #b4b4b4;">{{'2021-05-14 08:49:5' + o }}</span>
|
|
|
- <span style="clear: both;"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <IFooter />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import IHeader from "./components/IHeader";
|
|
|
-import IFooter from "./components/IFooter";
|
|
|
-import glIcon from '@/icons/img/2016smyjj_gl_icon.jpg'
|
|
|
-const options = [{
|
|
|
- id: 1,
|
|
|
- value: '我发布的文件',
|
|
|
- label: '我发布的文件'
|
|
|
-}, {
|
|
|
- id: 2,
|
|
|
- value: '我收藏的文件',
|
|
|
- label: '我收藏的文件'
|
|
|
-}, {
|
|
|
- id: 3,
|
|
|
- value: '最近浏览的文件',
|
|
|
- label: '最近浏览的文件'
|
|
|
-}, {
|
|
|
- id: 4,
|
|
|
- value: '最近下载的文件',
|
|
|
- label: '最近下载的文件'
|
|
|
-}];
|
|
|
-export default {
|
|
|
- name: 'application',
|
|
|
- components: {
|
|
|
- IHeader,
|
|
|
- IFooter
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- glIcon: glIcon,
|
|
|
- list: [],
|
|
|
- searchDepartId: "",
|
|
|
- restaurants: [],
|
|
|
- state3: '',
|
|
|
- selectDepartId:1,
|
|
|
- selectDepartName: '1办公室系统',
|
|
|
- isShowMore: false
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.list = options
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.restaurants = this.loadAll();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- selectDepartId: function(newDepartId, oldDepartId) {
|
|
|
- let that = this
|
|
|
- console.log("selectDepartId", newDepartId, oldDepartId)
|
|
|
- options.filter(function(item){
|
|
|
- if(item.id == newDepartId){
|
|
|
- that.selectDepartName = item.value
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- querySearch(queryString, cb) {
|
|
|
- var restaurants = this.restaurants;
|
|
|
- var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|
|
- // 调用 callback 返回建议列表的数据
|
|
|
- cb(results);
|
|
|
- },
|
|
|
- createFilter(queryString) {
|
|
|
- return (restaurant) => {
|
|
|
- return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
|
|
- };
|
|
|
- },
|
|
|
- loadAll() {
|
|
|
- return [
|
|
|
- { "value": "文件名1", "address": "部门1" },
|
|
|
- { "value": "文件名2", "address": "部门2" },
|
|
|
- { "value": "文件名3", "address": "部门1" },
|
|
|
- { "value": "文件名4", "address": "部门2" },
|
|
|
- { "value": "文件名5", "address": "部门1" },
|
|
|
- { "value": "文件名6", "address": "部门2" },
|
|
|
- { "value": "文件名7", "address": "部门1" }
|
|
|
- ];
|
|
|
- },
|
|
|
- querySearchAsync(queryString, cb) {
|
|
|
- var restaurants = this.restaurants;
|
|
|
- var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
|
|
|
- cb(results);
|
|
|
- },
|
|
|
- createStateFilter(queryString) {
|
|
|
- return (state) => {
|
|
|
- return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
|
|
- };
|
|
|
- },
|
|
|
- handleSelectFile(item) {
|
|
|
- console.log("handleSelectFile", item);
|
|
|
- },
|
|
|
- handleChangeDepart(item){
|
|
|
- console.log("handleChangeDepart", item);
|
|
|
- this.selectDepartId = item;
|
|
|
- // 切换文件列表
|
|
|
- },
|
|
|
- handleSelectDepart(key, keyPath) {
|
|
|
- console.log("handleSelectDepart", key, keyPath);
|
|
|
- this.selectDepartId = key;
|
|
|
- // 切换文件列表
|
|
|
- },
|
|
|
- handleOpenMore(index){
|
|
|
- console.log("handleOpenMore", index);
|
|
|
- this.isShowMore = true;
|
|
|
- },
|
|
|
- handleCloseMore(){
|
|
|
- console.log("handleCloseMore");
|
|
|
- this.isShowMore = false;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .el-breadcrumb{
|
|
|
- display: inline-block;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
- .box-card{
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .my-autocomplete {
|
|
|
- li {
|
|
|
- line-height: normal;
|
|
|
- padding: 7px;
|
|
|
-
|
|
|
- .name {
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .addr {
|
|
|
- font-size: 12px;
|
|
|
- color: #b4b4b4;
|
|
|
- }
|
|
|
-
|
|
|
- .highlighted .addr {
|
|
|
- color: #ddd;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-card__body .text{
|
|
|
- margin: 5px 0;
|
|
|
- }
|
|
|
- .el-button--medium{
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- color: #303133
|
|
|
- }
|
|
|
- .el-card{
|
|
|
- color: #1890ff;
|
|
|
- }
|
|
|
- .el-card__header{
|
|
|
- padding: 15px 20px;
|
|
|
- }
|
|
|
- .el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
- width: 200px;
|
|
|
- min-height: 400px;
|
|
|
- }
|
|
|
-</style>
|