文章

src/router/index.js

@@ -139,6 +139,11 @@ export const constantRoutes = [{
         component: () =>
             import ('@/views/content_manage/course_manage/CheckLBCourse.vue')
     },
+    {
+        path: '/createArticle',
+        component: () =>
+            import ('@/views/content_manage/newspaper_manage/CreateArticle.vue')
+    },
     // 404 page must be placed at the end !!!
     { path: '*', redirect: '/', hidden: true }
 ]

src/styles/index.scss

@@ -83,41 +83,41 @@ div:focus {
             flex: 1;
             padding: 56px 16px 16px;
             overflow: hidden;
-            .breadcrumb-box {
-                position: fixed;
-                top: 52px;
-                left: 236px;
-                height: 56px;
-                padding: 17px 0;
-                font-weight: 400;
-                font-size: 14px;
-                line-height: 22px;
-                .breadcrumb-item {
-                    &-pointer {
-                        cursor: pointer;
-                        &:hover {
-                            .el-breadcrumb__inner {
-                                color: #165DFF;
-                            }
-                        }
-                    }
-                    &-last {
-                        span {
-                            color: #1D2129;
-                            font-weight: 500;
-                        }
+        }
+    }
+    .breadcrumb-box {
+        position: fixed;
+        top: 52px;
+        left: 236px;
+        height: 56px;
+        padding: 17px 0;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        .breadcrumb-item {
+            &-pointer {
+                cursor: pointer;
+                &:hover {
+                    .el-breadcrumb__inner {
+                        color: #165DFF;
                     }
                 }
-                .el-breadcrumb__inner {
-                    color: #4E5969;
-                }
-                .el-breadcrumb__separator {
-                    color: #C9CDD4;
-                    margin: 0 4px;
-                    padding: 0 3px;
+            }
+            &-last {
+                span {
+                    color: #1D2129;
+                    font-weight: 500;
                 }
             }
         }
+        .el-breadcrumb__inner {
+            color: #4E5969;
+        }
+        .el-breadcrumb__separator {
+            color: #C9CDD4;
+            margin: 0 4px;
+            padding: 0 3px;
+        }
     }
 }
 

src/views/content_manage/newspaper_manage/CreateArticle.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="manage-root">
+    <Header/>
+    <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
+    <div class="manage-root-contain" :style="{height:tableHeight+'px'}">
+        
+        <div class="save-btn">
+            <el-button type="primary" size="small" :loading="loading">保存</el-button>
+            <el-button size="small">取消</el-button>
+        </div>
+        <el-button type="primary" size="small" class="preview-btn">预览</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "../../../components/Header.vue";
+import Breadcrumb from '../../../components/Breadcrumb.vue';
+import { getLogin } from "@/api/ajax";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { Header, Breadcrumb },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+        id:this.$route.query.id?this.$route.query.id:'',
+        type:this.$route.query.type?this.$route.query.type:'cn',
+        breadcrumbList:[
+            {
+                icon:'file-list-line',
+                url:'',
+                text:''
+            },
+            {
+                icon:'',
+                url:'',
+                notLink: true,
+                text:'...'
+            },
+            {
+                icon:'',
+                url:'',
+                text:this.$route.query.articleId?'编辑报纸':'创建报纸'
+            },
+            {
+                icon:'',
+                url:'',
+                text:this.$route.query.id?this.$route.query.type==='en'?'编辑英文内容':'编辑中文内容':this.$route.query.type==='en'?'创建英文内容':'创建中文内容'
+            }
+        ],
+        tableHeight: "",
+        loading: false,
+        articleForm: {
+            title:'', // 标题
+            source: '', // 来源
+            page: null, // 页码
+            articleCn: '', // 中文文章
+            articleEn: '', // 英文文章
+            articleMp3: [], // 课文音频
+            newWordList: [], // 生词
+            pharseList: [], // 短语
+            annotationList: [], // 注释
+            pictureList: [], // 图片
+            teacher: '', // 讲解教师
+            explanContent: [], // 讲解内容
+        }
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+    
+  },
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getTableHeight() {
+      let tableH = 132; //距离页面下方的高度
+      let tableHeightDetil = window.innerHeight - tableH;
+      if (tableHeightDetil <= 300) {
+        this.tableHeight = 300;
+      } else {
+        this.tableHeight = window.innerHeight - tableH;
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getTableHeight()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.breadcrumb-box {
+    left: 24px;
+}
+.manage-root-contain{
+    margin: 56px 24px 24px;
+    border-radius: 4px;
+    background: #FFF;
+    overflow-y: auto;
+    padding: 24px 24px 80px 24px;
+    position: relative;
+    .save-btn,.preview-btn{
+        position: absolute;
+        bottom: 24px;
+        left: 24px;
+    }
+    .preview-btn{
+        right: 24px;
+        left: auto;
+    }
+}
+</style>

src/views/content_manage/newspaper_manage/CreateNewspaper.vue

@@ -228,20 +228,6 @@
                                             <i class="el-icon-delete" @click="handleDeleteArticle(item.articleList,indexa)"></i>
                                         </li>
                                     </draggable>
-                                    <!-- <ul class="article-list">
-                                        <li v-for="(itema,indexa) in item.articleList" :key="indexa">
-                                            <svg-icon icon-class="sort" draggable="true"></svg-icon>
-                                            <div class="items">
-                                                <h6>{{itema.title}}</h6>
-                                                <span>BY {{itema.author}}</span>
-                                                <span>创建人：{{itema.creator}}</span>
-                                                <span>{{itema.time}}</span>
-                                            </div>
-                                            <svg-icon icon-class="edit" class="edit-article" @click="handleArticle(itema.id,itema.type)"></svg-icon>
-                                            <span class="border"></span>
-                                            <i class="el-icon-delete" @click="handleDeleteArticle(item.articleList,indexa)"></i>
-                                        </li>
-                                    </ul> -->
                                 </template>
                             </el-collapse-transition>
                         </div>
@@ -356,7 +342,7 @@ export default {
             }
         ],
         id:this.$route.query.id?this.$route.query.id:'',
-        stepIndex:0, // 步骤索引
+        stepIndex:window.localStorage.getItem('newsStep')?window.localStorage.getItem('newsStep')*1:0, // 步骤索引
         coverFlag: false,
         newspaperForm:window.localStorage.getItem('newsForm')?JSON.parse(window.localStorage.getItem('newsForm')):{
             cover_image_url: '',
@@ -437,19 +423,24 @@ export default {
                             title: 'Silly science',
                             author: 'TEENS',
                             creator: '张老师',
-                            time: '2012-12-12 12:23'
+                            time: '2012-12-12 12:23',
+                            id: '123',
+                            type: 'cn'
                         },
                         {
                             title: 'Silly science1',
                             author: 'TEENS',
                             creator: '张老师',
-                            time: '2012-12-12 12:23'
+                            time: '2012-12-12 12:23',
+                            id: '123',
+                            type: 'en'
                         },
                         {
                             title: 'Silly science2',
                             author: 'TEENS',
                             creator: '张老师',
-                            time: '2012-12-12 12:23'
+                            time: '2012-12-12 12:23',
+                            id: '123'
                         },
                         {
                             title: 'Silly science3',
@@ -540,6 +531,7 @@ export default {
     // 跳转栏目列表
     handleLinkChannel(){
         window.localStorage.setItem('newsForm',JSON.stringify(this.newspaperForm))
+        window.localStorage.setItem('newsStep',0)
         this.$router.push({
             path:'/channelList'
         })
@@ -662,6 +654,7 @@ export default {
         .then((res) => {
             if(res.status===1){
                window.localStorage.removeItem('newsForm')
+               window.localStorage.removeItem('newsStep')
                this.issueId = res.data.id
                this.stepIndex++
             }
@@ -712,7 +705,16 @@ export default {
     },
     // 跳转文章
     handleArticle(id,type){
-
+        window.localStorage.setItem('newsForm',JSON.stringify(this.newspaperForm))
+        window.localStorage.setItem('newsStep',1)
+        this.$router.push({
+            path:'/createArticle',
+            query: {
+                id: id,
+                type: type,
+                articleId: this.id
+            }
+        })
     },
     //开始拖拽事件
     onStart() {

src/views/content_manage/newspaper_manage/index.vue

@@ -325,6 +325,7 @@ export default {
         window.localStorage.setItem('pageSize',this.pageSize)
         window.localStorage.setItem('pageNumber',this.pageNumber)
         window.localStorage.removeItem('newsForm')
+        window.localStorage.removeItem('newsStep')
         this.$router.push({
             path: "/createNewspaper",
             query: {