Commit dbabf8ee by Lyan

后台ui更改

parent 53901a16
......@@ -29,7 +29,9 @@ module.exports = {
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
: config.dev.assetsPublicPath,
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
......
......@@ -23,7 +23,8 @@ module.exports = {
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
// host: 'localhost', // can be overwritten by process.env.HOST
host: '127.0.0.1',
port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
......
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>gs1后台管理</title>
<title>中国物品编码中心管理系统</title>
<% if (process.env.NODE_ENV === 'production') { %>
<!-- 生产环境 -->
<script>document.write('<script src="./config/index.js?t=' + new Date().getTime() + '"><\/script>');</script>
......
......@@ -122,7 +122,7 @@ img {
right: 0;
left: 0;
z-index: 1030;
height: 50px;
height: 65px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
background-color: $navbar--background-color;
......@@ -134,12 +134,15 @@ img {
> .el-menu-item,
> .el-submenu > .el-submenu__title {
color: #fff;
background: rgba(0, 27, 58, 1);
&:focus,
&:hover {
color: #fff;
background-color: mix(#000, $navbar--background-color, 15%);
background-color: rgba(0, 27, 58, 1);
// background-color: mix(#000, $navbar--background-color, 15%);
}
}
> .el-menu-item.is-active,
> .el-submenu.is-active > .el-submenu__title {
border-bottom-color: mix(#fff, $navbar--background-color, 85%);
......@@ -151,7 +154,8 @@ img {
}
}
.el-menu--popup-bottom-start {
background-color: $navbar--background-color;
background-color: rgba(0, 27, 58, 1);
// background-color: $navbar--background-color;
}
}
......@@ -159,16 +163,16 @@ img {
position: relative;
float: left;
width: 230px;
height: 50px;
height: 65px;
overflow: hidden;
}
&__brand {
display: table-cell;
vertical-align: middle;
width: 230px;
height: 50px;
height: 65px;
margin: 0;
line-height: 50px;
line-height: 65px;
font-size: 20px;
text-align: center;
text-transform: uppercase;
......@@ -228,8 +232,8 @@ img {
}
.el-menu-item,
.el-submenu > .el-submenu__title {
height: 50px;
line-height: 50px;
height: 65px;
line-height: 65px;
}
.el-submenu > .el-menu {
top: 55px;
......@@ -249,38 +253,75 @@ img {
------------------------------ */
.site-sidebar {
position: fixed;
top: 50px;
top: 65px;
left: 0;
bottom: 0;
z-index: 1020;
width: 230px;
overflow: hidden;
&--dark,
&--dark-popper {
background-color: $sidebar--background-color-dark;
.site-sidebar__menu.el-menu,
> .el-menu--popup {
background-color: $sidebar--background-color-dark;
// background-color: $sidebar--background-color-dark;
background-color: rgba(0, 0, 0, .04);
.el-menu-item,
.el-submenu > .el-submenu__title {
color: $sidebar--color-text-dark;
&:focus,
&:hover {
color: mix(#fff, $sidebar--color-text-dark, 50%);
background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
// color: mix(#fff, $sidebar--color-text-dark, 50%);
color: #fff;
// background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
background-color: rgba(0, 22, 44, 1);
}
}
.el-menu{
// background-color: $sidebar--background-color-dark;
background-color: rgba(0, 22, 44, 1);
}
.el-menu-item{
height: 40px;
line-height: 40px;
}
.el-menu-item.is-active{
background-color:rgba(24, 144, 255, 1);
color: #fff;
}
.el-menu,
.el-submenu.is-opened {
background-color: mix(#000, $sidebar--background-color-dark, 15%);
// background-color: rgba(0, 40, 77, 1);
// background-color: mix(#000, $sidebar--background-color-dark, 15%);
}
.el-submenu .el-submenu__title,.el-submenu.is-opened>.el-submenu__title{
&:focus,
&:hover {
// color: mix(#fff, $sidebar--color-text-dark, 50%);
color: #fff;
background-color:$sidebar--background-color-dark;
}
}
.el-submenu__title{
&:focus,
&:hover {
>i{
color: #fff;
}
}
.el-menu-item.is-active,
}
.el-submenu.is-active > .el-submenu__title {
color: mix(#fff, $sidebar--color-text-dark, 80%);
// background-color: rgba(0, 40, 77, 1);
background-color: rgba(255, 255, 255, 0);
}
}
}
&__inner {
position: relative;
z-index: 1;
......@@ -307,22 +348,22 @@ img {
------------------------------ */
.site-content {
position: relative;
padding: 15px;
// padding: 15px;
&__wrapper {
position: relative;
padding-top: 50px;
padding-top: 65px;
margin-left: 230px;
min-height: 100%;
background: $content--background-color;
}
&--tabs {
padding: 55px 0 0;
padding: 45px 0 0;
}
> .el-tabs {
> .el-tabs__header {
position: fixed;
top: 50px;
top: 65px;
left: 230px;
right: 0;
z-index: 930;
......@@ -335,12 +376,30 @@ img {
display: none;
}
}
.el-tabs__nav{
>.is-active{
background-color:#fff
}
}
.el-tabs__active-bar{
height: 0;
}
.el-tabs__item{
background-color: rgba(242, 242, 242, 0.498039215686275);
padding: 0 15px;
border-right: 1px solid rgba(235, 235, 235, 1);
}
.el-tabs__item:first-child{
border-left: 1px solid rgba(235, 235, 235, 1);
}
}
> .el-tabs__content {
padding: 0 15px 15px;
// padding: 0 15px 15px;
background: #f1f4f5;
> .site-tabs__tools {
position: fixed;
top: 50px;
top: 65px;
right: 0;
z-index: 931;
height: 40px;
......@@ -353,6 +412,176 @@ img {
margin-left: 0;
}
}
>.el-tab-pane{
>.el-card{
background:none;
}
.el-card__body{
padding: 0;
>.mod-config{
>.title{
width: 100%;
height: 60px;
font-size: 20px;
color: rgba(0, 0, 0, 0.847058823529412);
line-height: 60px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
font-weight: 650;
font-style: normal;
padding-left: 33px;
background-color: #fff;
}
>.el-form,>.table-list,>.add-btn,.form-list,.sub-btn{
width: 96%;
margin-left: 2%;
background-color: #fff;
}
.form-list{
margin-top: 20px;
padding: 40px 0 100px 20%;
color: rgba(0, 0, 0, 0.847058823529412);
.base-info{
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #444444;
margin-bottom: 30px;
}
.setdes{
.el-form-item__content{
position: relative;
>span{
position: absolute;
right: -160px;
font-family: 'PingFangSC-Regular', 'PingFang SC';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #CCCCCC;
}
}
}
.el-form-item__content{
width: 50%;
.el-select,.el-date-editor{
width: 100%;
}
}
.el-form-item{
margin-bottom:32px;
}
.avatar-uploader>.el-upload {
border: 2px dashed #666666;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 40px;
color: #666666;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
}
.avatar {
width: 64px;
height: 64px;
display: block;
}
}
.sub-btn{
margin-top: 20px;
height: 56px;
text-align: right;
padding: 10px;
margin-bottom: 50px;
}
}
>.mod-list-form{
.el-form-item__label{
width: 90px;
font-size: 12px;
}
>.el-form{
position: relative;
margin-top: 25px;
padding-top: 25px;
border-bottom: 1px solid rgba(242, 242, 242, 1);
.el-input,.el-date-editor{
width: 240px;
}
.seach-btn{
position: absolute;
top: 25px;
right: 30px;
width: 65px;
font-size: 14px;
}
}
>.add-btn{
height: 72px;
padding: 20px 2%;
.el-button{
width: 105px;
// height: 32px;
line-height: 32px;
padding: 0;
}
}
>.table-list{
margin-bottom: 30px;
padding-bottom: 20px;
.el-table{
width: 96%;
margin-left: 2%;
.ascending .sort-caret.ascending{
border-bottom-color: #3E8EF7;
}
.descending .sort-caret.descending{
border-top-color: #3E8EF7;
}
.sort-caret.ascending{
border-bottom-color:#666666
}
.sort-caret.descending{
border-top-color:#666
}
.cell {
white-space: pre-line;
}
}
.el-table td.is-center, .el-table th.is-center{
text-align: left;
font-weight: 500;
font-style: normal;
font-size: 14px;
color: #656565;
line-height: 18px;
}
.el-table td.is-center{
font-family: 'Helvetica';
}
.el-table th.is-center{
font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK';
background-color: rgba(235, 235, 235, 1);
}
}
}
}
}
}
}
}
......
// 站点主色
// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致
$--color-primary: #17B3A3;
$--color-primary: rgba(24, 144, 255, 1);
// Navbar
$navbar--background-color: $--color-primary;
// Sidebar
$sidebar--background-color-dark: #263238;
$sidebar--color-text-dark: #8a979e;
$sidebar--background-color-dark: rgba(0, 27, 58, 1);
$sidebar--color-text-dark: rgba(255, 255, 255, 0.647058823529412);
// Content
$content--background-color: #f1f4f5;
......@@ -5,7 +5,7 @@
* 1. 此处只包含element-ui组件主题
* 2. 要达到整站主题修改效果, 请确保[import './element-[#17B3A3]/index.css']当前主题色与[/src/assets/scss/_variables.scss]文件中[$--color-primary]属性值一致
*/
import './element-#17B3A3/index.css' // 当前主题色
import './element-#3E8EF7/index.css' // 当前主题色
export default {
list: [
'#0BB2D4', // 青色
......
......@@ -16,7 +16,7 @@ Vue.config.productionTip = false
// 非生产环境, 适配mockjs模拟数据 // api: https://github.com/nuysoft/Mock
if (process.env.NODE_ENV !== 'production') {
require('@/mock')
// require('@/mock')
}
// 挂载全局
......
......@@ -35,9 +35,12 @@ const mainRoutes = {
// 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
// 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
{ path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } }
// { path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } }
// { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
{ path: '/picture-add-or-update', component: _import('modules/info/picture-add-or-update'), name: 'picture-add-or-update', meta: { title: '图片资讯管理', isTab: true } },
{ path: '/news-add-or-update', component: _import('modules/info/news-add-or-update'), name: 'news-add-or-update', meta: { title: '文章管理', isTab: true } },
{ path: '/indexcarouselmanage-add-or-update', component: _import('modules/info/indexcarouselmanage-add-or-update'), name: 'indexcarouselmanage-add-or-update', meta: { title: '首页轮播管理', isTab: true } },
{ path: '/newtopic-add-or-update', component: _import('modules/info/newtopic-add-or-update'), name: 'newtopic-add-or-update', meta: { title: '深度专题管理', isTab: true } },
{ path: '/newsmovie-add-or-update', component: _import('modules/info/newsmovie-add-or-update'), name: 'newsmovie-add-or-update', meta: { title: '视频管理', isTab: true } }
],
beforeEnter (to, from, next) {
let token = Vue.cookie.get('token')
......@@ -85,7 +88,7 @@ router.beforeEach((to, from, next) => {
// sessionStorage.setItem('permissions', '[]')
// next()
// }
// }).catch((e) => {
// }).catch((e) =>
// console.log(`%c${e} 请求菜单列表和权限失败,跳转至登录页!!`, 'color:blue')
// router.push({ name: 'login' })
// })
......
......@@ -11,7 +11,7 @@ export const menuData = {
'url': null,
'perms': null,
'type': 0,
'icon': null,
'icon': 'suoding',
'orderNum': 0,
'open': null,
'list': [
......@@ -27,104 +27,75 @@ export const menuData = {
'orderNum': 1,
'open': null,
'list': null
},
{
'menuId': 3,
'parentId': 1,
'parentName': null,
'name': '文章管理',
'url': 'info/news',
'perms': 'manage:news:save',
'type': 1,
'icon': null,
'orderNum': 2,
'open': null,
'list': null
},
{
'menuId': 4,
'parentId': 1,
'parentName': null,
'name': '首页轮播',
'url': 'info/indexcarouselmanage',
'perms': null,
'type': 1,
'icon': null,
'orderNum': 3,
'open': null,
'list': null
},
{
'menuId': 5,
'parentId': 1,
'parentName': null,
'name': '专题管理',
'url': 'info/newtopic',
'perms': null,
'type': 1,
'icon': null,
'orderNum': 4,
'open': null,
'list': null
},
{
'menuId': 6,
'parentId': 1,
'parentName': null,
'name': '视频管理',
'url': 'info/newsmovie',
'perms': null,
'type': 1,
'icon': null,
'orderNum': 5,
'open': null,
'list': null
}
// {
// 'menuId': 3,
// 'parentId': 1,
// 'parentName': null,
// 'name': '角色管理',
// 'url': 'sys/role',
// 'perms': 'sys:user:save',
// 'type': 1,
// 'icon': 'role',
// 'orderNum': 2,
// 'open': null,
// 'list': null
// },
// {
// 'menuId': 4,
// 'parentId': 1,
// 'parentName': null,
// 'name': '菜单管理',
// 'url': 'sys/menu',
// 'perms': null,
// 'type': 1,
// 'icon': 'menu',
// 'orderNum': 3,
// 'open': null,
// 'list': null
// },
// {
// 'menuId': 5,
// 'parentId': 1,
// 'parentName': null,
// 'name': 'SQL监控',
// 'url': 'http://localhost:8080/renren-fast/druid/sql.html',
// 'perms': null,
// 'type': 1,
// 'icon': 'sql',
// 'orderNum': 4,
// 'open': null,
// 'list': null
// },
// {
// 'menuId': 6,
// 'parentId': 1,
// 'parentName': null,
// 'name': '定时任务',
// 'url': 'job/schedule',
// 'perms': null,
// 'type': 1,
// 'icon': 'job',
// 'orderNum': 5,
// 'open': null,
// 'list': null
// },
// {
// 'menuId': 27,
// 'parentId': 1,
// 'parentName': null,
// 'name': '参数管理',
// 'url': 'sys/config',
// 'perms': 'sys:config:delete',
// 'type': 1,
// 'icon': 'config',
// 'orderNum': 6,
// 'open': null,
// 'list': null
// },
// {
// 'menuId': 30,
// 'parentId': 1,
// 'parentName': null,
// 'name': '文件上传',
// 'url': ' ',
// 'perms': 'sys:oss:all',
// 'type': 1,
// 'icon': 'oss',
// 'orderNum': 6,
// 'open': null,
// 'list': null
// },
// {
// 'menuId': 29,
// 'parentId': 1,
// 'parentName': null,
// 'name': '系统日志',
// 'url': 'sys/log',
// 'perms': 'sys:log:list',
// 'type': 1,
// 'icon': 'log',
// 'orderNum': 7,
// 'open': null,
// 'list': null
// }
]
}
],
permissions: [
'manage:picture:save',
'manage:picture:delete'
'manage:picture:delete',
'manage:news:save',
'manage:news:delete',
'manage:indexcarouselmanage:save',
'manage:indexcarouselmanage:delete',
'manage:template:save',
'manage:template:delete',
'manage:newsmovie:save',
'manage:newsmovie:delete',
'manage:newtopic:save',
'manage:newtopic:delete'
]
}
<template>
<div class="mod-home">
<h3>项目介绍</h3>
<ul>
<li>renren-fast-vue基于vue、element-ui构建开发,实现<a href="https://gitee.com/renrenio/renren-fast" target="_blank">renren-fast</a>后台管理前端功能,提供一套更优的前端解决方案</li>
<li>前后端分离,通过token进行数据交互,可独立部署</li>
<li>主题定制,通过scss变量统一一站式定制</li>
<li>动态菜单,通过菜单管理统一管理访问路由</li>
<li>数据切换,通过mock配置对接口数据/mock模拟数据进行切换</li>
<li>发布时,可动态配置CDN静态资源/切换新旧版本</li>
<li>演示地址:<a href="http://demo.open.renren.io/renren-fast" target="_blank">http://demo.open.renren.io/renren-fast</a> (账号密码:admin/admin)</li>
</ul>
<h3>获取帮助</h3>
<ul>
<li>官方社区:<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
<li>前端Git地址:<a href="https://github.com/renrenio/renren-fast-vue" target="_blank">https://github.com/renrenio/renren-fast-vue</a></li>
<li>后台Git地址:<a href="https://gitee.com/renrenio/renren-fast" target="_blank">https://gitee.com/renrenio/renren-fast</a></li>
<li>代码生成器:<a href="https://gitee.com/renrenio/renren-generator" target="_blank">https://gitee.com/renrenio/renren-generator</a></li>
<li>如需关注项目最新动态,请Watch、Star项目,同时也是对项目最好的支持</li>
</ul>
<h3>官方QQ群</h3>
<ul>
<li>高级群:324780204(大牛云集,跟大牛学习新技能)</li>
<li>普通群:145799952(学习交流,互相解答各种疑问)</li>
</ul>
<h3>管理平台</h3>
</div>
</template>
......
......@@ -2,34 +2,23 @@
<div class="site-wrapper site-page--login">
<div class="site-content__wrapper">
<div class="site-content">
<div class="brand-info">
<h2 class="brand-info__text">renren-fast-vue</h2>
<p class="brand-info__intro">renren-fast-vue基于vue、element-ui构建开发,实现renren-fast后台管理前端功能,提供一套更优的前端解决方案。</p>
</div>
<div class="login-main">
<h3 class="login-title">管理员登录</h3>
<p class="login-title">中国物品编码中心后台管理系统</p>
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
<el-form-item prop="userName">
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
<el-input v-model="dataForm.userName" placeholder="请输入帐号" ><i slot="prefix" style="font-style:normal;font-size:14px;color:#333333;margin:2px 0 0 5px;display:inline-block;">帐号</i></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
<el-input v-model="dataForm.password" type="password" placeholder="请输入密码"><i slot="prefix" style="font-style:normal;font-size:14px;color:#333333;margin:2px 0 0 5px;display:inline-block;">密码</i></el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input v-model="dataForm.captcha" placeholder="验证码">
</el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<!-- <img :src="captchaPath" @click="getCaptcha()" alt=""> -->
</el-col>
</el-row>
<el-form-item>
<p class="rememberPwd"><el-checkbox v-model="dataForm.checked"></el-checkbox> 记住密码</p>
</el-form-item>
<el-form-item>
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
</el-form-item>
</el-form>
<p class="forgetPwd">忘记密码请联系系统管理员</p>
</div>
</div>
</div>
......@@ -45,7 +34,8 @@
userName: '',
password: '',
uuid: '',
captcha: ''
captcha: '',
checked: false
},
dataRule: {
userName: [
......@@ -62,11 +52,23 @@
}
},
created () {
// this.getCaptcha()
this.dataForm.userName = this.$cookie.get('username')
this.dataForm.password = this.$cookie.get('password')
},
methods: {
// 提交表单
dataFormSubmit () {
if (this.dataForm.checked) {
this.$cookie.set('username', this.dataForm.userName)
this.$cookie.set('password', this.dataForm.password)
this.submit()
} else {
this.$cookie.delete('username')
this.$cookie.delete('password')
this.submit()
}
},
submit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
......@@ -79,6 +81,7 @@
}).then(({data}) => {
if (data && data.code === 0) {
this.$cookie.set('token', data.token)
this.$cookie.set('username', this.dataForm.userName)
this.$router.replace({ name: 'home' })
} else {
this.$message.error(data.msg)
......@@ -99,38 +102,26 @@
<style lang="scss">
.site-wrapper.site-page--login {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(38, 50, 56, .6);
overflow: hidden;
&:before {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
content: "";
background-image: url(~@/assets/img/login_bg.jpg);
background-size: cover;
}
.site-content__wrapper {
position: absolute;
background: rgba(228, 228, 228, 1);
height: 900px;
top: 0;
right: 0;
bottom: 0;
left: 0;
.site-content__wrapper{
width: 1440px;
background-image: url(~@/assets/img/u0.gif);
background-size: 100% 100%;
min-height: 0;
height: 100%;
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: transparent;
margin: 0 auto;
}
.site-content {
min-height: 100%;
padding: 30px 500px 30px 30px;
// padding: 30px 500px 30px 30px;
}
.brand-info {
margin: 220px 100px 0 90px;
......@@ -151,14 +142,52 @@
.login-main {
position: absolute;
top: 0;
right: 0;
padding: 150px 60px 180px;
width: 470px;
right: 50%;
margin-right: -225px;
width: 449px;
min-height: 100%;
background-color: #fff;
}
.login-title {
font-size: 16px;
margin: 240px auto 45px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
font-weight: 650;
font-style: normal;
color: #0066CC;
text-align: center;
font-size: 32px;
}
.el-form{
position: relative;
width: 300px;
margin: 0 auto;
.el-input__inner{
height: 40px;
border: 1px solid rgba(228, 228, 228, 1);
border-radius: 0;
padding-left: 45px;
font-size: 13px;
color: #000;
line-height: 40px;
}
.rememberPwd{
text-align: right;
margin: 0;
line-height: 14px!important;
margin-top: -10px;
font-size: 13px;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #0066CC;
border-color: #0066CC;
}
.el-checkbox__inner:hover{
border-color: #0066CC;
}
}
.el-form-item__content /deep/span{
top: 3px!important;
left: 5px!important;
}
.login-captcha {
overflow: hidden;
......@@ -169,7 +198,20 @@
}
.login-btn-submit {
width: 100%;
margin-top: 38px;
background: #0066CC;
border-color: #0066CC;
border-radius: 20px;
height: 40px;
font-size: 13px;
}
.forgetPwd{
position: absolute;
width: 100%;
top: 780px;
white-space: nowrap;
text-align: center;
font-size: 14px;
}
}
</style>
......@@ -28,15 +28,15 @@
width="100%" height="100%" frameborder="0" scrolling="yes">
</iframe>
<keep-alive v-else>
<router-view v-if="item.name === mainTabsActiveName" />
<router-view v-if="item.name === mainTabsActiveName" :key="key" />
</keep-alive>
</el-card>
</el-tab-pane>
</el-tabs>
<!-- 主入口标签页 e -->
<el-card v-else :body-style="siteContentViewHeight">
<el-card v-else :body-style="siteContentViewHeight" >
<keep-alive>
<router-view />
<router-view :key="key" />
</keep-alive>
</el-card>
</main>
......@@ -73,11 +73,22 @@
return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
}
return { minHeight: height + 'px' }
},
key () {
return this.$route.path + Math.random()
}
},
mounted () {
console.log(this.mainTabs)
console.log(this.mainTabsActiveName)
},
methods: {
// tabs, 选中tab
selectedTabHandle (tab) {
console.log('tab')
console.log(tab)
console.log(this.mainTabs)
tab = this.mainTabs.filter(item => item.name === tab.name)
if (tab.length >= 1) {
this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
......
......@@ -2,8 +2,8 @@
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
<div class="site-navbar__header">
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
<a class="site-navbar__brand-lg" href="javascript:;">gs1后台管理</a>
<a class="site-navbar__brand-mini" href="javascript:;">gs1</a>
<a class="site-navbar__brand-lg" href="javascript:;">中国物品编码中心管理系统</a>
<a class="site-navbar__brand-mini" href="javascript:;">后台</a>
</h1>
</div>
<div class="site-navbar__body clearfix">
......@@ -17,7 +17,7 @@
<el-menu
class="site-navbar__menu site-navbar__menu--right"
mode="horizontal">
<el-menu-item index="1" @click="$router.push({ name: 'theme' })">
<!-- <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
<template slot="title">
<el-badge value="new">
<icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
......@@ -34,14 +34,14 @@
<el-menu-item index="2-1"><a href="https://github.com/renrenio/renren-fast-vue" target="_blank">前端</a></el-menu-item>
<el-menu-item index="2-2"><a href="https://gitee.com/renrenio/renren-fast" target="_blank">后台</a></el-menu-item>
<el-menu-item index="2-3"><a href="https://gitee.com/renrenio/renren-generator" target="_blank">代码生成器</a></el-menu-item>
</el-submenu>
</el-submenu> -->
<el-menu-item class="site-navbar__avatar" index="3">
<el-dropdown :show-timeout="0" placement="bottom">
<span class="el-dropdown-link">
<img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
<!-- <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item> -->
<el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
......@@ -78,20 +78,21 @@
set (val) { this.$store.commit('common/updateMainTabs', val) }
},
userName: {
get () { return this.$store.state.user.name }
get () { return this.$cookie.get('username') }
}
},
methods: {
// 修改密码
updatePasswordHandle () {
this.updatePassowrdVisible = true
this.$nextTick(() => {
this.$refs.updatePassowrd.init()
})
},
// updatePasswordHandle () {
// this.updatePassowrdVisible = true
// this.$nextTick(() => {
// this.$refs.updatePassowrd.init()
// })
// },
// 退出
logoutHandle () {
clearLoginInfo()
this.$router.push({ name: 'login' })
// this.$confirm(`确定进行[退出]操作?`, '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
......@@ -112,3 +113,18 @@
}
}
</script>
<style scoped>
.site-navbar__avatar .el-dropdown-link > img{
width: 24px;
}
.site-navbar__brand-lg,.site-navbar__brand-mini{
font-family: 'PingFangSC-Regular', 'PingFang SC';
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #FFFFFF;
}
.site-navbar{
background-color: rgba(0, 40, 77, 1);
}
</style>
\ No newline at end of file
......@@ -53,3 +53,13 @@
}
}
</script>
<style scoped>
.site-sidebar{
top: 65px;
}
.el-menu-item{
padding-left: 20px!important;
}
</style>
\ No newline at end of file
......@@ -82,16 +82,18 @@
methods: {
// 路由操作
routeHandle (route) {
console.log(332323)
console.log(route)
if (route.meta.isTab) {
// tab选中, 不存在先添加
var tab = this.mainTabs.filter(item => item.name === route.name)[0]
if (!tab) {
if (route.meta.isDynamic) {
route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
if (!route) {
return console.error('未能找到可用标签页!')
}
}
// if (route.meta.isDynamic) {
// route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
// if (!route) {
// return console.error('未能找到可用标签页!')
// }
// }
tab = {
menuId: route.meta.menuId || route.name,
name: route.name,
......@@ -101,7 +103,11 @@
params: route.params,
query: route.query
}
console.log(232323)
console.log(tab)
console.log(this.mainTabs)
this.mainTabs = this.mainTabs.concat(tab)
console.log(this.mainTabs)
}
this.menuActiveName = tab.menuId + ''
this.mainTabsActiveName = tab.name
......
<template>
<div class="mod-config">
<div class="title">{{title}}</div>
<div class="form-list">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
<el-form-item label="标题" prop="title">
<el-input v-model="dataForm.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="背景颜色" prop="colorBackground" class=" setdes setdes1">
<el-select v-model="dataForm.colorBackground" placeholder="请选择背景颜色">
<el-option
v-for="item in colorBackgroundList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span>大轮播图需要编辑该项</span>
</el-form-item>
<el-form-item label="按钮跳转色" prop="colorMore" class="setdes setdes1">
<el-select v-model="dataForm.colorMore" placeholder="请选择背景颜色">
<el-option
v-for="item in colorMoreList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span>大轮播图需要编辑该项</span>
</el-form-item>
<el-form-item label="类型" prop="classnum">
<el-select v-model="dataForm.classnum" placeholder="请选择类别">
<el-option
v-for="item in classnumList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='等级' prop='levels' class="setdes setdes2">
<el-select v-model="dataForm.levels" placeholder="请输入等级" >
<el-option
v-for="item in levelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<span>轮播按等级降序显示,保持同类轮播图片等级连续取值</span>
</el-form-item>
<el-form-item label="跳转" prop="directpath">
<el-input v-model="dataForm.directpath" placeholder="请输入跳转"></el-input>
</el-form-item>
<el-form-item label="轮播简介" prop="brief" class="setdes setdes1">
<el-input type="textarea" v-model="dataForm.brief" placeholder="请输入简介"></el-input>
<span>大轮播图需要编辑该项</span>
</el-form-item>
<el-form-item label="图片" prop="picIndexPath" class="setdes setdes3">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="Upload"
:before-upload="beforeAvatarUpload">
<img v-if="dialogVisible" :src="imgUrlStr" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- <el-input v-model="dataForm.picIndexPath" placeholder=""></el-input> -->
<span>图片尺寸大轮播600X400px 小轮播360x160px</span>
</el-form-item>
</el-form>
</div>
<div class="sub-btn">
<span slot='footer' class='dialog-footer'>
<el-button @click='clearInp()'>重置</el-button>
<el-button type='primary' @click='dataFormSubmit()'>确定</el-button>
</span>
</div>
</div>
</template>
<script>
export default {
data () {
return {
title: '',
dataForm: {
id: 0,
classnum: '',
title: '',
brief: '',
levels: 0,
directpath: '',
picIndexPath: '',
colorBackground: '',
colorMore: ''
},
dataRule: {
classnum: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
title: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
brief: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
levels: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
directpath: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
picIndexPath: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
colorBackground: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
colorMore: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
},
imgUrl: new FormData(),
imgUrlStr: '',
dialogVisible: false,
levelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
colorBackgroundList: [
{
value: '1',
label: '蓝色'
},
{
value: '2',
label: '红色'
}
],
colorMoreList: [
{
value: '1',
label: '蓝色'
},
{
value: '2',
label: '红色'
}
],
classnumList: [
{
value: '1',
label: '大轮播'
},
{
value: '2',
label: '小轮播'
}
]
}
},
mounted () {
if (this.$route.query.id) {
this.init(this.$route.query.id)
} else {
this.clearInp()
}
},
activated () {
this.title = !this.$route.query.id ? '添加首页轮播' : '修改首页轮播'
},
created () {
this.$route.meta.title = !this.$route.query.id ? '添加首页轮播' : '修改首页轮播'
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/office/indexCarouselManage/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.classnum = data.indexCarouselManage.classnum
this.dataForm.title = data.indexCarouselManage.title
this.dataForm.brief = data.indexCarouselManage.brief
this.dataForm.levels = data.indexCarouselManage.levels
this.dataForm.directpath = data.indexCarouselManage.directpath
this.dataForm.picIndexPath = data.indexCarouselManage.picIndexPath
this.dataForm.colorBackground = data.indexCarouselManage.colorBackground
this.dataForm.colorMore = data.indexCarouselManage.colorMore
this.imgUrlStr = data.indexCarouselManage.picIndexPath
this.dialogVisible = true
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/office/indexCarouselManage/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined,
'classnum': this.dataForm.classnum,
'title': this.dataForm.title,
'levels': this.dataForm.levels,
'directpath': this.dataForm.directpath,
'colorBackground': this.dataForm.colorBackground,
'colorMore': this.dataForm.colorMore,
'brief': this.dataForm.brief,
'picIndexPath': this.dataForm.picIndexPath
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
},
// 上传之前校验
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
if (!isPNG) {
this.$message.error('上传图片只能是 JPG, PNG 格式!')
}
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
if (file) {
var windowURL = window.URL || window.webkitURL
this.imgUrlStr = windowURL.createObjectURL(file)
this.dialogVisible = true
this.imgUrl.append('file', file)
console.log(this.imgUrl.get('file'))
}
},
Upload () {
this.$http({
url: this.$http.adornUrl('/office/file/uploadFile'),
method: 'post',
data: this.imgUrl,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(res => {
console.log(res)
this.dataForm.picIndexPath = res.data.data
}).catch(err => {
console.log(err)
})
},
clearInp () {
this.$refs['dataForm'].resetFields()
this.imgUrlStr = ''
this.dialogVisible = false
}
}
}
</script>
<style scoped>
.setdes1 .el-form-item__content > span{
right: -140px!important;
}
.setdes2 .el-form-item__content > span{
right: -310px!important;
}
.setdes3 .el-form-item__content > span{
right: 140px!important;
top: 42px;
}
</style>
\ No newline at end of file
<template>
<div class="mod-config mod-list-form">
<div class="title">首页轮播图管理</div>
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label='标题' prop='title'>
<el-input v-model='dataForm.title' placeholder='请输入标题'></el-input>
</el-form-item>
<el-form-item label='状态' prop='status'>
<el-select v-model="dataForm.status" placeholder="请选择状态">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='类别' prop='classnum'>
<el-select v-model="dataForm.classnum" placeholder="请选择类别">
<el-option
v-for="item in classnumList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='级别' prop='pictureLevel'>
<el-select v-model="dataForm.pictureLevel" placeholder="请输入级别">
<el-option
v-for="item in levelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='发布日期' prop='releaseDate'>
<el-date-picker
size="small"
v-model="releaseDate"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-button class="seach-btn" @click="getDataList()" type="primary" size="small">搜索</el-button>
</el-form>
<div class="add-btn">
<el-button v-if="isAuth('manage:picture:save')" type="primary" @click="addOrUpdateHandle()"> + 添加首页轮播</el-button>
</div>
<div class="table-list">
<el-table
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
>
<el-table-column
prop="levels"
header-align="center"
align="center"
label="等级">
</el-table-column>
<el-table-column
prop="title"
header-align="center"
align="center"
label="标题">
</el-table-column>
<el-table-column
prop="classnum"
header-align="center"
align="center"
label="类别">
<template slot-scope="scope">
<div>
<span v-if="scope.row.classnum === 1">大轮播</span>
<span v-if="scope.row.classnum === 2">小轮播</span>
</div>
</template>
</el-table-column>
<el-table-column
prop="starttimeIndex"
header-align="center"
align="center"
sortable
label="首页添加时间">
</el-table-column>
<el-table-column
prop="updatetimeIndex"
header-align="center"
align="center"
sortable
label="首页修改时间">
</el-table-column>
<el-table-column
prop="editorIndex"
header-align="center"
align="center"
label="编辑">
</el-table-column>
<el-table-column
prop="lasteditorIndex"
header-align="center"
align="center"
label="最后编辑">
</el-table-column>
<el-table-column
prop="auditor"
header-align="center"
align="center"
label="审核人">
</el-table-column>
<el-table-column
prop="checkflagIndex"
header-align="center"
align="center"
label="状态">
<template slot-scope="scope">
<div>
<span v-if="scope.row.checkflagIndex === 0">待审核</span>
<span v-if="scope.row.checkflagIndex === -1">失败</span>
<span v-if="scope.row.checkflagIndex === 1">成功</span>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="checkHandle(scope.row.id,1)">[成功]</el-button>
<el-button type="text" @click="checkHandle(scope.row.id,-1)">[失败]</el-button>
<br />
<el-button type="text" >预览</el-button>
<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button type="text" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data () {
return {
dataForm: {
title: '',
levels: '0',
status: '',
classnum: '',
inputdate: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
statusList: [
{
value: '0',
label: '待审核'
},
{
value: '-1',
label: '失败'
},
{
value: '1',
label: '成功'
}
],
levelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
classnumList: [
{
value: '1',
label: '大轮播'
},
{
value: '2',
label: '小轮播'
}
],
releaseDate: ''
}
},
activated () {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/office/indexCarouselManage/list'),
method: 'post',
data: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'title': this.dataForm.title,
'status': this.dataForm.status,
'levels': this.dataForm.levels,
'classnum': this.dataForm.classnum,
'inputDataStart': this.releaseDate[0],
'inputDataEnd': this.releaseDate[1]
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.$nextTick(() => {
this.$router.push({name: 'indexcarouselmanage-add-or-update', query: {id: id}})
})
},
// 删除
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/office/indexcarouselmanage/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
},
// 审核
checkHandle (id) {
let str = ''
if (status === 1) {
str = '成功'
} else {
str = '失败'
}
this.$confirm(`确定对[id=${id}]进行['审核${str}']操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/office/indexCarouselManage/verifyIndexCarouselManage'),
method: 'post',
data: this.$http.adornData({
'id': id,
'checkflagIndex': 1
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
}
}
</script>
<style scoped>
.el-select-dropdown__item{
font-size: 12px!important;
}
.el-table .cell, .el-table th div {
padding-right: 0;
}
</style>
\ No newline at end of file
<template>
<div class="mod-config">
<div class="title">{{title}}</div>
<div class="form-list">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
<div class="base-info">基本信息</div>
<el-form-item label="原始标题:" prop="titleOld">
<el-input v-model="dataForm.titleOld" placeholder="请输入原始标题"></el-input>
</el-form-item>
<el-form-item label="显示标题:" prop="title">
<el-input v-model="dataForm.title" placeholder="请输入显示标题"></el-input>
</el-form-item>
<el-form-item label="显示最新要闻:" prop="ishead">
<el-radio v-model="dataForm.ishead" label="1"></el-radio>
<el-radio v-model="dataForm.ishead" label="2"></el-radio>
</el-form-item>
<el-form-item label="跳转至:" prop="directpath">
<el-input v-model="dataForm.directpath" placeholder="请输入跳转地址"></el-input>
</el-form-item>
<el-form-item label="栏目:" prop="titleOld">
<el-select v-model="dataForm.classid" @change="getClassList([dataForm.classid])" style='width:121px!important'>
<el-option
v-for="item in classidList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="dataForm.cclassid" style='width:121px!important'>
<el-option
v-for="item in cclassidList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='级别:' prop='levels'>
<el-select v-model="dataForm.levels" placeholder="请输入级别">
<el-option
v-for="item in piclevelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="展示时间:" prop="showtime">
<el-date-picker
v-model="dataForm.showtime"
value-format='yyyy-MM-dd'
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="关键字:" prop="keyword">
<el-input v-model="dataForm.keyword" placeholder="请输入关键字"></el-input>
</el-form-item>
<el-form-item label="稿源:" prop="source">
<el-input v-model="dataForm.source" placeholder="请输入稿源"></el-input>
</el-form-item>
<el-form-item label="作者:" prop="author">
<el-input v-model="dataForm.author" placeholder="请输入作者"></el-input>
</el-form-item>
<el-form-item label="上传图片:" prop="pic">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="Upload"
:before-upload="beforeAvatarUpload">
<img v-if="dialogVisible" :src="imgUrlStr" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="简介:" prop="brief">
<el-input type="textarea" v-model="dataForm.brief" placeholder="请输入简介"></el-input>
</el-form-item>
<el-form-item label="文章内容:" prop="content" >
<Ueditor :value="ueditor.value" :config="ueditor.config" ref="ue"></Ueditor>
<!-- <el-input v-model="dataForm.content" placeholder="请输入内容"></el-input> -->
</el-form-item>
</el-form>
</div>
<div class="sub-btn">
<span slot='footer' class='dialog-footer'>
<el-button @click='clearInp()'>重置</el-button>
<el-button type='primary' @click='dataFormSubmit()'>确定</el-button>
</span>
</div>
</div>
</template>
<script>
import Ueditor from './temps/ueditor'
export default {
components: {
Ueditor
},
data () {
return {
defaultProps: {
children: 'children',
label: 'label'
},
dataForm: {
id: 0,
title: '',
titleOld: '',
keyword: '',
brief: '',
author: '',
source: '',
levels: '',
directpath: '',
pic: '',
content: '',
ishead: '1',
showtime: '',
classid: '',
cclassid: '',
cclassname: ''
},
cclassidStr: undefined,
dataRule: {
title: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
titleOld: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
keyword: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
brief: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
author: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
source: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
levels: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
directpath: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
pic: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
// content: [
// { required: true, message: '不能为空', trigger: 'blur' }
// ],
classid: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
ishead: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
showtime: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
},
imgUrl: new FormData(),
imgUrlStr: '',
dialogVisible: false,
ueditor: {
value: '',
config: {}
},
piclevelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
id: [],
classidList: [],
cclassidList: [],
title: ''
}
},
watch: {
areaId: {
handler (newVal, oldVal) {
if (this.$refs.cascader) {
var children = this.$refs.cascader.getCheckedNodes()
if (children[0].children.length < 1) {
this.$refs.cascader.dropDownVisible = false
}
}
}
}
},
activated () {
if (this.$route.query.id) {
this.init(this.$route.query.id)
}
this.title = !this.$route.query.id ? '添加文章' : '修改文章'
},
created () {
this.getClassList([])
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/office/news/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.title = data.news.title
this.dataForm.titleOld = data.news.titleOld
this.dataForm.keyword = data.news.keyword
this.dataForm.brief = data.news.brief
this.dataForm.author = data.news.author
this.dataForm.source = data.news.source
this.dataForm.levels = data.news.levels
this.dataForm.directpath = data.news.directpath
this.dataForm.pic = data.news.pic
this.dataForm.content = data.news.content
let classArr = []
if (data.news.cclassid === '' || data.news.cclassid === null) {
classArr.push(data.news.classid)
} else {
classArr.push(data.news.classid)
classArr.push(data.news.cclassid)
}
this.cclassidArr = classArr
this.dataForm.ishead = data.news.ishead
this.dataForm.showtime = data.news.showtime
this.imgUrlStr = data.news.pic
this.dialogVisible = true
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/office/news/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined,
'title': this.dataForm.title,
'titleOld': this.dataForm.titleOld,
'keyword': this.dataForm.keyword,
'brief': this.dataForm.brief,
'author': this.dataForm.author,
'source': this.dataForm.source,
'levels': this.dataForm.levels,
'directpath': this.dataForm.directpath,
'pic': this.dataForm.pic,
'content': this.$refs.ue.getUEContent(),
'classid': this.dataForm.classid,
'cclassid': this.dataForm.cclassid,
'ishead': this.dataForm.ishead,
'showtime': this.dataForm.showtime
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
},
// 获取栏目列表
getClassList (id) {
this.$http({
url: this.$http.adornUrl(`/office/newsclass/getNewsClassList`),
method: 'post',
data: id
}).then(({data}) => {
if (data && data.code === 0) {
if (id.length === 0) {
this.classidList = data.data
} else {
this.dataForm.cclassid = ''
this.cclassidList = data.data[0].child
}
} else {
this.$message.error(data.msg)
}
})
},
// 上传之前校验
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
if (!isPNG) {
this.$message.error('上传图片只能是 JPG, PNG 格式!')
}
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
if (file) {
var windowURL = window.URL || window.webkitURL
this.imgUrlStr = windowURL.createObjectURL(file)
this.dialogVisible = true
this.imgUrl.append('file', file)
console.log(this.imgUrl.get('file'))
}
},
Upload () {
this.$http({
url: this.$http.adornUrl('/office/file/uploadFile'),
method: 'post',
data: this.imgUrl,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(res => {
console.log(res)
this.dataForm.pic = res.data.data
}).catch(err => {
console.log(err)
})
},
// 选择栏目
handleChange (value) {
if (value.length === 1) {
this.classid = value[0]
} else if (value.length === 2) {
this.dataForm.classid = value[0]
this.dataForm.cclassid = value[1]
}
},
clearInp () {
this.$refs['dataForm'].resetFields()
this.imgUrlStr = ''
this.dialogVisible = false
this.$refs.ue.setClearUEContent('')
}
}
}
</script>
<style scoped>
.form-list{
padding-left: 4%!important;
}
.el-form-item__content{
width: 50%;
}
.el-select,.el-input{
width: 241px!important;
}
.edui-editor{
width: 100%;
}
</style>
\ No newline at end of file
<template>
<div class="mod-config mod-list-form">
<div class="title">文章管理</div>
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label='标题' prop='title'>
<el-input v-model='dataForm.title' placeholder='请输入标题' size="small"></el-input>
</el-form-item>
<el-form-item label='作者' prop='title'>
<el-input v-model='dataForm.author' placeholder='请输入作者' size="small"></el-input>
</el-form-item>
<el-form-item label='编辑' prop='editor'>
<el-input v-model='dataForm.editor' placeholder='请输入编辑' size="small"></el-input>
</el-form-item>
<el-form-item label='关键字' prop='keyword'>
<el-input v-model='dataForm.keyword' placeholder='请输入关键字' size="small"></el-input>
</el-form-item>
<el-form-item label='状态' prop='status'>
<el-select v-model="dataForm.status" placeholder="请选择状态" size="small">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='级别' prop='pictureLevel'>
<el-select v-model="dataForm.pictureLevel" placeholder="请输入级别" size="small">
<el-option
v-for="item in piclevelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='发布日期' prop='releaseDate'>
<el-date-picker
size="small"
v-model="releaseDate"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item label='更新日期' prop='updateDate'>
<el-date-picker
size="small"
v-model="updateDate"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-button class="seach-btn" @click="getDataList()" type="primary" size="small">搜索</el-button>
</el-form>
<div class="add-btn">
<el-button v-if="isAuth('manage:news:save')" type="primary" @click="addOrUpdateHandle()"> + 添加文章</el-button>
</div>
<div class="table-list">
<el-table
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
prop="levels"
header-align="center"
align="center"
label="级别">
</el-table-column>
<el-table-column
prop="title"
header-align="center"
align="center"
label="新闻标题">
</el-table-column>
<el-table-column
prop="author"
header-align="center"
align="center"
label="作者">
</el-table-column>
<el-table-column
prop="showtime"
header-align="center"
align="center"
sortable
label="显示时间">
</el-table-column>
<el-table-column
prop="releasedate"
header-align="center"
align="center"
sortable
label="发布时间">
</el-table-column>
<el-table-column
prop="keyword"
header-align="center"
align="center"
label="关键字">
</el-table-column>
<el-table-column
prop="editor"
header-align="center"
align="center"
label="编辑">
</el-table-column>
<el-table-column
prop="lasteditor"
header-align="center"
align="center"
label="最后编辑">
</el-table-column>
<el-table-column
prop="auditor"
header-align="center"
align="center"
label="审核人">
</el-table-column>
<el-table-column
prop="status"
header-align="center"
align="center"
label="状态">
<template slot-scope="scope">
<div>
<span v-if="scope.row.status === 0">待审核</span>
<span v-if="scope.row.status === -1">失败</span>
<span v-if="scope.row.status === 1">成功</span>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="checkHandle(scope.row.id,1)">[成功]</el-button>
<el-button type="text" @click="checkHandle(scope.row.id,-1)">[失败]</el-button>
<br />
<el-button type="text" >预览</el-button>
<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button type="text" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data () {
return {
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
statusList: [
{
value: '0',
label: '待审核'
},
{
value: '-1',
label: '失败'
},
{
value: '1',
label: '成功'
}
],
piclevelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
updateDate: '',
releaseDate: ''
}
},
activated () {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/office/news/list'),
method: 'post',
data: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'title': this.dataForm.title,
'levels': this.dataForm.levels,
'author': this.dataForm.author,
'editor': this.dataForm.editor,
'keyword': this.dataForm.keyword,
'status': this.dataForm.status,
'releaseTimeStart': this.releaseDate[0],
'releaseTimeEnd': this.releaseDate[1],
'updateTimeStart': this.updateDate[0],
'updateTimeEnd': this.updateDate[1],
'auditor': this.dataForm.auditor
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.$nextTick(() => {
this.$router.push({name: 'news-add-or-update', query: {id: id}})
})
},
// 删除
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/office/news/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
},
// 审核
checkHandle (id, status) {
let str = ''
if (status === 1) {
str = '成功'
} else {
str = '失败'
}
this.$confirm(`确定对[id=${id}]进行['审核${str}']操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/office/news/verifyNews'),
method: 'post',
data: this.$http.adornData({
'id': id,
'status': status
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
}
}
</script>
<template>
<el-dialog
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-form-item label="" prop="title">
<el-input v-model="dataForm.title" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="titleOld">
<el-input v-model="dataForm.titleOld" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="keyword">
<el-input v-model="dataForm.keyword" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="releasedate">
<el-input v-model="dataForm.releasedate" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="updatedate">
<el-input v-model="dataForm.updatedate" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="rmname">
<el-input v-model="dataForm.rmname" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="wavname">
<el-input v-model="dataForm.wavname" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="littlepic">
<el-input v-model="dataForm.littlepic" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="bigpic">
<el-input v-model="dataForm.bigpic" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="author">
<el-input v-model="dataForm.author" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="clanguage">
<el-input v-model="dataForm.clanguage" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="long">
<el-input v-model="dataForm.long" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="stdate">
<el-input v-model="dataForm.stdate" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="editor">
<el-input v-model="dataForm.editor" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="hits">
<el-input v-model="dataForm.hits" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="levels">
<el-input v-model="dataForm.levels" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="status">
<el-input v-model="dataForm.status" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="type">
<el-input v-model="dataForm.type" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="newsRelease">
<el-input v-model="dataForm.newsRelease" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="brief">
<el-input v-model="dataForm.brief" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="directpath">
<el-input v-model="dataForm.directpath" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="showtime">
<el-input v-model="dataForm.showtime" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="auditor">
<el-input v-model="dataForm.auditor" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="lasteditor">
<el-input v-model="dataForm.lasteditor" placeholder=""></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
visible: false,
dataForm: {
id: 0,
title: '',
titleOld: '',
keyword: '',
releasedate: '',
updatedate: '',
rmname: '',
wavname: '',
littlepic: '',
bigpic: '',
author: '',
clanguage: '',
long: '',
stdate: '',
editor: '',
hits: '',
levels: '',
status: '',
type: '',
newsRelease: '',
brief: '',
directpath: '',
showtime: '',
auditor: '',
lasteditor: ''
},
dataRule: {
title: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
titleOld: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
keyword: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
releasedate: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
updatedate: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
rmname: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
wavname: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
littlepic: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
bigpic: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
author: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
clanguage: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
long: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
stdate: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
editor: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
hits: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
levels: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
status: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
type: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
newsRelease: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
brief: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
directpath: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
showtime: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
auditor: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
lasteditor: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
}
}
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/manage/newsmovie/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.title = data.newsMovie.title
this.dataForm.titleOld = data.newsMovie.titleOld
this.dataForm.keyword = data.newsMovie.keyword
this.dataForm.releasedate = data.newsMovie.releasedate
this.dataForm.updatedate = data.newsMovie.updatedate
this.dataForm.rmname = data.newsMovie.rmname
this.dataForm.wavname = data.newsMovie.wavname
this.dataForm.littlepic = data.newsMovie.littlepic
this.dataForm.bigpic = data.newsMovie.bigpic
this.dataForm.author = data.newsMovie.author
this.dataForm.clanguage = data.newsMovie.clanguage
this.dataForm.long = data.newsMovie.long
this.dataForm.stdate = data.newsMovie.stdate
this.dataForm.editor = data.newsMovie.editor
this.dataForm.hits = data.newsMovie.hits
this.dataForm.levels = data.newsMovie.levels
this.dataForm.status = data.newsMovie.status
this.dataForm.type = data.newsMovie.type
this.dataForm.newsRelease = data.newsMovie.newsRelease
this.dataForm.brief = data.newsMovie.brief
this.dataForm.directpath = data.newsMovie.directpath
this.dataForm.showtime = data.newsMovie.showtime
this.dataForm.auditor = data.newsMovie.auditor
this.dataForm.lasteditor = data.newsMovie.lasteditor
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/manage/newsmovie/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined,
'title': this.dataForm.title,
'titleOld': this.dataForm.titleOld,
'keyword': this.dataForm.keyword,
'releasedate': this.dataForm.releasedate,
'updatedate': this.dataForm.updatedate,
'rmname': this.dataForm.rmname,
'wavname': this.dataForm.wavname,
'littlepic': this.dataForm.littlepic,
'bigpic': this.dataForm.bigpic,
'author': this.dataForm.author,
'clanguage': this.dataForm.clanguage,
'long': this.dataForm.long,
'stdate': this.dataForm.stdate,
'editor': this.dataForm.editor,
'hits': this.dataForm.hits,
'levels': this.dataForm.levels,
'status': this.dataForm.status,
'type': this.dataForm.type,
'newsRelease': this.dataForm.newsRelease,
'brief': this.dataForm.brief,
'directpath': this.dataForm.directpath,
'showtime': this.dataForm.showtime,
'auditor': this.dataForm.auditor,
'lasteditor': this.dataForm.lasteditor
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
}
}
}
</script>
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('manage:newsmovie:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('manage:newsmovie:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="id"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="title"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="titleOld"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="keyword"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="releasedate"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="updatedate"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="rmname"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="wavname"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="littlepic"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="bigpic"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="author"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="clanguage"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="long"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="stdate"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="editor"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="hits"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="levels"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="status"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="type"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="newsRelease"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="brief"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="directpath"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="showtime"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="auditor"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="lasteditor"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './newsmovie-add-or-update'
export default {
data () {
return {
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate
},
activated () {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/office/newsmovie/list'),
method: 'post',
data: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/office/newsmovie/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
}
}
</script>
<template>
<div class="mod-config">
<div class="title">{{title}}</div>
<div class="form-list">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
<div class="base-info">基本信息</div>
<el-form-item label="专题描述:" prop="title">
<el-input v-model="dataForm.title" placeholder="请输入专题描述"></el-input>
</el-form-item>
<el-form-item label="跳转至:" prop="directpath">
<el-input v-model="dataForm.directpath" placeholder="请输入跳转地址"></el-input>
</el-form-item>
<el-form-item label="子类" prop="newtmpid">
<el-select v-model="dataForm.classid" @change="getClassList([dataForm.classid])" style='width:121px!important'>
<el-option
v-for="item in classidList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="专题模板" prop="newtmpid">
<el-select v-model="dataForm.classid" style='width:121px!important'>
<el-option
v-for="item in classidList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='等级:' prop='levels'>
<el-select v-model="dataForm.levels" placeholder="请输入等级">
<el-option
v-for="item in piclevelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="显示时间:" prop="showtime">
<el-date-picker
v-model="dataForm.showtime"
value-format='yyyy-MM-dd'
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="专题图片:" prop="pic">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="Upload"
:before-upload="beforeAvatarUpload">
<img v-if="dialogVisible" :src="imgUrlStr" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="专题简介:" prop="brief">
<el-input type="textarea" v-model="dataForm.brief" placeholder="请输入简介"></el-input>
</el-form-item>
<el-form-item label="头部内容:" prop="brief">
<el-input type="textarea" v-model="dataForm.brief" placeholder="请输入简介"></el-input>
</el-form-item>
<el-form-item label="专题描述:" prop="content" >
<Ueditor :value="ueditor.value" :config="ueditor.config" ref="ue"></Ueditor>
<!-- <el-input v-model="dataForm.content" placeholder="请输入内容"></el-input> -->
</el-form-item>
</el-form>
</div>
<div class="sub-btn">
<span slot='footer' class='dialog-footer'>
<el-button @click='clearInp()'>重置</el-button>
<el-button type='primary' @click='dataFormSubmit()'>确定</el-button>
</span>
</div>
</div>
</template>
<script>
import Ueditor from './temps/ueditor'
export default {
components: {
Ueditor
},
data () {
return {
defaultProps: {
children: 'children',
label: 'label'
},
dataForm: {
id: 0,
title: '',
titleOld: '',
keyword: '',
brief: '',
author: '',
source: '',
levels: '',
directpath: '',
pic: '',
content: '',
ishead: '1',
showtime: '',
classid: '',
cclassid: '',
cclassname: ''
},
cclassidStr: undefined,
dataRule: {
title: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
titleOld: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
keyword: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
brief: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
author: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
source: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
levels: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
directpath: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
pic: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
// content: [
// { required: true, message: '不能为空', trigger: 'blur' }
// ],
classid: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
ishead: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
showtime: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
},
imgUrl: new FormData(),
imgUrlStr: '',
dialogVisible: false,
ueditor: {
value: '',
config: {}
},
piclevelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
id: [],
classidList: [],
cclassidList: [],
title: ''
}
},
watch: {
areaId: {
handler (newVal, oldVal) {
if (this.$refs.cascader) {
var children = this.$refs.cascader.getCheckedNodes()
if (children[0].children.length < 1) {
this.$refs.cascader.dropDownVisible = false
}
}
}
}
},
activated () {
if (this.$route.query.id) {
this.init(this.$route.query.id)
}
this.title = !this.$route.query.id ? '添加文章' : '修改文章'
},
created () {
this.getClassList([])
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/office/newtopic/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.title = data.news.title
this.dataForm.titleOld = data.news.titleOld
this.dataForm.keyword = data.news.keyword
this.dataForm.brief = data.news.brief
this.dataForm.author = data.news.author
this.dataForm.source = data.news.source
this.dataForm.levels = data.news.levels
this.dataForm.directpath = data.news.directpath
this.dataForm.pic = data.news.pic
this.dataForm.content = data.news.content
let classArr = []
if (data.news.cclassid === '' || data.news.cclassid === null) {
classArr.push(data.news.classid)
} else {
classArr.push(data.news.classid)
classArr.push(data.news.cclassid)
}
this.cclassidArr = classArr
this.dataForm.ishead = data.news.ishead
this.dataForm.showtime = data.news.showtime
this.imgUrlStr = data.news.pic
this.dialogVisible = true
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/office/newtopic/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined,
'title': this.dataForm.title,
'titleOld': this.dataForm.titleOld,
'keyword': this.dataForm.keyword,
'brief': this.dataForm.brief,
'author': this.dataForm.author,
'source': this.dataForm.source,
'levels': this.dataForm.levels,
'directpath': this.dataForm.directpath,
'pic': this.dataForm.pic,
'content': this.$refs.ue.getUEContent(),
'classid': this.dataForm.classid,
'cclassid': this.dataForm.cclassid,
'ishead': this.dataForm.ishead,
'showtime': this.dataForm.showtime
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
},
// 获取栏目列表
getClassList (id) {
this.$http({
url: this.$http.adornUrl(`/office/newtopic/getNewsClassList`),
method: 'post',
data: id
}).then(({data}) => {
if (data && data.code === 0) {
if (id.length === 0) {
this.classidList = data.data
} else {
this.dataForm.cclassid = ''
this.cclassidList = data.data[0].child
}
} else {
this.$message.error(data.msg)
}
})
},
// 上传之前校验
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
if (!isPNG) {
this.$message.error('上传图片只能是 JPG, PNG 格式!')
}
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
if (file) {
var windowURL = window.URL || window.webkitURL
this.imgUrlStr = windowURL.createObjectURL(file)
this.dialogVisible = true
this.imgUrl.append('file', file)
console.log(this.imgUrl.get('file'))
}
},
Upload () {
this.$http({
url: this.$http.adornUrl('/office/file/uploadFile'),
method: 'post',
data: this.imgUrl,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(res => {
console.log(res)
this.dataForm.pic = res.data.data
}).catch(err => {
console.log(err)
})
},
// 选择栏目
handleChange (value) {
if (value.length === 1) {
this.classid = value[0]
} else if (value.length === 2) {
this.dataForm.classid = value[0]
this.dataForm.cclassid = value[1]
}
},
clearInp () {
this.$refs['dataForm'].resetFields()
this.imgUrlStr = ''
this.dialogVisible = false
this.$refs.ue.setClearUEContent('')
}
}
}
</script>
<style scoped>
.form-list{
padding-left: 4%!important;
}
.el-form-item__content{
width: 50%;
}
.el-select,.el-input{
width: 241px!important;
}
.edui-editor{
width: 100%;
}
</style>
\ No newline at end of file
<template>
<div class="mod-config mod-list-form">
<div class="title">深度专题管理</div>
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label='标题' prop='title'>
<el-input v-model='dataForm.title' placeholder='请输入标题'></el-input>
</el-form-item>
<el-form-item label='状态' prop='status'>
<el-select v-model="dataForm.status" placeholder="请选择状态">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='级别' prop='pictureLevel'>
<el-select v-model="dataForm.pictureLevel" placeholder="请输入级别">
<el-option
v-for="item in levelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='发布日期' prop='releaseDate'>
<el-date-picker
size="small"
v-model="releaseDate"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-button class="seach-btn" @click="getDataList()" type="primary" size="small">搜索</el-button>
</el-form>
<div class="add-btn">
<el-button v-if="isAuth('manage:news:save')" type="primary" @click="addOrUpdateHandle()"> + 添加专题</el-button>
</div>
<div class="table-list">
<el-table
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
>
<el-table-column
prop="levels"
header-align="center"
align="center"
label="级别">
</el-table-column>
<el-table-column
prop="title"
header-align="center"
align="center"
label="专题标题">
</el-table-column>
<el-table-column
prop="author"
header-align="center"
align="center"
label="专题分类">
</el-table-column>
<el-table-column
prop="showtime"
header-align="center"
align="center"
sortable
label="显示时间">
</el-table-column>
<el-table-column
prop="releasedate"
header-align="center"
align="center"
sortable
label="发布时间">
</el-table-column>
<el-table-column
prop="keyword"
header-align="center"
align="center"
label="关键字">
</el-table-column>
<el-table-column
prop="editor"
header-align="center"
align="center"
label="编辑">
</el-table-column>
<el-table-column
prop="lasteditor"
header-align="center"
align="center"
label="最后编辑">
</el-table-column>
<el-table-column
prop="auditor"
header-align="center"
align="center"
label="审核人">
</el-table-column>
<el-table-column
prop="status"
header-align="center"
align="center"
label="状态">
<template slot-scope="scope">
<div>
<span v-if="scope.row.status === 0">待审核</span>
<span v-if="scope.row.status === -1">失败</span>
<span v-if="scope.row.status === 1">成功</span>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="checkHandle(scope.row.classid,1)">[成功]</el-button>
<el-button type="text" @click="checkHandle(scope.row.classid,-1)">[失败]</el-button>
<br />
<el-button type="text" >预览</el-button>
<el-button type="text" @click="addOrUpdateHandle(scope.row.classid)">修改</el-button>
<el-button type="text" @click="deleteHandle(scope.row.classid)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data () {
return {
dataForm: {
title: '',
levels: '0',
status: '',
classnum: '',
inputdate: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
statusList: [
{
value: '0',
label: '待审核'
},
{
value: '-1',
label: '失败'
},
{
value: '1',
label: '成功'
}
],
levelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
releaseDate: ''
}
},
activated () {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/office/newtopic/list'),
method: 'post',
data: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'title': this.dataForm.title,
'status': this.dataForm.status,
'levels': this.dataForm.levels,
'inputDataStart': this.releaseDate[0],
'inputDataEnd': this.releaseDate[1]
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.$nextTick(() => {
this.$router.push({name: 'newstopic-add-or-update', query: {id: id}})
})
},
// 删除
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.classid
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/office/newtopic/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
}
}
</script>
<template>
<el-dialog
:title="!dataForm.pictureid ? '新增' : '修改'"
:close-on-click-modal='false'
:visible.sync='visible'
>
<div class="mod-config">
<div class="title">{{title}}</div>
<div class="form-list">
<el-form
:model='dataForm'
:rules='dataRule'
ref='dataForm'
@keyup.enter.native='dataFormSubmit()'
label-width='80px'
label-width='100px'
>
<el-form-item label='标题' prop='title'>
<el-form-item label='标题:' prop='title'>
<el-input v-model='dataForm.title' placeholder='请输入标题'></el-input>
</el-form-item>
<el-form-item label='类别' prop='pictureType'>
<el-form-item label='类别:' prop='pictureType'>
<el-select v-model="dataForm.pictureType" placeholder="请选择类别">
<el-option
v-for="item in pictureTypeList"
......@@ -24,45 +22,59 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label='图片地址' prop='picFile'>
<el-form-item label='级别:' prop='piclevel'>
<el-select v-model="dataForm.piclevel" placeholder="请输入级别">
<el-option
v-for="item in piclevelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='显示时间:' prop='showtime' class="setdes">
<el-date-picker
v-model="dataForm.showtime"
value-format='yyyy-MM-dd'
type="date"
placeholder="选择日期">
</el-date-picker>
<span>时间格式为:xxxx/xx/xx</span>
</el-form-item>
<el-form-item label='关键字:' prop='keyword'>
<el-input v-model='dataForm.keyword' placeholder='请输入关键字'></el-input>
</el-form-item>
<el-form-item label='跳转:' prop='jumppath'>
<el-input v-model='dataForm.jumppath' placeholder='请输入跳转'></el-input>
</el-form-item>
<el-form-item label='图片:' prop='picFile'>
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:on-success="handleAvatarSuccess"
:http-request="Upload"
:before-upload="beforeAvatarUpload">
<img v-if="dataForm.picFile" :src="dataForm.picFile" class="avatar">
<img v-if="dialogVisible" :src="imgUrlStr" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- <el-input v-model='dataForm.picFile' placeholder='图片地址'></el-input> -->
</el-form-item>
<el-form-item label='级别' prop='piclevel'>
<el-input v-model='dataForm.piclevel' placeholder='请输入级别'></el-input>
</el-form-item>
<el-form-item label='关键字' prop='keyword'>
<el-input v-model='dataForm.keyword' placeholder='请输入关键字'></el-input>
</el-form-item>
<el-form-item label='跳转路径' prop='jumppath'>
<el-input v-model='dataForm.jumppath' placeholder='请输入跳转路径'></el-input>
</el-form-item>
<el-form-item label='展示时间' prop='showtime'>
<el-input v-model='dataForm.content' placeholder='${column.comments}'></el-input>
</el-form-item>
</el-form>
</div>
<div class="sub-btn">
<span slot='footer' class='dialog-footer'>
<el-button @click='visible = false'>取消</el-button>
<el-button @click='clearInp()'>重置</el-button>
<el-button type='primary' @click='dataFormSubmit()'>确定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data () {
return {
visible: false,
title: '',
dataForm: {
title: '',
pictureType: '',
......@@ -74,10 +86,11 @@ export default {
jumppath: '',
showtime: ''
},
piclevelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
pictureTypeList: [
{
value: '1',
label: '类型1'
label: '图片信息'
}
],
dataRule: {
......@@ -145,13 +158,33 @@ export default {
}
]
},
imgUrl: new FormData()
imgUrl: new FormData(),
imgUrlStr: '',
dialogVisible: false
}
},
beforeCeate () {
// this.$route.meta.title = !this.$route.query.id ? '添加图片资讯' : '修改图片资讯'
// this.title = !this.$route.query.id ? '添加图片资讯' : '修改图片资讯'
},
mounted () {
if (this.$route.query.id) {
this.init(this.$route.query.id)
} else {
this.clearInp()
}
},
activated () {
// this.$route.meta.title = !this.$route.query.id ? '添加图片资讯' : '修改图片资讯'
this.title = !this.$route.query.id ? '添加图片资讯' : '修改图片资讯'
},
created () {
this.$route.meta.title = !this.$route.query.id ? '添加图片资讯' : '修改图片资讯'
// this.title = !this.$route.query.id ? '添加图片资讯' : '修改图片资讯'
},
methods: {
init (id) {
this.dataForm.pictureid = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.pictureid) {
......@@ -166,18 +199,13 @@ export default {
this.dataForm.title = data.picture.title
this.dataForm.pictureType = data.picture.pictureType
this.dataForm.picFile = data.picture.picFile
this.dataForm.minPicFile = data.picture.minPicFile
this.dataForm.editor = data.picture.editor
this.imgUrlStr = data.picture.picFile
this.dialogVisible = true
this.dataForm.inputdate = data.picture.inputdate
this.dataForm.piclevel = data.picture.piclevel
this.dataForm.status = data.picture.status
this.dataForm.keyword = data.picture.keyword
this.dataForm.jumppath = data.picture.jumppath
this.dataForm.content = data.picture.content
this.dataForm.articleId = data.picture.articleId
this.dataForm.showtime = data.picture.showtime
this.dataForm.auditor = data.picture.auditor
this.dataForm.lasteditor = data.picture.lasteditor
}
})
}
......@@ -189,7 +217,7 @@ export default {
if (valid) {
this.$http({
url: this.$http.adornUrl(
`/manage/picture/${!this.dataForm.pictureid ? 'save' : 'update'}`
`/office/picture/${!this.dataForm.pictureid ? 'save' : 'update'}`
),
method: 'post',
data: this.$http.adornData({
......@@ -197,9 +225,7 @@ export default {
title: this.dataForm.title,
pictureType: this.dataForm.pictureType,
picFile: this.dataForm.picFile,
editor: this.dataForm.editor,
piclevel: this.dataForm.piclevel,
status: this.dataForm.status,
keyword: this.dataForm.keyword,
jumppath: this.dataForm.jumppath,
showtime: this.dataForm.showtime
......@@ -211,7 +237,6 @@ export default {
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
......@@ -222,10 +247,6 @@ export default {
}
})
},
// 图片成功
handleAvatarSuccess (res, file) {
this.dataForm.picFile = URL.createObjectURL(file.raw)
},
// 上传之前校验
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
......@@ -240,8 +261,11 @@ export default {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
if (file) {
var windowURL = window.URL || window.webkitURL
this.imgUrlStr = windowURL.createObjectURL(file)
this.dialogVisible = true
this.imgUrl.append('file', file)
// console.log(this.imgUrl.get('file'))
console.log(this.imgUrl.get('file'))
}
},
Upload () {
......@@ -259,33 +283,13 @@ export default {
}).catch(err => {
console.log(err)
})
},
clearInp () {
this.$refs['dataForm'].resetFields()
this.imgUrlStr = ''
this.dialogVisible = false
}
}
}
</script>
<style scoped>
.avatar-uploader /deep/.el-upload {
border: 1px dashed #dcdfe6;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<template>
<div class="mod-config">
<div class="mod-config mod-list-form">
<div class="title">图片资讯管理</div>
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
<el-form-item label='标题' prop='title'>
<el-input size="small" v-model='dataForm.title' placeholder='请输入标题'></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('manage:picture:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('manage:picture:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
<el-form-item label='编辑' prop='editor'>
<el-input size="small" v-model='dataForm.editor' placeholder='请输入编辑' ></el-input>
</el-form-item>
<el-form-item label='关键字' prop='keyword'>
<el-input v-model='dataForm.keyword' placeholder='请输入关键字' size="small"></el-input>
</el-form-item>
<el-form-item label='状态' prop='status'>
<el-select v-model="dataForm.status" placeholder="请选择状态" size="small">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='类别' prop='pictureType'>
<el-select v-model="dataForm.pictureType" placeholder="请选择类别" size="small">
<el-option
v-for="item in pictureTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='级别' prop='pictureLevel'>
<el-select v-model="dataForm.pictureLevel" placeholder="请输入级别" size="small">
<el-option
v-for="item in piclevelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='发布日期' prop='releaseDate'>
<el-date-picker
size="small"
v-model="releaseDate"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-button class="seach-btn" @click="getDataList()" type="primary" size="small">搜索</el-button>
</el-form>
<div class="add-btn">
<el-button v-if="isAuth('manage:picture:save')" type="primary" @click="addOrUpdateHandle()"> + 添加图片</el-button>
</div>
<div class="table-list">
<el-table
tooltip-effect="dark"
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="title"
header-align="center"
align="center"
label="标题">
</el-table-column>
<el-table-column
prop="keyword"
header-align="center"
align="center"
label="关键字">
</el-table-column>
<el-table-column
prop="piclevel"
header-align="center"
align="center"
label="等级">
</el-table-column>
<el-table-column
prop="pictureType"
header-align="center"
align="center"
label="发布类型">
</el-table-column>
<el-table-column
prop="editor"
header-align="center"
align="center"
label="编辑者">
</el-table-column>
<el-table-column
prop="inputDateStart"
header-align="center"
align="center"
label="发布时间">
>
<el-table-column prop="piclevel" header-align="center" label="级别"> </el-table-column>
<el-table-column prop="title" header-align="center" :show-overflow-tooltip="true" label="标题">
<template slot-scope="scope">
<div>
{{scope.row.title}}
</div>
</template>
</el-table-column>
<el-table-column
prop="status"
header-align="center"
align="center"
label="状态">
<el-table-column prop="pictureType" header-align="center" label="分类"> </el-table-column>
<el-table-column prop="showtime" header-align="center" sortable show-overflow-tooltip label="显示时间"> </el-table-column>
<el-table-column prop="inputdate" header-align="center" sortable label="发布时间"> </el-table-column>
<el-table-column prop="keyword" header-align="center" label="关键字"> </el-table-column>
<el-table-column prop="editor" header-align="center" label="编辑"> </el-table-column>
<el-table-column prop="lasteditor" header-align="center" label="最后编辑"> </el-table-column>
<el-table-column prop="auditor" header-align="center" label="审核人"> </el-table-column>
<el-table-column prop="status" header-align="center" label="状态">
<template slot-scope="scope">
<div>
<span v-if="scope.row.status === 0">待审核</span>
<span v-if="scope.row.status === -1">失败</span>
<span v-if="scope.row.status === 1">成功</span>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
<el-table-column fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.pictureid)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.pictureid)">删除</el-button>
<el-button type="text" @click="checkHandle(scope.row.pictureid,1)">[成功]</el-button>
<el-button type="text" @click="checkHandle(scope.row.pictureid,-1)">[失败]</el-button>
<br />
<el-button type="text" >预览</el-button>
<el-button type="text" @click="addOrUpdateHandle(scope.row.pictureid)">修改</el-button>
<el-button type="text" @click="deleteHandle(scope.row.pictureid)">删除</el-button>
</template>
</el-table-column>
</el-table>
......@@ -87,18 +111,21 @@
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</div>
</template>
<script>
import AddOrUpdate from './picture-add-or-update'
export default {
data () {
return {
dataForm: {
key: ''
title: '',
pictureLevel: '0',
editor: '',
keyword: '',
status: '',
pictureType: ''
},
dataList: [],
pageIndex: 1,
......@@ -106,12 +133,31 @@
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
statusList: [
{
value: '0',
label: '待审核'
},
components: {
AddOrUpdate
{
value: '-1',
label: '失败'
},
{
value: '1',
label: '成功'
}
],
piclevelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
pictureTypeList: [
{
value: '1',
label: '图片信息'
}
],
releaseDate: ''
}
},
activated () {
this.getDataList()
},
......@@ -125,7 +171,14 @@
data: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key
'title': this.dataForm.title,
'pictureLevel': this.dataForm.pictureLevel,
'editor': this.dataForm.editor,
'keyword': this.dataForm.keyword,
'status': this.dataForm.status,
'pictureType': this.dataForm.pictureType,
'inputDataStart': this.releaseDate[0],
'inputDataEnd': this.releaseDate[1]
})
}).then(({data}) => {
if (data && data.code === 0) {
......@@ -155,9 +208,8 @@
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
this.$router.push({name: 'picture-add-or-update', query: {id: id}})
})
},
// 删除
......@@ -188,8 +240,52 @@
this.$message.error(data.msg)
}
})
}).catch(e => e)
},
// 审核
checkHandle (id, status) {
let str = ''
if (status === 1) {
str = '成功'
} else {
str = '失败'
}
this.$confirm(`确定对[id=${id}]进行['审核${str}']操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/office/picture/verifyPicture'),
method: 'post',
data: this.$http.adornData({
'pictureid': id,
'status': status
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
}).catch(e => e)
}
}
}
</script>
<style scoped>
.el-select-dropdown__item{
font-size: 12px!important;
}
.el-table .cell, .el-table th div {
padding-right: 0;
}
</style>
\ No newline at end of file
<template>
<el-dialog
:title="!dataForm.tId ? '新增' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-form-item label="" prop="tType">
<el-input v-model="dataForm.tType" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="tTitle">
<el-input v-model="dataForm.tTitle" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="tContent">
<el-input v-model="dataForm.tContent" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="tAtime">
<el-input v-model="dataForm.tAtime" placeholder=""></el-input>
</el-form-item>
<el-form-item label="" prop="levels">
<el-input v-model="dataForm.levels" placeholder=""></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
visible: false,
dataForm: {
tId: 0,
tType: '',
tTitle: '',
tContent: '',
tAtime: '',
levels: ''
},
dataRule: {
tType: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
tTitle: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
tContent: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
tAtime: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
levels: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
}
}
},
methods: {
init (id) {
this.dataForm.tId = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.tId) {
this.$http({
url: this.$http.adornUrl(`/manage/template/info/${this.dataForm.tId}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.tType = data.template.tType
this.dataForm.tTitle = data.template.tTitle
this.dataForm.tContent = data.template.tContent
this.dataForm.tAtime = data.template.tAtime
this.dataForm.levels = data.template.levels
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/manage/template/${!this.dataForm.tId ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'tId': this.dataForm.tId || undefined,
'tType': this.dataForm.tType,
'tTitle': this.dataForm.tTitle,
'tContent': this.dataForm.tContent,
'tAtime': this.dataForm.tAtime,
'levels': this.dataForm.levels
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
}
}
}
</script>
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('manage:template:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('manage:template:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="tId"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="tType"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="tTitle"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="tContent"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="tAtime"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
prop="levels"
header-align="center"
align="center"
label="">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.tId)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.tId)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './template-add-or-update'
export default {
data () {
return {
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate
},
activated () {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/manage/template/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.tId
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/manage/template/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
}
}
</script>
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
import ueditor from 'ueditor'
export default {
data () {
return {
editor: null
}
},
props: {
value: '',
config: {}
},
mounted () {
this.ue = ueditor.getEditor('editor', this.config)
// this.ue.addListener('ready', function () { this.ue.setContent(this.value) })
},
destroyed () {
this.ue.destroy()
},
methods: {
getUEContent () {
// 获取内容方法
return this.ue.getContent()
},
setClearUEContent (text) {
// 获取内容方法
return this.ue.setContent(text)
}
}
}
</script>
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment