skyselang
/
yylAdminWeb
mirror of https://gitee.com/skyselang/yylAdminWeb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增：文件管理 

Signed-off-by: skyselang <215817969@qq.com>
This commit is contained in:
skyselang 2021-09-23 16:24:00 +08:00
parent 90ec39fbad
commit 1e764692cb
32 changed files with 2770 additions and 688 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -12,9 +12,9 @@
"dependencies": {
"axios": "0.21.1",
"clipboard": "2.0.8",
"core-js": "3.8.2",
"echarts": "5.1.2",
"element-ui": "2.15.3",
"core-js": "3.16.0",
"echarts": "5.2.0",
"element-ui": "2.15.6",
"fuse.js": "3.6.1",
"js-cookie": "2.2.1",
"normalize.css": "8.0.1",
@ -25,7 +25,7 @@
"vue": "2.6.14",
"vue-router": "3.5.2",
"vuex": "3.6.2",
"wangeditor": "4.7.5"
"wangeditor": "4.7.8"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.5.12",

119
src/api/file/file.js Normal file
View File

@ -0,0 +1,119 @@
import request from '@/utils/request'
const url = '/admin/file.File/'
// ----------------文件管理----------------
/**
* 分组列表
* @param {array} params 请求参数
*/
export function group(params) {
return request({
url: url + 'group',
method: 'get',
params: params
})
}
/**
* 文件列表
* @param {array} params 请求参数
*/
export function list(params) {
return request({
url: url + 'list',
method: 'get',
params: params
})
}
/**
* 文件信息
* @param {array} params 请求参数
*/
export function info(params) {
return request({
url: url + 'info',
method: 'get',
params: params
})
}
/**
* 文件添加
*/
export function add() {
return process.env.VUE_APP_BASE_API + url + 'add'
}
/**
* 文件修改
* @param {array} data 请求数据
*/
export function edit(data) {
return request({
url: url + 'edit',
method: 'post',
data
})
}
/**
* 文件删除
* @param {array} data 请求数据
*/
export function dele(data) {
return request({
url: url + 'dele',
method: 'post',
data
})
}
/**
* 文件是否禁用
* @param {array} data 请求数据
*/
export function disable(data) {
return request({
url: url + 'disable',
method: 'post',
data
})
}
/**
* 文件修改分组
* @param {array} data 请求数据
*/
export function grouping(data) {
return request({
url: url + 'grouping',
method: 'post',
data
})
}
/**
* 文件回收站
* @param {array} data 请求参数
*/
export function recover(params) {
return request({
url: url + 'recover',
method: 'get',
params: params
})
}
/**
* 文件回收站恢复
* @param {array} data 请求数据
*/
export function recoverReco(data) {
return request({
url: url + 'recoverReco',
method: 'post',
data
})
}
/**
* 文件回收站删除
* @param {array} data 请求数据
*/
export function recoverDele(data) {
return request({
url: url + 'recoverDele',
method: 'post',
data
})
}

69
src/api/file/group.js Normal file
View File

@ -0,0 +1,69 @@
import request from '@/utils/request'
const url = '/admin/file.Group/'
// ----------------文件分组管理----------------
/**
* 文件分组列表
* @param {array} params 请求参数
*/
export function list(params) {
return request({
url: url + 'list',
method: 'get',
params: params
})
}
/**
* 文件分组信息
* @param {array} params 请求参数
*/
export function info(params) {
return request({
url: url + 'info',
method: 'get',
params: params
})
}
/**
* 文件分组添加
* @param {array} data 请求数据
*/
export function add(data) {
return request({
url: url + 'add',
method: 'post',
data
})
}
/**
* 文件分组修改
* @param {array} data 请求数据
*/
export function edit(data) {
return request({
url: url + 'edit',
method: 'post',
data
})
}
/**
* 文件分组删除
* @param {array} data 请求数据
*/
export function dele(data) {
return request({
url: url + 'dele',
method: 'post',
data
})
}
/**
* 文件分组是否禁用
* @param {array} data 请求数据
*/
export function disable(data) {
return request({
url: url + 'disable',
method: 'post',
data
})
}

25
src/api/file/setting.js Normal file
View File

@ -0,0 +1,25 @@
import request from '@/utils/request'
const url = '/admin/file.Setting/'
// ---------------文件设置-------------------
/**
* 文件设置信息
* @param {array} params 请求参数
*/
export function info(params) {
return request({
url: url + 'info',
method: 'get',
params: params
})
}
/**
* 文件设置修改
* @param {array} data 请求数据
*/
export function edit(data) {
return request({
url: url + 'edit',
method: 'post',
data
})
}

13
src/api/admin/index.js → src/api/index.js
View File

@ -1,5 +1,5 @@
import request from '@/utils/request'
const url = '/admin/admin.Index/'
const url = '/admin/Index/'
// ----------------控制台-----------------
/**
* 首页
@ -34,3 +34,14 @@ export function cms(params) {
params: params
})
}
/**
* 文件统计
* @param {array} params 请求参数
*/
export function file(params) {
return request({
url: url + 'file',
method: 'get',
params: params
})
}

1042
src/components/FileManage/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/components/Pagination/index.vue
View File

@ -35,7 +35,7 @@ export default {
pageSizes: {
type: Array,
default() {
return [10, 12, 15, 20, 30, 50, 80, 100, 150, 200, 300, 500]
return [10, 12, 15, 18, 20, 30, 50, 80, 100, 150, 200, 300, 500]
}
},
layout: {

67
src/router/index.js
View File

@ -92,7 +92,7 @@ export const constantRoutes = [
icon: 'el-icon-s-home',
affix: true
},
component: () => import('@/views/admin/index/index')
component: () => import('@/views/index/index')
}
]
}
@ -121,6 +121,7 @@ export const asyncRoutes = [
name: 'Member',
meta: {
title: '会员管理',
icon: 'el-icon-user',
roles: ['admin/Member/list']
},
component: () => import('@/views/member/member')
@ -130,6 +131,7 @@ export const asyncRoutes = [
name: 'MemberLog',
meta: {
title: '会员日志',
icon: 'el-icon-user',
roles: ['admin/MemberLog/list']
},
component: () => import('@/views/member/member-log')
@ -169,6 +171,7 @@ export const asyncRoutes = [
name: 'CmsCategory',
meta: {
title: '内容分类',
icon: 'el-icon-reading',
roles: ['admin/cms.Category/list']
},
component: () => import('@/views/cms/category')
@ -178,6 +181,7 @@ export const asyncRoutes = [
name: 'CmsContent',
meta: {
title: '内容管理',
icon: 'el-icon-reading',
roles: ['admin/cms.Content/list']
},
component: () => import('@/views/cms/content')
@ -187,6 +191,7 @@ export const asyncRoutes = [
name: 'CmsComment',
meta: {
title: '留言管理',
icon: 'el-icon-reading',
roles: ['admin/cms.Comment/list']
},
component: () => import('@/views/cms/comment')
@ -196,12 +201,60 @@ export const asyncRoutes = [
name: 'CmsSetting',
meta: {
title: '内容设置',
icon: 'el-icon-reading',
roles: ['admin/cms.Setting/info']
},
component: () => import('@/views/cms/setting')
}
]
},
{
path: '/file',
name: 'file',
meta: {
title: '文件管理',
icon: 'el-icon-folder',
roles: [
'admin/file.File/list',
'admin/file.Group/list'
]
},
redirect: 'noRedirect',
component: Layout,
alwaysShow: true,
children: [
{
path: 'file',
name: 'File',
meta: {
title: '文件管理',
icon: 'el-icon-folder',
roles: ['admin/file.File/list']
},
component: () => import('@/views/file/file')
},
{
path: 'group',
name: 'Group',
meta: {
title: '文件分组',
icon: 'el-icon-folder',
roles: ['admin/file.Group/list']
},
component: () => import('@/views/file/group')
},
{
path: 'setting',
name: 'setting',
meta: {
title: '文件设置',
icon: 'el-icon-folder',
roles: ['admin/file.Setting/info']
},
component: () => import('@/views/file/setting')
}
]
},
{
path: '/setting',
name: 'setting',
@ -228,6 +281,7 @@ export const asyncRoutes = [
name: 'Api',
meta: {
title: '接口管理',
icon: 'el-icon-setting',
roles: ['admin/Api/list']
},
component: () => import('@/views/api/api')
@ -237,6 +291,7 @@ export const asyncRoutes = [
name: 'Base',
meta: {
title: '设置管理',
icon: 'el-icon-setting',
roles: [
'admin/Setting/tokenInfo',
'admin/Setting/captchaInfo',
@ -251,6 +306,7 @@ export const asyncRoutes = [
name: 'Wechat',
meta: {
title: '微信设置',
icon: 'el-icon-setting',
roles: ['admin/SettingWechat/offiInfo', 'admin/SettingWechat/miniInfo']
},
component: () => import('@/views/setting/wechat')
@ -260,6 +316,7 @@ export const asyncRoutes = [
name: 'Region',
meta: {
title: '地区管理',
icon: 'el-icon-setting',
roles: ['admin/Region/list']
},
component: () => import('@/views/region/region')
@ -290,6 +347,7 @@ export const asyncRoutes = [
name: 'AdminMenu',
meta: {
title: '菜单管理',
icon: 'el-icon-lock',
roles: ['admin/admin.Menu/list']
},
component: () => import('@/views/admin/menu/menu')
@ -299,6 +357,7 @@ export const asyncRoutes = [
name: 'AdminRole',
meta: {
title: '角色管理',
icon: 'el-icon-lock',
roles: ['admin/admin.Role/list']
},
component: () => import('@/views/admin/role/role')
@ -308,6 +367,7 @@ export const asyncRoutes = [
name: 'AdminUser',
meta: {
title: '用户管理',
icon: 'el-icon-lock',
roles: ['admin/admin.User/list']
},
component: () => import('@/views/admin/user/user')
@ -317,6 +377,7 @@ export const asyncRoutes = [
name: 'AdminUserLog',
meta: {
title: '日志管理',
icon: 'el-icon-lock',
roles: ['admin/admin.UserLog/list']
},
component: () => import('@/views/admin/user/user-log')
@ -337,6 +398,7 @@ export const asyncRoutes = [
name: 'AdminUserCenter',
meta: {
title: '个人中心',
icon: 'el-icon-lock',
roles: ['admin/admin.UserCenter/info']
},
component: () => import('@/views/admin/user/user-center')
@ -369,6 +431,7 @@ export const asyncRoutes = [
name: 'AdminSetting',
meta: {
title: '设置管理',
icon: 'el-icon-s-tools',
roles: [
'admin/admin.Setting/cacheInfo',
'admin/admin.Setting/tokenInfo',
@ -384,6 +447,7 @@ export const asyncRoutes = [
name: 'AdminApidoc',
meta: {
title: '接口文档',
icon: 'el-icon-s-tools',
roles: ['admin/admin.Apidoc/apidoc']
},
component: () => import('@/views/admin/apidoc/apidoc')
@ -393,6 +457,7 @@ export const asyncRoutes = [
name: 'AdminUtils',
meta: {
title: '实用工具',
icon: 'el-icon-s-tools',
roles: ['admin/admin.Utils/utils']
},
component: () => import('@/views/admin/utils/utils')

113
src/views/admin/index/components/Cms.vue
View File

@ -1,113 +0,0 @@
<template>
<div>
<el-card v-loading="loading" class="box-card">
<el-row :gutter="10">
<el-col :sm="8">
<el-card class="box-card" :body-style="cardBodyStyle">
<div slot="header" class="clearfix">
<span>分类</span>
</div>
<div class="text">
<el-row :gutter="0">
<el-col :span="24" class="color-tot" title="总数">
{{ count.category }}
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :sm="8">
<el-card class="box-card" :body-style="cardBodyStyle">
<div slot="header" class="clearfix">
<span>内容</span>
</div>
<div class="text">
<el-row :gutter="0">
<el-col :span="24" class="color-tot" title="总数">
{{ count.content }}
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :sm="8">
<el-card class="box-card" :body-style="cardBodyStyle">
<div slot="header" class="clearfix">
<span>点击量</span>
</div>
<div class="text">
<el-row :gutter="0">
<el-col :span="24" class="color-tot" title="总数">
{{ count.hits }}
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</el-card>
<back-to-top transition-name="fade" />
</div>
</template>
<script>
import screenHeight from '@/utils/screen-height'
import BackToTop from '@/components/BackToTop'
import { cms } from '@/api/admin/index'
export default {
name: 'Cms',
components: { BackToTop },
data() {
return {
height: 680,
loading: false,
count: {
category: '-',
content: '-',
hits: '-'
},
cardBodyStyle: {
padding: '10px 0px 0px 0px'
}
}
},
computed: {},
created() {
this.height = screenHeight(180)
this.cms()
},
mounted() {},
methods: {
cms() {
this.loading = true
cms().then(res => {
this.count = res.data
this.loading = false
}).catch(() => {
this.loading = false
})
}
}
}
</script>
<style scoped>
.box-card {
text-align: center;
}
.box-card .text {
color: #666;
font-size: 20px;
line-height: 32px;
font-weight: 700;
text-align: center;
}
.el-row {
margin-bottom: 10px;
}
.color-tot {
color: #1890ff;
}
</style>

30
src/views/admin/index/index.vue
View File

@ -1,30 +0,0 @@
<template>
<div class="app-container">
<el-row :gutter="0">
<el-col :span="24">
<member v-if="checkPermission(['admin/admin.Index/member'])" />
</el-col>
<el-col :span="24">
<cms v-if="checkPermission(['admin/admin.Index/cms'])" />
</el-col>
</el-row>
</div>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import Member from './components/Member'
import Cms from './components/Cms'
export default {
name: 'Dashboard',
components: { Member, Cms },
data() {
return {}
},
created() { },
methods: {
checkPermission
}
}
</script>

10
src/views/admin/setting/setting.vue
View File

@ -2,19 +2,19 @@
<div class="app-container">
<el-tabs>
<el-tab-pane v-if="checkPermission(['admin/admin.Setting/cacheInfo'])" label="缓存设置" lazy>
<Cache />
<cache />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/admin.Setting/tokenInfo'])" label="Token设置" lazy>
<Token />
<token />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/admin.Setting/captchaInfo'])" label="验证码设置" lazy>
<Captcha />
<captcha />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/admin.Setting/logInfo'])" label="日志设置" lazy>
<Log />
<log />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/admin.Setting/apiInfo'])" label="接口设置" lazy>
<Api />
<api />
</el-tab-pane>
</el-tabs>
</div>

44
src/views/admin/user/components/UserCenterEdit.vue
View File

@ -9,17 +9,8 @@
<el-avatar shape="circle" fit="contain" :size="100" :src="model.avatar_url" />
</el-col>
<el-col :span="14">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:data="uploadData"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传头像</el-button>
</el-upload>
<el-button size="mini" @click="fileUpload()">上传头像</el-button>
<br>
<span>jpg、png图片，小于100kb，宽高1:1</span>
</el-col>
</el-form-item>
@ -43,31 +34,32 @@
</el-col>
</el-row>
</el-card>
<el-dialog title="文件管理" :visible.sync="fileDialog" width="80%" top="1vh">
<file-manage file-type="image" @file-lists="fileLists" />
</el-dialog>
</div>
</template>
<script>
import { getAdminToken } from '@/utils/auth'
import { info, edit, avatar } from '@/api/admin/user-center'
import store from '@/store'
import FileManage from '@/components/FileManage'
import { info, edit } from '@/api/admin/user-center'
export default {
name: 'UserCenterEdit',
components: {},
components: { FileManage },
data() {
return {
loading: false,
model: {
avatar: '',
avatar_id: 0,
avatar_url: '',
username: '',
nickname: '',
phone: '',
email: ''
},
uploadAction: avatar(),
uploadHeaders: { AdminToken: getAdminToken() },
uploadData: { type: 'image' },
fileDialog: false,
rules: {
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }]
@ -108,17 +100,13 @@ export default {
this.loading = false
},
// 上传头像
uploadSuccess(res) {
if (res.code === 200) {
this.model.avatar_url = res.data.url
this.model.avatar = res.data.path
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
fileUpload() {
this.fileDialog = true
},
uploadError(res) {
this.$message.error(res.msg || '上传出错')
fileLists(filelists) {
this.fileDialog = false
this.model.avatar_id = filelists[0]['file_id']
this.model.avatar_url = filelists[0]['file_url']
}
}
}

42
src/views/admin/user/user.vue
View File

@ -54,17 +54,8 @@
<el-avatar shape="circle" fit="contain" :size="100" :src="model.avatar_url" />
</el-col>
<el-col :span="14">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:data="uploadData"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传头像</el-button>
</el-upload>
<el-button size="mini" @click="fileUpload()">上传图片</el-button>
<br>
<span>jpg、png图片，小于100kb，宽高1:1</span>
</el-col>
</el-form-item>
@ -192,18 +183,21 @@
<el-button type="primary" @click="pwdSubmit">提交</el-button>
</div>
</el-dialog>
<el-dialog title="文件管理" :visible.sync="fileDialog" width="80%" top="1vh">
<file-manage file-type="image" @file-lists="fileLists" />
</el-dialog>
</div>
</template>
<script>
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination'
import { getAdminToken } from '@/utils/auth'
import { list, info, add, edit, dele, avatar, issuper, disable, rule, pwd } from '@/api/admin/user'
import FileManage from '@/components/FileManage'
import { list, info, add, edit, dele, issuper, disable, rule, pwd } from '@/api/admin/user'
export default {
name: 'AdminUser',
components: { Pagination },
components: { Pagination, FileManage },
data() {
return {
height: 680,
@ -237,9 +231,7 @@ export default {
create_time: '',
update_time: ''
},
uploadAction: avatar(),
uploadHeaders: { AdminToken: getAdminToken() },
uploadData: { type: 'image' },
fileDialog: false,
ruleDialog: false,
roleData: [],
menuTree: [],
@ -370,17 +362,13 @@ export default {
}
},
// 上传头像
uploadSuccess(res) {
if (res.code === 200) {
this.model.avatar_url = res.data.url
this.model.avatar = res.data.path
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
fileUpload() {
this.fileDialog = true
},
uploadError(res) {
this.$message.error(res.msg || '上传出错')
fileLists(filelists) {
this.fileDialog = false
this.model.avatar_id = filelists[0]['file_id']
this.model.avatar_url = filelists[0]['file_url']
},
// 是否超管
isSuper(row) {

51
src/views/cms/category.vue
View File

@ -66,18 +66,7 @@
<el-form-item label="图片" prop="imgs">
<el-row :gutter="0">
<el-col :span="8">
<el-upload
name="file"
:file-list="model.imgs"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:data="uploadData"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传图片</el-button>
</el-upload>
<el-button size="mini" @click="fileUpload()">上传图片</el-button>
</el-col>
<el-col :span="16">
<div>每张图片大小不超过 500 KB，jpg、png格式。</div>
@ -85,10 +74,10 @@
</el-row>
<el-row :gutter="0">
<el-col v-for="(item, index) in model.imgs" :key="index" :span="6" style="border:1px solid #DCDFE6">
<el-image style="width:100%;height:100px;" :src="item.url" :preview-src-list="[item.url]" fit="contain" title="点击查看大图" />
<el-image style="width:100%;height:100px;" :src="item.file_url" :preview-src-list="[item.file_url]" fit="contain" title="点击查看大图" />
<br style="line-height: 0">
<el-link :href="item.url" :underline="false" :download="item.url" target="_blank" style="margin:0 1px">
下载<span style="font-size:10px">({{ item.size }})</span>
<el-link :href="item.file_url" :underline="false" :download="item.file_url" target="_blank" style="margin:0 1px">
下载<span style="font-size:10px">({{ item.file_size }})</span>
</el-link>
<el-button size="mini" @click="uploadDele(index)">删除</el-button>
</el-col>
@ -109,17 +98,20 @@
<el-button type="primary" @click="submit">提交</el-button>
</div>
</el-dialog>
<el-dialog title="文件管理" :visible.sync="fileDialog" width="80%" top="1vh">
<file-manage file-type="image" @file-lists="fileLists" />
</el-dialog>
</div>
</template>
<script>
import screenHeight from '@/utils/screen-height'
import { getAdminToken } from '@/utils/auth'
import { list, info, add, edit, dele, upload, ishide } from '@/api/cms/category'
import FileManage from '@/components/FileManage'
import { list, info, add, edit, dele, ishide } from '@/api/cms/category'
export default {
name: 'CmsCategory',
components: { },
components: { FileManage },
directives: { },
data() {
return {
@ -142,9 +134,7 @@ export default {
isExpandAll: true,
is_hide: 0,
selection: [],
uploadAction: upload(),
uploadHeaders: { AdminToken: getAdminToken() },
uploadData: { type: 'image' },
fileDialog: false,
rules: {
category_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
}
@ -309,16 +299,17 @@ export default {
}
},
// 上传图片
uploadSuccess(res) {
if (res.code === 200) {
this.model.imgs.push(res.data)
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
fileUpload() {
this.fileDialog = true
},
uploadError(res) {
this.$message.error(res.msg || '上传出错')
fileLists(filelists) {
this.fileDialog = false
const file_len = filelists.length
if (filelists) {
for (let i = 0; i < file_len; i++) {
this.model.imgs.push(filelists[i])
}
}
},
uploadDele(index) {
this.model.imgs.splice(index, 1)

248
src/views/cms/content.vue
View File

@ -135,18 +135,7 @@
<el-form-item label="图片" prop="imgs">
<el-row :gutter="0">
<el-col :span="8">
<el-upload
name="file"
:file-list="model.imgs"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:data="uploadData"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传图片</el-button>
</el-upload>
<el-button size="mini" @click="fileUpload('image')">上传图片</el-button>
</el-col>
<el-col :span="16">
<div>每张图片大小不超过 500 KB，jpg、png格式。</div>
@ -154,10 +143,10 @@
</el-row>
<el-row :gutter="0">
<el-col v-for="(item, index) in model.imgs" :key="index" :span="6" style="border:1px solid #DCDFE6">
<el-image style="width:100%;height:100px;" :src="item.url" :preview-src-list="[item.url]" fit="contain" title="点击查看大图" />
<el-image style="width:100%;height:100px;" :src="item.file_url" :preview-src-list="[item.file_url]" fit="contain" title="点击查看大图" />
<br style="line-height: 0">
<el-link :href="item.url" :underline="false" :download="item.url" target="_blank" style="margin:0 1px">
下载<span style="font-size:10px">({{ item.size }})</span>
<el-link :href="item.file_url" :underline="false" :download="item.file_url" target="_blank" style="margin:0 1px">
下载<span style="font-size:10px">({{ item.file_size }})</span>
</el-link>
<el-button size="mini" @click="uploadDele(index)">删除</el-button>
</el-col>
@ -166,28 +155,17 @@
<el-form-item label="附件" prop="files">
<el-row :gutter="0">
<el-col :span="8">
<el-upload
name="file"
:file-list="model.files"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:data="uploadFileData"
:on-success="uploadFileSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传附件</el-button>
</el-upload>
<el-button size="mini" @click="fileUpload('word')">上传附件</el-button>
</el-col>
<el-col :span="16">
<div>每个附件大小不超过 10 MB。</div>
</el-col>
</el-row>
<el-row v-for="(item, index) in model.files" :key="index" :gutter="0">
<el-col :span="16"><el-input v-model="item.name" placeholder="名称" clearable /></el-col>
<el-col :span="4"><el-input v-model="item.size" placeholder="大小" clearable /></el-col>
<el-col :span="16"><el-input v-model="item.file_name" placeholder="名称" clearable /></el-col>
<el-col :span="4"><el-input v-model="item.file_size" placeholder="大小" clearable /></el-col>
<el-col :span="4">
<el-link :href="item.url" :underline="false" :download="item.url" target="_blank" style="margin:0 10px">下载</el-link>
<el-link :href="item.file_url" :underline="false" :download="item.file_url" target="_blank" style="margin:0 10px">下载</el-link>
<el-button size="mini" @click="uploadFileDele(index)">删除</el-button>
</el-col>
</el-row>
@ -195,18 +173,7 @@
<el-form-item label="视频" prop="videos">
<el-row :gutter="0">
<el-col :span="4">
<el-upload
name="file"
:file-list="model.videos"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:data="uploadVideoData"
:on-success="uploadVideoSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传视频</el-button>
</el-upload>
<el-button size="mini" @click="fileUpload('video')">上传视频</el-button>
</el-col>
<el-col :span="4">
<el-button size="mini" @click="uploadVideoAdd()">插入视频</el-button>
@ -216,11 +183,11 @@
</el-col>
</el-row>
<el-row v-for="(item, index) in model.videos" :key="index" :gutter="0">
<el-col :span="8"><el-input v-model="item.name" placeholder="名称" clearable /></el-col>
<el-col :span="8"><el-input v-model="item.path" placeholder="网址" clearable /></el-col>
<el-col :span="4"><el-input v-model="item.size" placeholder="大小" clearable /></el-col>
<el-col :span="8"><el-input v-model="item.file_name" placeholder="名称" clearable /></el-col>
<el-col :span="8"><el-input v-model="item.file_path" placeholder="网址" clearable /></el-col>
<el-col :span="4"><el-input v-model="item.file_size" placeholder="大小" clearable /></el-col>
<el-col :span="4">
<el-link :href="item.url" :underline="false" :download="item.url" target="_blank" style="margin:0 10px">下载</el-link>
<el-link :href="item.file_url" :underline="false" :download="item.file_url" target="_blank" style="margin:0 10px">下载</el-link>
<el-button size="mini" @click="uploadVideoDele(index)">删除</el-button>
</el-col>
</el-row>
@ -317,6 +284,12 @@
</div>
<pagination v-show="recoverCount > 0" :total="recoverCount" :page.sync="recoverQuery.page" :limit.sync="recoverQuery.limit" @pagination="recoverList" />
</el-dialog>
<el-dialog title="文件管理" :visible.sync="fileDialog" width="80%" top="1vh">
<file-manage :file-type="fileType" @file-lists="fileLists" />
</el-dialog>
<el-dialog title="文件管理" :visible.sync="editorDialog" width="80%" top="1vh">
<file-manage :file-type="editorFileType" @file-lists="fileListsEd" />
</el-dialog>
</div>
</template>
@ -324,13 +297,13 @@
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination'
import permission from '@/directive/permission/index.js' // 权限判断指令
import { getAdminToken } from '@/utils/auth'
import { list, category, info, add, edit, dele, upload, istop, ishot, isrec, ishide, recover, recoverReco, recoverDele } from '@/api/cms/content'
import E from 'wangeditor'
import FileManage from '@/components/FileManage'
import { list, category, info, add, edit, dele, istop, ishot, isrec, ishide, recover, recoverReco, recoverDele } from '@/api/cms/content'
export default {
name: 'CmsContent',
components: { Pagination },
components: { Pagination, FileManage },
directives: { permission },
data() {
return {
@ -366,12 +339,11 @@ export default {
is_rec: 0,
is_hide: 0,
selection: [],
uploadAction: upload(),
uploadHeaders: { AdminToken: getAdminToken() },
uploadData: { type: 'image' },
uploadFileData: { type: 'file' },
uploadVideoData: { type: 'video' },
fileDialog: false,
fileType: 'image',
editor: null,
editorDialog: false,
editorFileType: 'image',
rules: {
category_id: [{ required: true, message: '请选择分类', trigger: 'blur' }],
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
@ -420,7 +392,6 @@ export default {
this.dialog = true
this.dialogTitle = this.name + '添加'
this.model = this.$options.data().model
this.category()
},
// 修改
edit(row) {
@ -435,7 +406,6 @@ export default {
}).catch(() => {
this.loading = false
})
this.category()
},
// 删除
dele(row) {
@ -638,48 +608,67 @@ export default {
this.query.category_id = value[value.length - 1]
}
},
// 上传图片
uploadSuccess(res) {
if (res.code === 200) {
this.model.imgs.push(res.data)
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
// 上传图片、附件、视频
fileUpload(filetype) {
this.fileType = filetype
this.fileDialog = true
},
fileLists(filelists, filetype) {
this.fileDialog = false
const file_len = filelists.length
if (filelists) {
for (let i = 0; i < file_len; i++) {
if (filetype === 'video') {
this.model.videos.push(filelists[i])
} else if (filetype === 'word') {
this.model.files.push(filelists[i])
} else {
this.model.imgs.push(filelists[i])
}
}
}
},
uploadError(res) {
this.$message.error(res.msg || '上传出错')
fileListsEd(filelists, filetype) {
this.editorDialog = false
const file_len = filelists.length
if (filelists) {
for (let i = 0; i < file_len; i++) {
if (filetype === 'image') {
this.editor.cmd.do(
'insertHTML',
`<img file-ids="${filelists[i]['file_id']}" src="${filelists[i]['file_url']}" style="max-width:50%;"/>`
)
} else if (filetype === 'word') {
this.editor.cmd.do(
'insertHTML',
`<a file-ids="${filelists[i]['file_id']}" href="${filelists[i]['file_url']}" download="${filelists[i]['file_url']}" target="_blank">${filelists[i]['file_name']}</el-link>`
)
} else {
this.editor.cmd.do(
'insertHTML',
`<video width="50%" height="50%" controls>
<source file-ids="${filelists[i]['file_id']}" src="${filelists[i]['file_url']}" type="video/mp4">
<object file-ids="${filelists[i]['file_id']}" data="${filelists[i]['file_url']}" width="50%" height="50%">
<embed file-ids="${filelists[i]['file_id']}" src="${filelists[i]['file_url']}" width="50%" height="50%">
</object>
</video>`
)
}
}
}
},
uploadDele(index) {
this.model.imgs.splice(index, 1)
},
// 上传附件
uploadFileSuccess(res) {
if (res.code === 200) {
this.model.files.push(res.data)
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
},
uploadFileDele(index) {
this.model.files.splice(index, 1)
},
// 上传视频
uploadVideoSuccess(res) {
if (res.code === 200) {
this.model.videos.push(res.data)
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
},
uploadVideoDele(index) {
this.model.videos.splice(index, 1)
},
uploadVideoAdd() {
var videos = {}
videos.name = videos.path = videos.size = videos.type = videos.url = ''
videos.name = videos.file_path = videos.file_size = videos.file_type = videos.file_url = ''
this.model.videos.push(videos)
},
// 富文本编辑器
@ -687,6 +676,39 @@ export default {
const that = this
// 扩展菜单
const { BtnMenu } = E
class upimg extends BtnMenu {
constructor(editor) {
const $elem = E.$(`<div class="w-e-menu" data-title="上传图片"><el-button>图片</el-button></div>`)
super($elem, editor)
}
clickHandler() {
that.editorFileType = 'image'
that.editorDialog = true
}
tryChangeActive() {}
}
class upfile extends BtnMenu {
constructor(editor) {
const $elem = E.$(`<div class="w-e-menu" data-title="上传附件"><el-button>附件</el-button></div>`)
super($elem, editor)
}
clickHandler() {
that.editorFileType = 'word'
that.editorDialog = true
}
tryChangeActive() {}
}
class upvideo extends BtnMenu {
constructor(editor) {
const $elem = E.$(`<div class="w-e-menu" data-title="上传视频"><el-button>视频</el-button></div>`)
super($elem, editor)
}
clickHandler() {
that.editorFileType = 'video'
that.editorDialog = true
}
tryChangeActive() {}
}
class clear extends BtnMenu {
constructor(editor) {
const $elem = E.$(`<div class="w-e-menu" data-title="清空内容"><el-button>清空</el-button></div>`)
@ -697,47 +719,25 @@ export default {
}
tryChangeActive() {}
}
this.editor = new E('#content')
this.editor.menus.extend('clearKey', clear)
this.editor.config.menus = this.editor.config.menus.concat('clearKey')
// 上传图片
this.editor.config.uploadImgServer = this.uploadAction // 上传接口地址
this.editor.config.uploadImgMaxLength = 1 // 一次最多上传数量
this.editor.config.uploadImgParams = { type: 'image' } // 自定义上传参数
this.editor.config.uploadFileName = 'file' // 自定义 fileName
this.editor.config.uploadImgHeaders = this.uploadHeaders // 自定义 header
this.editor.config.uploadImgHooks = {
customInsert: function(insertImgFn, result) {
if (result.code === 200) {
insertImgFn(result.data.url)
} else {
that.$message.error(result.msg)
}
}
}
// 上传视频
this.editor.config.uploadVideoServer = this.uploadAction // 上传接口地址
this.editor.config.uploadVideoParams = { type: 'video' } // 自定义上传参数
this.editor.config.uploadVideoName = 'file' // 自定义 fileName
this.editor.config.uploadVideoHeaders = this.uploadHeaders // 自定义 header
this.editor.config.uploadVideoHooks = {
customInsert: function(insertVideoFn, result) {
if (result.code === 200) {
insertVideoFn(result.data.url)
} else {
that.$message.error(result.msg)
}
}
}
that.editor = new E('#content')
that.editor.config.excludeMenus = ['image', 'video']
that.editor.menus.extend('upimgKey', upimg)
that.editor.config.menus = that.editor.config.menus.concat('upimgKey')
that.editor.menus.extend('upfileKey', upfile)
that.editor.config.menus = that.editor.config.menus.concat('upfileKey')
that.editor.menus.extend('upvideoKey', upvideo)
that.editor.config.menus = that.editor.config.menus.concat('upvideoKey')
that.editor.menus.extend('clearKey', clear)
that.editor.config.menus = that.editor.config.menus.concat('clearKey')
this.editor.config.height = 500
this.editor.config.focus = false
this.editor.config.placeholder = ''
this.editor.config.onchange = (newHtml) => {
this.model.content = newHtml
that.editor.config.height = 500
that.editor.config.focus = false
that.editor.config.placeholder = ''
that.editor.config.onchange = (newHtml) => {
that.model.content = newHtml
}
this.editor.create()
this.editor.txt.html(this.model.content)
that.editor.create()
that.editor.txt.html(that.model.content)
},
dialogClosed() {
this.editor.destroy()
@ -816,7 +816,7 @@ export default {
if (row.length === 0) {
this.selectAlert()
} else {
var title = '删除' + this.name
var title = '彻底删除' + this.name
var message = '确定要彻底删除选中的 <span style="color:red">' + row.length + ' </span> 条' + this.name + '吗？'
if (row.length === 1) {
title = title + '：' + row[0].content_id

209
src/views/cms/setting.vue
View File

@ -2,91 +2,81 @@
<div class="app-container">
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-col :sm="24" :md="16">
<el-form ref="ref" :model="model" :rules="rules" label-width="130px">
<el-form-item label="logo" prop="logo">
<el-row :gutter="0">
<el-col :span="10">
<el-image style="width:100px; height:100px;" :src="model.logo_url" :preview-src-list="[model.logo_url]" title="点击查看大图">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image></el-col>
<el-col :span="14">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传logo</el-button>
</el-upload>
<span>jpg、png图片，小于200KB。</span>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="model.name" clearable placeholder="name" />
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="model.title" clearable placeholder="title" />
</el-form-item>
<el-form-item label="关键词" prop="keywords">
<el-input v-model="model.keywords" clearable placeholder="keywords" />
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="model.description" type="textarea" clearable placeholder="description" />
</el-form-item>
<el-form-item label="备案号" prop="icp">
<el-input v-model="model.icp" clearable placeholder="icp" />
</el-form-item>
<el-form-item label="版权" prop="copyright">
<el-input v-model="model.copyright" clearable placeholder="copyright" />
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="model.address" clearable placeholder="address" />
</el-form-item>
<el-form-item label="电话" prop="tel">
<el-input v-model="model.tel" clearable placeholder="tel" />
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="model.mobile" clearable placeholder="mobile" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="model.email" clearable placeholder="email" />
</el-form-item>
<el-form-item label="QQ" prop="qq">
<el-input v-model="model.qq" clearable placeholder="qq" />
</el-form-item>
<el-form-item label="微信" prop="wechat">
<el-input v-model="model.wechat" clearable placeholder="wechat" />
</el-form-item>
<el-form-item label="公众号" prop="off_acc">
<el-row :gutter="0">
<el-col :span="10">
<el-image style="width:100px; height:100px;" :src="model.off_acc_url" :preview-src-list="[model.off_acc_url]" title="点击查看大图">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-col>
<el-col :span="14">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:on-success="uploadSuccessOff"
:on-error="uploadError"
>
<el-button size="mini">上传公众号</el-button>
</el-upload>
<span>jpg、png图片，小于200KB。</span>
</el-col>
</el-row>
</el-form-item>
<el-tabs>
<el-tab-pane label="基本信息" name="">
<el-form-item label="logo" prop="logo_id">
<el-row :gutter="0">
<el-col :span="10">
<el-image style="width:100px; height:100px;" :src="model.logo_url" :preview-src-list="[model.logo_url]" title="点击查看大图">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image></el-col>
<el-col :span="14">
<el-button size="mini" @click="fileUpload('logo')">上传图片</el-button>
<br>
<span>jpg、png图片，小于200KB。</span>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="model.name" clearable placeholder="name" />
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="model.title" clearable placeholder="title" />
</el-form-item>
<el-form-item label="关键词" prop="keywords">
<el-input v-model="model.keywords" clearable placeholder="keywords" />
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="model.description" type="textarea" clearable placeholder="description" />
</el-form-item>
<el-form-item label="备案号" prop="icp">
<el-input v-model="model.icp" clearable placeholder="icp" />
</el-form-item>
<el-form-item label="版权" prop="copyright">
<el-input v-model="model.copyright" clearable placeholder="copyright" />
</el-form-item>
</el-tab-pane>
<el-tab-pane label="联系信息" name="">
<el-form-item label="公众号" prop="off_acc_id">
<el-row :gutter="0">
<el-col :span="10">
<el-image style="width:100px; height:100px;" :src="model.off_acc_url" :preview-src-list="[model.off_acc_url]" title="点击查看大图">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-col>
<el-col :span="14">
<el-button size="mini" @click="fileUpload('off_acc')">上传图片</el-button>
<br>
<span>jpg、png图片，小于200KB。</span>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="model.address" clearable placeholder="address" />
</el-form-item>
<el-form-item label="电话" prop="tel">
<el-input v-model="model.tel" clearable placeholder="tel" />
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="model.mobile" clearable placeholder="mobile" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="model.email" clearable placeholder="email" />
</el-form-item>
<el-form-item label="QQ" prop="qq">
<el-input v-model="model.qq" clearable placeholder="qq" />
</el-form-item>
<el-form-item label="微信" prop="wechat">
<el-input v-model="model.wechat" clearable placeholder="wechat" />
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item>
<el-button :loading="loading" @click="refresh()">刷新</el-button>
<el-button :loading="loading" type="primary" @click="submit()">提交</el-button>
@ -95,21 +85,24 @@
</el-col>
</el-row>
</el-card>
<el-dialog title="文件管理" :visible.sync="fileDialog" width="80%" top="1vh">
<file-manage file-type="image" @file-lists="fileLists" />
</el-dialog>
</div>
</template>
<script>
import { info, edit, upload } from '@/api/cms/setting'
import { getAdminToken } from '@/utils/auth'
import FileManage from '@/components/FileManage'
import { info, edit } from '@/api/cms/setting'
export default {
name: 'CmsSetting',
components: { },
components: { FileManage },
data() {
return {
loading: false,
model: {
logo: '',
logo_id: '',
logo_url: '',
name: '',
title: '',
@ -123,11 +116,11 @@ export default {
email: '',
qq: '',
wechat: '',
off_acc: '',
off_acc_id: '',
off_acc_url: ''
},
uploadAction: upload(),
uploadHeaders: { AdminToken: getAdminToken() },
fileDialog: false,
fileField: 'logo',
rules: {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
}
@ -171,31 +164,23 @@ export default {
this.loading = false
})
} else {
this.$message.error('请完善必填项')
this.$message.error('请完善必填项*')
}
})
},
// 上传logo
uploadSuccess(res) {
if (res.code === 200) {
this.model.logo_url = res.data.url
this.model.logo = res.data.path
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
// 上传logo、公众号
fileUpload(field) {
this.fileField = field
this.fileDialog = true
},
uploadError(res) {
this.$message.error(res.msg || '上传出错')
},
// 上传公众号
uploadSuccessOff(res) {
if (res.code === 200) {
this.model.off_acc_url = res.data.url
this.model.off_acc = res.data.path
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
fileLists(filelists) {
this.fileDialog = false
if (this.fileField === 'logo') {
this.model.logo_id = filelists[0]['file_id']
this.model.logo_url = filelists[0]['file_url']
} else if (this.fileField === 'off_acc') {
this.model.off_acc_id = filelists[0]['file_id']
this.model.off_acc_url = filelists[0]['file_url']
}
}
}

21
src/views/file/file.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<file-manage />
</template>
<script>
import FileManage from '@/components/FileManage'
export default {
name: 'FileFile',
components: { FileManage },
data() {
return {}
},
created() {},
methods: {}
}
</script>
<style scoped>
</style>

265
src/views/file/group.vue Normal file
View File

@ -0,0 +1,265 @@
<template>
<div class="app-container">
<!-- 查询 -->
<div class="filter-container">
<el-row :gutter="0">
<el-col :xs="24" :sm="20">
<el-input v-model="query.group_name" class="filter-item" style="width: 200px;" placeholder="名称" clearable />
<el-input v-model="query.group_desc" class="filter-item" style="width: 200px;" placeholder="描述" clearable />
<el-button class="filter-item" type="primary" @click="search()">查询</el-button>
<el-button class="filter-item" @click="refresh()">刷新</el-button>
</el-col>
<el-col :xs="24" :sm="4" style="text-align:right;">
<el-button class="filter-item" type="primary" @click="add()">添加</el-button>
</el-col>
</el-row>
</div>
<!-- 列表 -->
<el-table v-loading="loading" :data="datas" :height="height-50" style="width: 100%" @sort-change="sort" @selection-change="select">
<el-table-column type="selection" width="40" />
<el-table-column prop="group_id" label="分组ID" min-width="100" sortable="custom" />
<el-table-column prop="group_name" label="名称" min-width="120" />
<el-table-column prop="group_desc" label="描述" min-width="130" />
<el-table-column prop="group_sort" label="排序" min-width="100" sortable="custom" />
<el-table-column prop="create_time" label="添加时间" min-width="160" sortable="custom" />
<el-table-column prop="update_time" label="修改时间" min-width="160" sortable="custom" />
<el-table-column prop="is_disable" label="是否禁用" min-width="110" sortable="custom" align="center">
<template slot-scope="scope">
<el-switch v-if="scope.row.is_disable" v-model="scope.row.is_disable" :active-value="1" :inactive-value="0" @change="disable([scope.row],0)" />
<el-switch v-else v-model="scope.row.is_disable" :active-value="1" :inactive-value="0" @change="disable([scope.row],1)" />
</template>
</el-table-column>
<el-table-column label="操作" min-width="85" align="right">
<template slot-scope="{ row }">
<el-button size="mini" type="text" @click="edit(row)">修改</el-button>
<el-button size="mini" type="text" @click="dele([row])">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button size="mini" type="text" @click="disable(selection,0)">启用</el-button>
<el-button size="mini" type="text" @click="disable(selection,1)">禁用</el-button>
<el-button size="mini" type="text" @click="dele(selection)">删除</el-button>
</div>
<!-- 分页 -->
<pagination v-show="count > 0" :total="count" :page.sync="query.page" :limit.sync="query.limit" @pagination="list" />
<!-- 添加、修改 -->
<el-dialog :title="dialogTitle" :visible.sync="dialog" :before-close="cancel">
<el-form ref="ref" :rules="rules" :model="model" label-width="100px" class="dialog-body">
<el-form-item label="名称" prop="group_name">
<el-input v-model="model.group_name" placeholder="请输入名称" clearable />
</el-form-item>
<el-form-item label="描述" prop="group_desc">
<el-input v-model="model.group_desc" clearable />
</el-form-item>
<el-form-item label="排序" prop="group_sort">
<el-input v-model="model.group_sort" type="number" />
</el-form-item>
<el-form-item label="是否禁用">
<el-select v-model="model.is_disable" class="filter-item" placeholder="">
<el-option :value="0" label="否" />
<el-option :value="1" label="是" />
</el-select>
</el-form-item>
<el-form-item v-if="model.group_id" label="添加时间" prop="">
<el-col :span="10">
<el-input v-model="model.create_time" clearable placeholder="" disabled />
</el-col>
<el-col class="line" :span="4" style="text-align:center">修改时间</el-col>
<el-col :span="10">
<el-input v-model="model.update_time" clearable placeholder="" disabled />
</el-col>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submit">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination'
import { list, info, add, edit, dele, disable } from '@/api/file/group'
export default {
name: 'FileGroup',
components: { Pagination },
data() {
return {
name: '文件分组',
height: 680,
loading: false,
datas: [],
count: 0,
query: {
page: 1,
limit: 12
},
dialog: false,
dialogTitle: '',
model: {
group_id: '',
group_name: '',
group_desc: '',
group_sort: 50,
is_disable: 0
},
selection: [],
rules: {
group_name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
}
}
},
created() {
this.height = screenHeight()
this.list()
},
methods: {
// 列表
list() {
this.loading = true
list(this.query).then(res => {
this.datas = res.data.list
this.count = res.data.count
this.loading = false
}).catch(() => {
this.loading = false
})
},
// 查询
search() {
this.query.page = 1
this.list()
},
// 刷新
refresh() {
this.query = this.$options.data().query
this.list()
},
// 排序
sort(sort) {
this.query.sort_field = sort.prop
this.query.sort_value = ''
if (sort.order === 'ascending') {
this.query.sort_value = 'asc'
this.list()
}
if (sort.order === 'descending') {
this.query.sort_value = 'desc'
this.list()
}
},
// 添加修改
add() {
this.dialog = true
this.dialogTitle = this.name + '添加'
this.reset()
},
edit(row) {
this.dialog = true
this.dialogTitle = this.name + '修改：' + row.group_id
info({
group_id: row.group_id
}).then(res => {
this.reset(res.data)
})
},
cancel() {
this.dialog = false
this.reset()
},
submit() {
this.$refs['ref'].validate(valid => {
if (valid) {
this.loading = true
if (this.model.group_id) {
edit(this.model).then(res => {
this.list()
this.reset()
this.dialog = false
this.$message.success(res.msg)
}).catch(() => {
this.loading = false
})
} else {
add(this.model).then(res => {
this.list()
this.reset()
this.dialog = false
this.$message.success(res.msg)
}).catch(() => {
this.loading = false
})
}
}
})
},
// 删除
dele(row) {
if (row.length === 0) {
this.selectAlert()
} else {
var title = '删除' + this.name
var message = '确定要删除选中的 <span style="color:red">' + row.length + ' </span> 条' + this.name + '吗？'
if (row.length === 1) {
title = title + '：' + row[0].group_id
message = '确定要删除' + this.name + ' <span style="color:red">' + row[0].group_name + ' </span>吗？'
}
this.$confirm(message, title, { type: 'warning', dangerouslyUseHTMLString: true }).then(() => {
this.loading = true
dele({
group: row
}).then(res => {
this.list()
this.$message.success(res.msg)
}).catch(() => {
this.loading = false
})
}).catch(() => {})
}
},
// 禁用启用
disable(row, is_disable = 0) {
if (row.length === 0) {
this.selectAlert()
} else {
this.loading = true
disable({
group: row,
is_disable: is_disable
}).then(res => {
this.list()
this.$message.success(res.msg)
}).catch(() => {
this.list()
this.loading = false
})
}
},
// 选择
select(selection) {
this.selection = selection
},
selectAlert(message = '') {
this.$alert(message || '请选择需要操作的' + this.name, '提示', { confirmButtonText: '确定', callback: action => {} })
},
// 重置
reset(row) {
if (row) {
this.model = row
} else {
this.model = this.$options.data().model
}
if (this.$refs['ref'] !== undefined) {
this.$refs['ref'].resetFields()
}
}
}
}
</script>
<style scoped>
</style>

425
src/views/file/setting.vue Normal file
View File

@ -0,0 +1,425 @@
<template>
<div class="app-container">
<el-card class="box-card">
<el-row :gutter="0">
<el-col :sm="24" :md="16">
<el-form ref="ref" :model="model" :rules="rules" label-width="150px">
<el-tabs>
<el-tab-pane v-if="checkPermission(['admin/file.Setting/info'])" label="上传设置" lazy>
<el-form-item label="存储方式" prop="storage">
<el-radio-group v-model="model.storage">
<el-radio v-for="(item, index) in storages" :key="index" :label="index">{{ item }}</el-radio>
</el-radio-group>
</el-form-item>
<div v-if="model.storage=='qiniu'">
<el-form-item label="">
<el-card class="box-card">
<div class="text item">
文件将上传到七牛云 Kodo 存储，对象存储 > 空间管理 > 空间设置 > 访问控制, 设置为 公开空间。
<br>
需要配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 GET,POST，允许 Headers 为 *。
</div>
</el-card>
</el-form-item>
<el-form-item label="AccessKey" prop="qiniu_access_key" class="margin-bottom">
<el-input v-model="model.qiniu_access_key" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.qiniu_access_key, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">AccessKey（AK） 在 [ 七牛云 > 个人中心 > 密钥管理 ] 设置和获取</el-col>
</el-form-item>
<el-form-item label="SecretKey" prop="qiniu_secret_key" class="margin-bottom">
<el-input v-model="model.qiniu_secret_key" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.qiniu_secret_key, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">SecretKey（SK） 在 [ 七牛云 > 个人中心 > 密钥管理 ] 设置和获取</el-col>
</el-form-item>
<el-form-item label="空间名称" prop="qiniu_bucket" class="margin-bottom">
<el-input v-model="model.qiniu_bucket" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.qiniu_bucket, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">空间名称 在 [ 七牛云 > 对象存储 > 空间管理] 设置和获取</el-col>
</el-form-item>
<el-form-item label="外链域名" prop="qiniu_domain" class="margin-bottom">
<el-input v-model="model.qiniu_domain" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.qiniu_domain, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">外链域名 在 [ 七牛云 > 对象存储 > 空间管理 > 域名设置 ] 设置和获取</el-col>
</el-form-item>
</div>
<div v-else-if="model.storage=='aliyun'">
<el-form-item label="">
<el-card class="box-card">
<div class="text item">
文件将上传到阿里云 OSS 存储，需要配置 OSS 公开访问及跨域策略。
<br>
需要配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 GET,POST，允许 Headers 为 *。
</div>
</el-card>
</el-form-item>
<el-form-item label="AccessKey ID" prop="aliyun_access_key_id" class="margin-bottom">
<el-input v-model="model.aliyun_access_key_id" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun_access_key_id, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">AccessKey ID 在 [ 阿里云 > 个人中心 > AccessKey 管理 ] 设置和获取</el-col>
</el-form-item>
<el-form-item label="AccessKey Secret" prop="aliyun_access_key_secret" class="margin-bottom">
<el-input v-model="model.aliyun_access_key_secret" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun_access_key_secret, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">AccessKey Secret 在 [ 阿里云 > 个人中心 > AccessKey 管理 ] 设置和获取</el-col>
</el-form-item>
<el-form-item label="Bucket名称" prop="aliyun_bucket" class="margin-bottom">
<el-input v-model="model.aliyun_bucket" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun_bucket, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">Bucket 名称 在 [ 阿里云 > 对象存储 > Bucket 列表 ] 获取</el-col>
</el-form-item>
<el-form-item label="Endpoint地域节点" prop="aliyun_endpoint" class="margin-bottom">
<el-input v-model="model.aliyun_endpoint" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun_endpoint, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">Endpoint（地域节点） 在 [ 阿里云 > 对象存储 > Bucket 列表 > Bucket 概览 ] 获取</el-col>
</el-form-item>
<el-form-item label="Bucket域名" prop="aliyun_bucket_domain" class="margin-bottom">
<el-input v-model="model.aliyun_bucket_domain" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.aliyun_bucket_domain, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">Bucket 域名 在 [ 阿里云 > 对象存储 > Bucket 列表 > Bucket 概览 ] 获取</el-col>
</el-form-item>
</div>
<div v-else-if="model.storage=='tencent'">
<el-form-item label="">
<el-card class="box-card">
<div class="text item">
文件将上传到腾讯云 COS 存储，需要配置 COS 公有读私有写访问权限及跨域策略。
<br>
需要配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 GET,POST，允许 Headers 为 *。
</div>
</el-card>
</el-form-item>
<el-form-item label="SecretId" prop="tencent_secret_id" class="margin-bottom">
<el-input v-model="model.tencent_secret_id" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.tencent_secret_id, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">SecretId 在 [ 腾讯云 > 个人中心 > 访问管理 > API密钥 ] 设置和获取</el-col>
</el-form-item>
<el-form-item label="SecretKey" prop="tencent_secret_key" class="margin-bottom">
<el-input v-model="model.tencent_secret_key" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.tencent_secret_key, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">SecretKey 在 [ 腾讯云 > 个人中心 > 访问管理 > API密钥 ] 设置和获取</el-col>
</el-form-item>
<el-form-item label="存储桶名称" prop="tencent_bucket" class="margin-bottom">
<el-input v-model="model.tencent_bucket" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.tencent_bucket, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">存储桶名称 在 [ 腾讯云 > 对象存储 > 存储桶列表 ] 获取</el-col>
</el-form-item>
<el-form-item label="所属地域" prop="tencent_region" class="margin-bottom">
<el-input v-model="model.tencent_region" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.tencent_region, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">所属地域 在 [ 腾讯云 > 对象存储 > 存储桶列表 ] 获取。如：ap-guangzhou</el-col>
</el-form-item>
<el-form-item label="访问域名" prop="tencent_domain" class="margin-bottom">
<el-input v-model="model.tencent_domain" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.tencent_domain, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">访问域名 在 [ 腾讯云 > 对象存储 > 存储桶列表 > 概览 ] 获取</el-col>
</el-form-item>
</div>
<div v-else-if="model.storage=='baidu'">
<el-form-item label="">
<el-card class="box-card">
<div class="text item">
文件将上传到百度云 BOS 存储，对象存储 > Bucket列表 > 配置设置 > Bucket权限配置, 设置为 公共 *。
<br>
需要配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 GET,POST，允许 Headers 为 *。
</div>
</el-card>
</el-form-item>
<el-form-item label="Access Key" prop="baidu_access_key" class="margin-bottom">
<el-input v-model="model.baidu_access_key" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.baidu_access_key, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">Access Key 在 [ 百度云 > 个人中心 > 安全认证 > Access Key ] 设置和获取</el-col>
</el-form-item>
<el-form-item label="Secret Key" prop="baidu_secret_key" class="margin-bottom">
<el-input v-model="model.baidu_secret_key" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.baidu_secret_key, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">Secret Key 在 [ 百度云 > 个人中心 > 安全认证 > Access Key ] 设置和获取</el-col>
</el-form-item>
<el-form-item label="Bucket名称" prop="baidu_bucket" class="margin-bottom">
<el-input v-model="model.baidu_bucket" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.baidu_bucket, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">Bucket 名称 在 [ 百度云 > 对象存储 > Bucket 列表 ] 获取。如：yyladmin</el-col>
</el-form-item>
<el-form-item label="官方域名" prop="baidu_domain" class="margin-bottom">
<el-input v-model="model.baidu_domain" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.baidu_domain, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">官方域名 在 [ 百度云 > 对象存储 > 发布管理 ] 获取。如：yyladmin.gz.bcebos.com</el-col>
</el-form-item>
<el-form-item label="所属地域" prop="baidu_endpoint" class="margin-bottom">
<el-input v-model="model.baidu_endpoint" clearable>
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.baidu_endpoint, $event)" />
</el-input>
</el-form-item>
<el-form-item label="">
<el-col class="line" :span="24">所属地域：官方域名去掉 Bucket 名称，如：gz.bcebos.com</el-col>
</el-form-item>
</div>
<div v-else>
<el-form-item label="">
<el-card class="box-card">
<div class="text item">
文件将存储在本地服务器，默认保存在 public/storage 目录，文件以 hash 命名。
<br>
文件存储的目录需要有读写权限（777），有足够的存储空间。
</div>
</el-card>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/file.Setting/info'])" label="上传限制" lazy>
<el-form-item label="图片类型" prop="image_ext" class="margin-bottom">
<el-col :span="11">
<el-input v-model="model.image_ext" clearable />
</el-col>
<el-col class="line" :span="13">
允许上传的图片后缀，逗号,隔开，为空则不限制
</el-col>
</el-form-item>
<el-form-item label="图片大小" prop="image_size">
<el-col :span="11">
<el-input v-model="model.image_size" clearable>
<template slot="append">MB</template>
</el-input>
</el-col>
<el-col class="line" :span="13">
允许上传的图片大小，单位 MB，为0则不限制
</el-col>
</el-form-item>
<el-form-item label="视频类型" prop="video_ext" class="margin-bottom">
<el-col :span="11">
<el-input v-model="model.video_ext" clearable />
</el-col>
<el-col class="line" :span="13">
允许上传的视频后缀，逗号,隔开，为空则不限制
</el-col>
</el-form-item>
<el-form-item label="视频大小" prop="video_size">
<el-col :span="11">
<el-input v-model="model.video_size" clearable>
<template slot="append">MB</template>
</el-input>
</el-col>
<el-col class="line" :span="13">
允许上传的视频大小，单位 MB，为0则不限制
</el-col>
</el-form-item>
<el-form-item label="音频类型" prop="audio_ext" class="margin-bottom">
<el-col :span="11">
<el-input v-model="model.audio_ext" clearable />
</el-col>
<el-col class="line" :span="13">
允许上传的音频后缀，逗号,隔开，为空则不限制
</el-col>
</el-form-item>
<el-form-item label="音频大小" prop="audio_size">
<el-col :span="11">
<el-input v-model="model.audio_size" clearable>
<template slot="append">MB</template>
</el-input>
</el-col>
<el-col class="line" :span="13">
允许上传的音频大小，单位 MB，为0则不限制
</el-col>
</el-form-item>
<el-form-item label="文档类型" prop="word_ext" class="margin-bottom">
<el-col :span="11">
<el-input v-model="model.word_ext" clearable />
</el-col>
<el-col class="line" :span="13">
允许上传的文档后缀，逗号,隔开，为空则不限制
</el-col>
</el-form-item>
<el-form-item label="文档大小" prop="word_size">
<el-col :span="11">
<el-input v-model="model.word_size" clearable>
<template slot="append">MB</template>
</el-input>
</el-col>
<el-col class="line" :span="13">
允许上传的文档大小，单位 MB，为0则不限制
</el-col>
</el-form-item>
<el-form-item label="其它类型" prop="other_ext" class="margin-bottom">
<el-col :span="11">
<el-input v-model="model.other_ext" clearable />
</el-col>
<el-col class="line" :span="13">
允许上传的其它文件后缀，逗号,隔开，为空则不限制
</el-col>
</el-form-item>
<el-form-item label="其它大小" prop="other_size">
<el-col :span="11">
<el-input v-model="model.other_size" clearable>
<template slot="append">MB</template>
</el-input>
</el-col>
<el-col class="line" :span="13">
允许上传的其它文件大小，单位 MB，为0则不限制
</el-col>
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item>
<el-button :loading="loading" @click="refresh()">刷新</el-button>
<el-button :loading="loading" type="primary" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import clip from '@/utils/clipboard'
import { info, edit } from '@/api/file/setting'
export default {
name: 'FileSetting',
components: { },
data() {
return {
loading: false,
storages: [],
model: {
setting_id: '',
storage: 'local',
qiniu_access_key: '',
qiniu_secret_key: '',
qiniu_bucket: '',
qiniu_domain: '',
image_ext: '',
image_size: 0,
video_ext: '',
video_size: 0,
audio_ext: '',
audio_size: 0,
word_ext: '',
word_size: 0,
other_ext: '',
other_size: 0
},
rules: {
appid: [{ required: true, message: '请输入appid', trigger: 'blur' }],
appsecret: [{ required: true, message: '请输入appsecret', trigger: 'blur' }]
}
}
},
created() {
this.info()
},
methods: {
checkPermission,
// 信息
info() {
info().then((res) => {
this.storages = res.data.storage
this.model = res.data.setting
})
},
// 刷新
refresh() {
this.loading = true
info()
.then((res) => {
this.storages = res.data.storage
this.model = res.data.setting
this.loading = false
this.$message.success(res.msg)
})
.catch(() => {
this.loading = false
})
},
// 提交
submit() {
this.$refs['ref'].validate((valid) => {
if (valid) {
this.loading = true
edit(this.model)
.then((res) => {
this.info()
this.loading = false
this.$message.success(res.msg)
})
.catch(() => {
this.loading = false
})
}
})
},
// 复制
copy(text, event) {
if (text) {
clip(text, event)
} else {
this.$message.error('内容为空')
}
}
}
}
</script>
<style scoped>
.margin-bottom {
margin-bottom: 5px;
}
</style>

113
src/views/index/components/Cms.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div>
<el-card v-loading="loading" class="box-card">
<el-row :gutter="0">
<el-col :sm="24">
<div id="echartCms" style="height:500px; width:100%" />
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
// ECharts
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { TitleComponent, LegendComponent, TooltipComponent } from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([PieChart, TitleComponent, LegendComponent, TooltipComponent, CanvasRenderer])
import { cms } from '@/api/index'
export default {
name: 'IndexCms',
components: { },
data() {
return {
loading: false,
date_pie: {
count: 0,
date: []
}
}
},
computed: {},
created() {
this.cms()
},
mounted() {},
methods: {
cms() {
this.loading = true
cms().then(res => {
this.echartCms(res.data)
this.loading = false
}).catch(() => {
this.loading = false
})
},
echartCms(data) {
var echart = echarts.init(document.getElementById('echartCms'))
var option = {
title: {
text: '内容',
subtext: '总计：' + data.count,
left: 'center'
},
legend: {
top: 'bottom'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '内容类型',
type: 'pie',
radius: [50, '60%'],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: data.data
}
]
}
echart.setOption(option)
}
}
}
</script>
<style scoped>
.box-card {
text-align: center;
}
.box-card .text {
color: #666;
font-size: 20px;
line-height: 32px;
font-weight: 700;
text-align: center;
}
.el-row {
margin-bottom: 10px;
}
.color-tot {
color: #1890ff;
}
.color-new {
color: #1890ff;
border-right: 1px solid #e6ebf5;
}
.color-act {
color: #13ce66;
}
</style>

113
src/views/index/components/File.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div>
<el-card v-loading="loading" class="box-card">
<el-row :gutter="0">
<el-col :sm="24">
<div id="echartFile" style="height:500px; width:100%" />
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
// ECharts
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { TitleComponent, LegendComponent, TooltipComponent } from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([PieChart, TitleComponent, LegendComponent, TooltipComponent, CanvasRenderer])
import { file } from '@/api/index'
export default {
name: 'IndexFile',
components: { },
data() {
return {
loading: false,
date_pie: {
count: 0,
date: []
}
}
},
computed: {},
created() {
this.file()
},
mounted() {},
methods: {
file() {
this.loading = true
file().then(res => {
this.echartFile(res.data)
this.loading = false
}).catch(() => {
this.loading = false
})
},
echartFile(data) {
var echart = echarts.init(document.getElementById('echartFile'))
var option = {
title: {
text: '文件',
subtext: '总计：' + data.count,
left: 'center'
},
legend: {
top: 'bottom'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '文件类型',
type: 'pie',
radius: [50, '60%'],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: data.data
}
]
}
echart.setOption(option)
}
}
}
</script>
<style scoped>
.box-card {
text-align: center;
}
.box-card .text {
color: #666;
font-size: 20px;
line-height: 32px;
font-weight: 700;
text-align: center;
}
.el-row {
margin-bottom: 10px;
}
.color-tot {
color: #1890ff;
}
.color-new {
color: #1890ff;
border-right: 1px solid #e6ebf5;
}
.color-act {
color: #13ce66;
}
</style>

23
src/views/admin/index/components/Member.vue → src/views/index/components/Member.vue
View File

@ -135,12 +135,10 @@
</el-row>
<el-row :gutter="0">
<el-col :sm="24">
<div id="echartDate" style="height:500px" />
<div id="echartDate" style="height:450px" />
</el-col>
</el-row>
</el-card>
<back-to-top transition-name="fade" />
</div>
</template>
@ -151,22 +149,19 @@ import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { LineChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { LegendComponent, TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'
import { TitleComponent, LegendComponent, TooltipComponent, GridComponent } from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([LegendComponent, TitleComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer])
echarts.use([LineChart, TitleComponent, LegendComponent, TooltipComponent, GridComponent, CanvasRenderer])
import screenHeight from '@/utils/screen-height'
import BackToTop from '@/components/BackToTop'
import { member } from '@/api/admin/index'
import { member } from '@/api/index'
export default {
name: 'Member',
components: { BackToTop },
name: 'IndexMember',
components: { },
data() {
return {
height: 680,
loading: false,
number: {
total: '-',
@ -208,7 +203,6 @@ export default {
},
computed: {},
created() {
this.height = screenHeight(180)
this.member()
},
mounted() {},
@ -245,7 +239,6 @@ export default {
title: {
text: ''
},
color: ['#1890ff', '#13ce66'],
tooltip: {
trigger: 'axis'
},
@ -305,10 +298,10 @@ export default {
color: #1890ff;
}
.color-new {
color: #1890ff;
color: #5470c6;
border-right: 1px solid #e6ebf5;
}
.color-act {
color: #13ce66;
color: #91cc75;
}
</style>

38
src/views/index/index.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div class="app-container">
<el-row :gutter="0">
<el-col :span="24">
<member v-if="checkPermission(['admin/Index/member'])" />
</el-col>
</el-row>
<el-row :gutter="0">
<el-col :span="12">
<cms v-if="checkPermission(['admin/Index/cms'])" />
</el-col>
<el-col :span="12">
<file v-if="checkPermission(['admin/Index/file'])" />
</el-col>
</el-row>
<back-to-top transition-name="fade" />
</div>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import BackToTop from '@/components/BackToTop'
import Member from './components/Member'
import File from './components/File'
import Cms from './components/Cms'
export default {
name: 'Dashboard',
components: { BackToTop, Member, File, Cms },
data() {
return {}
},
created() { },
methods: {
checkPermission
}
}
</script>

44
src/views/member/member.vue
View File

@ -37,7 +37,7 @@
<!-- 列表 -->
<el-table v-loading="loading" :data="data" :height="height" style="width:100%" @sort-change="sort">
<el-table-column prop="member_id" label="会员ID" min-width="100" sortable="custom" fixed="left" />
<el-table-column prop="avatar" label="头像" min-width="80" align="center">
<el-table-column prop="avatar_id" label="头像" min-width="80" align="center">
<template slot-scope="scope">
<el-image
style="width:30px; height:30px; border-radius:3px;"
@ -90,16 +90,8 @@
</el-image>
</el-col>
<el-col :span="16">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传头像</el-button>
</el-upload>
<el-button size="mini" @click="fileUpload()">上传头像</el-button>
<br>
<span>jpg、png图片，小于100kb，宽高1:1</span>
</el-col>
</el-form-item>
@ -169,19 +161,22 @@
<el-button type="primary" @click="pwdSubmit">提交</el-button>
</div>
</el-dialog>
<el-dialog title="文件管理" :visible.sync="fileDialog" width="80%" top="1vh">
<file-manage file-type="image" @file-lists="fileLists" />
</el-dialog>
</div>
</template>
<script>
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination'
import { getAdminToken } from '@/utils/auth'
import FileManage from '@/components/FileManage'
import { list as regionList } from '@/api/region'
import { list, info, add, edit, dele, pwd, avatar, disable } from '@/api/member'
import { list, info, add, edit, dele, pwd, disable } from '@/api/member'
export default {
name: 'Member',
components: { Pagination },
components: { Pagination, FileManage },
data() {
return {
height: 680,
@ -204,7 +199,7 @@ export default {
phone: '',
email: '',
region_id: '',
avatar: '',
avatar_id: 0,
avatar_url: '',
remark: '',
sort: 250
@ -220,8 +215,7 @@ export default {
value: 'region_id',
label: 'region_name'
},
uploadAction: avatar(),
uploadHeaders: { AdminToken: getAdminToken() },
fileDialog: false,
pwdDialog: false,
pwdDialogTitle: '',
pwdRules: {
@ -347,17 +341,13 @@ export default {
}
},
// 上传头像
uploadSuccess(res) {
if (res.code === 200) {
this.model.avatar = res.data.path
this.model.avatar_url = res.data.url
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
fileUpload() {
this.fileDialog = true
},
uploadError(res) {
this.$message.error(res.msg || '上传出错')
fileLists(filelists) {
this.fileDialog = false
this.model.avatar_id = filelists[0]['file_id']
this.model.avatar_url = filelists[0]['file_url']
},
// 是否禁用
disable(row) {

8
src/views/setting/base.vue
View File

@ -2,16 +2,16 @@
<div class="app-container">
<el-tabs>
<el-tab-pane v-if="checkPermission(['admin/Setting/tokenInfo'])" label="Token设置" lazy>
<Token />
<token />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/Setting/captchaInfo'])" label="验证码设置" lazy>
<Captcha />
<captcha />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/Setting/logInfo'])" label="日志设置" lazy>
<Log />
<log />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/Setting/apiInfo'])" label="接口设置" lazy>
<Api />
<api />
</el-tab-pane>
</el-tabs>
</div>

2
src/views/setting/components/Api.vue
View File

@ -1,7 +1,7 @@
<template>
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="16">
<el-form ref="ref" :model="model" :rules="rules" label-width="120px">
<el-form-item label="" prop="">
<span>次数/时间；3/1：3次1秒；次数设置为 0 则不限制。</span>

2
src/views/setting/components/Captcha.vue
View File

@ -1,7 +1,7 @@
<template>
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="16">
<el-form ref="ref" :model="model" :rules="rules" label-width="120px">
<el-form-item label="注册验证码" prop="captcha_register">
<el-switch v-model="model.captcha_register" :active-value="1" :inactive-value="0" />

2
src/views/setting/components/Log.vue
View File

@ -1,7 +1,7 @@
<template>
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="16">
<el-form ref="ref" :model="model" :rules="rules" label-width="120px">
<el-form-item label="" prop="">
<span>开启后，会记录前台会员日志。</span>

2
src/views/setting/components/Token.vue
View File

@ -1,7 +1,7 @@
<template>
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="16">
<el-form ref="ref" :model="model" :rules="rules" label-width="120px">
<el-form-item label="Token名称" prop="token_name">
<el-input v-model="model.token_name" type="text" style="width:90%" />

132
src/views/setting/components/WechatMini.vue
View File

@ -1,67 +1,64 @@
<template>
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-form ref="ref" :model="model" :rules="rules" label-width="130px">
<el-form-item label="名称" prop="name">
<el-input v-model="model.name">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.name, $event)" />
</el-input>
</el-form-item>
<el-form-item label="原始ID" prop="origin_id">
<el-input v-model="model.origin_id">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.origin_id, $event)" />
</el-input>
</el-form-item>
<el-form-item label="二维码" prop="qrcode_url">
<el-col :span="10">
<el-image style="width:100px; height:100px;" :src="model.qrcode_url" :preview-src-list="[model.qrcode_url]" title="点击查看大图">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-col>
<el-col :span="14">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传二维码</el-button>
</el-upload>
<span>jpg、png图片，小于200kb，宽高1:1</span>
</el-col>
</el-form-item>
<el-form-item label="AppID" prop="appid">
<el-input v-model="model.appid">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.appid, $event)" />
</el-input>
</el-form-item>
<el-form-item label="AppSecret" prop="appsecret">
<el-input v-model="model.appsecret">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.appsecret, $event)" />
</el-input>
</el-form-item>
<el-form-item>
<el-button :loading="loading" @click="refresh()">刷新</el-button>
<el-button :loading="loading" type="primary" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
<div>
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="16">
<el-form ref="ref" :model="model" :rules="rules" label-width="130px">
<el-form-item label="名称" prop="name">
<el-input v-model="model.name">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.name, $event)" />
</el-input>
</el-form-item>
<el-form-item label="原始ID" prop="origin_id">
<el-input v-model="model.origin_id">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.origin_id, $event)" />
</el-input>
</el-form-item>
<el-form-item label="二维码" prop="qrcode_url">
<el-col :span="10">
<el-image style="width:100px; height:100px;" :src="model.qrcode_url" :preview-src-list="[model.qrcode_url]" title="点击查看大图">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-col>
<el-col :span="14">
<el-button size="mini" @click="fileUpload()">上传图片</el-button>
<br>
<span>jpg、png图片，小于200kb，宽高1:1</span>
</el-col>
</el-form-item>
<el-form-item label="AppID" prop="appid">
<el-input v-model="model.appid">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.appid, $event)" />
</el-input>
</el-form-item>
<el-form-item label="AppSecret" prop="appsecret">
<el-input v-model="model.appsecret">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.appsecret, $event)" />
</el-input>
</el-form-item>
<el-form-item>
<el-button :loading="loading" @click="refresh()">刷新</el-button>
<el-button :loading="loading" type="primary" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
<el-dialog title="文件管理" :visible.sync="fileDialog" width="80%" top="1vh">
<file-manage file-type="image" @file-lists="fileLists" />
</el-dialog>
</div>
</template>
<script>
import clip from '@/utils/clipboard'
import { miniInfo, miniEdit, qrcode } from '@/api/setting-wechat'
import { getAdminToken } from '@/utils/auth'
import FileManage from '@/components/FileManage'
import { miniInfo, miniEdit } from '@/api/setting-wechat'
export default {
components: {},
components: { FileManage },
data() {
return {
loading: false,
@ -70,11 +67,10 @@ export default {
origin_id: '',
appid: '',
appsecret: '',
qrcode: '',
qrcode_id: 0,
qrcode_url: ''
},
uploadAction: qrcode(),
uploadHeaders: { AdminToken: getAdminToken() },
fileDialog: false,
rules: {
appid: [{ required: true, message: '请输入appid', trigger: 'blur' }],
appsecret: [{ required: true, message: '请输入appsecret', trigger: 'blur' }]
@ -122,17 +118,13 @@ export default {
})
},
// 上传二维码
uploadSuccess(res, file) {
if (res.code === 200) {
this.model.qrcode_url = res.data.url
this.model.qrcode = res.data.path
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
fileUpload() {
this.fileDialog = true
},
uploadError(res) {
this.$message.error(res.msg || '上传出错')
fileLists(filelists) {
this.fileDialog = false
this.model.qrcode_id = filelists[0]['file_id']
this.model.qrcode_url = filelists[0]['file_url']
},
// 复制
copy(text, event) {

172
src/views/setting/components/WechatOffi.vue
View File

@ -1,87 +1,84 @@
<template>
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-form ref="ref" :model="model" :rules="rules" label-width="130px">
<el-form-item label="名称" prop="name">
<el-input v-model="model.name">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.name, $event)" />
</el-input>
</el-form-item>
<el-form-item label="原始ID" prop="origin_id">
<el-input v-model="model.origin_id">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.origin_id, $event)" />
</el-input>
</el-form-item>
<el-form-item label="二维码" prop="qrcode_url">
<el-col :span="10">
<el-image style="width:100px; height:100px;" :src="model.qrcode_url" :preview-src-list="[model.qrcode_url]" title="点击查看大图">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-col>
<el-col :span="14">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button size="mini">上传二维码</el-button>
</el-upload>
<span>jpg、png图片，小于200kb，宽高1:1</span>
</el-col>
</el-form-item>
<el-form-item label="AppID" prop="appid">
<el-input v-model="model.appid">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.appid, $event)" />
</el-input>
</el-form-item>
<el-form-item label="AppSecret" prop="appsecret">
<el-input v-model="model.appsecret">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.appsecret, $event)" />
</el-input>
</el-form-item>
<el-form-item label="服务器地址(URL)" prop="url">
<el-input v-model="model.url">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.url, $event)" />
</el-input>
</el-form-item>
<el-form-item label="令牌(Token)" prop="token">
<el-input v-model="model.token">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.token, $event)" />
</el-input>
</el-form-item>
<el-form-item label="消息加解密密钥" prop="encoding_aes_key">
<el-input v-model="model.encoding_aes_key">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.encoding_aes_key, $event)" />
</el-input>
</el-form-item>
<el-form-item label="消息加解密方式" prop="encoding_aes_type">
<el-radio-group v-model="model.encoding_aes_type">
<el-radio v-for="item in encoding_aes_types" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button :loading="loading" @click="refresh()">刷新</el-button>
<el-button :loading="loading" type="primary" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
<div>
<el-card class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="16">
<el-form ref="ref" :model="model" :rules="rules" label-width="130px">
<el-form-item label="名称" prop="name">
<el-input v-model="model.name">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.name, $event)" />
</el-input>
</el-form-item>
<el-form-item label="原始ID" prop="origin_id">
<el-input v-model="model.origin_id">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.origin_id, $event)" />
</el-input>
</el-form-item>
<el-form-item label="二维码" prop="qrcode_url">
<el-col :span="10">
<el-image style="width:100px; height:100px;" :src="model.qrcode_url" :preview-src-list="[model.qrcode_url]" title="点击查看大图">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-col>
<el-col :span="14">
<el-button size="mini" @click="fileUpload()">上传图片</el-button>
<br>
<span>jpg、png图片，小于200kb，宽高1:1</span>
</el-col>
</el-form-item>
<el-form-item label="AppID" prop="appid">
<el-input v-model="model.appid">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.appid, $event)" />
</el-input>
</el-form-item>
<el-form-item label="AppSecret" prop="appsecret">
<el-input v-model="model.appsecret">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.appsecret, $event)" />
</el-input>
</el-form-item>
<el-form-item label="服务器地址(URL)" prop="server_url">
<el-input v-model="model.server_url">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.server_url, $event)" />
</el-input>
</el-form-item>
<el-form-item label="令牌(Token)" prop="token">
<el-input v-model="model.token">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.token, $event)" />
</el-input>
</el-form-item>
<el-form-item label="消息加解密密钥" prop="encoding_aes_key">
<el-input v-model="model.encoding_aes_key">
<el-button slot="append" icon="el-icon-document-copy" @click="copy(model.encoding_aes_key, $event)" />
</el-input>
</el-form-item>
<el-form-item label="消息加解密方式" prop="encoding_aes_type">
<el-radio-group v-model="model.encoding_aes_type">
<el-radio v-for="item in encoding_aes_types" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button :loading="loading" @click="refresh()">刷新</el-button>
<el-button :loading="loading" type="primary" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
<el-dialog title="文件管理" :visible.sync="fileDialog" width="80%" top="1vh">
<file-manage file-type="image" @file-lists="fileLists" />
</el-dialog>
</div>
</template>
<script>
import clip from '@/utils/clipboard'
import { offiInfo, offiEdit, qrcode } from '@/api/setting-wechat'
import { getAdminToken } from '@/utils/auth'
import FileManage from '@/components/FileManage'
import { offiInfo, offiEdit } from '@/api/setting-wechat'
export default {
components: {},
components: { FileManage },
data() {
return {
loading: false,
@ -96,14 +93,13 @@ export default {
qrcode: '',
appid: '',
appsecret: '',
url: '',
server_url: '',
token: '',
encoding_aes_key: '',
encoding_aes_type: 1,
qrcode_url: ''
},
uploadAction: qrcode(),
uploadHeaders: { AdminToken: getAdminToken() },
fileDialog: false,
rules: {
appid: [{ required: true, message: '请输入appid', trigger: 'blur' }],
appsecret: [{ required: true, message: '请输入appsecret', trigger: 'blur' }]
@ -151,17 +147,13 @@ export default {
})
},
// 上传二维码
uploadSuccess(res) {
if (res.code === 200) {
this.model.qrcode_url = res.data.url
this.model.qrcode = res.data.path
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
fileUpload() {
this.fileDialog = true
},
uploadError(res) {
this.$message.error(res.msg || '上传出错')
fileLists(filelists) {
this.fileDialog = false
this.model.qrcode_id = filelists[0]['file_id']
this.model.qrcode_url = filelists[0]['file_url']
},
// 复制
copy(text, event) {

4
src/views/setting/wechat.vue
View File

@ -2,10 +2,10 @@
<div class="app-container">
<el-tabs>
<el-tab-pane v-if="checkPermission(['admin/SettingWechat/offiInfo'])" label="公众号" lazy>
<WechatOffi class="dialog-body" :style="{height:height+50+'px'}" />
<wechat-offi class="dialog-body" :style="{height:height+50+'px'}" />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/SettingWechat/miniInfo'])" label="小程序" lazy>
<WechatMini />
<wechat-mini />
</el-tab-pane>
</el-tabs>
</div>