Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
bd607b47
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
bd607b47
编写于
6月 14, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refine code && document
上级
f82ec2d5
变更
26
隐藏空白更改
内联
并排
Showing
26 changed file
with
142 addition
and
150 deletion
+142
-150
README.md
README.md
+8
-7
src/components/Charts/mixchart.vue
src/components/Charts/mixchart.vue
+0
-1
src/views/charts/index.vue
src/views/charts/index.vue
+1
-1
src/views/charts/keyboard.vue
src/views/charts/keyboard.vue
+5
-6
src/views/charts/keyboard2.vue
src/views/charts/keyboard2.vue
+5
-6
src/views/charts/line.vue
src/views/charts/line.vue
+5
-8
src/views/charts/mixchart.vue
src/views/charts/mixchart.vue
+6
-7
src/views/components/countTo.vue
src/views/components/countTo.vue
+3
-3
src/views/components/dndlist.vue
src/views/components/dndlist.vue
+1
-1
src/views/components/index.vue
src/views/components/index.vue
+2
-2
src/views/components/jsoneditor.vue
src/views/components/jsoneditor.vue
+4
-3
src/views/components/markdown.vue
src/views/components/markdown.vue
+4
-4
src/views/errlog/index.vue
src/views/errlog/index.vue
+5
-11
src/views/error/401.vue
src/views/error/401.vue
+34
-34
src/views/error/404.vue
src/views/error/404.vue
+3
-1
src/views/example/table/dynamictable.vue
src/views/example/table/dynamictable.vue
+15
-16
src/views/example/table/table.vue
src/views/example/table/table.vue
+12
-13
src/views/excel/index.vue
src/views/excel/index.vue
+1
-0
src/views/layout/AppMain.vue
src/views/layout/AppMain.vue
+1
-3
src/views/layout/Layout.vue
src/views/layout/Layout.vue
+2
-2
src/views/layout/Levelbar.vue
src/views/layout/Levelbar.vue
+1
-0
src/views/layout/Navbar.vue
src/views/layout/Navbar.vue
+4
-3
src/views/layout/Sidebar.vue
src/views/layout/Sidebar.vue
+1
-0
src/views/layout/SidebarItem.vue
src/views/layout/SidebarItem.vue
+1
-0
src/views/permission/index.vue
src/views/permission/index.vue
+5
-5
src/views/theme/index.vue
src/views/theme/index.vue
+13
-13
未找到文件。
README.md
浏览文件 @
bd607b47
...
...
@@ -8,11 +8,9 @@
**注意:该项目目前使用element-ui@1.3.3版本,所以最低兼容 Vue 2.3.0**
## 前言
> 这半年来一直在用vue写管理后台,目前后台已经有
七十多个页面,十几种权限,但维护成本依然很低,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios
.由于是个人项目,所以数据请求都是用了mockjs模拟。注意:在次项目基础上改造开发时请移除mock文件。
> 这半年来一直在用vue写管理后台,目前后台已经有
百来个个页面,十几种权限,但维护成本依然很低,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包
.由于是个人项目,所以数据请求都是用了mockjs模拟。注意:在次项目基础上改造开发时请移除mock文件。
后续会出一系列的教程配套文章,如如何从零构建后台项目框架,如何做完整的用户系统(如权限验证,二次登录等),如何二次开发组件(如富文本),如何整合七牛等等文章,各种后台开发经验等等。莫急~~
相应需求,开了一个qq群 591724180 方便大家交流
写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目:
-
[
wiki
](
https://github.com/PanJiaChen/vue-element-admin/wiki
)
-
[
手摸手,带你用 vue 撸后台 系列一(基础篇)
](
https://juejin.im/post/59097cd7a22b9d0065fb61d2
)
...
...
@@ -20,12 +18,14 @@
-
[
手摸手,带你用 vue 撸后台 系列三 (实战篇)
](
https://juejin.im/post/593121aa0ce4630057f70d35
)
-
[
手摸手,带你封装一个vue component
](
https://segmentfault.com/a/1190000009090836
)
相应需求,开了一个qq群 591724180 方便大家交流
**如有问题请先看上述文章和Wiki,若不能满足,欢迎issue和pr~**
**该项目并不是一个脚手架,更倾向于是一个集成解决方案方案**
**该项目不支持低版本游览器,有需求请自行添加polyfill[详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
## 功能
-
登录/注销
...
...
@@ -47,6 +47,7 @@
-
table example
-
动态table example
-
拖拽table example
-
内联编辑table example
-
form example
-
多环境发布
-
dashboard
...
...
src/components/Charts/mixchart.vue
浏览文件 @
bd607b47
...
...
@@ -51,7 +51,6 @@
backgroundColor
:
'
#344b58
'
,
title
:
{
text
:
'
统计
'
,
subtext
:
'
from http://gallery.echartsjs.com
'
,
x
:
'
4%
'
,
textStyle
:
{
color
:
'
#fff
'
,
...
...
src/views/charts/index.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
>
<code>
这里的所有的图表都基于
echarts,实例代码来源
<a
href=
'http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all'
target=
'_blank'
>
gallery
</a><br/>
其实echarts封装的很好了,用vue封装是很简单的事情,建议大家自己来封装。
这里的所有的图表都基于
ECharts,实例代码来源
<a
href=
'http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all'
target=
'_blank'
>
gallery
</a><br/>
其实ECharts封装的很好了,用vue封装是很简单的事情,建议大家自己来封装。
<a
target=
'_blank'
class=
'lin'
href=
"https://segmentfault.com/a/1190000009762198#articleHeader16"
>
相关教程
</a>
</code>
</div>
</
template
>
src/views/charts/keyboard.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<div
class=
'chart-container'
>
<keyboardChart
height=
'100%'
width=
'100%'
/>
<keyboardChart
height=
'100%'
width=
'100%'
/>
</div>
</div>
</
template
>
<
script
>
import
keyboardChart
from
'
components/Charts/keyboard
'
;
export
default
{
components
:
{
keyboardChart
}
};
...
...
@@ -16,9 +15,9 @@
<
style
scoped
>
.chart-container
{
position
:
relative
;
width
:
100%
;
height
:
90%
;
position
:
relative
;
width
:
100%
;
height
:
90%
;
}
</
style
>
src/views/charts/keyboard2.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<div
class=
'chart-container'
>
<keyboardChart2
id=
'apple'
height=
'100%'
width=
'100%'
/>
<keyboardChart2
id=
'apple'
height=
'100%'
width=
'100%'
/>
</div>
</div>
</
template
>
<
script
>
import
keyboardChart2
from
'
components/Charts/keyboard2
'
;
export
default
{
components
:
{
keyboardChart2
}
};
...
...
@@ -16,9 +15,9 @@
<
style
scoped
>
.chart-container
{
position
:
relative
;
width
:
100%
;
height
:
90%
;
position
:
relative
;
width
:
100%
;
height
:
90%
;
}
</
style
>
src/views/charts/line.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
https://github.com/ecomfe/echarts/blob/master/index.js
http://echarts.baidu.com/tutorial.html
<div
class=
'chart-container'
>
<lineMarker
height=
'100%'
width=
'100%'
/>
<lineMarker
height=
'100%'
width=
'100%'
/>
</div>
</div>
</
template
>
<
script
>
import
lineMarker
from
'
components/Charts/lineMarker
'
;
export
default
{
components
:
{
lineMarker
}
};
...
...
@@ -18,9 +15,9 @@
<
style
scoped
>
.chart-container
{
position
:
relative
;
width
:
100%
;
height
:
80%
;
position
:
relative
;
width
:
100%
;
height
:
80%
;
}
</
style
>
src/views/charts/mixchart.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<div
class=
'chart-container'
>
<mixchart
id=
'apple'
height=
'100%'
width=
'100%'
/>
<mixchart
id=
'apple'
height=
'100%'
width=
'100%'
/>
</div>
</div>
</
template
>
<
script
>
import
mixchart
from
'
components/Charts/mixchart
'
;
export
default
{
components
:
{
mixchart
}
};
...
...
@@ -16,10 +15,10 @@
<
style
scoped
>
.chart-container
{
position
:
relative
;
width
:
100%
;
height
:
90%
;
padding-bottom
:
40px
;
position
:
relative
;
width
:
100%
;
height
:
90%
;
padding-bottom
:
40px
;
}
</
style
>
src/views/components/countTo.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
>
<code>
countTo 组件
<a
href=
'https://github.com/PanJiaChen/vue-countTo'
target=
'_blank'
>
线上地址
</a></code>
<code>
<a
href=
'https://github.com/PanJiaChen/vue-countTo'
target=
'_blank'
>
countTo component
</a></code>
<count-to
ref=
'example'
class=
'example'
:start-val=
'_startVal'
:end-val=
'_endVal'
:duration=
'_duration'
:decimals=
'_decimals'
<count-to
ref=
'example'
class=
'example'
:start-val=
'_startVal'
:end-val=
'_endVal'
:duration=
'_duration'
:decimals=
'_decimals'
:separator=
'_separator'
:prefix=
'_prefix'
:suffix=
'_suffix'
:autoplay=
'false'
/>
<div
style=
'margin-left: 25%;margin-top: 40px;'
>
<label
class=
"label"
for=
"startValInput"
>
startVal:
<input
type=
"number"
v-model.number=
'setStartVal'
name=
'startValInput'
/></label>
...
...
@@ -20,9 +20,9 @@
:separator=
'
{{
_separator
}}
'
:prefix=
'
{{
_prefix
}}
'
:suffix=
'
{{
_suffix
}}
'
:autoplay=false
>
</code>
</div>
</
template
>
<
script
>
import
countTo
from
'
vue-count-to
'
;
export
default
{
components
:
{
countTo
},
data
()
{
...
...
src/views/components/dndlist.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
>
<code>
拖拽https://github.com/SortableJS/Vue.Draggable 项目:Vue.Draggable
</code>
<code>
drag-list base on
<a
href=
"https://github.com/SortableJS/Vue.Draggable"
target=
"_blank"
>
Vue.Draggable
</a>
</code>
<div
class=
"editor-container"
>
<DndList
:list1=
"list1"
:list2=
"list2"
list1Title=
"头条列表"
list2Title=
"文章池"
/>
</div>
...
...
src/views/components/index.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
>
<code>
这里暂时列出了自己在项目中
自己封装和用到的组件,如有补充可以提
<a
href=
'https://github.com/PanJiaChen/vue-element-admin/issues'
target=
'_blank'
>
issue
</a><br/>
我个人崇尚自己封装组件,因为很多组件会和业务后高度的耦合,
很多时候第三方封装是满足不了需求的
,如有需要可以看楼主之前写过的一篇
<a
href=
'https://segmentfault.com/a/1190000009090836'
target=
'_blank'
>
文章
</a>
<code>
这里暂时列出了自己在项目中
用到的组件和一些自己封装的组件,如有补充可以提
<a
target=
'_blank'
href=
'https://github.com/PanJiaChen/vue-element-admin/issues'
>
issue
</a><br/>
我个人崇尚自己封装组件,因为很多组件会和业务后高度的耦合,
而且第三方封装的组件灵活性可控性都不高
,如有需要可以看楼主之前写过的一篇
<a
href=
'https://segmentfault.com/a/1190000009090836'
target=
'_blank'
>
文章
</a>
</code>
</div>
</
template
>
src/views/components/jsoneditor.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<code>
有校验
</code>
<code>
jsonEditor is base on
<a
href=
"https://github.com/codemirror/CodeMirror"
target=
"_blank"
>
CodeMirrorr
</a>
,lint base on json-lint
</code>
<div
class=
"editor-container"
>
<json-editor
ref=
"jsonEditor"
v-model=
"value"
></json-editor>
</div>
</div>
</
template
>
<
script
>
import
jsonEditor
from
'
components/jsonEditor
'
;
const
jsonData
=
'
[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]
'
;
...
...
@@ -21,8 +22,8 @@
<
style
scoped
>
.editor-container
{
position
:
relative
;
height
:
100%
;
position
:
relative
;
height
:
100%
;
}
</
style
>
src/views/components/markdown.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"components-container"
>
<code>
公司做的后台主要是一个cms系统,公司也是以自媒体为核心的,所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路,市面上常见的富文本都基本用过了,最终选择了tinymce
</code>
<code>
Markdown 我们这里选用了
<a
href=
"https://github.com/sparksuite/simplemde-markdown-editor"
target=
"_blank"
>
simplemde-markdown-editor
</a>
,简单的用vue封装了一下
<a
target=
'_blank'
href=
'https://segmentfault.com/a/1190000009762198#articleHeader14'
>
相关文章
</a>
</code>
<div
class=
"editor-container"
>
<MdEditor
id=
'contentEditor'
ref=
"contentEditor"
v-model=
'content'
:height=
"300"
:zIndex=
'20'
></MdEditor>
<MdEditor
id=
'contentEditor'
ref=
"contentEditor"
v-model=
'content'
:height=
"300"
:zIndex=
'20'
></MdEditor>
</div>
<el-button
@
click=
'markdown2Html'
style=
"margin-top:80px;"
type=
"primary"
>
转为HTML
<i
class=
"el-icon-document el-icon--right"
></i></el-button>
<div
v-html=
"html"
></div>
</div>
</
template
>
<
script
>
import
MdEditor
from
'
components/MdEditor
'
;
export
default
{
components
:
{
MdEditor
},
data
()
{
return
{
content
:
'
Simplemde
'
,
content
:
'
##
Simplemde
'
,
html
:
''
}
},
...
...
src/views/errlog/index.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"errPage-container"
>
<!--error code-->
<err-code/>
<!--error code-->
<err-code/>
<h3>
请点击右上角bug小图表
</h3>
<code>
<code>
现在的管理后台基本都是spa的形式了,它增强了用户体验,但同时也会怎增加页面出问题的可能性,可能一个小小的疏忽就导致整个页面的死锁。好在Vue官网提供了一个方法来捕获处理异常
</code>
<a
href=
"#"
><img
src=
'../../../documentImg/code1.png'
></a>
</div>
</
template
>
<
script
>
import
errCode
from
'
./errcode
'
;
// import code1Img from
export
default
{
components
:
{
errCode
},
data
()
{
return
{
}
},
methods
:
{
back
()
{
this
.
$router
.
go
(
-
1
)
...
...
@@ -28,6 +21,7 @@
}
};
</
script
>
<
style
scoped
>
.errPage-container
{
padding
:
30px
;
...
...
src/views/error/401.vue
浏览文件 @
bd607b47
...
...
@@ -4,7 +4,7 @@
<el-row>
<el-col
:span=
"12"
>
<h1
class=
"text-jumbo text-ginormous"
>
Oops!
</h1>
gif来源
<a
href=
'https://zh.airbnb.com/'
target=
'_blank'
>
airbnb
</a>
页面
gif来源
<a
href=
'https://zh.airbnb.com/'
target=
'_blank'
>
airbnb
</a>
页面
<h2>
你没有权限去该页面
</h2>
<h6>
如有不满请联系你领导
</h6>
<ul
class=
"list-unstyled"
>
...
...
@@ -26,9 +26,9 @@
</el-dialog>
</div>
</
template
>
<
script
>
import
errGif
from
'
assets/401.gif
'
;
export
default
{
data
()
{
return
{
...
...
@@ -50,38 +50,38 @@
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.errPage-container
{
width
:
800px
;
margin
:
100px
auto
;
.pan-back-btn
{
background
:
#008489
;
color
:
#fff
;
}
.pan-gif
{
margin
:
0
auto
;
display
:
block
;
}
.pan-img
{
display
:
block
;
margin
:
0
auto
;
}
.text-jumbo
{
font-size
:
60px
;
font-weight
:
700
;
color
:
#484848
;
}
.list-unstyled
{
font-size
:
14px
;
li
{
padding-bottom
:
5px
;
}
a
{
color
:
#008489
;
text-decoration
:
none
;
&
:hover
{
text-decoration
:
underline
;
}
}
.errPage-container
{
width
:
800px
;
margin
:
100px
auto
;
.pan-back-btn
{
background
:
#008489
;
color
:
#fff
;
}
.pan-gif
{
margin
:
0
auto
;
display
:
block
;
}
.pan-img
{
display
:
block
;
margin
:
0
auto
;
}
.text-jumbo
{
font-size
:
60px
;
font-weight
:
700
;
color
:
#484848
;
}
.list-unstyled
{
font-size
:
14px
;
li
{
padding-bottom
:
5px
;
}
a
{
color
:
#008489
;
text-decoration
:
none
;
&
:hover
{
text-decoration
:
underline
;
}
}
}
}
</
style
>
src/views/error/404.vue
浏览文件 @
bd607b47
...
...
@@ -9,7 +9,7 @@
</div>
<div
class=
"bullshit"
>
<div
class=
"bullshit__oops"
>
OOPS!
</div>
<div
class=
"bullshit__info"
>
版权所有
<a
class=
'link-type'
href=
'https://wallstreetcn.com'
target=
'_blank'
>
华尔街见闻
</a></div>
<div
class=
"bullshit__info"
>
版权所有
<a
class=
'link-type'
href=
'https://wallstreetcn.com'
target=
'_blank'
>
华尔街见闻
</a></div>
<div
class=
"bullshit__headline"
>
{{
message
}}
</div>
<div
class=
"bullshit__info"
>
请检查您输入的网址是否正确,请点击以下按钮返回主页或者发送错误报告
</div>
<a
href=
"/"
class=
"bullshit__return-home"
>
返回首页
</a>
...
...
@@ -17,6 +17,7 @@
</div>
</div>
</
template
>
<
script
>
export
default
{
computed
:
{
...
...
@@ -26,6 +27,7 @@
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.wscn-http404
{
position
:
relative
;
...
...
src/views/example/table/dynamictable.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"app-container"
>
<div
class=
"filter-container"
>
<el-checkbox-group
v-model=
"formThead"
>
<el-checkbox-group
v-model=
"formThead"
>
<el-checkbox
label=
"apple"
>
apple
</el-checkbox>
<el-checkbox
label=
"banana"
>
banana
</el-checkbox>
<el-checkbox
label=
"orange"
>
orange
</el-checkbox>
...
...
@@ -18,22 +18,21 @@
</el-table>
</div>
</template>
<
script
>
export
default
{
data
()
{
return
{
tableData
:
[{
name
:
'
水果
'
,
list
:
[{
name
:
'
apple
'
,
value
:
10
},
{
name
:
'
banana
'
,
value
:
20
},
{
name
:
'
orange
'
,
value
:
20
}]
},
{
name
:
'
水果2
'
,
list
:
[{
name
:
'
apple2
'
,
value
:
12
},
{
name
:
'
banana2
'
,
value
:
22
},
{
name
:
'
orange
'
,
value
:
20
}]
}],
formThead
:
[
'
apple
'
,
'
banana
'
]
<
script
>
export
default
{
data
()
{
return
{
tableData
:
[{
name
:
'
水果
'
,
list
:
[{
name
:
'
apple
'
,
value
:
10
},
{
name
:
'
banana
'
,
value
:
20
},
{
name
:
'
orange
'
,
value
:
20
}]
},
{
name
:
'
水果2
'
,
list
:
[{
name
:
'
apple2
'
,
value
:
12
},
{
name
:
'
banana2
'
,
value
:
22
},
{
name
:
'
orange
'
,
value
:
20
}]
}],
formThead
:
[
'
apple
'
,
'
banana
'
]
}
}
}
};
};
</
script
>
src/views/example/table/table.vue
浏览文件 @
bd607b47
...
...
@@ -22,10 +22,10 @@
<el-button
class=
"filter-item"
type=
"primary"
v-waves
icon=
"search"
@
click=
"handleFilter"
>
搜索
</el-button>
<el-button
class=
"filter-item"
style=
"margin-left: 10px;"
@
click=
"handleCreate"
type=
"primary"
icon=
"edit"
>
添加
</el-button>
<el-button
class=
"filter-item"
type=
"primary"
icon=
"document"
@
click=
"handleDownload"
>
导出
</el-button>
<el-checkbox
class=
"filter-item"
@
change=
'tableKey=tableKey+1'
v-model=
"showAuditor"
>
显示审核人
</el-checkbox>
<el-checkbox
class=
"filter-item"
@
change=
'tableKey=tableKey+1'
v-model=
"showAuditor"
>
显示审核人
</el-checkbox>
</div>
<el-table
:key=
'tableKey'
:data=
"list"
v-loading.body=
"listLoading"
border
fit
highlight-current-row
style=
"width: 100%"
>
<el-table
:key=
'tableKey'
:data=
"list"
v-loading.body=
"listLoading"
border
fit
highlight-current-row
style=
"width: 100%"
>
<el-table-column
align=
"center"
label=
"序号"
width=
"65"
>
<template
scope=
"scope"
>
...
...
@@ -58,10 +58,9 @@
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
width
=
"
80px
"
label
=
"
重要性
"
>
<
template
scope
=
"
scope
"
>
<
wscn
-
icon
-
svg
v
-
for
=
"
n in +scope.row.importance
"
icon
-
class
=
"
wujiaoxing
"
class
=
"
meta-item__icon
"
:
key
=
"
n
"
/>
<
wscn
-
icon
-
svg
v
-
for
=
"
n in +scope.row.importance
"
icon
-
class
=
"
wujiaoxing
"
class
=
"
meta-item__icon
"
:
key
=
"
n
"
/>
<
/template
>
<
/el-table-column
>
...
...
@@ -71,28 +70,28 @@
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
class
-
name
=
"
status-col
"
label
=
"
状态
"
width
=
"
90
"
>
<
el
-
table
-
column
class
-
name
=
"
status-col
"
label
=
"
状态
"
width
=
"
90
"
>
<
template
scope
=
"
scope
"
>
<
el
-
tag
:
type
=
"
scope.row.status | statusFilter
"
>
{{
scope
.
row
.
status
}}
<
/el-tag
>
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
align
=
"
center
"
label
=
"
操作
"
width
=
"
150
"
>
<
el
-
table
-
column
align
=
"
center
"
label
=
"
操作
"
width
=
"
150
"
>
<
template
scope
=
"
scope
"
>
<
el
-
button
v
-
if
=
"
scope.row.status!='published'
"
size
=
"
small
"
type
=
"
success
"
@
click
=
"
handleModifyStatus(scope.row,'published')
"
>
发布
<
/el-button
>
<
el
-
button
v
-
if
=
"
scope.row.status!='draft'
"
size
=
"
small
"
@
click
=
"
handleModifyStatus(scope.row,'draft')
"
>
草稿
<
/el-button
>
<
el
-
button
v
-
if
=
"
scope.row.status!='deleted'
"
size
=
"
small
"
type
=
"
danger
"
@
click
=
"
handleModifyStatus(scope.row,'deleted')
"
>
删除
<
/el-button
>
<
/el-button
>
<
/template
>
<
/el-table-column
>
<
/el-table
>
<
div
v
-
show
=
"
!listLoading
"
class
=
"
pagination-container
"
>
<
el
-
pagination
@
size
-
change
=
"
handleSizeChange
"
@
current
-
change
=
"
handleCurrentChange
"
:
current
-
page
.
sync
=
"
listQuery.page
"
:
page
-
sizes
=
"
[10,20,30, 50]
"
:
page
-
size
=
"
listQuery.limit
"
layout
=
"
total, sizes, prev, pager, next, jumper
"
:
total
=
"
total
"
>
<
el
-
pagination
@
size
-
change
=
"
handleSizeChange
"
@
current
-
change
=
"
handleCurrentChange
"
:
current
-
page
.
sync
=
"
listQuery.page
"
:
page
-
size
s
=
"
[10,20,30, 50]
"
:
page
-
size
=
"
listQuery.limit
"
layout
=
"
total, sizes, prev, pager, next, jumper
"
:
total
=
"
total
"
>
<
/el-pagination
>
<
/div
>
...
...
@@ -138,14 +137,14 @@
<
/el-dialog
>
<
el
-
dialog
title
=
"
阅读数统计
"
:
visible
.
sync
=
"
dialogPvVisible
"
size
=
"
small
"
>
<
el
-
table
:
data
=
"
pvData
"
border
fit
highlight
-
current
-
row
style
=
"
width: 100%
"
>
<
el
-
table
-
column
prop
=
"
key
"
label
=
"
渠道
"
>
<
/el-table-column
>
<
el
-
table
-
column
prop
=
"
pv
"
label
=
"
pv
"
>
<
/el-table-column
>
<
el
-
table
:
data
=
"
pvData
"
border
fit
highlight
-
current
-
row
style
=
"
width: 100%
"
>
<
el
-
table
-
column
prop
=
"
key
"
label
=
"
渠道
"
>
<
/el-table-column
>
<
el
-
table
-
column
prop
=
"
pv
"
label
=
"
pv
"
>
<
/el-table-column
>
<
/el-table
>
<
span
slot
=
"
footer
"
class
=
"
dialog-footer
"
>
<
el
-
button
type
=
"
primary
"
@
click
=
"
dialogPvVisible = false
"
>
确
定
<
/el-button
>
<
/span
>
<
/el-dialog
>
<
/el-dialog
>
<
/div
>
<
/template
>
...
...
src/views/excel/index.vue
浏览文件 @
bd607b47
...
...
@@ -32,6 +32,7 @@
</el-table>
</div>
</template>
<
script
>
import
{
getList
}
from
'
api/article
'
;
export
default
{
...
...
src/views/layout/AppMain.vue
浏览文件 @
bd607b47
...
...
@@ -11,9 +11,7 @@
name
:
'
AppMain
'
,
computed
:
{
key
()
{
return
this
.
$route
.
name
!==
undefined
?
this
.
$route
.
name
+
+
new
Date
()
:
this
.
$route
+
+
new
Date
()
return
this
.
$route
.
name
!==
undefined
?
this
.
$route
.
name
+
+
new
Date
()
:
this
.
$route
+
+
new
Date
()
}
}
}
...
...
src/views/layout/Layout.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"app-wrapper"
:class=
"
{hideSidebar:!sidebar.opened}">
<div
class=
"sidebar-wrapper"
>
<Sidebar
class=
"sidebar-container"
/>
<Sidebar
class=
"sidebar-container"
/>
</div>
<div
class=
"main-container"
>
<Navbar/>
...
...
@@ -27,9 +27,9 @@
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
@import
"src/styles/mixin.scss"
;
.app-wrapper
{
@include
clearfix
;
position
:
relative
;
...
...
src/views/layout/Levelbar.vue
浏览文件 @
bd607b47
...
...
@@ -34,6 +34,7 @@
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.app-levelbar.el-breadcrumb
{
display
:
inline-block
;
...
...
src/views/layout/Navbar.vue
浏览文件 @
bd607b47
...
...
@@ -6,15 +6,15 @@
<el-dropdown
class=
"avatar-container"
trigger=
"click"
>
<div
class=
"avatar-wrapper"
>
<img
class=
"user-avatar"
:src=
"avatar+'?imageView2/1/w/80/h/80'"
>
<i
class=
"el-icon-caret-bottom"
/>
<i
class=
"el-icon-caret-bottom"
/>
</div>
<el-dropdown-menu
class=
"user-dropdown"
slot=
"dropdown"
>
<router-link
class=
'inlineBlock'
to=
"/"
>
<router-link
class=
'inlineBlock'
to=
"/"
>
<el-dropdown-item>
首页
</el-dropdown-item>
</router-link>
<router-link
class=
'inlineBlock'
to=
"/admin/profile"
>
<router-link
class=
'inlineBlock'
to=
"/admin/profile"
>
<el-dropdown-item>
设置
</el-dropdown-item>
...
...
@@ -62,6 +62,7 @@
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.navbar
{
height
:
50px
;
...
...
src/views/layout/Sidebar.vue
浏览文件 @
bd607b47
...
...
@@ -16,6 +16,7 @@
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.el-menu
{
min-height
:
100%
;
...
...
src/views/layout/SidebarItem.vue
浏览文件 @
bd607b47
...
...
@@ -34,6 +34,7 @@
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.wscn-icon
{
margin-right
:
10px
;
...
...
src/views/permission/index.vue
浏览文件 @
bd607b47
<
template
>
<div
class=
"app-container"
>
<div
style=
'margin-bottom:15px;'
>
你的权限:
{{
roles
}}
</div>
切换权限:
<el-radio-group
v-model=
"role"
>
<el-radio-button
label=
"editor"
></el-radio-button>
</el-radio-group>
<div
style=
'margin-bottom:15px;'
>
你的权限:
{{
roles
}}
</div>
切换权限:
<el-radio-group
v-model=
"role"
>
<el-radio-button
label=
"editor"
></el-radio-button>
</el-radio-group>
</div>
</
template
>
...
...
src/views/theme/index.vue
浏览文件 @
bd607b47
...
...
@@ -76,17 +76,17 @@ export default {
</
script
>
<
style
scoped
>
.box-card
{
width
:
400px
;
margin
:
20px
auto
;
}
.block
{
padding
:
30px
24px
;
}
.alert-item
{
margin-bottom
:
10px
;
}
.tag-item
{
margin-right
:
15px
;
}
.box-card
{
width
:
400px
;
margin
:
20px
auto
;
}
.block
{
padding
:
30px
24px
;
}
.alert-item
{
margin-bottom
:
10px
;
}
.tag-item
{
margin-right
:
15px
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录