This commit is contained in:
BianLzhaoMin
parent
c5600777bc
commit
afd8f420ba
|
|
@ -141,3 +141,12 @@ export function getMoveAndAddCopyTreeAPI(data = {}) {
|
|||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 预览文件时调用接口增加访问量
|
||||
export function addFileAccessCountAPI(data = {}) {
|
||||
return request({
|
||||
url: '/screen/document/addLookNum',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,8 +127,8 @@ export default {
|
|||
},
|
||||
// 标签类型change事件
|
||||
handleTypeIdChange(value) {
|
||||
this.addAndEditForm.typeName = this.labelTypeList.find(
|
||||
(item) => item.value === value,
|
||||
this.addAndEditForm.typeName = this.dict.type.tags_type.find(
|
||||
(item) => item.value == value,
|
||||
)?.label
|
||||
},
|
||||
// 获取标签类型下拉
|
||||
|
|
|
|||
|
|
@ -1,397 +1,400 @@
|
|||
<template>
|
||||
<div class="header_new">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<!-- <div class="logo-section" @click="handleLogoClick">-->
|
||||
<div class="logo-section">
|
||||
<img
|
||||
src="../../../assets/logo/logo.png"
|
||||
alt="Logo"
|
||||
class="logo"
|
||||
/>
|
||||
<span class="platform-title">{{ platformTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_new">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<!-- <div class="logo-section" @click="handleLogoClick">-->
|
||||
<div class="logo-section">
|
||||
<img
|
||||
src="../../../assets/logo/logo.png"
|
||||
alt="Logo"
|
||||
class="logo"
|
||||
/>
|
||||
<span class="platform-title">{{ platformTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-nav">
|
||||
<div
|
||||
class="nav-item"
|
||||
:key="item.routePath"
|
||||
v-for="item in navItems"
|
||||
@click="handleNavClick(item)"
|
||||
:class="{ active: activeNav === item.routePath }"
|
||||
>
|
||||
<img :src="item.icon" :alt="item.label" class="nav-icon"/>
|
||||
<span class="nav-text">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-nav">
|
||||
<div
|
||||
class="nav-item"
|
||||
:key="item.routePath"
|
||||
v-for="item in navItems"
|
||||
@click="handleNavClick(item)"
|
||||
:class="{ active: activeNav === item.routePath }"
|
||||
>
|
||||
<img :src="item.icon" :alt="item.label" class="nav-icon" />
|
||||
<span class="nav-text">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showRightSection" class="header-right">
|
||||
<div v-if="showSearch" class="search-box">
|
||||
<input
|
||||
v-model="internalSearchKeyword"
|
||||
type="text"
|
||||
placeholder="输入关键词搜索"
|
||||
class="search-input"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<button class="search-btn" @click="handleSearch">
|
||||
<i class="el-icon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showRightSection" class="header-right">
|
||||
<div
|
||||
v-if="showSearch && activeNav !== 'DocCenter'"
|
||||
class="search-box"
|
||||
>
|
||||
<input
|
||||
v-model="internalSearchKeyword"
|
||||
type="text"
|
||||
placeholder="输入关键词搜索"
|
||||
class="search-input"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<button class="search-btn" @click="handleSearch">
|
||||
<i class="el-icon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dropdown
|
||||
trigger="hover"
|
||||
class="avatar-container right-menu-item hover-effect"
|
||||
>
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" class="user-avatar"/>
|
||||
<el-dropdown
|
||||
trigger="hover"
|
||||
class="avatar-container right-menu-item hover-effect"
|
||||
>
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" class="user-avatar" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleLogoClick">
|
||||
后台管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleLogoClick">
|
||||
后台管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
import {getPermissions} from "../../../utils/auth";
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getPermissions } from '../../../utils/auth'
|
||||
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
props: {
|
||||
logoUrl: {
|
||||
type: String,
|
||||
default: '/img/psp/productCenter/logo.png',
|
||||
name: 'NavBar',
|
||||
props: {
|
||||
logoUrl: {
|
||||
type: String,
|
||||
default: '/img/psp/productCenter/logo.png',
|
||||
},
|
||||
platformTitle: {
|
||||
type: String,
|
||||
default: '公共服务平台',
|
||||
},
|
||||
showRightSection: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showUserAvatar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
userAvatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
searchKeyword: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
platformTitle: {
|
||||
type: String,
|
||||
default: '公共服务平台',
|
||||
},
|
||||
showRightSection: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showUserAvatar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
userAvatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
searchKeyword: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['avatar']),
|
||||
// 将 activeNav 改为计算属性，根据当前路由自动判断
|
||||
activeNav() {
|
||||
// 根据当前路由名称返回对应的导航项
|
||||
const routeName = this.$route.name;
|
||||
const routePath = this.$route.path;
|
||||
computed: {
|
||||
...mapGetters(['avatar']),
|
||||
// 将 activeNav 改为计算属性，根据当前路由自动判断
|
||||
activeNav() {
|
||||
// 根据当前路由名称返回对应的导航项
|
||||
const routeName = this.$route.name
|
||||
const routePath = this.$route.path
|
||||
|
||||
// 匹配路由名称
|
||||
if (routeName) {
|
||||
const matchedItem = this.navItems.find(item => item.routePath === routeName);
|
||||
if (matchedItem) {
|
||||
return matchedItem.routePath;
|
||||
// 匹配路由名称
|
||||
if (routeName) {
|
||||
const matchedItem = this.navItems.find(
|
||||
(item) => item.routePath === routeName,
|
||||
)
|
||||
if (matchedItem) {
|
||||
return matchedItem.routePath
|
||||
}
|
||||
}
|
||||
|
||||
// 匹配路由路径
|
||||
if (routePath) {
|
||||
const matchedItem = this.navItems.find((item) =>
|
||||
routePath.includes(item.routePath.toLowerCase()),
|
||||
)
|
||||
if (matchedItem) {
|
||||
return matchedItem.routePath
|
||||
}
|
||||
}
|
||||
|
||||
// 默认返回产品中心
|
||||
return 'ProductCenter'
|
||||
},
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
},
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// activeNav: 'ProductCenter', // 默认选中产品中心
|
||||
userAvatarUrl: this.userAvatar,
|
||||
internalSearchKeyword: this.searchKeyword,
|
||||
permissions: getPermissions(),
|
||||
navItems: [
|
||||
{
|
||||
label: '产品中心',
|
||||
routePath: 'ProductCenter',
|
||||
icon: require('../../../assets/images/productCenter/products.png'),
|
||||
},
|
||||
{
|
||||
label: '公共组件',
|
||||
routePath: 'CommonCom',
|
||||
icon: require('../../../assets/images/productCenter/components.png'),
|
||||
},
|
||||
{
|
||||
label: '宣传物料',
|
||||
routePath: 'ProMaterials',
|
||||
icon: require('../../../assets/images/productCenter/materials.png'),
|
||||
},
|
||||
{
|
||||
label: '文档中心',
|
||||
routePath: 'DocCenter',
|
||||
icon: require('../../../assets/images/productCenter/docs.png'),
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
// 匹配路由路径
|
||||
if (routePath) {
|
||||
const matchedItem = this.navItems.find(item =>
|
||||
routePath.includes(item.routePath.toLowerCase())
|
||||
);
|
||||
if (matchedItem) {
|
||||
return matchedItem.routePath;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认返回产品中心
|
||||
return 'ProductCenter';
|
||||
},
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
},
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// activeNav: 'ProductCenter', // 默认选中产品中心
|
||||
userAvatarUrl: this.userAvatar,
|
||||
internalSearchKeyword: this.searchKeyword,
|
||||
permissions: getPermissions(),
|
||||
navItems: [
|
||||
{
|
||||
label: '产品中心',
|
||||
routePath: 'ProductCenter',
|
||||
icon: require('../../../assets/images/productCenter/products.png'),
|
||||
watch: {
|
||||
$route() {
|
||||
// 路由变化时会自动更新 activeNav 计算属性
|
||||
},
|
||||
{
|
||||
label: '公共组件',
|
||||
routePath: 'CommonCom',
|
||||
icon: require('../../../assets/images/productCenter/components.png'),
|
||||
searchKeyword(newVal) {
|
||||
this.internalSearchKeyword = newVal
|
||||
},
|
||||
{
|
||||
label: '宣传物料',
|
||||
routePath: 'ProMaterials',
|
||||
icon: require('../../../assets/images/productCenter/materials.png'),
|
||||
userAvatar(newVal) {
|
||||
this.userAvatarUrl = newVal
|
||||
},
|
||||
{
|
||||
label: '文档中心',
|
||||
routePath: 'DocCenter',
|
||||
icon: require('../../../assets/images/productCenter/docs.png'),
|
||||
internalSearchKeyword(newVal) {
|
||||
// 当搜索关键词变化时，实时通知父组件
|
||||
this.$emit('update:searchKeyword', newVal)
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route'() {
|
||||
// 路由变化时会自动更新 activeNav 计算属性
|
||||
},
|
||||
searchKeyword(newVal) {
|
||||
this.internalSearchKeyword = newVal
|
||||
},
|
||||
userAvatar(newVal) {
|
||||
this.userAvatarUrl = newVal
|
||||
},
|
||||
internalSearchKeyword(newVal) {
|
||||
// 当搜索关键词变化时，实时通知父组件
|
||||
this.$emit('update:searchKeyword', newVal)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNavClick(item) {
|
||||
// this.activeNav = item.routePath
|
||||
this.$router.push({
|
||||
name: item.routePath,
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
console.log('执行搜索:', this.internalSearchKeyword)
|
||||
methods: {
|
||||
handleNavClick(item) {
|
||||
// this.activeNav = item.routePath
|
||||
this.$router.push({
|
||||
name: item.routePath,
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
console.log('执行搜索:', this.internalSearchKeyword)
|
||||
|
||||
// 发送搜索事件给父组件
|
||||
this.$emit('search', this.internalSearchKeyword.trim())
|
||||
},
|
||||
// 发送搜索事件给父组件
|
||||
this.$emit('search', this.internalSearchKeyword.trim())
|
||||
},
|
||||
|
||||
// 跳转后台
|
||||
handleLogoClick() {
|
||||
if (this.permissions.includes(2)) {
|
||||
this.$router.push('/')
|
||||
} else {
|
||||
// 提示没有权限
|
||||
this.$message.error('没有后台权限，请联系管理员')
|
||||
}
|
||||
// 跳转后台
|
||||
handleLogoClick() {
|
||||
if (this.permissions.includes(2)) {
|
||||
this.$router.push('/')
|
||||
} else {
|
||||
// 提示没有权限
|
||||
this.$message.error('没有后台权限，请联系管理员')
|
||||
}
|
||||
},
|
||||
|
||||
logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href =
|
||||
process.env.VUE_APP_ENV === 'production'
|
||||
? '/pubSerPlatform/index'
|
||||
: '/index'
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
},
|
||||
|
||||
logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href =
|
||||
process.env.VUE_APP_ENV === 'production'
|
||||
? '/pubSerPlatform/index'
|
||||
: '/index'
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header_new {
|
||||
background-image: url('../../../assets/images/productCenter/topbg.png');
|
||||
color: white;
|
||||
padding: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-image: url('../../../assets/images/productCenter/topbg.png');
|
||||
color: white;
|
||||
padding: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
//cursor: pointer;
|
||||
cursor: context-menu;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
//cursor: pointer;
|
||||
cursor: context-menu;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item:hover,
|
||||
.nav-item.active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
gap: 16px;
|
||||
}
|
||||
.header-nav {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -107,8 +107,81 @@
|
|||
{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
|
||||
<el-dropdown-item
|
||||
:command="{
|
||||
row: scope.row,
|
||||
item: {
|
||||
label: '取消共享',
|
||||
click: handleCancelShare_1,
|
||||
},
|
||||
}"
|
||||
v-if="
|
||||
['myShare'].includes(authType) &&
|
||||
['1', '2'].includes(scope.row.auth)
|
||||
"
|
||||
>
|
||||
取消共享
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
@command="onHandleCommand"
|
||||
v-if="
|
||||
scope.row.fileType == 1 &&
|
||||
['myShare'].includes(authType) &&
|
||||
['1', '2'].includes(scope.row.auth)
|
||||
"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<i
|
||||
class="el-icon-setting el-icon--right"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
</i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
:command="{
|
||||
row: scope.row,
|
||||
type: 1,
|
||||
}"
|
||||
v-if="
|
||||
['myShare'].includes(authType) &&
|
||||
['1', '2'].includes(scope.row.auth)
|
||||
"
|
||||
>
|
||||
取消共享
|
||||
</el-dropdown-item>
|
||||
|
||||
<!-- <el-dropdown-item
|
||||
:command="{
|
||||
row: scope.row,
|
||||
type: 2,
|
||||
}"
|
||||
v-if="
|
||||
['myShare'].includes(authType) &&
|
||||
['1', '2'].includes(scope.row.auth)
|
||||
"
|
||||
>
|
||||
下载
|
||||
</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 增加一个文件预览按钮 -->
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-view"
|
||||
style="margin-left: 10px"
|
||||
v-if="scope.row.fileType == 1"
|
||||
@click="handlePreview(scope.row)"
|
||||
>
|
||||
预览
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -227,6 +300,17 @@
|
|||
>
|
||||
<TagFilter @query="handleTagQuery" @reset="handleTagReset" />
|
||||
</el-drawer>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig1"
|
||||
@closeDialogOuter="handleCloseDialogOuter1"
|
||||
>
|
||||
<template #outerContent>
|
||||
<div class="preview-docs" style="height: 75vh">
|
||||
<iframe :src="iframeUrl" width="100%" height="100%" />
|
||||
</div>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -242,10 +326,14 @@ import AddCopy from './tableCom/addCopy.vue'
|
|||
import TagFilter from './tableCom/tagFilter.vue'
|
||||
import EditWord from './tableCom/editWord.vue'
|
||||
|
||||
import { encryptCBCTime } from '@/utils/aes'
|
||||
import useBase64 from '@/utils/base64Utils.js'
|
||||
|
||||
import {
|
||||
getDocCenterRightListAPI,
|
||||
deleteDocCenterAPI,
|
||||
cancelSharePermissionAPI,
|
||||
addFileAccessCountAPI,
|
||||
} from '@/api/publicService/docCenter'
|
||||
export default {
|
||||
name: 'RightTable',
|
||||
|
|
@ -360,37 +448,44 @@ export default {
|
|||
label: '下载',
|
||||
click: this.handleBatchDownload_1,
|
||||
acthType: ['1', null],
|
||||
authType: [],
|
||||
},
|
||||
{
|
||||
label: '移动',
|
||||
click: this.handleMove_1,
|
||||
acthType: [null],
|
||||
authType: [],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
click: this.handleDelete_1,
|
||||
acthType: [null],
|
||||
authType: [],
|
||||
},
|
||||
{
|
||||
label: '共享',
|
||||
click: this.handleShare_1,
|
||||
acthType: [null],
|
||||
authType: [],
|
||||
},
|
||||
{
|
||||
label: '重命名',
|
||||
click: this.handleEdit_1,
|
||||
acthType: [null],
|
||||
authType: [],
|
||||
},
|
||||
{
|
||||
label: '添加副本',
|
||||
click: this.handleAddCopy_1,
|
||||
acthType: [null],
|
||||
authType: [],
|
||||
},
|
||||
{
|
||||
label: '取消共享',
|
||||
click: this.handleCancelShare_1,
|
||||
acthType: ['1', '2'],
|
||||
},
|
||||
// {
|
||||
// label: '取消共享',
|
||||
// click: this.handleCancelShare_1,
|
||||
// acthType: ['1', '2'],
|
||||
// authType: ['myShare'],
|
||||
// },
|
||||
],
|
||||
|
||||
dialogConfig: {
|
||||
|
|
@ -400,6 +495,14 @@ export default {
|
|||
outerComponent: null,
|
||||
outerComponentProps: {},
|
||||
},
|
||||
|
||||
dialogConfig1: {
|
||||
outerTitle: '预览',
|
||||
outerVisible: false,
|
||||
outerWidth: '90%',
|
||||
minHeight: '90vh',
|
||||
maxHeight: '90vh',
|
||||
},
|
||||
// 用于下载的文件列表
|
||||
selectedFilesForDownload: [],
|
||||
|
||||
|
|
@ -414,6 +517,9 @@ export default {
|
|||
|
||||
// 用于移动的文件列表
|
||||
selectedFiles: [],
|
||||
lookFile: 'http://192.168.0.14:8012/onlinePreview?url=',
|
||||
filePreviewPath: 'http://218.21.27.6:18013/onlinePreview?url=',
|
||||
iframeUrl: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -646,6 +752,9 @@ export default {
|
|||
},
|
||||
`文档_${new Date().getTime()}.zip`,
|
||||
)
|
||||
|
||||
// 刷新列表
|
||||
this.getTableList()
|
||||
},
|
||||
|
||||
// 下载
|
||||
|
|
@ -657,6 +766,9 @@ export default {
|
|||
},
|
||||
`文档_${new Date().getTime()}.zip`,
|
||||
)
|
||||
|
||||
// 刷新列表
|
||||
this.getTableList()
|
||||
},
|
||||
|
||||
// 共享
|
||||
|
|
@ -673,9 +785,11 @@ export default {
|
|||
this.dialogConfig.outerTitle = '共享'
|
||||
this.dialogConfig.outerVisible = true
|
||||
this.dialogConfig.outerComponent = 'SharePermissionForm'
|
||||
this.dialogConfig.outerComponentProps = {
|
||||
selectedFiles: this.selectedFilesForShare,
|
||||
}
|
||||
// this.dialogConfig.outerComponentProps = {
|
||||
// selectedFiles: this.selectedFilesForShare,
|
||||
// }
|
||||
|
||||
this.selectedFiles = this.selectedFilesForShare
|
||||
},
|
||||
|
||||
handleShare_1(row) {
|
||||
|
|
@ -688,9 +802,11 @@ export default {
|
|||
this.dialogConfig.outerTitle = '共享'
|
||||
this.dialogConfig.outerVisible = true
|
||||
this.dialogConfig.outerComponent = 'SharePermissionForm'
|
||||
this.dialogConfig.outerComponentProps = {
|
||||
selectedFiles: this.selectedFilesForShare,
|
||||
}
|
||||
// this.dialogConfig.outerComponentProps = {
|
||||
// selectedFiles: this.selectedFilesForShare,
|
||||
// }
|
||||
|
||||
this.selectedFiles = this.selectedFilesForShare
|
||||
},
|
||||
|
||||
// 重命名
|
||||
|
|
@ -864,6 +980,73 @@ export default {
|
|||
// console.log('下拉菜单点击', command)
|
||||
command.item.click(command.row)
|
||||
},
|
||||
|
||||
onHandleCommand(command) {
|
||||
if (command.type === 1) {
|
||||
this.handleCancelShare_1(command.row)
|
||||
} else if (command.type === 2) {
|
||||
this.handleBatchDownload_1(command.row)
|
||||
}
|
||||
},
|
||||
|
||||
// 预览
|
||||
handlePreview(row) {
|
||||
// console.log('预览', row)
|
||||
|
||||
addFileAccessCountAPI({ id: row.id })
|
||||
.then((res) => {})
|
||||
.finally(() => {
|
||||
this.previewDocs({
|
||||
originalName: row.name,
|
||||
url: row.filePath,
|
||||
})
|
||||
// 刷新列表
|
||||
this.getTableList()
|
||||
})
|
||||
},
|
||||
|
||||
// 预览文档
|
||||
previewDocs(item) {
|
||||
const { originalName, url } = item
|
||||
let filePreviewPath = ''
|
||||
let time = encryptCBCTime(Math.floor(Date.now()).toString())
|
||||
// if (originalName.split('.')[1].toLowerCase() === 'pdf') {
|
||||
// filePreviewPath = filePath.includes('http')
|
||||
// ? filePath
|
||||
// : `${this.lookFile}/${filePath}`
|
||||
// } else {
|
||||
// const encodedPath = filePath.includes('http')
|
||||
// ? encodeURIComponent(useBase64.encode64(`${filePath}`))
|
||||
// : encodeURIComponent(
|
||||
// useBase64.encode64(`${this.lookFile}/${filePath}`),
|
||||
// )
|
||||
// filePreviewPath = `${this.filePreviewPath}${encodedPath}&token=${time}`
|
||||
// }
|
||||
|
||||
const encodedPath = url.includes('http')
|
||||
? encodeURIComponent(useBase64.encode64(`${url}`))
|
||||
: encodeURIComponent(
|
||||
useBase64.encode64(`${this.lookFile}/${url}`),
|
||||
)
|
||||
filePreviewPath = `${this.lookFile}${encodedPath}&token=${time}`
|
||||
|
||||
const isEdgeOrOther = /Edg|Chrome|Firefox|Safari/.test(
|
||||
navigator.userAgent,
|
||||
)
|
||||
if (isEdgeOrOther) {
|
||||
const url = new URL(filePreviewPath)
|
||||
url.searchParams.append('preventDownload', 'true')
|
||||
filePreviewPath = url.toString()
|
||||
}
|
||||
|
||||
this.iframeUrl = filePreviewPath
|
||||
console.log('this.iframeUrl', this.iframeUrl)
|
||||
this.dialogConfig1.outerVisible = true
|
||||
},
|
||||
|
||||
handleCloseDialogOuter1() {
|
||||
this.dialogConfig1.outerVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
:rules="addWordFormRules"
|
||||
>
|
||||
<el-form-item label="文档夹名称" prop="folderName">
|
||||
<el-input v-model="addWordForm.folderName" />
|
||||
<el-input
|
||||
clearable
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
v-model.trim="addWordForm.folderName"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,10 +44,11 @@
|
|||
:on-change="handleFileChange"
|
||||
:on-remove="handleRemove"
|
||||
:on-exceed="handleExceed"
|
||||
:limit="10"
|
||||
:limit="5"
|
||||
multiple
|
||||
drag
|
||||
class="upload-dragger"
|
||||
:before-upload="handleBeforeUpload"
|
||||
>
|
||||
<div class="upload-content">
|
||||
<i class="el-icon-upload upload-icon"></i>
|
||||
|
|
@ -56,7 +57,8 @@
|
|||
<em class="upload-link">点击上传</em>
|
||||
</div>
|
||||
<div class="upload-tip">
|
||||
按住Ctrl可同时多选,支持上传rar/zip格式文件,单个文件不能超过500kb
|
||||
<!-- 按住Ctrl可同时多选,支持上传rar/zip格式文件,单个文件不能超过500kb -->
|
||||
按住Ctrl可同时多选,单个文件不能超过 10 MB
|
||||
</div>
|
||||
<div class="upload-warning">
|
||||
严禁上传包含色情、暴力、反动等相关违法信息的文件。
|
||||
|
|
@ -159,19 +161,19 @@ export default {
|
|||
const fileName = rawFile.name || file.name || ''
|
||||
const fileSize = rawFile.size || file.size || 0
|
||||
|
||||
// 检查文件格式
|
||||
const allowedTypes = ['rar', 'zip']
|
||||
const fileExtension = fileName.split('.').pop().toLowerCase()
|
||||
// 检查文件格式 (暂时不限制文件格式)
|
||||
// const allowedTypes = ['rar', 'zip']
|
||||
// const fileExtension = fileName.split('.').pop().toLowerCase()
|
||||
|
||||
if (!allowedTypes.includes(fileExtension)) {
|
||||
if (showMessage) {
|
||||
this.$modal.msgError('只支持上传rar/zip格式文件!')
|
||||
}
|
||||
return false
|
||||
}
|
||||
// if (!allowedTypes.includes(fileExtension)) {
|
||||
// if (showMessage) {
|
||||
// this.$modal.msgError('只支持上传rar/zip格式文件!')
|
||||
// }
|
||||
// return false
|
||||
// }
|
||||
|
||||
// 检查文件大小 (500kb = 0.5MB)
|
||||
const maxSize = 0.5
|
||||
// 检查文件大小 (10MB)
|
||||
const maxSize = 10
|
||||
const isLtMaxSize = fileSize / 1024 / 1024 < maxSize
|
||||
|
||||
if (!isLtMaxSize) {
|
||||
|
|
@ -189,18 +191,121 @@ export default {
|
|||
return false
|
||||
}
|
||||
|
||||
// 检查文件名称不能超过 50 个字符
|
||||
if (fileName.length > 50) {
|
||||
if (showMessage) {
|
||||
this.$modal.msgError('文件名不能超过 50 个字符!')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 检查文件名称不能包含特殊字符
|
||||
if (fileName.includes(' ')) {
|
||||
if (showMessage) {
|
||||
this.$modal.msgError('文件名不能包含空格!')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 替换文件路径中的#号
|
||||
|
||||
// 替换文件路径中的#号
|
||||
const newFileName = file.name.replace(/#/g, '@')
|
||||
const newFile = new File([file], newFileName, { type: file.type })
|
||||
|
||||
// 修改原始文件的name属性
|
||||
Object.defineProperty(file, 'name', {
|
||||
value: newFileName,
|
||||
})
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
// 文件变化
|
||||
handleFileChange(file, fileList) {
|
||||
// if (!this.validateFile(file, { showMessage: true })) {
|
||||
// this.fileList = fileList.filter((item) => item.uid !== file.uid)
|
||||
// return
|
||||
// }
|
||||
if (!this.validateFile(file, { showMessage: true })) {
|
||||
this.fileList = fileList.filter((item) => item.uid !== file.uid)
|
||||
return
|
||||
}
|
||||
this.fileList = fileList
|
||||
},
|
||||
|
||||
// 上传前
|
||||
handleBeforeUpload(file) {
|
||||
// return this.validateFile(file, { showMessage: true })
|
||||
const showMessage = true
|
||||
|
||||
const rawFile = file?.raw || file
|
||||
if (!rawFile) {
|
||||
if (showMessage) {
|
||||
this.$modal.msgError('文件信息异常，请重新选择文件!')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const fileName = rawFile.name || file.name || ''
|
||||
const fileSize = rawFile.size || file.size || 0
|
||||
|
||||
console.log(fileName, fileSize, 'fileName, fileSize')
|
||||
|
||||
// 检查文件格式 (暂时不限制文件格式)
|
||||
// const allowedTypes = ['rar', 'zip']
|
||||
// const fileExtension = fileName.split('.').pop().toLowerCase()
|
||||
|
||||
// if (!allowedTypes.includes(fileExtension)) {
|
||||
// if (showMessage) {
|
||||
// this.$modal.msgError('只支持上传rar/zip格式文件!')
|
||||
// }
|
||||
// return false
|
||||
// }
|
||||
|
||||
// 检查文件大小 (10MB)
|
||||
const maxSize = 10
|
||||
const isLtMaxSize = fileSize / 1024 / 1024 < maxSize
|
||||
|
||||
if (!isLtMaxSize) {
|
||||
if (showMessage) {
|
||||
this.$modal.msgError(`文件大小不能超过 ${maxSize}MB!`)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 检查文件名是否包含特殊字符
|
||||
if (fileName.includes(',')) {
|
||||
if (showMessage) {
|
||||
this.$modal.msgError('文件名不能包含英文逗号!')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 检查文件名称不能超过 50 个字符
|
||||
if (fileName.length > 50) {
|
||||
if (showMessage) {
|
||||
this.$modal.msgError('文件名不能超过 50 个字符!')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 检查文件名称不能包含特殊字符
|
||||
if (fileName.includes(' ')) {
|
||||
if (showMessage) {
|
||||
this.$modal.msgError('文件名不能包含空格!')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 替换文件路径中的#号
|
||||
|
||||
// 替换文件路径中的#号
|
||||
const newFileName = file.name.replace(/#/g, '@')
|
||||
const newFile = new File([file], newFileName, { type: file.type })
|
||||
|
||||
// 修改原始文件的name属性
|
||||
Object.defineProperty(file, 'name', {
|
||||
value: newFileName,
|
||||
})
|
||||
},
|
||||
|
||||
// 移除文件
|
||||
handleRemove(file, fileList) {
|
||||
this.fileList = fileList
|
||||
|
|
|
|||
Loading…
Reference in New Issue