refactor: add eslint-plugin-vue && lint code (#976)
This commit is contained in:
花裤衩
GitHub
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
<div class="chart-container">
|
||||
<chart height="100%" width="100%"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import Chart from '@/components/Charts/keyboard'
|
||||
|
||||
export default {
|
||||
name: 'keyboardChart',
|
||||
name: 'KeyboardChart',
|
||||
components: { Chart }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
<div class="chart-container">
|
||||
<chart height="100%" width="100%"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import Chart from '@/components/Charts/lineMarker'
|
||||
|
||||
export default {
|
||||
name: 'lineChart',
|
||||
name: 'LineChart',
|
||||
components: { Chart }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
<div class="chart-container">
|
||||
<chart height="100%" width="100%"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import Chart from '@/components/Charts/mixChart'
|
||||
|
||||
export default {
|
||||
name: 'mixChart',
|
||||
name: 'MixChart',
|
||||
components: { Chart }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="use clipboard directly" name="directly">
|
||||
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
|
||||
<el-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button>
|
||||
<el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
|
||||
<el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">copy</el-button>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="use clipboard by v-directive" name="v-directive">
|
||||
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
|
||||
<el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
|
||||
<el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
|
||||
<el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@@ -18,7 +18,7 @@ import clip from '@/utils/clipboard' // use clipboard directly
|
||||
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
|
||||
|
||||
export default {
|
||||
name: 'clipboardDemo',
|
||||
name: 'ClipboardDemo',
|
||||
directives: {
|
||||
clipboard
|
||||
},
|
||||
|
||||
@@ -2,16 +2,23 @@
|
||||
<div class="components-container">
|
||||
<code>This is based on
|
||||
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
|
||||
{{$t('components.imageUploadTips')}}
|
||||
{{ $t('components.imageUploadTips') }}
|
||||
</code>
|
||||
|
||||
<pan-thumb :image="image"></pan-thumb>
|
||||
<pan-thumb :image="image"/>
|
||||
|
||||
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar
|
||||
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change Avatar
|
||||
</el-button>
|
||||
|
||||
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
|
||||
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
|
||||
<image-cropper
|
||||
v-show="imagecropperShow"
|
||||
:width="300"
|
||||
:height="300"
|
||||
:key="imagecropperKey"
|
||||
url="https://httpbin.org/post"
|
||||
lang-type="en"
|
||||
@close="close"
|
||||
@crop-upload-success="cropSuccess"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -20,7 +27,7 @@ import ImageCropper from '@/components/ImageCropper'
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
|
||||
export default {
|
||||
name: 'avatarUpload-demo',
|
||||
name: 'AvatarUploadDemo',
|
||||
components: { ImageCropper, PanThumb },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<code>{{$t('components.backToTopTips1')}}</code>
|
||||
<code>{{$t('components.backToTopTips2')}}</code>
|
||||
<code>{{ $t('components.backToTopTips1') }}</code>
|
||||
<code>{{ $t('components.backToTopTips2') }}</code>
|
||||
<div class="placeholder-container">
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
@@ -116,7 +116,7 @@
|
||||
<!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
|
||||
<!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 -->
|
||||
<el-tooltip placement="top" content="tooltip">
|
||||
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
|
||||
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade"/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -125,7 +125,7 @@
|
||||
import BackToTop from '@/components/BackToTop'
|
||||
|
||||
export default {
|
||||
name: 'backToTop-demo',
|
||||
name: 'BackToTopDemo',
|
||||
components: { BackToTop },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -3,37 +3,46 @@
|
||||
<p class="warn-content">
|
||||
<a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
|
||||
</p>
|
||||
<count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals"
|
||||
:separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to>
|
||||
<count-to
|
||||
ref="example"
|
||||
:start-val="_startVal"
|
||||
:end-val="_endVal"
|
||||
:duration="_duration"
|
||||
:decimals="_decimals"
|
||||
:separator="_separator"
|
||||
:prefix="_prefix"
|
||||
:suffix="_suffix"
|
||||
:autoplay="false"
|
||||
class="example"/>
|
||||
<div style="margin-left: 25%;margin-top: 40px;">
|
||||
<label class="label" for="startValInput">startVal:
|
||||
<input type="number" v-model.number="setStartVal" name="startValInput" />
|
||||
<input v-model.number="setStartVal" type="number" name="startValInput" >
|
||||
</label>
|
||||
<label class="label" for="endValInput">endVal:
|
||||
<input type="number" v-model.number="setEndVal" name="endVaInput" />
|
||||
<input v-model.number="setEndVal" type="number" name="endVaInput" >
|
||||
</label>
|
||||
<label class="label" for="durationInput">duration:
|
||||
<input type="number" v-model.number="setDuration" name="durationInput" />
|
||||
<input v-model.number="setDuration" type="number" name="durationInput" >
|
||||
</label>
|
||||
<div class="startBtn example-btn" @click="start">开始</div>
|
||||
<div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
|
||||
<br/>
|
||||
<br>
|
||||
<label class="label" for="decimalsInput">decimals:
|
||||
<input type="number" v-model.number="setDecimals" name="decimalsInput" />
|
||||
<input v-model.number="setDecimals" type="number" name="decimalsInput" >
|
||||
</label>
|
||||
<label class="label" for="separatorInput">separator:
|
||||
<input v-model="setSeparator" name="separatorInput" />
|
||||
<input v-model="setSeparator" name="separatorInput" >
|
||||
</label>
|
||||
<label class="label" for="prefixInput">prefix:
|
||||
<input v-model="setPrefix" name="prefixInput" />
|
||||
<input v-model="setPrefix" name="prefixInput" >
|
||||
</label>
|
||||
<label class="label" for="suffixInput">suffix:
|
||||
<input v-model="setSuffix" name="suffixInput" />
|
||||
<input v-model="setSuffix" name="suffixInput" >
|
||||
</label>
|
||||
</div>
|
||||
<code><count-to :start-val='{{_startVal}}' :end-val='{{_endVal}}' :duration='{{_duration}}'
|
||||
:decimals='{{_decimals}}' :separator='{{_separator}}' :prefix='{{_prefix}}' :suffix='{{_suffix}}'
|
||||
:autoplay=false></code>
|
||||
<code><count-to :start-val='{{ _startVal }}' :end-val='{{ _endVal }}' :duration='{{ _duration }}'
|
||||
:decimals='{{ _decimals }}' :separator='{{ _separator }}' :prefix='{{ _prefix }}' :suffix='{{ _suffix }}'
|
||||
:autoplay=false></code>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -41,7 +50,7 @@
|
||||
import countTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
name: 'countTo-demo',
|
||||
name: 'CountToDemo',
|
||||
components: { countTo },
|
||||
data() {
|
||||
return {
|
||||
@@ -202,4 +211,3 @@ input {
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
|
||||
</code>
|
||||
<div class="editor-container">
|
||||
<dnd-list :list1="list1" :list2="list2" list1Title="List" list2Title="Article pool"></dnd-list>
|
||||
<dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -14,7 +14,7 @@ import DndList from '@/components/DndList'
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
name: 'dndList-demo',
|
||||
name: 'DndListDemo',
|
||||
components: { DndList },
|
||||
data() {
|
||||
return {
|
||||
@@ -37,4 +37,3 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
|
||||
<el-dialog v-el-drag-dialog @dragDialog="handleDrag" title="Shipping address" :visible.sync="dialogTableVisible">
|
||||
<el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
|
||||
<el-select ref="select" v-model="value" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="Date" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="Name" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="Address"></el-table-column>
|
||||
<el-table-column property="date" label="Date" width="150"/>
|
||||
<el-table-column property="name" label="Name" width="200"/>
|
||||
<el-table-column property="address" label="Address"/>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@@ -19,7 +18,7 @@
|
||||
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
|
||||
|
||||
export default {
|
||||
name: 'dragDialog-demo',
|
||||
name: 'DragDialogDemo',
|
||||
directives: { elDragDialog },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="components-container board">
|
||||
<Kanban :key="1" class="kanban todo" :list="list1" :options="options" header-text="Todo"/>
|
||||
<Kanban :key="2" class="kanban working" :list="list2" :options="options" header-text="Working"/>
|
||||
<Kanban :key="3" class="kanban done" :list="list3" :options="options" header-text="Done"/>
|
||||
<Kanban :key="1" :list="list1" :options="options" class="kanban todo" header-text="Todo"/>
|
||||
<Kanban :key="2" :list="list2" :options="options" class="kanban working" header-text="Working"/>
|
||||
<Kanban :key="3" :list="list3" :options="options" class="kanban done" header-text="Done"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Kanban from '@/components/Kanban'
|
||||
|
||||
export default {
|
||||
name: 'dragKanban-demo',
|
||||
name: 'DragKanbanDemo',
|
||||
components: {
|
||||
Kanban
|
||||
},
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="components-container">
|
||||
<code>
|
||||
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
|
||||
{{$t('components.dropzoneTips')}}
|
||||
{{ $t('components.dropzoneTips') }}
|
||||
</code>
|
||||
<div class="editor-container">
|
||||
<dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
|
||||
<dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -14,7 +14,7 @@
|
||||
import Dropzone from '@/components/Dropzone'
|
||||
|
||||
export default {
|
||||
name: 'dropzone-demo',
|
||||
name: 'DropzoneDemo',
|
||||
components: { Dropzone },
|
||||
methods: {
|
||||
dropzoneS(file) {
|
||||
@@ -29,4 +29,3 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="components-container">
|
||||
<code>JsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
|
||||
<div class="editor-container">
|
||||
<json-editor ref="jsonEditor" v-model="value"></json-editor>
|
||||
<json-editor ref="jsonEditor" v-model="value"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -13,7 +13,7 @@ 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 {
|
||||
name: 'jsonEditor-demo',
|
||||
name: 'JsonEditorDemo',
|
||||
components: { JsonEditor },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
相关文章 </a>
|
||||
</code>
|
||||
<div class="editor-container">
|
||||
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
|
||||
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :z-index="20"/>
|
||||
</div>
|
||||
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">To HTML</el-button>
|
||||
<div v-html="html"></div>
|
||||
<el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="markdown2Html">To HTML</el-button>
|
||||
<div v-html="html"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -27,7 +27,7 @@ const content = `
|
||||
`
|
||||
|
||||
export default {
|
||||
name: 'markdown-demo',
|
||||
name: 'MarkdownDemo',
|
||||
components: { MarkdownEditor },
|
||||
data() {
|
||||
return {
|
||||
@@ -46,4 +46,3 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<div style="height:100px;">
|
||||
<el-form :model="demo" :rules="demoRules">
|
||||
<el-form-item prop="title">
|
||||
<md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
|
||||
<md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">标题</md-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -74,20 +74,20 @@
|
||||
<span>hover text</span>
|
||||
</div>
|
||||
<div class="component-item">
|
||||
<mallki className="mallki-text" text="vue-element-admin"></mallki>
|
||||
<mallki class-name="mallki-text" text="vue-element-admin"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" style="margin-top:50px;">
|
||||
<el-col :span="6">
|
||||
<el-col :span="8">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Share</span>
|
||||
</div>
|
||||
<div class="component-item" style="height:420px;">
|
||||
<dropdown-menu style="margin:0 auto;" title='系列文章' :items='articleList'></dropdown-menu>
|
||||
<dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@@ -104,7 +104,7 @@ import DropdownMenu from '@/components/Share/dropdownMenu'
|
||||
import waves from '@/directive/waves/index.js' // 水波纹指令
|
||||
|
||||
export default {
|
||||
name: 'componentMixin-demo',
|
||||
name: 'ComponentMixinDemo',
|
||||
components: {
|
||||
PanThumb,
|
||||
MdInput,
|
||||
@@ -134,10 +134,7 @@ export default {
|
||||
{ title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
|
||||
{ title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
|
||||
{ title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
|
||||
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
|
||||
{ title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
|
||||
{ title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
|
||||
{ title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
|
||||
{ title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,19 +3,19 @@
|
||||
<code><strong>SplitPane</strong> If you've used
|
||||
<a href="http://codepen.io/" target="_blank"> codepen</a>,
|
||||
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
|
||||
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a>
|
||||
<a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
|
||||
</code>
|
||||
<split-pane v-on:resize="resize" split="vertical">
|
||||
<split-pane split="vertical" @resize="resize">
|
||||
<template slot="paneL">
|
||||
<div class="left-container"></div>
|
||||
<div class="left-container"/>
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
<split-pane split="horizontal">
|
||||
<template slot="paneL">
|
||||
<div class="top-container"></div>
|
||||
<div class="top-container"/>
|
||||
</template>
|
||||
<template slot="paneR">
|
||||
<div class="bottom-container"></div>
|
||||
<div class="bottom-container"/>
|
||||
</template>
|
||||
</split-pane>
|
||||
</template>
|
||||
@@ -27,7 +27,7 @@
|
||||
import splitPane from 'vue-splitpane'
|
||||
|
||||
export default {
|
||||
name: 'splitpane-demo',
|
||||
name: 'SplitpaneDemo',
|
||||
components: { splitPane },
|
||||
methods: {
|
||||
resize() {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<sticky className="sub-navbar">
|
||||
<sticky class-name="sub-navbar">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain>
|
||||
Platform<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
Platform<i class="el-icon-caret-bottom el-icon--right"/>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-border" slot="dropdown">
|
||||
<el-dropdown-menu slot="dropdown" class="no-border">
|
||||
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
|
||||
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
|
||||
{{item.name}}
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-dropdown-menu>
|
||||
@@ -16,18 +16,17 @@
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain>
|
||||
Link<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
Link<i class="el-icon-caret-bottom el-icon--right"/>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
|
||||
<el-input placeholder="Please enter the content" v-model="url">
|
||||
<el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
|
||||
<el-input v-model="url" placeholder="Please enter the content">
|
||||
<template slot="prepend">Url</template>
|
||||
</el-input>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<div class="time-container">
|
||||
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="time" :picker-options="pickerOptions" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time"/>
|
||||
</div>
|
||||
|
||||
<el-button style="margin-left: 10px;" type="success">publish
|
||||
@@ -35,7 +34,7 @@
|
||||
</sticky>
|
||||
|
||||
<div class="components-container">
|
||||
<code>Sticky header, {{$t('components.stickyTips')}}</code>
|
||||
<code>Sticky header, {{ $t('components.stickyTips') }}</code>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
@@ -92,12 +91,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import Sticky from '@/components/Sticky'
|
||||
|
||||
export default {
|
||||
name: 'sticky-demo',
|
||||
name: 'StickyDemo',
|
||||
components: { Sticky },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<code>
|
||||
{{$t('components.tinymceTips')}}
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{$t('components.documentation')}}</a>
|
||||
{{ $t('components.tinymceTips') }}
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
|
||||
</code>
|
||||
<div>
|
||||
<tinymce :height="300" v-model="content"></tinymce>
|
||||
<tinymce :height="300" v-model="content"/>
|
||||
</div>
|
||||
<div class="editor-content" v-html="content"></div>
|
||||
<div class="editor-content" v-html="content"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
import Tinymce from '@/components/Tinymce'
|
||||
|
||||
export default {
|
||||
name: 'tinymce-demo',
|
||||
name: 'TinymceDemo',
|
||||
components: { Tinymce },
|
||||
data() {
|
||||
return {
|
||||
@@ -34,4 +34,3 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"></div>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<el-card class="box-card-component" style="margin-left:8px;">
|
||||
<div slot="header" class="box-card-header">
|
||||
<img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'>
|
||||
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
|
||||
</div>
|
||||
<div style="position:relative;">
|
||||
<pan-thumb class="panThumb" :image="avatar"></pan-thumb>
|
||||
<mallki className='mallki-text' text='vue-element-admin'></mallki>
|
||||
<div style="padding-top:35px;" class='progress-item'>
|
||||
<pan-thumb :image="avatar" class="panThumb"/>
|
||||
<mallki class-name="mallki-text" text="vue-element-admin"/>
|
||||
<div style="padding-top:35px;" class="progress-item">
|
||||
<span>Vue</span>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="70"/>
|
||||
</div>
|
||||
<div class='progress-item'>
|
||||
<div class="progress-item">
|
||||
<span>JavaScript</span>
|
||||
<el-progress :percentage="18"></el-progress>
|
||||
<el-progress :percentage="18"/>
|
||||
</div>
|
||||
<div class='progress-item'>
|
||||
<div class="progress-item">
|
||||
<span>Css</span>
|
||||
<el-progress :percentage="12"></el-progress>
|
||||
<el-progress :percentage="12"/>
|
||||
</div>
|
||||
<div class='progress-item'>
|
||||
<div class="progress-item">
|
||||
<span>ESLint</span>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="100" status="success"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -34,6 +34,15 @@ import Mallki from '@/components/TextHoverEffect/Mallki'
|
||||
export default {
|
||||
components: { PanThumb, Mallki },
|
||||
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
success: 'success',
|
||||
pending: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statisticsData: {
|
||||
@@ -48,15 +57,6 @@ export default {
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
success: 'success',
|
||||
pending: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"></div>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -26,7 +26,8 @@ export default {
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -34,6 +35,14 @@ export default {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
if (this.autoResize) {
|
||||
@@ -63,14 +72,6 @@ export default {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<el-row class="panel-group" :gutter="40">
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class='card-panel' @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">New Visits</div>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="2600"></count-to>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">Messages</div>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="3000"></count-to>
|
||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">Purchases</div>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="3200"></count-to>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">Shoppings</div>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="3600"></count-to>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"></div>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"></div>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<li class="todo" :class="{ completed: todo.done, editing: editing }">
|
||||
<li :class="{ completed: todo.done, editing: editing }" class="todo">
|
||||
<div class="view">
|
||||
<input class="toggle"
|
||||
type="checkbox"
|
||||
<input
|
||||
:checked="todo.done"
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
@change="toggleTodo( todo)">
|
||||
<label v-text="todo.text" @dblclick="editing = true"></label>
|
||||
<button class="destroy" @click="deleteTodo( todo )"></button>
|
||||
<label @dblclick="editing = true" v-text="todo.text"/>
|
||||
<button class="destroy" @click="deleteTodo( todo )"/>
|
||||
</div>
|
||||
<input class="edit"
|
||||
v-show="editing"
|
||||
<input
|
||||
v-focus="editing"
|
||||
v-show="editing"
|
||||
:value="todo.text"
|
||||
class="edit"
|
||||
@keyup.enter="doneEdit"
|
||||
@keyup.esc="cancelEdit"
|
||||
@blur="doneEdit">
|
||||
@@ -21,12 +23,6 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'Todo',
|
||||
props: ['todo'],
|
||||
data() {
|
||||
return {
|
||||
editing: false
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
focus(el, { value }, { context }) {
|
||||
if (value) {
|
||||
@@ -36,6 +32,19 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
todo: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editing: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteTodo(todo) {
|
||||
this.$emit('deleteTodo', todo)
|
||||
|
||||
@@ -201,6 +201,7 @@
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
transition: color 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
|
||||
@@ -5,16 +5,21 @@
|
||||
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
|
||||
</header>
|
||||
<!-- main section -->
|
||||
<section class="main" v-show="todos.length">
|
||||
<input class="toggle-all" id="toggle-all" type="checkbox" :checked="allChecked" @change="toggleAll({ done: !allChecked })">
|
||||
<label for="toggle-all"></label>
|
||||
<section v-show="todos.length" class="main">
|
||||
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
|
||||
<label for="toggle-all"/>
|
||||
<ul class="todo-list">
|
||||
<todo @toggleTodo='toggleTodo' @editTodo='editTodo' @deleteTodo='deleteTodo' v-for="(todo, index) in filteredTodos" :key="index"
|
||||
:todo="todo"></todo>
|
||||
<todo
|
||||
v-for="(todo, index) in filteredTodos"
|
||||
:key="index"
|
||||
:todo="todo"
|
||||
@toggleTodo="toggleTodo"
|
||||
@editTodo="editTodo"
|
||||
@deleteTodo="deleteTodo"/>
|
||||
</ul>
|
||||
</section>
|
||||
<!-- footer -->
|
||||
<footer class="footer" v-show="todos.length">
|
||||
<footer v-show="todos.length" class="footer">
|
||||
<span class="todo-count">
|
||||
<strong>{{ remaining }}</strong>
|
||||
{{ remaining | pluralize('item') }} left
|
||||
@@ -52,6 +57,10 @@ const defalutList = [
|
||||
]
|
||||
export default {
|
||||
components: { Todo },
|
||||
filters: {
|
||||
pluralize: (n, w) => n === 1 ? w : w + 's',
|
||||
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibility: 'all',
|
||||
@@ -108,10 +117,6 @@ export default {
|
||||
this.setLocalStorage()
|
||||
})
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
pluralize: (n, w) => n === 1 ? w : w + 's',
|
||||
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
<el-table :data="list" style="width: 100%;padding-top: 15px;">
|
||||
<el-table-column label="Order_No" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.order_no | orderNoFilter}}
|
||||
{{ scope.row.order_no | orderNoFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Price" width="195" align="center">
|
||||
<template slot-scope="scope">
|
||||
¥{{scope.row.price | toThousandslsFilter}}
|
||||
¥{{ scope.row.price | toThousandslsFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Status" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
|
||||
<el-tag :type="scope.row.status | statusFilter"> {{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -22,11 +22,6 @@
|
||||
import { fetchList } from '@/api/transaction'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: null
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
@@ -39,6 +34,11 @@ export default {
|
||||
return str.substring(0, 30)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
@@ -1,48 +1,47 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
|
||||
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData"/>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData"></line-chart>
|
||||
<line-chart :chart-data="lineChartData"/>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart></raddar-chart>
|
||||
<raddar-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart></pie-chart>
|
||||
<pie-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart></bar-chart>
|
||||
<bar-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
||||
<transaction-table></transaction-table>
|
||||
<transaction-table/>
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<todo-list></todo-list>
|
||||
<todo-list/>
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<box-card></box-card>
|
||||
<box-card/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
@@ -74,7 +73,7 @@ const lineChartData = {
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'dashboard-admin',
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
GithubCorner,
|
||||
PanelGroup,
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<div class=" clearfix">
|
||||
<pan-thumb style="float: left" :image="avatar"> Your roles:
|
||||
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
|
||||
<pan-thumb :image="avatar" style="float: left"> Your roles:
|
||||
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
|
||||
</pan-thumb>
|
||||
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
|
||||
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
|
||||
<div class="info-container">
|
||||
<span class="display_name">{{name}}</span>
|
||||
<span class="display_name">{{ name }}</span>
|
||||
<span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="emptyGif" :src="emptyGif">
|
||||
<img :src="emptyGif" class="emptyGif">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -22,7 +22,7 @@ import PanThumb from '@/components/PanThumb'
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
|
||||
export default {
|
||||
name: 'dashboard-editor',
|
||||
name: 'DashboardEditor',
|
||||
components: { PanThumb, GithubCorner },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<component :is="currentRole"></component>
|
||||
<component :is="currentRole"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -10,7 +10,7 @@ import adminDashboard from './admin'
|
||||
import editorDashboard from './editor'
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
components: { adminDashboard, editorDashboard },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container documentation-container">
|
||||
<a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/">{{$t('documentation.documentation')}}</a>
|
||||
<a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{$t('documentation.github')}}</a>
|
||||
<dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
|
||||
<a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">{{ $t('documentation.documentation') }}</a>
|
||||
<a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">{{ $t('documentation.github') }}</a>
|
||||
<dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DropdownMenu from '@/components/Share/dropdownMenu'
|
||||
|
||||
export default {
|
||||
name: 'documentation',
|
||||
name: 'Documentation',
|
||||
components: { DropdownMenu },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--error code-->
|
||||
{{a.a}}
|
||||
{{ a.a }}
|
||||
<!--error code-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'errorTestA'
|
||||
name: 'ErrorTestA'
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="errPage-container">
|
||||
<errorA></errorA>
|
||||
<errorB></errorB>
|
||||
<errorA/>
|
||||
<errorB/>
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<h3>{{$t('errorLog.tips')}}</h3>
|
||||
<h3>{{ $t('errorLog.tips') }}</h3>
|
||||
<code>
|
||||
{{$t('errorLog.description')}}
|
||||
{{ $t('errorLog.description') }}
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
|
||||
{{$t('errorLog.documentation')}}
|
||||
{{ $t('errorLog.documentation') }}
|
||||
</a>
|
||||
</code>
|
||||
<a href="#">
|
||||
<img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>
|
||||
<img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
@@ -21,7 +21,7 @@ import errorA from './errorTestA'
|
||||
import errorB from './errorTestB'
|
||||
|
||||
export default {
|
||||
name: 'errorLog',
|
||||
name: 'ErrorLog',
|
||||
components: { errorA, errorB }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="errPage-container">
|
||||
<el-button @click="back" icon='arrow-left' class="pan-back-btn">返回</el-button>
|
||||
<el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h1 class="text-jumbo text-ginormous">Oops!</h1>
|
||||
gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
|
||||
gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
|
||||
<h2>你没有权限去该页面</h2>
|
||||
<h6>如有不满请联系你领导</h6>
|
||||
<ul class="list-unstyled">
|
||||
@@ -13,15 +13,15 @@
|
||||
<router-link to="/dashboard">回首页</router-link>
|
||||
</li>
|
||||
<li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li>
|
||||
<li><a @click.prevent="dialogVisible=true" href="#">点我看图</a></li>
|
||||
<li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog title="随便看" :visible.sync="dialogVisible">
|
||||
<img class="pan-img" :src="ewizardClap">
|
||||
<el-dialog :visible.sync="dialogVisible" title="随便看">
|
||||
<img :src="ewizardClap" class="pan-img">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -30,7 +30,7 @@
|
||||
import errGif from '@/assets/401_images/401.gif'
|
||||
|
||||
export default {
|
||||
name: 'page401',
|
||||
name: 'Page401',
|
||||
data() {
|
||||
return {
|
||||
errGif: errGif + '?' + +new Date(),
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="bullshit">
|
||||
<div class="bullshit__oops">OOPS!</div>
|
||||
<div class="bullshit__info">版权所有
|
||||
<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
|
||||
<a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
|
||||
</div>
|
||||
<div class="bullshit__headline">{{ message }}</div>
|
||||
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
|
||||
@@ -23,7 +23,7 @@
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'page404',
|
||||
name: 'Page404',
|
||||
computed: {
|
||||
message() {
|
||||
return '网管说这个页面你不能进......'
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="createPost-container">
|
||||
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
|
||||
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
|
||||
|
||||
<sticky :className="'sub-navbar '+postForm.status">
|
||||
<sticky :class-name="'sub-navbar '+postForm.status">
|
||||
<CommentDropdown v-model="postForm.comment_disabled" />
|
||||
<PlatformDropdown v-model="postForm.platforms" />
|
||||
<SourceUrlDropdown v-model="postForm.source_uri" />
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item style="margin-bottom: 40px;" prop="title">
|
||||
<MDinput name="name" v-model="postForm.title" required :maxlength="100">
|
||||
<MDinput v-model="postForm.title" :maxlength="100" name="name" required>
|
||||
标题
|
||||
</MDinput>
|
||||
</el-form-item>
|
||||
@@ -27,25 +27,27 @@
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
|
||||
<el-select v-model="postForm.author" filterable remote placeholder="搜索用户" :remote-method="getRemoteUserList">
|
||||
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item">
|
||||
</el-option>
|
||||
<el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable remote placeholder="搜索用户">
|
||||
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="10">
|
||||
<el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
|
||||
<el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
|
||||
<el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1"
|
||||
:high-threshold="3">
|
||||
</el-rate>
|
||||
<el-rate
|
||||
v-model="postForm.importance"
|
||||
:max="3"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
|
||||
:low-threshold="1"
|
||||
:high-threshold="3"
|
||||
style="margin-top:8px;"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -54,13 +56,12 @@
|
||||
</el-row>
|
||||
|
||||
<el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
|
||||
<el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.content_short">
|
||||
</el-input>
|
||||
<span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
|
||||
<el-input :rows="1" v-model="postForm.content_short" type="textarea" class="article-textarea" autosize placeholder="请输入内容"/>
|
||||
<span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
|
||||
</el-form-item>
|
||||
|
||||
<div class="editor-container">
|
||||
<Tinymce :height=400 ref="editor" v-model="postForm.content" />
|
||||
<Tinymce ref="editor" :height="400" v-model="postForm.content" />
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
@@ -100,7 +101,7 @@ const defaultForm = {
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'articleDetail',
|
||||
name: 'ArticleDetail',
|
||||
components: { Tinymce, MDinput, Upload, Multiselect, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
|
||||
props: {
|
||||
isEdit: {
|
||||
@@ -115,7 +116,7 @@ export default {
|
||||
message: rule.field + '为必传项',
|
||||
type: 'error'
|
||||
})
|
||||
callback(null)
|
||||
callback(new Error(rule.field + '为必传项'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
@@ -129,7 +130,7 @@ export default {
|
||||
message: '外链url填写不正确',
|
||||
type: 'error'
|
||||
})
|
||||
callback(null)
|
||||
callback(new Error('外链url填写不正确'))
|
||||
}
|
||||
} else {
|
||||
callback()
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" :show-timeout="100">
|
||||
<el-button plain>{{!comment_disabled?'评论已打开':'评论已关闭'}}
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
<el-dropdown :show-timeout="100" trigger="click">
|
||||
<el-button plain>{{ !comment_disabled?'评论已打开':'评论已关闭' }}
|
||||
<i class="el-icon-caret-bottom el-icon--right"/>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding" slot="dropdown">
|
||||
<el-dropdown-menu slot="dropdown" class="no-padding">
|
||||
<el-dropdown-item>
|
||||
<el-radio-group style="padding: 10px;" v-model="comment_disabled">
|
||||
<el-radio-group v-model="comment_disabled" style="padding: 10px;">
|
||||
<el-radio :label="true">关闭评论</el-radio>
|
||||
<el-radio :label="false">打开评论</el-radio>
|
||||
</el-radio-group>
|
||||
@@ -16,7 +16,12 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
comment_disabled: {
|
||||
get() {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
|
||||
<el-button plain>
|
||||
平台({{platforms.length}})
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
平台({{ platforms.length }})
|
||||
<i class="el-icon-caret-bottom el-icon--right"/>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-border" slot="dropdown">
|
||||
<el-dropdown-menu slot="dropdown" class="no-border">
|
||||
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
|
||||
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
|
||||
{{item.name}}
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-dropdown-menu>
|
||||
@@ -16,7 +16,13 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
props: {
|
||||
value: {
|
||||
required: true,
|
||||
default: () => [],
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
platformsOptions: [
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<el-dropdown :show-timeout="100" trigger="click">
|
||||
<el-button plain>
|
||||
外链
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
<i class="el-icon-caret-bottom el-icon--right"/>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding no-border" style="width:400px" slot="dropdown">
|
||||
<el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
|
||||
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
|
||||
<el-input placeholder="请输入内容" v-model="source_uri">
|
||||
<el-input v-model="source_uri" placeholder="请输入内容">
|
||||
<template slot="prepend">填写url</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@@ -16,7 +16,12 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
source_uri: {
|
||||
get() {
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<p class="warn-content">
|
||||
创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等浏览器缓存方案。或者不要使用keep-alive
|
||||
的include，直接缓存所有页面。详情见
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
|
||||
<a
|
||||
href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
|
||||
target="_blank">文档</a>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<article-detail :is-edit='false'></article-detail>
|
||||
<article-detail :is-edit="false"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArticleDetail from './components/ArticleDetail'
|
||||
|
||||
export default {
|
||||
name: 'createForm',
|
||||
name: 'CreateForm',
|
||||
components: { ArticleDetail }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<article-detail :is-edit='true'></article-detail>
|
||||
<article-detail :is-edit="true"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArticleDetail from './components/ArticleDetail'
|
||||
|
||||
export default {
|
||||
name: 'editForm',
|
||||
name: 'EditForm',
|
||||
components: { ArticleDetail }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,41 +1,41 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
<el-table v-loading.body="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="180px" align="center" label="Date">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="120px" align="center" label="Author">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
<span>{{ scope.row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="100px" label="Importance">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
|
||||
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="300px" label="Title">
|
||||
<template slot-scope="scope">
|
||||
|
||||
<router-link class="link-type" :to="'/example/edit/'+scope.row.id">
|
||||
<router-link :to="'/example/edit/'+scope.row.id" class="link-type">
|
||||
<span>{{ scope.row.title }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -51,9 +51,15 @@
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
|
||||
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
<el-pagination
|
||||
:current-page="listQuery.page"
|
||||
:page-sizes="[10,20,30, 50]"
|
||||
:page-size="listQuery.limit"
|
||||
:total="total"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -63,7 +69,17 @@
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
name: 'articleList',
|
||||
name: 'ArticleList',
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
@@ -75,16 +91,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
@@ -3,39 +3,39 @@
|
||||
<div class="app-container">
|
||||
|
||||
<label class="radio-label" style="padding-left:0;">Filename: </label>
|
||||
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<label class="radio-label">Cell Auto Width: </label>
|
||||
<el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
|
||||
<label class="radio-label">Cell Auto-Width: </label>
|
||||
<el-radio-group v-model="autoWidth">
|
||||
<el-radio :label="true" border>True</el-radio>
|
||||
<el-radio :label="false" border>False</el-radio>
|
||||
</el-radio-group>
|
||||
<el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
|
||||
<el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
|
||||
|
||||
<el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label='Id' width="95">
|
||||
<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label="Id" width="95">
|
||||
<template slot-scope="scope">
|
||||
{{scope.$index}}
|
||||
{{ scope.$index }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Title">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.title}}
|
||||
{{ scope.row.title }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Author" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{scope.row.author}}</el-tag>
|
||||
<el-tag>{{ scope.row.author }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Readings" width="115" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
{{ scope.row.pageviews }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="Date" width="220">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
<i class="el-icon-time"/>
|
||||
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -47,7 +47,7 @@ import { fetchList } from '@/api/article'
|
||||
import { parseTime } from '@/utils'
|
||||
|
||||
export default {
|
||||
name: 'exportExcel',
|
||||
name: 'ExportExcel',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
|
||||
@@ -1,35 +1,42 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button>
|
||||
<el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
|
||||
ref="multipleTable">
|
||||
<el-table-column type="selection" align="center"></el-table-column>
|
||||
<el-table-column align="center" label='Id' width="95">
|
||||
<el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
|
||||
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">{{ $t('excel.selectedExport') }}</el-button>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="list"
|
||||
element-loading-text="拼命加载中"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center"/>
|
||||
<el-table-column align="center" label="Id" width="95">
|
||||
<template slot-scope="scope">
|
||||
{{scope.$index}}
|
||||
{{ scope.$index }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Title">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.title}}
|
||||
{{ scope.row.title }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Author" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{scope.row.author}}</el-tag>
|
||||
<el-tag>{{ scope.row.author }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Readings" width="115" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
{{ scope.row.pageviews }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="PDate" width="220">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>{{scope.row.display_time}}</span>
|
||||
<i class="el-icon-time"/>
|
||||
<span>{{ scope.row.display_time }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -40,7 +47,7 @@
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
name: 'selectExcel',
|
||||
name: 'SelectExcel',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<upload-excel-component :on-success='handleSuccess' :before-upload="beforeUpload"></upload-excel-component>
|
||||
<upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
|
||||
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
|
||||
<el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item of tableHeader" :prop="item" :label="item" :key="item"/>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -12,7 +11,7 @@
|
||||
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'uploadExcel',
|
||||
name: 'UploadExcel',
|
||||
components: { UploadExcelComponent },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<p class="warn-content">
|
||||
{{$t('guide.description')}}
|
||||
{{ $t('guide.description') }}
|
||||
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
|
||||
</a>
|
||||
</p>
|
||||
<el-button icon='el-icon-question' type="primary" @click.prevent.stop="guide">{{$t('guide.button')}}</el-button>
|
||||
<el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">{{ $t('guide.button') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -15,7 +15,7 @@ import 'driver.js/dist/driver.min.css' // import driver.js css
|
||||
import steps from './defineSteps'
|
||||
|
||||
export default {
|
||||
name: 'guide',
|
||||
name: 'Guide',
|
||||
data() {
|
||||
return {
|
||||
driver: null
|
||||
|
||||
@@ -3,41 +3,45 @@
|
||||
<el-card class="box-card" style="margin-top:40px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<svg-icon icon-class="international" />
|
||||
<span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
|
||||
<span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio-group v-model="lang" size="small">
|
||||
<el-radio label="zh" border>简体中文</el-radio>
|
||||
<el-radio label="en" border>English</el-radio>
|
||||
</el-radio-group>
|
||||
<el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
|
||||
<el-tag style="margin-top:15px;display:block;" type="info">{{ $t('i18nView.note') }}</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="20" style="margin:100px 15px 50px;">
|
||||
<el-col :span="12">
|
||||
<div class="block">
|
||||
<el-date-picker v-model="date" type="date" :placeholder="$t('i18nView.datePlaceholder')"></el-date-picker>
|
||||
<el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date"/>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-pagination background :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next"
|
||||
:total="400">
|
||||
</el-pagination>
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
:total="400"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next"/>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-button class="item-btn" size="small">{{$t('i18nView.default')}}</el-button>
|
||||
<el-button class="item-btn" size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
|
||||
<el-button class="item-btn" size="small" type="success">{{$t('i18nView.success')}}</el-button>
|
||||
<el-button class="item-btn" size="small" type="info">{{$t('i18nView.info')}}</el-button>
|
||||
<el-button class="item-btn" size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
|
||||
<el-button class="item-btn" size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
|
||||
<el-button class="item-btn" size="small">{{ $t('i18nView.default') }}</el-button>
|
||||
<el-button class="item-btn" size="small" type="primary">{{ $t('i18nView.primary') }}</el-button>
|
||||
<el-button class="item-btn" size="small" type="success">{{ $t('i18nView.success') }}</el-button>
|
||||
<el-button class="item-btn" size="small" type="info">{{ $t('i18nView.info') }}</el-button>
|
||||
<el-button class="item-btn" size="small" type="warning">{{ $t('i18nView.warning') }}</el-button>
|
||||
<el-button class="item-btn" size="small" type="danger">{{ $t('i18nView.danger') }}</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-table :data="tableData" fit highlight-current-row border style="width: 100%">
|
||||
<el-table-column prop="name" :label="$t('i18nView.tableName')" width="100" align="center"></el-table-column>
|
||||
<el-table-column prop="date" :label="$t('i18nView.tableDate')" width="120" align="center"></el-table-column>
|
||||
<el-table-column prop="address" :label="$t('i18nView.tableAddress')"></el-table-column>
|
||||
<el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center"/>
|
||||
<el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center"/>
|
||||
<el-table-column :label="$t('i18nView.tableAddress')" prop="address"/>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -49,7 +53,7 @@ import local from './local'
|
||||
const viewName = 'i18nView'
|
||||
|
||||
export default {
|
||||
name: 'i18n',
|
||||
name: 'I18n',
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
@@ -76,12 +80,6 @@ export default {
|
||||
}]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.$i18n.getLocaleMessage('en')[viewName]) {
|
||||
this.$i18n.mergeLocaleMessage('en', local.en)
|
||||
this.$i18n.mergeLocaleMessage('zh', local.zh)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lang: {
|
||||
get() {
|
||||
@@ -92,6 +90,12 @@ export default {
|
||||
this.$store.dispatch('setLanguage', lang)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.$i18n.getLocaleMessage('en')[viewName]) {
|
||||
this.$i18n.mergeLocaleMessage('en', local.en)
|
||||
this.$i18n.mergeLocaleMessage('zh', local.zh)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@ export default {
|
||||
zh: {
|
||||
i18nView: {
|
||||
title: '切换语言',
|
||||
note: '目前只翻译了当前页面和侧边栏和导航，未完待续，敬请期待...',
|
||||
note: '本项目国际化基于 vue-i18n',
|
||||
datePlaceholder: '请选择日期',
|
||||
tableDate: '日期',
|
||||
tableName: '姓名',
|
||||
@@ -20,7 +20,7 @@ export default {
|
||||
en: {
|
||||
i18nView: {
|
||||
title: 'Switch Language',
|
||||
note: 'Currently only translated the i18n page and the sidebar and levelbar, please look forword to...',
|
||||
note: 'The internationalization of this project is based on vue-i18n',
|
||||
datePlaceholder: 'Pick a day',
|
||||
tableDate: 'tableDate',
|
||||
tableName: 'tableName',
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="app-wrapper" :class="classObj">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
|
||||
<sidebar class="sidebar-container"></sidebar>
|
||||
<div :class="classObj" class="app-wrapper">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<sidebar class="sidebar-container"/>
|
||||
<div class="main-container">
|
||||
<navbar></navbar>
|
||||
<tags-view></tags-view>
|
||||
<app-main></app-main>
|
||||
<navbar/>
|
||||
<tags-view/>
|
||||
<app-main/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,7 +15,7 @@ import { Navbar, Sidebar, AppMain, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
|
||||
export default {
|
||||
name: 'layout',
|
||||
name: 'Layout',
|
||||
components: {
|
||||
Navbar,
|
||||
Sidebar,
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<section class="app-main">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<router-view :key="key"></router-view>
|
||||
<router-view :key="key"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</section>
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
<template>
|
||||
<el-menu class="navbar" mode="horizontal">
|
||||
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
|
||||
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
|
||||
|
||||
<breadcrumb class="breadcrumb-container"></breadcrumb>
|
||||
<breadcrumb class="breadcrumb-container"/>
|
||||
|
||||
<div class="right-menu">
|
||||
<error-log class="errLog-container right-menu-item"></error-log>
|
||||
<error-log class="errLog-container right-menu-item"/>
|
||||
|
||||
<el-tooltip effect="dark" :content="$t('navbar.screenfull')" placement="bottom">
|
||||
<screenfull class="screenfull right-menu-item"></screenfull>
|
||||
<el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
|
||||
<screenfull class="screenfull right-menu-item"/>
|
||||
</el-tooltip>
|
||||
|
||||
<lang-select class="international right-menu-item"></lang-select>
|
||||
<lang-select class="international right-menu-item"/>
|
||||
|
||||
<el-tooltip effect="dark" :content="$t('navbar.theme')" placement="bottom">
|
||||
<theme-picker class="theme-switch right-menu-item"></theme-picker>
|
||||
<el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
|
||||
<theme-picker class="theme-switch right-menu-item"/>
|
||||
</el-tooltip>
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
|
||||
<i class="el-icon-caret-bottom"></i>
|
||||
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
|
||||
<i class="el-icon-caret-bottom"/>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link to="/">
|
||||
<el-dropdown-item>
|
||||
{{$t('navbar.dashboard')}}
|
||||
{{ $t('navbar.dashboard') }}
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
|
||||
<a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
|
||||
<el-dropdown-item>
|
||||
{{$t('navbar.github')}}
|
||||
{{ $t('navbar.github') }}
|
||||
</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item divided>
|
||||
<span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
|
||||
<span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
|
||||
|
||||
<router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
|
||||
<span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
<router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
|
||||
<span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{ generateTitle(onlyOneChild.meta.title) }}</span>
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
|
||||
<el-submenu v-else :index="item.name||item.path">
|
||||
<template slot="title">
|
||||
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
|
||||
<span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
|
||||
</template>
|
||||
<el-submenu v-else :index="item.name||item.path">
|
||||
<template slot="title">
|
||||
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
|
||||
<span v-if="item.meta&&item.meta.title" slot="title">{{ generateTitle(item.meta.title) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-for="child in item.children" v-if="!child.hidden">
|
||||
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
|
||||
<template v-for="child in item.children" v-if="!child.hidden">
|
||||
<sidebar-item v-if="child.children&&child.children.length>0" :is-nest="true" :item="child" :key="child.path" :base-path="resolvePath(child.path)" class="nest-menu"/>
|
||||
|
||||
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
|
||||
<el-menu-item :index="resolvePath(child.path)">
|
||||
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
|
||||
<span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
|
||||
<el-menu-item :index="resolvePath(child.path)">
|
||||
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
|
||||
<span v-if="child.meta&&child.meta.title" slot="title">{{ generateTitle(child.meta.title) }}</span>
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-submenu>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<el-scrollbar wrapClass="scrollbar-wrapper">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
mode="vertical"
|
||||
:show-timeout="200"
|
||||
:default-active="$route.path"
|
||||
:collapse="isCollapse"
|
||||
mode="vertical"
|
||||
background-color="#304156"
|
||||
text-color="#bfcbd9"
|
||||
active-text-color="#409EFF"
|
||||
>
|
||||
<sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
|
||||
<sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
<template>
|
||||
<div class="tags-view-container">
|
||||
<scroll-pane class='tags-view-wrapper' ref='scrollPane'>
|
||||
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)"
|
||||
:to="tag" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
|
||||
{{generateTitle(tag.title)}}
|
||||
<span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
|
||||
<scroll-pane ref="scrollPane" class="tags-view-wrapper">
|
||||
<router-link
|
||||
v-for="tag in Array.from(visitedViews)"
|
||||
ref="tag"
|
||||
:class="isActive(tag)?'active':''"
|
||||
:to="tag"
|
||||
:key="tag.path"
|
||||
class="tags-view-item"
|
||||
@contextmenu.prevent.native="openMenu(tag,$event)">
|
||||
{{ generateTitle(tag.title) }}
|
||||
<span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
|
||||
<li @click="closeSelectedTag(selectedTag)">{{$t('tagsView.close')}}</li>
|
||||
<li @click="closeOthersTags">{{$t('tagsView.closeOthers')}}</li>
|
||||
<li @click="closeAllTags">{{$t('tagsView.closeAll')}}</li>
|
||||
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||
<li @click="closeSelectedTag(selectedTag)">{{ $t('tagsView.close') }}</li>
|
||||
<li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
|
||||
<li @click="closeAllTags">{{ $t('tagsView.closeAll') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'authredirect',
|
||||
created() {
|
||||
const hash = window.location.search.slice(1)
|
||||
window.opener.location.href = window.location.origin + '/login#' + hash
|
||||
window.close()
|
||||
}
|
||||
export default {
|
||||
name: 'Authredirect',
|
||||
created() {
|
||||
const hash = window.location.search.slice(1)
|
||||
window.opener.location.href = window.location.origin + '/login#' + hash
|
||||
window.close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,18 +1,23 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
||||
|
||||
<div class="title-container">
|
||||
<h3 class="title">{{$t('login.title')}}</h3>
|
||||
<lang-select class="set-language"></lang-select>
|
||||
<h3 class="title">{{ $t('login.title') }}</h3>
|
||||
<lang-select class="set-language"/>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" :placeholder="$t('login.username')"
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
:placeholder="$t('login.username')"
|
||||
name="username"
|
||||
type="text"
|
||||
auto-complete="on"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
@@ -20,32 +25,37 @@
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
|
||||
:placeholder="$t('login.password')" />
|
||||
<el-input
|
||||
:type="passwordType"
|
||||
v-model="loginForm.password"
|
||||
:placeholder="$t('login.password')"
|
||||
name="password"
|
||||
auto-complete="on"
|
||||
@keyup.enter.native="handleLogin" />
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.logIn')}}</el-button>
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
|
||||
|
||||
<div class="tips">
|
||||
<span>{{$t('login.username')}} : admin</span>
|
||||
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
|
||||
<span>{{ $t('login.username') }} : admin</span>
|
||||
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
|
||||
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
|
||||
<span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
|
||||
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
|
||||
</div>
|
||||
|
||||
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{$t('login.thirdparty')}}</el-button>
|
||||
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button>
|
||||
</el-form>
|
||||
|
||||
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
|
||||
{{$t('login.thirdpartyTips')}}
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
{{ $t('login.thirdpartyTips') }}
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<social-sign />
|
||||
</el-dialog>
|
||||
|
||||
@@ -58,8 +68,8 @@ import LangSelect from '@/components/LangSelect'
|
||||
import SocialSign from './socialsignin'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { LangSelect, SocialSign },
|
||||
name: 'login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!isvalidUsername(value)) {
|
||||
@@ -89,6 +99,12 @@ export default {
|
||||
showDialog: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// window.addEventListener('hashchange', this.afterQRScan)
|
||||
},
|
||||
destroyed() {
|
||||
// window.removeEventListener('hashchange', this.afterQRScan)
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.passwordType === 'password') {
|
||||
@@ -131,12 +147,6 @@ export default {
|
||||
// })
|
||||
// }
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// window.addEventListener('hashchange', this.afterQRScan)
|
||||
},
|
||||
destroyed() {
|
||||
// window.removeEventListener('hashchange', this.afterQRScan)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -144,7 +154,7 @@ export default {
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
/* 修复input 背景不协调 和光标变色 */
|
||||
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
||||
|
||||
|
||||
$bg:#283443;
|
||||
$light_gray:#eee;
|
||||
$cursor: #fff;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="social-signup-container">
|
||||
<div class="sign-btn" @click="wechatHandleClick('wechat')">
|
||||
<span class="wx-svg-container"><svg-icon icon-class="wechat" class="icon"></svg-icon></span> 微信
|
||||
<span class="wx-svg-container"><svg-icon icon-class="wechat" class="icon"/></span> 微信
|
||||
</div>
|
||||
<div class="sign-btn" @click="tencentHandleClick('tencent')">
|
||||
<span class="qq-svg-container"><svg-icon icon-class="qq" class="icon"></svg-icon></span> QQ
|
||||
<span class="qq-svg-container"><svg-icon icon-class="qq" class="icon"/></span> QQ
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -13,7 +13,7 @@
|
||||
import openWindow from '@/utils/openWindow'
|
||||
|
||||
export default {
|
||||
name: 'social-signin',
|
||||
name: 'SocialSignin',
|
||||
methods: {
|
||||
wechatHandleClick(thirdpart) {
|
||||
this.$store.commit('SET_AUTH_TYPE', thirdpart)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template >
|
||||
<div style="padding:30px;">
|
||||
<el-alert title="menu 1" :closable="false">
|
||||
<el-alert :closable="false" title="menu 1">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template >
|
||||
<div style="padding:30px;">
|
||||
<el-alert title="menu 1-1" type="success" :closable="false">
|
||||
<el-alert :closable="false" title="menu 1-1" type="success">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert title="menu 1-2" type="success" :closable="false">
|
||||
<el-alert :closable="false" title="menu 1-2" type="success">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert title="menu 1-2-1" type="warning" :closable="false" />
|
||||
<el-alert :closable="false" title="menu 1-2-1" type="warning" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert title="menu 1-2-2" type="warning" :closable="false" />
|
||||
<el-alert :closable="false" title="menu 1-2-2" type="warning" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert title="menu 1-3" type="success" :closable="false" />
|
||||
<el-alert :closable="false" title="menu 1-3" type="success" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert title="menu 2" :closable="false" />
|
||||
<el-alert :closable="false" title="menu 2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
|
||||
{{$t('permission.switchRoles')}}：
|
||||
<div style="margin-bottom:15px;">{{ $t('permission.roles') }}： {{ roles }}</div>
|
||||
{{ $t('permission.switchRoles') }}：
|
||||
<el-radio-group v-model="switchRoles">
|
||||
<el-radio-button label="editor"></el-radio-button>
|
||||
<el-radio-button label="admin"></el-radio-button>
|
||||
<el-radio-button label="editor"/>
|
||||
<el-radio-button label="admin"/>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:30px;" :key="'checkPermission'+key">
|
||||
<div :key="'checkPermission'+key" style="margin-top:30px;">
|
||||
<code>In some cases it is not suitable to use v-permission, such as element Tab component which can only be achieved by manually setting the v-if.
|
||||
<br> e.g.
|
||||
</code>
|
||||
@@ -36,7 +36,7 @@ import checkPermission from '@/utils/permission' // 权限判断函数
|
||||
import SwitchRoles from './components/SwitchRoles'
|
||||
|
||||
export default{
|
||||
name: 'directivePermission',
|
||||
name: 'DirectivePermission',
|
||||
components: { SwitchRoles },
|
||||
directives: { permission },
|
||||
data() {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import SwitchRoles from './components/SwitchRoles'
|
||||
|
||||
export default{
|
||||
name: 'pagePermission',
|
||||
name: 'PagePermission',
|
||||
components: { SwitchRoles },
|
||||
methods: {
|
||||
handleRolesChange() {
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<el-upload action="https://upload.qbox.me" :data="dataObj" drag :multiple="true" :before-upload="beforeUpload">
|
||||
<i class="el-icon-upload"></i>
|
||||
<el-upload :data="dataObj" :multiple="true" :before-upload="beforeUpload" action="https://upload.qbox.me" drag>
|
||||
<i class="el-icon-upload"/>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/api/qiniu'
|
||||
// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
<div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{generateIconCode(item)}}
|
||||
{{ generateIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<svg-icon class-name="disabled" :icon-class="item" />
|
||||
<span>{{item}}</span>
|
||||
<svg-icon :icon-class="item" class-name="disabled" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
@@ -25,7 +25,7 @@ import icons from './generateIconsView'
|
||||
import clipboard from '@/utils/clipboard'
|
||||
|
||||
export default {
|
||||
name: 'icons',
|
||||
name: 'Icons',
|
||||
data() {
|
||||
return {
|
||||
iconsMap: []
|
||||
|
||||
@@ -1,47 +1,51 @@
|
||||
<template>
|
||||
<el-table :data="list" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table-column align="center" label="ID" width="65" v-loading="loading"
|
||||
element-loading-text="请给我点时间！">
|
||||
<el-table-column
|
||||
v-loading="loading"
|
||||
align="center"
|
||||
label="ID"
|
||||
width="65"
|
||||
element-loading-text="请给我点时间！">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="180px" align="center" label="Date">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="300px" label="Title">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.title}}</span>
|
||||
<el-tag>{{scope.row.type}}</el-tag>
|
||||
<span>{{ scope.row.title }}</span>
|
||||
<el-tag>{{ scope.row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="110px" align="center" label="Author">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
<span>{{ scope.row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="120px" label="Importance">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
|
||||
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="Readings" width="95">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.pageviews}}</span>
|
||||
<span>{{ scope.row.pageviews }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -52,6 +56,16 @@
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
@@ -70,16 +84,6 @@ export default {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<div class="tab-container">
|
||||
<el-tag>mounted times ：{{createdTimes}}</el-tag>
|
||||
<el-alert style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" :closable="false">
|
||||
</el-alert>
|
||||
<el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
|
||||
<el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key='item.key' :name="item.key">
|
||||
<el-tag>mounted times ：{{ createdTimes }}</el-tag>
|
||||
<el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success"/>
|
||||
<el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
|
||||
<el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key="item.key" :name="item.key">
|
||||
<keep-alive>
|
||||
<tab-pane v-if='activeName==item.key' :type='item.key' @create='showCreatedTimes'></tab-pane>
|
||||
<tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes"/>
|
||||
</keep-alive>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -17,7 +16,7 @@
|
||||
import tabPane from './components/tabPane'
|
||||
|
||||
export default {
|
||||
name: 'tab',
|
||||
name: 'Tab',
|
||||
components: { tabPane },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,131 +1,128 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
|
||||
</el-input>
|
||||
<el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" :placeholder="$t('table.importance')">
|
||||
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item">
|
||||
</el-option>
|
||||
<el-input :placeholder="$t('table.title')" v-model="listQuery.title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
|
||||
<el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
|
||||
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item"/>
|
||||
</el-select>
|
||||
<el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" :placeholder="$t('table.type')">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
|
||||
</el-option>
|
||||
<el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key"/>
|
||||
</el-select>
|
||||
<el-select @change='handleFilter' style="width: 140px" class="filter-item" v-model="listQuery.sort">
|
||||
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
|
||||
</el-option>
|
||||
<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
|
||||
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key"/>
|
||||
</el-select>
|
||||
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
|
||||
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
|
||||
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">{{$t('table.export')}}</el-button>
|
||||
<el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox>
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
|
||||
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">{{ $t('table.add') }}</el-button>
|
||||
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">{{ $t('table.export') }}</el-button>
|
||||
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">{{ $t('table.reviewer') }}</el-checkbox>
|
||||
</div>
|
||||
|
||||
<el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:key="tableKey"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%;min-height:1000px;">
|
||||
<el-table-column align="center" :label="$t('table.id')" width="65">
|
||||
<el-table-column :label="$t('table.id')" align="center" width="65">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150px" align="center" :label="$t('table.date')">
|
||||
<el-table-column :label="$t('table.date')" width="150px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150px" :label="$t('table.title')">
|
||||
<el-table-column :label="$t('table.title')" min-width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
|
||||
<el-tag>{{scope.row.type | typeFilter}}</el-tag>
|
||||
<span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.title }}</span>
|
||||
<el-tag>{{ scope.row.type | typeFilter }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="110px" align="center" :label="$t('table.author')">
|
||||
<el-table-column :label="$t('table.author')" width="110px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
<span>{{ scope.row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="110px" v-if='showReviewer' align="center" :label="$t('table.reviewer')">
|
||||
<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span style='color:red;'>{{scope.row.reviewer}}</span>
|
||||
<span style="color:red;">{{ scope.row.reviewer }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="80px" :label="$t('table.importance')">
|
||||
<el-table-column :label="$t('table.importance')" width="80px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
|
||||
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.readings')" width="95">
|
||||
<el-table-column :label="$t('table.readings')" align="center" width="95">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.pageviews" class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span>
|
||||
<span v-if="scope.row.pageviews" class="link-type" @click="handleFetchPv(scope.row.pageviews)">{{ scope.row.pageviews }}</span>
|
||||
<span v-else>0</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column class-name="status-col" :label="$t('table.status')" width="100">
|
||||
<el-table-column :label="$t('table.status')" class-name="status-col" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
|
||||
<el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
|
||||
<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{$t('table.publish')}}
|
||||
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
|
||||
<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{ $t('table.publish') }}
|
||||
</el-button>
|
||||
<el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{$t('table.draft')}}
|
||||
<el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{ $t('table.draft') }}
|
||||
</el-button>
|
||||
<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{$t('table.delete')}}
|
||||
<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{ $t('table.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
<el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
|
||||
</div>
|
||||
|
||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
||||
<el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
|
||||
<el-form-item :label="$t('table.type')" prop="type">
|
||||
<el-select class="filter-item" v-model="temp.type" placeholder="Please select">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
|
||||
</el-option>
|
||||
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.date')" prop="timestamp">
|
||||
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.title')" prop="title">
|
||||
<el-input v-model="temp.title"></el-input>
|
||||
<el-input v-model="temp.title"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.status')">
|
||||
<el-select class="filter-item" v-model="temp.status" placeholder="Please select">
|
||||
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item">
|
||||
</el-option>
|
||||
<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
|
||||
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.importance')">
|
||||
<el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
|
||||
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.remark')">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="temp.remark">
|
||||
</el-input>
|
||||
<el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.remark" type="textarea" placeholder="Please input"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
|
||||
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
|
||||
<el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
|
||||
<el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
|
||||
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{ $t('table.confirm') }}</el-button>
|
||||
<el-button v-else type="primary" @click="updateData">{{ $t('table.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
|
||||
<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
|
||||
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column prop="key" label="Channel"> </el-table-column>
|
||||
<el-table-column prop="pv" label="Pv"> </el-table-column>
|
||||
<el-table-column prop="key" label="Channel"/>
|
||||
<el-table-column prop="pv" label="Pv"/>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
|
||||
<el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
@@ -151,10 +148,23 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||
}, {})
|
||||
|
||||
export default {
|
||||
name: 'complexTable',
|
||||
name: 'ComplexTable',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
typeFilter(type) {
|
||||
return calendarTypeKeyValue[type]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
@@ -199,19 +209,6 @@ export default {
|
||||
downloadLoading: false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
typeFilter(type) {
|
||||
return calendarTypeKeyValue[type]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- Note that row-key is necessary to get a correct row order. -->
|
||||
<el-table :data="list" row-key="id" v-loading="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
<el-table v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table-column align="center" label="ID" width="65">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="180px" align="center" label="Date">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="300px" label="Title">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.title}}</span>
|
||||
<span>{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="110px" align="center" label="Author">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
<span>{{ scope.row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="100px" label="Importance">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
|
||||
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="icon-star"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="Readings" width="95">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.pageviews}}</span>
|
||||
<span>{{ scope.row.pageviews }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="Drag" width="80">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon class='drag-handler' icon-class="drag"></svg-icon>
|
||||
<svg-icon class="drag-handler" icon-class="drag"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<!-- $t is vue-i18n global function to translate lang (lang in @/lang) -->
|
||||
<div class='show-d'>{{$t('table.dragTips1')}} : {{ oldList}}</div>
|
||||
<div class='show-d'>{{$t('table.dragTips2')}} : {{newList}}</div>
|
||||
<div class="show-d">{{ $t('table.dragTips1') }} : {{ oldList }}</div>
|
||||
<div class="show-d">{{ $t('table.dragTips2') }} : {{ newList }}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -64,7 +64,17 @@ import { fetchList } from '@/api/article'
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
export default {
|
||||
name: 'dragTable',
|
||||
name: 'DragTable',
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
@@ -79,16 +89,6 @@ export default {
|
||||
newList: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" :key='key' border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column prop="name" label="fruitName" width="180"></el-table-column>
|
||||
<el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
|
||||
<el-table :data="tableData" :key="key" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column prop="name" label="fruitName" width="180"/>
|
||||
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row[fruit]}}
|
||||
{{ scope.row[fruit] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style='margin:0 0 5px 20px'>{{$t('table.dynamicTips1')}}</div>
|
||||
<fixed-thead></fixed-thead>
|
||||
<div style="margin:0 0 5px 20px">{{ $t('table.dynamicTips1') }}</div>
|
||||
<fixed-thead/>
|
||||
|
||||
<div style='margin:30px 0 5px 20px'>{{$t('table.dynamicTips2')}}</div>
|
||||
<unfixed-thead></unfixed-thead>
|
||||
<div style="margin:30px 0 5px 20px">{{ $t('table.dynamicTips2') }}</div>
|
||||
<unfixed-thead/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,7 +13,7 @@ import fixedThead from './fixedThead'
|
||||
import unfixedThead from './unfixedThead'
|
||||
|
||||
export default {
|
||||
name: 'dynamicTable',
|
||||
name: 'DynamicTable',
|
||||
components: { fixedThead, unfixedThead }
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -10,11 +10,10 @@
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column prop="name" label="fruitName" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
|
||||
<el-table-column prop="name" label="fruitName" width="180"/>
|
||||
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row[fruit]}}
|
||||
{{ scope.row[fruit] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-table :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="180px" align="center" label="Date">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="120px" align="center" label="Author">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
<span>{{ scope.row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="100px" label="Importance">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
|
||||
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="300px" label="Title">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row.edit">
|
||||
<el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
|
||||
<el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
|
||||
<el-input v-model="scope.row.title" class="edit-input" size="small"/>
|
||||
<el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
|
||||
</template>
|
||||
<span v-else>{{ scope.row.title }}</span>
|
||||
</template>
|
||||
@@ -45,8 +45,8 @@
|
||||
|
||||
<el-table-column align="center" label="Actions" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button>
|
||||
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button>
|
||||
<el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">Ok</el-button>
|
||||
<el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">Edit</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -58,17 +58,7 @@
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
name: 'inlineEditTable',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
name: 'InlineEditTable',
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
@@ -79,6 +69,16 @@ export default {
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
@@ -5,21 +5,23 @@
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
|
||||
</el-tag>
|
||||
|
||||
<tree-table :data="data" :evalFunc="func" :evalArgs="args" :expandAll="expandAll" border>
|
||||
<tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
|
||||
<el-table-column label="事件">
|
||||
<template slot-scope="scope">
|
||||
<span style="color:sandybrown">{{scope.row.event}}</span>
|
||||
<el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
|
||||
<span style="color:sandybrown">{{ scope.row.event }}</span>
|
||||
<el-tag>{{ scope.row.timeLine+'ms' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间线">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
|
||||
<el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
|
||||
<div class="processContainer">
|
||||
<div class="process" :style="{ width:scope.row._width * 500+'px',
|
||||
background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
|
||||
marginLeft:scope.row._marginLeft * 500+'px' }">
|
||||
<span style="display:inline-block"></span>
|
||||
<div
|
||||
:style="{ width:scope.row._width * 500+'px',
|
||||
background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
|
||||
marginLeft:scope.row._marginLeft * 500+'px' }"
|
||||
class="process">
|
||||
<span style="display:inline-block"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
@@ -43,7 +45,7 @@ import treeTable from '@/components/TreeTable'
|
||||
import treeToArray from './customEval'
|
||||
|
||||
export default {
|
||||
name: 'customTreeTableDemo',
|
||||
name: 'CustomTreeTableDemo',
|
||||
components: { treeTable },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
|
||||
</el-tag>
|
||||
|
||||
<tree-table :data="data" :columns="columns" border></tree-table>
|
||||
<tree-table :data="data" :columns="columns" border/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -18,7 +18,7 @@
|
||||
import treeTable from '@/components/TreeTable'
|
||||
|
||||
export default {
|
||||
name: 'treeTableDemo',
|
||||
name: 'TreeTableDemo',
|
||||
components: { treeTable },
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div class="app-container">
|
||||
<el-card class="box-card">
|
||||
<div slot="header">
|
||||
<a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html'>
|
||||
{{$t('theme.documentation')}}
|
||||
<a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html">
|
||||
{{ $t('theme.documentation') }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-item">
|
||||
<span class="field-label">{{$t('theme.change')}} : </span>
|
||||
<el-switch v-model="theme"></el-switch>
|
||||
<code style="margin-top:15px;">{{$t('theme.tips')}}</code>
|
||||
<span class="field-label">{{ $t('theme.change') }} : </span>
|
||||
<el-switch v-model="theme"/>
|
||||
<code style="margin-top:15px;">{{ $t('theme.tips') }}</code>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
@@ -22,19 +22,19 @@
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary" icon="el-icon-edit"/>
|
||||
<el-button type="primary" icon="el-icon-share"/>
|
||||
<el-button type="primary" icon="el-icon-delete"/>
|
||||
<el-button type="primary" icon="el-icon-search">Search</el-button>
|
||||
<el-button type="primary">
|
||||
Upload
|
||||
<i class="el-icon-upload el-icon-right"></i>
|
||||
<i class="el-icon-upload el-icon-right"/>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-tag class='tag-item' v-for="tag in tags" :type="tag.type" :key='tag.type'>
|
||||
{{tag.name}}
|
||||
<el-tag v-for="tag in tags" :type="tag.type" :key="tag.type" class="tag-item">
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-slider v-model="slideValue"></el-slider>
|
||||
<el-slider v-model="slideValue"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -58,7 +58,7 @@ import { toggleClass } from '@/utils'
|
||||
import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
|
||||
|
||||
export default {
|
||||
name: 'theme',
|
||||
name: 'Theme',
|
||||
data() {
|
||||
return {
|
||||
theme: false,
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button>
|
||||
<el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label='ID' width="95">
|
||||
<el-input :placeholder="$t('zip.placeholder')" v-model="filename" style="width:300px;" prefix-icon="el-icon-document"/>
|
||||
<el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">{{ $t('zip.export') }} zip</el-button>
|
||||
<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label="ID" width="95">
|
||||
<template slot-scope="scope">
|
||||
{{scope.$index}}
|
||||
{{ scope.$index }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Title">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.title}}
|
||||
{{ scope.row.title }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Author" width="95" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{scope.row.author}}</el-tag>
|
||||
<el-tag>{{ scope.row.author }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Readings" width="115" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
{{ scope.row.pageviews }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="Date" width="220">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>{{scope.row.display_time}}</span>
|
||||
<i class="el-icon-time"/>
|
||||
<span>{{ scope.row.display_time }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -38,7 +38,7 @@
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
name: 'exportZip',
|
||||
name: 'ExportZip',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
|
||||
Reference in New Issue
Block a user