sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refine

Browse source
This commit is contained in:
Pan 2017-08-23 11:16:54 +08:00 committed by 花裤衩
parent 33a4369cd7
commit 385ec5a762
18 changed files with 34 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/api/article.js
View file

@ -1,13 +1,13 @@
import fetch from 'utils/fetch'
export function getList () {
export function getList() {
return fetch({
url: '/article/list',
method: 'get'
})
}
export function getArticle () {
export function getArticle() {
return fetch({
url: '/article/detail',
method: 'get'

4
src/api/article_table.js
View file

@ -1,6 +1,6 @@
import fetch from 'utils/fetch'
export function fetchList (query) {
export function fetchList(query) {
return fetch({
url: '/article_table/list',
method: 'get',
@ -8,7 +8,7 @@ export function fetchList (query) {
})
}
export function fetchPv (pv) {
export function fetchPv(pv) {
return fetch({
url: '/article_table/pv',
method: 'get',

6
src/api/login.js
View file

@ -1,6 +1,6 @@
import fetch from 'utils/fetch'
export function loginByUsername (username, password) {
export function loginByUsername(username, password) {
const data = {
username,
password
@ -12,14 +12,14 @@ export function loginByUsername (username, password) {
})
}
export function logout () {
export function logout() {
return fetch({
url: '/login/logout',
method: 'post'
})
}
export function getInfo (token) {
export function getInfo(token) {
return fetch({
url: '/user/info',
method: 'get',

2
src/api/qiniu.js
View file

@ -1,6 +1,6 @@
import fetch from 'utils/fetch'
export function getToken () {
export function getToken() {
return fetch({
url: '/qiniu/upload/token', // 假地址 自行替换
method: 'get'

2
src/api/remoteSearch.js
View file

@ -1,6 +1,6 @@
import fetch from 'utils/fetch'
export function userSearch (name) {
export function userSearch(name) {
return fetch({
url: '/search/user',
method: 'get',

0
src/components/MdEditor/index.vue → src/components/MarkdownEditor/index.vue
View file

14
src/components/Tinymce/index.vue
View file

@ -52,11 +52,9 @@ export default {
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
// language: 'zh_CN',
// language_url: '/static/tinymce/langs/zh_CN.js',
toolbar: this.toolbar,
menubar: this.menubar,
plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools',
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
@ -160,14 +158,4 @@ export default {
visibility: hidden;
z-index: -1;
}
.editor-custom-btn-container {
position: absolute;
right: 15px;
top: 18px;
}
.editor-upload-btn {
display: inline-block;
}
</style>

10
src/components/twoDndList/index.vue
View file

@ -3,21 +3,20 @@
<div class="twoDndList-list" :style="{width:width1}">
<h3>{{list1Title}}</h3>
<draggable :list="list1" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in list1" :key='element'>
<div class="list-complete-item" v-for="element in list1" :key='element.id'>
<div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
<div style="position:absolute;right:0px;">
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<i style="color:#ff4949" class="el-icon-delete"></i>
</span>
<i style="color:#ff4949" class="el-icon-delete"></i>
</span>
</div>
</div>
</draggable>
</div>
<div class="twoDndList-list" :style="{width:width2}">
<h3>{{list2Title}}</h3>
<draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in filterList2" :key='element'>
<div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
<div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
</div>
</draggable>
@ -27,6 +26,7 @@
<script>
import draggable from 'vuedraggable'
export default {
name: 'twoDndList',
components: { draggable },

4
src/router/index.js
View file

@ -65,8 +65,8 @@ export const asyncRouterMap = [
{ path: 'index', component: _import('components/index'), name: '介绍 ' },
{ path: 'tinymce', component: _import('components/tinymce'), name: '富文本编辑器' },
{ path: 'markdown', component: _import('components/markdown'), name: 'Markdown' },
{ path: 'jsoneditor', component: _import('components/jsoneditor'), name: 'JSON编辑器' },
{ path: 'dndlist', component: _import('components/dndlist'), name: '列表拖拽' },
{ path: 'jsoneditor', component: _import('components/jsonEditor'), name: 'JSON编辑器' },
{ path: 'dndlist', component: _import('components/dndList'), name: '列表拖拽' },
{ path: 'splitpane', component: _import('components/splitpane'), name: 'SplitPane' },
{ path: 'avatarupload', component: _import('components/avatarUpload'), name: '头像上传' },
{ path: 'dropzone', component: _import('components/dropzone'), name: 'Dropzone' },

10
src/store/modules/user.js
View file

@ -115,10 +115,16 @@ const user = {
// 动态修改权限
ChangeRole({ commit }, role) {
return new Promise(resolve => {
commit('SET_ROLES', [role])
commit('SET_TOKEN', role)
setToken(role)
resolve()
getInfo(role).then(response => {
const data = response.data
commit('SET_ROLES', data.role)
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
commit('SET_INTRODUCTION', data.introduction)
resolve()
})
})
}
}

2
src/views/charts/index.vue
View file

@ -1,7 +1,7 @@
<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封装是很简单的事情，建议大家自己来封装。<a target='_blank' class='lin' href="https://segmentfault.com/a/1190000009762198#articleHeader16">相关教程</a>
这里的所有的图表都基于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>

2
src/views/charts/keyboard2.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<keyboard-chart2 id='apple' height='100%' width='100%'></keyboard-chart2>
<keyboard-chart2 height='100%' width='100%'></keyboard-chart2>
</div>
</div>
</template>

2
src/views/charts/mixChart.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<mix-chart id='apple' height='100%' width='100%'></mix-chart>
<mix-chart height='100%' width='100%'></mix-chart>
</div>
</div>
</template>

3
src/views/components/dndlist.vue → src/views/components/dndList.vue
View file

@ -8,7 +8,7 @@
</template>
<script>
import DndList from 'components/twoDndList'
import DndList from '@/components/twoDndList'
import { getList } from 'api/article'
export default {
@ -28,7 +28,6 @@ export default {
getList(this.listQuery).then(response => {
this.list1 = response.data.splice(0, 5)
this.list2 = response.data
console.log(this.list1, this.list2)
})
}
}

4
src/views/components/jsoneditor.vue → src/views/components/jsonEditor.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="components-container" style='height:100vh'>
<code>jsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>,lint base on json-lint </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>
@ -8,7 +8,7 @@
</template>
<script>
import jsonEditor from 'components/jsonEditor'
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":"能源化工"}]'
export default {

2
src/views/components/markdown.vue
View file

@ -10,7 +10,7 @@
</template>
<script>
import MdEditor from 'components/MdEditor'
import MdEditor from '@/components/MarkdownEditor'
export default {
components: { MdEditor },
data() {

4
src/views/components/tinymce.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="components-container">
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a></code>
<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>
</div>
@ -9,7 +9,7 @@
</template>
<script>
import Tinymce from 'components/Tinymce'
import Tinymce from '@/components/Tinymce'
export default {
components: { Tinymce },

72
static/tinymce/plugins/watermark/plugin.min.js vendored
View file

@ -1,72 +0,0 @@
(function() {
const qiniuOption = {
watermark: 'aHR0cHM6Ly93ZGwud2FsbHN0cmVldGNuLmNvbS8yM2Y0ZWE2Ny1hZjI1LTQ3ZTItYTFlYy1iNzJjNzkzYWNlOGE=',
weexWatermark: 'aHR0cHM6Ly93cGltZy53YWxsc3Rjbi5jb20vMGQxMmMwN2ItNjViMS00NjA4LTllMTctODUyMDRhOTc3YzY5',
dissolve: 30,
dx: 20,
dy: 20,
watermarkScale: 0
};
tinymce.create('tinymce.plugins.WaterMarkPlugin', {
init(ed) {
ed.addCommand('mceWaterMark', () => {
const target = ed.selection.getNode();
const src = $(target).attr('src') + '?watermark/1/image/' + qiniuOption.watermark + '/dissolve/' + qiniuOption.dissolve + '/gravity/Center/dx/' + qiniuOption.dx + '/dy/' + qiniuOption.dy + '/ws/' + qiniuOption.watermarkScale
ed.windowManager.open({
title: '七牛水印',
width: 600,
height: 500,
body: [{
type: 'container',
html: `<div class="mce-container" hidefocus="1" tabindex="-1" >
<div class="mce-container-body mce-container-watermark-body">
<div style="margin-bottom:10px;">
<label><input checked='true' style="margin-left: 20px;margin-right: 5px;" name="image-watermarkType" data-type="watermark" class="note-image-watermarkType" type="radio" />见闻</label>
<label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermarkType" data-type="weexWatermark" class="note-image-watermarkType" type="radio" />WEEX</label>
</div>
<div style='min-height:600px;'>
<label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="NorthWest" class="note-image-watermark" type="radio" />左上</label>
<label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="SouthWest" class="note-image-watermark" type="radio" />左下</label>
<label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="NorthEast" class="note-image-watermark" type="radio" /><span>右上</span></label>
<label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="SouthEast" class="note-image-watermark" type="radio" /><span>右下</span></label>
<label><input checked='true' style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="Center" class="note-image-watermark" type="radio" /><span>正中央</span></label>
<img src=${src} style="display: block;margin: 20px auto;max-height: 420px;max-width: 100%;" class="watermark-preview">
</div>
</div>
</div>`
}],
onSubmit() {
const src = $('.mce-container-watermark-body .watermark-preview').attr('src');
$(target).attr('src', src);
ed.undoManager.add()
// setTimeout(() => {
// ed.insertContent('a')
// }, 100);
}
});
$('.mce-container-watermark-body input[type="radio"]').on('click', () => {
const $watermarkImg = $('.mce-container-watermark-body .watermark-preview')
const baseSrc = $watermarkImg.attr('src').split('?')[0];
const position = $('.mce-container-watermark-body input[name="image-watermark"]:checked').attr('data-position');
const type = $('.mce-container-watermark-body input[name="image-watermarkType"]:checked').attr('data-type');
const query = setQuery(position, type);
$watermarkImg.attr('src', baseSrc + query);
})
});
function setQuery(postion, type) {
return '?watermark/1/image/' + qiniuOption[type] + '/dissolve/' + qiniuOption.dissolve + '/gravity/' + postion + '/dx/' + qiniuOption.dx + '/dy/' + qiniuOption.dy + '/ws/' + qiniuOption.watermarkScale
}
// Register buttons
ed.addButton('watermark', {
title: 'watermark',
text: '水印',
cmd: 'mceWaterMark'
});
}
});
tinymce.PluginManager.add('watermark', tinymce.plugins.WaterMarkPlugin);
}());