移除一些示例代码
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',
|
path: '/error-log',
|
||||||
component: Layout,
|
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