refactor
This commit is contained in:
Pan
花裤衩
parent
b98860ace1
commit
f7aee3b5a3
|
|
@ -12,5 +12,4 @@
|
|||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,25 @@
|
|||
import fetch from 'utils/fetch'
|
||||
import fetch from '@/utils/fetch'
|
||||
|
||||
export function getList() {
|
||||
export function fetchList(query) {
|
||||
return fetch({
|
||||
url: '/article/list',
|
||||
method: 'get'
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getArticle() {
|
||||
export function fetchArticle() {
|
||||
return fetch({
|
||||
url: '/article/detail',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchPv(pv) {
|
||||
return fetch({
|
||||
url: '/article/pv',
|
||||
method: 'get',
|
||||
params: { pv }
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
import fetch from 'utils/fetch'
|
||||
|
||||
export function fetchList(query) {
|
||||
return fetch({
|
||||
url: '/article_table/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchPv(pv) {
|
||||
return fetch({
|
||||
url: '/article_table/pv',
|
||||
method: 'get',
|
||||
params: { pv }
|
||||
})
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import fetch from 'utils/fetch'
|
||||
import fetch from '@/utils/fetch'
|
||||
|
||||
export function loginByUsername(username, password) {
|
||||
const data = {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import fetch from 'utils/fetch'
|
||||
import fetch from '@/utils/fetch'
|
||||
|
||||
export function getToken() {
|
||||
return fetch({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import fetch from 'utils/fetch'
|
||||
import fetch from '@/utils/fetch'
|
||||
|
||||
export function userSearch(name) {
|
||||
return fetch({
|
||||
|
|
|
|||
13
src/components/Github/index.vue
Normal file
13
src/components/Github/index.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
<script>
|
||||
import screenfull from 'screenfull'
|
||||
|
||||
export default {
|
||||
name: 'hamburger',
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
|
||||
<script>
|
||||
import Todo from './Todo.vue'
|
||||
|
||||
const STORAGE_KEY = 'todos'
|
||||
const filters = {
|
||||
all: todos => todos,
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<script>
|
||||
// 预览效果见付费文章
|
||||
import { getToken } from 'api/qiniu'
|
||||
import { getToken } from '@/api/qiniu'
|
||||
|
||||
export default {
|
||||
name: 'singleImageUpload',
|
||||
|
|
|
|||
|
|
@ -17,39 +17,39 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// 预览效果见专题
|
||||
import { getToken } from 'api/qiniu'
|
||||
import { getToken } from '@/api/qiniu'
|
||||
|
||||
export default {
|
||||
name: 'singleImageUpload2',
|
||||
props: {
|
||||
value: String
|
||||
name: 'singleImageUpload2',
|
||||
props: {
|
||||
value: String
|
||||
},
|
||||
computed: {
|
||||
imageUrl() {
|
||||
return this.value
|
||||
computed: {
|
||||
imageUrl() {
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tempUrl: '',
|
||||
dataObj: { token: '', key: '' }
|
||||
data() {
|
||||
return {
|
||||
tempUrl: '',
|
||||
dataObj: { token: '', key: '' }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rmImage() {
|
||||
this.emitInput('')
|
||||
methods: {
|
||||
rmImage() {
|
||||
this.emitInput('')
|
||||
},
|
||||
emitInput(val) {
|
||||
this.$emit('input', val)
|
||||
emitInput(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
handleImageScucess() {
|
||||
this.emitInput(this.tempUrl)
|
||||
handleImageScucess() {
|
||||
this.emitInput(this.tempUrl)
|
||||
},
|
||||
beforeUpload() {
|
||||
const _self = this
|
||||
beforeUpload() {
|
||||
const _self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key
|
||||
const token = response.data.qiniu_token
|
||||
_self._data.dataObj.token = token
|
||||
_self._data.dataObj.key = key
|
||||
|
|
@ -61,7 +61,7 @@ export default {
|
|||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -26,52 +26,52 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// 预览效果见文章
|
||||
import { getToken } from 'api/qiniu'
|
||||
import { getToken } from '@/api/qiniu'
|
||||
|
||||
export default {
|
||||
name: 'singleImageUpload',
|
||||
props: {
|
||||
value: String
|
||||
name: 'singleImageUpload',
|
||||
props: {
|
||||
value: String
|
||||
},
|
||||
computed: {
|
||||
imageUrl() {
|
||||
return this.value
|
||||
computed: {
|
||||
imageUrl() {
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tempUrl: '',
|
||||
dataObj: { token: '', key: '' }
|
||||
data() {
|
||||
return {
|
||||
tempUrl: '',
|
||||
dataObj: { token: '', key: '' }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rmImage() {
|
||||
this.emitInput('')
|
||||
methods: {
|
||||
rmImage() {
|
||||
this.emitInput('')
|
||||
},
|
||||
emitInput(val) {
|
||||
this.$emit('input', val)
|
||||
emitInput(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
handleImageScucess(file) {
|
||||
this.emitInput(file.files.file)
|
||||
handleImageScucess(file) {
|
||||
this.emitInput(file.files.file)
|
||||
},
|
||||
beforeUpload() {
|
||||
const _self = this
|
||||
beforeUpload() {
|
||||
const _self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key
|
||||
const token = response.data.qiniu_token
|
||||
_self._data.dataObj.token = token
|
||||
_self._data.dataObj.key = key
|
||||
this.tempUrl = response.data.qiniu_url
|
||||
resolve(true)
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
console.log(err)
|
||||
reject(false)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import 'element-ui/lib/theme-default/index.css'
|
|||
import App from './App'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import '@/assets/iconfont/iconfont' // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
|
||||
import '@/assets/iconfont/iconfont' // iconfont 具体图标见wiki
|
||||
import IconSvg from '@/components/Icon-svg'// svg组件
|
||||
import * as filters from '@/filters' // 全局filter
|
||||
import '@/errorLog'// error log
|
||||
|
|
|
|||
|
|
@ -1,21 +1,50 @@
|
|||
import Mock from 'mockjs'
|
||||
import { param2Obj } from '@/utils'
|
||||
|
||||
const List = []
|
||||
const count = 20
|
||||
const count = 100
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
List.push(Mock.mock({
|
||||
id: '@id',
|
||||
title: '@ctitle(10, 20)',
|
||||
'status|1': ['published', 'draft'],
|
||||
id: '@increment',
|
||||
timestamp: +Mock.Random.date('T'),
|
||||
author: '@cname',
|
||||
auditor: '@cname',
|
||||
title: '@ctitle(10, 20)',
|
||||
forecast: '@float(0, 100, 2, 2)',
|
||||
importance: '@integer(1, 3)',
|
||||
'type|1': ['CN', 'US', 'JP', 'EU'],
|
||||
'status|1': ['published', 'draft', 'deleted'],
|
||||
display_time: '@datetime',
|
||||
pageviews: '@integer(300, 5000)'
|
||||
}))
|
||||
}
|
||||
|
||||
export default {
|
||||
getList: () => List,
|
||||
getList: config => {
|
||||
const { importance, type, title, page = 1, limit = 20, sort } = param2Obj(config.url)
|
||||
|
||||
let mockList = List.filter(item => {
|
||||
if (importance && item.importance !== +importance) return false
|
||||
if (type && item.type !== type) return false
|
||||
if (title && item.title.indexOf(title) < 0) return false
|
||||
return true
|
||||
})
|
||||
|
||||
if (sort === '-id') {
|
||||
mockList = mockList.reverse()
|
||||
}
|
||||
|
||||
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
|
||||
|
||||
return {
|
||||
total: mockList.length,
|
||||
items: pageList
|
||||
}
|
||||
},
|
||||
getPv: () => ({
|
||||
pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
|
||||
}),
|
||||
getArticle: () => ({
|
||||
id: 120000000001,
|
||||
author: { key: 'mockPan' },
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
import Mock from 'mockjs'
|
||||
import { param2Obj } from 'utils'
|
||||
|
||||
const List = []
|
||||
const count = 100
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
List.push(Mock.mock({
|
||||
id: '@increment',
|
||||
timestamp: +Mock.Random.date('T'),
|
||||
author: '@cname',
|
||||
auditor: '@cname',
|
||||
title: '@ctitle(10, 20)',
|
||||
forecast: '@float(0, 100, 2, 2)',
|
||||
importance: '@integer(1, 3)',
|
||||
'type|1': ['CN', 'US', 'JP', 'EU'],
|
||||
'status|1': ['published', 'draft', 'deleted'],
|
||||
pageviews: '@integer(300, 5000)'
|
||||
}))
|
||||
}
|
||||
|
||||
export default {
|
||||
getList: config => {
|
||||
const { importance, type, title, page, limit, sort } = param2Obj(config.url)
|
||||
let mockList = List.filter(item => {
|
||||
if (importance && item.importance !== +importance) return false
|
||||
if (type && item.type !== type) return false
|
||||
if (title && item.title.indexOf(title) < 0) return false
|
||||
return true
|
||||
})
|
||||
if (sort === '-id') {
|
||||
mockList = mockList.reverse()
|
||||
}
|
||||
|
||||
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
|
||||
return {
|
||||
total: mockList.length,
|
||||
items: pageList
|
||||
}
|
||||
},
|
||||
getPv: () => ({
|
||||
pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
|
||||
})
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import Mock from 'mockjs'
|
||||
import loginAPI from './login'
|
||||
import articleAPI from './article'
|
||||
import article_tableAPI from './article_table'
|
||||
import remoteSearchAPI from './remoteSearch'
|
||||
|
||||
Mock.setup({
|
||||
|
|
@ -16,10 +15,7 @@ Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
|
|||
// 文章相关
|
||||
Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
|
||||
Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
|
||||
|
||||
// table example相关
|
||||
Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList)
|
||||
Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv)
|
||||
Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
|
||||
|
||||
// 搜索相关
|
||||
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { param2Obj } from 'utils'
|
||||
import { param2Obj } from '@/utils'
|
||||
|
||||
const userMap = {
|
||||
admin: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Mock from 'mockjs'
|
||||
import { param2Obj } from 'utils'
|
||||
import { param2Obj } from '@/utils'
|
||||
|
||||
const NameList = []
|
||||
const count = 100
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export const asyncRouterMap = [
|
|||
name: 'Table',
|
||||
icon: 'table',
|
||||
children: [
|
||||
{ path: 'dynamictable', component: _import('example/table/dynamictable'), name: '动态table' },
|
||||
{ path: 'dynamictable', component: _import('example/table/dynamictable/index'), name: '动态table' },
|
||||
{ path: 'dragtable', component: _import('example/table/dragTable'), name: '拖拽table' },
|
||||
{ path: 'inline_edit_table', component: _import('example/table/inlineEditTable'), name: 'table内编辑' },
|
||||
{ path: 'table', component: _import('example/table/table'), name: '综合table' }
|
||||
|
|
@ -112,7 +112,6 @@ export const asyncRouterMap = [
|
|||
},
|
||||
{ path: 'form/edit', icon: 'ziliaoshouce', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true }},
|
||||
{ path: 'form/create', icon: 'yinhangqia', component: _import('example/form'), name: '创建Form' },
|
||||
|
||||
{ path: 'tab/index', icon: 'mobankuangjia', component: _import('example/tab/index'), name: 'Tab' }
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { asyncRouterMap, constantRouterMap } from 'src/router'
|
||||
import { asyncRouterMap, constantRouterMap } from '@/router'
|
||||
|
||||
/**
|
||||
* 通过meta.role判断是否与当前用户权限匹配
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { loginByUsername, logout, getUserInfo } from 'api/login'
|
||||
import { getToken, setToken, removeToken } from 'utils/auth'
|
||||
import { loginByUsername, logout, getUserInfo } from '@/api/login'
|
||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import keyboardChart from 'components/Charts/keyboard'
|
||||
import keyboardChart from '@/components/Charts/keyboard'
|
||||
|
||||
export default {
|
||||
components: { keyboardChart }
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import keyboardChart2 from 'components/Charts/keyboard2'
|
||||
import keyboardChart2 from '@/components/Charts/keyboard2'
|
||||
|
||||
export default {
|
||||
components: { keyboardChart2 }
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import lineMarker from 'components/Charts/lineMarker'
|
||||
import lineMarker from '@/components/Charts/lineMarker'
|
||||
|
||||
export default {
|
||||
components: { lineMarker }
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import mixChart from 'components/Charts/mixChart'
|
||||
import mixChart from '@/components/Charts/mixChart'
|
||||
|
||||
export default {
|
||||
components: { mixChart }
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<script>
|
||||
import DndList from '@/components/twoDndList'
|
||||
import { getList } from 'api/article'
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
components: { DndList },
|
||||
|
|
@ -20,14 +20,14 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
getData() {
|
||||
this.listLoading = true
|
||||
getList(this.listQuery).then(response => {
|
||||
this.list1 = response.data.splice(0, 5)
|
||||
this.list2 = response.data
|
||||
fetchList().then(response => {
|
||||
this.list1 = response.data.items.splice(0, 5)
|
||||
this.list2 = response.data.items
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<script>
|
||||
import MdEditor from '@/components/MarkdownEditor'
|
||||
|
||||
export default {
|
||||
components: { MdEditor },
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<script>
|
||||
import MdInput from '@/components/MDinput'
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
import waves from '@/directive/waves.js'// 水波纹指令
|
||||
import waves from '@/directive/waves.js' // 水波纹指令
|
||||
|
||||
export default {
|
||||
components: { MdInput, PanThumb },
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="components-container">
|
||||
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a> <a target='_blank' href='https://www.tinymce.com/'> 官网 </a></code>
|
||||
<div>
|
||||
<Tinymce :height=200 ref="editor" v-model="content"></Tinymce>
|
||||
<tinymce :height=200 ref="editor" v-model="content"></tinymce>
|
||||
</div>
|
||||
<div class='editor-content' v-html='content'></div>
|
||||
</div>
|
||||
|
|
|
|||
131
src/views/dashboard/admin/index.vue
Normal file
131
src/views/dashboard/admin/index.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<github></github>
|
||||
<el-row class="btn-group">
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn green-btn" to="/example/table/table">Table</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn tiffany-btn" to="/example/form/edit">Form</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="box-card-header">
|
||||
<pan-thumb class="panThumb" :image="avatar"> 你的权限:
|
||||
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
|
||||
</pan-thumb>
|
||||
</div>
|
||||
<span class="display_name">{{name}}</span>
|
||||
<div class="info-item">
|
||||
<count-to class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></count-to>
|
||||
<span class="info-item-text">文章</span>
|
||||
<icon-svg icon-class="a" class="dashboard-editor-icon"></icon-svg>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<count-to class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></count-to>
|
||||
<span class="info-item-text">浏览量</span>
|
||||
<icon-svg icon-class="b" class="dashboard-editor-icon"></icon-svg>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<pie-chart></pie-chart>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="10">
|
||||
<bar-chart></bar-chart>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="15">
|
||||
<line-chart></line-chart>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<todo-list></todo-list>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import countTo from 'vue-count-to'
|
||||
import panThumb from '@/components/PanThumb'
|
||||
import todoList from '@/components/TodoList'
|
||||
import Github from '@/components/Github'
|
||||
import pieChart from './pieChart'
|
||||
import barChart from './barChart'
|
||||
import lineChart from './lineChart'
|
||||
|
||||
export default {
|
||||
name: 'dashboard-admin',
|
||||
components: { countTo, panThumb, todoList, Github, pieChart, lineChart, barChart },
|
||||
data() {
|
||||
return {
|
||||
statisticsData: {
|
||||
article_count: 1024,
|
||||
pageviews_count: 1024
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
margin: 30px;
|
||||
.btn-group {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.box-card-header {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
}
|
||||
.panThumb {
|
||||
z-index: 100;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
.display_name{
|
||||
font-size: 30px;
|
||||
display: block;
|
||||
}
|
||||
.info-item{
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
&:last-of-type{
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts 主题
|
||||
import { debounce } from 'utils'
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
window.addEventListener('resize', this.__resizeHanlder)
|
||||
}
|
||||
|
||||
// 监听侧边栏的变化
|
||||
// 监听侧边栏的变化
|
||||
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
|
||||
},
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<div class=" clearfix">
|
||||
<pan-thumb style="float: left" :image="avatar"> 你的权限:
|
||||
<span class="pan-info-roles" v-for="item in roles">{{item}}</span>
|
||||
</pan-thumb>
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="info-container">
|
||||
<span class="display_name">{{name}}</span>
|
||||
<span style='font-size:20px;padding-top:20px;display:inline-block;'>普通编辑dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class='emptyGif' :src="emptyGif">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PanThumb from 'components/PanThumb'
|
||||
|
||||
export default {
|
||||
name: 'dashboard-default',
|
||||
components: { PanThumb },
|
||||
data() {
|
||||
return {
|
||||
emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.emptyGif {
|
||||
display: block;
|
||||
width: 45%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-editor-container {
|
||||
background-color: #e3e3e3;
|
||||
min-height: 100vh;
|
||||
margin-top: -50px;
|
||||
padding: 100px 60px 0px;
|
||||
.pan-info-roles {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
.info-container {
|
||||
position: relative;
|
||||
margin-left: 190px;
|
||||
height: 150px;
|
||||
line-height: 200px;
|
||||
.display_name {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
color: #212121;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,100 +1,32 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<el-row class="btn-group">
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn green-btn" to="/example/table/table">Table</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn tiffany-btn" to="/example/form/edit">Form</router-link>
|
||||
</el-col>
|
||||
<el-col :span="4" class='text-center'>
|
||||
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="box-card-header">
|
||||
<pan-thumb class="panThumb" :image="avatar"> 你的权限:
|
||||
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
|
||||
</pan-thumb>
|
||||
</div>
|
||||
<span class="display_name">{{name}}</span>
|
||||
<div class="info-item">
|
||||
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo>
|
||||
<span class="info-item-text">文章</span>
|
||||
<icon-svg icon-class="a" class="dashboard-editor-icon"></icon-svg>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo>
|
||||
<span class="info-item-text">浏览量</span>
|
||||
<icon-svg icon-class="b" class="dashboard-editor-icon"></icon-svg>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<pie-chart></pie-chart>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="10">
|
||||
<bar-chart></bar-chart>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="15">
|
||||
<line-chart></line-chart>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<todo-list></todo-list>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
<div class="dashboard-editor-container">
|
||||
<div class=" clearfix">
|
||||
<pan-thumb style="float: left" :image="avatar"> 你的权限:
|
||||
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
|
||||
</pan-thumb>
|
||||
<github></github>
|
||||
<div class="info-container">
|
||||
<span class="display_name">{{name}}</span>
|
||||
<span style='font-size:20px;padding-top:20px;display:inline-block;'>普通编辑dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class='emptyGif' :src="emptyGif">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import panThumb from 'components/PanThumb'
|
||||
import pieChart from './pieChart'
|
||||
import barChart from './barChart'
|
||||
import lineChart from './lineChart'
|
||||
import countTo from 'vue-count-to'
|
||||
import todoList from 'components/TodoList'
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
import Github from '@/components/Github'
|
||||
|
||||
export default {
|
||||
name: 'dashboard-editor',
|
||||
components: { panThumb, countTo, pieChart, lineChart, barChart, todoList },
|
||||
components: { PanThumb, Github },
|
||||
data() {
|
||||
return {
|
||||
statisticsData: {
|
||||
article_count: 1024,
|
||||
comment_count: 102400,
|
||||
latest_article: [],
|
||||
month_article_count: 28,
|
||||
pageviews_count: 1024
|
||||
}
|
||||
emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -108,35 +40,35 @@ export default {
|
|||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
margin: 30px;
|
||||
.btn-group {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.box-card-header {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
}
|
||||
.panThumb {
|
||||
z-index: 100;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
.display_name{
|
||||
font-size: 30px;
|
||||
display: block;
|
||||
}
|
||||
.info-item{
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
&:last-of-type{
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emptyGif {
|
||||
display: block;
|
||||
width: 45%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-editor-container {
|
||||
background-color: #e3e3e3;
|
||||
min-height: 100vh;
|
||||
margin-top: -50px;
|
||||
padding: 100px 60px 0px;
|
||||
.pan-info-roles {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
.info-container {
|
||||
position: relative;
|
||||
margin-left: 190px;
|
||||
height: 150px;
|
||||
line-height: 200px;
|
||||
.display_name {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
color: #212121;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,33 @@
|
|||
<template>
|
||||
<div class="dashboard-container">
|
||||
<component v-bind:is="currentRole"> </component>
|
||||
<component :is="currentRole"></component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import EditorDashboard from './editor/index'
|
||||
import DefaultDashboard from './default/index'
|
||||
import adminDashboard from './admin/index'
|
||||
import editorDashboard from './editor/index'
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: { EditorDashboard, DefaultDashboard },
|
||||
components: { adminDashboard, editorDashboard },
|
||||
data() {
|
||||
return {
|
||||
currentRole: 'EditorDashboard'
|
||||
currentRole: 'adminDashboard'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'introduction',
|
||||
'roles'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
console.log(this.roles)
|
||||
if (this.roles.indexOf('admin') >= 0) {
|
||||
return
|
||||
}
|
||||
this.currentRole = 'DefaultDashboard'
|
||||
this.currentRole = 'editorDashboard'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import errGif from 'assets/401_images/401.gif'
|
||||
import errGif from '@/assets/401_images/401.gif'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -120,15 +120,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Tinymce from 'components/Tinymce'
|
||||
import Upload from 'components/Upload/singleImage3'
|
||||
import MDinput from 'components/MDinput'
|
||||
import Tinymce from '@/components/Tinymce'
|
||||
import Upload from '@/components/Upload/singleImage3'
|
||||
import MDinput from '@/components/MDinput'
|
||||
import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
|
||||
import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
|
||||
import Sticky from 'components/Sticky' // 粘性header组件
|
||||
import { validateURL } from 'utils/validate'
|
||||
import { getArticle } from 'api/article'
|
||||
import { userSearch } from 'api/remoteSearch'
|
||||
import Sticky from '@/components/Sticky' // 粘性header组件
|
||||
import { validateURL } from '@/utils/validate'
|
||||
import { fetchArticle } from '@/api/article'
|
||||
import { userSearch } from '@/api/remoteSearch'
|
||||
|
||||
export default {
|
||||
name: 'articleDetail',
|
||||
|
|
@ -204,7 +204,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
getArticle().then(response => {
|
||||
fetchArticle().then(response => {
|
||||
this.postForm = response.data
|
||||
}).catch(err => {
|
||||
this.fetchSuccess = false
|
||||
|
|
@ -259,6 +259,7 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.title-prompt{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<el-table :data="list" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table-column align="center" label="序号" width="65">
|
||||
<el-table-column align="center" label="序号" width="65" v-loading="loading"
|
||||
element-loading-text="请给我点时间！">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
</template>
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
|
||||
<el-table-column min-width="300px" label="标题">
|
||||
<template scope="scope">
|
||||
<span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
|
||||
<span>{{scope.row.title}}</span>
|
||||
<el-tag>{{scope.row.type}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -48,7 +49,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList } from 'api/article_table'
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -65,7 +66,8 @@ export default {
|
|||
limit: 5,
|
||||
type: this.type,
|
||||
sort: '+id'
|
||||
}
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
|
|
@ -83,9 +85,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.$emit('create') // for test
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,20 +47,20 @@
|
|||
|
||||
<el-table-column align="center" label="拖拽" width="95">
|
||||
<template scope="scope">
|
||||
<icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
|
||||
<icon-svg class='drag-handler' icon-class="tuozhuai"></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<div class='show-d'>默认顺序 {{ olderList}}</div>
|
||||
<div class='show-d'>默认顺序 {{ olderList}}</div>
|
||||
<div class='show-d'>拖拽后顺序{{newList}}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList } from 'api/article_table'
|
||||
import { fetchList } from '@/api/article'
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
export default {
|
||||
|
|
@ -79,9 +79,6 @@ export default {
|
|||
newList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
|
|
@ -92,6 +89,9 @@ export default {
|
|||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
|
|
@ -109,7 +109,6 @@ export default {
|
|||
setSort() {
|
||||
const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
||||
this.sortable = Sortable.create(el, {
|
||||
// handle: '.drag-handler',
|
||||
onEnd: evt => {
|
||||
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
|
||||
this.newList.splice(evt.newIndex, 0, tempIndex)
|
||||
|
|
@ -120,7 +119,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style >
|
||||
<style scoped>
|
||||
.drag-handler{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="app-container">
|
||||
|
||||
<div class="filter-container">
|
||||
<el-checkbox-group v-model="checkboxVal" >
|
||||
<el-checkbox-group v-model="checkboxVal">
|
||||
<el-checkbox label="apple">apple</el-checkbox>
|
||||
<el-checkbox label="banana">banana</el-checkbox>
|
||||
<el-checkbox label="orange">orange</el-checkbox>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import fixedThead from './dynamictable/fixedThead'
|
||||
import unfixedThead from './dynamictable/unfixedThead'
|
||||
import fixedThead from './fixedThead'
|
||||
import unfixedThead from './unfixedThead'
|
||||
|
||||
export default {
|
||||
components: { fixedThead, unfixedThead }
|
||||
|
|
@ -42,8 +42,7 @@
|
|||
|
||||
<el-table-column align="center" label="编辑" width="120">
|
||||
<template scope="scope">
|
||||
<el-button v-show='!scope.row.edit' type="primary" @click='scope.row.edit=true' size="small" icon="edit">编辑</el-button>
|
||||
<el-button v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="check">完成</el-button>
|
||||
<el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
@ -52,7 +51,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList } from 'api/article_table'
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
name: 'inline_edit-table_demo',
|
||||
|
|
@ -66,9 +65,6 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
|
|
@ -79,6 +75,9 @@ export default {
|
|||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<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="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table-column align="center" label="序号" width="65">
|
||||
<template scope="scope">
|
||||
|
|
@ -150,9 +150,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList, fetchPv } from 'api/article_table'
|
||||
import { fetchList, fetchPv } from '@/api/article'
|
||||
import waves from '@/directive/waves.js'// 水波纹指令
|
||||
import { parseTime } from 'utils'
|
||||
import { parseTime } from '@/utils'
|
||||
|
||||
const calendarTypeOptions = [
|
||||
{ key: 'CN', display_name: '中国' },
|
||||
|
|
@ -161,7 +161,7 @@ const calendarTypeOptions = [
|
|||
{ key: 'EU', display_name: '欧元区' }
|
||||
]
|
||||
|
||||
// arr to obj
|
||||
// arr to obj
|
||||
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||
acc[cur.key] = cur.display_name
|
||||
return acc
|
||||
|
|
@ -210,9 +210,6 @@ export default {
|
|||
tableKey: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
|
|
@ -226,6 +223,9 @@ export default {
|
|||
return calendarTypeKeyValue[type]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@
|
|||
{{scope.row.title}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="作者" width="110">
|
||||
<el-table-column label="作者" width="95" align="center">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
<el-tag>{{scope.row.author}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="阅读数" width="105" align="center">
|
||||
<el-table-column label="阅读数" width="115" align="center">
|
||||
<template scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="发布时间" width="200">
|
||||
<el-table-column align="center" prop="created_at" label="发布时间" width="220">
|
||||
<template scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>{{scope.row.display_time}}</span>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getList } from 'api/article'
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -49,8 +49,8 @@ export default {
|
|||
methods: {
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
getList().then(response => {
|
||||
this.list = response.data
|
||||
fetchList().then(response => {
|
||||
this.list = response.data.items
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,17 +14,17 @@
|
|||
{{scope.row.title}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="作者" width="110">
|
||||
<el-table-column label="作者" width="95" align="center">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
<el-tag>{{scope.row.author}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="阅读数" width="105" align="center">
|
||||
<el-table-column label="阅读数" width="115" align="center">
|
||||
<template scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="发布时间" width="200">
|
||||
<el-table-column align="center" prop="created_at" label="发布时间" width="220">
|
||||
<template scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>{{scope.row.display_time}}</span>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getList } from 'api/article'
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -52,8 +52,8 @@ export default {
|
|||
methods: {
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
getList(this.listQuery).then(response => {
|
||||
this.list = response.data
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { isvalidUsername } from 'utils/validate'
|
||||
import { isvalidUsername } from '@/utils/validate'
|
||||
import socialSign from './socialsignin'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import openWindow from 'utils/openWindow'
|
||||
import openWindow from '@/utils/openWindow'
|
||||
|
||||
export default {
|
||||
name: 'social-signin',
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@
|
|||
|
||||
|
||||
<script>
|
||||
import { getToken } from 'api/qiniu' // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
|
||||
// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
|
||||
import { getToken } from '@/api/qiniu'
|
||||
// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
|
||||
// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
|
||||
|
||||
export default{
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
|
||||
<script>
|
||||
import { toggleClass } from 'utils'
|
||||
import { toggleClass } from '@/utils'
|
||||
import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
|
||||
|
||||
export default {
|
||||
|
|
|
|||
Loading…
Reference in a new issue