完成文件管理3.0的页面设计
This commit is contained in:
parent
9b77466bfe
commit
401d5ef394
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681356640637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2390" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M179 64h468.5l223 225.5V935c0 13.807-11.193 25-25 25H179c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z" fill="#00C090" p-id="2391"></path><path d="M647.5 64v200.5c0 13.807 11.193 25 25 25h198L647.5 64z" fill="#68DBBF" p-id="2392"></path><path d="M677.007 388.282L297.22 769.07c-13.65 13.685-13.623 35.846 0.062 49.497 13.685 13.652 35.846 13.624 49.498-0.061l379.786-380.787c13.652-13.685 13.624-35.846-0.061-49.498-13.686-13.65-35.846-13.623-49.498 0.062z" fill="#FFFFFF" p-id="2393"></path><path d="M297.22 436.718l379.787 380.787c13.652 13.685 35.812 13.713 49.498 0.061 13.685-13.651 13.713-35.812 0.061-49.497L346.78 387.282c-13.652-13.685-35.813-13.713-49.498-0.062-13.685 13.652-13.713 35.813-0.062 49.498z" fill="#FFFFFF" p-id="2394"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681356612320" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1778" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M918.673 883H104.327C82.578 883 65 867.368 65 848.027V276.973C65 257.632 82.578 242 104.327 242h814.346C940.422 242 958 257.632 958 276.973v571.054C958 867.28 940.323 883 918.673 883z" fill="#FFE9B4" p-id="1779"></path><path d="M512 411H65V210.37C65 188.597 82.598 171 104.371 171h305.92c17.4 0 32.71 11.334 37.681 28.036L512 411z" fill="#FFB02C" p-id="1780"></path><path d="M918.673 883H104.327C82.578 883 65 865.42 65 843.668V335.332C65 313.58 82.578 296 104.327 296h814.346C940.422 296 958 313.58 958 335.332v508.336C958 865.32 940.323 883 918.673 883z" fill="#FFCA28" p-id="1781"></path></svg>
|
||||
|
After Width: | Height: | Size: 930 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681356646324" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2691" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M179 64h468.5l223 225.5V935c0 13.807-11.193 25-25 25H179c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z" fill="#FF4867" p-id="2692"></path><path d="M647.5 64v200.5c0 13.807 11.193 25 25 25h198L647.5 64z" fill="#FF97A9" p-id="2693"></path><path d="M691.919 812c-44.4 0-84.22-76.189-105.17-125.732-35.243-14.71-74.092-28.45-111.831-37.331-33.022 21.788-89.214 54.4-132.365 54.4-26.778 0-46.064-13.461-53.14-36.914-5.411-19.29-0.832-32.613 4.995-39.83 11.377-15.543 34.825-23.453 69.929-23.453 28.443 0 64.517 4.996 104.754 14.71 25.945-18.457 52.307-39.829 75.756-62.45-10.406-49.404-21.784-129.479 7.076-166.393 14.29-17.625 36.074-23.454 62.436-15.543 28.86 8.326 39.82 25.951 43.15 39.829 12.21 48.155-43.15 113.103-80.473 151.267 8.325 33.029 19.286 67.862 32.606 99.78 53.556 23.87 117.24 59.536 124.456 98.394 2.913 13.461-1.249 25.951-12.21 36.915-9.435 7.771-19.425 12.351-29.97 12.351zM652 728c9.768 21.74 19.081 32 23.99 32 0.76 0 1.823-0.333 3.341-1.664 1.822-1.996 1.822-3.327 1.518-4.547-1.012-5.713-9.262-15.085-28.849-25.789z m-281.922-88c-15.62 0-19.913 3.774-21.22 5.535-0.373 0.566-1.493 2.264-0.373 6.666 0.933 3.774 3.547 7.799 11.636 7.799 10.143 0 24.829-5.723 41.879-15.975-12.196-2.704-22.962-4.025-31.922-4.025zM523 620.582c9.333 2.6 19.01 5.951 28 9.418-3.264-8.551-5.898-17.449-8.13-26A629.121 629.121 0 0 1 523 620.582zM588.966 433c-3.32 0-5.649 1.229-7.745 3.511-6.173 7.783-6.872 27.386-2.097 52.489 18.111-19.427 27.953-37.275 25.507-46.813-0.35-1.404-1.398-5.676-9.842-8.134-2.33-0.702-4.076-1.053-5.823-1.053z" fill="#FFFFFF" p-id="2694"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681356643005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2541" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M179 64h468.5l223 225.5V935c0 13.807-11.193 25-25 25H179c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z" fill="#FF7861" p-id="2542"></path><path d="M647.5 64v200.5c0 13.807 11.193 25 25 25h198L647.5 64z" fill="#FFB0A4" p-id="2543"></path><path d="M670.098 478.093C677.884 486.056 682 497.51 682 514.5c0 16.989-4.116 28.444-11.902 36.407-8.313 8.504-22.397 14.822-43.202 18.093H318c-19.33 0-35 15.67-35 35v157c0 19.33 15.67 35 35 35s35-15.67 35-35V639h276.5a35 35 0 0 0 4.95-0.352C709.214 627.968 752 584.203 752 514.5s-42.786-113.468-117.55-124.148a35 35 0 0 0-4.95-0.352H318c-19.33 0-35 15.67-35 35s15.67 35 35 35h308.896c20.805 3.271 34.889 9.589 43.202 18.093z" fill="#FFFFFF" p-id="2544"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681356629613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2084" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M179 64h468.5l223 225.5V935c0 13.807-11.193 25-25 25H179c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z" fill="#CCCCCC" p-id="2085"></path><path d="M647.5 64v200.5c0 13.807 11.193 25 25 25h198L647.5 64z" fill="#EAEAEA" p-id="2086"></path><path d="M512 364.5c34.139 0 68.5 11.192 94.771 31.69 30.137 23.513 47.729 57.54 47.729 97.31 0 51.725-35.564 99.023-102.662 143.99l-0.338 0.225V696c0 17.77-14.261 32.209-31.963 32.496l-0.537 0.004c-17.95 0-32.5-14.55-32.5-32.5v-76a32.5 32.5 0 0 1 15.347-27.605c60.106-37.347 87.653-71.18 87.653-98.895 0-19.168-7.95-34.545-22.714-46.064C552.248 436.093 532.007 429.5 512 429.5c-19.92 0-39.856 6.54-54.137 17.819-14.519 11.465-22.363 26.87-22.363 46.181 0 17.95-14.55 32.5-32.5 32.5s-32.5-14.55-32.5-32.5c0-39.693 17.307-73.683 47.08-97.194C443.657 375.714 477.833 364.5 512 364.5z m8.5 477.5c20.71 0 37.5-16.79 37.5-37.5S541.21 767 520.5 767 483 783.79 483 804.5s16.79 37.5 37.5 37.5z" fill="#FFFFFF" p-id="2087"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681356637453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2240" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M179 64h468.5l223 225.5V935c0 13.807-11.193 25-25 25H179c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z" fill="#4A8DFF" p-id="2241"></path><path d="M647.5 64v200.5c0 13.807 11.193 25 25 25h198L647.5 64z" fill="#E5F0FF" p-id="2242"></path><path d="M693.153 784.6C714.698 808.196 754 792.953 754 761V389h-70v281.758L544.847 518.35c-13.879-15.201-37.815-15.201-51.694 0L354 670.758V389h-70v372c0 31.954 39.302 47.197 60.847 23.6L519 593.857 693.153 784.6z" fill="#FFFFFF" p-id="2243"></path></svg>
|
||||
|
After Width: | Height: | Size: 835 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681356625053" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1928" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M179 64h468.5l223 225.5V935c0 13.807-11.193 25-25 25H179c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z" fill="#576A95" p-id="1929"></path><path d="M647.5 64v200.5c0 13.807 11.193 25 25 25h198L647.5 64z" fill="#BBC3D4" p-id="1930"></path><path d="M573.2 614.597v121.678a30.391 30.391 0 0 1-8.932 21.509 30.508 30.508 0 0 1-21.549 8.91h-62.238a30.52 30.52 0 0 1-21.549-8.905A30.392 30.392 0 0 1 450 736.27V614.597h123.2z m-30.48 69.71h-62.24v61.096h62.24v-61.096z m29.46-191.386v61.096h-61.213V492.92h61.214zM511.73 64v61.6H573.2v61.6h-61.478v57.036H573.2v61.6h-61.471v60.844H573.2v60.844h-61.471v60.839H450v-60.844h61.471v-60.844H450v-60.839h61.471v-61.6H450v-61.6h61.471V125.6H450V64h61.729z" fill="#FFFFFF" p-id="1931"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -117,6 +117,7 @@ export const constantRoutes = [
|
|||
{
|
||||
path:'/',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: "OnlyOfficeTest",
|
||||
|
|
@ -126,6 +127,18 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path:'/',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: "FileListV3",
|
||||
name: 'FileListV3',
|
||||
component:() => import("@/views/fileList/FileListV3"),
|
||||
meta: {title: '文件列表3.0',icon: 'el-icon-folder-opened'}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path:'/expert',
|
||||
redirect: '/expert/form',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,687 @@
|
|||
<template>
|
||||
<div @contextmenu.prevent="openMenu($event)" class="app-container">
|
||||
|
||||
|
||||
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||
<li >新建目录</li>
|
||||
<li >上传</li>
|
||||
<li >下载</li>
|
||||
<li >删除</li>
|
||||
<li >属性</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<marquee style="margin-bottom: 5px;font-size: 15px">
|
||||
欢迎使用文件共享管理系统，系统尚未完善，如遇问题欢迎<a href="https://www.osredm.com/p71924506/file_sharing_ms_fe/issues" style="font-weight: bold">提交反馈</a>,谢谢！
|
||||
</marquee>
|
||||
|
||||
<!--搜索框-->
|
||||
<div class="manageList-header-input">
|
||||
<el-input placeholder="/" style="height: 4px"></el-input>
|
||||
<!-- 输入框 双向绑定数据 自带清空 -->
|
||||
<el-button style="margin-left: 10px" type="primary" @click="dialogVisible = true">上传文件</el-button>
|
||||
<!-- <el-button style="margin-left: 10px" type="primary" @click="typeDialogVisible = true" plain>添加分类</el-button>-->
|
||||
|
||||
<!-- <span style="margin-left: 10px">当前文件分类：{{ activeFileType }}</span>-->
|
||||
|
||||
</div>
|
||||
<el-alert
|
||||
title="注意"
|
||||
type="warning"
|
||||
description="局域网暂不支持在线访问，请下载查看"
|
||||
style="margin-bottom: 10px;font-size: 20px">
|
||||
</el-alert>
|
||||
<el-dialog
|
||||
title="上传文件"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleClose">
|
||||
<el-form label-position="top" label-width="80px" :model="filesInfo" :rules="rules" style="text-align: left">
|
||||
<el-form-item label="文件名" prop="name">
|
||||
<el-input placeholder="请填写文件名" v-model="filesInfo.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="文件分类" prop="fileTypeId">
|
||||
<el-select v-model="filesInfo.filesTypeId" placeholder="请选择文件分类">
|
||||
<el-option v-for="item in filesTypeList"
|
||||
:key="item.filesTypeId"
|
||||
:label="item.name"
|
||||
:value="String(item.filesTypeId)"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="文件状态" prop="status">
|
||||
<el-select v-model="filesInfo.status" placeholder="请选择文件状态">
|
||||
<el-option label="待更新" value="待更新"></el-option>
|
||||
<el-option label="已更新" value="已更新"></el-option>
|
||||
<el-option label="已废弃" value="已废弃"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
<el-form-item label="文件上传" prop="upload">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
ref="fileUpload"
|
||||
:headers="headers"
|
||||
action="/api/file/uploadFile"
|
||||
:on-success="uploadSuccess"
|
||||
:limit="1">
|
||||
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="fileInfoSubmit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="添加分类"
|
||||
:visible.sync="typeDialogVisible"
|
||||
width="30%"
|
||||
:before-close="typeHandleClose">
|
||||
<el-form label-position="top" label-width="80px" :model="fileType" :rules="rules" style="text-align: left">
|
||||
<el-form-item label="分类名称" prop="typeName">
|
||||
<el-input placeholder="请输入分类名称" v-model="fileType.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="addTypeSubmit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!--阅览-->
|
||||
<el-dialog
|
||||
title="浏览"
|
||||
:visible.sync="viewDialogVisible"
|
||||
width="90%"
|
||||
:before-close="viewHandleClose">
|
||||
<el-alert
|
||||
title="注意"
|
||||
type="success"
|
||||
description="如果出现文件内容乱码问题，请检查所上传的文档中西文字体是否匹配（中文文字对应中文字体）"
|
||||
style="margin-bottom: 10px;font-size: 20px"/>
|
||||
<iframe :src="viewUrl" style="width: 100%; height: 800px"></iframe>
|
||||
</el-dialog>
|
||||
|
||||
<!--小网盘-->
|
||||
<div style="display:inline !important; -webkit-user-select: none; user-select: none;">
|
||||
<div class="file" v-for="file in fileList" :key="file.name" >
|
||||
<div>
|
||||
<img class="file-svg" :src="getFileTypeIcon(file.directory,file.file,file.name)"/>
|
||||
</div>
|
||||
<div style="display: inline-block">{{ file.name }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- <el-table-->
|
||||
<!-- v-loading="listLoading"-->
|
||||
<!-- :data="list"-->
|
||||
<!-- element-loading-text="Loading"-->
|
||||
<!-- border-->
|
||||
<!-- fit-->
|
||||
<!-- highlight-current-row-->
|
||||
<!-- >-->
|
||||
<!-- <el-table-column align="center" label="编号" width="95">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- {{ scope.row.filesInfoId }}-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="文件名称">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- {{ scope.row.name }}-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="上传用户" width="110" align="center">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{ scope.row.userName }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
|
||||
<!-- <el-table-column class-name="status-col" label="文件状态" width="110" align="center">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column class-name="status-col" label="分类" width="110" align="center">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-tag :type="scope.row.type | statusFilter">{{ scope.row.typeName }}</el-tag>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column align="center" prop="created_at" label="上传时间" width="200">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <i class="el-icon-time" />-->
|
||||
<!-- <span>{{ scope.row.uploadTime }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column align="center" prop="created_at" label="操作" width="200">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <i class="el-icon-files" @click="viewFile(scope.row.location)" style="cursor: pointer">查看</i>-->
|
||||
<!-- <i class="el-icon-download" @click="downloadFile(scope.row.location)" style="cursor: pointer">下载</i>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>-->
|
||||
|
||||
|
||||
<script>
|
||||
import { getList } from '@/api/table'
|
||||
import pageUtils from '@/utils/pageUtils'
|
||||
import { Message } from 'element-ui'
|
||||
import { getFilesInfoByName, getFilesInfoByType } from '@/utils/http/interface'
|
||||
import { toBase64 } from 'js-base64'
|
||||
|
||||
export default {
|
||||
name: 'FileList',
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
'已更新': 'success',
|
||||
'待更新': 'gray',
|
||||
'已废弃': 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
|
||||
typeFilter(type) {
|
||||
const typeMap = {
|
||||
'会议材料': 'success',
|
||||
'管理办法': 'success',
|
||||
'采购材料': 'success'
|
||||
}
|
||||
return typeMap[status]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
visible: false,
|
||||
top: 0,
|
||||
left: 0,
|
||||
|
||||
|
||||
//文件列表
|
||||
fileList:[
|
||||
{
|
||||
"name": "图片素材",
|
||||
"size": null,
|
||||
"lastModified": 1681354923825,
|
||||
"directory": true,
|
||||
"file": false
|
||||
},
|
||||
{
|
||||
"name": "学习材料",
|
||||
"size": null,
|
||||
"lastModified": 1681354931585,
|
||||
"directory": true,
|
||||
"file": false
|
||||
},
|
||||
{
|
||||
"name": "采购材料",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": true,
|
||||
"file": false
|
||||
},
|
||||
{
|
||||
"name": "文档.doc",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "幻灯片.pptx",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "破大防.pdf",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "表格.xlsx",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "表格1.xls",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "ai文件.ai",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
],
|
||||
|
||||
//判断是否已经有showInfo
|
||||
showInfoStatus:false,
|
||||
|
||||
//当前文件类型
|
||||
activeFileType:null,
|
||||
|
||||
|
||||
list: null,
|
||||
listLoading: true,
|
||||
// 搜索数据
|
||||
searchInfo:{
|
||||
keyWords: "",
|
||||
division: "",
|
||||
type:'',
|
||||
kind: "",
|
||||
},
|
||||
|
||||
//token
|
||||
headers:{
|
||||
"Authorization": localStorage.getItem("systemToken")
|
||||
},
|
||||
|
||||
//dialog规则
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请填写文件名', trigger: 'blur' },
|
||||
],
|
||||
fileTypeId: [
|
||||
{ required: true, message: '请选择文件分类', trigger: 'blur' },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择文件状态', trigger: 'blur' },
|
||||
],
|
||||
upload: [
|
||||
{ required: true, message: '请上传文件', trigger: 'blur' },
|
||||
],
|
||||
typeName:[
|
||||
{required: true, message: '请输入分类名称', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
|
||||
//上传文件
|
||||
filesInfo:{
|
||||
filesInfoId:null,
|
||||
filesTypeId:null,
|
||||
location:"",
|
||||
name:"",
|
||||
uploadUserId:"",
|
||||
status:"已更新"
|
||||
},
|
||||
|
||||
//添加分类
|
||||
fileType:{
|
||||
name:""
|
||||
},
|
||||
// 上传文件弹窗状态
|
||||
dialogVisible: false,
|
||||
//分类弹窗
|
||||
typeDialogVisible: false,
|
||||
|
||||
//文件类型列表
|
||||
filesTypeList: null,
|
||||
// 暂时不需要
|
||||
// filesData:{
|
||||
//
|
||||
// }
|
||||
// 浏览查看
|
||||
viewDialogVisible:false,
|
||||
viewUrl:null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
openMenu(e) {
|
||||
var x = e.pageX;
|
||||
var y = e.pageY;
|
||||
this.top = y -20;
|
||||
this.left = x -200;
|
||||
this.visible = true;//在这里控制右键菜单的打开
|
||||
},
|
||||
//close
|
||||
closeMenu() {
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
//提示
|
||||
showInfo(){
|
||||
if (this.showInfoStatus == false) {
|
||||
this.$notify.warning({
|
||||
title:"注意",
|
||||
message:"在线浏览功能支持office办公文档、PDF文档、txt、java、md等纯文本、图片、mp3、mp4多媒体格式，其他格式请点击下载进行浏览",
|
||||
position: 'bottom-right'
|
||||
})
|
||||
this.showInfoStatus = true
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
getAllType(){
|
||||
this.$api.getAllType().then((res)=>{
|
||||
if (res.status === 0) {
|
||||
this.filesTypeList =res.data
|
||||
}
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
getAllFiles(){
|
||||
this.$api.getAllFilesInfo().then((res)=>{
|
||||
console.log(res)
|
||||
if (res.status === 0) {
|
||||
this.list = res.data
|
||||
|
||||
console.log(this.list)
|
||||
this.listLoading = false
|
||||
}else {
|
||||
Message.warning("加载失败")
|
||||
}
|
||||
}).catch(function (res) {
|
||||
alert(res);
|
||||
});
|
||||
},
|
||||
// 获取数据
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
this.selectByType()
|
||||
this.getAllType()
|
||||
|
||||
},
|
||||
downloadFile(link) {
|
||||
window.location.href = '/api/' + link
|
||||
// console.log('/api' + link)
|
||||
// pageUtils.openPage(this.$router, '/api' + link)
|
||||
},
|
||||
|
||||
|
||||
viewFile(link){
|
||||
var url = 'http://127.0.0.1:8043/api/' + link; //要预览文件的访问地址
|
||||
this.viewUrl='http://114.116.228.69:8041/onlinePreview?url='+encodeURIComponent(toBase64(url))
|
||||
this.viewDialogVisible = true
|
||||
//
|
||||
// window.open();
|
||||
},
|
||||
|
||||
viewHandleClose(){
|
||||
this.viewDialogVisible = false
|
||||
this.viewUrl = null
|
||||
},
|
||||
|
||||
//关闭上传弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.filesInfo.filesInfoId = null;
|
||||
this.filesInfo.location = "";
|
||||
this.filesInfo.name = "";
|
||||
this.filesInfo.uploadUserId = "";
|
||||
this.filesInfo.status = "已更新";
|
||||
|
||||
},
|
||||
|
||||
|
||||
//关闭添加分类弹窗
|
||||
typeHandleClose(){
|
||||
this.typeDialogVisible = false;
|
||||
this.fileType.name = ""
|
||||
|
||||
},
|
||||
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
|
||||
//上传文件本身成功调用，信息未上传
|
||||
uploadSuccess(response, file, fileList){
|
||||
if (response.status == 0) {
|
||||
Message.success("上传成功")
|
||||
//此时会有一个返回的生成随机ID 暂不需要 如之后做成果库可以升级
|
||||
this.filesInfo.location = response.url
|
||||
this.filesInfo.name = file.name
|
||||
}
|
||||
},
|
||||
|
||||
//添加fileinfo
|
||||
fileInfoSubmit(){
|
||||
//检查是否有url
|
||||
if (this.filesInfo.location != null && this.filesInfo.location != '') {
|
||||
//提交
|
||||
console.log(localStorage.getItem("userId"))
|
||||
this.filesInfo.uploadUserId = localStorage.getItem("userId")
|
||||
this.$api.addFileInfo(this.filesInfo).then((res)=>{
|
||||
console.log(res)
|
||||
if (res.status == 0) {
|
||||
Message.success("上传成功")
|
||||
this.handleClose()
|
||||
this.selectByType()
|
||||
this.$refs.fileUpload.clearFiles()
|
||||
}
|
||||
})
|
||||
}else{
|
||||
Message.warning("请上传文件完善信息")
|
||||
}
|
||||
},
|
||||
//添加type按钮执行
|
||||
addTypeSubmit(){
|
||||
if (this.fileType.name != null && this.fileType.name !== '') {
|
||||
//提交
|
||||
this.$api.addType(this.fileType).then((res)=>{
|
||||
console.log(res)
|
||||
if (res.status == 30) {
|
||||
Message.warning(res.msg)
|
||||
}else if (res.status == 0){
|
||||
Message.success("添加成功")
|
||||
this.typeHandleClose()
|
||||
this.getAllType()
|
||||
//使用刷新页面的形式刷新 比较粗暴
|
||||
// this.$router.go(0)
|
||||
// console.log(this.$parent.$parent)
|
||||
this.$parent.$parent.$refs.sidebar.getAllType()
|
||||
|
||||
//刷新页面
|
||||
}else {
|
||||
Message.warning("系统错误请重试")
|
||||
}
|
||||
})
|
||||
}else{
|
||||
Message.warning("请输入文件分类")
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//分类change
|
||||
selectByType(){
|
||||
// console.log(this.searchInfo.type)
|
||||
|
||||
let filesInfo = {
|
||||
filesTypeId : this.$route.params.typeId
|
||||
}
|
||||
this.$api.getFilesInfoByType(filesInfo).then((res)=>{
|
||||
if (res.status == 0) {
|
||||
this.list = res.data
|
||||
this.filesInfo.filesTypeId = this.$route.params.typeId
|
||||
//用于时间格式转换遍历
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
//暂无判空
|
||||
this.list[i].uploadTime = this.$moment(this.list[i].uploadTime).format('YYYY年MM月DD日')
|
||||
|
||||
}
|
||||
|
||||
this.listLoading = false
|
||||
}else {
|
||||
Message.warning("分类显示失败，已显示全部数据")
|
||||
this.getAllFiles()
|
||||
this.listLoading = false
|
||||
}
|
||||
})
|
||||
// console.log("非空非默认状态啊")
|
||||
|
||||
},
|
||||
|
||||
//name search TODO 要改，现在默认搜索全部类别的
|
||||
nameSearch(){
|
||||
if (this.searchInfo.keyWords != null && this.searchInfo.keyWords != '' && this.searchInfo.keyWords != undefined){
|
||||
//have search content
|
||||
let filesInfo = {
|
||||
name : this.searchInfo.keyWords
|
||||
}
|
||||
this.$api.getFilesInfoByName(filesInfo).then((res)=>{
|
||||
if (res.status == 0) {
|
||||
this.list = res.data
|
||||
}else {
|
||||
Message.warning("服务错误")
|
||||
}
|
||||
})
|
||||
}else {
|
||||
// no content 但不会出现 一般 想重置目前只能刷新页面
|
||||
this.selectByType()
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
//获取当前分类名字
|
||||
getFileTypeById(){
|
||||
let fileType = {
|
||||
filesTypeId : this.$route.params.typeId
|
||||
}
|
||||
this.$api.getFileTypeById(fileType).then((res)=>{
|
||||
if (res.status == 0) {
|
||||
this.activeFileType = res.data.name
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//判断文件类型并返回文件类型图片
|
||||
getFileTypeIcon(directory,file,name){
|
||||
//先判断是否是文件夹
|
||||
if (directory) {
|
||||
return require('@/assets/file_icon/folder.svg')
|
||||
}else if (file){
|
||||
//判断是什么文件
|
||||
let nameN = name.split('.')
|
||||
let fileType = nameN[1]
|
||||
|
||||
if (fileType == 'doc' || fileType == 'docx') {
|
||||
return require('@/assets/file_icon/word3.svg')
|
||||
}else if (fileType == 'ppt' || fileType == 'pptx'){
|
||||
return require('@/assets/file_icon/ppt3.svg')
|
||||
}else if (fileType == 'xls' || fileType == "xlsx") {
|
||||
return require('@/assets/file_icon/excel3.svg')
|
||||
}else if (fileType == 'pdf'){
|
||||
return require('@/assets/file_icon/pdf3.svg')
|
||||
}else {
|
||||
return require("@/assets/file_icon/unu.svg")
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getFileTypeById()
|
||||
},
|
||||
watch: {
|
||||
visible(value) {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', this.closeMenu)
|
||||
} else {
|
||||
document.body.removeEventListener('click', this.closeMenu)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.manageList-header-input {
|
||||
float: left;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.manageList-header-input .el-input {
|
||||
width: 17rem;
|
||||
}
|
||||
.manageList-header-input .el-select {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
z-index: 3000;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
|
||||
width: 200px;
|
||||
|
||||
backdrop-filter: saturate(50%) blur(8px);
|
||||
|
||||
}
|
||||
|
||||
.contextmenu li {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contextmenu li:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
/*文件svg*/
|
||||
.file-svg{
|
||||
-webkit-user-drag: none;
|
||||
user-drag: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*文件总体样式*/
|
||||
.file{
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,30 +1,69 @@
|
|||
<template>
|
||||
|
||||
<div class="app-container">
|
||||
<h2>添加会议</h2>
|
||||
<h3 style="margin-bottom: 50px">请选择参会专家</h3>
|
||||
<div class="transfer">
|
||||
<el-transfer
|
||||
filterable
|
||||
:titles="['专家库', '已选专家']"
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入专家姓名"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</div>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>添加会议</span>
|
||||
</div>
|
||||
|
||||
<h3 style=" margin-bottom: 50px">请选择项目组成员</h3>
|
||||
<div class="transfer">
|
||||
<el-transfer
|
||||
filterable
|
||||
:titles="['项目组成员', '已选名单']"
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入姓名"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</div>
|
||||
<el-col :span="24">
|
||||
<el-form label-position="left" ref="form" :model="form" label-width="80px" >
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="会议名称:" >
|
||||
<el-input v-model="form.expertName" style="width: 300px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="课题名称:" >
|
||||
<el-input v-model="form.expertName" style="width: 300px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="会议地点:" >
|
||||
<el-input v-model="form.expertUnit" style="width: 300px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="课题科目:" >
|
||||
<el-input v-model="form.expertCardNum" style="width: 300px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
<h4 style="margin-bottom: 30px">请选择参会专家</h4>
|
||||
<div class="transfer">
|
||||
<el-transfer
|
||||
filterable
|
||||
:titles="['专家库', '已选专家']"
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入专家姓名"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</div>
|
||||
|
||||
<h4 style=" margin-bottom: 30px">请选择项目组成员</h4>
|
||||
<div class="transfer">
|
||||
<el-transfer
|
||||
filterable
|
||||
:titles="['项目组成员', '已选名单']"
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入姓名"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="onSubmit">立即添加</el-button>
|
||||
<el-button>取消</el-button>
|
||||
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -51,7 +90,21 @@ export default {
|
|||
value: [],
|
||||
filterMethod(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1;
|
||||
}
|
||||
},
|
||||
form: {
|
||||
expertId:'',
|
||||
expertName:'',
|
||||
expertRankId:'',
|
||||
expertRankName:'',
|
||||
expertUnit:'',
|
||||
expertCardNum:'',
|
||||
expertBankName:'',
|
||||
expertIdCard:'',
|
||||
expertStandard:'',
|
||||
},
|
||||
//职称列表
|
||||
rankList:null
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -66,4 +119,29 @@ export default {
|
|||
::v-deep .el-transfer-panel {
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
|
||||
|
||||
margin-bottom: 30px;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue