代码优化，结构调整，进度50%
This commit is contained in:
zhengjie
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<panel-group/>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart/>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 18px 22px 22px 22px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<component :is="currentRole"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import adminDashboard from './admin'
|
||||
import { count } from '@/api/visits'
|
||||
|
||||
/**
|
||||
* 记录访问，只有页面刷新或者第一次加载才会记录
|
||||
*/
|
||||
count().then(res => {})
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: { adminDashboard },
|
||||
data() {
|
||||
return {
|
||||
currentRole: 'adminDashboard'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -4,7 +4,7 @@
|
||||
<el-col :span="12">
|
||||
<h1 class="text-jumbo text-ginormous">Oops!</h1>
|
||||
图片来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
|
||||
<h2>你没有权限去该页面</h2>
|
||||
<h2>你没有权限去操作</h2>
|
||||
<h6>如有不满请联系你领导</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>或者你可以去:</li>
|
||||
71
src/views/home.vue
Normal file
71
src/views/home.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-editor-container">
|
||||
<panel-group/>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart/>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import RaddarChart from './dashboard/RaddarChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
import { count } from '@/api/visits'
|
||||
|
||||
/**
|
||||
* 记录访问，只有页面刷新或者第一次加载才会记录
|
||||
*/
|
||||
count().then(res => {})
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 18px 22px 22px 22px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar class="sidebar-container" />
|
||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
<navbar />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<app-main />
|
||||
<right-panel>
|
||||
<settings />
|
||||
</right-panel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RightPanel from '@/components/RightPanel'
|
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Layout',
|
||||
components: {
|
||||
AppMain,
|
||||
Navbar,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView,
|
||||
RightPanel
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
computed: {
|
||||
...mapState({
|
||||
sidebar: state => state.app.sidebar,
|
||||
device: state => state.app.device,
|
||||
needTagsView: state => state.settings.tagsView,
|
||||
fixedHeader: state => state.settings.fixedHeader
|
||||
}),
|
||||
classObj() {
|
||||
return {
|
||||
hideSidebar: !this.sidebar.opened,
|
||||
openSidebar: this.sidebar.opened,
|
||||
withoutAnimation: this.sidebar.withoutAnimation,
|
||||
mobile: this.device === 'mobile'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch('closeSideBar', { withoutAnimation: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/styles/mixin.scss";
|
||||
@import "~@/styles/variables.scss";
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&.mobile.openSidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-bg {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
z-index: 99;
|
||||
width: calc(100% - #{$sideBarWidth});
|
||||
transition: width 0.28s;
|
||||
}
|
||||
|
||||
.hideSidebar .fixed-header {
|
||||
width: calc(100% - #{$hideSidebarWidth})
|
||||
}
|
||||
|
||||
.mobile .fixed-header {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<section class="app-main">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<router-view :key="key"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppMain',
|
||||
computed: {
|
||||
cachedViews() {
|
||||
return this.$store.state.tagsView.cachedViews
|
||||
},
|
||||
key() {
|
||||
return this.$route.fullPath
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
z-index: 88;
|
||||
/*84 = navbar + tags-view = 50 +34 */
|
||||
min-height: calc(100vh - 84px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.hasTagsView {
|
||||
.app-main {
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
padding-top: 85px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
|
||||
<breadcrumb class="breadcrumb-container"/>
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="device!=='mobile'">
|
||||
<el-tooltip content="全屏" effect="dark" placement="bottom">
|
||||
<screenfull class="screenfull right-menu-item"/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-dropdown class="avatar-container right-menu-item" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="user.avatar" class="user-avatar">
|
||||
<i class="el-icon-caret-bottom"/>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<a target="_blank" href="https://docs.auauz.net/">
|
||||
<el-dropdown-item>
|
||||
项目文档
|
||||
</el-dropdown-item>
|
||||
</a>
|
||||
<span style="display:block;" @click="show = true">
|
||||
<el-dropdown-item>
|
||||
布局设置
|
||||
</el-dropdown-item>
|
||||
</span>
|
||||
<router-link to="/user/center">
|
||||
<el-dropdown-item>
|
||||
个人中心
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<span style="display:block;" @click="open">
|
||||
<el-dropdown-item divided>
|
||||
退出登录
|
||||
</el-dropdown-item>
|
||||
</span>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
Hamburger,
|
||||
Screenfull
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'user',
|
||||
'device'
|
||||
]),
|
||||
show: {
|
||||
get() {
|
||||
return this.$store.state.settings.showRightPanel
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('changeSetting', {
|
||||
key: 'showRightPanel',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.logout()
|
||||
})
|
||||
},
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('ToggleSideBar')
|
||||
},
|
||||
logout() {
|
||||
this.dialogVisible = false
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload() // 为了重新实例化vue-router对象 避免bug
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: 0px !important;
|
||||
.hamburger-container {
|
||||
line-height: 58px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.breadcrumb-container{
|
||||
float: left;
|
||||
}
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.screenfull {
|
||||
height: 20px;
|
||||
}
|
||||
.international{
|
||||
vertical-align: top;
|
||||
}
|
||||
.theme-switch {
|
||||
vertical-align: 15px;
|
||||
}
|
||||
.avatar-container {
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div class="drawer-container">
|
||||
<div>
|
||||
<h3 class="drawer-title">系统布局配置</h3>
|
||||
<div class="drawer-item">
|
||||
<span>显示 Logo</span>
|
||||
<el-switch v-model="sidebarLogo" class="drawer-switch" />
|
||||
</div>
|
||||
<div class="drawer-item">
|
||||
<span>固定 Header</span>
|
||||
<el-switch v-model="fixedHeader" class="drawer-switch" />
|
||||
</div>
|
||||
<div class="drawer-item">
|
||||
<span>开启 Tags-Views</span>
|
||||
<el-switch v-model="tagsView" class="drawer-switch" />
|
||||
</div>
|
||||
<div class="drawer-item">
|
||||
<span>显示 SettingButton</span>
|
||||
<el-switch v-model="settingBtn" class="drawer-switch" />
|
||||
</div>
|
||||
<div class="drawer-item">
|
||||
<span>菜单 UniqueOpened</span>
|
||||
<el-switch v-model="uniqueOpened" class="drawer-switch" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
fixedHeader: {
|
||||
get() {
|
||||
return this.$store.state.settings.fixedHeader
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('changeSetting', {
|
||||
key: 'fixedHeader',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
},
|
||||
tagsView: {
|
||||
get() {
|
||||
return this.$store.state.settings.tagsView
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('changeSetting', {
|
||||
key: 'tagsView',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
},
|
||||
sidebarLogo: {
|
||||
get() {
|
||||
return this.$store.state.settings.sidebarLogo
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('changeSetting', {
|
||||
key: 'sidebarLogo',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
},
|
||||
settingBtn: {
|
||||
get() {
|
||||
return this.$store.state.settings.settingBtn
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('changeSetting', {
|
||||
key: 'settingBtn',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
},
|
||||
uniqueOpened: {
|
||||
get() {
|
||||
return this.$store.state.settings.uniqueOpened
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('changeSetting', {
|
||||
key: 'uniqueOpened',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drawer-container {
|
||||
padding: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
|
||||
.drawer-title {
|
||||
margin-bottom: 12px;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.drawer-item {
|
||||
color: rgba(0, 0, 0, .65);
|
||||
font-size: 14px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.drawer-switch {
|
||||
float: right
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
export default {
|
||||
computed: {
|
||||
device() {
|
||||
return this.$store.state.app.device
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// In order to fix the click on menu on the ios device will trigger the mouseeleave bug
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/1135
|
||||
this.fixBugIniOS()
|
||||
},
|
||||
methods: {
|
||||
fixBugIniOS() {
|
||||
const $submenu = this.$refs.submenu
|
||||
if ($submenu) {
|
||||
const handleMouseleave = $submenu.handleMouseleave
|
||||
$submenu.handleMouseleave = (e) => {
|
||||
if (this.device === 'mobile') {
|
||||
return
|
||||
}
|
||||
handleMouseleave(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
functional: true,
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
render(h, context) {
|
||||
const { icon, title } = context.props
|
||||
const vnodes = []
|
||||
|
||||
if (icon) {
|
||||
vnodes.push(<svg-icon icon-class={icon}/>)
|
||||
}
|
||||
|
||||
if (title) {
|
||||
vnodes.push(<span slot='title'>{(title)}</span>)
|
||||
}
|
||||
return vnodes
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,39 +0,0 @@
|
||||
|
||||
<template>
|
||||
<!-- eslint-disable vue/require-component-is-->
|
||||
<component v-bind="linkProps(to)">
|
||||
<slot/>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isExternal } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isExternalLink(routePath) {
|
||||
return isExternal(routePath)
|
||||
},
|
||||
linkProps(url) {
|
||||
if (this.isExternalLink(url)) {
|
||||
return {
|
||||
is: 'a',
|
||||
href: url,
|
||||
target: '_blank',
|
||||
rel: 'noopener'
|
||||
}
|
||||
}
|
||||
return {
|
||||
is: 'router-link',
|
||||
to: url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<el-menu-item v-if="sidebarLogo" :class="{'submenu-title-noDropdown':isCollapse}" index="0" style="pointer-events: none;">
|
||||
<!-- 缩小时显示的logo，可以自定义，这里直接使用图标库中的 -->
|
||||
<svg-icon v-if="isCollapse" icon-class="run" />
|
||||
<!--正常状态下显示的，可以使用本地的logoImg-->
|
||||
<div class="logo-con">
|
||||
<img src="https://aurora-1255840532.cos.ap-chengdu.myqcloud.com/logo.png">
|
||||
<!--<img :src="logoImg">-->
|
||||
</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import logoImg from '@/assets/logo/logo.png'
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'Logo',
|
||||
props: {
|
||||
isCollapse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// logoImg: logoImg
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
sidebarLogo: state => state.settings.sidebarLogo
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
|
||||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
|
||||
<app-link :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
</template>
|
||||
|
||||
<el-submenu v-else ref="submenu" :index="resolvePath(item.path)">
|
||||
<template slot="title">
|
||||
<item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
|
||||
</template>
|
||||
|
||||
<template v-for="child in item.children" v-if="!child.hidden">
|
||||
<sidebar-item
|
||||
v-if="child.children&&child.children.length>0"
|
||||
:is-nest="true"
|
||||
:item="child"
|
||||
:key="child.path"
|
||||
:base-path="resolvePath(child.path)"
|
||||
class="nest-menu" />
|
||||
|
||||
<app-link v-else :to="resolvePath(child.path)" :key="child.name">
|
||||
<el-menu-item :index="resolvePath(child.path)">
|
||||
<item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
</template>
|
||||
</el-submenu>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import path from 'path'
|
||||
import { isExternal } from '@/utils'
|
||||
import Item from './Item'
|
||||
import AppLink from './Link'
|
||||
import FixiOSBug from './FixiOSBug'
|
||||
|
||||
export default {
|
||||
name: 'SidebarItem',
|
||||
components: { Item, AppLink },
|
||||
mixins: [FixiOSBug],
|
||||
props: {
|
||||
// route object
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
onlyOneChild: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasOneShowingChild(children, parent) {
|
||||
const showingChildren = children.filter(item => {
|
||||
if (item.hidden) {
|
||||
return false
|
||||
} else {
|
||||
// Temp set(will be used if only has one showing child)
|
||||
this.onlyOneChild = item
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
// When there is only one child router, the child router is displayed by default
|
||||
if (showingChildren.length === 1) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Show parent if there are no child router to display
|
||||
if (showingChildren.length === 0) {
|
||||
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
resolvePath(routePath) {
|
||||
if (this.isExternalLink(routePath)) {
|
||||
return routePath
|
||||
}
|
||||
return path.resolve(this.basePath, routePath)
|
||||
},
|
||||
isExternalLink(routePath) {
|
||||
return isExternal(routePath)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:show-timeout="200"
|
||||
:default-active="$route.path"
|
||||
:collapse="isCollapse"
|
||||
:unique-opened="$store.state.settings.uniqueOpened"
|
||||
mode="vertical"
|
||||
background-color="#304156"
|
||||
text-color="#bfcbd9"
|
||||
active-text-color="#409EFF"
|
||||
>
|
||||
<Logo :is-collapse="isCollapse"/>
|
||||
<sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path"/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import SidebarItem from './SidebarItem'
|
||||
import Logo from './Logo'
|
||||
export default {
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'permission_routers',
|
||||
'sidebar'
|
||||
]),
|
||||
isCollapse() {
|
||||
return !this.sidebar.opened
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,289 +0,0 @@
|
||||
<template>
|
||||
<div class="tags-view-container">
|
||||
<scroll-pane ref="scrollPane" class="tags-view-wrapper">
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
ref="tag"
|
||||
:class="isActive(tag)?'active':''"
|
||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
||||
:key="tag.path"
|
||||
tag="span"
|
||||
class="tags-view-item"
|
||||
@click.middle.native="closeSelectedTag(tag)"
|
||||
@contextmenu.prevent.native="openMenu(tag,$event)">
|
||||
{{ tag.title }}
|
||||
<span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">刷新</li>
|
||||
<li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭</li>
|
||||
<li @click="closeOthersTags">关闭其他</li>
|
||||
<li @click="closeAllTags(selectedTag)">关闭所有</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScrollPane from '@/components/ScrollPane'
|
||||
import path from 'path'
|
||||
import { constantRouterMap } from '@/router/routers'
|
||||
export default {
|
||||
components: { ScrollPane },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
top: 0,
|
||||
left: 0,
|
||||
affixTags: [],
|
||||
selectedTag: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visitedViews() {
|
||||
return this.$store.state.tagsView.visitedViews
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.addViewTags()
|
||||
this.moveToCurrentTag()
|
||||
},
|
||||
visible(value) {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', this.closeMenu)
|
||||
} else {
|
||||
document.body.removeEventListener('click', this.closeMenu)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTags()
|
||||
this.addViewTags()
|
||||
},
|
||||
methods: {
|
||||
isActive(route) {
|
||||
return route.path === this.$route.path
|
||||
},
|
||||
filterAffixTags(routes, basePath = '/') {
|
||||
let tags = []
|
||||
routes.forEach(route => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = path.resolve(basePath, route.path)
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta }
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = this.filterAffixTags(route.children, route.path)
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
},
|
||||
initTags() {
|
||||
const affixTags = this.affixTags = this.filterAffixTags(constantRouterMap)
|
||||
for (const tag of affixTags) {
|
||||
// Must have tag name
|
||||
if (tag.name) {
|
||||
this.$store.dispatch('addVisitedView', tag)
|
||||
}
|
||||
}
|
||||
},
|
||||
addViewTags() {
|
||||
const { name } = this.$route
|
||||
if (name) {
|
||||
this.$store.dispatch('addView', this.$route)
|
||||
}
|
||||
return false
|
||||
},
|
||||
moveToCurrentTag() {
|
||||
const tags = this.$refs.tag
|
||||
this.$nextTick(() => {
|
||||
for (const tag of tags) {
|
||||
if (tag.to.path === this.$route.path) {
|
||||
this.$refs.scrollPane.moveToTarget(tag)
|
||||
|
||||
// when query is different then update
|
||||
if (tag.to.fullPath !== this.$route.fullPath) {
|
||||
this.$store.dispatch('updateVisitedView', this.$route)
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
refreshSelectedTag(view) {
|
||||
this.$store.dispatch('delCachedView', view).then(() => {
|
||||
const { fullPath } = view
|
||||
this.$nextTick(() => {
|
||||
this.$router.replace({
|
||||
path: '/redirect' + fullPath
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
closeSelectedTag(view) {
|
||||
this.$store.dispatch('delView', view).then(({ visitedViews }) => {
|
||||
if (this.isActive(view)) {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
this.$router.push(latestView)
|
||||
} else {
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
closeOthersTags() {
|
||||
this.$router.push(this.selectedTag)
|
||||
this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
|
||||
this.moveToCurrentTag()
|
||||
})
|
||||
},
|
||||
closeAllTags(view) {
|
||||
this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
|
||||
if (this.affixTags.some(tag => tag.path === view.path)) {
|
||||
return
|
||||
}
|
||||
this.toLastView(visitedViews, view)
|
||||
})
|
||||
},
|
||||
toLastView(visitedViews, view) {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
this.$router.push(latestView)
|
||||
} else {
|
||||
// now the default is to redirect to the home page if there is no tags-view,
|
||||
// you can adjust it according to your needs.
|
||||
if (view.name === '首页') {
|
||||
// to reload home page
|
||||
this.$router.replace({ path: '/redirect' + view.fullPath })
|
||||
} else {
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
},
|
||||
openMenu(tag, e) {
|
||||
const menuMinWidth = 105
|
||||
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
|
||||
const offsetWidth = this.$el.offsetWidth // container width
|
||||
const maxLeft = offsetWidth - menuMinWidth // left boundary
|
||||
const left = e.clientX - offsetLeft + 15 // 15: margin right
|
||||
|
||||
if (left > maxLeft) {
|
||||
this.left = maxLeft
|
||||
} else {
|
||||
this.left = left
|
||||
}
|
||||
this.top = e.clientY
|
||||
|
||||
this.visible = true
|
||||
this.selectedTag = tag
|
||||
},
|
||||
closeMenu() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #d8dce5;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
//reset element css of el-icon-close
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
.el-icon-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: 2px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 100% 50%;
|
||||
&:before {
|
||||
transform: scale(.6);
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #b4bccc;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +0,0 @@
|
||||
export { default as Navbar } from './Navbar'
|
||||
export { default as Sidebar } from './Sidebar'
|
||||
export { default as AppMain } from './AppMain'
|
||||
export { default as TagsView } from './TagsView'
|
||||
export { default as Settings } from './Settings'
|
||||
@@ -1,41 +0,0 @@
|
||||
import store from '@/store'
|
||||
|
||||
const { body } = document
|
||||
const WIDTH = 1024
|
||||
const RATIO = 3
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
$route(route) {
|
||||
if (this.device === 'mobile' && this.sidebar.opened) {
|
||||
store.dispatch('closeSideBar', { withoutAnimation: false })
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('resize', this.resizeHandler)
|
||||
},
|
||||
mounted() {
|
||||
const isMobile = this.isMobile()
|
||||
if (isMobile) {
|
||||
store.dispatch('toggleDevice', 'mobile')
|
||||
store.dispatch('closeSideBar', { withoutAnimation: true })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isMobile() {
|
||||
const rect = body.getBoundingClientRect()
|
||||
return rect.width - RATIO < WIDTH
|
||||
},
|
||||
resizeHandler() {
|
||||
if (!document.hidden) {
|
||||
const isMobile = this.isMobile()
|
||||
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
|
||||
|
||||
if (isMobile) {
|
||||
store.dispatch('closeSideBar', { withoutAnimation: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
|
||||
<h3 class="title">el-admin 后台管理系统</h3>
|
||||
<h3 class="title">EL-ADMIN 后台管理系统</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 60%" @keyup.enter.native="handleLogin"/>
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode">
|
||||
</div>
|
||||
@@ -122,7 +124,7 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image:url( https://aurora-1255840532.cos.ap-chengdu.myqcloud.com/1547428971990.jpg);
|
||||
background-image:url( https://docs-1255840532.cos.ap-shanghai.myqcloud.com/3968.jpg );
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
@@ -134,7 +136,7 @@ export default {
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 380px;
|
||||
width: 400px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
@@ -142,6 +144,9 @@ export default {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.input-icon{
|
||||
height: 39px;width: 14px;margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
@@ -1,6 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<eHeader :query="query"/>
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入关键词搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<div style="display: inline-block;">
|
||||
<!-- 清空缓存 -->
|
||||
<el-button v-permission="['ADMIN','REDIS_ALL','REDIS_DELETE']" :loading="deleteAllLoading" type="warning" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空缓存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column label="序号" width="80" align="center">
|
||||
@@ -47,14 +56,12 @@
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import initData from '@/mixins/initData'
|
||||
import { del } from '@/api/redis'
|
||||
import eHeader from './module/header'
|
||||
import { del, delAll } from '@/api/redis'
|
||||
export default {
|
||||
components: { eHeader },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false, sup_this: this, permissions: []
|
||||
delLoading: false, sup_this: this, permissions: [], deleteAllLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -93,6 +100,24 @@ export default {
|
||||
this.$refs[index].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
toQuery() {
|
||||
this.page = 0
|
||||
this.init()
|
||||
},
|
||||
deleteAll() {
|
||||
this.$confirm('你确定要清空缓存数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.deleteAllLoading = true
|
||||
delAll().then(res => {
|
||||
this.page = 0
|
||||
this.init()
|
||||
this.deleteAllLoading = false
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入关键词搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<div style="display: inline-block;">
|
||||
<!-- 清空缓存 -->
|
||||
<el-button v-permission="['ADMIN','REDIS_ALL','REDIS_DELETE']" :loading="deleteAllLoading" type="warning" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空缓存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { delAll } from '@/api/redis'
|
||||
// 查询条件
|
||||
export default {
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deleteAllLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toQuery() {
|
||||
this.$parent.page = 0
|
||||
this.$parent.init()
|
||||
},
|
||||
deleteAll() {
|
||||
this.deleteAllLoading = true
|
||||
delAll().then(res => {
|
||||
this.$parent.page = 0
|
||||
this.$parent.init()
|
||||
this.deleteAllLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -81,7 +81,7 @@ export default {
|
||||
// 导出
|
||||
download() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
import('@/utils/export2Excel').then(excel => {
|
||||
const tHeader = ['ID', '用户名', '邮箱', '头像地址', '状态', '注册日期', '最后修改密码日期']
|
||||
const filterVal = ['id', 'username', 'email', 'avatar', 'enabled', 'createTime', 'lastPasswordResetTime']
|
||||
const data = this.formatJson(filterVal, this.sup_this.data)
|
||||
|
||||
@@ -7,17 +7,35 @@
|
||||
<ToPay/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="使用说明" name="third">
|
||||
<Description/>
|
||||
<div>
|
||||
<blockquote class="my-blockquote">注意</blockquote>
|
||||
<pre class="my-code">
|
||||
测试所用参数都是沙箱环境，仅供测试使用，申请地址：<a style="color: #00a0e9" href="https://openhome.alipay.com/platform/appDaily.htm?tab=info" target="_blank">支付宝开发平台</a>
|
||||
如需付款测试，请使用
|
||||
账号：uuxesw9745@sandbox.com
|
||||
密码与支付密码：111111</pre>
|
||||
<blockquote class="my-blockquote"> 支付设置</blockquote>
|
||||
<pre class="my-code">
|
||||
// 支付提供两个接口，
|
||||
// PC端与手机端，并且在前端使用代码识别
|
||||
if (/(Android)/i.test(navigator.userAgent)){ // 判断是否为Android手机
|
||||
url = "/aliPay/toPayAsWeb"
|
||||
}else if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ // 判断是否为苹果手机
|
||||
url = "/aliPay/toPayAsWeb"
|
||||
} else {
|
||||
url = "/aliPay/toPayAsPC"
|
||||
}</pre>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Config from './module/config'
|
||||
import ToPay from './module/toPay'
|
||||
import Description from './module/description'
|
||||
import Config from './config'
|
||||
import ToPay from './toPay'
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
components: { Config, ToPay, Description },
|
||||
components: { Config, ToPay },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second'
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<blockquote class="my-blockquote">注意</blockquote>
|
||||
<pre class="my-code">
|
||||
测试所用参数都是沙箱环境，仅供测试所用，申请地址：<a style="color: #00a0e9" href="https://openhome.alipay.com/platform/appDaily.htm?tab=info" target="_blank">支付宝开发平台</a>
|
||||
如需付款测试，请使用
|
||||
账号：uuxesw9745@sandbox.com
|
||||
密码：111111
|
||||
支付密码：111111
|
||||
文明测试谢谢</pre>
|
||||
<blockquote class="my-blockquote"> 支付设置</blockquote>
|
||||
<pre class="my-code">
|
||||
支付提供两个测试地址
|
||||
PC端与手机端，并且使用如下代码识别
|
||||
if (/(Android)/i.test(navigator.userAgent)){ // 判断是否为Android手机
|
||||
url = "/aliPay/toPayAsWeb"
|
||||
}else if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ // 判断是否为苹果手机
|
||||
url = "/aliPay/toPayAsWeb"
|
||||
} else {
|
||||
url = "/aliPay/toPayAsPC"
|
||||
}</pre>
|
||||
<blockquote class="my-blockquote">更多帮助</blockquote>
|
||||
<pre class="my-code">更多帮助请查看系统源码</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
name: 'Description'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -7,17 +7,28 @@
|
||||
<Send/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="使用说明" name="third">
|
||||
<Description/>
|
||||
<div>
|
||||
<blockquote class="my-blockquote"> 邮件服务器配置</blockquote>
|
||||
<pre class="my-code">
|
||||
# 邮件服务器的SMTP地址，可选，默认为smtp
|
||||
# 邮件服务器的SMTP端口，可选，默认465或者25
|
||||
# 发件人（必须正确，否则发送失败）
|
||||
# 用户名，默认为发件人邮箱前缀
|
||||
# 密码（注意，某些邮箱需要为SMTP服务单独设置密码，如QQ和163等等）
|
||||
# 是否开启ssl，默认开启</pre>
|
||||
<blockquote class="my-blockquote">更多帮助</blockquote>
|
||||
<pre class="my-code">更多帮助请查看文档：<a style="color:#009688" href="http://hutool.mydoc.io/#text_319499" target="_black">hutool工具包</a></pre>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Config from './module/config'
|
||||
import Send from './module/send'
|
||||
import Description from './module/description'
|
||||
import Config from './config'
|
||||
import Send from './send'
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
components: { Config, Send, Description },
|
||||
components: { Config, Send },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second'
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<blockquote class="my-blockquote">注意</blockquote>
|
||||
<pre class="my-code">
|
||||
邮件服务器必须支持并打开SMTP协议，详细请查看相关帮助说明
|
||||
配置文件的样例中提供的是我测试邮件功能注册的sina.com邮箱
|
||||
帐号密码公开，供测试使用，存入数据库的密码会加密处理，请文明测试</pre>
|
||||
<blockquote class="my-blockquote"> 邮件服务器配置</blockquote>
|
||||
<pre class="my-code">
|
||||
# 邮件服务器的SMTP地址，可选，默认为smtp
|
||||
# 邮件服务器的SMTP端口，可选，默认465或者25
|
||||
# 发件人（必须正确，否则发送失败）
|
||||
# 用户名，默认为发件人邮箱前缀
|
||||
# 密码（注意，某些邮箱需要为SMTP服务单独设置密码，如QQ和163等等）
|
||||
# 是否开启ssl，默认开启</pre>
|
||||
<blockquote class="my-blockquote">发送邮箱</blockquote>
|
||||
<pre class="my-code">
|
||||
MailAccount account = new MailAccount();
|
||||
account.setHost("smtp.sina.com");
|
||||
account.setPort("465");
|
||||
account.setAuth(true);
|
||||
account.setFrom("auaur@sina.com");
|
||||
account.setUser("eladmin");
|
||||
account.setPass("pass");
|
||||
# 倒数第二个参数：是否为http格式
|
||||
MailUtil.send(account, CollUtil.newArrayList("zhengjie@tom.com"), "测试", "邮件来自eladmin测试", true，file...);</pre>
|
||||
<blockquote class="my-blockquote">更多帮助</blockquote>
|
||||
<pre class="my-code">更多帮助请查看文档：<a style="color:#009688" href="http://hutool.mydoc.io/#text_319499" target="_black">hutool工具包</a></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
name: 'Description'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,6 +1,51 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<eHeader :query="query"/>
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!--搜索-->
|
||||
<el-input v-model="query.filename" clearable placeholder="输入文件名" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 上传 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-permission="['ADMIN','PICTURE_ALL','PICTURE_UPLOAD']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="dialog = true">上传图片</el-button>
|
||||
</div>
|
||||
<div v-permission="['ADMIN','PICTURE_ALL','PICTURE_DELETE']" style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="delAllLoading"
|
||||
:disabled="data.length === 0 || $refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="open">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--上传图片-->
|
||||
<el-dialog :visible.sync="dialog" append-to-body width="600px" @close="doSubmit">
|
||||
<el-upload
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:before-remove="handleBeforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:headers="headers"
|
||||
:file-list="fileList"
|
||||
:action="imagesUploadApi"
|
||||
list-type="picture-card">
|
||||
<i class="el-icon-plus"/>
|
||||
</el-upload>
|
||||
<el-dialog :append-to-body="true" :visible.sync="dialogVisible">
|
||||
<img :src="dialogImageUrl" width="100%" alt="">
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
@@ -49,17 +94,31 @@
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import initData from '@/mixins/initData'
|
||||
import { del } from '@/api/picture'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import eHeader from './module/header'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { del, delAll } from '@/api/picture'
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
components: { eHeader },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false, sup_this: this
|
||||
delLoading: false, downloadLoading: false,
|
||||
delAllLoading: false,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken()
|
||||
},
|
||||
dialog: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
fileList: [],
|
||||
pictures: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
@@ -72,10 +131,9 @@ export default {
|
||||
this.url = 'api/pictures'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const type = query.type
|
||||
const value = query.value
|
||||
const filename = query.filename
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (type && value) { this.params[type] = value }
|
||||
if (filename) { this.params[filename] = filename }
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
@@ -95,6 +153,74 @@ export default {
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
toQuery() {
|
||||
this.page = 0
|
||||
this.init()
|
||||
},
|
||||
doDelete() {
|
||||
this.delAllLoading = true
|
||||
const data = this.$refs.table.selection
|
||||
const ids = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids.push(data[i].id)
|
||||
}
|
||||
delAll(ids).then(res => {
|
||||
this.delAllLoading = false
|
||||
this.init()
|
||||
this.dleChangePage(ids.length)
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$confirm('你确定删除选中的数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.doDelete()
|
||||
})
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
const uid = file.uid
|
||||
const id = response.id
|
||||
this.pictures.push({ uid, id })
|
||||
},
|
||||
handleBeforeRemove(file, fileList) {
|
||||
for (let i = 0; i < this.pictures.length; i++) {
|
||||
if (this.pictures[i].uid === file.uid) {
|
||||
del(this.pictures[i].id).then(res => {})
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 刷新列表数据
|
||||
doSubmit() {
|
||||
this.fileList = []
|
||||
this.dialogVisible = false
|
||||
this.dialogImageUrl = ''
|
||||
this.dialog = false
|
||||
this.init()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialog" append-to-body width="600px" @close="doSubmit">
|
||||
<el-upload
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:before-remove="handleBeforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:headers="headers"
|
||||
:file-list="fileList"
|
||||
:action="imagesUploadApi"
|
||||
list-type="picture-card">
|
||||
<i class="el-icon-plus"/>
|
||||
</el-upload>
|
||||
<el-dialog :append-to-body="true" :visible.sync="dialogVisible">
|
||||
<img :src="dialogImageUrl" width="100%" alt="">
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { del } from '@/api/picture'
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken()
|
||||
},
|
||||
dialog: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
fileList: [],
|
||||
pictures: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
handleSuccess(response, file, fileList) {
|
||||
const uid = file.uid
|
||||
const id = response.id
|
||||
this.pictures.push({ uid, id })
|
||||
},
|
||||
handleBeforeRemove(file, fileList) {
|
||||
for (let i = 0; i < this.pictures.length; i++) {
|
||||
if (this.pictures[i].uid === file.uid) {
|
||||
del(this.pictures[i].id).then(res => {})
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 刷新列表数据
|
||||
doSubmit() {
|
||||
this.fileList = []
|
||||
this.dialogVisible = false
|
||||
this.dialogImageUrl = ''
|
||||
this.dialog = false
|
||||
this.$parent.$parent.init()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<!--搜索-->
|
||||
<el-input v-model="query.value" clearable placeholder="输入关键字搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
|
||||
<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 上传 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-permission="['ADMIN','PICTURE_ALL','PICTURE_UPLOAD']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="$refs.form.dialog = true">上传图片</el-button>
|
||||
<eForm ref="form"/>
|
||||
</div>
|
||||
<div v-permission="['ADMIN','PICTURE_ALL','PICTURE_DELETE']" style="display: inline-block;">
|
||||
<el-button
|
||||
:loading="delLoading"
|
||||
:disabled="$parent.data.length === 0 || $parent.$refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="open">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eForm from './form'
|
||||
import { delAll } from '@/api/picture'
|
||||
// 查询条件
|
||||
export default {
|
||||
components: { eForm },
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downloadLoading: false,
|
||||
delLoading: false,
|
||||
queryTypeOptions: [
|
||||
{ key: 'filename', display_name: '文件名' },
|
||||
{ key: 'username', display_name: '用户名' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toQuery() {
|
||||
this.$parent.page = 0
|
||||
this.$parent.init()
|
||||
},
|
||||
doDelete() {
|
||||
this.delLoading = true
|
||||
const data = this.$parent.$refs.table.selection
|
||||
const ids = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids.push(data[i].id)
|
||||
}
|
||||
delAll(ids).then(res => {
|
||||
this.delLoading = false
|
||||
this.$parent.init()
|
||||
this.$parent.dleChangePage(ids.length)
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$confirm('你确定删除选中的数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.doDelete()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -7,17 +7,27 @@
|
||||
<List/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="使用说明" name="third">
|
||||
<Description/>
|
||||
<div>
|
||||
<blockquote class="my-blockquote">注意</blockquote>
|
||||
<pre class="my-code">
|
||||
1、配置时外链域名需带上协议，也就是必须http/https开头
|
||||
2、如果七牛云中存在数据，使用同步按钮即可将数据同步到数据库
|
||||
3、本次集成了七牛云的常用操作，如：上传，下载，删除，同步，支持私有空间上传下载</pre>
|
||||
<blockquote class="my-blockquote">更多帮助</blockquote>
|
||||
<pre class="my-code">更多帮助请查看系统源码，或者七牛云java开发文档
|
||||
七牛云官网：<a style="color: #00a2d4" href="https://sso.qiniu.com/" target="_blank">https://sso.qiniu.com/</a>
|
||||
七牛云java开发文档：<a style="color: #00a2d4" href="https://developer.qiniu.com/kodo/sdk/1239/java#3" target="_blank">https://developer.qiniu.com/kodo/sdk/1239/java#3</a></pre>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Config from './module/config'
|
||||
import List from './module/list'
|
||||
import Description from './module/description'
|
||||
import Config from './config'
|
||||
import List from './list'
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
components: { Config, List, Description },
|
||||
components: { Config, List },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second'
|
||||
|
||||
279
src/views/tools/qiniu/list.vue
Normal file
279
src/views/tools/qiniu/list.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding: 8px;">
|
||||
<!-- 工具栏 -->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 上传 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
|
||||
</div>
|
||||
<!-- 同步 -->
|
||||
<el-button :icon="icon" class="filter-item" size="mini" type="warning" @click="synchronize">同步数据</el-button>
|
||||
<!-- 多选删除 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-permission="['ADMIN','PICTURE_ALL','PICTURE_DELETE']"
|
||||
:loading="delAllLoading"
|
||||
:disabled="data.length === 0 || $refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="open">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件上传 -->
|
||||
<el-dialog :visible.sync="dialog" append-to-body width="500px" @close="doSubmit">
|
||||
<el-upload
|
||||
:before-remove="handleBeforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:action="qiNiuUploadApi"
|
||||
class="upload-demo"
|
||||
multiple>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column :show-overflow-tooltip="true" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.key }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" label="文件类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getExtensionName(scope.row.key) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bucket" label="空间名称"/>
|
||||
<el-table-column prop="size" label="文件大小"/>
|
||||
<el-table-column prop="type" label="空间类型"/>
|
||||
<el-table-column width="180px" prop="updateTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_DELETE'])" label="操作" width="130px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
@click="download(scope.row.id)"/>
|
||||
<el-popover
|
||||
v-permission="['ADMIN','PICTURE_ALL','PICTURE_DELETE']"
|
||||
:ref="scope.row.id"
|
||||
placement="top"
|
||||
width="180">
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page + 1"
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, download, sync, delAll } from '@/api/qiniu'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
icon: 'el-icon-refresh', delAllLoading: false,
|
||||
url: '', headers: { 'Authorization': 'Bearer ' + getToken() }, dialog: false,
|
||||
dialogImageUrl: '', dialogVisible: false, fileList: [], files: [],
|
||||
newWin: null, downloadLoading: false, delLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'qiNiuUploadApi'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
url(newVal, oldVal) {
|
||||
if (newVal && this.newWin) {
|
||||
this.newWin.sessionStorage.clear()
|
||||
this.newWin.location.href = newVal
|
||||
// 重定向后把url和newWin重置
|
||||
this.url = ''
|
||||
this.newWin = null
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
toQuery() {
|
||||
this.page = 0
|
||||
this.init()
|
||||
},
|
||||
beforeInit() {
|
||||
this.url = 'api/qiNiuContent'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['key'] = value }
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
download(id) {
|
||||
this.downloadLoading = true
|
||||
// 先打开一个空的新窗口，再请求
|
||||
this.newWin = window.open()
|
||||
download(id).then(res => {
|
||||
this.downloadLoading = false
|
||||
this.url = res.url
|
||||
}).catch(err => {
|
||||
this.downloadLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
getExtensionName(name) {
|
||||
const dot = name.lastIndexOf('.')
|
||||
if ((dot > -1) && (dot < (name.length - 1))) {
|
||||
return name.substring(dot + 1)
|
||||
}
|
||||
return name
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
const uid = file.uid
|
||||
const id = response.id
|
||||
this.files.push({ uid, id })
|
||||
},
|
||||
handleBeforeRemove(file, fileList) {
|
||||
for (let i = 0; i < this.files.length; i++) {
|
||||
if (this.files[i].uid === file.uid) {
|
||||
del(this.files[i].id).then(res => {})
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 刷新列表数据
|
||||
doSubmit() {
|
||||
this.fileList = []
|
||||
this.dialogVisible = false
|
||||
this.dialogImageUrl = ''
|
||||
this.dialog = false
|
||||
this.init()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
synchronize() {
|
||||
this.icon = 'el-icon-loading'
|
||||
this.buttonName = '同步中'
|
||||
sync().then(res => {
|
||||
this.icon = 'el-icon-refresh'
|
||||
this.buttonName = '同步数据'
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '数据同步成功',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
this.toQuery()
|
||||
}).catch(err => {
|
||||
this.icon = 'el-icon-refresh'
|
||||
this.buttonName = '同步数据'
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doDelete() {
|
||||
this.delAllLoading = true
|
||||
const data = this.$refs.table.selection
|
||||
const ids = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids.push(data[i].id)
|
||||
}
|
||||
delAll(ids).then(res => {
|
||||
this.delAllLoading = false
|
||||
this.dleChangePage(ids.length)
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$confirm('你确定删除选中的数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.doDelete()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<blockquote class="my-blockquote">注意</blockquote>
|
||||
<pre class="my-code">
|
||||
1、配置时外链域名需带上协议，也就是必须http/https开头
|
||||
2、如果七牛云中存在数据，使用同步按钮即可将数据同步到数据库
|
||||
3、本次集成了七牛云的常用操作，如：上传，下载，删除，同步，支持私有空间上传下载
|
||||
4、项目中配置存入数据库，如需测试，请使用临时空间进行测试，测试完成及时修改配置，反正数据泄露</pre>
|
||||
<blockquote class="my-blockquote"> 开始使用</blockquote>
|
||||
<pre class="my-code">
|
||||
#引入依赖
|
||||
<dependency>
|
||||
<groupId>com.qiniu</groupId>
|
||||
<artifactId>qiniu-java-sdk</artifactId>
|
||||
<version>[7.2.0, 7.2.99]</version>
|
||||
<dependency>
|
||||
#简单的上传文件
|
||||
//构造一个带指定Zone对象的配置类
|
||||
Configuration cfg = new Configuration(Zone.zone0());
|
||||
//...其他参数参考类注释
|
||||
UploadManager uploadManager = new UploadManager(cfg);
|
||||
//...生成上传凭证，然后准备上传
|
||||
String accessKey = "your access key";
|
||||
String secretKey = "your secret key";
|
||||
String bucket = "your bucket name";
|
||||
//默认不指定key的情况下，以文件内容的hash值作为文件名
|
||||
String key = null;
|
||||
try {
|
||||
byte[] uploadBytes = "hello qiniu cloud".getBytes("utf-8");
|
||||
Auth auth = Auth.create(accessKey, secretKey);
|
||||
String upToken = auth.uploadToken(bucket);
|
||||
try {
|
||||
Response response = uploadManager.put(uploadBytes, key, upToken);
|
||||
//解析上传成功的结果
|
||||
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
|
||||
System.out.println(putRet.key);
|
||||
System.out.println(putRet.hash);
|
||||
} catch (QiniuException ex) {
|
||||
Response r = ex.response;
|
||||
System.err.println(r.toString());
|
||||
try {
|
||||
System.err.println(r.bodyString());
|
||||
} catch (QiniuException ex2) {
|
||||
//ignore
|
||||
}
|
||||
}
|
||||
} catch (UnsupportedEncodingException ex) {
|
||||
//ignore
|
||||
}</pre>
|
||||
<blockquote class="my-blockquote">更多帮助</blockquote>
|
||||
<pre class="my-code">更多帮助请查看系统源码，或者七牛云java开发文档
|
||||
七牛云官网：<a style="color: #00a2d4" href="https://sso.qiniu.com/" target="_blank">https://sso.qiniu.com/</a>
|
||||
七牛云java开发文档：<a style="color: #00a2d4" href="https://developer.qiniu.com/kodo/sdk/1239/java#3" target="_blank">https://developer.qiniu.com/kodo/sdk/1239/java#3</a></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
name: 'Description'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<eHeader :query="query"/>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column :show-overflow-tooltip="true" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.key }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" label="文件类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getExtensionName(scope.row.key) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bucket" label="空间名称"/>
|
||||
<el-table-column prop="size" label="文件大小"/>
|
||||
<el-table-column prop="type" label="空间类型"/>
|
||||
<el-table-column width="180px" prop="updateTime" label="创建日期">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_DELETE'])" label="操作" width="130px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
:loading="downloadLoading"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
@click="download(scope.row.id)"/>
|
||||
<el-popover
|
||||
v-permission="['ADMIN','PICTURE_ALL','PICTURE_DELETE']"
|
||||
:ref="scope.row.id"
|
||||
placement="top"
|
||||
width="180">
|
||||
<p>确定删除本条数据吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:current-page="page + 1"
|
||||
style="margin-top: 8px;"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import initData from '@/mixins/initData'
|
||||
import { del, download } from '@/api/qiniu'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import eHeader from './module/header'
|
||||
export default {
|
||||
components: { eHeader },
|
||||
mixins: [initData],
|
||||
data() {
|
||||
return {
|
||||
url: '',
|
||||
// 新窗口的引用
|
||||
newWin: null,
|
||||
downloadLoading: false, delLoading: false, sup_this: this
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
url(newVal, oldVal) {
|
||||
if (newVal && this.newWin) {
|
||||
this.newWin.sessionStorage.clear()
|
||||
this.newWin.location.href = newVal
|
||||
// 重定向后把url和newWin重置
|
||||
this.url = ''
|
||||
this.newWin = null
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
checkPermission,
|
||||
beforeInit() {
|
||||
this.url = 'api/qiNiuContent'
|
||||
const sort = 'id,desc'
|
||||
const query = this.query
|
||||
const value = query.value
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
if (value) { this.params['key'] = value }
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id).then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
download(id) {
|
||||
this.downloadLoading = true
|
||||
// 先打开一个空的新窗口，再请求
|
||||
this.newWin = window.open()
|
||||
download(id).then(res => {
|
||||
this.downloadLoading = false
|
||||
this.url = res.url
|
||||
}).catch(err => {
|
||||
this.downloadLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
getExtensionName(name) {
|
||||
const dot = name.lastIndexOf('.')
|
||||
if ((dot > -1) && (dot < (name.length - 1))) {
|
||||
return name.substring(dot + 1)
|
||||
}
|
||||
return name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="dialog" append-to-body width="500px" @close="doSubmit">
|
||||
<el-upload
|
||||
:before-remove="handleBeforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:action="qiNiuUploadApi"
|
||||
class="upload-demo"
|
||||
multiple>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { del } from '@/api/qiniu'
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken()
|
||||
},
|
||||
dialog: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
fileList: [],
|
||||
files: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'qiNiuUploadApi'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
handleSuccess(response, file, fileList) {
|
||||
const uid = file.uid
|
||||
const id = response.id
|
||||
this.files.push({ uid, id })
|
||||
},
|
||||
handleBeforeRemove(file, fileList) {
|
||||
for (let i = 0; i < this.files.length; i++) {
|
||||
if (this.files[i].uid === file.uid) {
|
||||
del(this.files[i].id).then(res => {})
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 刷新列表数据
|
||||
doSubmit() {
|
||||
this.fileList = []
|
||||
this.dialogVisible = false
|
||||
this.dialogImageUrl = ''
|
||||
this.dialog = false
|
||||
this.$parent.$parent.init()
|
||||
},
|
||||
// 监听上传失败
|
||||
handleError(e, file, fileList) {
|
||||
const msg = JSON.parse(e.message)
|
||||
this.$notify({
|
||||
title: msg.message,
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 上传 -->
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
@click="$refs.form.dialog = true">上传文件</el-button>
|
||||
<eForm ref="form"/>
|
||||
</div>
|
||||
<!-- 同步 -->
|
||||
<el-button :icon="icon" class="filter-item" size="mini" type="warning" @click="synchronize">{{ buttonName }}</el-button>
|
||||
<div style="display: inline-block;margin: 0px 2px;">
|
||||
<el-button
|
||||
v-permission="['ADMIN','PICTURE_ALL','PICTURE_DELETE']"
|
||||
:loading="delLoading"
|
||||
:disabled="$parent.data.length === 0 || $parent.$refs.table.selection.length === 0"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="open">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eForm from './form'
|
||||
import { sync, delAll } from '@/api/qiniu'
|
||||
// 查询条件
|
||||
export default {
|
||||
components: { eForm },
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icon: 'el-icon-refresh',
|
||||
buttonName: '同步数据',
|
||||
delLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toQuery() {
|
||||
this.$parent.page = 0
|
||||
this.$parent.init()
|
||||
},
|
||||
synchronize() {
|
||||
this.icon = 'el-icon-loading'
|
||||
this.buttonName = '同步中'
|
||||
sync().then(res => {
|
||||
this.icon = 'el-icon-refresh'
|
||||
this.buttonName = '同步数据'
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '数据同步成功',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
this.toQuery()
|
||||
}).catch(err => {
|
||||
this.icon = 'el-icon-refresh'
|
||||
this.buttonName = '同步数据'
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doDelete() {
|
||||
this.delLoading = true
|
||||
const data = this.$parent.$refs.table.selection
|
||||
const ids = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids.push(data[i].id)
|
||||
}
|
||||
delAll(ids).then(res => {
|
||||
this.delLoading = false
|
||||
this.$parent.dleChangePage(ids.length)
|
||||
this.$parent.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
}).catch(err => {
|
||||
this.delLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$confirm('你确定删除选中的数据吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.doDelete()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user