移除一些示例代码
This commit is contained in:
zhl
parent
5f2c333fa6
commit
27634272ae
@ -155,102 +155,6 @@ export const asyncRoutes: RouteConfig[] = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/permission',
|
||||
component: Layout,
|
||||
redirect: '/permission/directive1',
|
||||
meta: {
|
||||
title: 'permission',
|
||||
icon: 'lock',
|
||||
alwaysShow: true // will always show the root menu
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'page',
|
||||
component: () => import(/* webpackChunkName: "permission-page" */ '@/views/permission/page.vue'),
|
||||
name: 'PagePermission',
|
||||
meta: {
|
||||
title: 'pagePermission',
|
||||
roles: ['admin'] // or you can only set roles in sub nav
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'directive',
|
||||
component: () => import(/* webpackChunkName: "permission-directive" */ '@/views/permission/directive.vue'),
|
||||
name: 'DirectivePermission',
|
||||
meta: {
|
||||
title: 'directivePermission',
|
||||
permissions: ['app:update']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
tableRouter,
|
||||
{
|
||||
path: '/example',
|
||||
component: Layout,
|
||||
redirect: '/example/list',
|
||||
meta: {
|
||||
title: 'example',
|
||||
icon: 'example'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'form',
|
||||
component: () => import(/* webpackChunkName: "permission-role" */ '@/views/form/index.vue'),
|
||||
name: 'Form',
|
||||
meta: {
|
||||
title: 'form',
|
||||
roles: ['admin']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/tab',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import(/* webpackChunkName: "tab" */ '@/views/tab/index.vue'),
|
||||
name: 'Tab',
|
||||
meta: {
|
||||
title: 'tab',
|
||||
icon: 'tab'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/error',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
meta: {
|
||||
title: 'errorPages',
|
||||
icon: '404'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '401',
|
||||
component: () => import(/* webpackChunkName: "error-page-401" */ '@/views/error-page/401.vue'),
|
||||
name: 'Page401',
|
||||
meta: {
|
||||
title: 'page401',
|
||||
noCache: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '404',
|
||||
component: () => import(/* webpackChunkName: "error-page-404" */ '@/views/error-page/404.vue'),
|
||||
name: 'Page404',
|
||||
meta: {
|
||||
title: 'page404',
|
||||
noCache: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/error-log',
|
||||
component: Layout,
|
||||
|
||||
@ -1,387 +0,0 @@
|
||||
<template>
|
||||
<div class="createPost-container">
|
||||
<el-form
|
||||
ref="postForm"
|
||||
:model="postForm"
|
||||
:rules="rules"
|
||||
class="form-container"
|
||||
>
|
||||
<sticky
|
||||
:z-index="10"
|
||||
:class-name="'sub-navbar '+postForm.status"
|
||||
>
|
||||
<comment-dropdown v-model="postForm.disableComment" />
|
||||
<platform-dropdown v-model="postForm.platforms" />
|
||||
<source-url-dropdown v-model="postForm.sourceURL" />
|
||||
<el-button
|
||||
v-loading="loading"
|
||||
style="margin-left: 10px;"
|
||||
type="success"
|
||||
@click="submitForm"
|
||||
>
|
||||
Publish
|
||||
</el-button>
|
||||
<el-button
|
||||
v-loading="loading"
|
||||
type="warning"
|
||||
@click="draftForm"
|
||||
>
|
||||
Draft
|
||||
</el-button>
|
||||
</sticky>
|
||||
|
||||
<div class="createPost-main-container">
|
||||
<el-row>
|
||||
<warning />
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
style="margin-bottom: 40px;"
|
||||
prop="title"
|
||||
>
|
||||
<material-input
|
||||
v-model="postForm.title"
|
||||
:maxlength="100"
|
||||
name="name"
|
||||
required
|
||||
>
|
||||
Title
|
||||
</material-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="postInfo-container">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item
|
||||
label-width="60px"
|
||||
label="Author:"
|
||||
class="postInfo-container-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="postForm.author"
|
||||
:remote-method="getRemoteUserList"
|
||||
filterable
|
||||
default-first-option
|
||||
remote
|
||||
placeholder="Search user"
|
||||
>
|
||||
<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="120px"
|
||||
label="Publish Time:"
|
||||
class="postInfo-container-item"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="timestamp"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="Select date and time"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label-width="90px"
|
||||
label="Importance:"
|
||||
class="postInfo-container-item"
|
||||
>
|
||||
<el-rate
|
||||
v-model="postForm.importance"
|
||||
:max="3"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
|
||||
:low-threshold="1"
|
||||
:high-threshold="3"
|
||||
style="display:inline-block"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item
|
||||
style="margin-bottom: 40px;"
|
||||
label-width="70px"
|
||||
label="Summary:"
|
||||
>
|
||||
<el-input
|
||||
v-model="postForm.abstractContent"
|
||||
:rows="1"
|
||||
type="textarea"
|
||||
class="article-textarea"
|
||||
autosize
|
||||
placeholder="Please enter the content"
|
||||
/>
|
||||
<span
|
||||
v-show="abstractContentLength"
|
||||
class="word-counter"
|
||||
>{{ abstractContentLength }}words</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
prop="content"
|
||||
style="margin-bottom: 30px;"
|
||||
>
|
||||
<tinymce
|
||||
v-if="tinymceActive"
|
||||
ref="editor"
|
||||
v-model="postForm.fullContent"
|
||||
:height="400"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
prop="imageURL"
|
||||
style="margin-bottom: 30px;"
|
||||
>
|
||||
<upload-image v-model="postForm.imageURL" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { isValidURL } from '@/utils/validate'
|
||||
import { getArticle, defaultArticleData } from '@/api/articles'
|
||||
import { getUsers } from '@/api/users'
|
||||
import { AppModule } from '@/store/modules/app'
|
||||
import { TagsViewModule, ITagView } from '@/store/modules/tags-view'
|
||||
import MaterialInput from '@/components/MaterialInput/index.vue'
|
||||
import Sticky from '@/components/Sticky/index.vue'
|
||||
import Tinymce from '@/components/Tinymce/index.vue'
|
||||
import UploadImage from '@/components/UploadImage/index.vue'
|
||||
import Warning from './Warning.vue'
|
||||
import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
|
||||
import { Form } from 'element-ui'
|
||||
|
||||
@Component({
|
||||
name: 'ArticleDetail',
|
||||
components: {
|
||||
CommentDropdown,
|
||||
PlatformDropdown,
|
||||
SourceUrlDropdown,
|
||||
MaterialInput,
|
||||
Sticky,
|
||||
Tinymce,
|
||||
UploadImage,
|
||||
Warning
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
@Prop({ default: false }) private isEdit!: boolean
|
||||
|
||||
private validateRequire = (rule: any, value: string, callback: Function) => {
|
||||
if (value === '') {
|
||||
if (rule.field === 'imageURL') {
|
||||
this.$message({
|
||||
message: 'Upload cover image is required',
|
||||
type: 'error'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: rule.field + ' is required',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
callback(new Error(rule.field + ' is required'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
private validateSourceUrl = (rule: any, value: string, callback: any) => {
|
||||
if (value) {
|
||||
if (isValidURL(value)) {
|
||||
callback()
|
||||
} else {
|
||||
this.$message({
|
||||
message: 'Invalid URL',
|
||||
type: 'error'
|
||||
})
|
||||
callback(new Error('Invalid URL'))
|
||||
}
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
private postForm = Object.assign({}, defaultArticleData)
|
||||
private loading = false
|
||||
private userListOptions = []
|
||||
private rules = {
|
||||
imageURL: [{ validator: this.validateRequire }],
|
||||
title: [{ validator: this.validateRequire }],
|
||||
fullContent: [{ validator: this.validateRequire }],
|
||||
sourceURL: [{ validator: this.validateSourceUrl, trigger: 'blur' }]
|
||||
}
|
||||
|
||||
private tempTagView?: ITagView
|
||||
private tinymceActive = true
|
||||
|
||||
get abstractContentLength() {
|
||||
return this.postForm.abstractContent.length
|
||||
}
|
||||
|
||||
get lang() {
|
||||
return AppModule.language
|
||||
}
|
||||
|
||||
// set and get is useful when the data
|
||||
// returned by the backend api is different from the frontend
|
||||
// e.g.: backend return => "2013-06-25 06:59:25"
|
||||
// frontend need timestamp => 1372114765000
|
||||
get timestamp() {
|
||||
return (+new Date(this.postForm.timestamp))
|
||||
}
|
||||
|
||||
set timestamp(value) {
|
||||
this.postForm.timestamp = +new Date(value)
|
||||
}
|
||||
|
||||
created() {
|
||||
if (this.isEdit) {
|
||||
const id = this.$route.params && this.$route.params.id
|
||||
this.fetchData(parseInt(id))
|
||||
}
|
||||
// Why need to make a copy of this.$route here?
|
||||
// Because if you enter this page and quickly switch tag, may be in the execution of this.setTagsViewTitle function, this.$route is no longer pointing to the current page
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/1221
|
||||
this.tempTagView = Object.assign({}, this.$route)
|
||||
}
|
||||
|
||||
deactivated() {
|
||||
this.tinymceActive = false
|
||||
}
|
||||
|
||||
activated() {
|
||||
this.tinymceActive = true
|
||||
}
|
||||
|
||||
private async fetchData(id: number) {
|
||||
try {
|
||||
const { data } = await getArticle(id, { /* Your params here */ })
|
||||
this.postForm = data.article
|
||||
// Just for test
|
||||
this.postForm.title += ` Article Id:${this.postForm.id}`
|
||||
this.postForm.abstractContent += ` Article Id:${this.postForm.id}`
|
||||
const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
|
||||
// Set tagsview title
|
||||
this.setTagsViewTitle(title)
|
||||
// Set page title
|
||||
this.setPageTitle(title)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
private setTagsViewTitle(title: string) {
|
||||
const tagView = this.tempTagView
|
||||
if (tagView) {
|
||||
tagView.title = `${title}-${this.postForm.id}`
|
||||
TagsViewModule.updateVisitedView(tagView)
|
||||
}
|
||||
}
|
||||
|
||||
private setPageTitle(title: string) {
|
||||
document.title = `${title} - ${this.postForm.id}`
|
||||
}
|
||||
|
||||
private submitForm() {
|
||||
(this.$refs.postForm as Form).validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'The post published successfully',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.postForm.status = 'published'
|
||||
// Just to simulate the time of the request
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 0.5 * 1000)
|
||||
} else {
|
||||
console.error('Submit Error!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private draftForm() {
|
||||
if (this.postForm.fullContent.length === 0 || this.postForm.title.length === 0) {
|
||||
this.$message({
|
||||
message: 'Title and detail content are required',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$message({
|
||||
message: 'The draft saved successfully',
|
||||
type: 'success',
|
||||
showClose: true,
|
||||
duration: 1000
|
||||
})
|
||||
this.postForm.status = 'draft'
|
||||
}
|
||||
|
||||
private async getRemoteUserList(name: string) {
|
||||
const { data } = await getUsers({ name })
|
||||
if (!data.items) return
|
||||
this.userListOptions = data.items.map((v: any) => v.name)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.article-textarea {
|
||||
textarea {
|
||||
padding-right: 40px;
|
||||
resize: none;
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
border-bottom: 1px solid #bfcbd9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.createPost-container {
|
||||
position: relative;
|
||||
|
||||
.createPost-main-container {
|
||||
padding: 40px 45px 20px 50px;
|
||||
|
||||
.postInfo-container {
|
||||
position: relative;
|
||||
@include clearfix;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.postInfo-container-item {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.word-counter {
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<el-dropdown
|
||||
:show-timeout="100"
|
||||
trigger="click"
|
||||
>
|
||||
<el-button plain>
|
||||
{{ !disableComment?'Comment: opened':'Comment: closed' }}
|
||||
<i class="el-icon-caret-bottom el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu
|
||||
slot="dropdown"
|
||||
class="no-padding"
|
||||
>
|
||||
<el-dropdown-item>
|
||||
<el-radio-group
|
||||
v-model="disableComment"
|
||||
style="padding: 10px;"
|
||||
>
|
||||
<el-radio :label="true">
|
||||
Close comment
|
||||
</el-radio>
|
||||
<el-radio :label="false">
|
||||
Open comment
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'CommentDropdown'
|
||||
})
|
||||
export default class extends Vue {
|
||||
@Prop({ required: true }) private value!: boolean
|
||||
|
||||
get disableComment() {
|
||||
return this.value
|
||||
}
|
||||
|
||||
set disableComment(value) {
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<el-dropdown
|
||||
:hide-on-click="false"
|
||||
:show-timeout="100"
|
||||
trigger="click"
|
||||
>
|
||||
<el-button plain>
|
||||
Platfroms({{ platforms.length }})
|
||||
<i class="el-icon-caret-bottom el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-checkbox-group
|
||||
v-model="platforms"
|
||||
style="padding: 5px 15px;"
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="item in platformsOptions"
|
||||
:key="item.key"
|
||||
:label="item.key"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'PlatformDropdown'
|
||||
})
|
||||
export default class extends Vue {
|
||||
@Prop({ required: true }) private value!: string[]
|
||||
|
||||
private platformsOptions = [
|
||||
{ key: 'a-platform', name: 'a-platform' },
|
||||
{ key: 'b-platform', name: 'b-platform' },
|
||||
{ key: 'c-platform', name: 'c-platform' }
|
||||
]
|
||||
|
||||
get platforms() {
|
||||
return this.value
|
||||
}
|
||||
|
||||
set platforms(value) {
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<el-dropdown
|
||||
:show-timeout="100"
|
||||
trigger="click"
|
||||
>
|
||||
<el-button plain>
|
||||
Link
|
||||
<i class="el-icon-caret-bottom el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu
|
||||
slot="dropdown"
|
||||
class="no-padding"
|
||||
style="width:400px"
|
||||
>
|
||||
<el-form-item
|
||||
label-width="0px"
|
||||
style="margin-bottom: 0px"
|
||||
prop="sourceURL"
|
||||
>
|
||||
<el-input
|
||||
v-model="sourceURL"
|
||||
placeholder="Please enter the content"
|
||||
>
|
||||
<template slot="prepend">
|
||||
URL
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'SourceUrlDropdown'
|
||||
})
|
||||
export default class extends Vue {
|
||||
@Prop({ required: true }) private value!: string
|
||||
|
||||
get sourceURL() {
|
||||
return this.value
|
||||
}
|
||||
|
||||
set sourceURL(value) {
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,3 +0,0 @@
|
||||
export { default as CommentDropdown } from './Comment.vue'
|
||||
export { default as PlatformDropdown } from './Platform.vue'
|
||||
export { default as SourceUrlDropdown } from './SourceUrl.vue'
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<aside>
|
||||
{{ $t('example.warning') }}
|
||||
<a
|
||||
href="https://armour.github.io/vue-typescript-admin-docs/guide/essentials/tags-view.html"
|
||||
target="_blank"
|
||||
>Document</a>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'Warning'
|
||||
})
|
||||
export default class extends Vue {}
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<article-detail :is-edit="false" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import ArticleDetail from './components/ArticleDetail.vue'
|
||||
|
||||
@Component({
|
||||
name: 'CreateArticle',
|
||||
components: {
|
||||
ArticleDetail
|
||||
}
|
||||
})
|
||||
export default class extends Vue {}
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<article-detail :is-edit="true" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import ArticleDetail from './components/ArticleDetail.vue'
|
||||
|
||||
@Component({
|
||||
name: 'EditArticle',
|
||||
components: {
|
||||
ArticleDetail
|
||||
}
|
||||
})
|
||||
export default class extends Vue {}
|
||||
</script>
|
||||
@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
width="80"
|
||||
align="center"
|
||||
label="ID"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
width="180px"
|
||||
align="center"
|
||||
label="Date"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.timestamp | parseTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
width="180px"
|
||||
align="center"
|
||||
label="Author"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
width="105px"
|
||||
label="Importance"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<svg-icon
|
||||
v-for="n in +row.importance"
|
||||
:key="n"
|
||||
name="star"
|
||||
class="meta-item__icon"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
class-name="status-col"
|
||||
label="Status"
|
||||
width="110"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.status | articleStatusFilter">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
min-width="300px"
|
||||
label="Title"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<router-link
|
||||
:to="'/example/edit/'+row.id"
|
||||
class="link-type"
|
||||
>
|
||||
<span>{{ row.title }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="Actions"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<router-link :to="'/example/edit/'+row.id">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
>
|
||||
Edit
|
||||
</el-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.page"
|
||||
:limit.sync="listQuery.limit"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { getArticles } from '@/api/articles'
|
||||
import { IArticleData } from '@/api/types'
|
||||
import Pagination from '@/components/Pagination/index.vue'
|
||||
|
||||
@Component({
|
||||
name: 'ArticleList',
|
||||
components: {
|
||||
Pagination
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private total = 0
|
||||
private list: IArticleData[] = []
|
||||
private listLoading = true
|
||||
private listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
|
||||
created() {
|
||||
this.getList()
|
||||
}
|
||||
|
||||
private async getList() {
|
||||
this.listLoading = true
|
||||
const { data } = await getArticles(this.listQuery)
|
||||
this.list = data.items
|
||||
this.total = data.total
|
||||
// Just to simulate the time of the request
|
||||
setTimeout(() => {
|
||||
this.listLoading = false
|
||||
}, 0.5 * 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user