add && remove
This commit is contained in:
Pan
@@ -6,3 +6,11 @@ export function getList() {
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
export function getArticle() {
|
||||
return fetch({
|
||||
url: '/article/detail',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
9
src/api/remoteSearch.js
Normal file
9
src/api/remoteSearch.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { fetch } from 'utils/fetch';
|
||||
|
||||
export function userSearch(name) {
|
||||
return fetch({
|
||||
url: '/search/user',
|
||||
method: 'get',
|
||||
params: { name }
|
||||
});
|
||||
}
|
||||
@@ -75,7 +75,7 @@
|
||||
// language_url: '/static/tinymce/langs/zh_CN.js',
|
||||
toolbar: this.toolbar,
|
||||
menubar: this.menubar,
|
||||
plugins: 'advlist,autolink,code,powerpaste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
|
||||
plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
|
||||
end_container_on_empty_block: true,
|
||||
powerpaste_word_import: 'clean',
|
||||
code_dialog_height: 450,
|
||||
|
||||
49
src/mock/article.js
Normal file
49
src/mock/article.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import Mock from 'mockjs';
|
||||
|
||||
|
||||
const List = [];
|
||||
const count = 20;
|
||||
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
List.push(Mock.mock({
|
||||
id: '@id',
|
||||
title: '@ctitle(10, 20)',
|
||||
'status|1': ['published', 'draft'],
|
||||
author: '@cname',
|
||||
display_time: '@datetime',
|
||||
pageviews: '@integer(300, 5000)'
|
||||
}));
|
||||
}
|
||||
|
||||
export default {
|
||||
getList: () => new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve([200, {
|
||||
data: List
|
||||
}]);
|
||||
}, 100);
|
||||
}),
|
||||
getArticle: () => new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve([200, {
|
||||
data: {
|
||||
id: 120000000001,
|
||||
author: { key: 'mockPan' },
|
||||
source_name: '原创作者',
|
||||
category_item: [{ key: 'global', name: '全球' }],
|
||||
comment_disabled: false,
|
||||
content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
|
||||
content_short: '我是测试数据',
|
||||
display_time: +new Date(),
|
||||
image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
|
||||
platforms: ['a-platform'],
|
||||
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
status: 'published',
|
||||
tags: [],
|
||||
title: ''
|
||||
}
|
||||
}]);
|
||||
}, 100);
|
||||
})
|
||||
};
|
||||
@@ -1,26 +1,19 @@
|
||||
import axios from 'axios';
|
||||
import Mock from 'mockjs';
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import article_tableAPI from './article_table'
|
||||
import articleAPI from './article';
|
||||
import article_tableAPI from './article_table';
|
||||
import remoteSearchAPI from './remoteSearch';
|
||||
const mock = new MockAdapter(axios);
|
||||
|
||||
const articleList = {
|
||||
'data|20': [{
|
||||
id: '@id',
|
||||
title: '@ctitle(10, 20)',
|
||||
'status|1': ['published', 'draft'],
|
||||
author: '@cname',
|
||||
display_time: '@datetime',
|
||||
pageviews: '@integer(300, 5000)'
|
||||
}]
|
||||
}
|
||||
const data = JSON.stringify(Mock.mock(articleList))
|
||||
mock.onGet('/article/list').reply(200, data);
|
||||
|
||||
mock.onGet('/article/list').reply(articleAPI.getList);
|
||||
mock.onGet('/article/detail').reply(articleAPI.getArticle);
|
||||
|
||||
mock.onGet('/article_table/list').reply(article_tableAPI.getList);
|
||||
mock.onGet('/article_table/pv').reply(article_tableAPI.getPv);
|
||||
|
||||
|
||||
mock.onGet('/search/user').reply(remoteSearchAPI.searchUser);
|
||||
|
||||
|
||||
export default mock;
|
||||
|
||||
29
src/mock/remoteSearch.js
Normal file
29
src/mock/remoteSearch.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import Mock from 'mockjs';
|
||||
|
||||
const NameList = [];
|
||||
const count = 100;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
NameList.push(Mock.mock({
|
||||
name: '@first'
|
||||
}));
|
||||
}
|
||||
NameList.push({ name: 'mockPan' })
|
||||
|
||||
export default {
|
||||
searchUser: config => {
|
||||
const { name } = config.params;
|
||||
const mockNameList = NameList.filter(item => {
|
||||
const lowerCaseName = item.name.toLowerCase()
|
||||
if (name && lowerCaseName.indexOf(name.toLowerCase()) < 0) return false;
|
||||
return true;
|
||||
});
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve([200, {
|
||||
items: mockNameList
|
||||
}]);
|
||||
}, 100);
|
||||
})
|
||||
}
|
||||
};
|
||||
@@ -51,6 +51,8 @@ const Theme = resolve => require(['../views/theme/index'], resolve);
|
||||
/* example*/
|
||||
const DynamicTable = resolve => require(['../views/example/dynamictable'], resolve);
|
||||
const Table = resolve => require(['../views/example/table'], resolve);
|
||||
const Form1 = resolve => require(['../views/example/form1'], resolve);
|
||||
const Form2 = resolve => require(['../views/example/form2'], resolve);
|
||||
|
||||
|
||||
/* admin*/
|
||||
@@ -170,7 +172,9 @@ export default new Router({
|
||||
icon: 'zonghe',
|
||||
children: [
|
||||
{ path: 'dynamictable', component: DynamicTable, name: '动态table' },
|
||||
{ path: 'table', component: Table, name: '综合table' }
|
||||
{ path: 'table', component: Table, name: '综合table' },
|
||||
{ path: 'form1', component: Form1, name: '综合form1' }
|
||||
// { path: 'form2', component: Form2, name: '综合form2' }
|
||||
]
|
||||
},
|
||||
// {
|
||||
|
||||
@@ -59,3 +59,25 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
//文章页textarea修改样式
|
||||
.article-textarea {
|
||||
textarea {
|
||||
padding-right: 40px;
|
||||
resize: none;
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
border-bottom: 1px solid #bfcbd9;
|
||||
}
|
||||
}
|
||||
|
||||
//element ui upload
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
291
src/views/example/form1.vue
Normal file
291
src/views/example/form1.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="createPost-container">
|
||||
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
|
||||
|
||||
<Sticky :className="'sub-navbar '+postForm.status">
|
||||
<template v-if="fetchSuccess">
|
||||
<div style="display:inline-block">
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
|
||||
<el-dropdown-menu class="no-padding no-hover" slot="dropdown">
|
||||
<el-dropdown-item>
|
||||
<el-radio-group style="padding: 10px;" v-model="postForm.comment_disabled">
|
||||
<el-radio :label="true">关闭评论</el-radio>
|
||||
<el-radio :label="false">打开评论</el-radio>
|
||||
</el-radio-group>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>
|
||||
平台<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-border" slot="dropdown">
|
||||
<el-checkbox-group v-model="postForm.platforms" style="padding: 5px 15px;">
|
||||
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
|
||||
{{item.name}}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>
|
||||
外链<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
|
||||
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
|
||||
<el-input placeholder="请输入内容" v-model="postForm.source_uri">
|
||||
<template slot="prepend">填写url</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">发布
|
||||
</el-button>
|
||||
<el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
|
||||
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
|
||||
</template>
|
||||
|
||||
</Sticky>
|
||||
|
||||
<div class="createPost-main-container">
|
||||
<el-row>
|
||||
<el-col :span="21">
|
||||
<el-form-item style="margin-bottom: 40px;" prop="title">
|
||||
<MDinput name="name" v-model="postForm.title" required :maxlength="100">
|
||||
标题
|
||||
</MDinput>
|
||||
<span v-show="postForm.title.length>=26" class='title-prompt'>app可能会显示不全</span>
|
||||
</el-form-item>
|
||||
|
||||
<div class="postInfo-container">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
|
||||
<multiselect v-model="postForm.author" :options="userLIstOptions" @search-change="getRemoteUserList" placeholder="搜索用户" selectLabel="选择"
|
||||
deselectLabel="删除" track-by="key" :internalSearch="false" label="key">
|
||||
<span slot='noResult'>无结果</span>
|
||||
</multiselect>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-tooltip class="item" effect="dark" content="将替换作者" placement="top">
|
||||
<el-form-item label-width="50px" label="来源:" class="postInfo-container-item">
|
||||
<el-input placeholder="将替换作者" style='min-width:150px;' v-model="postForm.source_name">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<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-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</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-form-item>
|
||||
|
||||
<div class="editor-container">
|
||||
<Tinymce :height=400 ref="editor" v-model="postForm.content"></Tinymce>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<Upload v-model="postForm.image_uri"></Upload>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tinymce from 'components/Tinymce'
|
||||
import Upload from 'components/Upload/singleImage3'
|
||||
import MDinput from 'components/MDinput';
|
||||
import { validateURL } from 'utils/validate';
|
||||
import { getArticle } from 'api/article';
|
||||
import { userSearch } from 'api/remoteSearch';
|
||||
|
||||
export default {
|
||||
name: 'articleDetail',
|
||||
components: { Tinymce, MDinput, Upload },
|
||||
data() {
|
||||
const validateRequire = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
this.$message({
|
||||
message: rule.field + '为必传项',
|
||||
type: 'error'
|
||||
});
|
||||
callback(null)
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
};
|
||||
const validateSourceUri = (rule, value, callback) => {
|
||||
if (value) {
|
||||
if (validateURL(value)) {
|
||||
callback()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '外链url填写不正确',
|
||||
type: 'error'
|
||||
});
|
||||
callback(null)
|
||||
}
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
};
|
||||
return {
|
||||
postForm: {
|
||||
title: '', // 文章题目
|
||||
content: '', // 文章内容
|
||||
content_short: '', // 文章摘要
|
||||
source_uri: '', // 文章外链
|
||||
image_uri: '', // 文章图片
|
||||
source_name: '', // 文章外部作者
|
||||
display_time: undefined, // 前台展示时间
|
||||
id: undefined,
|
||||
platforms: ['a-platform']
|
||||
},
|
||||
fetchSuccess: true,
|
||||
loading: false,
|
||||
userLIstOptions: [],
|
||||
platformsOptions: [
|
||||
{ key: 'a-platform', name: 'a-platform' },
|
||||
{ key: 'b-platform', name: 'b-platform' },
|
||||
{ key: 'c-platform', name: 'c-platform' }
|
||||
],
|
||||
rules: {
|
||||
image_uri: [{ validator: validateRequire }],
|
||||
title: [{ validator: validateRequire }],
|
||||
content: [{ validator: validateRequire }],
|
||||
source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
contentShortLength() {
|
||||
return this.postForm.content_short.length
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
getArticle().then(response => {
|
||||
this.postForm = response.data;
|
||||
}).catch(err => {
|
||||
this.fetchSuccess = false;
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
this.postForm.display_time = parseInt(this.display_time / 1000);
|
||||
console.log(this.postForm)
|
||||
this.$refs.postForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '发布文章成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
this.postForm.status = 'published';
|
||||
this.loading = false;
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
draftForm() {
|
||||
if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
|
||||
this.$message({
|
||||
message: '请填写必要的标题和内容',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
showClose: true,
|
||||
duration: 1000
|
||||
});
|
||||
this.postForm.status = 'draft';
|
||||
},
|
||||
getRemoteUserList(query) {
|
||||
userSearch(query).then(response => {
|
||||
if (!response.items) return;
|
||||
console.log(response)
|
||||
this.userLIstOptions = response.items.map(v => ({
|
||||
key: v.name
|
||||
}));
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.title-prompt{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
font-size: 12px;
|
||||
top:10px;
|
||||
color:#ff4949;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.editor-container {
|
||||
min-height: 500px;
|
||||
margin: 0 0 30px;
|
||||
.editor-upload-btn-container {
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
.editor-upload-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.word-counter {
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
0
src/views/example/form2.vue
Normal file
0
src/views/example/form2.vue
Normal file
Reference in New Issue
Block a user