340 lines
9.7 KiB
Plaintext
340 lines
9.7 KiB
Plaintext
<script setup lang="ts">
|
||
import { RouterView } from "vue-router";
|
||
import { useUserStore } from "@/stores/modules/user";
|
||
import { getCateTreePage, download, getActCateFileList } from "@/api/daikin/base";
|
||
import { databaseld } from "@/stores/modules/database";
|
||
import DataBaseHead from "./components/DataBaseHead.vue";
|
||
import { useMessage } from 'naive-ui'
|
||
const message = useMessage()
|
||
const { push } = useRouter();
|
||
const store = useUserStore();
|
||
const database = databaseld();
|
||
const { toggle } = inject<any>("fullscreen");
|
||
const activeMenuKey = ref();
|
||
const route = useRoute()
|
||
let idx = ref(0);
|
||
|
||
const titles = ref();
|
||
const rowData = ref();
|
||
const srcType = ref()
|
||
function getLastSubstring(str: string): string {
|
||
const lastIndex = str.lastIndexOf('.');
|
||
if (lastIndex !== -1) {
|
||
return str.substring(lastIndex + 1);
|
||
} else {
|
||
return '';
|
||
}
|
||
}
|
||
|
||
function menuHandler(menu: any, index: number) {
|
||
|
||
|
||
activeMenuKey.value = menu.id;
|
||
titles.value = menu.name;
|
||
idx.value = index;
|
||
activeItem.value = menu.id;
|
||
console.log(menu,menu.id);
|
||
if (menu.childList && menu.childList.length > 0) {
|
||
activeItem.value = menu.childList[0].id;
|
||
console.log(activeItem.value );
|
||
}
|
||
|
||
getId(menu.id);
|
||
|
||
}
|
||
const getId = async (id) => {
|
||
const { rows } = await getActCateFileList({ cateId: id })
|
||
console.log(rows);
|
||
rowData.value = rows
|
||
}
|
||
const download = async (row)=>{
|
||
// console.log(row)
|
||
if(!row) return
|
||
if(row.isSelect===2){
|
||
message.error("没有访问权限")
|
||
return
|
||
}
|
||
let {filePath} = row
|
||
if(!filePath) {
|
||
message.info("没有可预览文件！")
|
||
return
|
||
}
|
||
srcType.value = getLastSubstring(filePath)
|
||
if(['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'].includes(srcType.value)){
|
||
// src.value = filePath
|
||
// pdfShow.value = true
|
||
filePath='https://view.xdocin.com/view?src='+filePath
|
||
const screenWidth = window.screen.width;
|
||
const screenHeight = window.screen.height;
|
||
window.open(filePath, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
|
||
}
|
||
else{
|
||
message.error("文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！")
|
||
}
|
||
|
||
|
||
|
||
}
|
||
function goChild(menu: any) {
|
||
activeItem.value = menu.id;
|
||
database.database.id = menu.id;
|
||
getId(menu.id);
|
||
}
|
||
const tableData = ref();
|
||
async function getTree(id) {
|
||
const { data } = await getCateTreePage({});
|
||
tableData.value = data;
|
||
|
||
if (data && Array.isArray(data)) {
|
||
let index = data.findIndex(item => item.id == id);
|
||
index = index !== -1 ? index : 0;
|
||
titles.value = data[index].name;
|
||
activeMenuKey.value = data[index].id;
|
||
|
||
if (data[index].childList && data[index].childList.length > 0) {
|
||
activeItem.value = data[index].childList[0].id;
|
||
activeMenuKey.value = data[index].childList[0].id;
|
||
}
|
||
getId(activeMenuKey.value);
|
||
}
|
||
}
|
||
function getFileName(url) {
|
||
if (!url) return "";
|
||
let lastSplashIndex = url.lastIndexOf("/");
|
||
let lastDotIndex = url.lastIndexOf(".");
|
||
return url.slice(lastSplashIndex + 1, lastDotIndex);
|
||
}
|
||
onMounted(() => {
|
||
getTree(route.query.id);
|
||
});
|
||
var activeItem = ref();
|
||
const onClic = ref(false);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page w-1920px h-1080px flex">
|
||
<div class="w350px -mr-1px flex flex-col shrink-0 overflow-auto">
|
||
<div class="p30px bg-#000">
|
||
<img
|
||
src="@/assets/images/logo@2x.png"
|
||
class="w197px h44px mt14px"
|
||
|
||
/>
|
||
<!-- @dblclick="toggle" -->
|
||
</div>
|
||
|
||
<div class="pt30px pb24px flex-1 pl20px bg-#fff">
|
||
<div
|
||
class="nav px36px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#7F7F7F cursor-pointer"
|
||
v-for="(m, index) in tableData"
|
||
:key="m.id"
|
||
:class="
|
||
activeMenuKey === m.id ? (m.childList ? 'actives' : 'active') : ''
|
||
"
|
||
@click="() => menuHandler(m, index)"
|
||
>
|
||
<div
|
||
:class="activeMenuKey === m.id && 'onActive'"
|
||
class="flex"
|
||
@click="onClic = !onClic"
|
||
>
|
||
<!-- <img v-if="activeMenuKey === m.id" :src="m.icon1" class="w22px h22px mr16px mt--5px" />
|
||
<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" /> -->
|
||
<span class="text-16px font-900 relative min-w195px block">
|
||
<span> {{ m.name }} </span>
|
||
<span class="text-#7F7F7F absolute right--30px top--5px"
|
||
><el-icon size="26">
|
||
<CaretTop
|
||
v-if="activeMenuKey === m.id && onClic"
|
||
class="text-#002fa7"
|
||
/>
|
||
<CaretBottom v-else /> </el-icon
|
||
></span>
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
v-if="m.childList && idx == index"
|
||
class="pl40px"
|
||
v-show="idx === index && onClic ? true : false"
|
||
>
|
||
<div
|
||
class="my30px pl30px text-#B1B4BC activeChildren"
|
||
v-for="(item, ind) in m.childList"
|
||
:key="item.id"
|
||
@click.stop="goChild(item)"
|
||
@click="activeItem = item.id"
|
||
>
|
||
<span
|
||
class="flex child"
|
||
:class="activeItem === item.id ? 'text-#002fa7' : ''"
|
||
>{{ item.name }}</span>
|
||
|
||
<div v-if="item.childList && idx == index" class="pl20px">
|
||
<div
|
||
class="my30px pl10px text-#B1B4BC"
|
||
v-for="(ite, ind) in item.childList"
|
||
:key="item.id"
|
||
@click.stop="goChild(ite)"
|
||
@click="activeItem = ite.id"
|
||
>
|
||
<span
|
||
class="flex childs"
|
||
:class="activeItem === ite.id ? 'text-#002fa7' : ''"
|
||
>{{ ite.name }}</span>
|
||
<div v-for="(ite2, ind) in ite.childList" @click.stop="goChild(ite2)" :key="ite2.id">
|
||
<span
|
||
class="my30px pl20px flex childs"
|
||
:class="activeItem === ite2.id ? 'text-#002fa7' : ''"
|
||
>{{ ite2.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main flex-1 pb15px pt0px relative">
|
||
<DataBaseHead />
|
||
<div class="w-full h-1px bg-#507FFD mt50px rd-b-20px"></div>
|
||
<div class="w-full h-95%">
|
||
<div class="bg-#fff rd-15px px30px pt30px w-full h930px">
|
||
<div
|
||
class="rd-15px w-full h870px"
|
||
style="box-shadow: 1px 2px 26px -3px #cdcccc"
|
||
>
|
||
<div class="p30px relative h790px">
|
||
<table
|
||
class="history w-full text-center text-16px border-spacing-0"
|
||
>
|
||
<thead
|
||
style="
|
||
background-color: #e7edff;
|
||
color: #0a0a0a;
|
||
height: 50px;
|
||
width: 220px;
|
||
border: 1px solid #417bef;
|
||
"
|
||
>
|
||
<tr class="text-20px leading-50px">
|
||
<th>
|
||
标题
|
||
</th>
|
||
<th>
|
||
文件名
|
||
</th>
|
||
<th>
|
||
创建时间
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="h650px overflow-auto absolute w100%">
|
||
<tr v-for="it in rowData" class="w-full flex leading-50px">
|
||
<td class="w28% h50px cursor-pointer overflow-hidden text-left pl25px truncate text-#000"
|
||
>
|
||
<span :title="it.title"> {{ it.title }}</span>
|
||
</td>
|
||
<td class="w28% h50px cursor-pointer overflow-hidden text-left pl85px truncate text-#000"><span class="download" @click="download(it)">{{ it.fileName || getFileName(it.filePath) }}</span></td>
|
||
<td class="w30% h50px pl195px"
|
||
>
|
||
<span :title="it.createTime"> {{ it.createTime }}</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.page {
|
||
font-family: "PingFang SC";
|
||
user-select: none;
|
||
background-image: none;
|
||
background-color: #cacaca;
|
||
background-position: 0 0;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
color: #3b3b3b;
|
||
|
||
line-height: 1;
|
||
}
|
||
.download {
|
||
cursor: pointer;
|
||
}
|
||
.download:hover {
|
||
color: #00E4FF;
|
||
}
|
||
.nav {
|
||
&::before {
|
||
top: -48px;
|
||
}
|
||
.child:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.childs:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
&::after {
|
||
bottom: -49px;
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
&.active {
|
||
color: #002fa7;
|
||
background-color: #e6ecff;
|
||
|
||
a {
|
||
color: #002fa7;
|
||
}
|
||
|
||
&::before,
|
||
&::after {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&.actives {
|
||
padding: 0px !important;
|
||
color: #002fa7;
|
||
background-color: #f5f8ff;
|
||
|
||
a {
|
||
color: #002fa7;
|
||
}
|
||
|
||
&::before,
|
||
&::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.onActive {
|
||
background-color: #e6ecff;
|
||
border-radius: 32px 0 0 32px;
|
||
|
||
padding: 24px 36px 24px 36px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
width: 100%;
|
||
height: 95%;
|
||
background-color: #4877fb;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
scrollbar-width: none;
|
||
}
|
||
</style>
|