create article with tags and category is ok

pycoder404 · pycoder404 · commit 224f90cedc8c · 2022-06-09T17:01:15.000+08:00
diff --git a/src/api/article.js b/src/api/article.js
@@ -8,10 +8,11 @@ export function fetchArticleList(queryParams) {
     })
 }
 
-export function getArticleDetail(articleId) {
+export function getArticleDetail(articleId, queryParams) {
     return request({
         url: '/article/detail/' + articleId + '/',
         method: 'get',
+        params: queryParams
     })
 }
 
diff --git a/src/router/index.js b/src/router/index.js
@@ -3,6 +3,7 @@ import {createRouter,createWebHistory} from 'vue-router'
 import ArticleList from "../views/article/list";
 import ArticleCreate from "../views/article/create";
 import ArticleDetail from "../views/article/detail";
+import ArticleEdit from "../views/article/edit";
 import LayOut from '../layout/index'
 const routes = [
     {
@@ -26,6 +27,12 @@ const routes = [
                 component: ArticleDetail,
                 name:'article detail'
 
+            },
+            {
+                path: 'edit/:id(\\d+)/',
+                component: ArticleEdit,
+                name:'article edit'
+
             },
             {
                 path: 'create',
diff --git a/src/views/article/create.vue b/src/views/article/create.vue
@@ -22,11 +22,31 @@
                 </el-form-item>
             </div>
         </el-form>
-
+        <el-radio-group v-model="postForm.category">
+            <el-radio-button label="1">python</el-radio-button>
+            <el-radio-button label="2">vue</el-radio-button>
+            <el-radio-button label="3">django</el-radio-button>
+            <el-radio-button label="4">linux</el-radio-button>
+        </el-radio-group>
+        <el-select
+                v-model="postForm.tags"
+                placeholder="Select"
+                :reserve-keyword="false"
+                multiple
+                filterable
+                default-first-option
+                allow-create
+                size="small">
+            <el-option
+                    v-for="tagname in tags"
+                    :key="tagname"
+                    :label="tagname"
+                    :value="tagname"
+            />
+        </el-select>
         <sticky-nav
-                :z-index="1800"
                 :class-name="'sub-navbar '+postForm.status"
-                style="padding: 0px 45px 20px 50px;margin-bottom: 30px;"
+                style="padding: 0px 45px 15px 45px;"
         >
             <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
                 Submit
@@ -61,7 +81,7 @@
     // }
 
     export default {
-        name: 'ArticleDetail',
+        name: 'CreateArticle',
         components: {
             // Tinymce,
             // Upload,
@@ -96,7 +116,10 @@
                     status: 'draft',
                     title: '', // 文章题目
                     content: '', // 文章内容
-                    importance: 1
+                    importance: 1,
+                    category:'',
+                    tags:[]
+
                 },
                 html: '',
                 loading: false,
@@ -108,7 +131,9 @@
                     title: [{validator: validateRequire}],
                     content: [{validator: validateRequire}]
                 },
-                tempRoute: {}
+                tempRoute: {},
+                tags: ['python','vue','仓库'],
+                selectedTags:[]
             }
         },
         computed: {
@@ -127,8 +152,8 @@
         },
         created() {
             if (this.isEdit) {
-                const id = this.$route.params && this.$route.params.id
-                this.fetchData({id: id, isedit: this.isEdit})
+                const articleId = this.$route.params && this.$route.params.id
+                this.fetchData(articleId, {'isedit': this.isEdit})
             }
 
             // Why need to make a copy of this.$route here?
@@ -138,13 +163,11 @@
         },
         methods: {
 
-            submit() {
-                console.log(this.content)
-                console.log(this.html)
-            },
-            fetchData(queryParam) {
-                getArticleDetail(queryParam).then(response => {
-                    this.postForm = response.data
+            fetchData(articleId, queryParam) {
+                console.log(articleId, queryParam)
+                getArticleDetail(articleId, queryParam).then(response => {
+                    console.log(response.data)
+                    this.postForm = response
 
                     // just for test
                     // this.postForm.title += `   Article Id:${this.postForm.id}`
@@ -230,14 +253,18 @@
 
 <style lang="scss" scoped>
     @import "~@/styles/mixin.scss";
+
     .mavon-edtior-custom {
         width: 100%;
         min-height: 600px;
     }
+
     .createPost-container {
         position: relative;
+
         .createPost-main-container {
             padding: 10px 50px 20px 50px;
+
             .postInfo-container {
                 position: relative;
                 @include clearfix;
diff --git a/src/views/article/edit.vue b/src/views/article/edit.vue
@@ -0,0 +1,15 @@
+<template>
+    <create-article :is-edit="true"></create-article>
+</template>
+
+<script>
+    import CreateArticle from './create'
+    export default {
+        name: "EditArticle",
+        components:{CreateArticle}
+    }
+</script>
+
+<style scoped>
+
+</style>

Original file line number	Diff line number	Diff line change
`@@ -8,10 +8,11 @@ export function fetchArticleList(queryParams) {`
`8`	`8`	`})`
`9`	`9`	`}`
`10`	`10`
`11`		`-export function getArticleDetail(articleId) {`
	`11`	`+export function getArticleDetail(articleId, queryParams) {`
`12`	`12`	`return request({`
`13`	`13`	`url: '/article/detail/' + articleId + '/',`
`14`	`14`	`method: 'get',`
	`15`	`+ params: queryParams`
`15`	`16`	`})`
`16`	`17`	`}`
`17`	`18`