Skip to content

V
VueElementTemplate
Commit 551e911e authored by Pan's avatar Pan Committed by 花裤衩
Browse files
Options

全局lint优化

parent b8ecda19
Hide whitespace changes
Inline Side-by-side
Showing with 3417 additions and 3602 deletions
.eslintrc.js
View file @ 551e911e
......@@ -6,7 +6,8 @@ module.exports = {
},
env: {
browser: true,
node: true
node: true,
es6: true,
},
extends: 'eslint:recommended',
// required to lint *.vue files
......@@ -22,297 +23,122 @@ module.exports = {
}
},
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
'rules': {
// don't require .vue extension when importing
// 'import/extensions': ['error', 'always', {
// 'js': 'never',
// 'vue': 'never'
// }],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
/*
* Possible Errors
*/
// disallow unnecessary parentheses
'no-extra-parens': ['error', 'all', {'nestedBinaryExpressions': false}],
// disallow negating the left operand of relational operators
'no-unsafe-negation': 'error',
// enforce valid JSDoc comments
'valid-jsdoc': 'off',
/*
* Best Practices
*/
// enforce return statements in callbacks of array methods
'array-callback-return': 'error',
// enforce consistent brace style for all control statements
curly: ['error', 'multi-line'],
// enforce consistent newlines before and after dots
'dot-location': ['error', 'property'],
// enforce dot notation whenever possible
'dot-notation': 'error',
// require the use of === and !==
'eqeqeq': ['error', 'smart'],
// disallow the use of arguments.caller or arguments.callee
'no-caller': 'error',
// disallow empty functions
'no-empty-function': 'error',
// disallow unnecessary calls to .bind()
'no-extra-bind': 'error',
// disallow unnecessary labels
'no-extra-label': 'error',
// disallow leading or trailing decimal points in numeric literals
'no-floating-decimal': 'error',
// disallow assignments to native objects or read-only global variables
'no-global-assign': 'error',
// disallow the use of eval()-like methods
'no-implied-eval': 'error',
// disallow the use of the __iterator__ property
'no-iterator': 'error',
// disallow unnecessary nested blocks
'no-lone-blocks': 'error',
// disallow multiple spaces
'no-multi-spaces': 'error',
// disallow new operators with the String, Number, and Boolean objects
'no-new-wrappers': 'error',
// disallow octal escape sequences in string literals
'no-octal-escape': 'error',
// disallow the use of the __proto__ property
'no-proto': 'error',
// disallow comparisons where both sides are exactly the same
'no-self-compare': 'error',
// disallow throwing literals as exceptions
'no-throw-literal': 'error',
// disallow unused expressions
'no-unused-expressions': 'error',
// disallow unnecessary calls to .call() and .apply()
'no-useless-call': 'error',
// disallow unnecessary concatenation of literals or template literals
'no-useless-concat': 'error',
// disallow unnecessary escape characters
'no-useless-escape': 'error',
// disallow void operators
'no-void': 'error',
// require parentheses around immediate function invocations
'wrap-iife': 'error',
// require or disallow “Yoda” conditions
yoda: 'error',
/*
* Variables
*/
// disallow labels that share a name with a variable
'no-label-var': 'error',
// disallow initializing variables to undefined
'no-undef-init': 'error',
'no-undef': 'off',
// disallow the use of variables before they are defined
'no-use-before-define': 'error',
/*
* Node.js and CommonJS
*/
// disallow new operators with calls to require
'no-new-require': 'error',
/*
* Stylistic Issues
*/
// enforce consistent spacing inside array brackets
'array-bracket-spacing': 'error',
// enforce consistent spacing inside single-line blocks
'block-spacing': 'error',
// enforce consistent brace style for blocks
'brace-style': ['error', '1tbs', {'allowSingleLine': true}],
// require or disallow trailing commas
'comma-dangle': 'error',
// enforce consistent spacing before and after commas
'comma-spacing': 'error',
// enforce consistent comma style
'comma-style': 'error',
// enforce consistent spacing inside computed property brackets
'computed-property-spacing': 'error',
// require or disallow spacing between function identifiers and their invocations
'func-call-spacing': 'error',
// enforce consistent indentation
indent: ['error', 2, {SwitchCase: 1}],
// enforce the consistent use of either double or single quotes in JSX attributes
'jsx-quotes': 'error',
// enforce consistent spacing between keys and values in object literal properties
'key-spacing': 'error',
// enforce consistent spacing before and after keywords
'keyword-spacing': 'error',
// enforce consistent linebreak style
'linebreak-style': 'error',
// require or disallow newlines around directives
'lines-around-directive': 'error',
// require constructor names to begin with a capital letter
'new-cap': 'off',
// require parentheses when invoking a constructor with no arguments
'new-parens': 'error',
// disallow Array constructors
'no-array-constructor': 'error',
// disallow Object constructors
'no-new-object': 'error',
// disallow trailing whitespace at the end of lines
'no-trailing-spaces': 'error',
// disallow ternary operators when simpler alternatives exist
'no-unneeded-ternary': 'error',
// disallow whitespace before properties
'no-whitespace-before-property': 'error',
// enforce consistent spacing inside braces
'object-curly-spacing': ['error', 'always'],
// require or disallow padding within blocks
'padded-blocks': ['error', 'never'],
// require quotes around object literal property names
'quote-props': ['error', 'as-needed'],
// enforce the consistent use of either backticks, double, or single quotes
quotes: ['error', 'single'],
// enforce consistent spacing before and after semicolons
'semi-spacing': 'error',
// require or disallow semicolons instead of ASI
// semi: ['error', 'never'],
// enforce consistent spacing before blocks
'space-before-blocks': 'error',
'accessor-pairs': 2,
'arrow-spacing': [2, { 'before': true, 'after': true }],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
'camelcase': [0, { 'properties': 'always' }],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, { 'before': false, 'after': true }],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': [2, 'allow-null'],
'generator-star-spacing': [2, { 'before': true, 'after': true }],
'handle-callback-err': [2, '^(err|error)$' ],
'indent': [2, 2, { 'SwitchCase': 1 }],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
'keyword-spacing': [2, { 'before': true, 'after': true }],
'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
// enforce consistent spacing before function definition opening parenthesis
'space-before-function-paren': ['error', 'never'],
// enforce consistent spacing inside parentheses
'space-in-parens': 'error',
// require spacing around infix operators
'space-infix-ops': 'error',
// enforce consistent spacing before or after unary operators
'space-unary-ops': 'error',
// enforce consistent spacing after the // or /* in a comment
'spaced-comment': 'error',
// require or disallow Unicode byte order mark (BOM)
'unicode-bom': 'error',
/*
* ECMAScript 6
*/
// require braces around arrow function bodies
'arrow-body-style': 'error',
// require parentheses around arrow function arguments
'arrow-parens': ['error', 'as-needed'],
// enforce consistent spacing before and after the arrow in arrow functions
'arrow-spacing': 'error',
// enforce consistent spacing around * operators in generator functions
'generator-star-spacing': ['error', 'after'],
// disallow duplicate module imports
'no-duplicate-imports': 'error',
// disallow unnecessary computed property keys in object literals
'no-useless-computed-key': 'error',
// disallow unnecessary constructors
'no-useless-constructor': 'error',
// disallow renaming import, export, and destructured assignments to the same name
'no-useless-rename': 'error',
// require let or const instead of var
'no-var': 'error',
// require or disallow method and property shorthand syntax for object literals
'object-shorthand': 'error',
// require arrow functions as callbacks
'prefer-arrow-callback': 'error',
// require const declarations for variables that are never reassigned after declared
'prefer-const': 'error',
// disallow parseInt() in favor of binary, octal, and hexadecimal literals
'prefer-numeric-literals': 'error',
// require rest parameters instead of arguments
'prefer-rest-params': 'error',
// require spread operators instead of .apply()
'prefer-spread': 'error',
// enforce spacing between rest and spread operators and their expressions
'rest-spread-spacing': 'error',
// require or disallow spacing around embedded expressions of template strings
'template-curly-spacing': 'error',
// require or disallow spacing around the * in yield* expressions
'yield-star-spacing': 'error'
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 2,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, { 'max': 1 }],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, { 'initialized': 'never' }],
'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
'semi': [2, 'never'],
'semi-spacing': [2, { 'before': false, 'after': true }],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
'array-bracket-spacing': [2, 'never']
}
}
build/webpack.base.conf.js
View file @ 551e911e
......@@ -37,15 +37,15 @@ module.exports = {
},
module: {
rules: [
// {
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: "pre",
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter')
// }
// },
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
......
src/App.vue
View file @ 551e911e
......@@ -11,6 +11,6 @@
</script>
<style lang="scss">
@import '~normalize.css/normalize.css';// normalize.css 样式格式化
@import './styles/index.scss'; // 全局自定义的css样式
@import '~normalize.css/normalize.css';// normalize.css 样式格式化
@import './styles/index.scss'; // 全局自定义的css样式
</style>
src/api/article.js
View file @ 551e911e
import fetch from 'utils/fetch';
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'
});
})
}
src/api/article_table.js
View file @ 551e911e
import fetch from 'utils/fetch';
import fetch from 'utils/fetch'
export function fetchList(query) {
export function fetchList (query) {
return fetch({
url: '/article_table/list',
method: 'get',
params: query
});
})
}
export function fetchPv(pv) {
export function fetchPv (pv) {
return fetch({
url: '/article_table/pv',
method: 'get',
params: { pv }
});
})
}
src/api/login.js
View file @ 551e911e
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',
......
src/api/qiniu.js
View file @ 551e911e
import fetch from 'utils/fetch';
import fetch from 'utils/fetch'
export function getToken() {
export function getToken () {
return fetch({
url: '/qiniu/upload/token', // 假地址 自行替换
method: 'get'
});
})
}
src/api/remoteSearch.js
View file @ 551e911e
import fetch from 'utils/fetch';
import fetch from 'utils/fetch'
export function userSearch(name) {
export function userSearch (name) {
return fetch({
url: '/search/user',
method: 'get',
params: { name }
});
})
}
src/components/BackToTop/index.vue
View file @ 551e911e
......@@ -12,73 +12,73 @@
</template>
<script>
export default {
name: 'BackToTop',
props: {
visibilityHeight: {
type: Number,
default: 400
},
backPosition: {
type: Number,
default: 0
},
customStyle: {
type: Object,
default: {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px',
background: '#e7eaf1'
}
},
transitionName: {
type: String,
default: 'fade'
}
export default {
name: 'BackToTop',
props: {
visibilityHeight: {
type: Number,
default: 400
},
backPosition: {
type: Number,
default: 0
},
data() {
return {
visible: false,
interval: null
customStyle: {
type: Object,
default: {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px',
background: '#e7eaf1'
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
transitionName: {
type: String,
default: 'fade'
}
},
data() {
return {
visible: false,
interval: null
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
if (this.interval) {
clearInterval(this.interval)
}
},
methods: {
handleScroll() {
this.visible = window.pageYOffset > this.visibilityHeight
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
if (this.interval) {
clearInterval(this.interval);
}
backToTop() {
const start = window.pageYOffset
let i = 0
this.interval = setInterval(() => {
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
if (next <= this.backPosition) {
window.scrollTo(0, this.backPosition)
clearInterval(this.interval)
} else {
window.scrollTo(0, next)
}
i++
}, 16.7)
},
methods: {
handleScroll() {
this.visible = window.pageYOffset > this.visibilityHeight;
},
backToTop() {
const start = window.pageYOffset;
let i = 0;
this.interval = setInterval(() => {
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
if (next <= this.backPosition) {
window.scrollTo(0, this.backPosition);
clearInterval(this.interval)
} else {
window.scrollTo(0, next);
}
i++;
}, 16.7)
},
easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * (--t * (t - 2) - 1) + b;
}
easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b
return -c / 2 * (--t * (t - 2) - 1) + b
}
}
}
</script>
<style scoped>
......
src/components/Charts/keyboard.vue
View file @ 551e911e
......@@ -3,111 +3,111 @@
</template>
<script>
import echarts from 'echarts';
import echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
};
},
mounted() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
export default {
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xAxisData = [];
const data = [];
for (let i = 0; i < 30; i++) {
xAxisData.push(i + '号');
data.push(Math.round(Math.random() * 2 + 3))
}
const xAxisData = []
const data = []
for (let i = 0; i < 30; i++) {
xAxisData.push(i + '号')
data.push(Math.round(Math.random() * 2 + 3))
}
this.chart.setOption(
{
backgroundColor: '#08263a',
tooltip: {
trigger: 'axis'
},
xAxis: {
show: false,
data: xAxisData
},
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {}
},
series: [{
type: 'bar',
data,
name: '撸文数',
itemStyle: {
normal: {
barBorderRadius: 5,
shadowBlur: 10,
shadowColor: '#111'
}
},
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20;
},
animationDelayUpdate(idx) {
return idx * 20;
}
}]
})
}
}
}
this.chart.setOption(
{
backgroundColor: '#08263a',
tooltip: {
trigger: 'axis'
},
xAxis: {
show: false,
data: xAxisData
},
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {}
},
series: [{
type: 'bar',
data,
name: '撸文数',
itemStyle: {
normal: {
barBorderRadius: 5,
shadowBlur: 10,
shadowColor: '#111'
}
},
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
}]
})
}
}
}
</script>
src/components/Charts/keyboard2.vue
View file @ 551e911e
......@@ -3,148 +3,148 @@
</template>
<script>
import echarts from 'echarts';
import echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
};
export default {
props: {
className: {
type: String,
default: 'chart'
},
mounted() {
this.initChart();
id: {
type: String,
default: 'chart'
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
width: {
type: String,
default: '200px'
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xAxisData = [];
const data = [];
const data2 = [];
for (let i = 0; i < 50; i++) {
xAxisData.push(i);
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
}
this.chart.setOption(
{
backgroundColor: '#08263a',
xAxis: [{
show: false,
data: xAxisData
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
const xAxisData = []
const data = []
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
}
this.chart.setOption(
{
backgroundColor: '#08263a',
xAxis: [{
show: false,
data: xAxisData
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
splitLine: {
show: true,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
color: '#08263f'
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20;
},
animationDelayUpdate(idx) {
return idx * 20;
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
})
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
})
}
}
}
</script>
src/components/Charts/lineMarker.vue
View file @ 551e911e
......@@ -3,220 +3,220 @@
</template>
<script>
import echarts from 'echarts';
import echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
export default {
props: {
className: {
type: String,
default: 'chart'
},
data() {
return {
chart: null
};
id: {
type: String,
default: 'chart'
},
mounted() {
this.initChart();
width: {
type: String,
default: '200px'
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
backgroundColor: '#394056',
title: {
text: '请求数',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
this.chart.setOption({
backgroundColor: '#394056',
title: {
text: '请求数',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
left: '6%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['移动', '电信', '联通'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['移动', '电信', '联通'],
right: '4%',
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}],
yAxis: [{
type: 'value',
name: '单位（%）',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#F1F1F3'
fontSize: 14
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: '移动',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}],
yAxis: [{
type: 'value',
name: '单位（%）',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
}],
series: [{
name: '移动',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, {
name: '电信',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, {
name: '电信',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, {
name: '联通',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12
}
},
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
}]
})
}
}
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, {
name: '联通',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12
}
},
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
}]
})
}
}
}
</script>
src/components/Charts/mixChart.vue
View file @ 551e911e
......@@ -3,266 +3,265 @@
</template>
<script>
import echarts from 'echarts';
import echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
export default {
props: {
className: {
type: String,
default: 'chart'
},
data() {
return {
chart: null
};
id: {
type: String,
default: 'chart'
},
mounted() {
this.initChart();
this.chart = null;
width: {
type: String,
default: '200px'
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
const xData = (function() {
const data = [];
for (let i = 1; i < 13; i++) {
data.push(i + '月份');
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
this.chart = null
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xData = (function() {
const data = []
for (let i = 1; i < 13; i++) {
data.push(i + '月份')
}
return data
}())
this.chart.setOption({
backgroundColor: '#344b58',
title: {
text: '统计',
x: '4%',
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
return data;
}());
this.chart.setOption({
backgroundColor: '#344b58',
title: {
text: '统计',
x: '4%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
color: '#fff'
}
}
},
grid: {
borderWidth: 0,
top: 110,
bottom: 95,
textStyle: {
color: '#fff'
}
},
legend: {
x: '15%',
top: '10%',
textStyle: {
color: '#90979c'
},
tooltip: {
trigger: 'axis',
axisPointer: {
textStyle: {
color: '#fff'
}
data: ['女', '男', '平均']
},
calculable: true,
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#90979c'
}
},
grid: {
borderWidth: 0,
top: 110,
bottom: 95,
textStyle: {
color: '#fff'
}
splitLine: {
show: false
},
legend: {
x: '15%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: ['女', '男', '平均']
axisTick: {
show: false
},
calculable: true,
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
splitArea: {
show: false
},
axisLabel: {
interval: 0
},
data: xData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
},
data: xData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: '女',
type: 'bar',
stack: '总量',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: '女',
type: 'bar',
stack: '总量',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
},
data: [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
]
}
},
data: [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
]
},
{
name: '男',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : '';
}
{
name: '男',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
},
data: [
327,
1776,
507,
1200,
800,
482,
204,
1390,
1001,
951,
381,
220
]
}, {
name: '平均',
type: 'line',
stack: '总量',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(252,230,48,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
},
data: [
327,
1776,
507,
1200,
800,
482,
204,
1390,
1001,
951,
381,
220
]
}, {
name: '平均',
type: 'line',
stack: '总量',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(252,230,48,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
},
data: [
1036,
3693,
2962,
3810,
2519,
1915,
1748,
4675,
6209,
4323,
2865,
4298
]
}
}
},
data: [
1036,
3693,
2962,
3810,
2519,
1915,
1748,
4675,
6209,
4323,
2865,
4298
]
})
}
}
]
})
}
}
}
</script>
src/components/Dropzone/index.vue
View file @ 551e911e
......@@ -5,59 +5,59 @@
</template>
<script>
import Dropzone from 'dropzone';
import 'dropzone/dist/dropzone.css';
// import { getToken } from 'api/qiniu';
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'
// import { getToken } from 'api/qiniu';
Dropzone.autoDiscover = false;
Dropzone.autoDiscover = false
export default {
data() {
return {
dropzone: '',
initOnce: true
}
},
mounted() {
const element = document.getElementById(this.id);
const vm = this;
this.dropzone = new Dropzone(element, {
clickable: this.clickable,
thumbnailWidth: this.thumbnailWidth,
thumbnailHeight: this.thumbnailHeight,
maxFiles: this.maxFiles,
maxFilesize: this.maxFilesize,
dictRemoveFile: 'Remove',
addRemoveLinks: this.showRemoveLink,
acceptedFiles: this.acceptedFiles,
autoProcessQueue: this.autoProcessQueue,
dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
dictMaxFilesExceeded: '只能一个图',
previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div> <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark"> <i class="material-icons">done</i> </div> <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
init() {
const val = vm.defaultImg;
if (!val) return;
if (Array.isArray(val)) {
if (val.length === 0) return;
val.map((v, i) => {
const mockFile = { name: 'name' + i, size: 12345, url: v };
this.options.addedfile.call(this, mockFile);
this.options.thumbnail.call(this, mockFile, v);
mockFile.previewElement.classList.add('dz-success');
mockFile.previewElement.classList.add('dz-complete');
vm.initOnce = false;
return true;
})
} else {
const mockFile = { name: 'name', size: 12345, url: val };
this.options.addedfile.call(this, mockFile);
this.options.thumbnail.call(this, mockFile, val);
mockFile.previewElement.classList.add('dz-success');
mockFile.previewElement.classList.add('dz-complete');
vm.initOnce = false;
}
},
accept: (file, done) => {
export default {
data() {
return {
dropzone: '',
initOnce: true
}
},
mounted() {
const element = document.getElementById(this.id)
const vm = this
this.dropzone = new Dropzone(element, {
clickable: this.clickable,
thumbnailWidth: this.thumbnailWidth,
thumbnailHeight: this.thumbnailHeight,
maxFiles: this.maxFiles,
maxFilesize: this.maxFilesize,
dictRemoveFile: 'Remove',
addRemoveLinks: this.showRemoveLink,
acceptedFiles: this.acceptedFiles,
autoProcessQueue: this.autoProcessQueue,
dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
dictMaxFilesExceeded: '只能一个图',
previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div> <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark"> <i class="material-icons">done</i> </div> <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
init() {
const val = vm.defaultImg
if (!val) return
if (Array.isArray(val)) {
if (val.length === 0) return
val.map((v, i) => {
const mockFile = { name: 'name' + i, size: 12345, url: v }
this.options.addedfile.call(this, mockFile)
this.options.thumbnail.call(this, mockFile, v)
mockFile.previewElement.classList.add('dz-success')
mockFile.previewElement.classList.add('dz-complete')
vm.initOnce = false
return true
})
} else {
const mockFile = { name: 'name', size: 12345, url: val }
this.options.addedfile.call(this, mockFile)
this.options.thumbnail.call(this, mockFile, val)
mockFile.previewElement.classList.add('dz-success')
mockFile.previewElement.classList.add('dz-complete')
vm.initOnce = false
}
},
accept: (file, done) => {
/* 七牛*/
// const token = this.$store.getters.token;
// getToken(token).then(response => {
......@@ -66,142 +66,140 @@
// file.url = response.data.qiniu_url;
// done();
// })
done();
},
sending: (file, xhr, formData) => {
/* 七牛*/
console.log(file, xhr, formData)
done()
},
sending: (file, xhr, formData) => {
// formData.append('token', file.token);
// formData.append('key', file.key);
vm.initOnce = false;
}
});
if (this.couldPaste) {
document.addEventListener('paste', this.pasteImg)
vm.initOnce = false
}
})
this.dropzone.on('success', file => {
vm.$emit('dropzone-success', file, vm.dropzone.element)
});
this.dropzone.on('addedfile', file => {
vm.$emit('dropzone-fileAdded', file)
});
this.dropzone.on('removedfile', file => {
vm.$emit('dropzone-removedFile', file)
});
this.dropzone.on('error', (file, error, xhr) => {
vm.$emit('dropzone-error', file, error, xhr)
});
this.dropzone.on('successmultiple', (file, error, xhr) => {
vm.$emit('dropzone-successmultiple', file, error, xhr)
});
},
methods: {
removeAllFiles() {
this.dropzone.removeAllFiles(true)
},
processQueue() {
this.dropzone.processQueue()
},
pasteImg(event) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
if (items[0].kind === 'file') {
this.dropzone.addFile(items[0].getAsFile())
}
},
initImages(val) {
if (!val) return;
if (Array.isArray(val)) {
val.map((v, i) => {
const mockFile = { name: 'name' + i, size: 12345, url: v };
this.dropzone.options.addedfile.call(this.dropzone, mockFile);
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v);
mockFile.previewElement.classList.add('dz-success');
mockFile.previewElement.classList.add('dz-complete');
return true
})
} else {
const mockFile = { name: 'name', size: 12345, url: val };
this.dropzone.options.addedfile.call(this.dropzone, mockFile);
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val);
mockFile.previewElement.classList.add('dz-success');
mockFile.previewElement.classList.add('dz-complete');
}
}
if (this.couldPaste) {
document.addEventListener('paste', this.pasteImg)
}
this.dropzone.on('success', file => {
vm.$emit('dropzone-success', file, vm.dropzone.element)
})
this.dropzone.on('addedfile', file => {
vm.$emit('dropzone-fileAdded', file)
})
this.dropzone.on('removedfile', file => {
vm.$emit('dropzone-removedFile', file)
})
this.dropzone.on('error', (file, error, xhr) => {
vm.$emit('dropzone-error', file, error, xhr)
})
this.dropzone.on('successmultiple', (file, error, xhr) => {
vm.$emit('dropzone-successmultiple', file, error, xhr)
})
},
methods: {
removeAllFiles() {
this.dropzone.removeAllFiles(true)
},
destroyed() {
document.removeEventListener('paste', this.pasteImg);
this.dropzone.destroy();
processQueue() {
this.dropzone.processQueue()
},
watch: {
defaultImg(val) {
if (val.length === 0) {
this.initOnce = false;
return;
}
if (!this.initOnce) return;
this.initImages(val);
this.initOnce = false;
pasteImg(event) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items
if (items[0].kind === 'file') {
this.dropzone.addFile(items[0].getAsFile())
}
},
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
clickable: {
type: Boolean,
default: true
},
defaultMsg: {
type: String,
default: '上传图片'
},
acceptedFiles: {
type: String
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFilesize: {
type: Number,
default: 2
},
maxFiles: {
type: Number,
default: 3
},
autoProcessQueue: {
type: Boolean,
default: true
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
defaultImg: {
default: false
},
couldPaste: {
default: false
initImages(val) {
if (!val) return
if (Array.isArray(val)) {
val.map((v, i) => {
const mockFile = { name: 'name' + i, size: 12345, url: v }
this.dropzone.options.addedfile.call(this.dropzone, mockFile)
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
mockFile.previewElement.classList.add('dz-success')
mockFile.previewElement.classList.add('dz-complete')
return true
})
} else {
const mockFile = { name: 'name', size: 12345, url: val }
this.dropzone.options.addedfile.call(this.dropzone, mockFile)
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
mockFile.previewElement.classList.add('dz-success')
mockFile.previewElement.classList.add('dz-complete')
}
}
},
destroyed() {
document.removeEventListener('paste', this.pasteImg)
this.dropzone.destroy()
},
watch: {
defaultImg(val) {
if (val.length === 0) {
this.initOnce = false
return
}
if (!this.initOnce) return
this.initImages(val)
this.initOnce = false
}
},
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
clickable: {
type: Boolean,
default: true
},
defaultMsg: {
type: String,
default: '上传图片'
},
acceptedFiles: {
type: String
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFilesize: {
type: Number,
default: 2
},
maxFiles: {
type: Number,
default: 3
},
autoProcessQueue: {
type: Boolean,
default: true
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
defaultImg: {
default: false
},
couldPaste: {
default: false
}
}
}
</script>
<style scoped>
......
src/components/ErrLog/index.vue
View file @ 551e911e
......@@ -30,19 +30,19 @@
</template>
<script>
export default {
name: 'errLog',
props: {
logsList: {
type: Array
}
},
data() {
return {
dialogTableVisible: false
}
export default {
name: 'errLog',
props: {
logsList: {
type: Array
}
},
data() {
return {
dialogTableVisible: false
}
}
}
</script>
<style scoped>
......
src/components/Hamburger/index.vue
View file @ 551e911e
......@@ -13,19 +13,19 @@
</template>
<script>
export default {
name: 'hamburger',
props: {
isActive: {
type: Boolean,
default: false
},
toggleClick: {
type: Function,
default: null
}
export default {
name: 'hamburger',
props: {
isActive: {
type: Boolean,
default: false
},
toggleClick: {
type: Function,
default: null
}
}
}
</script>
<style scoped>
......
src/components/Icon-svg/index.vue
View file @ 551e911e
......@@ -5,18 +5,18 @@
</template>
<script>
export default {
name: 'icon-svg',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
export default {
name: 'icon-svg',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
}
</script>
src/components/ImageCropper/lang.js
View file @ 551e911e
......@@ -37,5 +37,5 @@ const langBag = {
lowestPx: 'The lowest pixel in the image: '
}
}
};
export default langBag;
}
export default langBag
src/components/MDinput/index.vue
View file @ 551e911e
<template>
<div class="material-input__component" :class="computedClasses">
<input v-if="type === 'email'" type="email" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
@blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'url'" type="url" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
@blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'number'" type="number" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :minlength="minlength" :maxlength="maxlength"
:required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'password'" type="password" class="material-input" :name="name" :id="id" :placeholder="placeholder"
v-model="valueCopy" :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :required="required"
@focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
@blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'text'" type="text" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :minlength="minlength" :maxlength="maxlength" :required="required"
@focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
<div class="material-input__component" :class="computedClasses">
<input v-if="type === 'email'" type="email" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
@blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'url'" type="url" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
@blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'number'" type="number" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :minlength="minlength" :maxlength="maxlength"
:required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'password'" type="password" class="material-input" :name="name" :id="id" :placeholder="placeholder"
v-model="valueCopy" :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :required="required"
@focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
@blur="handleFocus(false)" @input="handleModelInput">
<input v-if="type === 'text'" type="text" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :minlength="minlength" :maxlength="maxlength"
:required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
<span class="material-input-bar"></span>
<span class="material-input-bar"></span>
<label class="material-label">
<label class="material-label">
<slot></slot>
</label>
<div v-if="errorMessages" class="material-errors">
<div v-for="error in computedErrors" class="material-error" :key='error'>
{{ error }}
</div>
</div>
</div>
<div v-if="errorMessages" class="material-errors">
<div v-for="error in computedErrors" class="material-error" :key='error'>
{{ error }}
</div>
</div>
</div>
</template>
<script>
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
export default {
export default {
name: 'material-input',
computed: {
computedErrors() {
......
src/components/MdEditor/index.vue
View file @ 551e911e
......@@ -6,75 +6,75 @@
</template>
<script>
import 'simplemde/dist/simplemde.min.css';
import SimpleMDE from 'simplemde';
import 'simplemde/dist/simplemde.min.css'
import SimpleMDE from 'simplemde'
export default {
name: 'simplemde-md',
props: {
value: String,
id: {
type: String,
default: 'markdown-editor'
},
autofocus: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: ''
},
height: {
type: Number,
default: 150
},
zIndex: {
type: Number,
default: 10
},
toolbar: {
type: Array
}
export default {
name: 'simplemde-md',
props: {
value: String,
id: {
type: String,
default: 'markdown-editor'
},
data() {
return {
simplemde: null,
hasChange: false
};
autofocus: {
type: Boolean,
default: false
},
watch: {
value(val) {
if (val === this.simplemde.value() && !this.hasChange) return;
this.simplemde.value(val);
}
placeholder: {
type: String,
default: ''
},
mounted() {
this.simplemde = new SimpleMDE({
element: document.getElementById(this.id),
autofocus: this.autofocus,
toolbar: this.toolbar,
spellChecker: false,
insertTexts: {
link: ['[', ']( )']
},
// hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
placeholder: this.placeholder
});
if (this.value) {
this.simplemde.value(this.value);
}
this.simplemde.codemirror.on('change', () => {
if (this.hasChange) {
this.hasChange = true
}
this.$emit('input', this.simplemde.value());
});
height: {
type: Number,
default: 150
},
destroyed() {
this.simplemde = null;
zIndex: {
type: Number,
default: 10
},
toolbar: {
type: Array
}
},
data() {
return {
simplemde: null,
hasChange: false
}
},
watch: {
value(val) {
if (val === this.simplemde.value() && !this.hasChange) return
this.simplemde.value(val)
}
},
mounted() {
this.simplemde = new SimpleMDE({
element: document.getElementById(this.id),
autofocus: this.autofocus,
toolbar: this.toolbar,
spellChecker: false,
insertTexts: {
link: ['[', ']( )']
},
// hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
placeholder: this.placeholder
})
if (this.value) {
this.simplemde.value(this.value)
}
};
this.simplemde.codemirror.on('change', () => {
if (this.hasChange) {
this.hasChange = true
}
this.$emit('input', this.simplemde.value())
})
},
destroyed() {
this.simplemde = null
}
}
</script>
<style>
......
src/components/PanThumb/index.vue
View file @ 551e911e
......@@ -10,27 +10,27 @@
</template>
<script>
export default {
name: 'PanThumb',
props: {
image: {
type: String,
required: true
},
zIndex: {
type: Number,
default: 100
},
width: {
type: String,
default: '150px'
},
height: {
type: String,
default: '150px'
}
export default {
name: 'PanThumb',
props: {
image: {
type: String,
required: true
},
zIndex: {
type: Number,
default: 100
},
width: {
type: String,
default: '150px'
},
height: {
type: String,
default: '150px'
}
};
}
}
</script>
<style scoped>
......
src/components/Screenfull/index.vue
View file @ 551e911e
......@@ -7,41 +7,41 @@
</template>
<script>
import screenfull from 'screenfull';
export default {
name: 'hamburger',
props: {
width: {
type: Number,
default: 22
},
height: {
type: Number,
default: 22
},
fill: {
type: String,
default: '#48576a'
}
import screenfull from 'screenfull'
export default {
name: 'hamburger',
props: {
width: {
type: Number,
default: 22
},
data() {
return {
isFullscreen: false
}
height: {
type: Number,
default: 22
},
methods: {
click() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
});
return false;
}
screenfull.toggle();
fill: {
type: String,
default: '#48576a'
}
},
data() {
return {
isFullscreen: false
}
},
methods: {
click() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
}
}
}
</script>
<style scoped>
......
src/components/SplitPane/Pane.vue
View file @ 551e911e
......@@ -5,16 +5,16 @@
</template>
<script>
export default {
name: 'Pane',
data() {
const classes = ['Pane', this.$parent.split, 'className'];
export default {
name: 'Pane',
data() {
const classes = ['Pane', this.$parent.split, 'className']
return {
classes: classes.join(' '),
percent: 50
classes: classes.join(' '),
percent: 50
}
}
}
}
</script>
<style scoped>
......
src/components/SplitPane/Resizer.vue
View file @ 551e911e
......@@ -3,26 +3,26 @@
</template>
<script>
export default {
props: {
split: {
validator(value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
required: true
export default {
props: {
split: {
validator(value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
onMouseDown: {
type: Function,
required: true
}
required: true
},
data() {
const classes = ['Resizer', this.split, 'className'];
return {
classes: classes.join(' ')
}
onMouseDown: {
type: Function,
required: true
}
},
data() {
const classes = ['Resizer', this.split, 'className']
return {
classes: classes.join(' ')
}
}
}
</script>
<style scoped>
......
src/components/SplitPane/index.vue
View file @ 551e911e
......@@ -11,86 +11,86 @@
</template>
<script>
import Resizer from './Resizer';
import Pane from './Pane';
export default {
name: 'splitPane',
components: { Resizer, Pane },
props: {
margin: {
type: Number,
default: 10
import Resizer from './Resizer'
import Pane from './Pane'
export default {
name: 'splitPane',
components: { Resizer, Pane },
props: {
margin: {
type: Number,
default: 10
},
split: {
validator(value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
split: {
validator(value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
required: true
}
required: true
}
},
data() {
return {
active: false,
hasMoved: false,
height: null,
percent: 50,
type: this.split === 'vertical' ? 'width' : 'height',
resizeType: this.split === 'vertical' ? 'left' : 'top'
}
},
computed: {
userSelect() {
return this.active ? 'none' : ''
},
data() {
return {
active: false,
hasMoved: false,
height: null,
percent: 50,
type: this.split === 'vertical' ? 'width' : 'height',
resizeType: this.split === 'vertical' ? 'left' : 'top'
cursor() {
return this.active ? 'col-resize' : ''
}
},
methods: {
onClick() {
if (!this.hasMoved) {
this.percent = 50
this.$emit('resize')
}
},
computed: {
userSelect() {
return this.active ? 'none' : ''
},
cursor() {
return this.active ? 'col-resize' : ''
}
onMouseDown() {
this.active = true
this.hasMoved = false
},
methods: {
onClick() {
if (!this.hasMoved) {
this.percent = 50;
this.$emit('resize');
}
},
onMouseDown() {
this.active = true;
this.hasMoved = false;
},
onMouseUp() {
this.active = false;
},
onMouseMove(e) {
if (e.buttons === 0 || e.which === 0) {
this.active = false;
}
if (this.active) {
let offset = 0;
let target = e.currentTarget;
if (this.split === 'vertical') {
while (target) {
offset += target.offsetLeft;
target = target.offsetParent;
}
} else {
while (target) {
offset += target.offsetTop;
target = target.offsetParent;
}
onMouseUp() {
this.active = false
},
onMouseMove(e) {
if (e.buttons === 0 || e.which === 0) {
this.active = false
}
if (this.active) {
let offset = 0
let target = e.currentTarget
if (this.split === 'vertical') {
while (target) {
offset += target.offsetLeft
target = target.offsetParent
}
const currentPage = this.split === 'vertical' ? e.pageX : e.pageY;
const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight;
const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
if (percent > this.margin && percent < 100 - this.margin) {
this.percent = percent;
} else {
while (target) {
offset += target.offsetTop
target = target.offsetParent
}
this.$emit('resize');
this.hasMoved = true;
}
const currentPage = this.split === 'vertical' ? e.pageX : e.pageY
const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight
const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
if (percent > this.margin && percent < 100 - this.margin) {
this.percent = percent
}
this.$emit('resize')
this.hasMoved = true
}
}
}
}
</script>
<style scoped>
......
src/components/Sticky/index.vue
View file @ 551e911e
......@@ -9,66 +9,66 @@
</template>
<script>
export default {
name: 'Sticky',
props: {
stickyTop: {
type: Number,
default: 0
},
zIndex: {
type: Number,
default: 1
},
className: {
type: String
}
export default {
name: 'Sticky',
props: {
stickyTop: {
type: Number,
default: 0
},
data() {
return {
active: false,
position: '',
currentTop: '',
width: undefined,
height: undefined,
child: null,
stickyHeight: 0
};
zIndex: {
type: Number,
default: 1
},
methods: {
sticky() {
if (this.active) {
return
}
this.position = 'fixed';
this.active = true;
this.width = this.width + 'px';
},
reset() {
if (!this.active) {
return
}
this.position = '';
this.width = 'auto'
this.active = false
},
handleScroll() {
this.width = this.$el.getBoundingClientRect().width;
const offsetTop = this.$el.getBoundingClientRect().top;
if (offsetTop <= this.stickyTop) {
this.sticky();
return
}
this.reset()
className: {
type: String
}
},
data() {
return {
active: false,
position: '',
currentTop: '',
width: undefined,
height: undefined,
child: null,
stickyHeight: 0
}
},
methods: {
sticky() {
if (this.active) {
return
}
this.position = 'fixed'
this.active = true
this.width = this.width + 'px'
},
mounted() {
this.height = this.$el.getBoundingClientRect().height;
window.addEventListener('scroll', this.handleScroll);
reset() {
if (!this.active) {
return
}
this.position = ''
this.width = 'auto'
this.active = false
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
handleScroll() {
this.width = this.$el.getBoundingClientRect().width
const offsetTop = this.$el.getBoundingClientRect().top
if (offsetTop <= this.stickyTop) {
this.sticky()
return
}
this.reset()
}
};
},
mounted() {
this.height = this.$el.getBoundingClientRect().height
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
src/components/Tinymce/index.vue
View file @ 551e911e
......@@ -5,80 +5,79 @@
</template>
<script>
// import { getToken, upload } from 'api/qiniu'; // 七牛
export default {
name: 'tinymce',
props: {
id: {
type: String,
default: 'tinymceEditor'
},
value: {
type: String,
default: ''
},
toolbar: {
type: Array,
required: false,
default() {
return ['removeformat undo redo | bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p media link | alignleft aligncenter alignright']
}
},
data() {
return {
hasChange: false,
hasInit: false
}
},
menubar: {
default: ''
},
height: {
type: Number,
required: false,
default: 360
}
},
watch: {
value(val) {
if (!this.hasChange && this.hasInit) {
this.$nextTick(() => tinymce.get(this.id).setContent(val))
}
}
},
mounted() {
const _this = this;
tinymce.init({
selector: `#${this.id}`,
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
export default {
name: 'tinymce',
props: {
id: {
type: String,
default: 'tinymceEditor'
},
value: {
type: String,
default: ''
},
toolbar: {
type: Array,
required: false,
default() {
return ['removeformat undo redo | bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p media link | alignleft aligncenter alignright']
}
},
data() {
return {
hasChange: false,
hasInit: false
}
},
menubar: {
default: ''
},
height: {
type: Number,
required: false,
default: 360
}
},
watch: {
value(val) {
if (!this.hasChange && this.hasInit) {
this.$nextTick(() => window.tinymce.get(this.id).setContent(val))
}
}
},
mounted() {
const _this = this
window.tinymce.init({
selector: `#${this.id}`,
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',
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
block_formats: '普通标签=p;小标题=h2;',
imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
imagetools_toolbar: 'watermark',
default_link_target: '_blank',
link_title: false,
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true;
editor.on('NodeChange Change KeyUp', () => {
this.hasChange = true;
this.$emit('input', editor.getContent({ format: 'raw' }));
});
},
toolbar: this.toolbar,
menubar: this.menubar,
plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
block_formats: '普通标签=p;小标题=h2;',
imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
imagetools_toolbar: 'watermark',
default_link_target: '_blank',
link_title: false,
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true
editor.on('NodeChange Change KeyUp', () => {
this.hasChange = true
this.$emit('input', editor.getContent({ format: 'raw' }))
})
},
// 整合七牛上传
// images_dataimg_filter(img) {
// setTimeout(() => {
......@@ -112,44 +111,44 @@
// console.log(err);
// });
// },
setup(editor) {
editor.addButton('h2', {
title: '小标题', // tooltip text seen on mouseover
text: '小标题',
onclick() {
editor.execCommand('mceToggleFormat', false, 'h2');
},
onPostRender() {
const btn = this;
editor.on('init', () => {
editor.formatter.formatChanged('h2', state => {
btn.active(state);
});
});
}
});
editor.addButton('p', {
title: '正文',
text: '正文',
onclick() {
editor.execCommand('mceToggleFormat', false, 'p');
},
onPostRender() {
const btn = this;
editor.on('init', () => {
editor.formatter.formatChanged('p', state => {
btn.active(state);
});
});
}
});
}
});
},
destroyed() {
tinymce.get(this.id).destroy();
}
setup(editor) {
editor.addButton('h2', {
title: '小标题', // tooltip text seen on mouseover
text: '小标题',
onclick() {
editor.execCommand('mceToggleFormat', false, 'h2')
},
onPostRender() {
const btn = this
editor.on('init', () => {
editor.formatter.formatChanged('h2', state => {
btn.active(state)
})
})
}
})
editor.addButton('p', {
title: '正文',
text: '正文',
onclick() {
editor.execCommand('mceToggleFormat', false, 'p')
},
onPostRender() {
const btn = this
editor.on('init', () => {
editor.formatter.formatChanged('p', state => {
btn.active(state)
})
})
}
})
}
})
},
destroyed() {
window.tinymce.get(this.id).destroy()
}
}
</script>
<style scoped>
......
src/components/TodoList/index.vue
View file @ 551e911e
......@@ -84,12 +84,10 @@ export default {
this.setLocalStorgae()
},
deleteTodo(todo) {
console.log(todo)
this.todos.splice(this.todos.indexOf(todo), 1)
this.setLocalStorgae()
},
editTodo({ todo, value }) {
console.log(todo, value)
todo.text = value
this.setLocalStorgae()
},
......
src/components/Upload/singleImage.vue
View file @ 551e911e
......@@ -17,52 +17,53 @@
</template>
<script>
// 预览效果见付费文章
import { getToken } from 'api/qiniu';
export default {
name: 'singleImageUpload',
props: {
value: String
// 预览效果见付费文章
import { getToken } from 'api/qiniu'
export default {
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() {
this.emitInput(this.tempUrl)
handleImageScucess() {
this.emitInput(this.tempUrl)
},
beforeUpload() {
const _self = this;
return new Promise((resolve, reject) => {
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);
beforeUpload() {
const _self = this
return new Promise((resolve, reject) => {
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);
reject(false)
});
});
console.log(err)
reject(false)
})
})
}
}
};
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/components/Upload/singleImage2.vue
View file @ 551e911e
......@@ -18,8 +18,8 @@
<script>
// 预览效果见专题
import { getToken } from 'api/qiniu';
export default {
import { getToken } from 'api/qiniu'
export default {
name: 'singleImageUpload2',
props: {
value: String
......@@ -33,36 +33,35 @@
return {
tempUrl: '',
dataObj: { token: '', key: '' }
};
}
},
methods: {
rmImage() {
this.emitInput('');
this.emitInput('')
},
emitInput(val) {
this.$emit('input', val);
this.$emit('input', val)
},
handleImageScucess() {
this.emitInput(this.tempUrl)
},
beforeUpload() {
const _self = this;
return new Promise((resolve, reject) => {
const _self = this
return new Promise((resolve, reject) => {
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);
reject(false)
});
});
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(() => {
reject(false)
})
})
}
}
};
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/components/Upload/singleImage3.vue
View file @ 551e911e
......@@ -27,8 +27,8 @@
<script>
// 预览效果见文章
import { getToken } from 'api/qiniu';
export default {
import { getToken } from 'api/qiniu'
export default {
name: 'singleImageUpload',
props: {
value: String
......@@ -42,36 +42,36 @@
return {
tempUrl: '',
dataObj: { token: '', key: '' }
};
}
},
methods: {
rmImage() {
this.emitInput('');
this.emitInput('')
},
emitInput(val) {
this.$emit('input', val);
this.$emit('input', val)
},
handleImageScucess(file) {
this.emitInput(file.files.file)
},
beforeUpload() {
const _self = this;
return new Promise((resolve, reject) => {
const _self = this
return new Promise((resolve, reject) => {
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);
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);
reject(false)
});
});
console.log(err)
reject(false)
})
})
}
}
};
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/components/jsonEditor/index.vue
View file @ 551e911e
......@@ -5,52 +5,52 @@
</template>
<script>
import CodeMirror from 'codemirror';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/rubyblue.css';
require('script-loader!jsonlint');
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint';
import CodeMirror from 'codemirror'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/rubyblue.css'
require('script-loader!jsonlint')
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'
export default {
name: 'jsonEditor',
data() {
return {
jsonEditor: false
}
},
props: ['value'],
watch: {
value(value) {
const editor_value = this.jsonEditor.getValue();
if (value !== editor_value) {
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
}
export default {
name: 'jsonEditor',
data() {
return {
jsonEditor: false
}
},
props: ['value'],
watch: {
value(value) {
const editor_value = this.jsonEditor.getValue()
if (value !== editor_value) {
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
}
},
mounted() {
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
lineNumbers: true,
mode: 'application/json',
gutters: ['CodeMirror-lint-markers'],
theme: 'rubyblue',
lint: true
});
}
},
mounted() {
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
lineNumbers: true,
mode: 'application/json',
gutters: ['CodeMirror-lint-markers'],
theme: 'rubyblue',
lint: true
})
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
this.jsonEditor.on('change', cm => {
this.$emit('changed', cm.getValue())
this.$emit('input', cm.getValue())
})
},
methods: {
getValue() {
return this.jsonEditor.getValue()
}
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
this.jsonEditor.on('change', cm => {
this.$emit('changed', cm.getValue())
this.$emit('input', cm.getValue())
})
},
methods: {
getValue() {
return this.jsonEditor.getValue()
}
}
}
</script>
<style>
......
src/components/twoDndList/index.vue
View file @ 551e911e
......@@ -26,74 +26,74 @@
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'twoDndList',
components: { draggable },
computed: {
filterList2() {
return this.list2.filter(v => {
if (this.isNotInList1(v)) {
return v
}
return false;
})
import draggable from 'vuedraggable'
export default {
name: 'twoDndList',
components: { draggable },
computed: {
filterList2() {
return this.list2.filter(v => {
if (this.isNotInList1(v)) {
return v
}
return false
})
}
},
props: {
list1: {
type: Array,
default() {
return []
}
},
props: {
list1: {
type: Array,
default() {
return []
}
},
list2: {
type: Array,
default() {
return []
}
},
list1Title: {
type: String,
default: 'list1'
},
list2Title: {
type: String,
default: 'list2'
},
width1: {
type: String,
default: '48%'
},
width2: {
type: String,
default: '48%'
list2: {
type: Array,
default() {
return []
}
},
methods: {
isNotInList1(v) {
return this.list1.every(k => v.id !== k.id)
},
isNotInList2(v) {
return this.list2.every(k => v.id !== k.id)
},
deleteEle(ele) {
for (const item of this.list1) {
if (item.id === ele.id) {
const index = this.list1.indexOf(item);
this.list1.splice(index, 1)
break
}
}
if (this.isNotInList2(ele)) {
this.list2.unshift(ele)
list1Title: {
type: String,
default: 'list1'
},
list2Title: {
type: String,
default: 'list2'
},
width1: {
type: String,
default: '48%'
},
width2: {
type: String,
default: '48%'
}
},
methods: {
isNotInList1(v) {
return this.list1.every(k => v.id !== k.id)
},
isNotInList2(v) {
return this.list2.every(k => v.id !== k.id)
},
deleteEle(ele) {
for (const item of this.list1) {
if (item.id === ele.id) {
const index = this.list1.indexOf(item)
this.list1.splice(index, 1)
break
}
},
pushEle(ele) {
this.list1.push(ele)
}
if (this.isNotInList2(ele)) {
this.list2.unshift(ele)
}
},
pushEle(ele) {
this.list1.push(ele)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/directive/sticky.js
View file @ 551e911e
const vueSticky = {};
let listenAction;
const vueSticky = {}
let listenAction
vueSticky.install = Vue => {
Vue.directive('sticky', {
inserted(el, binding) {
const params = binding.value || {},
stickyTop = params.stickyTop || 0,
zIndex = params.zIndex || 1000,
elStyle = el.style;
const params = binding.value || {}
const stickyTop = params.stickyTop || 0
const zIndex = params.zIndex || 1000
const elStyle = el.style
elStyle.position = '-webkit-sticky';
elStyle.position = 'sticky';
elStyle.position = '-webkit-sticky'
elStyle.position = 'sticky'
// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
// if (~elStyle.position.indexOf('sticky')) {
// elStyle.top = `${stickyTop}px`;
// elStyle.zIndex = zIndex;
// return
// }
const elHeight = el.getBoundingClientRect().height;
const elWidth = el.getBoundingClientRect().width;
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
const elHeight = el.getBoundingClientRect().height
const elWidth = el.getBoundingClientRect().width
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
const parentElm = el.parentNode || document.documentElement;
const placeholder = document.createElement('div');
placeholder.style.display = 'none';
placeholder.style.width = `${elWidth}px`;
placeholder.style.height = `${elHeight}px`;
const parentElm = el.parentNode || document.documentElement
const placeholder = document.createElement('div')
placeholder.style.display = 'none'
placeholder.style.width = `${elWidth}px`
placeholder.style.height = `${elHeight}px`
parentElm.insertBefore(placeholder, el)
let active = false;
let active = false
const getScroll = (target, top) => {
const prop = top ? 'pageYOffset' : 'pageXOffset';
const method = top ? 'scrollTop' : 'scrollLeft';
let ret = target[prop];
const prop = top ? 'pageYOffset' : 'pageXOffset'
const method = top ? 'scrollTop' : 'scrollLeft'
let ret = target[prop]
if (typeof ret !== 'number') {
ret = window.document.documentElement[method];
ret = window.document.documentElement[method]
}
return ret;
};
return ret
}
const sticky = () => {
if (active) {
......@@ -47,36 +47,36 @@ vueSticky.install = Vue => {
elStyle.height = `${el.offsetHeight}px`
}
elStyle.position = 'fixed';
elStyle.width = `${elWidth}px`;
placeholder.style.display = 'inline-block';
elStyle.position = 'fixed'
elStyle.width = `${elWidth}px`
placeholder.style.display = 'inline-block'
active = true
};
}
const reset = () => {
if (!active) {
return
}
elStyle.position = '';
placeholder.style.display = 'none';
active = false;
};
elStyle.position = ''
placeholder.style.display = 'none'
active = false
}
const check = () => {
const scrollTop = getScroll(window, true);
const offsetTop = el.getBoundingClientRect().top;
const scrollTop = getScroll(window, true)
const offsetTop = el.getBoundingClientRect().top
if (offsetTop < stickyTop) {
sticky();
sticky()
} else {
if (scrollTop < elHeight + stickyTop) {
reset()
}
}
};
}
listenAction = () => {
check()
};
}
window.addEventListener('scroll', listenAction)
},
......@@ -85,7 +85,7 @@ vueSticky.install = Vue => {
window.removeEventListener('scroll', listenAction)
}
})
};
}
export default vueSticky
src/directive/waves.js
View file @ 551e911e
import './waves.css';
import './waves.css'
export default{
bind(el, binding) {
el.addEventListener('click', e => {
const customOpts = Object.assign({}, binding.value);
const customOpts = Object.assign({}, binding.value)
const opts = Object.assign({
ele: el, // 波纹作用元素
type: 'hit', // hit点击位置扩散center中心点扩展
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
}, customOpts),
target = opts.ele;
ele: el, // 波纹作用元素
type: 'hit', // hit点击位置扩散center中心点扩展
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
}, customOpts)
const target = opts.ele
if (target) {
target.style.position = 'relative';
target.style.overflow = 'hidden';
const rect = target.getBoundingClientRect();
let ripple = target.querySelector('.waves-ripple');
target.style.position = 'relative'
target.style.overflow = 'hidden'
const rect = target.getBoundingClientRect()
let ripple = target.querySelector('.waves-ripple')
if (!ripple) {
ripple = document.createElement('span');
ripple.className = 'waves-ripple';
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
target.appendChild(ripple);
ripple = document.createElement('span')
ripple.className = 'waves-ripple'
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
target.appendChild(ripple)
} else {
ripple.className = 'waves-ripple';
ripple.className = 'waves-ripple'
}
switch (opts.type) {
case 'center':
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
break;
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
break
default:
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
}
ripple.style.backgroundColor = opts.color;
ripple.className = 'waves-ripple z-active';
return false;
ripple.style.backgroundColor = opts.color
ripple.className = 'waves-ripple z-active'
return false
}
}, false);
}, false)
}
}
src/errorLog.js
View file @ 551e911e
......@@ -4,11 +4,11 @@ import errLog from '@/store/errLog'
// 生产环境错误日志
if (process.env.NODE_ENV === 'production') {
Vue.config.errorHandler = function(err, vm) {
console.log(err, window.location.href);
console.log(err, window.location.href)
errLog.pushLog({
err,
url: window.location.href,
vm
})
};
}
}
src/filters/index.js
View file @ 551e911e
......@@ -5,7 +5,7 @@ function pluralize(time, label) {
return time + label + 's'
}
export function timeAgo(time) {
const between = Date.now() / 1000 - Number(time);
const between = Date.now() / 1000 - Number(time)
if (between < 3600) {
return pluralize(~~(between / 60), ' minute')
} else if (between < 86400) {
......@@ -17,19 +17,19 @@ export function timeAgo(time) {
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null;
return null
}
if ((time + '').length === 10) {
time = +time * 1000
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
let date;
if (typeof time == 'object') {
date = time;
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
date = new Date(parseInt(time));
date = new Date(parseInt(time))
}
const formatObj = {
y: date.getFullYear(),
......@@ -39,24 +39,24 @@ export function parseTime(time, cFormat) {
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
};
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key];
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
let value = formatObj[key]
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
if (result.length > 0 && value < 10) {
value = '0' + value;
value = '0' + value
}
return value || 0;
});
return time_str;
return value || 0
})
return time_str
}
export function formatTime(time, option) {
time = +time * 1000;
const d = new Date(time);
const now = Date.now();
time = +time * 1000
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000;
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
......@@ -83,21 +83,21 @@ export function nFormatter(num, digits) {
{ value: 1E9, symbol: 'G' },
{ value: 1E6, symbol: 'M' },
{ value: 1E3, symbol: 'k' }
];
]
for (let i = 0; i < si.length; i++) {
if (num >= si[i].value) {
return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol;
return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
}
}
return num.toString();
return num.toString()
}
export function html2Text(val) {
const div = document.createElement('div');
div.innerHTML = val;
return div.textContent || div.innerText;
const div = document.createElement('div')
div.innerHTML = val
return div.textContent || div.innerText
}
export function toThousandslsFilter(num) {
return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','));
return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}
src/main.js
View file @ 551e911e
......@@ -29,5 +29,3 @@ new Vue({
template: '<App/>',
components: { App }
})
src/mock/article.js
View file @ 551e911e
import Mock from 'mockjs';
const List = [];
const count = 20;
import Mock from 'mockjs'
const List = []
const count = 20
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
......@@ -13,7 +11,7 @@ for (let i = 0; i < count; i++) {
author: '@cname',
display_time: '@datetime',
pageviews: '@integer(300, 5000)'
}));
}))
}
export default {
......@@ -34,4 +32,4 @@ export default {
tags: [],
title: ''
})
};
}
src/mock/article_table.js
View file @ 551e911e
import Mock from 'mockjs';
import { param2Obj } from 'utils';
import Mock from 'mockjs'
import { param2Obj } from 'utils'
const List = [];
const count = 100;
const List = []
const count = 100
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
......@@ -16,23 +16,23 @@ for (let i = 0; i < count; i++) {
'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);
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 (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));
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
return {
total: mockList.length,
items: pageList
......@@ -41,4 +41,4 @@ export default {
getPv: () => ({
pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
})
};
}
src/mock/login.js
View file @ 551e911e
import { param2Obj } from 'utils';
import { param2Obj } from 'utils'
const userMap = {
admin: {
......@@ -26,16 +26,16 @@ const userMap = {
export default {
loginByUsername: config => {
const { username } = JSON.parse(config.body);
return userMap[username];
const { username } = JSON.parse(config.body)
return userMap[username]
},
getInfo: config => {
const { token } = param2Obj(config.url);
const { token } = param2Obj(config.url)
if (userMap[token]) {
return userMap[token];
return userMap[token]
} else {
return Promise.reject('error');
return Promise.reject('error')
}
},
logout: () => 'success'
};
}
src/mock/remoteSearch.js
View file @ 551e911e
import Mock from 'mockjs';
import { param2Obj } from 'utils';
import Mock from 'mockjs'
import { param2Obj } from 'utils'
const NameList = [];
const count = 100;
const NameList = []
const count = 100
for (let i = 0; i < count; i++) {
NameList.push(Mock.mock({
name: '@first'
}));
}))
}
NameList.push({ name: 'mockPan' })
export default {
searchUser: config => {
const { name } = param2Obj(config.url);
const { name } = param2Obj(config.url)
const mockNameList = NameList.filter(item => {
const lowerCaseName = item.name.toLowerCase()
if (name && lowerCaseName.indexOf(name.toLowerCase()) < 0) return false;
return true;
});
if (name && lowerCaseName.indexOf(name.toLowerCase()) < 0) return false
return true
})
return { items: mockNameList }
}
};
}
src/permission.js
View file @ 551e911e
......@@ -36,7 +36,7 @@ router.beforeEach((to, from, next) => {
if (hasPermission(store.getters.roles, to.meta.role)) {
next()//
} else {
next({ path: '/401', query: { noGoBack: true } })
next({ path: '/401', query: { noGoBack: true }})
}
// 可删 ↑
}
......
src/router/index.js
View file @ 551e911e
import Vue from 'vue';
import Router from 'vue-router';
const _import = require('./_import_' + process.env.NODE_ENV);
import Vue from 'vue'
import Router from 'vue-router'
const _import = require('./_import_' + process.env.NODE_ENV)
// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading
Vue.use(Router);
Vue.use(Router)
/* layout */
import Layout from '../views/layout/Layout';
import Layout from '../views/layout/Layout'
/**
* icon : the icon show in the sidebar
......@@ -42,7 +42,7 @@ export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
});
})
export const asyncRouterMap = [
{
......@@ -53,7 +53,7 @@ export const asyncRouterMap = [
icon: 'quanxian',
meta: { role: ['admin'] },
noDropdown: true,
children: [{ path: 'index', component: _import('permission/index'), name: '权限测试页', meta: { role: ['admin'] } }]
children: [{ path: 'index', component: _import('permission/index'), name: '权限测试页', meta: { role: ['admin'] }}]
},
{
path: '/components',
......@@ -110,7 +110,7 @@ export const asyncRouterMap = [
{ path: 'table', component: _import('example/table/table'), name: '综合table' }
]
},
{ path: 'form/edit', icon: 'ziliaoshouce', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true } },
{ 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' }
......@@ -158,4 +158,4 @@ export const asyncRouterMap = [
},
{ path: '*', redirect: '/404', hidden: true }
];
]
src/store/errLog.js
View file @ 551e911e
......@@ -6,8 +6,8 @@ const errLog = {
this.state.errLog.unshift(log)
},
clearLog() {
this.state.errLog = [];
this.state.errLog = []
}
};
}
export default errLog;
export default errLog
src/store/getters.js
View file @ 551e911e
......@@ -10,5 +10,5 @@ const getters = {
setting: state => state.user.setting,
permission_routers: state => state.permission.routers,
addRouters: state => state.permission.addRouters
};
}
export default getters
src/store/index.js
View file @ 551e911e
import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app';
import user from './modules/user';
import permission from './modules/permission';
import getters from './getters';
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'
import getters from './getters'
Vue.use(Vuex);
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
......@@ -14,6 +14,6 @@ const store = new Vuex.Store({
permission
},
getters
});
})
export default store
src/store/modules/app.js
View file @ 551e911e
import Cookies from 'js-cookie';
import Cookies from 'js-cookie'
const app = {
state: {
......@@ -12,11 +12,11 @@ const app = {
mutations: {
TOGGLE_SIDEBAR: state => {
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1);
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0);
Cookies.set('sidebarStatus', 0)
}
state.sidebar.opened = !state.sidebar.opened;
state.sidebar.opened = !state.sidebar.opened
},
ADD_VISITED_VIEWS: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return
......@@ -44,6 +44,6 @@ const app = {
commit('DEL_VISITED_VIEWS', view)
}
}
};
}
export default app;
export default app
src/store/modules/permission.js
View file @ 551e911e
......@@ -52,11 +52,11 @@ const permission = {
} else {
accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
}
commit('SET_ROUTERS', accessedRouters);
resolve();
commit('SET_ROUTERS', accessedRouters)
resolve()
})
}
}
};
}
export default permission;
export default permission
src/store/modules/user.js
View file @ 551e911e
import { loginByUsername, logout, getInfo } from 'api/login';
import { getToken, setToken, removeToken } from 'utils/auth';
import { loginByUsername, logout, getInfo } from 'api/login'
import { getToken, setToken, removeToken } from 'utils/auth'
const user = {
state: {
......@@ -18,110 +18,110 @@ const user = {
mutations: {
SET_CODE: (state, code) => {
state.code = code;
state.code = code
},
SET_TOKEN: (state, token) => {
state.token = token;
state.token = token
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction;
state.introduction = introduction
},
SET_SETTING: (state, setting) => {
state.setting = setting;
state.setting = setting
},
SET_STATUS: (state, status) => {
state.status = status;
state.status = status
},
SET_NAME: (state, name) => {
state.name = name;
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar;
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles;
state.roles = roles
}
},
actions: {
// 用户名登录
LoginByUsername({ commit }, userInfo) {
const username = userInfo.username.trim();
const username = userInfo.username.trim()
return new Promise((resolve, reject) => {
loginByUsername(username, userInfo.password).then(response => {
const data = response.data;
setToken(response.data.token);
commit('SET_TOKEN', data.token);
resolve();
const data = response.data
setToken(response.data.token)
commit('SET_TOKEN', data.token)
resolve()
}).catch(error => {
reject(error);
});
});
reject(error)
})
})
},
// 获取用户信息
GetInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).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(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(response)
}).catch(error => {
reject(error);
});
});
reject(error)
})
})
},
// 第三方验证登录
LoginByThirdparty({ commit, state }, code) {
return new Promise((resolve, reject) => {
commit('SET_CODE', code);
loginByThirdparty(state.status, state.email, state.code).then(response => {
commit('SET_TOKEN', response.data.token);
setToken(response.data.token);
resolve();
}).catch(error => {
reject(error);
});
});
},
// LoginByThirdparty({ commit, state }, code) {
// return new Promise((resolve, reject) => {
// commit('SET_CODE', code)
// loginByThirdparty(state.status, state.email, state.code).then(response => {
// commit('SET_TOKEN', response.data.token)
// setToken(response.data.token)
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
// },
// 登出
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '');
commit('SET_ROLES', []);
removeToken();
resolve();
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resolve()
}).catch(error => {
reject(error);
});
});
reject(error)
})
})
},
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '');
removeToken();
resolve();
});
commit('SET_TOKEN', '')
removeToken()
resolve()
})
},
// 动态修改权限
ChangeRole({ commit }, role) {
return new Promise(resolve => {
commit('SET_ROLES', [role]);
commit('SET_TOKEN', role);
setToken(role);
resolve();
commit('SET_ROLES', [role])
commit('SET_TOKEN', role)
setToken(role)
resolve()
})
}
}
};
}
export default user;
export default user
src/utils/createUniqueString.js
View file @ 551e911e
......@@ -2,7 +2,7 @@
* Created by jiachenpan on 17/3/8.
*/
export default function createUniqueString() {
const timestamp = +new Date() + '';
const randomNum = parseInt((1 + Math.random()) * 65536) + '';
return (+(randomNum + timestamp)).toString(32);
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
}
src/utils/fetch.js
View file @ 551e911e
import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';
import { getToken } from 'utils/auth';
import axios from 'axios'
import { Message } from 'element-ui'
import store from '../store'
import { getToken } from 'utils/auth'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
});
})
// request拦截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken(); // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}
return config;
return config
}, error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
console.log(error) // for debug
Promise.reject(error)
})
// respone拦截器
......@@ -53,14 +53,14 @@ service.interceptors.response.use(
// return response.data;
// }
error => {
console.log('err' + error);// for debug
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
})
return Promise.reject(error)
}
)
export default service;
export default service
src/utils/index.js
View file @ 551e911e
......@@ -4,15 +4,15 @@
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null;
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
let date;
if (typeof time == 'object') {
date = time;
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (('' + time).length === 10) time = parseInt(time) * 1000;
date = new Date(time);
if (('' + time).length === 10) time = parseInt(time) * 1000
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
......@@ -22,24 +22,24 @@
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
};
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key];
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
let value = formatObj[key]
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
if (result.length > 0 && value < 10) {
value = '0' + value;
value = '0' + value
}
return value || 0;
});
return time_str;
return value || 0
})
return time_str
}
export function formatTime(time, option) {
time = +time * 1000;
const d = new Date(time);
const now = Date.now();
time = +time * 1000
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000;
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
......@@ -59,67 +59,66 @@
// 格式化时间
export function getQueryObject(url) {
url = url == null ? window.location.href : url;
const search = url.substring(url.lastIndexOf('?') + 1);
const obj = {};
const reg = /([^?&=]+)=([^?&=]*)/g;
url = url == null ? window.location.href : url
const search = url.substring(url.lastIndexOf('?') + 1)
const obj = {}
const reg = /([^?&=]+)=([^?&=]*)/g
search.replace(reg, (rs, $1, $2) => {
const name = decodeURIComponent($1);
let val = decodeURIComponent($2);
val = String(val);
obj[name] = val;
return rs;
});
return obj;
const name = decodeURIComponent($1)
let val = decodeURIComponent($2)
val = String(val)
obj[name] = val
return rs
})
return obj
}
/**
*get getByteLen
* @param {Sting} val input value
* @returns {number} output value
*/
export function getByteLen(val) {
let len = 0;
let len = 0
for (let i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) {
len += 1;
} else { len += 0.5; }
len += 1
} else { len += 0.5 }
}
return Math.floor(len);
return Math.floor(len)
}
export function cleanArray(actual) {
const newArray = [];
const newArray = []
for (let i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i]);
newArray.push(actual[i])
}
}
return newArray;
return newArray
}
export function param(json) {
if (!json) return '';
if (!json) return ''
return cleanArray(Object.keys(json).map(key => {
if (json[key] === undefined) return '';
if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' +
encodeURIComponent(json[key]);
})).join('&');
encodeURIComponent(json[key])
})).join('&')
}
export function param2Obj(url) {
const search = url.split('?')[1];
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}
export function html2Text(val) {
const div = document.createElement('div');
div.innerHTML = val;
return div.textContent || div.innerText;
const div = document.createElement('div')
div.innerHTML = val
return div.textContent || div.innerText
}
export function objectMerge(target, source) {
......@@ -127,83 +126,82 @@
giving the last one precedence */
if (typeof target !== 'object') {
target = {};
target = {}
}
if (Array.isArray(source)) {
return source.slice();
return source.slice()
}
for (const property in source) {
if (source.hasOwnProperty(property)) {
const sourceProperty = source[property];
const sourceProperty = source[property]
if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty);
continue;
target[property] = objectMerge(target[property], sourceProperty)
continue
}
target[property] = sourceProperty;
target[property] = sourceProperty
}
}
return target;
return target
}
export function scrollTo(element, to, duration) {
if (duration <= 0) return;
const difference = to - element.scrollTop;
const perTick = difference / duration * 10;
if (duration <= 0) return
const difference = to - element.scrollTop
const perTick = difference / duration * 10
setTimeout(() => {
console.log(new Date())
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
element.scrollTop = element.scrollTop + perTick
if (element.scrollTop === to) return
scrollTo(element, to, duration - 10)
}, 10)
}
export function toggleClass(element, className) {
if (!element || !className) {
return;
return
}
let classString = element.className;
const nameIndex = classString.indexOf(className);
let classString = element.className
const nameIndex = classString.indexOf(className)
if (nameIndex === -1) {
classString += '' + className;
classString += '' + className
} else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
}
element.className = classString;
element.className = classString
}
export const pickerOptions = [
{
text: '今天',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().toDateString());
end.setTime(start.getTime());
picker.$emit('pick', [start, end]);
const end = new Date()
const start = new Date(new Date().toDateString())
end.setTime(start.getTime())
picker.$emit('pick', [start, end])
}
}, {
text: '最近一周',
onClick(picker) {
const end = new Date(new Date().toDateString());
const start = new Date();
start.setTime(end.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
const end = new Date(new Date().toDateString())
const start = new Date()
start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date(new Date().toDateString());
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
const end = new Date(new Date().toDateString())
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date(new Date().toDateString());
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
const end = new Date(new Date().toDateString())
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
......@@ -216,55 +214,54 @@
}
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result;
let timeout, args, context, timestamp, result
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp;
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
timeout = setTimeout(later, wait - last)
} else {
timeout = null;
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
};
}
return function(...args) {
context = this;
timestamp = +new Date();
const callNow = immediate && !timeout;
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args);
context = args = null;
result = func.apply(context, args)
context = args = null
}
return result;
};
return result
}
}
export function deepClone(source) {
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'shallowClone');
throw new Error('error arguments', 'shallowClone')
}
const targetObj = source.constructor === Array ? [] : {};
const targetObj = source.constructor === Array ? [] : {}
for (const keys in source) {
if (source.hasOwnProperty(keys)) {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
targetObj[keys] = source[keys].constructor === Array ? [] : {}
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys];
targetObj[keys] = source[keys]
}
}
}
return targetObj;
return targetObj
}
src/utils/openWindow.js
View file @ 551e911e
......@@ -8,20 +8,19 @@
export default function openWindow(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height
const left = ((width / 2) - (w / 2)) + dualScreenLeft;
const top = ((height / 2) - (h / 2)) + dualScreenTop;
const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
const left = ((width / 2) - (w / 2)) + dualScreenLeft
const top = ((height / 2) - (h / 2)) + dualScreenTop
const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
newWindow.focus()
}
}
src/utils/validate.js
View file @ 551e911e
......@@ -5,19 +5,19 @@
/* 是否是公司邮箱*/
export function isvalidUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0;
return valid_map.indexOf(str.trim()) >= 0
}
/* 合法uri*/
export function validateURL(textval) {
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
return urlregex.test(textval);
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
}
/* 小写字母*/
export function validateLowerCase(str) {
const reg = /^[a-z]+$/;
return reg.test(str);
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 验证key*/
......@@ -28,14 +28,13 @@ export function validateLowerCase(str) {
/* 大写字母*/
export function validateUpperCase(str) {
const reg = /^[A-Z]+$/;
return reg.test(str);
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母*/
export function validatAlphabets(str) {
const reg = /^[A-Za-z]+$/;
return reg.test(str);
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
src/views/charts/keyboard.vue
View file @ 551e911e
......@@ -7,11 +7,11 @@
</template>
<script>
import keyboardChart from 'components/Charts/keyboard';
import keyboardChart from 'components/Charts/keyboard'
export default {
components: { keyboardChart }
};
export default {
components: { keyboardChart }
}
</script>
<style scoped>
......
src/views/charts/keyboard2.vue
View file @ 551e911e
......@@ -7,11 +7,11 @@
</template>
<script>
import keyboardChart2 from 'components/Charts/keyboard2';
import keyboardChart2 from 'components/Charts/keyboard2'
export default {
components: { keyboardChart2 }
};
export default {
components: { keyboardChart2 }
}
</script>
<style scoped>
......
src/views/charts/line.vue
View file @ 551e911e
......@@ -7,11 +7,11 @@
</template>
<script>
import lineMarker from 'components/Charts/lineMarker';
import lineMarker from 'components/Charts/lineMarker'
export default {
components: { lineMarker }
};
export default {
components: { lineMarker }
}
</script>
<style scoped>
......
src/views/charts/mixChart.vue
View file @ 551e911e
......@@ -7,11 +7,11 @@
</template>
<script>
import mixChart from 'components/Charts/mixChart';
import mixChart from 'components/Charts/mixChart'
export default {
components: { mixChart }
};
export default {
components: { mixChart }
}
</script>
<style scoped>
......
src/views/components/avatarUpload.vue
View file @ 551e911e
......@@ -14,29 +14,29 @@
</template>
<script>
import ImageCropper from 'components/ImageCropper';
import PanThumb from 'components/PanThumb';
import ImageCropper from 'components/ImageCropper'
import PanThumb from 'components/PanThumb'
export default {
components: { ImageCropper, PanThumb },
data() {
return {
imagecropperShow: false,
imagecropperKey: 0,
image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
}
export default {
components: { ImageCropper, PanThumb },
data() {
return {
imagecropperShow: false,
imagecropperKey: 0,
image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
}
},
methods: {
cropSuccess(resData) {
this.imagecropperShow = false
this.imagecropperKey = this.imagecropperKey + 1
this.image = resData.files.avatar
},
methods: {
cropSuccess(resData) {
this.imagecropperShow = false;
this.imagecropperKey = this.imagecropperKey + 1;
this.image = resData.files.avatar;
},
close() {
this.imagecropperShow = false;
}
close() {
this.imagecropperShow = false
}
};
}
}
</script>
<style scoped>
......
src/views/components/backToTop.vue
View file @ 551e911e
......@@ -135,21 +135,22 @@
</template>
<script>
import BackToTop from 'components/BackToTop';
export default {
components: { BackToTop },
data() {
return {
myBackToTopStyle: {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px', // 请保持与高度一致以垂直居中
background: '#e7eaf1'// 按钮的背景颜色
}
import BackToTop from 'components/BackToTop'
export default {
components: { BackToTop },
data() {
return {
myBackToTopStyle: {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px', // 请保持与高度一致以垂直居中
background: '#e7eaf1'// 按钮的背景颜色
}
}
}
}
</script>
src/views/components/countTo.vue
View file @ 551e911e
......@@ -22,72 +22,73 @@
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data() {
return {
setStartVal: 0,
setEndVal: 2017,
setDuration: 4000,
setDecimals: 0,
setSeparator: ',',
setSuffix: ' rmb',
setPrefix: '¥ '
import countTo from 'vue-count-to'
export default {
components: { countTo },
data() {
return {
setStartVal: 0,
setEndVal: 2017,
setDuration: 4000,
setDecimals: 0,
setSeparator: ',',
setSuffix: ' rmb',
setPrefix: '¥ '
}
},
computed: {
_startVal() {
if (this.setStartVal) {
return this.setStartVal
} else {
return 0
}
},
computed: {
_startVal() {
if (this.setStartVal) {
return this.setStartVal
} else {
return 0
}
},
_endVal() {
if (this.setEndVal) {
return this.setEndVal
} else {
return 0
}
},
_duration() {
if (this.setDuration) {
return this.setDuration
} else {
return 100
}
},
_decimals() {
if (this.setDecimals) {
if (this.setDecimals < 0 || this.setDecimals > 20) {
alert('digits argument must be between 0 and 20')
return 0
}
return this.setDecimals
} else {
_endVal() {
if (this.setEndVal) {
return this.setEndVal
} else {
return 0
}
},
_duration() {
if (this.setDuration) {
return this.setDuration
} else {
return 100
}
},
_decimals() {
if (this.setDecimals) {
if (this.setDecimals < 0 || this.setDecimals > 20) {
alert('digits argument must be between 0 and 20')
return 0
}
},
_separator() {
return this.setSeparator
},
_suffix() {
return this.setSuffix
},
_prefix() {
return this.setPrefix
return this.setDecimals
} else {
return 0
}
},
methods: {
start() {
this.$refs.example.start();
},
pauseResume() {
this.$refs.example.pauseResume();
}
_separator() {
return this.setSeparator
},
_suffix() {
return this.setSuffix
},
_prefix() {
return this.setPrefix
}
},
methods: {
start() {
this.$refs.example.start()
},
pauseResume() {
this.$refs.example.pauseResume()
}
};
}
}
</script>
<style scoped>
......
src/views/components/dndlist.vue
View file @ 551e911e
......@@ -8,31 +8,31 @@
</template>
<script>
import DndList from 'components/twoDndList'
import { getList } from 'api/article';
import DndList from 'components/twoDndList'
import { getList } from 'api/article'
export default {
components: { DndList },
data() {
return {
list1: [],
list2: []
}
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.listLoading = true;
getList(this.listQuery).then(response => {
this.list1 = response.data.splice(0, 5);
this.list2 = response.data;
console.log(this.list1, this.list2)
})
}
export default {
components: { DndList },
data() {
return {
list1: [],
list2: []
}
};
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
getList(this.listQuery).then(response => {
this.list1 = response.data.splice(0, 5)
this.list2 = response.data
console.log(this.list1, this.list2)
})
}
}
}
</script>
src/views/components/dropzone.vue
View file @ 551e911e
......@@ -10,21 +10,21 @@
</template>
<script>
import Dropzone from 'components/Dropzone';
import Dropzone from 'components/Dropzone'
export default {
components: { Dropzone },
methods: {
dropzoneS(file) {
console.log(file)
this.$message({ message: '上传成功', type: 'success' });
},
dropzoneR(file) {
console.log(file)
this.$message({ message: '删除成功', type: 'success' });
}
export default {
components: { Dropzone },
methods: {
dropzoneS(file) {
console.log(file)
this.$message({ message: '上传成功', type: 'success' })
},
dropzoneR(file) {
console.log(file)
this.$message({ message: '删除成功', type: 'success' })
}
};
}
}
</script>
src/views/components/jsoneditor.vue
View file @ 551e911e
......@@ -8,17 +8,17 @@
</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":"能源化工"}]';
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 {
components: { jsonEditor },
data() {
return {
value: JSON.parse(jsonData)
}
export default {
components: { jsonEditor },
data() {
return {
value: JSON.parse(jsonData)
}
};
}
}
</script>
<style scoped>
......
src/views/components/markdown.vue
View file @ 551e911e
......@@ -10,24 +10,24 @@
</template>
<script>
import MdEditor from 'components/MdEditor';
export default {
components: { MdEditor },
data() {
return {
content: '## Simplemde',
html: ''
}
},
methods: {
markdown2Html() {
import('showdown').then(showdown => {
const converter = new showdown.Converter();
this.html = converter.makeHtml(this.content)
})
}
import MdEditor from 'components/MdEditor'
export default {
components: { MdEditor },
data() {
return {
content: '## Simplemde',
html: ''
}
};
},
methods: {
markdown2Html() {
import('showdown').then(showdown => {
const converter = new showdown.Converter()
this.html = converter.makeHtml(this.content)
})
}
}
}
</script>
src/views/components/mixin.vue
View file @ 551e911e
......@@ -22,21 +22,21 @@
</template>
<script>
import MdInput from 'components/MDinput';
import PanThumb from 'components/PanThumb';
import waves from '@/directive/waves.js';// 水波纹指令
import MdInput from 'components/MDinput'
import PanThumb from 'components/PanThumb'
import waves from '@/directive/waves.js'// 水波纹指令
export default {
components: { MdInput, PanThumb },
directives: {
waves
},
data() {
return {
title: ''
}
export default {
components: { MdInput, PanThumb },
directives: {
waves
},
data() {
return {
title: ''
}
};
}
}
</script>
<style scoped>
......
src/views/components/splitpane.vue
View file @ 551e911e
......@@ -23,16 +23,16 @@
</template>
<script>
import splitPane from 'components/SplitPane'
import splitPane from 'components/SplitPane'
export default {
components: { splitPane },
methods: {
resize() {
console.log('resize')
}
export default {
components: { splitPane },
methods: {
resize() {
console.log('resize')
}
};
}
}
</script>
<style scoped>
......
src/views/components/sticky.vue
View file @ 551e911e
......@@ -94,28 +94,28 @@
<script>
import Sticky from 'components/Sticky';
import Sticky from 'components/Sticky'
export default {
components: { Sticky },
data() {
return {
time: '',
url: '',
platforms: ['a-platform'],
platformsOptions: [
export default {
components: { Sticky },
data() {
return {
time: '',
url: '',
platforms: ['a-platform'],
platformsOptions: [
{ key: 'a-platform', name: '平台A' },
{ key: 'b-platform', name: '平台B' },
{ key: 'c-platform', name: '平台C' }
],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now()
}
}
}
};
}
}
</script>
<style scoped>
......
src/views/components/tinymce.vue
View file @ 551e911e
......@@ -9,16 +9,16 @@
</template>
<script>
import Tinymce from 'components/Tinymce';
import Tinymce from 'components/Tinymce'
export default {
components: { Tinymce },
data() {
return {
content: 'Tinymce'
}
export default {
components: { Tinymce },
data() {
return {
content: 'Tinymce'
}
};
}
}
</script>
<style scoped>
......
src/views/dashboard/default/index.vue
View file @ 551e911e
......@@ -26,25 +26,25 @@
</template>
<script>
import { mapGetters } from 'vuex';
import PanThumb from 'components/PanThumb';
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'
])
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>
......
src/views/dashboard/editor/barChart.vue
View file @ 551e911e
......@@ -3,90 +3,91 @@
</template>
<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts 主题
const animationDuration = 3000;
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
};
},
mounted() {
this.initChart();
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题
const animationDuration = 3000
export default {
props: {
className: {
type: String,
default: 'chart'
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
width: {
type: String,
default: '100%'
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: 'pageA',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 334, 390, 330, 220],
animationDuration
}, {
name: 'pageB',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [80, 52, 200, 334, 390, 330, 220],
animationDuration
}, {
name: 'pageC',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [30, 52, 200, 334, 390, 330, 220],
animationDuration
}]
})
}
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: 'pageA',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 334, 390, 330, 220],
animationDuration
}, {
name: 'pageB',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [80, 52, 200, 334, 390, 330, 220],
animationDuration
}, {
name: 'pageC',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [30, 52, 200, 334, 390, 330, 220],
animationDuration
}]
})
}
}
}
</script>
src/views/dashboard/editor/index.vue
View file @ 551e911e
......@@ -75,35 +75,36 @@
</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';
export default {
name: 'dashboard-editor',
components: { panThumb, countTo, pieChart, lineChart, barChart, todoList },
data() {
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'
export default {
name: 'dashboard-editor',
components: { panThumb, countTo, pieChart, lineChart, barChart, todoList },
data() {
return {
statisticsData: {
article_count: 1024,
comment_count: 102400,
latest_article: [],
month_article_count: 28,
pageviews_count: 1024
statisticsData: {
article_count: 1024,
comment_count: 102400,
latest_article: [],
month_article_count: 28,
pageviews_count: 1024
}
}
},
computed: {
...mapGetters([
'name',
'avatar',
'roles'
computed: {
...mapGetters([
'name',
'avatar',
'roles'
])
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/dashboard/editor/lineChart.vue
View file @ 551e911e
......@@ -3,120 +3,120 @@
</template>
<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts 主题
import { debounce } from 'utils';
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题
import { debounce } from 'utils'
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
}
export default {
props: {
className: {
type: String,
default: 'chart'
},
data() {
return {
chart: null
};
width: {
type: String,
default: '100%'
},
mounted() {
this.initChart();
if (this.autoResize) {
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
}
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
if (this.autoResize) {
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
}
// 监听侧边栏的变化
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
},
beforeDestroy() {
if (!this.chart) {
return
}
if (this.autoResize) {
window.removeEventListener('resize', this.__resizeHanlder)
}
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
},
beforeDestroy() {
if (!this.chart) {
return
}
if (this.autoResize) {
window.removeEventListener('resize', this.__resizeHanlder)
}
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false
},
grid: {
left: 10,
right: 10,
bottom: 20,
containLabel: true
},
this.chart.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false
},
grid: {
left: 10,
right: 10,
bottom: 20,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
yAxis: {},
series: [{
name: 'visitors',
itemStyle: {
normal: {
areaStyle: {}
}
},
yAxis: {},
series: [{
name: 'visitors',
itemStyle: {
normal: {
areaStyle: {}
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165],
animationDuration: 2600,
animationEasing: 'cubicInOut'
},
{
name: 'buyers',
smooth: true,
type: 'line',
itemStyle: {
normal: {
color: 'rgba(2, 197, 233, 0.2)',
lineStyle: {
color: 'rgba(2, 197, 233, 0.2)'
},
areaStyle: {
color: 'rgba(99,194,255, 0.6)'
}
},
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165],
animationDuration: 2600,
animationEasing: 'cubicInOut'
}
},
{
name: 'buyers',
smooth: true,
type: 'line',
itemStyle: {
normal: {
color: 'rgba(2, 197, 233, 0.2)',
lineStyle: {
color: 'rgba(2, 197, 233, 0.2)'
},
areaStyle: {
color: 'rgba(99,194,255, 0.6)'
}
}
},
data: [120, 82, 91, 154, 162, 140, 130],
animationDuration: 2000,
animationEasing: 'quadraticOut'
}]
})
}
data: [120, 82, 91, 154, 162, 140, 130],
animationDuration: 2000,
animationEasing: 'quadraticOut'
}]
})
}
}
}
</script>
src/views/dashboard/editor/pieChart.vue
View file @ 551e911e
......@@ -3,77 +3,77 @@
</template>
<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts 主题
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
export default {
props: {
className: {
type: String,
default: 'chart'
},
data() {
return {
chart: null
};
width: {
type: String,
default: '100%'
},
mounted() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: 'WEEKLY WRITE ARTICLES',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
x: 'center',
y: 'bottom',
data: ['industries', 'technology', 'forex', 'gold', 'forecasts', 'markets']
},
calculable: true,
series: [
{
name: 'WEEKLY WRITE ARTICLES',
type: 'pie',
roseType: 'radius',
data: [
this.chart.setOption({
title: {
text: 'WEEKLY WRITE ARTICLES',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
x: 'center',
y: 'bottom',
data: ['industries', 'technology', 'forex', 'gold', 'forecasts', 'markets']
},
calculable: true,
series: [
{
name: 'WEEKLY WRITE ARTICLES',
type: 'pie',
roseType: 'radius',
data: [
{ value: 320, name: 'industries' },
{ value: 240, name: 'technology' },
{ value: 149, name: 'forex' },
{ value: 100, name: 'gold' },
{ value: 59, name: 'forecasts' },
{ value: 49, name: 'markets' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
}
],
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
}
}
}
</script>
src/views/dashboard/index.vue
View file @ 551e911e
......@@ -5,31 +5,31 @@
</template>
<script>
import { mapGetters } from 'vuex';
import EditorDashboard from './editor/index';
import DefaultDashboard from './default/index';
import { mapGetters } from 'vuex'
import EditorDashboard from './editor/index'
import DefaultDashboard from './default/index'
export default {
name: 'dashboard',
components: { EditorDashboard, DefaultDashboard },
data() {
return {
currentRole: 'EditorDashboard'
}
},
computed: {
...mapGetters([
'name',
'avatar',
'introduction',
'roles'
])
},
created() {
if (this.roles.indexOf('admin') >= 0) {
return;
}
this.currentRole = 'DefaultDashboard';
export default {
name: 'dashboard',
components: { EditorDashboard, DefaultDashboard },
data() {
return {
currentRole: 'EditorDashboard'
}
},
computed: {
...mapGetters([
'name',
'avatar',
'introduction',
'roles'
])
},
created() {
if (this.roles.indexOf('admin') >= 0) {
return
}
this.currentRole = 'DefaultDashboard'
}
}
</script>
src/views/errlog/index.vue
View file @ 551e911e
......@@ -11,11 +11,11 @@
</template>
<script>
import errCode from './errcode';
import errCode from './errcode'
export default {
components: { errCode }
};
export default {
components: { errCode }
}
</script>
<style scoped>
......
src/views/error/401.vue
View file @ 551e911e
......@@ -28,25 +28,26 @@
</template>
<script>
import errGif from 'assets/401_images/401.gif';
export default {
data() {
return {
errGif: errGif + '?' + +new Date(),
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
dialogVisible: false
}
},
methods: {
back() {
if (this.$route.query.noGoBack) {
this.$router.push({ path: '/dashboard' });
} else {
this.$router.go(-1);
}
import errGif from 'assets/401_images/401.gif'
export default {
data() {
return {
errGif: errGif + '?' + +new Date(),
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
dialogVisible: false
}
},
methods: {
back() {
if (this.$route.query.noGoBack) {
this.$router.push({ path: '/dashboard' })
} else {
this.$router.go(-1)
}
}
};
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/error/404.vue
View file @ 551e911e
......@@ -19,22 +19,22 @@
</template>
<script>
import img_404 from '@/assets/404_images/404.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png'
import img_404 from '@/assets/404_images/404.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png'
export default {
data() {
return {
img_404,
img_404_cloud
}
},
computed: {
message() {
return '特朗普说这个页面你不能进......'
}
export default {
data() {
return {
img_404,
img_404_cloud
}
},
computed: {
message() {
return '特朗普说这个页面你不能进......'
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/example/form.vue
View file @ 551e911e
......@@ -120,144 +120,144 @@
</template>
<script>
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 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'
export default {
name: 'articleDetail',
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
data() {
const validateRequire = (rule, value, callback) => {
if (value === '') {
export default {
name: 'articleDetail',
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
data() {
const validateRequire = (rule, value, callback) => {
if (value === '') {
this.$message({
message: rule.field + '为必传项',
type: 'error'
})
callback(null)
} else {
callback()
}
}
const validateSourceUri = (rule, value, callback) => {
if (value) {
if (validateURL(value)) {
callback()
} else {
this.$message({
message: rule.field + '为必传项',
message: '外链url填写不正确',
type: 'error'
});
})
callback(null)
} else {
callback()
}
};
const validateSourceUri = (rule, value, callback) => {
if (value) {
if (validateURL(value)) {
callback()
} else {
this.$message({
message: '外链url填写不正确',
type: 'error'
});
callback(null)
}
} else {
callback()
}
};
return {
postForm: {
title: '', // 文章题目
content: '', // 文章内容
content_short: '', // 文章摘要
source_uri: '', // 文章外链
image_uri: '', // 文章图片
source_name: '', // 文章外部作者
display_time: undefined, // 前台展示时间
id: undefined,
platforms: ['a-platform']
},
fetchSuccess: true,
loading: false,
userLIstOptions: [],
platformsOptions: [
} else {
callback()
}
}
return {
postForm: {
title: '', // 文章题目
content: '', // 文章内容
content_short: '', // 文章摘要
source_uri: '', // 文章外链
image_uri: '', // 文章图片
source_name: '', // 文章外部作者
display_time: undefined, // 前台展示时间
id: undefined,
platforms: ['a-platform']
},
fetchSuccess: true,
loading: false,
userLIstOptions: [],
platformsOptions: [
{ key: 'a-platform', name: 'a-platform' },
{ key: 'b-platform', name: 'b-platform' },
{ key: 'c-platform', name: 'c-platform' }
],
rules: {
image_uri: [{ validator: validateRequire }],
title: [{ validator: validateRequire }],
content: [{ validator: validateRequire }],
source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
}
],
rules: {
image_uri: [{ validator: validateRequire }],
title: [{ validator: validateRequire }],
content: [{ validator: validateRequire }],
source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
}
}
},
computed: {
contentShortLength() {
return this.postForm.content_short.length
},
computed: {
contentShortLength() {
return this.postForm.content_short.length
},
isEdit() {
return this.$route.meta.isEdit // 根据meta判断
isEdit() {
return this.$route.meta.isEdit // 根据meta判断
// return this.$route.path.indexOf('edit') !== -1 // 根据路由判断
}
},
created() {
if (this.isEdit) {
this.fetchData();
}
}
},
created() {
if (this.isEdit) {
this.fetchData()
}
},
methods: {
fetchData() {
getArticle().then(response => {
this.postForm = response.data
}).catch(err => {
this.fetchSuccess = false
console.log(err)
})
},
methods: {
fetchData() {
getArticle().then(response => {
this.postForm = response.data;
}).catch(err => {
this.fetchSuccess = false;
console.log(err);
});
},
submitForm() {
this.postForm.display_time = parseInt(this.display_time / 1000);
console.log(this.postForm)
this.$refs.postForm.validate(valid => {
if (valid) {
this.loading = true;
this.$notify({
title: '成功',
message: '发布文章成功',
type: 'success',
duration: 2000
});
this.postForm.status = 'published';
this.loading = false;
} else {
console.log('error submit!!');
return false;
}
});
},
draftForm() {
if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
this.$message({
message: '请填写必要的标题和内容',
type: 'warning'
});
return;
submitForm() {
this.postForm.display_time = parseInt(this.display_time / 1000)
console.log(this.postForm)
this.$refs.postForm.validate(valid => {
if (valid) {
this.loading = true
this.$notify({
title: '成功',
message: '发布文章成功',
type: 'success',
duration: 2000
})
this.postForm.status = 'published'
this.loading = false
} else {
console.log('error submit!!')
return false
}
})
},
draftForm() {
if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
this.$message({
message: '保存成功',
type: 'success',
showClose: true,
duration: 1000
});
this.postForm.status = 'draft';
},
getRemoteUserList(query) {
userSearch(query).then(response => {
if (!response.data.items) return;
console.log(response)
this.userLIstOptions = response.data.items.map(v => ({
key: v.name
}));
message: '请填写必要的标题和内容',
type: 'warning'
})
return
}
this.$message({
message: '保存成功',
type: 'success',
showClose: true,
duration: 1000
})
this.postForm.status = 'draft'
},
getRemoteUserList(query) {
userSearch(query).then(response => {
if (!response.data.items) return
console.log(response)
this.userLIstOptions = response.data.items.map(v => ({
key: v.name
}))
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
......
src/views/example/tab/components/tabPane.vue
View file @ 551e911e
......@@ -48,51 +48,51 @@
</template>
<script>
import { fetchList } from 'api/article_table';
import { fetchList } from 'api/article_table'
export default {
name: 'articleDetail',
props: {
type: {
type: String,
default: 'CN'
}
},
data() {
return {
list: null,
total: null,
listQuery: {
page: 1,
limit: 5,
type: this.type,
sort: '+id'
}
export default {
name: 'articleDetail',
props: {
type: {
type: String,
default: 'CN'
}
},
data() {
return {
list: null,
total: null,
listQuery: {
page: 1,
limit: 5,
type: this.type,
sort: '+id'
}
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
};
return statusMap[status]
}
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
},
created() {
this.getList();
},
methods: {
getList() {
this.$emit('create'); // for test
return statusMap[status]
}
},
created() {
this.getList()
},
methods: {
getList() {
this.$emit('create') // for test
fetchList(this.listQuery).then(response => {
this.list = response.data.items;
this.total = response.data.total;
})
}
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.total = response.data.total
})
}
}
}
</script>
src/views/example/tab/index.vue
View file @ 551e911e
......@@ -12,29 +12,29 @@
</template>
<script>
import tabPane from './components/tabPane'
import tabPane from './components/tabPane'
export default {
name: 'tabDemo',
components: { tabPane },
data() {
return {
tabMapOptions: [
export default {
name: 'tabDemo',
components: { tabPane },
data() {
return {
tabMapOptions: [
{ label: '中国', key: 'CN' },
{ label: '美国', key: 'US' },
{ label: '日本', key: 'JP' },
{ label: '欧元区', key: 'EU' }
],
activeName: 'CN',
createdTimes: 0
}
},
methods: {
showCreatedTimes() {
this.createdTimes = this.createdTimes + 1;
}
],
activeName: 'CN',
createdTimes: 0
}
},
methods: {
showCreatedTimes() {
this.createdTimes = this.createdTimes + 1
}
}
}
</script>
<style scoped>
......
src/views/example/table/dragTable.vue
View file @ 551e911e
......@@ -60,64 +60,64 @@
</template>
<script>
import { fetchList } from 'api/article_table';
import Sortable from 'sortablejs'
import { fetchList } from 'api/article_table'
import Sortable from 'sortablejs'
export default {
name: 'drag-table_demo',
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 10
},
sortable: null,
olderList: [],
newList: []
}
},
created() {
this.getList();
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
};
return statusMap[status]
export default {
name: 'drag-table_demo',
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 10
},
sortable: null,
olderList: [],
newList: []
}
},
created() {
this.getList()
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
},
methods: {
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.list = response.data.items;
this.total = response.data.total;
this.listLoading = false;
this.olderList = this.list.map(v => v.id);
this.newList = this.olderList.slice();
this.$nextTick(() => {
this.setSort()
})
return statusMap[status]
}
},
methods: {
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.total = response.data.total
this.listLoading = false
this.olderList = this.list.map(v => v.id)
this.newList = this.olderList.slice()
this.$nextTick(() => {
this.setSort()
})
},
setSort() {
const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
this.sortable = Sortable.create(el, {
})
},
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);
}
});
}
onEnd: evt => {
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
this.newList.splice(evt.newIndex, 0, tempIndex)
}
})
}
}
}
</script>
<style >
......
src/views/example/table/dynamictable.vue
View file @ 551e911e
......@@ -9,11 +9,11 @@
</template>
<script>
import fixedThead from './dynamictable/fixedThead'
import unfixedThead from './dynamictable/unfixedThead'
import fixedThead from './dynamictable/fixedThead'
import unfixedThead from './dynamictable/unfixedThead'
export default {
components: { fixedThead, unfixedThead }
};
export default {
components: { fixedThead, unfixedThead }
}
</script>
src/views/example/table/dynamictable/fixedThead.vue
View file @ 551e911e
......@@ -22,36 +22,37 @@
</template>
<script>
const defaultFormThead = ['apple', 'banana']; // 默认选中项
export default {
data() {
return {
tableData: [
{
name: 'fruit-1',
apple: 'apple-10',
banana: 'banana-10',
orange: 'orange-10'
},
{
name: 'fruit-2',
apple: 'apple-20',
banana: 'banana-20',
orange: 'orange-20'
}
],
key: 1, // table key
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
checkboxVal: defaultFormThead, // checkboxVal
formThead: defaultFormThead // 默认表头
}
},
watch: {
checkboxVal(valArr) {
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0);
this.key = this.key + 1;// 为了保证table 每次都会重渲 （牺牲性能保证效果，当然也可以不用）
}
const defaultFormThead = ['apple', 'banana'] // 默认选中项
export default {
data() {
return {
tableData: [
{
name: 'fruit-1',
apple: 'apple-10',
banana: 'banana-10',
orange: 'orange-10'
},
{
name: 'fruit-2',
apple: 'apple-20',
banana: 'banana-20',
orange: 'orange-20'
}
],
key: 1, // table key
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
checkboxVal: defaultFormThead, // checkboxVal
formThead: defaultFormThead // 默认表头
}
},
watch: {
checkboxVal(valArr) {
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
this.key = this.key + 1// 为了保证table 每次都会重渲 （牺牲性能保证效果，当然也可以不用）
}
};
}
}
</script>
src/views/example/table/dynamictable/unfixedThead.vue
View file @ 551e911e
......@@ -23,25 +23,25 @@
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'fruit-1',
apple: 'apple-10',
banana: 'banana-10',
orange: 'orange-10'
},
{
name: 'fruit-2',
apple: 'apple-20',
banana: 'banana-20',
orange: 'orange-20'
}
],
formThead: ['apple', 'banana']
}
export default {
data() {
return {
tableData: [
{
name: 'fruit-1',
apple: 'apple-10',
banana: 'banana-10',
orange: 'orange-10'
},
{
name: 'fruit-2',
apple: 'apple-20',
banana: 'banana-20',
orange: 'orange-20'
}
],
formThead: ['apple', 'banana']
}
};
}
}
</script>
src/views/example/table/inlineEditTable.vue
View file @ 551e911e
......@@ -52,44 +52,44 @@
</template>
<script>
import { fetchList } from 'api/article_table';
import { fetchList } from 'api/article_table'
export default {
name: 'inline_edit-table_demo',
data() {
return {
list: null,
listLoading: true,
listQuery: {
page: 1,
limit: 10
}
export default {
name: 'inline_edit-table_demo',
data() {
return {
list: null,
listLoading: true,
listQuery: {
page: 1,
limit: 10
}
},
created() {
this.getList();
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
};
return statusMap[status]
}
},
created() {
this.getList()
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
},
methods: {
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.list = response.data.items.map(v => {
v.edit = false;
return v
});
this.listLoading = false;
return statusMap[status]
}
},
methods: {
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.items.map(v => {
v.edit = false
return v
})
}
this.listLoading = false
})
}
}
}
</script>
src/views/example/table/table.vue
View file @ 551e911e
......@@ -150,203 +150,203 @@
</template>
<script>
import { fetchList, fetchPv } from 'api/article_table';
import waves from '@/directive/waves.js';// 水波纹指令
import { parseTime } from 'utils';
import { fetchList, fetchPv } from 'api/article_table'
import waves from '@/directive/waves.js'// 水波纹指令
import { parseTime } from 'utils'
const calendarTypeOptions = [
const calendarTypeOptions = [
{ key: 'CN', display_name: '中国' },
{ key: 'US', display_name: '美国' },
{ key: 'JP', display_name: '日本' },
{ key: 'EU', display_name: '欧元区' }
];
]
// arr to obj
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
acc[cur.key] = cur.display_name;
return acc
}, {});
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
acc[cur.key] = cur.display_name
return acc
}, {})
export default {
name: 'table_demo',
directives: {
waves
},
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
importance: undefined,
title: undefined,
type: undefined,
sort: '+id'
},
temp: {
id: undefined,
importance: 0,
remark: '',
timestamp: 0,
title: '',
type: '',
status: 'published'
},
importanceOptions: [1, 2, 3],
calendarTypeOptions,
sortOptions: [{ label: '按ID升序列', key: '+id' }, { label: '按ID降序', key: '-id' }],
statusOptions: ['published', 'draft', 'deleted'],
dialogFormVisible: false,
dialogStatus: '',
textMap: {
update: '编辑',
create: '创建'
},
dialogPvVisible: false,
pvData: [],
showAuditor: false,
tableKey: 0
export default {
name: 'table_demo',
directives: {
waves
},
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
importance: undefined,
title: undefined,
type: undefined,
sort: '+id'
},
temp: {
id: undefined,
importance: 0,
remark: '',
timestamp: 0,
title: '',
type: '',
status: 'published'
},
importanceOptions: [1, 2, 3],
calendarTypeOptions,
sortOptions: [{ label: '按ID升序列', key: '+id' }, { label: '按ID降序', key: '-id' }],
statusOptions: ['published', 'draft', 'deleted'],
dialogFormVisible: false,
dialogStatus: '',
textMap: {
update: '编辑',
create: '创建'
},
dialogPvVisible: false,
pvData: [],
showAuditor: false,
tableKey: 0
}
},
created() {
this.getList()
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
return statusMap[status]
},
created() {
this.getList();
typeFilter(type) {
return calendarTypeKeyValue[type]
}
},
methods: {
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.total = response.data.total
this.listLoading = false
})
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
};
return statusMap[status]
},
typeFilter(type) {
return calendarTypeKeyValue[type]
handleFilter() {
this.getList()
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
timeFilter(time) {
if (!time[0]) {
this.listQuery.start = undefined
this.listQuery.end = undefined
return
}
this.listQuery.start = parseInt(+time[0] / 1000)
this.listQuery.end = parseInt((+time[1] + 3600 * 1000 * 24) / 1000)
},
methods: {
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.list = response.data.items;
this.total = response.data.total;
this.listLoading = false;
})
},
handleFilter() {
this.getList();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
},
timeFilter(time) {
if (!time[0]) {
this.listQuery.start = undefined;
this.listQuery.end = undefined;
return;
}
this.listQuery.start = parseInt(+time[0] / 1000);
this.listQuery.end = parseInt((+time[1] + 3600 * 1000 * 24) / 1000);
},
handleModifyStatus(row, status) {
this.$message({
message: '操作成功',
type: 'success'
});
row.status = status;
},
handleCreate() {
this.resetTemp();
this.dialogStatus = 'create';
this.dialogFormVisible = true;
},
handleUpdate(row) {
this.temp = Object.assign({}, row);
this.dialogStatus = 'update';
this.dialogFormVisible = true;
},
handleDelete(row) {
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
});
const index = this.list.indexOf(row);
this.list.splice(index, 1);
},
create() {
this.temp.id = parseInt(Math.random() * 100) + 1024;
this.temp.timestamp = +new Date();
this.temp.author = '原创作者';
this.list.unshift(this.temp);
this.dialogFormVisible = false;
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
});
},
update() {
this.temp.timestamp = +this.temp.timestamp;
for (const v of this.list) {
if (v.id === this.temp.id) {
const index = this.list.indexOf(v);
this.list.splice(index, 1, this.temp);
break;
}
handleModifyStatus(row, status) {
this.$message({
message: '操作成功',
type: 'success'
})
row.status = status
},
handleCreate() {
this.resetTemp()
this.dialogStatus = 'create'
this.dialogFormVisible = true
},
handleUpdate(row) {
this.temp = Object.assign({}, row)
this.dialogStatus = 'update'
this.dialogFormVisible = true
},
handleDelete(row) {
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
})
const index = this.list.indexOf(row)
this.list.splice(index, 1)
},
create() {
this.temp.id = parseInt(Math.random() * 100) + 1024
this.temp.timestamp = +new Date()
this.temp.author = '原创作者'
this.list.unshift(this.temp)
this.dialogFormVisible = false
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
})
},
update() {
this.temp.timestamp = +this.temp.timestamp
for (const v of this.list) {
if (v.id === this.temp.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.temp)
break
}
this.dialogFormVisible = false;
this.$notify({
title: '成功',
message: '更新成功',
type: 'success',
duration: 2000
});
},
resetTemp() {
this.temp = {
id: undefined,
importance: 0,
remark: '',
timestamp: 0,
title: '',
status: 'published',
type: ''
};
},
handleFetchPv(pv) {
fetchPv(pv).then(response => {
this.pvData = response.data.pvData;
this.dialogPvVisible = true;
})
},
handleDownload() {
require.ensure([], () => {
const { export_json_to_excel } = require('vendor/Export2Excel');
const tHeader = ['时间', '地区', '类型', '标题', '重要性'];
const filterVal = ['timestamp', 'province', 'type', 'title', 'importance'];
const data = this.formatJson(filterVal, this.list);
export_json_to_excel(tHeader, data, 'table数据');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
}
this.dialogFormVisible = false
this.$notify({
title: '成功',
message: '更新成功',
type: 'success',
duration: 2000
})
},
resetTemp() {
this.temp = {
id: undefined,
importance: 0,
remark: '',
timestamp: 0,
title: '',
status: 'published',
type: ''
}
},
handleFetchPv(pv) {
fetchPv(pv).then(response => {
this.pvData = response.data.pvData
this.dialogPvVisible = true
})
},
handleDownload() {
require.ensure([], () => {
const { export_json_to_excel } = require('vendor/Export2Excel')
const tHeader = ['时间', '地区', '类型', '标题', '重要性']
const filterVal = ['timestamp', 'province', 'type', 'title', 'importance']
const data = this.formatJson(filterVal, this.list)
export_json_to_excel(tHeader, data, 'table数据')
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
}
}
}
</script>
src/views/excel/index.vue
View file @ 551e911e
......@@ -34,41 +34,41 @@
</template>
<script>
import { getList } from 'api/article';
import { getList } from 'api/article'
export default {
data() {
return {
list: null,
listLoading: true
}
},
created() {
this.fetchData();
export default {
data() {
return {
list: null,
listLoading: true
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
getList(this.listQuery).then(response => {
this.list = response.data
this.listLoading = false
})
},
methods: {
fetchData() {
this.listLoading = true;
getList(this.listQuery).then(response => {
this.list = response.data;
this.listLoading = false;
})
},
handleDownload() {
require.ensure([], () => {
const {
handleDownload() {
require.ensure([], () => {
const {
export_json_to_excel
} = require('vendor/Export2Excel');
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'];
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
const list = this.list;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
} = require('vendor/Export2Excel')
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '列表excel')
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
};
}
}
</script>
src/views/excel/selectExcel.vue
View file @ 551e911e
......@@ -41,51 +41,51 @@
<script>
import { getList } from 'api/article';
import { getList } from 'api/article'
export default {
data() {
return {
list: null,
listLoading: true,
multipleSelection: []
}
export default {
data() {
return {
list: null,
listLoading: true,
multipleSelection: []
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
getList(this.listQuery).then(response => {
this.list = response.data
this.listLoading = false
})
},
created() {
this.fetchData();
handleSelectionChange(val) {
this.multipleSelection = val
},
methods: {
fetchData() {
this.listLoading = true;
getList(this.listQuery).then(response => {
this.list = response.data;
this.listLoading = false;
handleDownload() {
if (this.multipleSelection.length) {
require.ensure([], () => {
const { export_json_to_excel } = require('vendor/Export2Excel')
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.multipleSelection
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '列表excel')
this.$refs.multipleTable.clearSelection()
})
} else {
this.$message({
message: '请选择一条或多条记录导出',
type: 'warning'
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleDownload() {
if (this.multipleSelection.length) {
require.ensure([], () => {
const { export_json_to_excel } = require('vendor/Export2Excel');
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'];
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
const list = this.multipleSelection;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
this.$refs.multipleTable.clearSelection();
})
} else {
this.$message({
message: '请选择一条或多条记录导出',
type: 'warning'
});
}
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
};
}
}
</script>
src/views/layout/AppMain.vue
View file @ 551e911e
......@@ -7,7 +7,7 @@
</template>
<script>
export default {
export default {
name: 'AppMain',
computed: {
key() {
......
src/views/layout/Layout.vue
View file @ 551e911e
......@@ -9,21 +9,21 @@
</template>
<script>
import { Navbar, Sidebar, AppMain } from 'views/layout';
import { Navbar, Sidebar, AppMain } from 'views/layout'
export default {
name: 'layout',
components: {
Navbar,
Sidebar,
AppMain
},
computed: {
sidebar() {
return this.$store.state.app.sidebar;
}
export default {
name: 'layout',
components: {
Navbar,
Sidebar,
AppMain
},
computed: {
sidebar() {
return this.$store.state.app.sidebar
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/layout/Levelbar.vue
View file @ 551e911e
......@@ -8,31 +8,31 @@
</template>
<script>
export default {
created() {
this.getBreadcrumb()
},
data() {
return {
levelList: null
}
},
methods: {
getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name);
const first = matched[0];
if (first && (first.name !== '首页' || first.path !== '')) {
matched = [{ name: '首页', path: '/' }].concat(matched)
}
this.levelList = matched;
}
},
watch: {
$route() {
this.getBreadcrumb();
export default {
created() {
this.getBreadcrumb()
},
data() {
return {
levelList: null
}
},
methods: {
getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name)
const first = matched[0]
if (first && (first.name !== '首页' || first.path !== '')) {
matched = [{ name: '首页', path: '/' }].concat(matched)
}
this.levelList = matched
}
},
watch: {
$route() {
this.getBreadcrumb()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/layout/Navbar.vue
View file @ 551e911e
......@@ -28,45 +28,45 @@
</template>
<script>
import { mapGetters } from 'vuex';
import Levelbar from './Levelbar';
import TabsView from './TabsView';
import Hamburger from 'components/Hamburger';
import Screenfull from 'components/Screenfull';
import ErrorLog from 'components/ErrLog';
import errLogStore from 'store/errLog';
import { mapGetters } from 'vuex'
import Levelbar from './Levelbar'
import TabsView from './TabsView'
import Hamburger from 'components/Hamburger'
import Screenfull from 'components/Screenfull'
import ErrorLog from 'components/ErrLog'
import errLogStore from 'store/errLog'
export default {
components: {
Levelbar,
TabsView,
Hamburger,
ErrorLog,
Screenfull
},
data() {
return {
log: errLogStore.state.errLog
}
},
computed: {
...mapGetters([
'sidebar',
'name',
'avatar'
])
export default {
components: {
Levelbar,
TabsView,
Hamburger,
ErrorLog,
Screenfull
},
data() {
return {
log: errLogStore.state.errLog
}
},
computed: {
...mapGetters([
'sidebar',
'name',
'avatar'
])
},
methods: {
toggleSideBar() {
this.$store.dispatch('ToggleSideBar')
},
methods: {
toggleSideBar() {
this.$store.dispatch('ToggleSideBar')
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload();// 为了重新实例化vue-router对象 避免bug
});
}
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/layout/Sidebar.vue
View file @ 551e911e
......@@ -6,18 +6,18 @@
<script>
import { mapGetters } from 'vuex';
import SidebarItem from './SidebarItem';
export default {
components: { SidebarItem },
computed: {
...mapGetters([
'permission_routers',
'sidebar'
]),
isCollapse() {
return !this.sidebar.opened
}
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
export default {
components: { SidebarItem },
computed: {
...mapGetters([
'permission_routers',
'sidebar'
]),
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>
src/views/layout/SidebarItem.vue
View file @ 551e911e
......@@ -31,13 +31,13 @@
</template>
<script>
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
}
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
}
}
}
</script>
src/views/layout/TabsView.vue
View file @ 551e911e
......@@ -9,37 +9,37 @@
</template>
<script>
export default {
computed: {
visitedViews() {
return this.$store.state.app.visitedViews.slice(-6)
}
export default {
computed: {
visitedViews() {
return this.$store.state.app.visitedViews.slice(-6)
}
},
methods: {
closeViewTabs(view, $event) {
this.$store.dispatch('delVisitedViews', view)
$event.preventDefault()
},
methods: {
closeViewTabs(view, $event) {
this.$store.dispatch('delVisitedViews', view)
$event.preventDefault()
},
generateRoute() {
if (this.$route.matched[this.$route.matched.length - 1].name) {
return this.$route.matched[this.$route.matched.length - 1]
}
this.$route.matched[0].path = '/'
return this.$route.matched[0]
},
addViewTabs() {
this.$store.dispatch('addVisitedViews', this.generateRoute())
},
isActive(path) {
return path === this.$route.path
generateRoute() {
if (this.$route.matched[this.$route.matched.length - 1].name) {
return this.$route.matched[this.$route.matched.length - 1]
}
this.$route.matched[0].path = '/'
return this.$route.matched[0]
},
watch: {
$route() {
this.addViewTabs()
}
addViewTabs() {
this.$store.dispatch('addVisitedViews', this.generateRoute())
},
isActive(path) {
return path === this.$route.path
}
},
watch: {
$route() {
this.addViewTabs()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/layout/index.js
View file @ 551e911e
export { default as Navbar } from './Navbar';
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar';
export { default as Sidebar } from './Sidebar'
export { default as Levelbar } from './Levelbar';
export { default as Levelbar } from './Levelbar'
export { default as AppMain } from './AppMain';
export { default as AppMain } from './AppMain'
src/views/login/authredirect.vue
View file @ 551e911e
......@@ -2,9 +2,9 @@
export default {
name: 'authredirect',
created() {
const hash = window.location.search.slice(1);
window.opener.location.href = window.location.origin + '/login#' + hash;
window.close();
}
const hash = window.location.search.slice(1)
window.opener.location.href = window.location.origin + '/login#' + hash
window.close()
}
}
</script>
src/views/login/index.vue
View file @ 551e911e
......@@ -37,67 +37,67 @@
</template>
<script>
import { isvalidUsername } from 'utils/validate'
import socialSign from './socialsignin'
import { isvalidUsername } from 'utils/validate'
import socialSign from './socialsignin'
export default {
components: { socialSign },
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户名'))
} else {
callback()
}
export default {
components: { socialSign },
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户名'))
} else {
callback()
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码不能小于6位'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码不能小于6位'))
} else {
callback()
}
return {
loginForm: {
username: 'admin',
password: '1111111'
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
},
pwdType: 'password',
loading: false,
showDialog: false
}
return {
loginForm: {
username: 'admin',
password: '1111111'
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
},
pwdType: 'password',
loading: false,
showDialog: false
}
},
methods: {
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = 'password'
}
},
methods: {
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
// this.showDialog = true
}).catch(() => {
this.loading = false
})
} else {
this.pwdType = 'password'
console.log('error submit!!')
return false
}
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
// this.showDialog = true
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
},
afterQRScan() {
})
},
afterQRScan() {
// const hash = window.location.hash.slice(1)
// const hashObj = getQueryObject(hash)
// const originUrl = window.location.origin
......@@ -114,15 +114,15 @@
// this.$router.push({ path: '/' })
// })
// }
}
},
created() {
}
},
created() {
// window.addEventListener('hashchange', this.afterQRScan)
},
destroyed() {
},
destroyed() {
// window.removeEventListener('hashchange', this.afterQRScan)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
......
src/views/login/socialsignin.vue
View file @ 551e911e
......@@ -10,27 +10,27 @@
</template>
<script>
import openWindow from 'utils/openWindow';
import openWindow from 'utils/openWindow'
export default {
name: 'social-signin',
methods: {
wechatHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart);
const appid = 'xxxxx';
const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/authredirect');
const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect';
openWindow(url, thirdpart, 540, 540);
},
tencentHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart);
const client_id = 'xxxxx';
const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/authredirect');
const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirect_uri;
openWindow(url, thirdpart, 540, 540);
}
export default {
name: 'social-signin',
methods: {
wechatHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart)
const appid = 'xxxxx'
const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/authredirect')
const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
openWindow(url, thirdpart, 540, 540)
},
tencentHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart)
const client_id = 'xxxxx'
const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/authredirect')
const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirect_uri
openWindow(url, thirdpart, 540, 540)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/permission/index.vue
View file @ 551e911e
......@@ -9,24 +9,25 @@
</template>
<script>
import { mapGetters } from 'vuex';
export default{
data() {
return {
role: ''
}
},
computed: {
...mapGetters([
'roles'
])
},
watch: {
role(val) {
this.$store.dispatch('ChangeRole', val).then(() => {
this.$router.push({ path: '/permission/index?' + +new Date() });
})
}
import { mapGetters } from 'vuex'
export default{
data() {
return {
role: ''
}
},
computed: {
...mapGetters([
'roles'
])
},
watch: {
role(val) {
this.$store.dispatch('ChangeRole', val).then(() => {
this.$router.push({ path: '/permission/index?' + +new Date() })
})
}
}
}
</script>
src/views/qiniu/upload.vue
View file @ 551e911e
......@@ -7,33 +7,33 @@
<script>
import { getToken } from 'api/qiniu'; // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
import { getToken } from 'api/qiniu' // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
export default{
data() {
return {
dataObj: { token: '', key: '' },
image_uri: [],
fileList: []
}
},
methods: {
beforeUpload() {
const _self = this;
return new Promise((resolve, reject) => {
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;
resolve(true);
}).catch(err => {
console.log(err)
reject(false)
});
});
}
export default{
data() {
return {
dataObj: { token: '', key: '' },
image_uri: [],
fileList: []
}
},
methods: {
beforeUpload() {
const _self = this
return new Promise((resolve, reject) => {
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
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
}
}
}
</script>
src/views/theme/index.vue
View file @ 551e911e
......@@ -43,51 +43,50 @@
</div>
</template>
<script>
import { toggleClass } from 'utils';
import '@/assets/custom-theme/index.css'; // 换肤版本element-ui css
import { toggleClass } from 'utils'
import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
export default {
data() {
return {
theme: false,
tags: [{
name: '标签一',
type: ''
},
{
name: '标签二',
type: 'gray'
},
{
name: '标签三',
type: 'primary'
},
{
name: '标签四',
type: 'success'
},
{
name: '标签五',
type: 'warning'
},
{
name: '标签六',
type: 'danger'
}
],
inputVisible: false,
inputValue: ''
export default {
data() {
return {
theme: false,
tags: [{
name: '标签一',
type: ''
},
{
name: '标签二',
type: 'gray'
},
{
name: '标签三',
type: 'primary'
},
{
name: '标签四',
type: 'success'
},
{
name: '标签五',
type: 'warning'
},
{
name: '标签六',
type: 'danger'
}
},
watch: {
theme() {
toggleClass(document.body, 'custom-theme')
],
inputVisible: false,
inputValue: ''
}
},
watch: {
theme() {
toggleClass(document.body, 'custom-theme')
// this.$store.dispatch('setTheme', value);
}
}
};
}
}
</script>
<style scoped>
......
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