fix(/style): 新增标签和更改样式

src/apis/articleManagement.js

@@ -3,10 +3,36 @@ export const getAllArticleInfo = vm =>{
         url:'/article/getAllArticleInfo',
         method:'get'
     }).then(res => {
-        res.data.articleInfo.forEach(element => {
+        let color = ['error','primary','success','yellow','orange'];
+        res.data.articleInfo.forEach((element, index) => {
             vm.articles.push(element);
+            // console.log(element);
+            if(element.tag){
+                vm.tags.push({tagName:element.tag,tagColor:color[index%5]});
+            }
         });
+        // console.log(vm.tags);
     }).catch(error => {
         console.log("error", error);
     })
+
+}
+
+export const updateArticleList = (vm, tag) =>{
+    vm.$axios.request({
+        url:'/article/updateArticleList',
+        method:'get',
+        params:{
+            tag
+        }
+    }).then(res => {
+        vm.articles.splice(0);
+        console.log(vm.articles);
+        res.data.articleInfo.forEach(element => {
+            vm.articles.push(element);
+        })
+        // console.log(res);
+    }).catch( error => {
+        console.log('error', error);
+    })
 }
\ No newline at end of file

src/apis/markdownEditor.js

@@ -26,4 +26,22 @@ export const submitContent = vm =>{
     }).catch(error => {
         console.log('error', error);
     })
-}
\ No newline at end of file
+}
+
+
+export const getAllTagInfo = vm =>{
+    vm.$axios.request({
+        url:'/article/getAllArticleInfo',
+        method:'get'
+    }).then(res => {
+        res.data.articleInfo.forEach((element, index) => {
+            if(element.tag){
+                vm.tags.push(element.tag);
+            }
+        });
+    }).catch(error => {
+        console.log("error", error);
+    })
+
+}
+

src/views/Home.vue

@@ -177,7 +177,7 @@ export default {
   }
 
   .content{
-    height: calc(~"100vh - 50px");
+    min-height: calc(~"100vh - 50px");
     width: calc( ~"100wh-200px");
     background-color: aliceblue;
   }

src/views/article-detail/articleDetail.vue

 <template>
     <div class="editor">
         <div>
-            <span><Icon type="md-arrow-back" size='26' style="margin-right:5px;color:#f40" @click="goBack"/>返回</span>
+            <span style="font-size:26px">
+                <!-- <Icon type="md-arrow-round-back"  /> -->
+                <Icon type="ios-arrow-dropleft" size='26' style="margin-right:5px;color:rgb(73, 167, 231)" @click="goBack"/>
+                返回</span>
         </div>
         <Row class="margin-top-20">
             <Col span = 24>

src/views/article-management/articleManagement.less

 .article-management{
     margin:0 auto;
     width:90%;
+    // min-height:120vh;
     &-style{
         background-color:rgb(241, 241, 241);
-        margin-top:20px;
+        margin-bottom:15px;
        
         &-title{
             height:20px;
@@ -17,6 +18,7 @@
         }
 
         &-detail{
+           margin-top:20px;
            margin-left:90%;
         }
     }

src/views/article-management/articleManagement.vue

 <template>
+
 <div class="article-management">
-    <div v-for="(item, index) in articles" :key="index">
+    <!-- 分类: -->
+    <Tag size='large' color="orange" @click.native = "updateArticleList()">全部</Tag>
+    <span v-for="(item, index) in tags" :key="index + '-label'"   style="margin-top:10px;margin-left:5px;">
+          <Tag :color='item.tagColor' size='large' @click.native= "updateArticleList(item.tagName)" >{{item.tagName}}</Tag>
+    </span>
+  
+    <div v-for="(item, index) in articles" :key="index" >
         <div  class ="article-management-style">
             <div class="article-management-style-title">
                    <span><Icon type="ios-leaf-outline" size="30px" /> {{item.title}} </span> 
@@ -9,15 +16,18 @@
             <div class="article-management-style-description">
                 <span>{{item.description}}</span>
             </div>
-            <div class="article-management-style-detail">
-                <span>
+
+            <div class="article-management-style-detail" >
+                <span >
                     <Icon type="ios-folder-outline" style="margin-right:5px" size="26px"/>
-                     <a href="javascript:void(0)" style="margin-bottom:10px" @click="findArticleDetail(item.content)">查看全文</a> 
+                     <a href="javascript:void(0)" @click="findArticleDetail(item.content)">查看全文</a> 
                 </span>
-               
             </div>
+
         </div>
     </div>
+    <BackTop :height='50'></BackTop>
+
 </div>
     
 </template>
@@ -28,7 +38,8 @@ import * as articleManagementRequest from '@/apis/articleManagement.js';
 export default {
     data(){
         return {
-           articles:[]
+           articles:[],
+           tags:[]
         }
     },
     created(){
@@ -37,7 +48,11 @@ export default {
     methods:{
         findArticleDetail(content){
             this.$router.push({name:'articleDetailIndex',params:{content:content}});
-            console.log(content);
+            // console.log(content);
+        },
+        updateArticleList(tag){
+            // console.log(tag);
+            articleManagementRequest.updateArticleList(this, tag);
         }
     }
 }

src/views/markdown-editor/markdown-editor.vue

@@ -21,21 +21,15 @@
                         <Input  v-model= "articleForm.articleDescription" maxlength="200" show-word-limit type="textarea" placeholder="Enter something..." style="width: 300px"></Input>
                     </FormItem>
                     <FormItem label = "文章分类" prop="articleCollection">
-                        <RadioGroup v-model="articleCollection">
-                            <Radio label="vue">
-                                <span>Vue</span>
-                            </Radio>
-                            <Radio label="js">
-                                <span>JS</span>
-                            </Radio>
-                            <Radio label="css">
-                                <span>CSS</span>
+                        <RadioGroup v-model="articleCollection" v-for = "(item, index) in tags" :key="index">
+                            <Radio :label="item">
+                                <span>{{item}}</span>
                             </Radio>
                         </RadioGroup>
                     </FormItem>
                     <FormItem label="新增标签">
                         <!-- <span>新增标签</span> -->
-                        <Input v-model="newTag" size='small' style="width:200px"></Input>
+                        <Input v-model="newTag" size='small' style="width:150px" @on-blur="clearRadio"></Input>
                     </FormItem>
                 </Form>
             </Col>
@@ -48,6 +42,7 @@
 
 <script>
 import * as markdownEditorRequest from '@/apis/markdownEditor.js';
+// import {getAllArticleInfo} from '@/apis/articleManagement.js';
 
 export default {
     name: 'markdown-editor',
@@ -59,6 +54,7 @@ export default {
                 articleDescription:'',
                 // articleCollection:''
             },
+            tags:[],
             newTag:'',
             articleCollection:'',
             articleRules:{
@@ -79,6 +75,15 @@ export default {
         getHTMLCode(f, s){
             console.log(f, s);
         },
+
+        // 清空radiogroup
+        clearRadio(){
+            if(this.newTag){
+                this.articleCollection = '';
+            }
+        },
+
+        // 发布文章
         submitContent(){
             
             if(!this.markdownContent){
@@ -114,6 +119,10 @@ export default {
                 }
             })
         }
+    },
+    created(){
+        // 获取所有taginfo
+        markdownEditorRequest.getAllTagInfo(this);
     }
 };
 </script>