12

src/App.vue

@@ -0,0 +1,10 @@
+<template>
+    <div id="app">
+        <router-view></router-view>
+    </div>
+</template>
+<style>
+    @import "./assets/css/main.css";
+    @import "./assets/css/color-dark.css";     /*深色主题*/
+    /*@import "./assets/css/theme-green/color-green.css";   浅绿色主题*/
+</style>

src/api/index.js

@@ -0,0 +1,198 @@
+// 引入axios
+import axios from 'axios'
+// 引入qs库转换参数格式
+import qs from 'qs'
+
+// axios全局配置
+axios.defaults.timeout = 10000                      // 超时时间
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'        // 配置请求头
+axios.defaults.baseURL = 'http://www.tougao.com/'
+// axios.defaults.baseURL = '/'
+
+// 添加响应拦截器，统一处理服务器响应和异常
+axios.interceptors.response.use(
+    (response) => {
+      // 请求正常则返回0
+      return Promise.resolve(response)
+    },
+    (error) => {
+      // 请求错误进行的处理可以写在这里
+      if (err && err.response) {
+          switch (err.response.status) {
+              case 400:
+              err.message = '错误请求'
+              break;
+              case 401:
+              err.message = '未授权，请重新登录';
+              break;
+              case 403:
+              err.message = '拒绝访问';
+              break;
+              case 404:
+              err.message = '请求错误,未找到该资源';
+              break;
+              case 405:
+              err.message = '请求方法未允许';
+              break;
+              case 408:
+              err.message = '请求超时';
+              break;
+              case 500:
+              err.message = '服务器端出错';
+              break;
+              case 501:
+              err.message = '网络未实现';
+              break;
+              case 502:
+              err.message = '网络错误';
+              break;
+              case 503:
+              err.message = '服务不可用';
+              break;
+              case 504:
+              err.message = '网络超时';
+              break;
+              case 505:
+              err.message = 'http版本不支持该请求';
+              break;
+              default:
+              err.message = `连接错误${err.response.status}`
+          }
+      }
+      return Promise.reject(error)
+    }
+  )
+
+export default {
+     /**
+      * post方法，对应post请求
+      * @param {String} url [请求的url地址]
+      * @param {Object} params [请求时携带的参数]
+      */
+     post (url, params) {
+       return new Promise((resolve, reject) => {
+         axios.post(url, qs.stringify(params))
+           .then(res => {
+             resolve(res.data)
+           })
+           .catch(err => {
+             reject(err)
+           })
+       })
+     },
+     /**
+      * get方法，对应get请求
+      * @param {String} url [请求的url地址]
+      * @param {Object} params [请求时携带的参数]
+      */
+     get (url, params) {
+       return new Promise((resolve, reject) => {
+         axios.get(url, {params: param})
+           .then(res => {
+             resolve(res.data)
+           })
+           .catch(err => {
+             reject(err)
+           })
+       })
+     },
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/assets/css/color-dark.css

@@ -0,0 +1,28 @@
+.header{
+    background-color: #242f42;
+}
+.login-wrap{
+    background: #324157;
+}
+.plugins-tips{
+    background: #eef1f6;
+}
+.plugins-tips a{
+    color: #20a0ff;
+}
+.el-upload--text em {
+    color: #20a0ff;
+}
+.pure-button{
+    background: #20a0ff;
+}
+.tags-li.active {
+    border: 1px solid #409EFF;
+    background-color: #409EFF;
+}
+.message-title{
+    color: #20a0ff;
+}
+.collapse-btn:hover{
+    background: rgb(40,52,70);
+}

src/assets/css/icon.css

@@ -0,0 +1,4 @@
+
+    [class*=" el-icon-lx"], [class^=el-icon-lx] {
+        font-family: lx-iconfont!important;
+    }

src/assets/css/main.css

@@ -0,0 +1,182 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+    width: 100%;
+    height: 100%;
+    /* overflow: hidden; */
+}
+
+body {
+    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+}
+
+a {
+    text-decoration: none
+}
+
+
+.content-box {
+    position: absolute;
+    left: 250px;
+    right: 0;
+    top: 70px;
+    bottom: 0;
+    padding-bottom: 30px;
+    -webkit-transition: left .3s ease-in-out;
+    transition: left .3s ease-in-out;
+    background: #f0f0f0;
+}
+
+.content {
+    width: auto;
+    height: 100%;
+    padding: 10px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+}
+
+.content-collapse {
+    left: 65px;
+}
+
+.container {
+    padding: 30px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.crumbs {
+    margin: 10px 0;
+}
+
+.el-table th {
+    background-color: #f5f7fa !important;
+}
+
+.pagination {
+    margin: 20px 0;
+    text-align: right;
+}
+
+.plugins-tips {
+    padding: 20px 10px;
+    margin-bottom: 20px;
+}
+
+.el-button+.el-tooltip {
+    margin-left: 10px;
+}
+
+.el-table tr:hover {
+    background: #f6faff;
+}
+
+.mgb20 {
+    margin-bottom: 20px;
+}
+
+.move-enter-active,
+.move-leave-active {
+    transition: opacity .5s;
+}
+
+.move-enter,
+.move-leave {
+    opacity: 0;
+}
+
+
+/*BaseForm*/
+
+.form-box {
+    width: 600px;
+}
+
+.addarticle-box{
+    width: 800px;
+}
+
+.form-box .line {
+    text-align: center;
+}
+
+.el-time-panel__content::after,
+.el-time-panel__content::before {
+    margin-top: -7px;
+}
+
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+    padding-bottom: 0;
+}
+
+/*Upload*/
+
+.pure-button {
+    width: 150px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: #fff;
+    border-radius: 3px;
+}
+
+.g-core-image-corp-container .info-aside {
+    height: 45px;
+}
+
+.el-upload--text {
+    background-color: #fff;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    box-sizing: border-box;
+    /* width: 360px;
+    height: 180px; */
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.el-upload--text .el-icon-upload {
+    font-size: 67px;
+    color: #97a8be;
+    margin: 40px 0 16px;
+    line-height: 50px;
+}
+
+.el-upload--text {
+    color: #97a8be;
+    font-size: 14px;
+    text-align: center;
+}
+
+.el-upload--text em {
+    font-style: normal;
+}
+
+/*VueEditor*/
+
+.ql-container {
+    min-height: 400px;
+}
+
+.ql-snow .ql-tooltip {
+    transform: translateX(117.5px) translateY(10px) !important;
+}
+
+.editor-btn {
+    margin-top: 20px;
+}
+
+/*markdown*/
+
+.v-note-wrapper .v-note-panel {
+    min-height: 500px;
+}

src/assets/css/theme-green/color-green.css

@@ -0,0 +1,29 @@
+.header{
+    background-color: #07c4a8;
+}
+.login-wrap{
+    background: rgba(56, 157, 170, 0.82);;
+}
+.plugins-tips{
+    background: #f2f2f2;
+}
+.plugins-tips a{
+    color: #00d1b2;
+}
+.el-upload--text em {
+    color: #00d1b2;
+}
+.pure-button{
+    background: #00d1b2;
+}
+.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
+    background-color: #00d1b2 !important;
+    border-color: #00d1b2 !important;
+}
+.tags-li.active {
+    border: 1px solid #00d1b2;
+    background-color: #00d1b2;
+}
+.collapse-btn:hover{
+    background: #00d1b2;
+}

src/components/common/Header.vue

@@ -0,0 +1,231 @@
+<template>
+    <div class="header">
+        <!-- 折叠按钮 -->
+        <div class="collapse-btn" @click="collapseChage">
+            <i v-if="!collapse" class="el-icon-s-fold"></i>
+            <i v-else class="el-icon-s-unfold"></i>
+        </div>
+        <div class="logo">
+            <img src="../../assets/img/logo.png" />
+            {{$t('system.title')}}
+        </div>
+        <div class="header-right">
+            <div class="header-user-con">
+                <div class="changelang">
+                    <el-dropdown trigger="click" @command="chengelang">
+                        <span class="el-dropdown-link">
+                            language
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item command="en">english</el-dropdown-item>
+                            <el-dropdown-item command="zh">中文简体</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </div>
+                <!-- 全屏显示 -->
+                <div class="btn-fullscreen" @click="handleFullScreen">
+                    <el-tooltip
+                        effect="dark"
+                        :content="fullscreen?$t('system.noscreen'):$t('system.screen')"
+                        placement="bottom"
+                    >
+                        <i class="el-icon-rank"></i>
+                    </el-tooltip>
+                </div>
+                <!-- 消息中心 -->
+                
+                <!-- 用户头像 -->
+                <div class="user-avator">
+                    <img src="../../assets/img/img.jpg" />
+                </div>
+                <!-- 用户名下拉菜单 -->
+                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+                    <span class="el-dropdown-link">
+                        {{username}} 
+                        <i class="el-icon-caret-bottom"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item divided command="loginout">{{$t('system.loyout')}}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import bus from '../common/bus';
+export default {
+    data() {
+        return {
+            collapse: false,
+            fullscreen: false,
+            name: 'unknown user',
+            message: 2,
+            langArr: [
+                { value: 'zh', label: '中文' },
+                { value: 'en', label: 'English' }
+            ]
+        };
+    },
+    computed: {
+        username() {
+            let username = localStorage.getItem('ms_username');
+            return username ? username : this.name;
+        },
+        userrole(){
+            let userrole = localStorage.getItem('ms_userrole');
+            if(userrole==1){
+                return this.$t('total.author');
+            }else if(userrole==2){
+                return this.$t('total.editor');
+            }else if(userrole=='admin'){
+                return this.$t('total.admin');
+            }else{
+                return this.$t('total.reviewers');
+            }
+        }
+    },
+    methods: {
+        // 用户名下拉菜单选择事件
+        handleCommand(command) {
+            if (command == 'loginout') {
+                localStorage.removeItem('ms_username');
+                localStorage.removeItem('ms_userrole');
+                this.$router.push('/login');
+            }
+        },
+        // 侧边栏折叠
+        collapseChage() {
+            this.collapse = !this.collapse;
+            bus.$emit('collapse', this.collapse);
+        },
+        // 全屏事件
+        handleFullScreen() {
+            let element = document.documentElement;
+            if (this.fullscreen) {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitCancelFullScreen) {
+                    document.webkitCancelFullScreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            } else {
+                if (element.requestFullscreen) {
+                    element.requestFullscreen();
+                } else if (element.webkitRequestFullScreen) {
+                    element.webkitRequestFullScreen();
+                } else if (element.mozRequestFullScreen) {
+                    element.mozRequestFullScreen();
+                } else if (element.msRequestFullscreen) {
+                    // IE11
+                    element.msRequestFullscreen();
+                }
+            }
+            this.fullscreen = !this.fullscreen;
+        },
+        //切换语言
+        chengelang(commond){
+            localStorage.setItem('langs',commond);
+            this.$router.go(0);
+        }
+    },
+    mounted() {
+        if (document.body.clientWidth < 1000) {
+            this.collapseChage();
+        }
+    }
+};
+</script>
+<style scoped>
+.header {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 70px;
+    font-size: 22px;
+    color: #fff;
+}
+.collapse-btn {
+    float: left;
+    padding: 0 21px;
+    cursor: pointer;
+    line-height: 70px;
+}
+.header .logo {
+    float: left;
+    width: 350px;
+    vertical-align: middle;
+    line-height: 70px;
+}
+.header .logo img {
+    width: 90px;
+    height: 25px;
+    vertical-align: middle;
+}
+.header-right {
+    float: right;
+    padding-right: 50px;
+}
+.header-user-con {
+    display: flex;
+    height: 70px;
+    align-items: center;
+}
+.btn-fullscreen {
+    transform: rotate(45deg);
+    margin-right: 5px;
+    font-size: 24px;
+}
+.changelang {
+    position: relative;
+    width: 90px;
+    height: 30px;
+}
+.btn-fullscreen {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    border-radius: 15px;
+    cursor: pointer;
+}
+.btn-bell-badge {
+    position: absolute;
+    right: 0;
+    top: -2px;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background: #f56c6c;
+    color: #fff;
+}
+.btn-bell .el-icon-bell {
+    color: #fff;
+}
+.user-name {
+    margin-left: 10px;
+}
+.user-avator {
+    margin-left: 20px;
+}
+.user-avator img {
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+.el-dropdown-link {
+    color: #fff;
+    cursor: pointer;
+}
+.el-dropdown-menu__item {
+    text-align: center;
+}
+#colgreen{
+    color: rgb(142, 150, 74);
+}
+</style>

src/components/common/Home.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="wrapper">
+        <v-head></v-head>
+        <v-sidebar></v-sidebar>
+        <div class="content-box" :class="{'content-collapse':collapse}">
+            <v-tags></v-tags>
+            <div class="content">
+                <transition name="move" mode="out-in">
+                    <keep-alive :include="tagsList">
+                        <router-view></router-view>
+                    </keep-alive>
+                </transition>
+                <el-backtop target=".content"></el-backtop>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import vHead from './Header.vue';
+import vSidebar from './Sidebar.vue';
+import vTags from './Tags.vue';
+import bus from './bus';
+export default {
+    data() {
+        return {
+            tagsList: [],
+            collapse: false
+        };
+    },
+    components: {
+        vHead,
+        vSidebar,
+        vTags
+    },
+    created() {
+        bus.$on('collapse-content', msg => {
+            this.collapse = msg;
+        });
+
+        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+        bus.$on('tags', msg => {
+            let arr = [];
+            for (let i = 0, len = msg.length; i < len; i++) {
+                msg[i].name && arr.push(msg[i].name);
+            }
+            this.tagsList = arr;
+        });
+    }
+};
+</script>

src/components/common/Sidebar.vue

@@ -0,0 +1,272 @@
+<template>
+    <div class="sidebar">
+        <el-menu
+            class="sidebar-el-menu"
+            :default-active="onRoutes"
+            :collapse="collapse"
+            background-color="#324157"
+            text-color="#bfcbd9"
+            active-text-color="#20a0ff"
+            unique-opened
+            router
+        >
+            <template v-for="item in items">
+                <template v-if="item.subs">
+                    <el-submenu :index="item.index" :key="item.index">
+                        <template slot="title">
+                            <i :class="item.icon"></i>
+                            <span slot="title">{{ item.title }}</span>
+                        </template>
+                        <template v-for="subItem in item.subs">
+                            <el-submenu
+                                v-if="subItem.subs"
+                                :index="subItem.index"
+                                :key="subItem.index"
+                            >
+                                <template slot="title">{{ subItem.title }}</template>
+                                <el-menu-item
+                                    v-for="(threeItem,i) in subItem.subs"
+                                    :key="i"
+                                    :index="threeItem.index"
+                                >{{ threeItem.title }}</el-menu-item>
+                            </el-submenu>
+                            <el-menu-item
+                                v-else
+                                :index="subItem.index"
+                                :key="subItem.index"
+                            >{{ subItem.title }}</el-menu-item>
+                        </template>
+                    </el-submenu>
+                </template>
+                <template v-else>
+                    <el-menu-item :index="item.index" :key="item.index">
+                        <i :class="item.icon"></i>
+                        <span slot="title">{{ item.title }}</span>
+                    </el-menu-item>
+                </template>
+            </template>
+        </el-menu>
+    </div>
+</template>
+
+<script>
+import bus from '../common/bus';
+export default {
+    data() {
+        return {
+            collapse: false,
+            userrole:localStorage.getItem('ms_userrole'),
+            items:[],
+            author_items: [
+                {
+                    icon: 'el-icon-lx-home',
+                    index: 'dashboard',
+                    title: this.$t('sidebar.main')
+                },
+                {
+                    icon: 'el-icon-lx-cascades',
+                    index: '1',
+                    title: this.$t('sidebar.author'),
+                    subs:[
+                        {
+                            index:'articleList',
+                            title:this.$t('sidebar.author1')
+                        },
+                        {
+                            index:'articleAdd',
+                            title:this.$t('sidebar.author2')
+                        }
+                    ]
+                },
+                {
+                    icon: 'el-icon-user',
+                    index: '2',
+                    title: this.$t('sidebar.reviewerArticle'),
+                    subs:[
+                        {
+                            index:'authorApplyReviewer',
+                            title:this.$t('sidebar.authorApplyReviewer')
+                        }
+                    ]
+                }
+            ],
+            editor_items:[
+                {
+                    icon: 'el-icon-lx-home',
+                    index: 'dashboard',
+                    title: this.$t('sidebar.main')
+                },
+                {
+                    icon: 'el-icon-lx-copy',
+                    index: '2',
+                    title: this.$t('sidebar.editor'),
+                    subs:[
+                        {
+                            index:'articleListEditor',
+                            title:this.$t('sidebar.editor1')
+                        }
+                    ]
+                },
+                {
+                    icon:'el-icon-s-custom',
+                    index:'3',
+                    title:this.$t('sidebar.reviewer'),
+                    subs:[
+                        {
+                            index:'reviewerApplyList',
+                            title:this.$t('sidebar.reviewer1')
+                        },
+                        {
+                            index:'reviewerList',
+                            title:this.$t('sidebar.reviewer2')
+                        },
+                        {
+                            index:'reviewerImport',
+                            title:this.$t('sidebar.reviewer3')
+                        }
+                    ]
+                }
+            ],
+            admin_items:[
+                {
+                    icon: 'el-icon-lx-home',
+                    index: 'dashboard',
+                    title: this.$t('sidebar.main')
+                },
+                {
+                    icon: 'el-icon-user',
+                    index: '2',
+                    title: this.$t('sidebar.editormanage'),
+                    subs:[
+                        {
+                            index:'editorList',
+                            title:this.$t('sidebar.editormanage1')
+                        },
+                        {
+                            index:'editorAdd',
+                            title:this.$t('sidebar.editormanage2')
+                        }
+                    ]
+                },
+                {
+                    icon:'el-icon-notebook-1',
+                    index:'3',
+                    title:this.$t('sidebar.journal'),
+                    subs:[
+                        {
+                            index:'journalList',
+                            title:this.$t('sidebar.journal1')
+                        },
+                        {
+                            index:'journalAdd',
+                            title:this.$t('sidebar.journal2')
+                        }
+                    ]
+                },
+                {
+                    icon:'el-icon-search',
+                    index:'4',
+                    title:this.$t('sidebar.monitor'),
+                    subs:[
+                        {
+                            index:'monitorManuscript',
+                            title:this.$t('sidebar.monitor1')
+                        },
+                    ]
+
+                }
+                // {
+                //     icon:'el-icon-user-solid',
+                //     index:'4',
+                //     title:this.$t('sidebar.reviewer'),
+                //     subs:[
+                //         {
+                //             index:'adminImportReviewer',
+                //             title:this.$t('sidebar.reviewerimport')
+                //         },
+                //         {
+                //             index:'adminImportreviewerError',
+                //             title:this.$t('sidebar.reviewerimporterror')
+                //         }
+                //     ]
+                // }
+            ],
+            reviewer_items:[
+                {
+                    icon: 'el-icon-lx-home',
+                    index: 'dashboard',
+                    title: this.$t('sidebar.main')
+                },
+                {
+                    icon: 'el-icon-lx-cascades',
+                    index: '1',
+                    title: this.$t('sidebar.author'),
+                    subs:[
+                        {
+                            index:'articleList',
+                            title:this.$t('sidebar.author1')
+                        },
+                        {
+                            index:'articleAdd',
+                            title:this.$t('sidebar.author2')
+                        }
+                    ]
+                },
+                {
+                    icon: 'el-icon-user',
+                    index: '2',
+                    title: this.$t('sidebar.reviewerArticle'),
+                    subs:[
+                        {
+                            index:'reviewerArticleList',
+                            title:this.$t('sidebar.reviewerArticle1')
+                        }
+                    ]
+                }
+
+            ]
+        };
+    },
+    computed: {
+        onRoutes() {
+            return this.$route.path.replace('/', '');
+        }
+    },
+    created() {
+        if(this.userrole==1){
+            this.items = this.author_items;
+        }else if(this.userrole ==2){
+            this.items = this.editor_items;
+        }else if(this.userrole=='admin'){
+            this.items = this.admin_items;
+        }else if(this.userrole=='reviewer'){
+            this.items = this.reviewer_items;
+        }
+        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
+        bus.$on('collapse', msg => {
+            this.collapse = msg;
+            bus.$emit('collapse-content', msg);
+        });
+    }
+};
+</script>
+
+<style scoped>
+.sidebar {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 70px;
+    bottom: 0;
+    overflow-y: scroll;
+}
+.sidebar::-webkit-scrollbar {
+    width: 0;
+}
+.sidebar-el-menu:not(.el-menu--collapse) {
+    width: 250px;
+}
+.sidebar > ul {
+    height: 100%;
+}
+</style>

src/components/common/Tags.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="tags" v-if="showTags">
+        <ul>
+            <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
+                <router-link :to="item.path" class="tags-li-title">
+                    {{item.title}}
+                </router-link>
+                <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
+            </li>
+        </ul>
+        <div class="tags-close-box">
+            <el-dropdown @command="handleTags">
+                <el-button size="mini" type="primary">
+                    {{$t('system.label')}}<i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <el-dropdown-menu size="small" slot="dropdown">
+                    <el-dropdown-item command="other">{{$t('system.labelother')}}</el-dropdown-item>
+                    <el-dropdown-item command="all">{{$t('system.labelall')}}</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div>
+    </div>
+</template>
+
+<script>
+    import bus from './bus';
+    export default {
+        data() {
+            return {
+                tagsList: []
+            }
+        },
+        methods: {
+            isActive(path) {
+                return path === this.$route.fullPath;
+            },
+            // 关闭单个标签
+            closeTags(index) {
+                const delItem = this.tagsList.splice(index, 1)[0];
+                const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
+                if (item) {
+                    delItem.path === this.$route.fullPath && this.$router.push(item.path);
+                }else{
+                    this.$router.push('/');
+                }
+            },
+            // 关闭全部标签
+            closeAll(){
+                this.tagsList = [];
+                this.$router.push('/');
+            },
+            // 关闭其他标签
+            closeOther(){
+                const curItem = this.tagsList.filter(item => {
+                    return item.path === this.$route.fullPath;
+                })
+                this.tagsList = curItem;
+            },
+            // 设置标签
+            setTags(route){
+                const isExist = this.tagsList.some(item => {
+                    return item.path === route.fullPath;
+                })
+                if(!isExist){
+                    if(this.tagsList.length >= 8){
+                        this.tagsList.shift();
+                    }
+                    this.tagsList.push({
+                        title: route.meta.title,
+                        path: route.fullPath,
+                        name: route.matched[1].components.default.name
+                    })
+                }
+                bus.$emit('tags', this.tagsList);
+            },
+            handleTags(command){
+                command === 'other' ? this.closeOther() : this.closeAll();
+            }
+        },
+        computed: {
+            showTags() {
+                return this.tagsList.length > 0;
+            }
+        },
+        watch:{
+            $route(newValue, oldValue){
+                this.setTags(newValue);
+            }
+        },
+        created(){
+            this.setTags(this.$route);
+            // 监听关闭当前页面的标签页
+            bus.$on('close_current_tags', () => {
+                for (let i = 0, len = this.tagsList.length; i < len; i++) {
+                    const item = this.tagsList[i];
+                    if(item.path === this.$route.fullPath){
+                        if(i < len - 1){
+                            this.$router.push(this.tagsList[i+1].path);
+                        }else if(i > 0){
+                            this.$router.push(this.tagsList[i-1].path);
+                        }else{
+                            this.$router.push('/');
+                        }
+                        this.tagsList.splice(i, 1);
+                        break;
+                    }
+                }
+            })
+        }
+    }
+
+</script>
+
+
+<style>
+    .tags {
+        position: relative;
+        height: 30px;
+        overflow: hidden;
+        background: #fff;
+        padding-right: 120px;
+        box-shadow: 0 5px 10px #ddd;
+    }
+
+    .tags ul {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+    }
+
+    .tags-li {
+        float: left;
+        margin: 3px 5px 2px 3px;
+        border-radius: 3px;
+        font-size: 12px;
+        overflow: hidden;
+        cursor: pointer;
+        height: 23px;
+        line-height: 23px;
+        border: 1px solid #e9eaec;
+        background: #fff;
+        padding: 0 5px 0 12px;
+        vertical-align: middle;
+        color: #666;
+        -webkit-transition: all .3s ease-in;
+        -moz-transition: all .3s ease-in;
+        transition: all .3s ease-in;
+    }
+
+    .tags-li:not(.active):hover {
+        background: #f8f8f8;
+    }
+
+    .tags-li.active {
+        color: #fff;
+    }
+
+    .tags-li-title {
+        float: left;
+        max-width: 120px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 5px;
+        color: #666;
+    }
+
+    .tags-li.active .tags-li-title {
+        color: #fff;
+    }
+
+    .tags-close-box {
+        position: absolute;
+        right: 0;
+        top: 0;
+        box-sizing: border-box;
+        padding-top: 1px;
+        text-align: center;
+        width: 110px;
+        height: 30px;
+        background: #fff;
+        box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
+        z-index: 10;
+    }
+
+</style>

src/components/common/bus.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+// 使用 Event Bus
+const bus = new Vue();
+
+export default bus;

src/components/common/common.vue

@@ -0,0 +1,10 @@
+<script>
+  // const baseUrl = '/';
+  // const mediaUrl = 'http://api.tmrjournals.com/public/';
+  const mediaUrl = 'http://www.tougao.com/';
+  const baseUrl = 'http://www.tougao.com/';
+  export default {
+    baseUrl,
+    mediaUrl
+  }
+</script>

src/components/common/directives.js

@@ -0,0 +1,80 @@
+import Vue from 'vue';
+
+// v-dialogDrag: 弹窗拖拽属性
+Vue.directive('dialogDrag', {
+    bind(el, binding, vnode, oldVnode) {
+        const dialogHeaderEl = el.querySelector('.el-dialog__header');
+        const dragDom = el.querySelector('.el-dialog');
+
+        dialogHeaderEl.style.cssText += ';cursor:move;'
+        dragDom.style.cssText += ';top:0px;'
+
+        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+        const sty = (() => {
+            if (window.document.currentStyle) {
+                return (dom, attr) => dom.currentStyle[attr];
+            } else {
+                return (dom, attr) => getComputedStyle(dom, false)[attr];
+            }
+        })()
+
+        dialogHeaderEl.onmousedown = (e) => {
+            // 鼠标按下，计算当前元素距离可视区的距离
+            const disX = e.clientX - dialogHeaderEl.offsetLeft;
+            const disY = e.clientY - dialogHeaderEl.offsetTop;
+
+            const screenWidth = document.body.clientWidth; // body当前宽度
+            const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取) 
+
+            const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
+            const dragDomheight = dragDom.offsetHeight; // 对话框高度
+
+            const minDragDomLeft = dragDom.offsetLeft;
+            const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+
+            const minDragDomTop = dragDom.offsetTop;
+            const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+
+
+            // 获取到的值带px 正则匹配替换
+            let styL = sty(dragDom, 'left');
+            let styT = sty(dragDom, 'top');
+
+            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+            if (styL.includes('%')) {
+                styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
+                styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
+            } else {
+                styL = +styL.replace(/\px/g, '');
+                styT = +styT.replace(/\px/g, '');
+            };
+
+            document.onmousemove = function (e) {
+                // 通过事件委托，计算移动的距离 
+                let left = e.clientX - disX;
+                let top = e.clientY - disY;
+
+                // 边界处理
+                if (-(left) > minDragDomLeft) {
+                    left = -(minDragDomLeft);
+                } else if (left > maxDragDomLeft) {
+                    left = maxDragDomLeft;
+                }
+
+                if (-(top) > minDragDomTop) {
+                    top = -(minDragDomTop);
+                } else if (top > maxDragDomTop) {
+                    top = maxDragDomTop;
+                }
+
+                // 移动当前元素  
+                dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
+            };
+
+            document.onmouseup = function (e) {
+                document.onmousemove = null;
+                document.onmouseup = null;
+            };
+        }
+    }
+})

src/components/common/i18n.js

@@ -0,0 +1,7 @@
+import en from './langs/en';
+import zh from './langs/zh';
+
+export const messages = {
+    'zh': zh,
+    'en': en
+}

src/components/common/langs/en.js

@@ -0,0 +1,68 @@
+const en = {
+
+    system: {
+        title: 'Submission System',
+        repassword:'Forgot your password?',
+        register:'Register now',
+        login:'Log in',
+        forgetpwd:'Find Your Password',
+        screen:'full screen',
+        noscreen:'Cancel full screen',
+        loyout:'Log out',
+        langbtn:'language',
+        label:'Label options',
+        labelother:'close other',
+        labelall:'close all'
+    },
+    total:{
+        author:'author',
+        editor:'editor',
+        reviewers:'reviewer',
+        admin:'admin'
+    },
+    sidebar:{
+        main:'Home Page',
+        author:'Author',
+        author1:'My manuscript',
+        author2:'Submit manuscript',
+        editor:'Editor',
+        editor1:'Manuscript list',
+        editormanage:'Editor Management',
+        editormanage1:'Editor list',
+        editormanage2:'Add editor',
+        journal:'Journal Management',
+        journal1:'Journal list',
+        journal2:'Add journal',
+        reviewer:'Reviewer Management',
+        reviewer1:'Reviewer application list',
+        reviewer2:'Reviewer list',
+        reviewer3:'Reviewer import',
+        reviewer4:'Import error',
+        reviewerArticle:'Reviewer',
+        reviewerArticle1:'Manuscript list',
+        authorApplyReviewer:'Become reviewer',
+        reviewerimport:'Reviewer import',
+        reviewerimporterror:'import error',
+        monitor:'Monitor',
+        monitor1:'Manuscript situation'
+    },
+    home:{
+        authortop:'Author guide',
+        usermsg:'New messages',
+    },
+    artstate:{
+        state0:'Received',
+        state1:'With editor',
+        state2:'Under review',
+        state3:'Reject',
+        state4:'Revision',
+        state5:'Accepted ',
+        act1:'Dealing',
+        act2:'Finished'
+    },
+
+}
+
+ 
+
+export default en;

src/components/common/langs/zh.js

@@ -0,0 +1,68 @@
+const zh = {
+
+    system: {
+        title: '投稿系统',
+        repassword:'忘记密码',
+        register:'注册',
+        login:'登录',
+        forgetpwd:'找回密码',
+        screen:'全屏',
+        noscreen:'取消全屏',
+        loyout:'退出登录',
+        langbtn:'语言选择',
+        label:'标签选项',
+        labelother:'关闭其他',
+        labelall:'关闭所有'
+    },
+    total:{
+        author:'作者',
+        editor:'编辑',
+        reviewers:'审稿人',
+        admin:'管理员'
+    },
+    sidebar:{
+        main:'系统首页',
+        author:'作者',
+        author1:'我的稿件',
+        author2:'新增稿件',
+        editor:'编辑',
+        editor1:'待审稿件',
+        editormanage:'编辑管理',
+        editormanage1:'编辑列表',
+        editormanage2:'添加编辑',
+        journal:'期刊管理',
+        journal1:'期刊列表',
+        journal2:'添加期刊',
+        reviewer:'审稿人管理',
+        reviewer1:'申请列表',
+        reviewer2:'审稿人列表',
+        reviewer3:'审稿人导入',
+        reviewer4:'导入失败列表',
+        reviewerArticle:'审稿人',
+        reviewerArticle1:'待审文章',
+        authorApplyReviewer:'成为审稿人',
+        reviewerimport:'审稿人导入',
+        reviewerimporterror:'导入失败列表',
+        monitor:'总监',
+        monitor1:'稿件情况'
+    },
+    home:{
+        authortop:'用户指南',
+        usermsg:'新消息',
+    },
+    artstate:{
+        state0:'投稿中',
+        state1:'已受理',
+        state2:'送审中',
+        state3:'拒稿',
+        state4:'退修',
+        state5:'接收 ',
+        act1:'审查中',
+        act2:'已完结'
+    },
+
+}
+
+ 
+
+export default zh;

src/components/page/403.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="error-page">
+      <div class="error-code">4<span>0</span>3</div>
+      <div class="error-desc">Ahhh~ You don't have permission to visit this page</div>
+      <div class="error-handle">
+          <router-link to="/">
+            <el-button type="primary" size="large">Back to home page</el-button>
+          </router-link>
+          <el-button class="error-btn" type="primary" size="large" @click="goBack">Back to previous page</el-button>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+      goBack(){
+          this.$router.go(-1);
+      }
+  }
+}
+</script>
+
+
+<style scoped>
+    .error-page{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        background: #f3f3f3;
+        box-sizing: border-box;
+    }
+    .error-code{
+        line-height: 1;
+        font-size: 250px;
+        font-weight: bolder;
+        color: #f02d2d;
+    }
+    .error-code span{
+        color: #00a854;
+    }
+    .error-desc{
+        font-size: 30px;
+        color: #777;
+    }
+    .error-handle{
+        margin-top: 30px;
+        padding-bottom: 200px;
+    }
+    .error-btn{
+        margin-left: 100px;
+    }
+</style>

src/components/page/404.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="error-page">
+      <div class="error-code">4<span>0</span>4</div>
+      <div class="error-desc">Ahhh~ The page you visited doesn't exist</div>
+      <div class="error-handle">
+          <router-link to="/">
+            <el-button type="primary" size="large">Back to home page</el-button>
+          </router-link>
+          <el-button class="error-btn" type="primary" size="large" @click="goBack">Back to previous page</el-button>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+      goBack(){
+          this.$router.go(-1);
+      }
+  }
+}
+</script>
+
+
+<style scoped>
+    .error-page{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        background: #f3f3f3;
+        box-sizing: border-box;
+    }
+    .error-code{
+        line-height: 1;
+        font-size: 250px;
+        font-weight: bolder;
+        color: #2d8cf0;
+    }
+    .error-code span{
+        color: #00a854;
+    }
+    .error-desc{
+        font-size: 30px;
+        color: #777;
+    }
+    .error-handle{
+        margin-top: 30px;
+        padding-bottom: 200px;
+    }
+    .error-btn{
+        margin-left: 100px;
+    }
+</style>

src/components/page/Dashboard.vue

@@ -0,0 +1,176 @@
+<template>
+    <div>
+        <el-row :gutter="20">
+            <el-col :span="10" v-show="userrole=='reviewer'||userrole==1">
+                <el-card shadow="hover">
+                    <div slot="header" class="clearfix">
+                        <span>{{$t('home.authortop')}}</span>
+                    </div>
+                    <div class="top-content">
+                        <span>
+                            <p>Welcome to the TMR Publishing Group online manuscript submission and tracking system.</p>
+                            <p>Please go through our instructions for authors before submitting.</p>
+                            <p><el-link type="primary" href="/articleAdd">Click here</el-link> to submit your manuscript.</p>
+                            <el-divider></el-divider>
+                            <p>If you experience any problems, please contact us by tmr@tmrjournals.com</p>
+                        </span>
+                    </div>
+                    
+                    <!-- <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button> -->
+                </el-card>
+            </el-col>
+            <el-col :span="14">
+                <el-card shadow="hover">
+                    <div slot="header" class="clearfix">
+                        <el-badge 
+                        :value="this.usermsgList.length" 
+                        :hidden="this.usermsgList.length>0?false:true" 
+                        class="item"
+                        >
+                        <span>{{$t('home.usermsg')}}</span>
+                        </el-badge>
+                    </div>
+                    <el-table 
+                    :data="usermsgList" 
+                    border
+                    class="msg-table"
+                    >
+                        <el-table-column label="Date" width="150" :formatter="dateFormate" prop="ctime"></el-table-column>
+                        <el-table-column label="Message" prop="content"></el-table-column>
+                        <el-table-column label="" width="80" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            type="text"
+                            @click="show(scope.row)"
+                        >To See</el-button>
+                    </template>
+                </el-table-column>
+                    </el-table>
+                </el-card>
+            </el-col>
+            <!--<el-col :span="12">
+                 <el-card shadow="hover">
+                    <div>
+                    <span>add article</span>
+                    <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button>
+                    </div>
+                    <div>
+                    <span>add article</span>
+                    <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button>
+                    </div>
+                </el-card> 
+            </el-col>-->
+        </el-row>
+    </div>
+</template>
+
+<script>
+import Schart from 'vue-schart';
+import bus from '../common/bus';
+export default {
+    name: 'dashboard',
+    data() {
+        return {
+            name: localStorage.getItem('ms_username'),
+            userrole: localStorage.getItem('ms_userrole'),
+            userdata: '',
+            usermsgList: []
+        };
+    },
+    created: function () {
+        // this.getUserdata();
+        this.initUserMsg();
+    },
+    components: {
+        Schart
+    },
+    computed: {
+        role() {
+            let frag = 'dads';
+            switch (this.userrole) {
+                case '1':
+                    frag = this.$t('total.author');
+                    break;
+                case '2':
+                    frag = this.$t('total.editor');
+                    break;
+                case 'reviewer':
+                    frag = this.$t('total.reviewers') + ' & ' + this.$t('total.author');
+                    break;
+                case 'admin':
+                    frag = this.$t('total.admin');
+                    break;
+            }
+            return frag;
+        },
+        my_login_time() {
+            return this.formatDate(this.userdata.last_login_time);
+        }
+    },
+    methods: {
+        // getUserdata() {
+        //     this.$api
+        //         .post('api/user/getUserdata', {'account':this.name})
+        //         .then(res=>{
+        //             if(res.code==0){
+        //                 this.userdata = res.data;
+        //             }else{
+        //                 this.$message.error('get userinfo error');
+        //                 console.log('error getuserdata');
+        //             }
+        //         })
+        //         .catch(err=>{
+        //         });
+        // },
+        initUserMsg() {
+            this.$api.post('api/User/getUserMsg', { account: this.name }).then((res) => {
+                this.usermsgList = res;
+            });
+        },
+        dateFormate(row, column, cellValue, index) {
+            return this.formatDate(cellValue);
+        },
+        show(row){
+            this.$api.post('api/User/changeMsgState',{id:row.user_msg_id})
+            .then(res=>{
+                this.initUserMsg();
+                this.$router.push(row.url);
+            });
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+        goaddarticle(){
+            this.$router.push('/articleAdd');
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.msg-table{
+    text-align: center;
+}
+.add-button{
+    display: block;
+    margin: 50px auto;
+}
+.top-content{
+    padding: 2px;
+}
+.top-content span{
+    font-family: Arial, Helvetica, sans-serif;
+    display: block;
+    padding: 2px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+</style>

src/components/page/Login.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="login-wrap">
+        <div class="ms-login">
+            <div class="ms-title">{{$t('system.title')}}</div>
+            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
+                <el-form-item prop="username">
+                    <el-input v-model="param.username" auto-complete="off" placeholder="username">
+                        <i slot="prefix" class="el-icon-lx-people" />
+                        <!-- <el-button slot="prepend" icon="el-icon-lx-people"></el-button> -->
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-input
+                        type="password"
+                        auto-complete="off"
+                        placeholder="password"
+                        v-model="param.password"
+                    >
+                    <i slot="prefix" class="el-icon-lx-lock" />
+                        <!-- <el-button slot="prepend" icon="el-icon-lx-lock"></el-button> -->
+                    </el-input>
+                </el-form-item>
+                <div class="login-btn">
+                    <el-button type="primary" @click="submitForm()">{{$t('system.login')}}</el-button>
+                </div>
+                <el-row style="text-align: center;" >
+                    <el-col :span="12"><el-link :underline="false" type="primary" @click="doRetrieve()">{{$t('system.repassword')}}</el-link></el-col>
+                    <el-col :span="12"><el-link :underline="false" type="primary" @click="doRegister()">{{$t('system.register')}}</el-link></el-col>
+                </el-row>
+                
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function() {
+        return {
+            aa:localStorage.getItem('ms_journal'),
+            param: {
+                username: '',
+                password: ''
+            },
+            rules: {
+                username: [{ required: true, message: 'enter one user name', trigger: 'blur' }],
+                password: [{ required: true, message: 'Please input a password', trigger: 'blur' }]
+            }
+        };
+    },
+    methods: {
+        submitForm() {
+            //登录操作
+            this.$refs.login.validate(valid => {
+                if (valid) {
+                    this.$api
+                        .post('api/user/checkLogin',this.param)
+                        .then(res => {console.log(res);
+                            if(res.code==1){
+                                this.$message.error('Login failed, user name or password error!');
+                                return false;
+                            }else{
+                                this.$message.success('login success');
+                                localStorage.setItem('ms_username', this.param.username);
+                                if(this.param.username=='superadmin'||this.param.username=='wuxiongzhi2'){
+                                    localStorage.setItem('ms_userrole','admin');
+                                }else if(res.userinfo.type==1&&res.userinfo.is_reviewer){
+                                    localStorage.setItem('ms_userrole','reviewer')
+                                }else{
+                                    localStorage.setItem('ms_userrole',res.userinfo.type);
+                                }
+                                this.$router.push('/');
+                            }
+                        })
+                        .catch(err => {
+                            console.log(err);
+                        });
+                } else {
+                    this.$message.error('Please enter the correct account and password');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        doRegister() {
+            //注册页面
+            this.$router.push({ path: '/register' });
+        },
+        doRetrieve() {
+            //找回密码
+            this.$router.push({ path: '/retrieve' });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.login-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url(../../assets/img/login-bg.jpg);
+    background-size: 100%;
+}
+.ms-title {
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 1px solid #ddd;
+}
+.ms-login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+}
+.ms-content {
+    padding: 30px 30px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    font-size: 12px;
+    line-height: 30px;
+    color: #fff;
+}
+</style>

src/components/page/Register.vue

@@ -0,0 +1,303 @@
+<template>
+    <div class="login-wrap">
+        <div class="ms-login">
+            <div class="ms-title">User Register</div>
+            <el-form
+                class="ms-content"
+                :rules="registerRules"
+                ref="registerForm"
+                :model="registerForm"
+                label-width="0"
+            >
+                <!-- 用户名 -->
+                <el-form-item prop="username">
+                    <el-input
+                        size="small"
+                        v-model="registerForm.username"
+                        auto-complete="off"
+                        placeholder="username"
+                    >
+                        <i slot="prefix" class="el-icon-user"></i>
+                    </el-input>
+                </el-form-item>
+                <!-- 密码 -->
+                <el-form-item prop="password">
+                    <el-input
+                        size="small"
+                        v-model="registerForm.password"
+                        auto-complete="off"
+                        placeholder="password"
+                        show-password
+                    >
+                        <i slot="prefix" class="el-icon-lock"></i>
+                    </el-input>
+                </el-form-item>
+                <!-- 姓名 -->
+                <el-form-item prop="name">
+                    <el-input
+                        size="small"
+                        v-model="registerForm.name"
+                        auto-complete="off"
+                        placeholder="realname"
+                    >
+                        <i slot="prefix" class="el-icon-edit-outline"></i>
+                    </el-input>
+                </el-form-item>
+                <!-- 手机 -->
+                <el-form-item prop="phone">
+                    <el-input
+                        size="small"
+                        v-model="registerForm.phone"
+                        auto-complete="off"
+                        placeholder="phone"
+                    >
+                        <i slot="prefix" class="el-icon-mobile-phone" />
+                    </el-input>
+                </el-form-item>
+                <!-- 邮件 -->
+                <el-form-item prop="email">
+                    <el-input
+                        size="small"
+                        v-model="registerForm.email"
+                        auto-complete="off"
+                        placeholder="email"
+                    >
+                        <i slot="prefix" class="el-icon-message"></i>
+                    </el-input>
+                </el-form-item>
+                <!-- ORCID -->
+                <!-- <el-form-item prop="orcid" v-if="registerForm.usertype === '1'">
+                    <el-input
+                        size="small"
+                        v-model="registerForm.orcid"
+                        auto-complete="off"
+                        placeholder="ORCID"
+                    >
+                        <i slot="prefix" class="el-icon-postcard" />
+                    </el-input>
+                </el-form-item> -->
+
+                <!-- 验证码 -->
+                <el-form-item prop="code">
+                    <el-row :span="24">
+                        <el-col :span="16">
+                            <el-input
+                                size="small"
+                                v-model="registerForm.code"
+                                auto-complete="off"
+                                placeholder="captcha"
+                            >
+                                <i slot="prefix" class="el-icon-key" />
+                            </el-input>
+                        </el-col>
+                        <el-col :span="8">
+                            <div class="login-code">
+                                <img
+                                    :src="image"
+                                    @click="refreshCode"
+                                    alt="captcha"
+                                    class="captchaimg"
+                                />
+                            </div>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+                <!-- 按钮 -->
+                <el-row type="flex" justify="center">
+                    <el-col :span="6">
+                        <el-form-item>
+                            <el-button
+                                size="small"
+                                type="primary"
+                                @click.native.prevent="handleRegister"
+                                class="register-submit"
+                            >Register</el-button>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="14"></el-col>
+                    <el-col :span="4">
+                        <el-link :underline="false" type="primary" href="/" class="rebacklogin">Go login</el-link>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            //验证码图片
+            image: '',
+            registerForm: {
+                //用户名
+                username: '',
+                //密码
+                password: '',
+                //姓名
+                name: '',
+                //手机
+                phone: '',
+                //邮件
+                email: '',
+                //ORCID
+                // orcid: '',
+                //验证码的值
+                code: '',
+                //验证码key
+                random_num: 0
+
+            },
+            registerRules: {
+                username: [
+                    {
+                        required: true,
+                        message: 'Please enter your username.',
+                        trigger: 'blur'
+                    }
+                ],
+                password: [
+                    {
+                        required: true,
+                        message: 'Please enter your password.',
+                        trigger: 'blur'
+                    },
+                    {
+                        min: 6,
+                        message: 'The password number cannot be less than 6 characters.',
+                        trigger: 'blur'
+                    }
+                ],
+                name: [
+                    {
+                        required: true,
+                        message: 'Please enter your real name.',
+                        trigger: 'blur'
+                    }
+                ],
+                phone: [
+                    {
+                        required: true,
+                        message: 'Please enter the correct mobile phone number.',
+                        trigger: 'blur'
+                    }
+                ],
+                email: [
+                    {
+                        required: true,
+                        message: 'Please enter your email address.',
+                        trigger: 'blur'
+                    },
+                    {
+                        type: 'email',
+                        message: 'Email address format error（example@gmail.com）.',
+                        trigger: 'blur'
+                    }
+                ],
+                code:[
+                    {
+                        required:true,
+                        message:'Captcha code cannot be empty.',
+                        trigger:'blur'
+                    }
+                ]
+            }
+        };
+    },
+    created: function() {
+        this.getCaptcha();
+    },
+    methods: {
+        refreshCode() {
+            this.getCaptcha();
+        },
+        handleRegister() {
+            this.$refs.registerForm.validate(valid => {
+                if (valid) {
+                    this.$api
+                        .post('api/user/register', this.registerForm)
+                        .then(res => {
+                            if(res == 'existence'){//重复注册
+                                this.$message.error('Failed to register, user name email is occupied!');
+                                return false;
+                            }else if(res == 'errcaptcha'){
+                                this.$message.error('Verification code error!');
+                                return false;
+                            }else{
+                                this.$message.success('register success');
+                                this.$router.push('/');
+                            }
+                        })
+                        .catch(err => {
+                            console.log(err);
+                        });
+                } else {
+                    this.$message.error('The registration information is incorrect. Please check and submit again');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        getCaptcha() {
+            this.registerForm.random_num = Math.random();
+            this.image = this.baseUrl+'api/User/testCaptcha?a=' + this.registerForm.random_num;
+        }
+    }
+};
+</script>
+
+<style scoped>
+.login-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url(../../assets/img/login-bg.jpg);
+    background-size: 100%;
+}
+.ms-title {
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 1px solid #ddd;
+}
+.ms-login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 500px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+}
+.ms-content {
+    padding: 30px 30px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    font-size: 12px;
+    line-height: 30px;
+    color: #fff;
+}
+.register-submit {
+    margin: auto;
+}
+.rebacklogin {
+    padding-top: 13px;
+}
+.captchaimg {
+    margin-top: 2px;
+    margin-left: 8px;
+}
+</style>

src/components/page/Retrieve.vue

@@ -0,0 +1,205 @@
+<template>
+    <div class="login-wrap">
+        <div class="ms-login">
+            <div class="ms-title">{{$t('system.forgetpwd')}}</div>
+            <el-form
+                :model="param"
+                :rules="rules"
+                ref="retrieve"
+                label-width="0px"
+                class="ms-content"
+            >
+                <el-form-item prop="username">
+                    <el-input v-model="param.username" placeholder="username">
+                        <i slot="prefix" class="el-icon-lx-people" />
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="code">
+                    <el-row :span="24">
+                        <el-col :span="16">
+                            <el-input
+                                size="small"
+                                v-model="param.code"
+                                auto-complete="off"
+                                placeholder="captcha"
+                            >
+                                <i slot="prefix" class="el-icon-key" />
+                            </el-input>
+                        </el-col>
+                        <el-col :span="8">
+                            <div class="login-code">
+                                <img
+                                    :src="param.image"
+                                    @click="refreshCode"
+                                    alt="captcha"
+                                    class="captchaimg"
+                                />
+                            </div>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+                <el-row>
+                    <el-col :span="16">
+                        <div class="login-btn">
+                            <el-button type="primary" @click="submitForm">Submit</el-button>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="backlink">
+                            <el-link type="primary" href="/">Go login</el-link>
+                        </div>
+                    </el-col>
+                </el-row>
+                <!--<el-row style="text-align: center; margin-top: -10px;;">
+                    <el-link type="primary">忘记密码</el-link>
+                    <el-link type="primary" @click="doRegister()">用户注册</el-link>
+                </el-row>-->
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            email: '',
+            param: {
+                image: '',
+                username: '',
+                code: '',
+                random_num: ''
+            },
+            rules: {
+                username: [{ required: true, message: 'Please enter your username.', trigger: 'blur' }],
+                code: [{ required: true, message: 'Please enter the captcha.', trigger: 'blur' }]
+            }
+        };
+    },
+    created: function() {
+        this.getCaptcha();
+    },
+    methods: {
+        submitForm() {
+            this.$refs.retrieve.validate(valid => {
+                if (valid) {
+                    this.$api
+                        .post('api/user/retrieveGetEmail', this.param)
+                        .then(res => {
+                            if (res.code == 0) {
+                                this.email = res.email;
+                                this.open();
+                            } else {
+                                this.$message.error(res.msg);
+                                return false;
+                            }
+                        })
+                        .catch(err => {
+                            console.log(err);
+                        });
+                } else {
+                    this.$message.error('请输入正确的账号和密码');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        refreshCode() {
+            this.getCaptcha();
+        },
+        getCaptcha() {
+            this.param.random_num = Math.random();
+            this.param.image = this.baseUrl+'api/User/retrieveCaptcha?a=' + this.param.random_num;
+        },
+        open() {
+            var content = '将有一封邮件发送到您的邮箱：' + this.email + ',后续操作将在邮件内进行。';
+            this.$confirm(content, '确认信息', {
+                distinguishCancelAndClose: true,
+                confirmButtonText: '确认发送',
+                cancelButtonText: '放弃'
+            })
+                .then(() => {
+                    this.$api
+                        .post('api/User/retrievePushEmail', { email: this.email })
+                        .then(res => {
+                            console.log(res);
+                            if (res.code == 0) {
+                                this.$message({
+                                    type: 'success',
+                                    message: '发送成功'
+                                });
+                                this.$router.push('/');
+                            } else {
+                                this.$message({
+                                    type: 'warning',
+                                    message: res.msg
+                                });
+                            }
+                        })
+                        .catch(err => {
+                            console.log(err);
+                        });
+                })
+                .catch(action => {
+                    this.$message({
+                        type: 'info',
+                        message: action === 'cancel' ? '放弃保存并离开页面' : '停留在当前页面'
+                    });
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.login-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url(../../assets/img/login-bg.jpg);
+    background-size: 100%;
+}
+.ms-title {
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 1px solid #ddd;
+}
+.ms-login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+}
+.ms-content {
+    padding: 30px 30px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 40%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    font-size: 12px;
+    line-height: 30px;
+    color: #fff;
+}
+.captchaimg {
+    margin-top: 2px;
+    margin-left: 4px;
+}
+.backlink {
+    text-align: left;
+    padding-top: 12px;
+}
+</style>

src/components/page/Retrieveact.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="login-wrap">
+        <div class="ms-login">
+            <div class="ms-title">修改密码</div>
+            <el-form
+                :model="param"
+                :rules="rules"
+                ref="retrieveact"
+                label-width="0px"
+                class="ms-content"
+            >
+                <el-form-item prop="password">
+                    <el-input v-model="param.password" placeholder="password">
+                        <i slot="prefix" class="el-icon-key" />
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="repassword">
+                    <el-input v-model="param.repassword" placeholder="repassword">
+                        <i slot="prefix" class="el-icon-key" />
+                    </el-input>
+                </el-form-item>
+                <div class="login-btn">
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function() {
+        var validatePass2 = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('Please repeat enter your password'));
+            } else if (value !== this.param.password) {
+                callback(new Error('The two input passwords are inconsistent!'));
+            } else {
+                callback();
+            }
+        };
+        return {
+            param: {
+                actkey: this.$route.query.actkey,
+                password: '',
+                repassword: ''
+            },
+            rules: {
+                password: [{ required: true, message: 'Please enter your password.', trigger: 'blur' }],
+                repassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
+            }
+        };
+    },
+    created: function() {
+        this.check_key();
+    },
+    methods: {
+        check_key() {
+            this.$api
+                .post('api/user/checkActkey', { actkey: this.param.actkey })
+                .then(res => {
+                    if (res.code == 1) {
+                        this.$alert('无效的连接参数', '非法访问', {
+                            confirmButtonText: '确定',
+                            callback: action => {
+                                this.$router.push('/');
+                            }
+                        });
+                    }
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        submitForm() {
+            this.$refs.retrieveact.validate(valid => {
+                if (valid) {
+                    this.$api
+                        .post('api/user/retrieve', this.param)
+                        .then(res => {
+                            if (res.code == 0) {
+                                this.$message({
+                                    type: 'success',
+                                    message: 'success'
+                                });
+                                this.$router.push('/');
+                            } else {
+                                this.$message({
+                                    type: 'info',
+                                    message: res.msg
+                                });
+                            }
+                        })
+                        .catch(err => {
+                            console.log(err);
+                        });
+                } else {
+                    this.$message.error('Please enter the correct account and password.');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.login-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url(../../assets/img/login-bg.jpg);
+    background-size: 100%;
+}
+.ms-title {
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 1px solid #ddd;
+}
+.ms-login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+}
+.ms-content {
+    padding: 30px 30px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 40%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    font-size: 12px;
+    line-height: 30px;
+    color: #fff;
+}
+.captchaimg {
+    margin-top: 2px;
+    margin-left: 4px;
+}
+.backlink {
+    text-align: left;
+    padding-top: 12px;
+}
+</style>

src/components/page/adminImportReviewer.vue

@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-user-solid"></i> Import reviewer
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-form ref="import" :model="upform" label-width="120px">
+                <el-form-item label="journal">
+                    <el-select v-model="upform.journal" placeholder="Please select journal">
+                        <el-option :key="0" label="all journal" :value="0"></el-option>
+                        <el-option
+                            v-for="item in items"
+                            :key="item.journal_id"
+                            :label="item.title"
+                            :value="item.journal_id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="file">
+                    <el-upload
+                        :action="up_url"
+                        name="importExcel"
+                        :on-remove="handleRemove"
+                        accept=".xls, .xlsx"
+                        :before-upload="checkfile"
+                        :limit="1"
+                        :on-exceed="handleExceed"
+                        :on-success="upSuccess"
+                        :on-error="uperror"
+                    >
+                        <el-button size="small" type="primary">upload</el-button>
+                        <div
+                            slot="tip"
+                            class="el-upload__tip"
+                        >Only excel files can be uploaded(.xls,.xlsx)</div>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onsubmit">import</el-button>
+                </el-form-item>
+            </el-form>
+            <el-divider></el-divider>
+            <el-table
+                :data="tabledata"
+                border
+            >
+                <el-table-column  prop="username" label="username" align="center"></el-table-column>
+                <el-table-column  prop="realname" label="realname" align="center"></el-table-column>
+                <el-table-column  prop="email" label="email" align="center"></el-table-column>
+                <el-table-column  prop="gender" label="gender" align="center"></el-table-column>
+                <el-table-column  prop="technical" label="technical" align="center"></el-table-column>
+                <el-table-column  prop="country" label="country" align="center"></el-table-column>
+                <el-table-column  prop="major" label="major" align="center"></el-table-column>
+                <el-table-column  prop="field" label="field" align="center"></el-table-column>
+                <el-table-column  prop="company" label="company" align="center"></el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            upform: {
+                journal: '',
+                url:''
+            },
+            items: [],
+            tabledata:[]
+        };
+    },
+    created() {
+        this.initselect();
+    },
+    computed: {
+        up_url:function(){
+            return this.baseUrl+'api/Admin/up_import';
+        }
+    },
+    methods: {
+        onsubmit(){
+            if(this.upform.journal==''){
+                this.$message.error('please select journal');
+                return false;
+            }
+            this.$api.post('api/Admin/reviewerImport',this.upform)
+            .then(res=>{
+                console.log(res);
+            });
+        },
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal')
+                .then((res) => {
+                    this.items = res;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //移除文件
+        handleRemove() {},
+        //审查文件
+        checkfile(file) {
+            let isslx =
+                file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+                file.type === 'application/vnd.ms-excel';
+            if (!isslx) {
+                this.$message.error('Only excel files can be uploaded(.xls,.xlsx)');
+            }
+            return isslx;
+        },
+        uperror(err){
+            this.$message.error(err);
+        },
+        handleExceed() {
+            this.$message.error('limit one file');
+        },
+        //文件上传成功后的操作
+        upSuccess(res, file) {
+            if (res.code == 0) {
+                this.upform.url = 'reviewer/import/'+res.upurl;
+                this.gettables();
+            } else {
+                this.$message.error('service error' + res.msg);
+            }
+        },
+        //获取table数据
+        gettables(){
+            this.$api.post('api/Admin/getExcelData',this.upform)
+            .then(res=>{
+                this.tabledata = res;
+            });
+        }
+    }
+};
+</script>
+
+<style lang="stylus" scoped></style>

src/components/page/adminImportreviewerError.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        {{mytest}}
+    </div>
+</template>
+
+<script>
+export default {
+    data:function(){
+        return{
+            aaa:'dddd'
+        }
+    },
+    computed: {
+        mytest(){
+            return 'ddsadsa';
+        }
+    },
+}
+</script>

src/components/page/articleAdd.vue

@@ -0,0 +1,631 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> Add manuscirpt </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="addarticle-box" v-loading="loading">
+                <el-form ref="articleform" :model="form" :rules="rules" label-width="120px">
+                    <el-form-item label="Journal" prop="journal">
+                        <el-select v-model="form.journal" placeholder="Please select">
+                            <el-option
+                                v-for="item in items"
+                                :key="item.journal_id"
+                                :label="item.title"
+                                :value="item.journal_id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="Title" prop="title">
+                        <el-input v-model="form.title" placeholder="Title"></el-input>
+                    </el-form-item>
+                    <el-form-item label="Major" :required="true">
+                        <el-row>
+                            <el-col :span="8">
+                                <el-select v-model="form.major" placeholder="Please select" @change="majorChange()">
+                                    <el-option
+                                        v-for="item in majors"
+                                        :key="item.major_id"
+                                        :label="item.title"
+                                        :value="item.major_id"
+                                    ></el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-select v-model="form.cmajor" placeholder="Please select">
+                                    <el-option
+                                        v-for="item in cmajors"
+                                        :key="item.major_id"
+                                        :label="item.title"
+                                        :value="item.major_id"
+                                    ></el-option>
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                    <el-form-item label="Type" prop="type">
+                        <el-select v-model="form.type" placeholder="Please select">
+                            <el-option key="A" label="Article" value="A"></el-option>
+                            <el-option key="B" label="Review" value="B"></el-option>
+                            <el-option key="C" label="Case report" value="C"></el-option>
+                            <el-option key="M" label="Meta-analysis" value="M"></el-option>
+                            <el-option key="P" label="Research proposal" value="P"></el-option>
+                            <el-option key="N" label="News" value="N"></el-option>
+                            <el-option key="T" label="Comment" value="T"></el-option>
+                            <el-option key="O" label="Others" value="O"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="Ethical Approval" v-show="form.type == 'A'">
+                        <el-switch v-model="form.approval" active-text="yes" inactive-text="no"></el-switch>
+                    </el-form-item>
+                    <el-form-item label="Author" :required="true">
+                        <p class="zyfont">
+                            The number of both (First Author and Corresponding Author) should be no more than two respectively.
+                        </p>
+                        <el-collapse v-model="activeNames">
+                            <!-- <el-collapse> -->
+                            <el-collapse-item v-for="(item, index) in form.authorList" :key="index" :name="index + 1">
+                                <template slot="title"
+                                    >Author {{ index + 1 }} :{{ item.firstname }} {{ item.lastname }} {{ item.isSuper ? '#' : ''
+                                    }}{{ item.isReport ? '*' : '' }}</template
+                                >
+                                <el-form-item label="E-mail:" label-width="100px">
+                                    <el-input v-model="item.email" placeholder="E-mail" style="width: 300px"></el-input>
+                                </el-form-item>
+                                <el-form-item label="Name:" label-width="100px">
+                                    <el-row>
+                                        <el-col :span="8">
+                                            <el-input v-model="item.firstname" placeholder="First name"></el-input>
+                                        </el-col>
+                                        <el-col :span="8" :offset="1">
+                                            <el-input v-model="item.lastname" placeholder="Last name"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                                <el-form-item label="First author:" label-width="100px">
+                                    <el-switch v-model="item.isSuper" active-text="yes" inactive-text="no"></el-switch>
+                                </el-form-item>
+                                <el-form-item label="Corresponding author:" label-width="160px">
+                                    <el-switch v-model="item.isReport" active-text="yes" inactive-text="no"></el-switch>
+                                </el-form-item>
+                                <el-form-item label="Address" label-width="100px" v-show="item.isReport">
+                                    <el-input v-model="item.address" placeholder="Address"></el-input>
+                                </el-form-item>
+                                <el-form-item label="Institution:" label-width="100px">
+                                    <el-input autosize type="textarea" v-model="item.company" placeholder="Institution"></el-input>
+                                </el-form-item>
+                                <el-form-item label="Department:" label-width="100px">
+                                    <el-input v-model="item.department" placeholder="Department"></el-input>
+                                </el-form-item>
+                                <el-form-item label="Title:" label-width="100px">
+                                    <el-select v-model="item.title" placeholder="Please select">
+                                        <el-option key="Prof." label="Prof." value="Prof."></el-option>
+                                        <el-option key="Associate Prof." label="Associate Prof." value="Associate Prof."></el-option>
+                                        <el-option key="Assistant Prof." label="Assistant Prof." value="Assistant Prof."></el-option>
+                                        <el-option key="Ph.D." label="Ph.D." value="Ph.D."></el-option>
+                                        <el-option key="Others" label="Others" value="Others"></el-option>
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item label="Country:" label-width="100px">
+                                    <el-select v-model="item.country" placeholder="Please select">
+                                        <el-option
+                                            v-for="it in countrys"
+                                            :key="it.en_name"
+                                            :label="it.en_name"
+                                            :value="it.en_name"
+                                        ></el-option>
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item label="Delete:" label-width="100px">
+                                    <el-button @click="deleteAuthor(item, index)" type="text" style="color: red"
+                                        >delete the author</el-button
+                                    >
+                                </el-form-item>
+                            </el-collapse-item>
+                        </el-collapse>
+                        <el-button @click="addAuthor" type="text">
+                            <i class="el-icon-circle-plus-outline">Add author</i>
+                        </el-button>
+                    </el-form-item>
+                    <el-form-item label="Abstrart">
+                        <el-input type="textarea" rows="5" v-model="form.abstrart" placeholder="Description information"></el-input>
+                    </el-form-item>
+                    <el-form-item label="Key words">
+                        <el-input
+                            v-for="(item, index) in keywordsList"
+                            :key="index"
+                            :name="index + 1"
+                            v-model="item.ke"
+                            :placeholder="'Key words' + (index + 1)"
+                            style="width: 110px; margin-right: 3px; margin-bottom: 3px"
+                        ></el-input>
+                        <el-button type="text" style="margin-left: 5px" @click="addfund">
+                            <i class="el-icon-circle-plus-outline">Add</i>
+                        </el-button>
+                    </el-form-item>
+                    <el-form-item label="Fund">
+                        <el-input v-model="form.fund" placeholder="Fund"></el-input>
+                    </el-form-item>
+                    <el-form-item label="Cover letter">
+                        <el-upload
+                            class="upload-demo"
+                            :action="upload_coverLetter"
+                            accept=".pdf, .doc, .docx"
+                            name="coverLetter"
+                            :before-upload="beforeupload_coverLetter"
+                            :on-error="uperr_coverLetter"
+                            :on-success="upSuccess_coverLetter"
+                            :limit="1"
+                            :on-exceed="alertlimit"
+                            :on-remove="removefilecoverLetter"
+                        >
+                            <div class="el-upload__text">
+                                <em>click upload</em>
+                            </div>
+                            <div class="el-upload__tip" slot="tip">Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
+                        </el-upload>
+                    </el-form-item>
+                    <el-form-item label="Figures">
+                        <el-upload
+                            class="upload-demo"
+                            :action="upload_picturesAndTables"
+                            accept=".jpg, .png, .rar, .zip"
+                            name="picturesAndTables"
+                            :before-upload="beforeupload_picturesAndTables"
+                            :on-error="uperr_coverLetter"
+                            :on-success="upSuccess_picturesAndTables"
+                            :limit="30"
+                            :on-exceed="alertlimit"
+                            :on-remove="removefilepicturesAndTables"
+                        >
+                            <div class="el-upload__text">
+                                <em>click upload</em>
+                            </div>
+                            <div class="el-upload__tip" slot="tip">Only compressed files can be uploaded(.rar,.zip)</div>
+                        </el-upload>
+                    </el-form-item>
+                    <el-form-item label="Title page">
+                        <el-upload
+                            class="upload-demo"
+                            :action="upload_totalpage"
+                            accept=".doc, .docx"
+                            name="totalpage"
+                            :before-upload="beforeupload_totalpage"
+                            :on-error="uperr_coverLetter"
+                            :on-success="upSuccess_totalpage"
+                            :limit="1"
+                            :on-exceed="alertlimit"
+                            :on-remove="removefiletotalpage"
+                        >
+                            <div class="el-upload__text">
+                                <em>click upload</em>
+                            </div>
+                            <div class="el-upload__tip" slot="tip">Only word files can be uploaded(.doc,.docx)</div>
+                        </el-upload>
+                    </el-form-item>
+                    <el-form-item label="Manuscirpt">
+                        <p class="zyfont" style="color: red">
+                            Please do not include identifying information in your main manuscript as this must remain blinded.
+                        </p>
+                        <el-upload
+                            class="upload-demo"
+                            :action="upload_manuscirpt"
+                            accept=".doc, .docx, .rar, .zip"
+                            name="manuscirpt"
+                            :before-upload="beforeupload_manuscirpt"
+                            :on-error="uperr_coverLetter"
+                            :on-success="upSuccess_manuscirpt"
+                            :limit="1"
+                            :on-exceed="alertlimit"
+                            :on-remove="removefilemanuscirpt"
+                        >
+                            <div class="el-upload__text">
+                                <em>click upload</em>
+                            </div>
+                            <div class="el-upload__tip" slot="tip">
+                                Only word and compressed files can be uploaded(.doc,.docx,.rar,.zip)
+                            </div>
+                        </el-upload>
+                    </el-form-item>
+                    <el-form-item label="Co-submission">
+                        <p class="zyfont">Co-submitting Papers to TMR Publishing Group Journals</p>
+                        <p class="zyfont">
+                            We know it can be time consuming to serially submit your paper to multiple journals, restarting the review
+                            process each time.
+                        </p>
+                        <p class="tffont">
+                            TMR Publishing Group publishes many journals, and we give you the opportunity to Co-submitting your paper. If
+                            your manuscript is not considered suitable for the first journal, the manuscript transfer can be executed
+                            automatically following your choose in order along with the reviews and the reviewers' identities (cascading
+                            peer-review) from one journal to another. Please pay attention, you could only choose 3 journals totally.
+                        </p>
+                        <p class="zyfont">
+                            If you have questions about the Co-submission process, please contact publisher@tmrjournals.com.
+                        </p>
+                        <el-switch v-model="form.istransfer" active-text="yes" inactive-text="no"></el-switch>
+                    </el-form-item>
+                    <el-form-item label="Journals" v-show="form.istransfer">
+                        <p class="zyfont">1:{{ getjournalbyid(form.journal) }}</p>
+                        <p class="zyfont" v-for="(cjou, index) in form.checkedjours" :key="index">
+                            {{ index + 2 }}:{{ getjournalbyid(cjou) }}
+                        </p>
+                        <el-checkbox-group v-model="form.checkedjours" :max="2">
+                            <el-checkbox
+                                v-for="jour in items"
+                                :label="jour.journal_id"
+                                :disabled="jour.journal_id == form.journal"
+                                :key="jour.journal_id"
+                                >{{ jour.title }}</el-checkbox
+                            >
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-checkbox v-model="agreechecked">I accept </el-checkbox><el-link @click="licensebox=true" type="primary" style="padding-left: 5px"> the license agreement</el-link>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-col :offset="4">
+                            <el-button type="primary" @click="onSubmit">Submit</el-button>
+                        </el-col>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+        <el-dialog title="" :visible.sync="licensebox" width="30%">
+            <span style="word-wrap:break-word; word-break:normal; ">
+                Creative Commons Licensing<br> 
+                TMR Publishing Group provides authors the choice of applying the Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) licenses defined below, to be determined after acceptance:<br>
+                Attribution: CC BY-NC 4.0<br>
+                This license lets others distribute, remix, tweak, and build upon your work. They can not use the material for commercial purposes. 
+            </span>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="licensebox = false">close</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            items: [],
+            licensebox:false,
+            agreechecked:false,
+            loading: false,
+            form: {
+                journal: localStorage.getItem('ms_journal_alias') ? parseInt(localStorage.getItem('ms_journal_alias')) : 1,
+                username: localStorage.getItem('ms_username'),
+                title: '',
+                major: '',
+                cmajor: '',
+                authorList: [
+                    {
+                        firstname: '',
+                        lastname: '',
+                        company: '',
+                        department: '',
+                        title: '',
+                        country: '',
+                        email: '',
+                        address: '',
+                        isSuper: false,
+                        isReport: false
+                    }
+                ],
+                checkedjours: [],
+                abstrart: '',
+                type: '',
+                approval: false,
+                istransfer: false,
+                keyWords: '',
+                fund: '',
+                coverLetter: '',
+                picturesAndTables: [],
+                totalpage: '',
+                manuscirpt: ''
+            },
+            rules: {
+                journal: [{ required: true, message: 'Please select Journal', trigger: 'blur' }],
+                title: [{ required: true, message: 'Please enter a title', trigger: 'blur' }],
+                type: [{ required: true, message: 'Please enter a title', trigger: 'blur' }],
+                abstrart: [{ required: true, message: 'Please enter a description', trigger: 'blur' }],
+                keyWords: [{ required: true, message: 'Please enter keywords', trigger: 'blur' }],
+                fund: [{ required: true, message: 'Please input fund', trigger: 'blur' }]
+            },
+            activeNames: [1],
+            keywordsList: [{ ke: '' }],
+            majors: [],
+            cmajors: [],
+            countrys: []
+        };
+    },
+    created: function () {
+        this.initselect();
+        this.initCountrys();
+        this.initMajor();
+    },
+    computed: {
+        upload_coverLetter: function () {
+            return this.baseUrl + 'api/Article/up_file/type/coverLetter';
+        },
+        upload_picturesAndTables: function () {
+            return this.baseUrl + 'api/Article/up_file/type/picturesAndTables';
+        },
+        upload_totalpage: function () {
+            return this.baseUrl + 'api/Article/up_file/type/totalpage';
+        },
+        upload_manuscirpt: function () {
+            return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
+        }
+    },
+    methods: {
+        onSubmit() {
+            if(!this.agreechecked){
+                this.$message.error('Dear author, the licenses need to be accecpted before you submit the manuscript. You could find more information in http://creativecommons.org/licenses/by/4.0/');
+                return false;
+            }
+            this.$refs.articleform.validate((valid) => {
+                //验证文档
+                if (this.form.manuscirpt == '') {
+                    this.$message.error('Manuscirpt is required');
+                    console.log('file up error');
+                    return false;
+                }
+                //验证作者
+                let authorlist = this.form.authorList;
+                let Firsta = 0;
+                let Corra = 0;
+                if (authorlist.length == 0) {
+                    this.$message.error('Author is required');
+                    return false;
+                }
+                for (var kk in authorlist) {
+                    if (authorlist[kk].isReport && authorlist[kk].address == '') {
+                        this.$message.error('Address is necessary for corresponding author');
+                        return false;
+                    }
+                    if (authorlist[kk].isReport) {
+                        Corra++;
+                    }
+                    if (authorlist[kk].isSuper) {
+                        Firsta++;
+                    }
+                }
+                if (Firsta == 0 || Corra == 0) {
+                    this.$message.error('First author and corresponding author must be exist');
+                    return false;
+                }
+                //验证文章领域
+                if (this.form.major == '' || this.form.cmajor == '') {
+                    this.$message.error('Major is required');
+                    return false;
+                }
+                //验证选择转投但没选期刊项的情况
+                if (this.form.istransfer && this.form.checkedjours.length == 0) {
+                    this.$message.error('If you chose co-submission, you need to select at least one journal.');
+                    return false;
+                }
+
+                //keywords转化
+                var flist = this.keywordsList;
+                var fstr = '';
+                for (var fu in flist) {
+                    if (flist[fu].ke != '') {
+                        fstr += flist[fu].ke.trim() + ',';
+                    }
+                }
+                this.form.keyWords = fstr == '' ? '' : fstr.substring(0, fstr.length - 1);
+                if (valid) {
+                    this.loading = true;
+                    this.$api
+                        .post('api/Article/addArticle', this.form)
+                        .then((res) => {
+                            console.log(res);
+                            this.loading = false;
+                            if (res.code == 0) {
+                                this.$message.success('Success');
+                                this.$router.push('/articleList');
+                            } else {
+                                this.$message.error('Failed to submit, please contact administrator!');
+                                console.log(res.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            console.log(err);
+                        });
+                } else {
+                    this.$message.error('Failed to submit. Please ensure the integrity of the information');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        addAuthor() {
+            this.form.authorList.push({
+                firstname: '',
+                lastname: '',
+                company: '',
+                department: '',
+                title: '',
+                country: '',
+                email: '',
+                address: '',
+                isSuper: false,
+                isReport: false
+            });
+        },
+        addfund() {
+            this.keywordsList.push({
+                fun: ''
+            });
+        },
+        deleteAuthor(item, index) {
+            this.form.authorList.splice(index, 1);
+        },
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal')
+                .then((res) => {
+                    this.items = res;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        open() {
+            let str =
+                'Creative Commons Licensing<br> Medicine provides authors the choice of applying the Creative Commons 4.0 licenses defined below, to be determined after acceptance:<br>Attribution: CC-BY<br>This license lets others distribute, remix, tweak, and build upon your work, even commercially, if they credit you for the original creation. <br>This is the most accommodating of licenses offered.';
+            this.$alert(str, '', {
+                confirmButtonText: 'ok'
+            });
+        },
+        initCountrys() {
+            this.$api.post('api/Admin/getCountrys').then((res) => {
+                this.countrys = res;
+            });
+        },
+        initMajor() {
+            this.$api.post('api/Admin/getMajor').then((res) => {
+                this.majors = res.data;
+            });
+        },
+        majorChange() {
+            let majorid = this.form.major;
+            this.$api.post('api/Admin/majorChild', { majorid: majorid }).then((res) => {
+                this.cmajors = res.data;
+                this.form.cmajor = res.data[0].major_id;
+            });
+        },
+        getjournalbyid(jid) {
+            var list = this.items;
+            for (var i in list) {
+                if (list[i].journal_id == jid) {
+                    return list[i].title;
+                }
+            }
+        },
+        uperr_coverLetter(err) {
+            this.$message.error('Upload error');
+        },
+        //检验上传文件的格式
+        beforeupload_coverLetter(file) {
+            // const isWORd =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/pdf' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+            // if (!isWORd) {
+            //     this.$message.error('Only word and pdf files can be uploaded(.pdf,.doc,.docx)');
+            // }
+            // return isWORd;
+        },
+        beforeupload_picturesAndTables(file) {
+            // const iszip =
+            //     file.type === 'application/x-zip-compressed' ||
+            //     file.name.split('.')[1] === 'rar';
+            // if (!iszip) {
+            //     this.$message.error('Only compressed files can be uploaded(.rar,.zip)');
+            // }
+            // return iszip;
+        },
+        beforeupload_totalpage(file) {},
+        beforeupload_manuscirpt(file) {
+            // const ismau =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
+            //     file.type === 'application/x-zip-compressed' ||
+            //     file.name.split('.')[1] === 'rar';
+            // if (!ismau) {
+            //     this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
+            // }
+            // return ismau;
+        },
+        //文件上传成功后的操作
+        upSuccess_coverLetter(res, file) {
+            if (res.code == 0) {
+                this.form.coverLetter = 'coverLetter/' + res.upurl;
+            } else {
+                this.$message.error('service error：' + res.msg);
+            }
+        },
+        upSuccess_picturesAndTables(res, file, fileList) {
+            this.form.picturesAndTables = [];
+            for (var ii in fileList) {
+                var url = fileList[ii].response.upurl;
+                this.form.picturesAndTables.push('picturesAndTables/' + url);
+            }
+        },
+        upSuccess_totalpage(res, file) {
+            if (res.code == 0) {
+                this.form.totalpage = 'totalpage/' + res.upurl;
+            } else {
+                this.$message.error('service error：' + res.msg);
+            }
+        },
+        upSuccess_manuscirpt(res, file) {
+            if (res.code == 0) {
+                this.form.manuscirpt = 'manuscirpt/' + res.upurl;
+            } else {
+                this.$message.error('service error：' + res.msg);
+            }
+        },
+        //超出传送文件个数限制
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        },
+        //清除文件时的事件
+        removefilecoverLetter(file, fileList) {
+            this.form.coverLetter = '';
+        },
+        removefilepicturesAndTables(file, fileList) {
+            this.form.picturesAndTables = [];
+            for (var ii in fileList) {
+                var url = fileList[ii].response.upurl;
+                this.form.picturesAndTables.push('picturesAndTables/' + url);
+            }
+        },
+        removefiletotalpage(file, fileList) {
+            this.form.totalpage = '';
+        },
+        removefilemanuscirpt(file, fileList) {
+            this.form.manuscirpt = '';
+        },
+        getOpState(index) {
+            let a = this.activeNames.indexOf(index) > -1 ? 'Close' : 'Open';
+        },
+        checkfiletype(file) {}
+    }
+};
+</script>
+
+<style scoped>
+.author-box {
+    width: 150%;
+}
+.author-box .el-row {
+    margin-bottom: 5px;
+}
+.author-box .author-title {
+    color: #969595;
+    text-align: center;
+    background-color: #eceaea;
+}
+.author-box .author-delete {
+    text-align: center;
+}
+.author-box .author-delete i {
+    color: red;
+}
+.zyfont {
+    font-size: 10px;
+    color: rgb(133, 131, 131);
+}
+.tffont {
+    font-size: 10px;
+    line-height: 1.5;
+    color: rgb(133, 131, 131);
+}
+</style>

src/components/page/articleDetail.vue

@@ -0,0 +1,837 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> Manuscript detail </el-breadcrumb-item>
+                <el-breadcrumb-item>Manuscript detail</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container" v-if="transque">
+            <div class="top-content">
+                <span>
+                    <p>
+                        I am writing just to follow up on the suggestion from the editor of {{ form.journalname }} that you might be
+                        interested in submitting your paper to {{ transinfo.jourtitle }} instead.<br /><br />
+                    </p>
+                    <p>
+                        If you choose to pursue publication in {{ transinfo.jourtitle }},
+                        <el-link type="primary" @click="quetrans()">please click here</el-link>.
+                    </p>
+                </span>
+            </div>
+        </div>
+        <div class="container" v-else>
+            <el-row>
+                <el-col :span="16">
+                    <div class="form-box" v-loading="loading">
+                        <el-form ref="articleform" :model="form" :rules="rules" label-width="110px">
+                            <el-form-item label="Suggest" v-show="this.form.state == 4 ? true : false">
+                                <el-card class="box-card" 
+                                    v-for="(item, index) in suggest"
+                                    :key="index"
+                                >
+                                    <div slot="header" class="clearfix">
+                                        <span>Reviewer suggest{{index+1}}</span>
+                                        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
+                                    </div>
+                                    <div>
+                                        {{item.comments}}
+                                    </div>
+                                </el-card>
+                            </el-form-item>
+                            <el-form-item label="Status">
+                                <span>{{ articleState }}</span>
+                            </el-form-item>
+                            <el-form-item v-if="form.accept_sn != ''" label="Manuscript ID">
+                                <span>{{ form.accept_sn }}</span>
+                            </el-form-item>
+                            <!-- <el-form-item v-if="suggest != ''" label="Suggest">
+                                <span>{{suggest}}</span>
+                            </el-form-item> -->
+                            <el-form-item label="Journal">
+                                <span>{{ form.journalname }}</span>
+                            </el-form-item>
+                            <el-form-item label="Title">
+                                <span>{{ form.title }}</span>
+                            </el-form-item>
+                            <el-form-item label="Type">
+                                <span>{{ myType }}</span>
+                            </el-form-item>
+                            <el-form-item label="Major">
+                                <el-row>
+                                    <el-col :span="8">{{ form.major }}</el-col>
+                                    <el-col :span="16">{{ form.cmajor }}</el-col>
+                                </el-row>
+                            </el-form-item>
+                            <el-form-item label="Ethical Approval" v-show="form.type == 'A'">
+                                <span>{{ form.approval ? 'yes' : 'no' }}</span>
+                            </el-form-item>
+                            <el-form-item label="Author" :required="true">
+                                <p class="zyfont">The number of first authors and corresponding authors both be limited in two.</p>
+                                <el-collapse>
+                                    <el-collapse-item v-for="(item, index) in form.authorList" :key="index" :name="index + 1">
+                                        <template slot="title"
+                                            >Author {{ index + 1 }} :{{ item.firstname }} {{ item.lastname }} {{ item.isSuper ? '#' : ''
+                                            }}{{ item.isReport ? '*' : '' }}</template
+                                        >
+                                        <el-form-item label="E-mail:" label-width="100px">
+                                            <el-input v-model="item.email" placeholder="E-mail" style="width: 300px"></el-input>
+                                        </el-form-item>
+                                        <el-form-item label="Name:" label-width="100px">
+                                            <el-row>
+                                                <el-col :span="8">
+                                                    <el-input v-model="item.firstname" placeholder="First name"></el-input>
+                                                </el-col>
+                                                <el-col :span="8" :offset="1">
+                                                    <el-input v-model="item.lastname" placeholder="Last name"></el-input>
+                                                </el-col>
+                                            </el-row>
+                                        </el-form-item>
+                                        <el-form-item label="First author:" label-width="100px">
+                                            <el-switch v-model="item.isSuper" active-text="yes" inactive-text="no"></el-switch>
+                                        </el-form-item>
+                                        <el-form-item label="Corresponding Author:" label-width="160px">
+                                            <el-switch v-model="item.isReport" active-text="yes" inactive-text="no"></el-switch>
+                                        </el-form-item>
+                                        <el-form-item label="Address" label-width="100px" v-show="item.isReport">
+                                            <el-input v-model="item.address" placeholder="Address"></el-input>
+                                        </el-form-item>
+                                        <el-form-item label="Institution:" label-width="100px">
+                                            <el-input autosize type="textarea" v-model="item.company" placeholder="Institution"></el-input>
+                                        </el-form-item>
+                                        <el-form-item label="Department:" label-width="100px">
+                                            <el-input v-model="item.department" placeholder="Department"></el-input>
+                                        </el-form-item>
+                                        <el-form-item label="Title:" label-width="100px">
+                                            <el-select v-model="item.title" placeholder="Please select">
+                                                <el-option key="Prof." label="Prof." value="Prof."></el-option>
+                                                <el-option
+                                                    key="Associate Prof."
+                                                    label="Associate Prof."
+                                                    value="Associate Prof."
+                                                ></el-option>
+                                                <el-option
+                                                    key="Assistant Prof."
+                                                    label="Assistant Prof."
+                                                    value="Assistant Prof."
+                                                ></el-option>
+                                                <el-option key="Ph.D." label="Ph.D." value="Ph.D."></el-option>
+                                                <el-option key="Others" label="Others" value="Others"></el-option>
+                                            </el-select>
+                                        </el-form-item>
+                                        <el-form-item label="Country:" label-width="100px">
+                                            <el-select v-model="item.country" placeholder="Please select">
+                                                <el-option
+                                                    v-for="it in countrys"
+                                                    :key="it.en_name"
+                                                    :label="it.en_name"
+                                                    :value="it.en_name"
+                                                ></el-option>
+                                            </el-select>
+                                        </el-form-item>
+                                        <el-form-item label="Delete:" label-width="100px">
+                                            <!-- <el-button
+                                                @click="deleteAuthor(item, index)"
+                                                type="text"
+                                                style="color:red"
+                                            >delete the author</el-button> -->
+                                        </el-form-item>
+                                    </el-collapse-item>
+                                </el-collapse>
+                                <el-button @click="addAuthor" type="text" v-show="this.form.state == 4 ? true : false">
+                                    <i class="el-icon-circle-plus-outline">Add author</i>
+                                </el-button>
+                            </el-form-item>
+                            <el-form-item label="Abstrart">
+                                <el-input type="textarea" rows="5" v-model="form.abstrart" placeholder="Description information"></el-input>
+                            </el-form-item>
+                            <el-form-item label="Key words">
+                                <el-input v-model="form.keyWords" placeholder="keyword1,keyword2"></el-input>
+                            </el-form-item>
+                            <el-form-item label="Fund">
+                                <el-input v-model="form.fund" placeholder="fund"></el-input>
+                            </el-form-item>
+                            <el-form-item label="Cover letter">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="coverLetterFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column width="100" property="username" align="center" label="Uploader"></el-table-column>
+                                        <el-table-column width="100" label="download" align="center">
+                                            <template slot-scope="scope">
+                                                <el-link type="primary" icon="el-icon-download" :href="getlinkurl(scope.row)"></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button class="more_btn" icon="el-icon-download" type="text" slot="reference">Download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    v-show="this.form.state == 4 ? true : false"
+                                    class="upload-demo"
+                                    :action="upload_coverLetter"
+                                    accept=".pdf, .doc, .docx"
+                                    name="coverLetter"
+                                    :before-upload="beforeupload_coverLetter"
+                                    :on-error="uperr_coverLetter"
+                                    :on-success="upSuccess_coverLetter"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilecoverLetter"
+                                >
+                                    <div class="el-upload__text">
+                                        <em>Re upload</em>
+                                    </div>
+                                    <div class="el-upload__tip" slot="tip">Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
+                                </el-upload>
+                            </el-form-item>
+                            <el-form-item label="Figures">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="picturesAndTablesFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column width="100" property="username" align="center" label="Uploader"></el-table-column>
+                                        <el-table-column width="100" label="download" align="center">
+                                            <template slot-scope="scope">
+                                                <el-link type="primary" icon="el-icon-download" :href="getlinkurl(scope.row)"></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button class="more_btn" icon="el-icon-download" type="text" slot="reference">Download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    v-show="this.form.state == 4 ? true : false"
+                                    class="upload-demo"
+                                    :action="upload_picturesAndTables"
+                                    accept=".jpg, .png, .rar, .zip"
+                                    name="picturesAndTables"
+                                    :before-upload="beforeupload_picturesAndTables"
+                                    :on-error="uperr_coverLetter"
+                                    :on-success="upSuccess_picturesAndTables"
+                                    :limit="30"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilepicturesAndTables"
+                                >
+                                    <div class="el-upload__text">
+                                        <em>Re upload</em>
+                                    </div>
+                                    <div class="el-upload__tip" slot="tip">Only compressed files can be uploaded(.rar,.zip)</div>
+                                </el-upload>
+                            </el-form-item>
+                            <el-form-item label="Title page">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="totalpageFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column width="100" property="username" align="center" label="Uploader"></el-table-column>
+                                        <el-table-column width="100" label="download" align="center">
+                                            <template slot-scope="scope">
+                                                <el-link type="primary" icon="el-icon-download" :href="getlinkurl(scope.row)"></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button class="more_btn" icon="el-icon-download" type="text" slot="reference">Download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    v-show="this.form.state == 4 ? true : false"
+                                    class="upload-demo"
+                                    :action="upload_totalpage"
+                                    accept=".doc, .docx, .rar, .zip"
+                                    name="totalpage"
+                                    :before-upload="beforeupload_totalpage"
+                                    :on-error="uperr_coverLetter"
+                                    :on-success="upSuccess_totalpage"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefiletotalpage"
+                                >
+                                    <div class="el-upload__text">
+                                        <em>Re upload</em>
+                                    </div>
+                                    <div class="el-upload__tip" slot="tip">Only word and compressed files(.doc,.docx,.rar,.zip)</div>
+                                </el-upload>
+                            </el-form-item>
+                            <el-form-item label="Manuscirpt">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="manuscirptFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column width="100" property="username" align="center" label="Uploader"></el-table-column>
+                                        <el-table-column width="100" label="download" align="center">
+                                            <template slot-scope="scope">
+                                                <el-link type="primary" icon="el-icon-download" :href="getlinkurl(scope.row)"></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button class="more_btn" icon="el-icon-download" type="text" slot="reference">Download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    v-show="this.form.state == 4 ? true : false"
+                                    class="upload-demo"
+                                    :action="upload_manuscirpt"
+                                    accept=".doc, .docx, .rar, .zip"
+                                    name="manuscirpt"
+                                    :before-upload="beforeupload_manuscirpt"
+                                    :on-error="uperr_coverLetter"
+                                    :on-success="upSuccess_manuscirpt"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilemanuscirpt"
+                                >
+                                    <div class="el-upload__text">
+                                        <em>Re upload</em>
+                                    </div>
+                                    <div class="el-upload__tip" slot="tip">Only word and compressed files(.doc,.docx,.rar,.zip)</div>
+                                </el-upload>
+                            </el-form-item>
+                            <el-form-item v-show="this.form.state == 4 ? true : false">
+                                <el-button type="primary" @click="onSubmit">modify</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-col>
+                <el-col :span="8">
+                    <div class="tree_box">
+                        <h2>State tracking</h2>
+                        <div class="block">
+                            <el-timeline>
+                                <el-timeline-item :timestamp="formatDate(form.ctime)" placement="top">
+                                    <el-card>
+                                        <h4>Manuscript submission</h4>
+                                        <p>{{ form.username }} Submit articles</p>
+                                    </el-card>
+                                </el-timeline-item>
+                                <el-timeline-item
+                                    v-for="(activity, index) in msgs"
+                                    :key="index"
+                                    :timestamp="formatDate(activity.ctime)"
+                                    placement="top"
+                                >
+                                    <el-card v-if="activity.ftype == 0">
+                                        <p>Status change :{{ statetostr(activity.state_from) }} => {{ statetostr(activity.state_to) }}</p>
+                                        <p v-if="activity.content != ''">{{ activity.content }}</p>
+                                    </el-card>
+                                    <el-card v-else>
+                                        <p>Author message:</p>
+                                        <p>{{ activity.content }}</p>
+                                    </el-card>
+                                </el-timeline-item>
+                            </el-timeline>
+                        </div>
+                        <el-button type="primary" icon="el-icon-edit" round style="margin-left: 28px" @click="authormsg"
+                            >Edit message</el-button
+                        >
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+
+        <el-dialog title="Message" :visible.sync="editVisible" width="40%">
+            <el-form ref="msgform" :model="msgform" label-width="80px">
+                <el-form-item label="Message">
+                    <el-input type="textarea" rows="5" v-model="msgform.content" placeholder="Author messages"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="saveMsg" :loading="saveloading">save</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: this.Common.mediaUrl,
+            suggest: '',
+            loading: false,
+            transque: false,
+            items: '',
+            coverLetterFileList: [],
+            picturesAndTablesFileList: [],
+            totalpageFileList: [],
+            manuscirptFileList: [],
+            countrys: [],
+            transinfo: [],
+            msgform: {
+                articleId: this.$route.query.id,
+                content: ''
+            },
+            form: {
+                articleId: this.$route.query.id,
+                journal: '',
+                journalname: '',
+                username: localStorage.getItem('ms_username'),
+                title: '',
+                accept_sn: '',
+                abstrart: '',
+                keyWords: '',
+                type: '',
+                major: '',
+                cmajor: '',
+                approval: false,
+                fund: '',
+                coverLetter: '',
+                picturesAndTables: [],
+                totalpage: '',
+                manuscirpt: '',
+                state: '',
+                ctime: '',
+                authorList: []
+            },
+            rules: {
+                abstrart: [{ required: true, message: 'Please enter a description', trigger: 'blur' }],
+                keyWords: [{ required: true, message: 'Please enter keywords', trigger: 'blur' }],
+                fund: [{ required: true, message: 'Please input fund', trigger: 'blur' }]
+            },
+            msgs: [],
+            editVisible: false,
+            saveloading: false
+        };
+    },
+    created: function () {
+        this.initselect();
+        this.initarticle();
+        this.initFileList();
+        this.initCountrys();
+    },
+    computed: {
+        myType: function () {
+            let frag = '';
+            switch (this.form.type) {
+                case 'A':
+                    frag = 'Article';
+                    break;
+                case 'B':
+                    frag = 'Review';
+                    break;
+                case 'C':
+                    frag = 'Case report';
+                    break;
+                case 'M':
+                    frag = 'Meta-analysis';
+                    break;
+                case 'P':
+                    frag = 'Research proposal';
+                    break;
+                case 'N':
+                    frag = 'News';
+                    break;
+                case 'T':
+                    frag = 'Comment';
+                    break;
+                default:
+                    frag = 'Others';
+            }
+            return frag;
+        },
+        coverLetterUrl: function () {
+            return this.baseUrl + this.form.coverLetter;
+        },
+        picturesAndTablesUrl: function () {
+            return this.baseUrl + this.form.picturesAndTables;
+        },
+        manuscirptUrl: function () {
+            return this.baseUrl + this.form.manuscirpt;
+        },
+        upload_coverLetter: function () {
+            return this.baseUrl + 'api/Article/up_file/type/coverLetter';
+        },
+        upload_picturesAndTables: function () {
+            return this.baseUrl + 'api/Article/up_file/type/picturesAndTables';
+        },
+        upload_totalpage: function () {
+            return this.baseUrl + 'api/Article/up_file/type/totalpage';
+        },
+        upload_manuscirpt: function () {
+            return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
+        },
+        articleState: function () {
+            let str = '';
+            switch (this.form.state) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');
+                    break;
+            }
+            return str;
+        }
+    },
+    methods: {
+        onSubmit() {
+            this.$refs.articleform.validate((valid) => {
+                //验证文件
+                // if (this.form.manuscirpt == '') {
+                //     this.$message.error('Manuscirpt is required');
+                //     console.log('file up error');
+                //     return false;
+                // }
+                // //验证文章作者
+                // var alist = this.form.authorList;
+                // for (var i in alist) {
+                //     if (alist[i].author != '' && alist[i].isReport && alist[i].email == '') {
+                //         this.$message.error("The corresponding author's email is required");
+                //         return false;
+                //     }
+                // }
+                if (valid) {
+                    this.loading = true;
+                    this.$api
+                        .post('api/Article/editArticle', this.form)
+                        .then((res) => {
+                            this.loading = false;
+                            if (res.code == 0) {
+                                this.$message.success('success');
+                                this.initarticle();
+                                this.initFileList();
+                            } else {
+                                this.$message.error('Failed to submit, please contact administrator!');
+                                console.log(res.msg);
+                            }
+                        })
+                        .catch((err) => {
+                            console.log(err);
+                        });
+                } else {
+                    this.$message.error('Failed to submit. Please ensure the integrity of the information');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        saveAuthor() {
+            //验证文章作者
+            var alist = this.form.authorList;
+            for (var i in alist) {
+                if (alist[i].author != '' && alist[i].email == '') {
+                    this.$message.error("The author's email is required");
+                    return false;
+                }
+            }
+            this.$api.post('api/Article/saveAuthor', this.form).then((res) => {
+                if (res.code == 0) {
+                    this.$message.success('update author success');
+                    this.$router.go(0);
+                } else {
+                    console.log(res);
+                }
+            });
+        },
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal')
+                .then((res) => {
+                    this.items = res;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        initCountrys() {
+            this.$api.post('api/Admin/getCountrys').then((res) => {
+                this.countrys = res;
+            });
+        },
+        //初始化期刊信息
+        initarticle() {
+            this.$api
+                .post('api/Article/getArticleDetail', { articleId: this.form.articleId, human: 'author' })
+                .then((res) => {
+                    console.log(res);
+                    this.form.title = res.article.title;
+                    this.form.journal = res.article.journal_id;
+                    this.form.journalname = res.article.journalname;
+                    this.form.abstrart = res.article.abstrart;
+                    this.form.accept_sn = res.article.accept_sn;
+                    this.form.keyWords = res.article.keywords;
+                    this.form.fund = res.article.fund;
+                    this.form.state = res.article.state;
+                    this.form.major = res.major.major == null ? '' : res.major.major.title;
+                    this.form.cmajor = res.major.cmajor == null ? '' : res.major.cmajor.title;
+                    this.form.type = res.article.type;
+                    (this.form.approval = res.article.approval == 1 ? true : false), (this.form.ctime = res.article.ctime);
+                    this.transinfo = res.transinfo;
+                    if (this.transinfo != null) {
+                        this.transque = true;
+                    }
+                    this.msgs = res.msg;
+                    this.suggest = res.suggest;
+                    this.form.authorList = [];
+                    var alist = res.authors;
+                    for (var i in alist) {
+                        this.form.authorList.push({
+                            art_aut_id: alist[i].art_aut_id,
+                            firstname: alist[i].firstname,
+                            lastname: alist[i].lastname,
+                            company: alist[i].company,
+                            department: alist[i].department,
+                            title: alist[i].author_title,
+                            country: alist[i].country,
+                            email: alist[i].email,
+                            address: alist[i].address,
+                            isSuper: alist[i].is_super == 1 ? true : false,
+                            isReport: alist[i].is_report == 1 ? true : false
+                        });
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化filelist
+        initFileList() {
+            this.$api
+                .post('api/Article/getFilelistByArticleID', { articleId: this.form.articleId })
+                .then((res) => {
+                    this.coverLetterFileList = res.coverLetter;
+                    this.picturesAndTablesFileList = res.picturesAndTables;
+                    this.totalpageFileList = res.totalpage;
+                    this.manuscirptFileList = res.manuscirpt;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        deleteAuthor(item, index) {
+            this.form.authorList.splice(index, 1);
+        },
+        addAuthor() {
+            this.form.authorList.push({
+                firstname: '',
+                lastname: '',
+                company: '',
+                department: '',
+                title: '',
+                country: '',
+                email: '',
+                address: '',
+                isSuper: false,
+                isReport: false
+            });
+        },
+        //检验上传文件的格式
+        beforeupload_coverLetter(file) {
+            // const isWORd =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/pdf' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+            // if (!isWORd) {
+            //     this.$message.error('Only word and pdf files can be uploaded(.pdf,.doc,.docx)');
+            // }
+            // return isWORd;
+        },
+        beforeupload_picturesAndTables(file) {
+            // const iszip =
+            //     file.type === 'application/x-zip-compressed' ||
+            //     file.name.split('.')[1] === 'rar';
+            // if (!iszip) {
+            //     this.$message.error('Only compressed files can be uploaded(.rar,.zip)');
+            // }
+            // return iszip;
+        },
+        beforeupload_totalpage(file) {},
+        beforeupload_manuscirpt(file) {
+            // const ismau =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
+            //     file.type === 'application/x-zip-compressed' ||
+            //     file.name.split('.')[1] === 'rar';
+            // if (!ismau) {
+            //     this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
+            // }
+            // return ismau;
+        },
+        quetrans() {
+            if (confirm('Your sure transfer your manuscript?')) {
+                this.$api.post('api/article/trans_manu', this.transinfo).then((res) => {
+                    this.$message.success('success');
+                    this.$router.go(0);
+                });
+            }
+        },
+        getlinkurl(row) {
+            return this.mediaUrl + row.file_url;
+        },
+        filedateformate(row, column, cellValue, index) {
+            return this.formatDate(cellValue);
+        },
+        uperr_coverLetter(err) {
+            this.$message.error('upload error!');
+        },
+        beforeupload() {},
+        upSuccess_coverLetter(res, file) {
+            if (res.code == 0) {
+                this.form.coverLetter = 'coverLetter/' + res.upurl;
+            } else {
+                this.$message.error('service error：' + res.msg);
+            }
+        },
+        upSuccess_picturesAndTables(res, file, fileList) {
+            this.form.picturesAndTables = [];
+            for (var ii in fileList) {
+                var url = fileList[ii].response.upurl;
+                this.form.picturesAndTables.push('picturesAndTables/' + url);
+            }
+        },
+        upSuccess_totalpage(res, file) {
+            if (res.code == 0) {
+                this.form.totalpage = 'totalpage/' + res.upurl;
+            } else {
+                this.$message.error('service error:' + res.msg);
+            }
+        },
+        upSuccess_manuscirpt(res, file) {
+            if (res.code == 0) {
+                this.form.manuscirpt = 'manuscirpt/' + res.upurl;
+            } else {
+                this.$message.error('service error：' + res.msg);
+            }
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+        //超出传送文件个数限制
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        },
+        //清除文件时的事件
+        removefilecoverLetter(file, fileList) {
+            this.form.coverLetter = '';
+        },
+        removefilepicturesAndTables(file, fileList) {
+            this.form.picturesAndTables = [];
+            for (var ii in fileList) {
+                var url = fileList[ii].response.upurl;
+                this.form.picturesAndTables.push('picturesAndTables/' + url);
+            }
+        },
+        removefiletotalpage(file, fileList) {
+            this.form.totalpage = '';
+        },
+        removefilemanuscirpt(file, fileList) {
+            this.form.manuscirpt = '';
+        },
+        authormsg() {
+            this.editVisible = true;
+        },
+        saveMsg() {
+            if (this.msgform.content == '') {
+                this.$message.error('Please input messages');
+                return false;
+            }
+            this.saveloading = true;
+            this.$api.post('api/Article/authorMessage', this.msgform).then((res) => {
+                this.saveloading = false;
+                this.$message.success('Sent successfully');
+                this.$router.go(0);
+            });
+        },
+        statetostr(mystate) {
+            let str = '';
+            switch (mystate) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');
+                    break;
+            }
+            return str;
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.dwnbtn {
+    margin-bottom: 5px;
+}
+.container {
+    min-width: 1000px;
+}
+.tree_box {
+    padding: 15px 10px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.el-row {
+    margin-bottom: 5px;
+}
+.author-title {
+    color: #969595;
+    text-align: center;
+    background-color: #eceaea;
+}
+.author-delete {
+    text-align: center;
+}
+.author-delete i {
+    color: red;
+}
+.zyfont {
+    font-size: 10px;
+    color: rgb(133, 131, 131);
+}
+.top-content span {
+    font-family: Arial, Helvetica, sans-serif;
+    display: block;
+    padding: 2px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+</style>

src/components/page/articleDetailEditor.vue

@@ -0,0 +1,924 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Manuscript detail
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-row>
+                <el-col :span="16">
+                    <div class="form-box" v-loading="loading">
+                        <el-form ref="articleform" :model="form" label-width="200px">
+                            <el-form-item label="Status">
+                                <span>{{articleState}}</span>
+                                <el-button
+                                    style="margin-left:10px;"
+                                    type="text"
+                                    @click="testvis"
+                                    icon="el-icon-edit"
+                                >change</el-button>
+                            </el-form-item>
+                            <el-form-item label="Remarks">
+                                <span>{{form.remarks}}</span>
+                                <el-button
+                                    style="margin-left:10px;"
+                                    type="text"
+                                    @click="testedit"
+                                    icon="el-icon-edit"
+                                >edit</el-button>
+                            </el-form-item>
+                            <el-form-item label="Repetition">
+                                <span>{{form.repetition}}%</span>
+                                <el-button
+                                    style="margin-left:10px;"
+                                    type="text"
+                                    @click="changeRepe"
+                                    icon="el-icon-edit"
+                                >change</el-button>
+                            </el-form-item>
+                            <el-form-item v-if="form.accept_sn != ''" label="Manusript ID">
+                                <span>{{form.accept_sn}}</span>
+                            </el-form-item>
+                            <el-form-item label="Journal">
+                                <span>{{form.journalname}}</span>
+                            </el-form-item>
+                            <el-form-item label="Title">
+                                <span>{{form.title}}</span>
+                            </el-form-item>
+                            <el-form-item label="Type">
+                                <span>{{myType}}</span>
+                            </el-form-item>
+                            <el-form-item label="Major">
+                                <el-row>
+                                    <el-col :span="8">{{form.major}}</el-col>
+                                    <el-col :span="16">{{form.cmajor}}</el-col>
+                                </el-row>
+                            </el-form-item>
+                            <el-form-item label="Ethical Approval" v-show="form.type=='A'">
+                                <span>{{form.approval?'yes':'no'}}</span>
+                            </el-form-item>
+                            <el-form-item label="Author">
+                                <el-collapse>
+                                    <el-collapse-item
+                                        v-for="(item, index) in form.authorList"
+                                        :key="index"
+                                        :name="index+1"
+                                    >
+                                        <template
+                                            slot="title"
+                                        >Author {{index+1}} :{{item.firstname}} {{item.lastname}} {{item.isSuper?'#':''}}{{item.isReport?'*':''}}</template>
+                                        <el-form-item label="E-mail:" label-width="100px">
+                                            {{item.email}}
+                                        </el-form-item>
+                                        <el-form-item label="Name:" label-width="100px">
+                                            {{item.firstname}} {{item.lastname}}
+                                        </el-form-item>
+                                        <el-form-item label="First author:" label-width="100px">
+                                            <el-switch
+                                                v-model="item.isSuper"
+                                                active-text="yes"
+                                                inactive-text="no"
+                                            ></el-switch>
+                                        </el-form-item>
+                                        <el-form-item
+                                            label="Corresponding Author:"
+                                            label-width="160px"
+                                        >
+                                            <el-switch
+                                                v-model="item.isReport"
+                                                active-text="yes"
+                                                inactive-text="no"
+                                            ></el-switch>
+                                        </el-form-item>
+                                        <el-form-item
+                                            label="Address"
+                                            label-width="100px"
+                                            v-show="item.isReport"
+                                        >
+                                            {{item.address}}
+                                        </el-form-item>
+                                        <el-form-item label="Institution:" label-width="100px">
+                                            {{item.company}}
+                                        </el-form-item>
+                                        <el-form-item label="Department:" label-width="100px">
+                                            {{item.department}}
+                                        </el-form-item>
+                                        <el-form-item label="Title:" label-width="100px">
+                                            {{item.title}}
+                                        </el-form-item>
+                                        <el-form-item label="Country:" label-width="100px">
+                                            {{item.country}}
+                                        </el-form-item>
+                                    </el-collapse-item>
+                                </el-collapse>
+                            </el-form-item>
+                            <el-form-item label="Abstrart">
+                                <span>{{form.abstrart}}</span>
+                            </el-form-item>
+                            <el-form-item label="KeyWords">
+                                <span>{{form.keyWords}}</span>
+                            </el-form-item>
+                            <el-form-item label="Fund">
+                                <span>{{form.fund}}</span>
+                            </el-form-item>
+                            <el-form-item label="Cover letter">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="coverLetterFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                                <!-- <el-upload
+                                    class="upload-demo"
+                                    :action="upload_coverLetter"
+                                    accept=".pdf, .doc, .docx"
+                                    name="coverLetter"
+                                    :before-upload="beforeupload_coverLetter"
+                                    :on-error="uperr_coverLetter"
+                                    :on-success="upSuccess_coverLetter"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilecoverLetter"
+                                >
+                                    <div class="el-upload__text">
+                                        <em>Re upload</em>
+                                    </div>
+                                    <div
+                                        class="el-upload__tip"
+                                        slot="tip"
+                                    >Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
+                                </el-upload> -->
+                            </el-form-item>
+                            <el-form-item label="Figures">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="picturesAndTablesFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                                <!-- <el-upload
+                                    class="upload-demo"
+                                    :action="upload_picturesAndTables"
+                                    accept=".rar, .zip"
+                                    name="picturesAndTables"
+                                    :before-upload="beforeupload_picturesAndTables"
+                                    :on-error="uperr_coverLetter"
+                                    :on-success="upSuccess_picturesAndTables"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilepicturesAndTables"
+                                >
+                                    <div class="el-upload__text">
+                                        <em>Re upload</em>
+                                    </div>
+                                    <div
+                                        class="el-upload__tip"
+                                        slot="tip"
+                                    >Only compressed files can be uploaded(.rar,.zip)</div>
+                                </el-upload> -->
+                            </el-form-item>
+                            <el-form-item label="Title page">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="totalpageFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                                <!-- <el-upload
+                                    class="upload-demo"
+                                    :action="upload_totalpage"
+                                    accept=".doc, .docx, .rar, .zip"
+                                    name="totalpage"
+                                    :before-upload="beforeupload_totalpage"
+                                    :on-error="uperr_coverLetter"
+                                    :on-success="upSuccess_totalpage"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefiletotalpage"
+                                >
+                                    <div class="el-upload__text">
+                                        <em>Re upload</em>
+                                    </div>
+                                    <div
+                                        class="el-upload__tip"
+                                        slot="tip"
+                                    >Only word and compressed files can be uploaded(.doc,.docx,.rar,.zip)</div>
+                                </el-upload> -->
+                            </el-form-item>
+                            <el-form-item label="Manuscirpt">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="manuscirptFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    class="upload-demo"
+                                    :action="upload_manuscirpt"
+                                    accept=".doc, .docx, .rar, .zip"
+                                    name="manuscirpt"
+                                    :before-upload="beforeupload_manuscirpt"
+                                    :on-error="uperr_coverLetter"
+                                    :on-success="upSuccess_manuscirpt"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilemanuscirpt"
+                                >
+                                    <div class="el-upload__text">
+                                        <em>Re upload</em>
+                                    </div>
+                                    <div
+                                        class="el-upload__tip"
+                                        slot="tip"
+                                    >Only word and compressed files can be uploaded(.doc,.docx,.rar,.zip)</div>
+                                </el-upload>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button type="primary" @click="onsubmit">Submit</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-col>
+                <el-col :span="8">
+                    <div class="tree_box">
+                        <h2>State tracking</h2>
+                        <div class="block">
+                            <el-timeline>
+                                <el-timeline-item
+                                    :timestamp="formatDate(form.ctime)"
+                                    placement="top"
+                                >
+                                    <el-card>
+                                        <h4>Manuscript submission</h4>
+                                        <p>{{form.username}} Submit articles</p>
+                                        <p>Manuscript ID:{{form.accept_sn}}</p>
+                                    </el-card>
+                                </el-timeline-item>
+                                <el-timeline-item
+                                    v-for="(activity, index) in msgs"
+                                    :key="index"
+                                    :timestamp="formatDate(activity.ctime)"
+                                    placement="top"
+                                >
+                                    <el-card v-if="activity.ftype==0">
+                                        <p>Status change :{{statetostr(activity.state_from)}} => {{statetostr(activity.state_to)}}</p>
+                                        <p v-if="activity.content!=''">{{activity.content}}</p>
+                                    </el-card>
+                                    <el-card v-else>
+                                        <p>Author message:</p>
+                                        <p>{{activity.content}}</p>
+                                    </el-card>
+                                    <!-- <el-card>
+                                        <p>state change :{{statetostr(activity.state_from)}} => {{statetostr(activity.state_to)}}</p>
+                                        <p>{{activity.content}}</p>
+                                    </el-card> -->
+                                </el-timeline-item>
+                            </el-timeline>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <el-dialog title="edit" :visible.sync="editVisible" width="40%" v-loading="loading1">
+            <el-form ref="editform" :model="editform" label-width="80px" >
+                <el-form-item label="state">
+                    <el-select v-model="editform.state" placeholder="Please select">
+                        <el-option
+                            v-for="item in items"
+                            :key="item.state"
+                            :label="item.title"
+                            :value="item.state"
+                            :disabled="item.disabled"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="transfer" v-show="editform.state==3 && form.transList.length==0">
+                    <el-select v-model="editform.trsjournal" placeholder="Please select">
+                        <el-option :key="0" label="no transfer" :value="0"></el-option>
+                        <el-option
+                            v-for="item in journals"
+                            :key="item.journal_id"
+                            :label="item.title"
+                            :value="item.journal_id"
+                            :disabled="item.journal_id==form.journal"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="editormsg">
+                    <el-input
+                        type="textarea"
+                        rows="5"
+                        v-model="editform.editormsg"
+                        placeholder="feedback information"
+                    ></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="editVisible = false">cancel</el-button>
+                <el-button type="primary" @click="saveEdit">save</el-button>
+            </span>
+        </el-dialog>
+        <el-dialog title="remarks" :visible.sync="editbox" width="40%" v-loading="loading2">
+            <el-form ref="remark" :model="remark" label-width="80px" >
+                <el-form-item label="content">
+                    <el-input
+                        type="textarea"
+                        rows="5"
+                        v-model="remark.content"
+                        ></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="saveRemark">save</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+        <el-dialog title="repetition" :visible.sync="repebox" width="40%" v-loading="loading3">
+            <el-form ref="repetition" :model="repeform" label-width="80px" >
+                <el-form-item label="content">
+                    <el-input maxlength="3" style="width:100px;" v-model="repeform.repefen" >
+                        <template slot="append">%</template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="Zip">
+                        <el-upload
+                            class="upload-demo"
+                            :action="upload_zip"
+                            accept=".rar, .zip"
+                            name="repezip"
+                            :on-success="upSuccess_repezip"
+                            :limit="1"
+                            :on-exceed="alertlimit"
+                            :on-remove="removefilerepezip"
+                        >
+                            <div class="el-upload__text">
+                                <em>click upload</em>
+                            </div>
+                            <div
+                                class="el-upload__tip"
+                                slot="tip"
+                            >Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
+                        </el-upload>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="saveRepe">save</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            mediaUrl:this.Common.mediaUrl,
+            items: '',
+            loading:false,
+            loading1:false,
+            loading2:false,
+            loading3:false,
+            editVisible: false,
+            editbox:false,
+            repebox:false,
+            coverLetterFileList: [],
+            picturesAndTablesFileList: [],
+            totalpageFileList:[],
+            manuscirptFileList: [],
+            editform: {
+                editname: localStorage.getItem('ms_username'),
+                articleId: this.$route.query.id,
+                state: 0,
+                trsjournal:0,
+                editormsg: ''
+            },
+            remark:{
+                articleId:this.$route.query.id,
+                content:''
+            },
+            repeform:{
+                articleId:this.$route.query.id,
+                repefen:'',
+                zipurl:''
+            },
+            journals:[],
+            items: [
+                {
+                    state: 0,
+                    title: this.$t('artstate.state0'),
+                    disabled: true
+                },
+                {
+                    state: 1,
+                    title: this.$t('artstate.state1')
+                },
+                {
+                    state: 2,
+                    title: this.$t('artstate.state2'),
+                },
+                {
+                    state: 3,
+                    title: this.$t('artstate.state3')
+                },
+                {
+                    state: 4,
+                    title: this.$t('artstate.state4')
+                },
+                {
+                    state: 5,
+                    title: this.$t('artstate.state5')
+                }
+            ],
+            form: {
+                articleId: this.$route.query.id,
+                journal: '',
+                journalname: '',
+                username: '',
+                title: '',
+                accept_sn:'',
+                abstrart: '',
+                keyWords: '',
+                fund: '',
+                type:'',
+                major:'',
+                cmajor:'',
+                approval:false,
+                repetition:'',
+                manuscirpt: '',
+                remarks:'',
+                state: '',
+                ctime: '',
+                authorList:[],
+                transList:[]
+            },
+            msgs: []
+        };
+    },
+    created: function() {
+        this.initarticle();
+        this.initselect();
+        this.initFileList();
+    },
+    computed: {
+        myType:function(){
+            let frag = '';
+            switch(this.form.type){
+                case "A":
+                    frag = 'Article';
+                    break;
+                case 'B':
+                    frag = 'Review';
+                    break;
+                case 'C':
+                    frag = 'Case report';
+                    break;
+                case 'M':
+                    frag = 'Meta-analysis';
+                    break;
+                case 'P':
+                    frag = 'Research proposal';
+                    break;
+                case 'N':
+                    frag = 'News';
+                    break;
+                case 'T':
+                    frag = 'Comment';
+                    break;
+                default:
+                    frag = 'Others';
+            }
+            return frag;
+        },
+        // coverLetterUrl: function() {
+        //     return this.baseUrl + this.form.coverLetter;
+        // },
+        // picturesAndTablesUrl: function() {
+        //     return this.baseUrl + this.form.picturesAndTables;
+        // },
+        manuscirptUrl: function() {
+            return this.baseUrl + this.form.manuscirpt;
+        },
+        upload_coverLetter:function(){
+            return this.baseUrl+'api/Article/up_file/type/coverLetter';
+        },
+        upload_picturesAndTables:function(){
+            return this.baseUrl+'api/Article/up_file/type/picturesAndTables';
+        },
+        upload_manuscirpt:function(){
+            return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
+        },
+        upload_zip:function(){
+            return this.baseUrl + 'api/Article/up_file/type/repezip';
+        },
+        articleState: function() {
+            let str = '';
+            switch (this.form.state) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');
+                    break;
+            }
+            return str;
+        }
+    },
+    methods: {
+        //弹出编辑框
+        testvis() {
+            this.editVisible = true;
+        },
+        testedit(){
+            this.editbox = true;
+        },
+        changeRepe(){
+            this.repebox = true;
+        },
+        statetostr(mystate) {
+            let str = '';
+            switch (mystate) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');
+                    break;
+            }
+            return str;
+        },
+        //修改文章状态
+        saveEdit() {
+            this.loading1 = true;
+            this.$api
+                .post('api/Article/editArticleEditor', this.editform)
+                .then(res => {
+                    this.loading1 = false;
+                    this.$message.success('success');
+                    this.editVisible = false;
+                    this.$router.go(0);
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        saveRemark(){
+            this.loading2 = true;
+            this.$api.post('api/Article/editArticleRemark',this.remark)
+            .then(res=>{
+                this.loading2 = false;
+                this.$message.success('success');
+                this.$router.go(0);
+            });
+        },
+        saveRepe(){
+            if(this.repeform.zipurl==''){
+                this.$message.error('please upload zip');
+                return false;
+            }
+            this.loading3 = true;
+            this.$api.post('api/Article/changeRepetition',this.repeform)
+            .then(res=>{
+                this.loading3 = false;
+                this.$message.success('success');
+                this.$router.go(0);
+            });
+        },
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal')
+                .then((res) => {
+                    this.journals = res;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化期刊信息
+        initarticle() {
+            this.$api
+                .post('api/Article/getArticleDetail', { articleId: this.editform.articleId,human:'editor' })
+                .then(res => {
+                    console.log(res);
+                    this.form.username = res.article.account;
+                    this.form.title = res.article.title;
+                    this.form.journal = res.article.journal_id;
+                    this.form.journalname = res.article.journalname;
+                    this.form.abstrart = res.article.abstrart;
+                    this.form.accept_sn = res.article.accept_sn;
+                    this.form.keyWords = res.article.keywords;
+                    this.form.fund = res.article.fund;
+                    this.form.type = res.article.type;
+                    this.form.major = res.major.major==null?'':res.major.major.title;
+                    this.form.cmajor = res.major.cmajor==null?'':res.major.cmajor.title;
+                    this.form.approval = res.article.approval==1?true:false;
+                    this.form.repetition = res.article.repetition;
+                    this.form.remarks = res.article.remarks;
+                    this.repeform.repefen = res.article.repetition;
+                    this.remark.content = res.article.remarks;
+                    this.editform.state = this.form.state = res.article.state;
+                    this.form.ctime = res.article.ctime;
+                    this.form.transList = res.transfer;
+                    this.msgs = res.msg;
+                    var alist = res.authors;
+                    for (var i in alist) {
+                        this.form.authorList.push({
+                            art_aut_id: alist[i].art_aut_id,
+                            firstname: alist[i].firstname,
+                            lastname: alist[i].lastname,
+                            company: alist[i].company,
+                            department: alist[i].department,
+                            title: alist[i].author_title,
+                            country: alist[i].country,
+                            email: alist[i].email,
+                            address: alist[i].address,
+                            isSuper: alist[i].is_super == 1 ? true : false,
+                            isReport: alist[i].is_report == 1 ? true : false
+                        });
+                    }
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        //初始化filelist
+        initFileList() {
+            this.$api
+                .post('api/Article/getFilelistByArticleID', { articleId: this.form.articleId })
+                .then(res => {
+                    this.coverLetterFileList = res.coverLetter;
+                    this.picturesAndTablesFileList = res.picturesAndTables;
+                    this.manuscirptFileList = res.manuscirpt;
+                    this.totalpageFileList = res.totalpage;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        uperr_coverLetter(err) {
+            this.$message.error('upload error');
+        },
+        beforeupload() {},
+        filedateformate(row, column, cellValue, index) {
+            return this.formatDate(cellValue);
+        },
+        // upSuccess_coverLetter(res, file) {
+        //     if (res.code == 0) {
+        //         this.form.coverLetter = 'coverLetter/' + res.upurl;
+        //     } else {
+        //         this.$message.error('service error：' + res.msg);
+        //     }
+        // },
+        // upSuccess_picturesAndTables(res, file) {
+        //     if (res.code == 0) {
+        //         this.form.picturesAndTables = 'picturesAndTables/' + res.upurl;
+        //     } else {
+        //         this.$message.error('service error：' + res.msg);
+        //     }
+        // },
+        upSuccess_manuscirpt(res, file) {
+            if (res.code == 0) {
+                this.form.manuscirpt = 'manuscirpt/' + res.upurl;
+            } else {
+                this.$message.error('service error：' + res.msg);
+            }
+        },
+        upSuccess_repezip(res, file){
+            if(res.code == 0){
+                this.repeform.zipurl = 'repezip/'+res.upurl;
+            }
+        },
+        //超出传送文件个数限制
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        },
+        getlinkurl(row) {
+            return this.mediaUrl + row.file_url;
+        },
+        //检验上传文件的格式
+        beforeupload_manuscirpt(file) {
+            // const ismau =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'||
+            //     file.type === 'application/x-zip-compressed' ||
+            //     file.name.split(".")[1] === 'rar';
+            // if (!ismau) {
+            //     this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
+            // }
+            // return ismau;
+        },
+        //清除文件时的事件
+        removefilemanuscirpt(file, fileList) {
+            this.form.manuscirpt = '';
+        },
+        removefilerepezip(file, fileList){
+            this.repeform.zipurl = '';
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+        onsubmit() {
+            if ( this.form.manuscirpt == '') {
+                this.$message.error('Manuscirpt is required');
+                console.log('file up error');
+                return false;
+            }
+            
+            this.loading = true;
+            this.$api.post('api/Article/changeArticleFileEditor',this.form)
+            .then(res=>{
+                this.loading = false;
+                    this.$message.success('success');
+                    this.$router.go(0);
+            })
+            .catch(err=>{
+                console.log(err);
+            });
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.dwnbtn {
+    margin-bottom: 5px;
+}
+.container {
+    min-width: 800px;
+}
+.tree_box {
+    padding: 15px 10px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.el-row {
+    border-bottom: rgb(230, 211, 211) solid 1px;
+    margin-bottom: 5px;
+    line-height: 3.5;
+}
+.author-title {
+    color: #969595;
+    text-align: center;
+    background-color: #eceaea;
+}
+.author-delete {
+    text-align: center;
+}
+.author-delete i {
+    color: red;
+}
+</style>

src/components/page/articleList.vue

@@ -0,0 +1,229 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-cascades"></i> Manuscript list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="handle-box">
+                <el-select v-model="query.journal" size="medium" @change="getdate" placeholder="Please select journal">
+                    <el-option :key="0" label="All journals" :value="0"></el-option>
+                    <el-option
+                        v-for="item in items"
+                        :key="item.journal_id"
+                        :label="item.title"
+                        :value="item.journal_id"
+                    ></el-option>
+                </el-select>
+                <el-select v-model="query.state" size="medium" @change="getdate" placeholder="Please select status">
+                    <el-option :key="0" label="All status" :value="0"></el-option>
+                    <el-option :key="1" :label="$t('artstate.state1')" :value="1"></el-option>
+                    <el-option :key="2" :label="$t('artstate.state2')" :value="2"></el-option>
+                    <el-option :key="3" :label="$t('artstate.state3')" :value="3"></el-option>
+                    <el-option :key="4" :label="$t('artstate.state4')" :value="4"></el-option>
+                    <el-option :key="5" :label="$t('artstate.state5')" :value="5"></el-option>
+                </el-select>
+                <el-input v-model="query.name" placeholder="Title" class="handle-input mr10" style="margin-left:10px;"></el-input>
+                <el-button type="primary" icon="el-icon-search" @click="handleSearch">search</el-button>
+                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addArticle">add</el-button>
+            </div>
+            <el-table
+                :data="tableData"
+                border
+                ref="multipleTable"
+            >
+                >
+                <el-table-column type="index" label="No." width="55" align="center"></el-table-column>
+                <!-- <el-table-column prop="article_id" label="ID" width="55" align="center"></el-table-column> -->
+                <el-table-column label="Title" align="center">
+                    <template slot-scope="scope">
+                        <el-badge is-dot :hidden="scope.row.editor_act==1?false:true" class="item">
+                            {{scope.row.title}}
+                        </el-badge>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="journalname" label="Journal" align="center"></el-table-column>
+                <el-table-column prop="accept_sn" label="Manuscript ID" align="center"></el-table-column>
+                <el-table-column
+                    prop="state"
+                    label="Status"
+                    :formatter="stateFormat"
+                    align="center"
+                    width="100"
+                ></el-table-column>
+                <el-table-column label="" width="180" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            plain
+                            icon="el-icon-tickets"
+                            @click="showdetail(scope.row)"
+                        >detail</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: '',
+            query: {
+                username: localStorage.getItem('ms_username'),
+                journal: localStorage.getItem('ms_journal_alias')?parseInt(localStorage.getItem('ms_journal_alias')):0,
+                name: '',
+                state:0,
+                pageIndex: 1,
+                pageSize: 10
+            },
+            tableData: [],
+            multipleSelection: [],
+            delList: [],
+            editVisible: false,
+            Total: 0
+            // form: {},
+            // idx: -1,
+            // id: -1
+        };
+    },
+    created() {
+        this.initselect();
+        this.getdate();
+    },
+    methods: {
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal')
+                .then(res => {
+                    this.items = res;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 获取数据
+        getdate() {
+            this.$api
+                .post('api/Article/getArticle', this.query)
+                .then(res => {console.log(res);
+                    this.Total = res.total;
+                    this.tableData = res.data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 触发搜索按钮
+        handleSearch() {
+            this.$set(this.query, 'pageIndex', 1);
+            this.getdate();
+        },
+        //跳转到增加稿件页面
+        addArticle() {
+            this.$router.push('/articleAdd');
+        },
+        //格式化状态输出
+        stateFormat(row, column) {
+            let str = '';
+            switch (row.state) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');;
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');;
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');;
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');;
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');;
+                    break;
+                default:
+                    str = 'error!!';
+            }
+            return str;
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        showdetail(row) {
+            // if(row.state==4){
+            //     this.$router.push({path:'articleRevise',query:{id:row.article_id}});
+            // }else{
+                this.$router.push({ path: 'articleDetail', query: { id: row.article_id } });
+            // }
+            
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if(row.editor_act == 1){
+                return 'hasChange-row';
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.item{
+    margin-top: 5px;
+}
+</style>
+<style>
+.el-table .hasChange-row{
+    background-color: #ffebe8;
+}
+</style>

src/components/page/articleListEditor.vue

@@ -0,0 +1,244 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-cascades"></i> Manuscripts list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="handle-box">
+                <el-select v-model="query.journal" @change="getdate" placeholder="Please select journal">
+                    <el-option :key="0" label="All journals" :value="0"></el-option>
+                    <el-option
+                        v-for="item in items"
+                        :key="item.journal_id"
+                        :label="item.title"
+                        :value="item.journal_id"
+                    ></el-option>
+                </el-select>
+                <el-select v-model="query.state" @change="getdate" placeholder="Please select status" style="margin-left:5px;">
+                    <el-option :key="-1" label="All status" :value="-1"></el-option>
+                    <el-option :key="0" :label="$t('artstate.state0')" :value="0" :disabled="query.act==2"></el-option>
+                    <el-option :key="1" :label="$t('artstate.state1')" :value="1" :disabled="query.act==2"></el-option>
+                    <el-option :key="2" :label="$t('artstate.state2')" :value="2" :disabled="query.act==2"></el-option>
+                    <el-option :key="3" :label="$t('artstate.state3')" :value="3" :disabled="query.act==1"></el-option>
+                    <el-option :key="4" :label="$t('artstate.state4')" :value="4" :disabled="query.act==2"></el-option>
+                    <el-option :key="5" :label="$t('artstate.state5')" :value="5" :disabled="query.act==1"></el-option>
+                </el-select>
+                <el-select v-model="query.act" @change="getdate" placeholder="Please select status" style="margin-left:5px;">
+                    <el-option :key="1" :label="$t('artstate.act1')" :value="1"></el-option>
+                    <el-option :key="2" :label="$t('artstate.act2')" :value="2"></el-option>
+                </el-select>
+                <el-input v-model="query.name" placeholder="Title" class="handle-input mr10" style="margin-left:5px;"></el-input>
+                <el-button type="primary" icon="el-icon-search" @click="handleSearch">Search</el-button>
+            </div>
+            <el-table
+                :data="tableData"
+                border
+                stripe
+                class="table"
+                ref="multipleTable"
+                header-cell-class-name="table-header"
+            >
+                >
+                <el-table-column type="index" label="No." width="55" align="center"></el-table-column>
+                <el-table-column prop="accept_sn" label="Manuscript ID" width="180" align="center"></el-table-column>
+                <!-- <el-table-column prop="article_id" label="ID" width="55" align="center"></el-table-column> -->
+                <el-table-column prop="title" label="Title" align="center">
+                    <template slot-scope="scope">
+                        <el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item">
+                            {{scope.row.title}}
+                        </el-badge>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="journalname" label="Journal" width="250" align="center"></el-table-column>
+                <el-table-column
+                    prop="state"
+                    label="Status"
+                    :formatter="stateFormat"
+                    align="center"
+                    width="110"
+                ></el-table-column>
+                <el-table-column prop="remarks" label="Remarks" align="center"></el-table-column>
+                <el-table-column label="" width="230" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            plain
+                            icon="el-icon-tickets"
+                            @click="showdetaileditor(scope.row)"
+                        >Detail</el-button>
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            plain
+                            icon="el-icon-user-solid"
+                            @click="articleReviewer(scope.row)"
+                        >Review</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: '',
+            query: {
+                username: localStorage.getItem('ms_username'),
+                journal: 0,
+                name: '',
+                state:-1,
+                act:1,
+                pageIndex: 1,
+                pageSize: 10
+            },
+            tableData: [],
+            multipleSelection: [],
+            delList: [],
+            editVisible: false,
+            Total: 0
+            // form: {},
+            // idx: -1,
+            // id: -1
+        };
+    },
+    created() {
+        this.initselect();
+        this.getdate();
+    },
+    methods: {
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal',{'username':this.query.username})
+                .then(res => {
+                    this.items = res;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 获取数据
+        getdate() {
+            this.$api
+                .post('api/Article/getArticleForEditor', this.query)
+                .then(res => {
+                    this.Total = res.total;
+                    this.tableData = res.data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 触发搜索按钮
+        handleSearch() {
+            this.$set(this.query, 'pageIndex', 1);
+            this.getdate();
+        },
+        //文章送审
+        articleReviewer(row){
+            this.$router.push({ path: 'articleReviewer', query: { id: row.article_id } });
+        },
+        //格式化状态输出
+        stateFormat(row, column) {
+            let str = '';
+            switch (row.state) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');
+                    break;
+                default:
+                    str = 'error!!';
+            }
+            return str;
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        showdetaileditor(row) {
+            this.$router.push({ path: 'articleDetailEditor', query: { id: row.article_id } });
+        },
+        tableRowClassName({ row, rowIndex }) {
+
+            if (row.state == 1 || row.state == 2) {
+                return 'normol-row';
+            } else if (row.state == 3) {
+                return 'red-row';
+            } else if (row.state == 4) {
+                return 'warning-row';
+            } else if (row.state == 5) {
+                return 'success-row';
+            } else {
+                return '';
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.item{
+    margin-top: 5px;
+}
+</style>

src/components/page/articleReviewer.vue

@@ -0,0 +1,282 @@
+<template>
+    <div >
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Manuscript reviewer list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container" v-loading="loading">
+            <div class="handle-box">
+                <el-button
+                    type="primary"
+                    icon="el-icon-circle-plus-outline"
+                    @click="editVisible=true"
+                >Add reviewer</el-button>
+            </div>
+            <el-table
+                :data="tableData"
+                border
+                stripe
+                class="table"
+                ref="multipleTable"
+                header-cell-class-name="table-header"
+            >
+                <el-table-column type="index" label="No." align="center" width="60"></el-table-column>
+                <!-- <el-table-column prop="art_rev_id" label="ID" align="center" width="60"></el-table-column> -->
+                <el-table-column label="Reviewer" align="center">
+                    <template slot-scope="scope">
+                        <el-badge is-dot :hidden="scope.row.reviewer_act==1?false:true" class="item">
+                            {{scope.row.reviewer}}
+                        </el-badge>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="country" label="Country" align="center"></el-table-column>
+                <el-table-column prop="company" label="Company" align="center"></el-table-column>
+                <el-table-column :formatter="majorTitle" label="Major" align="center"></el-table-column>
+                <el-table-column prop="field" label="Field" align="center"></el-table-column>
+                <el-table-column :formatter="revstate" label="state" align="center"></el-table-column>
+                <el-table-column label="" width="230" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            plain
+                            icon="el-icon-tickets"
+                            @click="showdetail(scope.row)"
+                        >Detail</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+        <el-dialog title="add reviewer" :visible.sync="editVisible" width="40%">
+            <el-form ref="editform" :model="editform" label-width="100px">
+                <el-form-item label="state">
+                    <el-select
+                        v-model="editform.uid"
+                        :change="changereviewer()"
+                        placeholder="Please select"
+                    >
+                        <el-option :key="0" label="please select" :value="0"></el-option>
+                        <el-option
+                            v-for="item in reviewerList"
+                            :key="item.user_id"
+                            :label="item.account"
+                            :value="item.user_id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="Country" v-if="editform.uid != 0">
+                    <span>{{reviewer_data.country}}</span>
+                </el-form-item>
+                <el-form-item label="Company" v-if="editform.uid != 0">
+                    <span>{{reviewer_data.company}}</span>
+                </el-form-item>
+                <el-form-item label="Major" v-if="editform.uid != 0">
+                    <span>{{reviewer_data.major_title}}</span>
+                </el-form-item>
+                <el-form-item label="Field" v-if="editform.uid != 0">
+                    <span>{{reviewer_data.field}}</span>
+                </el-form-item>
+                <el-form-item label="Introduction" v-if="editform.uid != 0">
+                    <span>{{reviewer_data.introduction}}</span>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="editVisible = false">cancel</el-button>
+                <el-button type="primary" @click="saveEdit">save</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            query: {
+                articleId: this.$route.query.id,
+                pageIndex: 1,
+                pageSize: 10
+            },
+            editform: {
+                uid: 0,
+                articleId: this.$route.query.id
+            },
+            reviewer_data: {
+                introduction: '',
+                country: '',
+                company: '',
+                major_title: '',
+                field: ''
+            },
+            editVisible: false,
+            tableData: [],
+            reviewerList: [],
+            loading:false,
+            Total: 0
+        };
+    },
+    created() {
+        this.getdate();
+        this.initreviewerList();
+    },
+    computed: {
+        upload_url: function () {
+            return this.baseUrl + 'api/Reviewer/up_file';
+        }
+    },
+    methods: {
+        // 获取编辑列表数据
+        getdate() {
+            this.$api
+                .post('api/Article/getReviewerList', this.query)
+                .then((res) => {
+                    this.Total = res.totle;
+                    this.tableData = res.data;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        addReviewer() {
+            alert('sssss');
+        },
+        //初始化审查员列表
+        initreviewerList() {
+            this.$api
+                .post('api/Article/getArticleReviewerList', { articleId: this.query.articleId })
+                .then((res) => {
+                    this.reviewerList = res.data;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //保存添加操作
+        saveEdit() {
+            if (this.editform.uid == 0) {
+                this.$message.error('please select a reviewer');
+            } else {
+                this.loading = true;
+                this.$api
+                    .post('api/Article/addArticleReviewer', this.editform)
+                    .then((res) => {
+                        this.loading = false;
+                        if (res.code == 0) {
+                            this.$message.success('add success');
+                            this.$router.go(0);
+                        } else {
+                            this.$message.error('add error');
+                        }
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            }
+        },
+        showdetail(row) {
+            if(row.state==4){
+                this.$message.error('Review expired!');
+            }else{
+                this.$router.push({ path: 'articleReviewerDetail', query: { id: row.art_rev_id } });
+            }
+            
+        },
+        changereviewer() {
+            if (this.editform.uid !== 0) {
+                this.$api
+                    .post('api/Article/getReviewerdetail', { uid: this.editform.uid })
+                    .then((res) => {
+                        this.reviewer_data.introduction = res.data.introduction;
+                        this.reviewer_data.country = res.data.country;
+                        this.reviewer_data.company = res.data.company;
+                        this.reviewer_data.major_title = res.data.major_title;
+                        this.reviewer_data.field = res.data.field;
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            }
+        },
+        majorTitle(row, column, cellValue, index) {
+            return row.major_title + '(' + row.major_ctitle + ')';
+        },
+        revstate(row, column, cellValue, index) {
+            let frag = '';
+            if (row.state == 0) {
+                frag = 'With reviewer';
+            } else if (row.state == 1) {
+                frag = 'Revision';
+            } else if (row.state == 2) {
+                frag = 'Reject';
+            } else if (row.state == 3) {
+                frag = 'Accepted';
+            } else if (row.state == 4){
+                frag = 'invalid';
+            }
+            return frag;
+        }
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.el-table .warning-row {
+    background: #f3ca7f;
+}
+.el-table .success-row {
+    background: #bcfc9a;
+}
+.el-table .normol-row {
+    background: #d8f1c7;
+}
+.el-table .red-row {
+    background: #f05555;
+}
+</style>

src/components/page/articleReviewerDetail.vue

@@ -0,0 +1,634 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Manuscript reviewer list
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>Manuscript reviewer detail</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-row>
+                <el-col :span="16">
+                    <div class="form-box">
+                        <el-form ref="articleform" :model="detailDate" label-width="200px">
+                            <el-form-item label="Article">
+                                <span>{{detailDate.article}}</span>
+                            </el-form-item>
+                            <el-form-item label="Reviewer">
+                                <span>{{detailDate.reviewer}}</span>
+                            </el-form-item>
+                            <el-form-item label="CreateTime">
+                                <span>{{formatDate(detailDate.ctime)}}</span>
+                            </el-form-item>
+                            <el-form-item label="Status">
+                                <span>{{mystate(detailDate.state)}}</span>
+                                <el-button
+                                    style="margin-left:10px;"
+                                    type="text"
+                                    @click="dialogFormVisible=true"
+                                    icon="el-icon-view"
+                                >See Feedback</el-button>
+                            </el-form-item>
+                            <!-- <el-form-item label="Article file">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="articlefileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="Date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="up_username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    class="upload-demo"
+                                    drag
+                                    :action="upload_file('articlefile')"
+                                    accept=".doc, .docx"
+                                    name="articlefile"
+                                    :before-upload="beforeupload_file"
+                                    :on-error="uperr_file"
+                                    :on-success="upSuccess_file"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilearticlefile"
+                                >
+                                    <i class="el-icon-upload"></i>
+                                    <div class="el-upload__text">
+                                        <em>Upload</em>
+                                    </div>
+                                    <div
+                                        class="el-upload__tip"
+                                        slot="tip"
+                                    >Only word files can be uploaded(.doc,.docx)</div>
+                                </el-upload>
+                            </el-form-item> -->
+                            <!-- <el-form-item label="Others">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="articlezipList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="Date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="up_username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="Download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    class="upload-demo"
+                                    drag
+                                    :action="upload_file('articlezip')"
+                                    accept=".rar, .zip"
+                                    name="articlezip"
+                                    :before-upload="beforeupload_articlezip"
+                                    :on-error="uperr_file"
+                                    :on-success="upSuccess_articlezip"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilearticlezip"
+                                >
+                                    <i class="el-icon-upload"></i>
+                                    <div class="el-upload__text">
+                                        <em>Upload</em>
+                                    </div>
+                                    <div
+                                        class="el-upload__tip"
+                                        slot="tip"
+                                    >Only compressed files can be uploaded(.rar,.zip)</div>
+                                </el-upload>
+                            </el-form-item> -->
+                            <!-- <el-form-item>
+                                <el-button type="primary" @click="onSubmit">submit</el-button>
+                            </el-form-item> -->
+                        </el-form>
+                    </div>
+                </el-col>
+                <el-col :span="8">
+                    <!-- <div class="tree_box">
+                        <h2>State tracking</h2>
+                        <div class="block">
+                            <el-timeline>
+                                <el-timeline-item
+                                    :timestamp="formatDate(form.ctime)"
+                                    placement="top"
+                                >
+                                    <el-card>
+                                        <h4>Article submission</h4>
+                                        <p>{{form.username}} Submit articles</p>
+                                    </el-card>
+                                </el-timeline-item>
+                                <el-timeline-item
+                                    v-for="(activity, index) in msgs"
+                                    :key="index"
+                                    :timestamp="formatDate(activity.ctime)"
+                                    placement="top"
+                                >
+                                    <el-card>
+                                        <p>state change :{{statetostr(activity.state_from)}} to {{statetostr(activity.state_to)}}</p>
+                                        <p>{{activity.content}}</p>
+                                    </el-card>
+                                </el-timeline-item>
+                            </el-timeline>
+                        </div>
+                    </div>-->
+                </el-col>
+            </el-row>
+        </div>
+        <el-dialog title="Feedback questionnaire" :visible.sync="dialogFormVisible">
+            <el-form
+                :model="questionform"
+                :rules="rules"
+                ref="question"
+                label-width="300px"
+                label-position="top"
+            >
+                <el-divider content-position="center">REFEREE'S ASSESSMENT</el-divider>
+                <el-form-item label="1.Originality of the topic">
+                    <el-radio-group v-model="questionform.qu1">
+                        <el-radio :label="1">Excellent</el-radio>
+                        <el-radio :label="2">Good</el-radio>
+                        <el-radio :label="3">Fair</el-radio>
+                        <el-radio :label="4">Poor</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="2.Technical Quality">
+                    <el-radio-group v-model="questionform.qu2">
+                        <el-radio :label="1">Excellent</el-radio>
+                        <el-radio :label="2">Good</el-radio>
+                        <el-radio :label="3">Fair</el-radio>
+                        <el-radio :label="4">Poor</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="3.Importance in its Field">
+                    <el-radio-group v-model="questionform.qu3">
+                        <el-radio :label="1">Excellent</el-radio>
+                        <el-radio :label="2">Good</el-radio>
+                        <el-radio :label="3">Fair</el-radio>
+                        <el-radio :label="4">Poor</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="4.Style & Overall Representation">
+                    <el-radio-group v-model="questionform.qu4">
+                        <el-radio :label="1">Excellent</el-radio>
+                        <el-radio :label="2">Good</el-radio>
+                        <el-radio :label="3">Fair</el-radio>
+                        <el-radio :label="4">Poor</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="5.Readily Understandable">
+                    <el-radio-group v-model="questionform.qu5">
+                        <el-radio :label="1">Excellent</el-radio>
+                        <el-radio :label="2">Good</el-radio>
+                        <el-radio :label="3">Fair</el-radio>
+                        <el-radio :label="4">Poor</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="6.Suitability for the Journal">
+                    <el-radio-group v-model="questionform.qu6">
+                        <el-radio :label="1">Excellent</el-radio>
+                        <el-radio :label="2">Good</el-radio>
+                        <el-radio :label="3">Fair</el-radio>
+                        <el-radio :label="4">Poor</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="7.Adequate Illustrations or Drawings">
+                    <el-radio-group v-model="questionform.qu7">
+                        <el-radio :label="1">Excellent</el-radio>
+                        <el-radio :label="2">Good</el-radio>
+                        <el-radio :label="3">Fair</el-radio>
+                        <el-radio :label="4">Poor</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="8.English language">
+                    <el-radio-group v-model="questionform.qu8">
+                        <el-radio :label="1">Excellent</el-radio>
+                        <el-radio :label="2">Good</el-radio>
+                        <el-radio :label="3">Fair</el-radio>
+                        <el-radio :label="4">Poor</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-collapse v-model="activeNames">
+                    <el-form-item label="9.Does the title represent manuscript's contents?">
+                        <el-switch v-model="questionform.qu9" active-text="yes" inactive-text="no"></el-switch>
+                        <el-collapse-item title="Comments/ Suggestions" name="1">
+                            <el-input
+                                type="textarea"
+                                placeholder="please input content"
+                                v-model="questionform.qu9contents"
+                                :rows="4"
+                            ></el-input>
+                        </el-collapse-item>
+                    </el-form-item>
+                    <el-form-item label="10.Is the Abstract accurate and concise?">
+                        <el-switch v-model="questionform.qu10" active-text="yes" inactive-text="no"></el-switch>
+                        <el-collapse-item title="Comments/ Suggestions" name="2">
+                            <el-input
+                                type="textarea"
+                                placeholder="please input content"
+                                v-model="questionform.qu10contents"
+                                :rows="4"
+                            ></el-input>
+                        </el-collapse-item>
+                    </el-form-item>
+                    <el-form-item label="11.Are the approach/ methods properly described?">
+                        <el-switch v-model="questionform.qu11" active-text="yes" inactive-text="no"></el-switch>
+                        <el-collapse-item title="Comments/ Suggestions" name="3">
+                            <el-input
+                                type="textarea"
+                                placeholder="please input content"
+                                v-model="questionform.qu11contents"
+                                :rows="4"
+                            ></el-input>
+                        </el-collapse-item>
+                    </el-form-item>
+                    <el-form-item label="12.Are the conclusions and interpretations sound?">
+                        <el-switch v-model="questionform.qu12" active-text="yes" inactive-text="no"></el-switch>
+                        <el-collapse-item title="Comments/ Suggestions" name="4">
+                            <el-input
+                                type="textarea"
+                                placeholder="please input content"
+                                v-model="questionform.qu12contents"
+                                :rows="4"
+                            ></el-input>
+                        </el-collapse-item>
+                    </el-form-item>
+                    <el-form-item label="13.Are the references properly cited?">
+                        <el-switch v-model="questionform.qu13" active-text="yes" inactive-text="no"></el-switch>
+                        <el-collapse-item title="Comments/ Suggestions" name="5">
+                            <el-input
+                                type="textarea"
+                                placeholder="please input content"
+                                v-model="questionform.qu13contents"
+                                :rows="4"
+                            ></el-input>
+                        </el-collapse-item>
+                    </el-form-item>
+                    <el-form-item label="14.Is this a new/ original/ confirmatory contribution?">
+                        <el-switch v-model="questionform.qu14" active-text="yes" inactive-text="no"></el-switch>
+                        <el-collapse-item title="Comments/ Suggestions" name="6">
+                            <el-input
+                                type="textarea"
+                                placeholder="please input content"
+                                v-model="questionform.qu14contents"
+                                :rows="4"
+                            ></el-input>
+                        </el-collapse-item>
+                    </el-form-item>
+                    <el-form-item label="15.Is it within the scope of the journal?">
+                        <el-switch v-model="questionform.qu15" active-text="yes" inactive-text="no"></el-switch>
+                        <el-collapse-item title="Comments/ Suggestions" name="7">
+                            <el-input
+                                type="textarea"
+                                placeholder="please input content"
+                                v-model="questionform.qu15contents"
+                                :rows="4"
+                            ></el-input>
+                        </el-collapse-item>
+                    </el-form-item>
+                    <el-divider content-position="center">REFEREE'S RECOMMENDATIONS</el-divider>
+                    <el-form-item label="Overall the Paper is Rated">
+                        <span>reviewer score:{{questionform.rated}}</span>
+                    </el-form-item>
+                    <el-form-item label="REFEREE'S RECOMMENDATIONS" prop="recommend">
+                        <el-radio-group v-model="questionform.recommend">
+                            <el-radio :label="1">Accept with minor changes</el-radio>
+                            <br />
+                            <el-radio :label="2">Accept subject to revisions, as noted in comments</el-radio>
+                            <br />
+                            <el-radio :label="3">Reject in current form, but may be resubmitted</el-radio>
+                            <br />
+                            <el-radio :label="4">Reject, with no resubmission</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="OTHER SPECIFIC CRITICISMS">
+                        <el-radio-group v-model="questionform.other">
+                            <el-radio :label="1">Imperfect style</el-radio>
+                            <br />
+                            <el-radio :label="2">Too long</el-radio>
+                            <br />
+                            <el-radio :label="3">References incorrectly presented</el-radio>
+                            <br />
+                            <el-radio :label="4">Typographical and Grammatical errors</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="Confidential Comments to the Editor">
+                        <el-input
+                            type="textarea"
+                            placeholder="please input content"
+                            v-model="questionform.confident"
+                            :rows="8"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="Comments for the Authors">
+                        <el-input
+                            type="textarea"
+                            placeholder="please input content"
+                            v-model="questionform.comment"
+                            :rows="8"
+                        ></el-input>
+                    </el-form-item>
+                </el-collapse>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: this.Common.mediaUrl,
+            dateId: this.$route.query.id,
+            username: localStorage.getItem('ms_username'),
+            articlefileList: [],
+            articlezipList: [],
+            dialogFormVisible: false,
+            activeNames: ['1', '2', '3', '4', '5', '6', '7'],
+            detailDate: {
+                editor: localStorage.getItem('ms_username'),
+                artrevid: '',
+                article: '',
+                reviewer: '',
+                articlefile: '',
+                articlezip: '',
+                ctime: '',
+                state: ''
+            },
+            questionform: {
+                rev_qu_id: '',
+                art_rev_id: this.$route.query.id,
+                qu1: '',
+                qu2: '',
+                qu3: '',
+                qu4: '',
+                qu5: '',
+                qu6: '',
+                qu7: '',
+                qu8: '',
+                qu9: 'false',
+                qu9contents: '',
+                qu10: 'false',
+                qu10contents: '',
+                qu11: 'false',
+                qu11contents: '',
+                qu12: 'false',
+                qu12contents: '',
+                qu13: 'false',
+                qu13contents: '',
+                qu14: 'false',
+                qu14contents: '',
+                qu15: 'false',
+                qu15contents: '',
+                rated: '',
+                recommend: '',
+                other: '',
+                confident: '',
+                comment: ''
+            }
+        };
+    },
+    created: function () {
+        this.getDate();
+        this.initFileList();
+        this.initquesion();
+    },
+    computed: {},
+    methods: {
+        upload_file(type) {
+            return this.baseUrl + 'api/reviewer/up_file/type/' + type;
+        },
+        onSubmit() {
+            if (this.detailDate.articlefile == '') {
+                this.$message.error('you must upload article file');
+                console.log('file up error');
+                return false;
+            }
+            this.$api
+                .post('api/Reviewer/articleReviewerUpSubmit/type/editor', this.detailDate)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.$message.success('success');
+                        this.$router.go(0);
+                    } else {
+                        this.$message.error('Failed to submit, please contact administrator!');
+                        console.log(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化详情信息
+        getDate() {
+            this.$api
+                .post('api/Reviewer/getartrevdate', { revid: this.dateId, human: 'editor' })
+                .then((res) => {
+                    this.detailDate.artrevid = res.art_rev_id;
+                    this.detailDate.article = res.article_title;
+                    this.detailDate.reviewer = res.account;
+                    this.detailDate.ctime = res.ctime;
+                    this.detailDate.state = res.state;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化filelist
+        initFileList() {
+            this.$api
+                .post('api/Reviewer/getFilelistByID', { revid: this.dateId })
+                .then((res) => {
+                    this.articlefileList = res.hasOwnProperty('articlefile') ? res.articlefile : [];
+                    this.articlezipList = res.hasOwnProperty('articlezip') ? res.articlezip : [];
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化问卷
+        initquesion() {
+            this.$api.post('api/Reviewer/getQuestion', { artrevid: this.dateId }).then((res) => {
+                if (res.code == 0) {
+                    this.questionform.rev_qu_id = res.data.rev_qu_id;
+                    this.questionform.qu1 = res.data.qu1;
+                    this.questionform.qu2 = res.data.qu2;
+                    this.questionform.qu3 = res.data.qu3;
+                    this.questionform.qu4 = res.data.qu4;
+                    this.questionform.qu5 = res.data.qu5;
+                    this.questionform.qu6 = res.data.qu6;
+                    this.questionform.qu7 = res.data.qu7;
+                    this.questionform.qu8 = res.data.qu8;
+                    this.questionform.qu9 = res.data.qu9;
+                    this.questionform.qu9contents = res.data.qu9_contents;
+                    this.questionform.qu10 = res.data.qu10 == 0 ? false : true;
+                    this.questionform.qu10contents = res.data.qu10_contents;
+                    this.questionform.qu11 = res.data.qu11 == 0 ? false : true;
+                    this.questionform.qu11contents = res.data.qu11_contents;
+                    this.questionform.qu12 = res.data.qu12 == 0 ? false : true;
+                    this.questionform.qu12contents = res.data.qu12_contents;
+                    this.questionform.qu13 = res.data.qu13 == 0 ? false : true;
+                    this.questionform.qu13contents = res.data.qu13_contents;
+                    this.questionform.qu14 = res.data.qu14 == 0 ? false : true;
+                    this.questionform.qu14contents = res.data.qu14_contents;
+                    this.questionform.qu15 = res.data.qu15 == 0 ? false : true;
+                    this.questionform.qu15contents = res.data.qu15_contents;
+                    this.questionform.rated = res.data.rated;
+                    this.questionform.recommend = res.data.recommend;
+                    this.questionform.other = res.data.other;
+                    this.questionform.confident = res.data.confidential;
+                    this.questionform.comment = res.data.comments;
+                }
+            });
+        },
+        //检验上传文件的格式
+        beforeupload_file(file) {
+            // const isWORd =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+            // if (!isWORd) {
+            //     this.$message.error('Only word files can be uploaded(.doc,.docx)');
+            // }
+            // return isWORd;
+        },
+        beforeupload_articlezip(file) {
+            // const iszip = file.type === 'application/x-zip-compressed' || file.name.split('.')[1] === 'rar';
+            // if (!iszip) {
+            //     this.$message.error('Only compressed files can be uploaded(.rar,.zip)');
+            // }
+            // return iszip;
+        },
+        getlinkurl(row) {
+            return this.mediaUrl + row.file_url;
+        },
+        filedateformate(row, column, cellValue, index) {
+            return this.formatDate(cellValue);
+        },
+        uperr_file(err) {
+            this.$message.error('上传失败');
+        },
+        beforeupload() {},
+        upSuccess_file(res, file) {
+            if (res.code == 0) {
+                this.detailDate.articlefile = 'articlefile/' + res.upurl;
+            } else {
+                this.$message.error('服务器上传错误：' + res.msg);
+            }
+        },
+        upSuccess_articlezip(res, file) {
+            if (res.code == 0) {
+                this.detailDate.articlezip = 'articlezip/' + res.upurl;
+            } else {
+                this.$message.error('服务器上传错误：' + res.msg);
+            }
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+        //超出传送文件个数限制
+        alertlimit() {
+            this.$message.error('超过最大上传文件个数');
+        },
+        //清除文件时的事件
+        removefilearticlefile(file, fileList) {
+            this.detailDate.articlefile = '';
+        },
+        removefilearticlezip(file, fileList) {
+            this.detailDate.articlezip = '';
+        },
+        mystate(mystate) {
+            let str = '';
+            switch (mystate) {
+                case 0:
+                    str = 'With reviewer';
+                    break;
+                case 1:
+                    str = 'Revision';
+                    break;
+                case 2:
+                    str = 'Reject';
+                    break;
+                case 3:
+                    str = 'Accepted';
+                    break;
+            }
+            return str;
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.dwnbtn {
+    margin-bottom: 5px;
+}
+.container {
+    min-width: 1000px;
+}
+.tree_box {
+    padding: 15px 10px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

src/components/page/articleRevise.vue

@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Manuscript revise
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>Manuscript revise</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="form-box" v-loading="loading">
+                <el-form ref="articleform" :model="form" :rules="rules" label-width="110px">
+                    <el-form-item label="Status:">
+                        <span>{{articleState}}</span>
+                    </el-form-item>
+                    <el-form-item v-if="form.accept_sn != ''" label="Manuscript ID:">
+                        <span>{{form.accept_sn}}</span>
+                    </el-form-item>
+                    <el-form-item label="Journal:">
+                        <span>{{form.journalname}}</span>
+                    </el-form-item>
+                    <el-form-item label="Title:">
+                        <span>{{form.title}}</span>
+                    </el-form-item>
+                    <el-form-item label="Suggest">
+                        <el-input
+                            type="textarea"
+                            autosize
+                            v-model="suggest"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-col :offset="4">
+                            <el-button type="primary" @click="revise" >Revise</el-button>
+                        </el-col>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: this.Common.mediaUrl,
+            suggest : '',
+            form: {
+                articleId: this.$route.query.id,
+                journal: '',
+                journalname: '',
+                username: localStorage.getItem('ms_username'),
+                title: '',
+                accept_sn: '',
+                abstrart: '',
+                keyWords: '',
+                type: '',
+                approval: false,
+                fund: '',
+                coverLetter: '',
+                picturesAndTables: [],
+                manuscirpt: '',
+                state: '',
+                ctime: '',
+                authorList: []
+            }
+        };
+    },
+    created: function () {
+        this.initarticle();
+    },
+    computed: {
+        articleState: function () {
+            let str = '';
+            switch (this.form.state) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');
+                    break;
+            }
+            return str;
+        }
+    },
+    methods: {
+        revise(){
+            this.$router.push({ path: 'articleDetail', query: { id: this.$route.query.id } });
+        },
+        //初始化期刊信息
+        initarticle() {
+            this.$api
+                .post('api/Article/getArticleDetail', { articleId: this.form.articleId, human: 'author' })
+                .then((res) => {
+                    this.form.title = res.article.title;
+                    this.form.journal = res.article.journal_id;
+                    this.form.journalname = res.article.journalname;
+                    this.form.abstrart = res.article.abstrart;
+                    this.form.accept_sn = res.article.accept_sn;
+                    this.form.keyWords = res.article.keywords;
+                    this.form.fund = res.article.fund;
+                    this.form.state = res.article.state;
+                    this.form.type = res.article.type;
+                    (this.form.approval = res.article.approval == 1 ? true : false), (this.form.ctime = res.article.ctime);
+                    this.msgs = res.msg;
+                    this.suggest = res.suggest;
+                    this.form.authorList = [];
+                    var alist = res.authors;
+                    for (var i in alist) {
+                        this.form.authorList.push({
+                            art_aut_id: alist[i].art_aut_id,
+                            firstname: alist[i].firstname,
+                            lastname: alist[i].lastname,
+                            company: alist[i].company,
+                            department: alist[i].department,
+                            title: alist[i].author_title,
+                            country: alist[i].country,
+                            email: alist[i].email,
+                            address: alist[i].address,
+                            isSuper: alist[i].is_super == 1 ? true : false,
+                            isReport: alist[i].is_report == 1 ? true : false
+                        });
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        }
+    }
+};
+</script>

src/components/page/authorApplyReviewer.vue

@@ -0,0 +1,279 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Add manuscirpt
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="addarticle-box" v-loading="loading">
+                <el-form ref="reviewerform" :model="reviewerForm" :rules="rules" label-width="120px">
+                    <el-form-item label="Journal" prop="journal">
+                        <el-select v-model="reviewerForm.journal" placeholder="Please select">
+                            <el-option
+                                v-for="item in items"
+                                :key="item.journal_id"
+                                :label="item.title"
+                                :value="item.journal_id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 性别 -->
+                    <el-form-item label="Gender">
+                        <el-radio-group v-model="reviewerForm.gender">
+                            <el-radio :label="1">male</el-radio>
+                            <el-radio :label="2">female</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <!-- 简介  -->
+                    <el-form-item prop="introduction" label="Introduction">
+                        <el-input
+                            type="textarea"
+                            rows="5"
+                            v-model="reviewerForm.introduction"
+                            placeholder="Please input personal qualification and resume"
+                        ></el-input>
+                    </el-form-item>
+                    <!-- 国家 -->
+                    <el-form-item prop="country" label="Country">
+                        <el-select v-model="reviewerForm.country" placeholder="Please select">
+                                        <el-option
+                                            v-for="it in countrys"
+                                            :key="it.en_name"
+                                            :label="it.en_name"
+                                            :value="it.en_name"
+                                        ></el-option>
+                                    </el-select>
+                    </el-form-item>
+                    <!-- 专业 -->
+                    <el-form-item prop="major" label="Major">
+                        <el-select v-model="reviewerForm.major" placeholder="Please select">
+                            <el-option
+                                v-for="ii in majorList"
+                                :key="ii.major_id"
+                                :label="ii.title+ii.ctitle"
+                                :value="ii.major_id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 领域 -->
+                    <el-form-item prop="field" label="field">
+                        <el-input
+                            size="small"
+                            v-model="reviewerForm.field"
+                            auto-complete="off"
+                            placeholder="field"
+                        ></el-input>
+                    </el-form-item>
+                    <!-- 职称 -->
+                    <el-form-item prop="technical" label="Technical">
+                        <el-select v-model="reviewerForm.technical" placeholder="Please select">
+                            <el-option key="Prof." label="Prof." value="Prof."></el-option>
+                            <el-option
+                                key="Associate Prof."
+                                label="Associate Prof."
+                                value="Associate Prof."
+                            ></el-option>
+                            <el-option
+                                key="Assistant Prof."
+                                label="Assistant Prof."
+                                value="Assistant Prof."
+                            ></el-option>
+                            <el-option key="Ph.D." label="Ph.D." value="Ph.D."></el-option>
+                            <el-option key="Others" label="Others" value="Others"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 单位 -->
+                    <el-form-item prop="company" label="Affiliation">
+                        <el-input
+                            size="small"
+                            v-model="reviewerForm.company"
+                            auto-complete="off"
+                            placeholder="Affiliation"
+                        >
+                            <i slot="prefix" class="el-icon-user"></i>
+                        </el-input>
+                    </el-form-item>
+                <el-form-item label="qualifications">
+                    <el-upload
+                        class="upload-demo"
+                        :action="upload_qualifications"
+                        accept=".rar, .zip"
+                        name="qualifications"
+                        :on-error="uperr"
+                        :on-success="upSuccess"
+                        :limit="1"
+                        :on-exceed="alertlimit"
+                        :on-remove="removefile"
+                    >
+                        <div class="el-upload__text">
+                            <em>click upload</em>
+                        </div>
+                        <div
+                            class="el-upload__tip"
+                            slot="tip"
+                        >Only compressed files can be uploaded(.rar,.zip)</div>
+                    </el-upload>
+                </el-form-item>
+                    <el-form-item>
+                        <el-col :offset="4">
+                            <el-button type="primary" @click="onSubmit">Submit</el-button>
+                        </el-col>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Schart from 'vue-schart';
+import bus from '../common/bus';
+export default {
+    name: 'dashboard',
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            name:localStorage.getItem('ms_username'),
+            userdata: '',
+            loading: false,
+            reviewerForm: {
+                username: localStorage.getItem('ms_username'),
+                journal: '',
+                gender:1,
+                introduction:'',
+                country:'',
+                major:'',
+                field:'',
+                technical:'',
+                company:'',
+                qualifications:''
+            },
+            rules: {
+                journal: [{ required: true, message: 'please select a journal', trigger: 'blur' }],
+                introduction: [{ required: true, message: 'Please input personal qualification and resume', trigger: 'blur' }],
+                country:[{required: true, message: 'Please enter country', trigger: 'blur'}],
+                major:[{required:true,message:'Please select a major',trigger:'blur'}],
+                technical:[{required: true, message: 'Please select technical', trigger: 'blur'}],
+                field:[{required: true, message: 'Please enter field', trigger: 'blur'}],
+                company: [{ required: true, message: 'enter your company', trigger: 'blur' }],
+            },
+            items: [],
+            countrys:[],
+            majorList:[],
+        };
+    },
+    created: function () {
+        this.initselect();
+        this.getUserdata();
+        this.initCountrys();
+        this.initMajor();
+    },
+    computed: {
+        role() {
+            console.log(this.userrole);
+            let frag = 'dads';
+            switch (this.userrole) {
+                case '1':
+                    frag = this.$t('total.author');
+                    break;
+                case '2':
+                    frag = this.$t('total.editor');
+                    break;
+                case 'reviewer':
+                    frag = this.$t('total.reviewers') + '&' + this.$t('total.author');
+                    break;
+                case 'admin':
+                    frag = this.$t('total.admin');
+                    break;
+            }
+            return frag;
+        },
+        my_login_time() {
+            return this.formatDate(this.userdata.last_login_time);
+        },
+        upload_qualifications: function() {
+            return this.baseUrl + 'api/Admin/up_file';
+        }
+    },
+    methods: {
+        onSubmit(){
+            this.$refs.reviewerform.validate(vali=>{
+                if(vali){
+                    this.loading = true;
+                    this.$api.post('api/Admin/becameReviewer',this.reviewerForm)
+                    .then(res=>{console.log(res);
+                        this.loading = false;
+                        this.$message.success('Success!');
+                        this.$router.push('/');
+                    });
+                }
+            });
+
+        },
+        getUserdata() {
+            this.$api
+                .post('api/user/getUserdata', { account: this.name })
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.userdata = res.data;
+                    } else {
+                        this.$message.error('get userinfo error');
+                        console.log('error getuserdata');
+                    }
+                })
+                .catch((err) => {});
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+        initCountrys() {
+            this.$api.post('api/Admin/getCountrys').then((res) => {
+                this.countrys = res;
+            });
+        },
+        initMajor(){
+            this.$api.post('api/User/getMajorList')
+            .then(res=>{
+                this.majorList = res.data;
+            })
+        },
+        initselect() {
+            this.$api
+                .post('api/Admin/getJournalchu',{username:this.reviewerForm.username})
+                .then((res) => {
+                    this.items = res;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        uperr(err) {
+            this.$message.error('upload defailed:' + err);
+        },
+        upSuccess(res, file) {
+            if (res.code == 0) {
+                this.reviewerForm.qualifications = 'reviewer/' + res.upurl;
+            } else {
+                this.$message.error('Server upload error：' + res.msg);
+            }
+        },
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        },
+        removefile() {
+            this.reviewerForm.qualifications = '';
+        },
+    }
+};
+</script>
+

src/components/page/editorAdd.vue

@@ -0,0 +1,86 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-user"></i> Add editor
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="form-box">
+                <el-form ref="editorform" :model="form" :rules="rules" label-width="200px">
+                    <el-form-item label="username" prop="username">
+                        <el-input v-model="form.username" placeholder="username"></el-input>
+                    </el-form-item>
+                    <el-form-item label="password" prop="password">
+                        <el-input v-model="form.password" placeholder="password"></el-input>
+                    </el-form-item>
+                    <el-form-item label="email" prop="email">
+                        <el-input v-model="form.email" placeholder="example@gmail.com"></el-input>
+                    </el-form-item>
+                    <el-form-item label="phone" prop="phone">
+                        <el-input v-model="form.phone" placeholder="phone"></el-input>
+                    </el-form-item>
+                    <el-form-item label="realname" prop="realname">
+                        <el-input v-model="form.realname" placeholder="realname"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmit">add</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                username: '',
+                password: '',
+                email: '',
+                phone: '',
+                realname: ''
+            },
+            rules: {
+                username: [{ required: true, message: 'Please enter a username', trigger: 'blur' }],
+                password: [
+                    { required: true, message: 'Please input a password', trigger: 'blur' },
+                    { min: 6, message: 'The password number cannot be less than 6 digits', trigger: 'blur' }
+                ],
+                email: [
+                    { required: true, message: 'Please enter email', trigger: 'blur' },
+                    { type: 'email', message: 'Email address format error（example@gmail.com）', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    methods: {
+        onSubmit() {
+            this.$refs.editorform.validate(valid => {
+                if (valid) {
+                    this.$api
+                        .post('api/Admin/addEditor', this.form)
+                        .then(res => {
+                            if(res.code==0){
+                                this.$message.success('add success!');
+                                this.$router.push('/editorList');
+                            }else{
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch(err => {
+                            this.$message.error(err);
+                        });
+                } else {
+                    this.$message.error('Failed to submit. Please ensure the integrity of the information');
+                    return false;
+                }
+            });
+        }
+    }
+};
+</script>

src/components/page/editorList.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-user"></i> Editor list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="handle-box">
+                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addEditor">add</el-button>
+            </div>
+            
+            <el-table
+                :data="tableData"
+                border
+                stripe
+                class="table"
+                ref="multipleTable"
+                header-cell-class-name="table-header"
+            >
+                <el-table-column prop="user_id" label="ID" align="center"></el-table-column>
+                <el-table-column prop="account" label="username" align="center"></el-table-column>
+                <el-table-column prop="realname" label="realname" align="center"></el-table-column>
+                <el-table-column prop="phone" label="phone" align="center"></el-table-column>
+                <el-table-column prop="email" label="email" align="center"></el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            query: {
+                pageIndex: 1,
+                pageSize: 10
+            },
+            tableData: [],
+            Total: 0
+        };
+    },
+    created() {
+        this.getdate();
+    },
+    methods: {
+        // 获取编辑列表数据
+        getdate() {
+            this.$api
+                .post('api/Admin/getEditor', this.query)
+                .then(res => {
+                    this.Total = res.total;
+                    this.tableData = res.data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        addEditor(){
+            this.$router.push('/EditorAdd');
+        },
+        // showdetail(row) {
+        //     this.$router.push({ path: 'articleDetail', query: { id: row.article_id } });
+        // }
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.el-table .warning-row {
+    background: #f3ca7f;
+}
+.el-table .success-row {
+    background: #bcfc9a;
+}
+.el-table .normol-row{
+    background: #d8f1c7
+}
+.el-table .red-row{
+    background: #f05555;
+}
+</style>

src/components/page/journalAdd.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-user"></i> Add journal
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="form-box">
+                <el-form ref="journalform" :model="form" :rules="rules" label-width="200px">
+                    <el-form-item label="Title" prop="title">
+                        <el-input v-model="form.title" placeholder="Journal title"></el-input>
+                    </el-form-item>
+                    <el-form-item label="Issn" prop="issn">
+                        <el-input v-model="form.issn" placeholder="Issn like 2413-3973"></el-input>
+                    </el-form-item>
+                    <el-form-item label="Alias" prop="alias">
+                        <el-input v-model="form.alias" placeholder="Alias like 97A"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmit">Add</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+                title: '',
+                issn: '',
+                alias:''
+            },
+            rules: {
+                title: [{ required: true, message: 'Please enter a title', trigger: 'blur' }],
+                issn: [{ required: true, message: 'Please enter a issn', trigger: 'blur' }],
+                alias: [{ required: true, message: 'Please enter a issn', trigger: 'blur' }]
+            }
+        };
+    },
+    methods: {
+        onSubmit() {
+            this.$refs.journalform.validate(valid => {
+                if (valid) {
+                    this.$api
+                        .post('api/Admin/journalAdd', this.form)
+                        .then(res => {
+                            if(res.code==0){
+                                this.$message.success('add success!');
+                                this.$router.push('/journalList');
+                            }else{
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch(err => {
+                            this.$message.error(err);
+                        });
+                } else {
+                    this.$message.error('Failed to submit. Please ensure the integrity of the information');
+                    return false;
+                }
+            });
+        }
+    }
+};
+</script>

src/components/page/journallist.vue

@@ -0,0 +1,211 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-user"></i> Journal list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="handle-box">
+                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addJournal">add</el-button>
+            </div>
+            <el-table
+                :data="tableData"
+                border
+                stripe
+                class="table"
+                ref="multipleTable"
+                header-cell-class-name="table-header"
+            >
+                <el-table-column prop="journal_id" label="ID" align="center"></el-table-column>
+                
+                <el-table-column prop="title" label="Title" align="center"></el-table-column>
+                <el-table-column prop="issn" label="Issn" align="center"></el-table-column>
+                <el-table-column prop="alias" label="Alias" align="center"></el-table-column>
+                <el-table-column prop="editor" label="Editor" align="center"></el-table-column>
+                <el-table-column label="" width="200" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            type="text"
+                            plain
+                            icon="el-icon-tickets"
+                            @click="showdetail(scope.row)"
+                        >detail</el-button>
+                        <el-button
+                            type="text"
+                            plain
+                            icon="el-icon-edit"
+                            @click="handleChange(scope.row)"
+                        >change</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+        <el-dialog title="change" :visible.sync="editVisible" width="40%">
+            <el-form ref="changform" :model="change" label-width="80px">
+                <el-form-item label="editormsg">
+                    <span>{{change.title}}</span>
+                </el-form-item>
+                <el-form-item label="state">
+                    <el-select v-model="change.editorId" placeholder="Please select">
+                        <el-option :key="0" label="Please select" :value="0"></el-option>
+                        <el-option
+                            v-for="item in editorList"
+                            :key="item.user_id"
+                            :label="item.account"
+                            :value='item.user_id'
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="editVisible = false">cancel</el-button>
+                <el-button type="primary" @click="saveChange">save</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            query: {
+                pageIndex: 1,
+                pageSize: 10
+            },
+            change:{
+                journalId:0,
+                editorId:0,
+                title:''
+            },
+            tableData: [],
+            editorList:[],
+            Total: 0,
+            editVisible: false,
+        };
+    },
+    created() {
+        this.getdate();
+        this.initEditorList();
+    },
+    methods: {
+        // 获取编辑列表数据
+        getdate() {
+            this.$api
+                .post('api/Admin/getJournals', this.query)
+                .then(res => {
+                    this.Total = res.total;
+                    this.tableData = res.data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        addJournal(){
+            this.$router.push('/journalAdd');
+        },
+        showdetail(row) {
+            alert('Under development');
+        },
+        //更改期刊编辑
+        handleChange(row){
+            this.change.journalId = row.journal_id;
+            this.change.editorId = row.editor_id;
+            this.change.title = row.title;
+            this.editVisible =true;
+        },
+        //更改期刊编辑
+        saveChange(){
+            this.$api.post('api/Admin/journalEditorChange',this.change)
+            .then(res=>{
+                if(res.code==0){
+                    this.$message.success('change success');
+                    this.editVisible=false;
+                    this.getdate();
+                }else{
+                    this.$message.error('Change failed');
+                }
+            })
+            .catch(err=>{
+                console.log(err);
+            });
+
+        },
+        //获取编辑列表
+        initEditorList(){
+            this.$api.post('api/Admin/getEditorList')
+            .then(res=>{
+                if(res.code==0){
+                    this.editorList = res.data;
+                }else{
+                    this.$message.error(res.msg);
+                }
+            })
+            .catch(err=>{
+                console.log(err);
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.el-table .warning-row {
+    background: #f3ca7f;
+}
+.el-table .success-row {
+    background: #bcfc9a;
+}
+.el-table .normol-row{
+    background: #d8f1c7
+}
+.el-table .red-row{
+    background: #f05555;
+}
+</style>

src/components/page/monitorManuscript.vue

@@ -0,0 +1,272 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-cascades"></i> Manuscript list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="handle-box">
+                <el-select v-model="query.journal" size="medium" @change="getdate" placeholder="Please select journal">
+                    <el-option :key="0" label="All journal" :value="0"></el-option>
+                    <el-option
+                        v-for="item in items"
+                        :key="item.journal_id"
+                        :label="item.title"
+                        :value="item.journal_id"
+                    ></el-option>
+                </el-select>
+                <el-select v-model="query.state" @change="getdate" placeholder="Please select status" style="margin-left:5px;">
+                    <el-option :key="-1" label="All status" :value="-1"></el-option>
+                    <el-option :key="0" :label="$t('artstate.state0')" :value="0" :disabled="query.act==2"></el-option>
+                    <el-option :key="1" :label="$t('artstate.state1')" :value="1" :disabled="query.act==2"></el-option>
+                    <el-option :key="2" :label="$t('artstate.state2')" :value="2" :disabled="query.act==2"></el-option>
+                    <el-option :key="3" :label="$t('artstate.state3')" :value="3" :disabled="query.act==1"></el-option>
+                    <el-option :key="4" :label="$t('artstate.state4')" :value="4" :disabled="query.act==2"></el-option>
+                    <el-option :key="5" :label="$t('artstate.state5')" :value="5" :disabled="query.act==1"></el-option>
+                </el-select>
+                <el-select v-model="query.act" @change="getdate" placeholder="Please select status" style="margin-left:5px;">
+                    <el-option :key="1" :label="$t('artstate.act1')" :value="1"></el-option>
+                    <el-option :key="2" :label="$t('artstate.act2')" :value="2"></el-option>
+                </el-select>
+            </div>
+            <el-table
+                :data="tableData"
+                border
+                ref="multipleTable"
+            >
+                >
+                <el-table-column type="index" label="No." width="55" align="center"></el-table-column>
+                <!-- <el-table-column prop="article_id" label="ID" width="55" align="center"></el-table-column> -->
+                <el-table-column prop="title" label="Title" align="left"></el-table-column>
+                <el-table-column prop="abbr" label="Journal" width="80" align="center"></el-table-column>
+                <el-table-column :formatter="typeFormat" label="Type" width="100" align="center"></el-table-column>
+                <el-table-column :formatter="repeFormat" prop="repetition" label="Repetition" width="80" align="center"></el-table-column>
+                <el-table-column prop="realname" label="Editor" width="100" align="center"></el-table-column>
+                <el-table-column :formatter="dateFormat" prop="ctime" width="100" label="Add date" align="center"></el-table-column>
+                <el-table-column
+                    prop="state"
+                    label="Status"
+                    :formatter="stateFormat"
+                    align="center"
+                    width="100"
+                ></el-table-column>
+                <el-table-column prop="country" label="Country" width="120" align="center"></el-table-column>
+                <el-table-column label="" width="100" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            plain
+                            icon="el-icon-tickets"
+                            @click="showdetail(scope.row)"
+                        >detail</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: '',
+            query: {
+                journal: 0,
+                state:-1,
+                act:1,
+                pageIndex: 1,
+                pageSize: 10
+            },
+            tableData: [],
+            multipleSelection: [],
+            delList: [],
+            editVisible: false,
+            Total: 0
+            // form: {},
+            // idx: -1,
+            // id: -1
+        };
+    },
+    created() {
+        this.initselect();
+        this.getdate();
+    },
+    methods: {
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal')
+                .then(res => {
+                    this.items = res;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 获取数据
+        getdate() {
+            this.$api
+                .post('api/Admin/getArticle', this.query)
+                .then(res => {console.log(res);
+                    this.Total = res.total;
+                    this.tableData = res.data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 触发搜索按钮
+        handleSearch() {
+            this.$set(this.query, 'pageIndex', 1);
+            this.getdate();
+        },
+        //跳转到增加稿件页面
+        addArticle() {
+            this.$router.push('/articleAdd');
+        },
+        //格式化状态输出
+        stateFormat(row, column) {
+            let str = '';
+            switch (row.state) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');;
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');;
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');;
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');;
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');;
+                    break;
+                default:
+                    str = 'error!!';
+            }
+            return str;
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        showdetail(row) {
+            this.$router.push({ path: 'monitorManuscriptDetail', query: { id: row.article_id } });
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if(row.editor_act == 1){
+                return 'hasChange-row';
+            }
+        },
+        dateFormat(row, column, cellValue, index){
+            return this.formatDate(cellValue);
+        },
+        nameformate(row, column, cellValue, index){
+            return row.username+'('+row.realname+')';
+        },
+        repeFormat(row, column, cellValue, index){
+            return cellValue+'%';
+        },
+        typeFormat(row, column, cellValue, index){
+            let frag = '';
+            switch(row.type){
+                case "A":
+                    frag = 'Article';
+                    break;
+                case 'B':
+                    frag = 'Review';
+                    break;
+                case 'C':
+                    frag = 'Case report';
+                    break;
+                case 'M':
+                    frag = 'Meta-analysis';
+                    break;
+                case 'P':
+                    frag = 'Research proposal';
+                    break;
+                case 'N':
+                    frag = 'News';
+                    break;
+                case 'T':
+                    frag = 'Comment';
+                    break;
+                default:
+                    frag = 'Others';
+            }
+            return frag;
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D;
+            // return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.item{
+    margin-top: 5px;
+}
+</style>
+<style>
+.el-table .hasChange-row{
+    background-color: #ffebe8;
+}
+</style>

src/components/page/monitorManuscriptDetail.vue

@@ -0,0 +1,703 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Manuscript detail
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-row>
+                <el-col :span="16">
+                    <div class="form-box">
+                        <el-form ref="articleform" :model="form" label-width="200px">
+                            <el-form-item label="Status">
+                                <span>{{articleState}}</span>
+                            </el-form-item>
+                            <el-form-item v-if="form.accept_sn != ''" label="Manusript ID">
+                                <span>{{form.accept_sn}}</span>
+                            </el-form-item>
+                            <el-form-item label="Journal">
+                                <span>{{form.journalname}}</span>
+                            </el-form-item>
+                            <el-form-item label="Title">
+                                <span>{{form.title}}</span>
+                            </el-form-item>
+                            <el-form-item label="Type">
+                                <span>{{myType}}</span>
+                            </el-form-item>
+                            <el-form-item label="Repetition" v-show="form.repezip!=''">
+                                <el-link
+                                    type="primary"
+                                    icon="el-icon-download"
+                                    :href="this.mediaUrl + form.repezip"
+                                >Download</el-link>
+                            </el-form-item>
+                            <el-form-item label="Ethical Approval" v-show="form.type=='A'">
+                                <span>{{form.approval?'yes':'no'}}</span>
+                            </el-form-item>
+                            <el-form-item label="Author">
+                                <el-collapse>
+                                    <el-collapse-item
+                                        v-for="(item, index) in form.authorList"
+                                        :key="index"
+                                        :name="index+1"
+                                    >
+                                        <template
+                                            slot="title"
+                                        >Author {{index+1}} :{{item.firstname}} {{item.lastname}} {{item.isSuper?'#':''}}{{item.isReport?'*':''}}</template>
+                                        <el-form-item
+                                            label="E-mail:"
+                                            label-width="100px"
+                                        >{{item.email}}</el-form-item>
+                                        <el-form-item
+                                            label="Name:"
+                                            label-width="100px"
+                                        >{{item.firstname}} {{item.lastname}}</el-form-item>
+                                        <el-form-item label="First author:" label-width="100px">
+                                            <el-switch
+                                                v-model="item.isSuper"
+                                                active-text="yes"
+                                                inactive-text="no"
+                                            ></el-switch>
+                                        </el-form-item>
+                                        <el-form-item
+                                            label="Corresponding Author:"
+                                            label-width="160px"
+                                        >
+                                            <el-switch
+                                                v-model="item.isReport"
+                                                active-text="yes"
+                                                inactive-text="no"
+                                            ></el-switch>
+                                        </el-form-item>
+                                        <el-form-item
+                                            label="Address"
+                                            label-width="100px"
+                                            v-show="item.isReport"
+                                        >{{item.address}}</el-form-item>
+                                        <el-form-item
+                                            label="Institution:"
+                                            label-width="100px"
+                                        >{{item.company}}</el-form-item>
+                                        <el-form-item
+                                            label="Department:"
+                                            label-width="100px"
+                                        >{{item.department}}</el-form-item>
+                                        <el-form-item
+                                            label="Title:"
+                                            label-width="100px"
+                                        >{{item.title}}</el-form-item>
+                                        <el-form-item
+                                            label="Country:"
+                                            label-width="100px"
+                                        >{{item.country}}</el-form-item>
+                                    </el-collapse-item>
+                                </el-collapse>
+                            </el-form-item>
+                            <el-form-item label="Abstrart">
+                                <span>{{form.abstrart}}</span>
+                            </el-form-item>
+                            <el-form-item label="KeyWords">
+                                <span>{{form.keyWords}}</span>
+                            </el-form-item>
+                            <el-form-item label="Fund">
+                                <span>{{form.fund}}</span>
+                            </el-form-item>
+                            <el-form-item label="Cover letter">
+                                <!-- <el-link
+                                    :underline="false"
+                                    :href="coverLetterUrl"
+                                    type="primary"
+                                >download latest version</el-link>-->
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="coverLetterFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                            </el-form-item>
+                            <el-form-item label="Figures">
+                                <!-- <el-link
+                                    :underline="false"
+                                    :href="picturesAndTablesUrl"
+                                    type="primary"
+                                >download latest version</el-link>-->
+
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="picturesAndTablesFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                            </el-form-item>
+                            <el-form-item label="Title page">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="totalpageFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                            </el-form-item>
+                            <el-form-item label="Manuscirpt">
+                                <!-- <el-link
+                                    :underline="false"
+                                    :href="manuscirptUrl"
+                                    type="primary"
+                                >download latest version</el-link>-->
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="manuscirptFileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >Download</el-button>
+                                </el-popover>
+                            </el-form-item>
+                            <!-- <el-form-item>
+                                <el-button type="primary" @click="onsubmit">Submit</el-button>
+                            </el-form-item>-->
+                        </el-form>
+                    </div>
+                </el-col>
+                <el-col :span="8">
+                    <div class="tree_box">
+                        <h2>State tracking</h2>
+                        <div class="block">
+                            <el-timeline>
+                                <el-timeline-item
+                                    :timestamp="formatDate(form.ctime)"
+                                    placement="top"
+                                >
+                                    <el-card>
+                                        <h4>Manuscript submission</h4>
+                                        <p>{{form.username}} submit manuscript</p>
+                                    </el-card>
+                                </el-timeline-item>
+                                <el-timeline-item
+                                    v-for="(activity, index) in msgs"
+                                    :key="index"
+                                    :timestamp="formatDate(activity.ctime)"
+                                    placement="top"
+                                >
+                                    <el-card v-if="activity.ftype==0">
+                                        <p>Status change :{{statetostr(activity.state_from)}} => {{statetostr(activity.state_to)}}</p>
+                                        <p v-if="activity.content!=''">{{activity.content}}</p>
+                                    </el-card>
+                                    <el-card v-else>
+                                        <p>Author message:</p>
+                                        <p>{{activity.content}}</p>
+                                    </el-card>
+                                    <!-- <el-card>
+                                        <p>status change :{{statetostr(activity.state_from)}} => {{statetostr(activity.state_to)}}</p>
+                                        <p>{{activity.content}}</p>
+                                    </el-card> -->
+                                </el-timeline-item>
+                            </el-timeline>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: this.Common.mediaUrl,
+            items: '',
+            editVisible: false,
+            coverLetterFileList: [],
+            picturesAndTablesFileList: [],
+            totalpageFileList:[],
+            manuscirptFileList: [],
+            editform: {
+                editname: localStorage.getItem('ms_username'),
+                articleId: this.$route.query.id,
+                state: '',
+                editormsg: ''
+            },
+            items: [
+                {
+                    state: 0,
+                    title: this.$t('artstate.state0'),
+                    disabled: true
+                },
+                {
+                    state: 1,
+                    title: this.$t('artstate.state1')
+                },
+                {
+                    state: 2,
+                    title: this.$t('artstate.state2'),
+                    disabled: true
+                },
+                {
+                    state: 3,
+                    title: this.$t('artstate.state3')
+                },
+                {
+                    state: 4,
+                    title: this.$t('artstate.state4')
+                },
+                {
+                    state: 5,
+                    title: this.$t('artstate.state5')
+                }
+            ],
+            form: {
+                articleId: this.$route.query.id,
+                journal: '',
+                journalname: '',
+                username: '',
+                title: '',
+                accept_sn: '',
+                abstrart: '',
+                keyWords: '',
+                fund: '',
+                type: '',
+                approval: false,
+                repezip: '',
+                coverLetter: '',
+                picturesAndTables: '',
+                manuscirpt: '',
+                state: '',
+                ctime: '',
+                authorList: []
+            },
+            msgs: []
+        };
+    },
+    created: function () {
+        this.initarticle();
+        this.initFileList();
+    },
+    computed: {
+        myType: function () {
+            let frag = '';
+            switch (this.form.type) {
+                case 'A':
+                    frag = 'Article';
+                    break;
+                case 'B':
+                    frag = 'Review';
+                    break;
+                case 'C':
+                    frag = 'Case report';
+                    break;
+                case 'M':
+                    frag = 'Meta-analysis';
+                    break;
+                case 'P':
+                    frag = 'Research proposal';
+                    break;
+                case 'N':
+                    frag = 'News';
+                    break;
+                case 'T':
+                    frag = 'Comment';
+                    break;
+                default:
+                    frag = 'Others';
+            }
+            return frag;
+        },
+        coverLetterUrl: function () {
+            return this.baseUrl + this.form.coverLetter;
+        },
+        picturesAndTablesUrl: function () {
+            return this.baseUrl + this.form.picturesAndTables;
+        },
+        manuscirptUrl: function () {
+            return this.baseUrl + this.form.manuscirpt;
+        },
+        upload_coverLetter: function () {
+            return this.baseUrl + 'api/Article/up_file/type/coverLetter';
+        },
+        upload_picturesAndTables: function () {
+            return this.baseUrl + 'api/Article/up_file/type/picturesAndTables';
+        },
+        upload_manuscirpt: function () {
+            return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
+        },
+        articleState: function () {
+            let str = '';
+            switch (this.form.state) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');
+                    break;
+            }
+            return str;
+        }
+    },
+    methods: {
+        //弹出编辑框
+        testvis() {
+            this.editVisible = true;
+        },
+
+        statetostr(mystate) {
+            let str = '';
+            switch (mystate) {
+                case 0:
+                    str = this.$t('artstate.state0');
+                    break;
+                case 1:
+                    str = this.$t('artstate.state1');
+                    break;
+                case 2:
+                    str = this.$t('artstate.state2');
+                    break;
+                case 3:
+                    str = this.$t('artstate.state3');
+                    break;
+                case 4:
+                    str = this.$t('artstate.state4');
+                    break;
+                case 5:
+                    str = this.$t('artstate.state5');
+                    break;
+            }
+            return str;
+        },
+        //修改文章状态
+        saveEdit() {
+            this.$api
+                .post('api/Article/editArticleEditor', this.editform)
+                .then((res) => {
+                    this.$message.success('success');
+                    this.editVisible = false;
+                    this.$router.go(0);
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化期刊信息
+        initarticle() {
+            this.$api
+                .post('api/Admin/getArticleDetail', { articleId: this.editform.articleId, human: 'editor' })
+                .then((res) => {
+                    this.form.username = res.article.account;
+                    this.form.title = res.article.title;
+                    this.form.journal = res.article.journal_id;
+                    this.form.journalname = res.article.journalname;
+                    this.form.abstrart = res.article.abstrart;
+                    this.form.accept_sn = res.article.accept_sn;
+                    this.form.keyWords = res.article.keywords;
+                    this.form.fund = res.article.fund;
+                    this.form.repezip = res.article.repeurl;
+                    this.form.type = res.article.type;
+                    this.form.approval = res.article.approval == 1 ? true : false;
+                    this.editform.state = this.form.state = res.article.state;
+                    this.form.ctime = res.article.ctime;
+                    this.msgs = res.msg;
+                    var alist = res.authors;
+                    for (var i in alist) {
+                        this.form.authorList.push({
+                            art_aut_id: alist[i].art_aut_id,
+                            firstname: alist[i].firstname,
+                            lastname: alist[i].lastname,
+                            company: alist[i].company,
+                            department: alist[i].department,
+                            title: alist[i].author_title,
+                            country: alist[i].country,
+                            email: alist[i].email,
+                            address: alist[i].address,
+                            isSuper: alist[i].is_super == 1 ? true : false,
+                            isReport: alist[i].is_report == 1 ? true : false
+                        });
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化filelist
+        initFileList() {
+            this.$api
+                .post('api/Article/getFilelistByArticleID', { articleId: this.form.articleId })
+                .then((res) => {
+                    this.coverLetterFileList = res.coverLetter;
+                    this.picturesAndTablesFileList = res.picturesAndTables;
+                    this.manuscirptFileList = res.manuscirpt;
+                    this.totalpageFileList = res.totalpage;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        uperr_coverLetter(err) {
+            this.$message.error('上传失败');
+        },
+        beforeupload() {},
+        filedateformate(row, column, cellValue, index) {
+            return this.formatDate(cellValue);
+        },
+        upSuccess_coverLetter(res, file) {
+            if (res.code == 0) {
+                this.form.coverLetter = 'coverLetter/' + res.upurl;
+            } else {
+                this.$message.error('服务器上传错误：' + res.msg);
+            }
+        },
+        upSuccess_picturesAndTables(res, file) {
+            if (res.code == 0) {
+                this.form.picturesAndTables = 'picturesAndTables/' + res.upurl;
+            } else {
+                this.$message.error('服务器上传错误：' + res.msg);
+            }
+        },
+        //超出传送文件个数限制
+        alertlimit() {
+            this.$message.error('超过最大上传文件个数');
+        },
+        upSuccess_manuscirpt(res, file) {
+            if (res.code == 0) {
+                this.form.manuscirpt = 'manuscirpt/' + res.upurl;
+            } else {
+                this.$message.error('服务器上传错误：' + res.msg);
+            }
+        },
+        getlinkurl(row) {
+            return this.mediaUrl + row.file_url;
+        },
+        //检验上传文件的格式
+        beforeupload_coverLetter(file) {
+            // const isWORd =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/pdf' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+            // if (!isWORd) {
+            //     this.$message.error('Only word and pdf files can be uploaded(.pdf,.doc,.docx)');
+            // }
+            // return isWORd;
+        },
+        beforeupload_picturesAndTables(file) {
+            // const iszip =
+            //     file.type === 'image/jpeg' ||
+            //     file.type === 'image/png' ||
+            //     file.type === 'application/x-zip-compressed' ||
+            //     file.name.split(".")[1] === 'rar';
+            // if (!iszip) {
+            //     this.$message.error('Only image and compressed files can be uploaded(.jpg,.png,.rar,.zip)');
+            // }
+            // return iszip;
+        },
+        beforeupload_manuscirpt(file) {
+            // const ismau =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'||
+            //     file.type === 'application/x-zip-compressed' ||
+            //     file.name.split(".")[1] === 'rar';
+            // if (!ismau) {
+            //     this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
+            // }
+            // return ismau;
+        },
+        //清除文件时的事件
+        removefilecoverLetter(file, fileList) {
+            this.form.coverLetter = '';
+        },
+        removefilepicturesAndTables(file, fileList) {
+            this.form.picturesAndTables = '';
+        },
+        removefilemanuscirpt(file, fileList) {
+            this.form.manuscirpt = '';
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+        onsubmit() {
+            if (this.form.coverLetter == '' || this.form.picturesAndTables == '' || this.form.manuscirpt == '') {
+                this.$message.error('请确保三个文档上传成功');
+                console.log('file up error');
+                return false;
+            }
+            this.$api
+                .post('api/Article/changeArticleFileEditor', this.form)
+                .then((res) => {
+                    this.$message.success('success');
+                    this.$router.go(0);
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.dwnbtn {
+    margin-bottom: 5px;
+}
+.container {
+    min-width: 800px;
+}
+.tree_box {
+    padding: 15px 10px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.el-row {
+    border-bottom: rgb(230, 211, 211) solid 1px;
+    margin-bottom: 5px;
+    line-height: 3.5;
+}
+.author-title {
+    color: #969595;
+    text-align: center;
+    background-color: #eceaea;
+}
+.author-delete {
+    text-align: center;
+}
+.author-delete i {
+    color: red;
+}
+</style>

src/components/page/reviewer.vue

@@ -0,0 +1,336 @@
+<template>
+    <div class="login-wrap">
+        <div class="ms-login">
+            <div class="ms-title">Application reviewer</div>
+            <el-form
+                class="ms-content"
+                :rules="Rules"
+                ref="reviewerForm"
+                :model="reviewerForm"
+                label-width="100px"
+            >
+                <!-- 姓名 -->
+                <el-form-item prop="username" label="Username">
+                    <el-input
+                        v-model="reviewerForm.username"
+                        auto-complete="off"
+                        placeholder="username"
+                    >
+                        <i slot="prefix" class="el-icon-user"></i>
+                    </el-input>
+                </el-form-item>
+                <!-- 期刊 -->
+                <el-form-item label="journal" prop="Journal">
+                    <el-select v-model="reviewerForm.journal" placeholder="Please select">
+                        <el-option
+                            v-for="item in journalList"
+                            :key="item.journal_id"
+                            :label="item.title"
+                            :value="item.journal_id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <!-- 性别 -->
+                <el-form-item label="Gender">
+                    <el-radio-group v-model="reviewerForm.gender">
+                        <el-radio :label="1">male</el-radio>
+                        <el-radio :label="2">female</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <!-- 简介  -->
+                <el-form-item prop="introduction" label="Introduction">
+                    <el-input
+                        type="textarea"
+                        rows="5"
+                        v-model="reviewerForm.introduction"
+                        placeholder="Please input personal qualification and resume"
+                    ></el-input>
+                </el-form-item>
+                <!-- 邮箱 -->
+                <el-form-item prop="email" label="Email">
+                    <el-input
+                        size="small"
+                        v-model="reviewerForm.email"
+                        auto-complete="off"
+                        placeholder="email"
+                    >
+                        <i slot="prefix" class="el-icon-message"></i>
+                    </el-input>
+                </el-form-item>
+                <!-- 国家 -->
+                <el-form-item prop="country" label="Country">
+                    <el-input
+                        size="small"
+                        v-model="reviewerForm.country"
+                        auto-complete="off"
+                        placeholder="country"
+                    ></el-input>
+                </el-form-item>
+                <!-- 专业 -->
+                <el-form-item prop="major" label="Major">
+                    <el-select v-model="reviewerForm.major" placeholder="Please select">
+                        <el-option
+                            v-for="ii in majorList"
+                            :key="ii.major_id"
+                            :label="ii.title+ii.ctitle"
+                            :value="ii.major_id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <!-- 领域 -->
+                <el-form-item prop="field" label="field">
+                    <el-input
+                        size="small"
+                        v-model="reviewerForm.field"
+                        auto-complete="off"
+                        placeholder="field"
+                    ></el-input>
+                </el-form-item>
+                <!-- 职称 -->
+                <el-form-item prop="technical" label="Technical">
+                    <el-select v-model="reviewerForm.technical" placeholder="Please select">
+                        <el-option key="Prof." label="Prof." value="Prof." ></el-option>
+                        <el-option key="Associate Prof." label="Associate Prof." value="Associate Prof." ></el-option>
+                        <el-option key="Assistant Prof." label="Assistant Prof." value="Assistant Prof." ></el-option>
+                        <el-option key="Ph.D." label="Ph.D." value="Ph.D." ></el-option>
+                        <el-option key="Others" label="Others" value="Others" ></el-option>
+                    </el-select>
+                </el-form-item>
+                <!-- 单位 -->
+                <el-form-item prop="company" label="Affiliation">
+                    <el-input
+                        size="small"
+                        v-model="reviewerForm.company"
+                        auto-complete="off"
+                        placeholder="company"
+                    >
+                        <i slot="prefix" class="el-icon-user"></i>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="qualifications">
+                    <el-upload
+                        class="upload-demo"
+                        :action="upload_qualifications"
+                        accept=".rar, .zip"
+                        name="qualifications"
+                        :before-upload="beforeupload_qualifications"
+                        :on-error="uperr"
+                        :on-success="upSuccess"
+                        :limit="1"
+                        :on-exceed="alertlimit"
+                        :on-remove="removefile"
+                    >
+                        <div class="el-upload__text">
+                            <em>click upload</em>
+                        </div>
+                        <div
+                            class="el-upload__tip"
+                            slot="tip"
+                        >Only compressed files can be uploaded(.rar,.zip)</div>
+                    </el-upload>
+                </el-form-item>
+                <!-- 按钮 -->
+                <el-form-item>
+                    <el-button
+                        size="small"
+                        type="primary"
+                        @click.native.prevent="handleRegister"
+                        class="register-submit"
+                    >submit</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function() {
+        var validateUsername = (rule, value, callback) => {
+            this.$api.post('api/User/checkReviewer', { username: value }).then(res => {
+                if (res.code == 0) {
+                    callback();
+                } else {
+                    callback(
+                        new Error(
+                            'This user name has been registered, please log in to the background operation, or change a new user name'
+                        )
+                    );
+                }
+            });
+        };
+        return {
+            baseUrl: this.Common.baseUrl,
+            journalList: [],
+            majorList:[],
+            reviewerForm: {
+                journal: '',
+                username: '',
+                introduction: '',
+                email: '',
+                gender: 1,
+                major:'',
+                country: '',
+                technical:'',
+                field:'',
+                company: '',
+                qualifications: ''
+            },
+            Rules: {
+                journal: [{ required: true, message: 'please select a journal', trigger: 'blur' }],
+                username: [
+                    { required: true, message: 'enter one user name', trigger: 'blur' },
+                    { required: true, validator: validateUsername, trigger: 'blur' }
+                ],
+                introduction: [{ required: true, message: 'Please input personal qualification and resume', trigger: 'blur' }],
+                email: [
+                    { required: true, message: 'Please enter email', trigger: 'blur' },
+                    { type: 'email', message: 'Email address format error（example@gmail.com）', trigger: 'blur' }
+                ],
+                major:[{required: true, message: 'Please select major', trigger: 'blur'}],
+                country:[{required: true, message: 'Please enter country', trigger: 'blur'}],
+                technical:[{required: true, message: 'Please select technical', trigger: 'blur'}],
+                field:[{required: true, message: 'Please enter field', trigger: 'blur'}],
+                company: [{ required: true, message: 'enter your company', trigger: 'blur' }],
+            }
+        };
+    },
+    created: function() {
+        this.initselect();
+        this.initMajor();
+    },
+    computed: {
+        upload_qualifications: function() {
+            return this.baseUrl + 'api/Admin/up_file';
+        }
+    },
+    methods: {
+        handleRegister() {
+            this.$refs.reviewerForm.validate(valid => {
+                if (this.reviewerForm.qualifications == '') {
+                    this.$message.error('Please make sure that the qualifications document is uploaded successfully');
+                    console.log('file up error');
+                    return false;
+                }
+                if (valid) {
+                    this.$api
+                        .post('api/Admin/reviewer', this.reviewerForm)
+                        .then(res => {console.log(res);
+                            if (res.code == 0) {
+                                this.$message.success('submit success');
+                                this.$router.push('/thanks');
+                            } else {
+                                this.$message.error(res.msg);
+                            }
+                        })
+                        .catch(err => {
+                            console.log(err);
+                        });
+                } else {
+                    this.$message.error('The registration information is incorrect. Please check and submit again');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        beforeupload_qualifications(file) {
+            // console.log(file);
+            // const iszip = file.type === 'application/x-zip-compressed' ||
+            // file.name.substr(file.name.lastIndexOf(".") + 1) === 'rar';
+            // if (!iszip) {
+            //     this.$message.error('Only compressed files can be uploaded(.rar,.zip)');
+            // }
+            // return iszip;
+        },
+        uperr(err) {
+            this.$message.error('upload defailed:' + err);
+        },
+        upSuccess(res, file) {
+            if (res.code == 0) {
+                this.reviewerForm.qualifications = 'reviewer/' + res.upurl;
+            } else {
+                this.$message.error('Server upload error：' + res.msg);
+            }
+        },
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        },
+        removefile() {
+            this.reviewerForm.qualifications = '';
+        },
+        initMajor(){
+            this.$api.post('api/User/getMajorList')
+            .then(res=>{
+                this.majorList = res.data;
+            })
+        },
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal')
+                .then(res => {
+                    this.journalList = res;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.login-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url(../../assets/img/login-bg.jpg);
+    background-size: 100%;
+    background-attachment: fixed;
+}
+.ms-title {
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    color: #969090;
+    border-bottom: 1px solid #ddd;
+}
+.ms-login {
+    position: absolute;
+    left: 38%;
+    top: 30%;
+    width: 800px;
+    height: 650px;
+    overflow: auto;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+}
+.ms-content {
+    padding: 30px 30px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    font-size: 12px;
+    line-height: 30px;
+    color: #fff;
+}
+.register-submit {
+    margin: auto;
+}
+.rebacklogin {
+    padding-top: 13px;
+}
+.captchaimg {
+    margin-top: 2px;
+    margin-left: 8px;
+}
+</style>

src/components/page/reviewerApplyDetail.vue

@@ -0,0 +1,200 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Apply list
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>Apply Detail</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="form-box">
+                <el-form ref="articleform" :model="form" label-width="200px">
+                    <el-form-item label="name">
+                        <span>{{form.name}}</span>
+                    </el-form-item>
+                    <el-form-item label="journal">
+                        <span>{{form.journal}}</span>
+                    </el-form-item>
+                    <el-form-item label="gender">
+                        <span>{{form.gender==1?'男':'女'}}</span>
+                    </el-form-item>
+                    <el-form-item label="technical">
+                        <span>{{form.technical}}</span>
+                    </el-form-item>
+                    <el-form-item label="country">
+                        <span>{{form.country}}</span>
+                    </el-form-item>
+                    <el-form-item label="major">
+                        <span>{{form.major}}</span>
+                    </el-form-item>
+                    <el-form-item label="field">
+                        <span>{{form.field}}</span>
+                    </el-form-item>
+                    <el-form-item label="introduction">
+                        <span>{{form.introduction}}</span>
+                    </el-form-item>
+                    <el-form-item label="email">
+                        <span>{{form.email}}</span>
+                    </el-form-item>
+                    <el-form-item label="company">
+                        <span>{{form.company}}</span>
+                    </el-form-item>
+                    <el-form-item label="qualifications">
+                        <el-link :href="downloadQualifications">download</el-link>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="editVisible=true">adopt</el-button>
+                        <el-button type="primary" @click="rejectVisible=true">reject</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+        <el-dialog title="confirm" :visible.sync="editVisible" width="30%">
+            <span>If you want to pass the applicant, the system will generate his user name and password,Users can change their own password according to the process</span>
+            <p>username:{{this.form.name}}</p>
+            <p>password:123456qwe</p>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="editVisible = false">取 消</el-button>
+                <el-button type="primary" @click="confirmSubmit">确 定</el-button>
+            </span>
+        </el-dialog>
+        <el-dialog title="reject" :visible.sync="rejectVisible" width="30%">
+            <span>Are you sure you want to reject this applicant</span>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="rejectVisible = false">取 消</el-button>
+                <el-button type="primary" @click="rejectreviewer">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            mediaUrl:this.Common.mediaUrl,
+            items: '',
+            editVisible: false,
+            rejectVisible: false,
+            form: {
+                reviewerId: this.$route.query.id,
+                name: '',
+                journal: '',
+                gender: '',
+                technical: '',
+                country: '',
+                major: '',
+                field: '',
+                introduction: '',
+                email: '',
+                company: '',
+                qualifications: ''
+            }
+        };
+    },
+    created: function () {
+        this.initApply();
+    },
+    computed: {
+        downloadQualifications: function () {
+            return this.mediaUrl + this.form.qualifications;
+        }
+    },
+    methods: {
+        //弹出编辑框
+        testvis() {
+            this.editVisible = true;
+        },
+        //修改文章状态
+        saveEdit() {
+            this.$api
+                .post('api/Article/editArticleEditor', this.editform)
+                .then((res) => {
+                    this.$message.success('success');
+                    this.editVisible = false;
+                    this.initApply();
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化期刊信息
+        initApply() {
+            this.$api
+                .post('api/User/getApplyDetail', { reviewerId: this.form.reviewerId })
+                .then((res) => {
+                    this.form.name = res.data.name;
+                    this.form.introduction = res.data.introduction;
+                    this.form.journal = res.data.journal;
+                    this.form.gender = res.data.gender;
+                    this.form.technical = res.data.technical;
+                    this.form.country = res.data.country;
+                    this.form.major = res.data.major_title;
+                    this.form.field = res.data.field;
+                    this.form.email = res.data.email;
+                    this.form.company = res.data.company;
+                    this.form.qualifications = res.data.qualifications;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        filedateformate(row, column, cellValue, index) {
+            return this.formatDate(cellValue);
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+        confirmSubmit() {
+            this.$api
+                .post('api/User/reviewerAdopt', { reviewerId: this.form.reviewerId })
+                .then((res) => {
+                    this.$message.success('Adopt success');
+                    this.$router.push('/reviewerApplyList');
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //拒绝审核人
+        rejectreviewer() {
+            this.$api
+                .post('api/User/reviewerRejec', { reviewerId: this.form.reviewerId })
+                .then((res) => {
+                    this.$message.success('reject success');
+                    this.initApply();
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.dwnbtn {
+    margin-bottom: 5px;
+}
+.container {
+    min-width: 800px;
+}
+.tree_box {
+    padding: 15px 10px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.more_btn {
+    margin-left: 30px;
+}
+</style>

src/components/page/reviewerApplyList.vue

@@ -0,0 +1,165 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-user"></i> Apply list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="handle-box">
+                <el-select
+                    v-model="query.journalId"
+                    @change="getdate"
+                    placeholder="Please select journal"
+                >
+                    <el-option :key="0" label="All journal" :value="0"></el-option>
+                    <el-option
+                        v-for="item in journalList"
+                        :key="item.journal_id"
+                        :label="item.title"
+                        :value="item.journal_id"
+                    ></el-option>
+                </el-select>
+            </div>
+            <el-table
+                :data="tableData"
+                border
+                stripe
+                class="table"
+                ref="multipleTable"
+                header-cell-class-name="table-header"
+            >
+                <!-- <el-table-column prop="reviewer_id" label="No." align="center" width="50"></el-table-column> -->
+                <el-table-column prop="name" label="Name" align="center"></el-table-column>
+                <el-table-column prop="email" label="Email" align="center"></el-table-column>
+                <el-table-column prop="company" label="Affiliation" align="center"></el-table-column>
+                <el-table-column label="" width="100" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            type="text"
+                            plain
+                            icon="el-icon-tickets"
+                            @click="showdetail(scope.row)"
+                        >Detail</el-button>
+                        <!-- <el-button
+                            type="text"
+                            plain
+                            icon="el-icon-edit"
+                            @click="handleChange(scope.row)"
+                        >change</el-button>-->
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            query: {
+                username: localStorage.getItem('ms_username'),
+                journalId: 0,
+                pageIndex: 1,
+                pageSize: 10
+            },
+            tableData: [],
+            journalList: [],
+            Total: 0
+        };
+    },
+    created() {
+        this.getdate();
+        this.initselect();
+    },
+    methods: {
+        // 获取编辑列表数据
+        getdate() {
+            this.$api
+                .post('api/User/getReviewerApplyList', this.query)
+                .then(res => {
+                    this.Total = res.total;
+                    this.tableData = res.data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        showdetail(row) {
+            this.$router.push({ path: 'reviewerApplyDetail', query: { id: row.reviewer_id } });
+        },
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal', { username: this.query.username })
+                .then(res => {
+                    this.journalList = res;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.el-table .warning-row {
+    background: #f3ca7f;
+}
+.el-table .success-row {
+    background: #bcfc9a;
+}
+.el-table .normol-row {
+    background: #d8f1c7;
+}
+.el-table .red-row {
+    background: #f05555;
+}
+</style>

src/components/page/reviewerArticleDetail.vue

@@ -0,0 +1,755 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Manuscript detail
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>article detail</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container" v-loading="loading">
+            <el-row>
+                <el-col :span="12">
+                    <div class="form-box">
+                        <el-form ref="articleform" :model="detailDate" label-width="200px">
+                            <el-form-item label="Manuscript title">
+                                <span>{{detailDate.article}}</span>
+                            </el-form-item>
+                            <el-form-item label="Manuscript ID">
+                                <span>{{detailDate.acceptSN}}</span>
+                            </el-form-item>
+                            <el-form-item label="Manuscript state">
+                                <span>{{mystate(detailDate.state)}}</span>
+                            </el-form-item>
+                            <el-form-item label="article file">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="articlefileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >download</el-button>
+                                </el-popover>
+                            </el-form-item>
+                            <!-- <el-form-item label="article file">
+                                <el-popover placement="right" width="350" trigger="click">
+                                    <el-table :data="articlefileList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="up_username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    class="upload-demo"
+                                    :action="upload_file('articlefile')"
+                                    accept=".doc, .docx"
+                                    name="articlefile"
+                                    :before-upload="beforeupload_file"
+                                    :on-error="uperr_file"
+                                    :on-success="upSuccess_file"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilearticlefile"
+                                >
+                                    <i class="el-icon-upload"></i>
+                                    <div class="el-upload__text">
+                                        <em>reupload</em>
+                                    </div>
+                                    <div
+                                        class="el-upload__tip"
+                                        slot="tip"
+                                    >Only word files can be uploaded(.doc,.docx)</div>
+                                </el-upload>
+                            </el-form-item> -->
+                            <!-- <el-form-item label="others">
+                                <el-popover placement="right" width="auto" trigger="click">
+                                    <el-table :data="articlezipList">
+                                        <el-table-column
+                                            width="150"
+                                            :formatter="filedateformate"
+                                            property="ctime"
+                                            align="center"
+                                            label="date"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            property="up_username"
+                                            align="center"
+                                            label="Uploader"
+                                        ></el-table-column>
+                                        <el-table-column
+                                            width="100"
+                                            label="download"
+                                            align="center"
+                                        >
+                                            <template slot-scope="scope">
+                                                <el-link
+                                                    type="primary"
+                                                    icon="el-icon-download"
+                                                    :href="getlinkurl(scope.row)"
+                                                ></el-link>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <el-button
+                                        class="more_btn"
+                                        icon="el-icon-download"
+                                        type="text"
+                                        slot="reference"
+                                    >download</el-button>
+                                </el-popover>
+                                <el-upload
+                                    class="upload-demo"
+                                    :action="upload_file('articlezip')"
+                                    accept=".rar, .zip"
+                                    name="articlezip"
+                                    :before-upload="beforeupload_articlezip"
+                                    :on-error="uperr_file"
+                                    :on-success="upSuccess_articlezip"
+                                    :limit="1"
+                                    :on-exceed="alertlimit"
+                                    :on-remove="removefilearticlezip"
+                                >
+                                    <i class="el-icon-upload"></i>
+                                    <div class="el-upload__text">
+                                        <em>reupload</em>
+                                    </div>
+                                    <div
+                                        class="el-upload__tip"
+                                        slot="tip"
+                                    >Only compressed files can be uploaded(.rar,.zip)</div>
+                                </el-upload>
+                            </el-form-item> -->
+                            <!-- <el-form-item>
+                                <el-button type="primary" @click="onSubmit">Submit upload</el-button>
+                            </el-form-item> -->
+                        </el-form>
+                    </div>
+                </el-col>
+                <el-col :span="12">
+                    <el-card class="box-card">
+                        <div slot="header" class="clearfix">
+                            <h2>Feedback questionnaire</h2>
+                        </div>
+                        <el-form
+                            :model="questionform"
+                            :rules="rules"
+                            ref="question"
+                            label-width="300px"
+                            label-position="top"
+                        >
+                            <el-divider content-position="center">REFEREE'S ASSESSMENT</el-divider>
+                            <el-form-item label="1.Originality of the topic">
+                                <el-radio-group v-model="questionform.qu1">
+                                    <el-radio :label="1">Excellent</el-radio>
+                                    <el-radio :label="2">Good</el-radio>
+                                    <el-radio :label="3">Fair</el-radio>
+                                    <el-radio :label="4">Poor</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="2.Technical Quality">
+                                <el-radio-group v-model="questionform.qu2">
+                                    <el-radio :label="1">Excellent</el-radio>
+                                    <el-radio :label="2">Good</el-radio>
+                                    <el-radio :label="3">Fair</el-radio>
+                                    <el-radio :label="4">Poor</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="3.Importance in its Field">
+                                <el-radio-group v-model="questionform.qu3">
+                                    <el-radio :label="1">Excellent</el-radio>
+                                    <el-radio :label="2">Good</el-radio>
+                                    <el-radio :label="3">Fair</el-radio>
+                                    <el-radio :label="4">Poor</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="4.Style & Overall Representation">
+                                <el-radio-group v-model="questionform.qu4">
+                                    <el-radio :label="1">Excellent</el-radio>
+                                    <el-radio :label="2">Good</el-radio>
+                                    <el-radio :label="3">Fair</el-radio>
+                                    <el-radio :label="4">Poor</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="5.Readily Understandable">
+                                <el-radio-group v-model="questionform.qu5">
+                                    <el-radio :label="1">Excellent</el-radio>
+                                    <el-radio :label="2">Good</el-radio>
+                                    <el-radio :label="3">Fair</el-radio>
+                                    <el-radio :label="4">Poor</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="6.Suitability for the Journal">
+                                <el-radio-group v-model="questionform.qu6">
+                                    <el-radio :label="1">Excellent</el-radio>
+                                    <el-radio :label="2">Good</el-radio>
+                                    <el-radio :label="3">Fair</el-radio>
+                                    <el-radio :label="4">Poor</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="7.Adequate Illustrations or Drawings">
+                                <el-radio-group v-model="questionform.qu7">
+                                    <el-radio :label="1">Excellent</el-radio>
+                                    <el-radio :label="2">Good</el-radio>
+                                    <el-radio :label="3">Fair</el-radio>
+                                    <el-radio :label="4">Poor</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="8.English language">
+                                <el-radio-group v-model="questionform.qu8">
+                                    <el-radio :label="1">Excellent</el-radio>
+                                    <el-radio :label="2">Good</el-radio>
+                                    <el-radio :label="3">Fair</el-radio>
+                                    <el-radio :label="4">Poor</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-collapse>
+                                <el-form-item
+                                    label="9.Does the title represent manuscript's contents?"
+                                >
+                                    <el-switch
+                                        v-model="questionform.qu9"
+                                        active-text="yes"
+                                        inactive-text="no"
+                                    ></el-switch>
+                                    <el-collapse-item name="1">
+                                        <template slot="title">
+                                            <i class="el-icon-edit"></i>Comments/ Suggestions
+                                        </template>
+                                        <el-input
+                                            type="textarea"
+                                            placeholder="please input content"
+                                            v-model="questionform.qu9contents"
+                                            :rows="4"
+                                        ></el-input>
+                                    </el-collapse-item>
+                                </el-form-item>
+                                <el-form-item label="10.Is the Abstract accurate and concise?">
+                                    <el-switch
+                                        v-model="questionform.qu10"
+                                        active-text="yes"
+                                        inactive-text="no"
+                                    ></el-switch>
+                                    <el-collapse-item name="2">
+                                        <template slot="title">
+                                            <i class="el-icon-edit"></i>Comments/ Suggestions
+                                        </template>
+                                        <el-input
+                                            type="textarea"
+                                            placeholder="please input content"
+                                            v-model="questionform.qu10contents"
+                                            :rows="4"
+                                        ></el-input>
+                                    </el-collapse-item>
+                                </el-form-item>
+                                <el-form-item
+                                    label="11.Are the approach/ methods properly described?"
+                                >
+                                    <el-switch
+                                        v-model="questionform.qu11"
+                                        active-text="yes"
+                                        inactive-text="no"
+                                    ></el-switch>
+                                    <el-collapse-item name="3">
+                                        <template slot="title">
+                                            <i class="el-icon-edit"></i>Comments/ Suggestions
+                                        </template>
+                                        <el-input
+                                            type="textarea"
+                                            placeholder="please input content"
+                                            v-model="questionform.qu11contents"
+                                            :rows="4"
+                                        ></el-input>
+                                    </el-collapse-item>
+                                </el-form-item>
+                                <el-form-item
+                                    label="12.Are the conclusions and interpretations sound?"
+                                >
+                                    <el-switch
+                                        v-model="questionform.qu12"
+                                        active-text="yes"
+                                        inactive-text="no"
+                                    ></el-switch>
+                                    <el-collapse-item name="4">
+                                        <template slot="title">
+                                            <i class="el-icon-edit"></i>Comments/ Suggestions
+                                        </template>
+                                        <el-input
+                                            type="textarea"
+                                            placeholder="please input content"
+                                            v-model="questionform.qu12contents"
+                                            :rows="4"
+                                        ></el-input>
+                                    </el-collapse-item>
+                                </el-form-item>
+                                <el-form-item label="13.Are the references properly cited?">
+                                    <el-switch
+                                        v-model="questionform.qu13"
+                                        active-text="yes"
+                                        inactive-text="no"
+                                    ></el-switch>
+                                    <el-collapse-item name="5">
+                                        <template slot="title">
+                                            <i class="el-icon-edit"></i>Comments/ Suggestions
+                                        </template>
+                                        <el-input
+                                            type="textarea"
+                                            placeholder="please input content"
+                                            v-model="questionform.qu13contents"
+                                            :rows="4"
+                                        ></el-input>
+                                    </el-collapse-item>
+                                </el-form-item>
+                                <el-form-item
+                                    label="14.Is this a new/ original/ confirmatory contribution?"
+                                >
+                                    <el-switch
+                                        v-model="questionform.qu14"
+                                        active-text="yes"
+                                        inactive-text="no"
+                                    ></el-switch>
+                                    <el-collapse-item name="6">
+                                        <template slot="title">
+                                            <i class="el-icon-edit"></i>Comments/ Suggestions
+                                        </template>
+                                        <el-input
+                                            type="textarea"
+                                            placeholder="please input content"
+                                            v-model="questionform.qu14contents"
+                                            :rows="4"
+                                        ></el-input>
+                                    </el-collapse-item>
+                                </el-form-item>
+                                <el-form-item label="15.Is it within the scope of the journal?">
+                                    <el-switch
+                                        v-model="questionform.qu15"
+                                        active-text="yes"
+                                        inactive-text="no"
+                                    ></el-switch>
+                                    <el-collapse-item name="7">
+                                        <template slot="title">
+                                            <i class="el-icon-edit"></i>Comments/ Suggestions
+                                        </template>
+                                        <el-input
+                                            type="textarea"
+                                            placeholder="please input content"
+                                            v-model="questionform.qu15contents"
+                                            :rows="4"
+                                        ></el-input>
+                                    </el-collapse-item>
+                                </el-form-item>
+                                <el-divider content-position="center">REFEREE'S RECOMMENDATIONS</el-divider>
+                                <el-form-item label="Overall the Paper is Rated">
+                                    (Poor-------------------------------------------------------------Excellent)
+                                    <br />
+                                    <el-radio-group v-model="questionform.rated" size="small">
+                                        <el-radio-button label="1"></el-radio-button>
+                                        <el-radio-button label="2"></el-radio-button>
+                                        <el-radio-button label="3"></el-radio-button>
+                                        <el-radio-button label="4"></el-radio-button>
+                                        <el-radio-button label="5"></el-radio-button>
+                                        <el-radio-button label="6"></el-radio-button>
+                                        <el-radio-button label="7"></el-radio-button>
+                                        <el-radio-button label="8"></el-radio-button>
+                                        <el-radio-button label="9"></el-radio-button>
+                                        <el-radio-button label="10"></el-radio-button>
+                                    </el-radio-group>
+                                    <br />
+                                    <span>Your score:{{questionform.rated}}</span>
+                                </el-form-item>
+                                <el-form-item label="REFEREE'S RECOMMENDATIONS" prop="recommend">
+                                    <el-radio-group v-model="questionform.recommend">
+                                        <el-radio :label="1">Accept with minor changes</el-radio>
+                                        <br />
+                                        <el-radio
+                                            :label="2"
+                                        >Accept subject to revisions, as noted in comments</el-radio>
+                                        <br />
+                                        <el-radio
+                                            :label="3"
+                                        >Reject in current form, but may be resubmitted</el-radio>
+                                        <br />
+                                        <el-radio :label="4">Reject, with no resubmission</el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                                <el-form-item label="OTHER SPECIFIC CRITICISMS">
+                                    <el-radio-group v-model="questionform.other">
+                                        <el-radio :label="1">Imperfect style</el-radio>
+                                        <br />
+                                        <el-radio :label="2">Too long</el-radio>
+                                        <br />
+                                        <el-radio :label="3">References incorrectly presented</el-radio>
+                                        <br />
+                                        <el-radio :label="4">Typographical and Grammatical errors</el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                                <el-form-item label="Confidential Comments to the Editor">
+                                    <el-input
+                                        type="textarea"
+                                        placeholder="please input content"
+                                        v-model="questionform.confident"
+                                        :rows="8"
+                                    ></el-input>
+                                </el-form-item>
+                                <el-form-item label="Comments for the Authors">
+                                    <el-input
+                                        type="textarea"
+                                        placeholder="please input content"
+                                        v-model="questionform.comment"
+                                        :rows="8"
+                                    ></el-input>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button type="primary" @click="questionSubmit">submit</el-button>
+                                </el-form-item>
+                            </el-collapse>
+                        </el-form>
+                    </el-card>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: this.Common.mediaUrl,
+            dateId: this.$route.query.id,
+            username: localStorage.getItem('ms_username'),
+            loading:false,
+            articlefileList: [],
+            articlezipList: [],
+            detailDate: {
+                artrevid: '',
+                article: '',
+                acceptSN:'',
+                reviewer: '',
+                articlefile: '',
+                articlezip: '',
+                ctime: '',
+                state: ''
+            },
+            questionform: {
+                rev_qu_id: '',
+                art_rev_id: this.$route.query.id,
+                qu1: '',
+                qu2: '',
+                qu3: '',
+                qu4: '',
+                qu5: '',
+                qu6: '',
+                qu7: '',
+                qu8: '',
+                qu9: 'false',
+                qu9contents: '',
+                qu10: 'false',
+                qu10contents: '',
+                qu11: 'false',
+                qu11contents: '',
+                qu12: 'false',
+                qu12contents: '',
+                qu13: 'false',
+                qu13contents: '',
+                qu14: 'false',
+                qu14contents: '',
+                qu15: 'false',
+                qu15contents: '',
+                rated: '',
+                recommend: '',
+                other: '',
+                confident: '',
+                comment: ''
+            },
+            rules: {
+                recommend: [{ required: true, message: 'please select', trigger: 'blur' }]
+            }
+        };
+    },
+    created: function () {
+        this.getDate();
+        this.initFileList();
+        this.initquesion();
+    },
+    computed: {},
+    methods: {
+        upload_file(type) {
+            return this.baseUrl + 'api/reviewer/up_file/type/' + type;
+        },
+        questionSubmit() {
+            this.$refs.question.validate((valid) => {
+                if (valid) {
+                    this.loading = true;
+                    this.$api.post('api/Reviewer/questionSubmit', this.questionform).then((res) => {
+                        this.loading=false;
+                        if (res.code == 0) {
+                            this.$message.success('success!!');
+                            this.$router.go(0);
+                        } else {
+                            this.$message.error('question submit error');
+                        }
+                    });
+                } else {
+                    this.$message.error('please select a recommend option');
+                }
+            });
+        },
+        onSubmit() {
+            if (this.detailDate.articlefile == '') {
+                this.$message.error('you must upload article file');
+                console.log('file up error');
+                return false;
+            }
+            this.loading = true;
+            this.$api
+                .post('api/Reviewer/articleReviewerUpSubmit/type/reviewer', this.detailDate)
+                .then((res) => {
+                    this.loading = false;
+                    if (res.code == 0) {
+                        this.$message.success('success');
+                        this.$router.go(0);
+                    } else {
+                        this.$message.error('Failed to submit, please contact administrator!');
+                        console.log(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化详情信息
+        getDate() {
+            this.$api
+                .post('api/Reviewer/getartrevdate', { revid: this.dateId, human: 'reviewer' })
+                .then((res) => {
+                    if(res.state == 4){
+                        this.$message.error('this review expired!');
+                        this.$router.push('/reviewerArticleList');
+                    }
+                    this.detailDate.artrevid = res.art_rev_id;
+                    this.detailDate.article = res.article_title;
+                    this.detailDate.acceptSN = res.accept_sn;
+                    this.detailDate.reviewer = res.account;
+                    this.detailDate.ctime = res.ctime;
+                    this.detailDate.state = res.state;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化filelist
+        initFileList() {
+            this.$api
+                .post('api/Reviewer/getAFilelistByID', { revid: this.dateId })
+                .then((res) => {
+                    this.articlefileList = res.data;
+                    // this.articlefileList = res.hasOwnProperty('articlefile') ? res.articlefile : [];
+                    // this.articlezipList = res.hasOwnProperty('articlezip') ? res.articlezip : [];
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //初始化问卷
+        initquesion() {
+            this.$api.post('api/Reviewer/getQuestion', { artrevid: this.dateId }).then((res) => {
+                if (res.code == 0) {
+                    this.questionform.rev_qu_id = res.data.rev_qu_id;
+                    this.questionform.qu1 = res.data.qu1;
+                    this.questionform.qu2 = res.data.qu2;
+                    this.questionform.qu3 = res.data.qu3;
+                    this.questionform.qu4 = res.data.qu4;
+                    this.questionform.qu5 = res.data.qu5;
+                    this.questionform.qu6 = res.data.qu6;
+                    this.questionform.qu7 = res.data.qu7;
+                    this.questionform.qu8 = res.data.qu8;
+                    this.questionform.qu9 = res.data.qu9;
+                    this.questionform.qu9contents = res.data.qu9_contents;
+                    this.questionform.qu10 = res.data.qu10 == 0 ? false : true;
+                    this.questionform.qu10contents = res.data.qu10_contents;
+                    this.questionform.qu11 = res.data.qu11 == 0 ? false : true;
+                    this.questionform.qu11contents = res.data.qu11_contents;
+                    this.questionform.qu12 = res.data.qu12 == 0 ? false : true;
+                    this.questionform.qu12contents = res.data.qu12_contents;
+                    this.questionform.qu13 = res.data.qu13 == 0 ? false : true;
+                    this.questionform.qu13contents = res.data.qu13_contents;
+                    this.questionform.qu14 = res.data.qu14 == 0 ? false : true;
+                    this.questionform.qu14contents = res.data.qu14_contents;
+                    this.questionform.qu15 = res.data.qu15 == 0 ? false : true;
+                    this.questionform.qu15contents = res.data.qu15_contents;
+                    this.questionform.rated = res.data.rated;
+                    this.questionform.recommend = res.data.recommend;
+                    this.questionform.other = res.data.other;
+                    this.questionform.confident = res.data.confidential;
+                    this.questionform.comment = res.data.comments;
+                }
+            });
+        },
+        //检验上传文件的格式
+        beforeupload_file(file) {
+            // const isWORd =
+            //     file.type === 'application/msword' ||
+            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+            // if (!isWORd) {
+            //     this.$message.error('Only word files can be uploaded(.doc,.docx)');
+            // }
+            // return isWORd;
+        },
+        beforeupload_articlezip(file) {
+            // const iszip = file.type === 'application/x-zip-compressed' || file.name.split('.')[1] === 'rar';
+            // if (!iszip) {
+            //     this.$message.error('Only compressed files can be uploaded(.rar,.zip)');
+            // }
+            // return iszip;
+        },
+        getlinkurl(row) {
+            return this.mediaUrl + row.file_url;
+        },
+        filedateformate(row, column, cellValue, index) {
+            return this.formatDate(cellValue);
+        },
+        uperr_file(err) {
+            this.$message.error('Upload error');
+        },
+        beforeupload() {},
+        upSuccess_file(res, file) {
+            if (res.code == 0) {
+                this.detailDate.articlefile = 'articlefile/' + res.upurl;
+            } else {
+                this.$message.error('Service error:' + res.msg);
+            }
+        },
+        upSuccess_articlezip(res, file) {
+            if (res.code == 0) {
+                this.detailDate.articlezip = 'articlezip/' + res.upurl;
+            } else {
+                this.$message.error('Service error:' + res.msg);
+            }
+        },
+        formatDate(timestamp) {
+            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+            var Y = date.getFullYear() + '-';
+            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return Y + M + D + ' ' + h + ':' + m + ':' + s;
+        },
+        //超出传送文件个数限制
+        alertlimit() {
+            this.$message.error('The maximum number of uploaded files has been exceeded');
+        },
+        //清除文件时的事件
+        removefilearticlefile(file, fileList) {
+            this.detailDate.articlefile = '';
+        },
+        removefilearticlezip(file, fileList) {
+            this.detailDate.articlezip = '';
+        },
+        mystate(mystate) {
+            let str = '';
+            switch (mystate) {
+                case 0:
+                    str = 'With reviewer';
+                    break;
+                case 1:
+                    str = 'Revision';
+                    break;
+                case 2:
+                    str = 'Reject';
+                    break;
+                case 3:
+                    str = 'Accepted';
+                    break;
+                case 4:
+                    str = 'invalid';
+                    break;
+            }
+            return str;
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.dwnbtn {
+    margin-bottom: 5px;
+}
+.container {
+    min-width: 1000px;
+}
+.tree_box {
+    padding: 15px 10px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+h2 {
+    text-align: center;
+}
+.sectitle {
+    font-size: 15px;
+    font-weight: 500;
+    /* line-height: 25px; */
+}
+</style>

src/components/page/reviewerArticleList.vue

@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-cascades"></i> Manuscript list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-table
+                :data="tableData"
+                border
+                stripe
+                class="table"
+                ref="multipleTable"
+                header-cell-class-name="table-header"
+            >
+                <el-table-column type="index" label="No." width="55" align="center"></el-table-column>
+                <el-table-column prop="accept_sn" label="Manuscript ID" width="180" align="center"></el-table-column>
+                <!-- <el-table-column prop="art_rev_id" label="ID" width="55" align="center"></el-table-column> -->
+                <el-table-column prop="article_title" label="Title" align="center"></el-table-column>
+
+                <el-table-column prop="journal_title" label="Journal" align="center"></el-table-column>
+                <el-table-column
+                    prop="state"
+                    label="Status"
+                    :formatter="stateFormat"
+                    align="center"
+                ></el-table-column>
+                <el-table-column label="" width="180" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            plain
+                            icon="el-icon-tickets"
+                            @click="showdetail(scope.row)"
+                        >Detail</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            userrole:localStorage.getItem('ms_userrole'),
+            query: {
+                username: localStorage.getItem('ms_username'),
+                pageIndex: 1,
+                pageSize: 10
+            },
+            tableData: [],
+            Total: 0
+        };
+    },
+    created() {
+        if(this.userrole!='reviewer'){
+            this.$router.push('/authorApplyReviewer');
+        }
+        this.getdate();
+    },
+    methods: {
+        // 获取数据
+        getdate() {
+            this.$api
+                .post('api/Reviewer/getReviewerList', this.query)
+                .then(res => {
+                    this.Total = res.total;
+                    this.tableData = res.data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        showdetail(row) {
+            if(row.state==4){
+                this.$message.error('Review expired!');
+            }else{
+                this.$router.push({ path: 'reviewerArticleDetail', query: { id: row.art_rev_id } });
+            }
+        },
+        stateFormat(row, column, cellValue, index){
+            if(cellValue==0){
+                return 'With reviewer';
+            }else if(cellValue==1){
+                return 'Revision';
+            }else if(cellValue==2){
+                return 'Reject';
+            }else if(cellValue==3){
+                return 'Accepted';
+            }else if(cellValue==4){
+                return 'invalid';
+            }
+
+        }
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.el-table .warning-row {
+    background: #f3ca7f;
+}
+.el-table .success-row {
+    background: #bcfc9a;
+}
+.el-table .normol-row{
+    background: #d8f1c7
+}
+.el-table .red-row{
+    background: #f05555;
+}
+</style>

src/components/page/reviewerDetail.vue

@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-calendar"></i> Reviewer detail
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>Reviewer detail</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-form ref="reviewerform" :model="revdata" label-suffix=":" style="width:800px;" label-width="120px">
+                <el-form-item label="Name">
+                    <span>{{revdata.account}}</span>
+                </el-form-item>
+                <el-form-item label="Gender">
+                    <span>{{revdata.gender==2?'女':'男'}}</span>
+                </el-form-item>
+                <el-form-item label="Technical">
+                    <span>{{revdata.technical}}</span>
+                </el-form-item>
+                <el-form-item label="Country">
+                    <span>{{revdata.country}}</span>
+                </el-form-item>
+                <el-form-item label="Major">
+                        <el-row>
+                            <el-col :span="5">
+                                <el-select v-model="revdata.major" placeholder="Please select" @change="majorChange()">
+                                    <el-option
+                                        v-for="item in majors"
+                                        :key="item.major_id"
+                                        :label="item.title"
+                                        :value="item.major_id"
+                                    ></el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-select v-model="revdata.cmajor" placeholder="Please select">
+                                    <el-option :key="0" label="Please select" :value="0"></el-option>
+                                    <el-option
+                                        v-for="item in cmajors"
+                                        :key="item.major_id"
+                                        :label="item.title"
+                                        :value="item.major_id"
+                                    ></el-option>
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                </el-form-item>
+                <el-form-item label="Field">
+                    <span>{{revdata.field}}</span>
+                </el-form-item>
+                <el-form-item label="Introduction">
+                    <span>{{revdata.introduction}}</span>
+                </el-form-item>
+                    <el-form-item>
+                        <el-col :offset="4">
+                            <el-button type="primary" @click="onSubmit">Save</el-button>
+                        </el-col>
+                    </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            rev_id:this.$route.query.id,
+            majors:[],
+            cmajors:[],
+            revdata:{
+                reviewer_info_id:'',
+                account:'',
+                gender:1,
+                technical:'',
+                country:'',
+                major:0,
+                cmajor:0,
+                field:''
+            },
+        }
+    },
+    created:function(){
+        this.initReviewer();
+        this.initMajor();
+
+    },
+    methods: {
+        onSubmit:function(){
+            if(this.revdata.cmajor==0){
+                this.$message.error('Please select a child-major !!');
+                return false;
+            }
+            this.$api.post('api/Reviewer/editReviewer',this.revdata)
+            .then(res=>{
+                this.$router.go(0);
+            });
+        },
+        initReviewer:function(){
+            this.$api.post('api/Reviewer/getReviewerDetail',{rid:this.rev_id})
+            .then(res=>{
+                this.revdata.reviewer_info_id = res.data.reviewer_info_id;
+                this.revdata.account = res.data.account;
+                this.revdata.gender = res.data.gender;
+                this.revdata.technical = res.data.technical;
+                this.revdata.country = res.data.country;
+                this.revdata.major = res.data.major;
+                this.revdata.cmajor = res.data.cmajor;
+                this.revdata.field = res.data.field;
+            });
+        },
+        initMajor() {
+            this.$api.post('api/Admin/getMajors',{rid:this.rev_id}).then((res) => {
+                this.majors = res.data;
+                this.cmajors = res.cmajors;
+            });
+        },
+        majorChange(){
+            let majorid = this.revdata.major;
+            this.$api.post('api/Admin/majorChild',{majorid:majorid})
+            .then(res=>{
+                this.cmajors = res.data;
+                if(!this.checkmajor(this.revdata.cmajor,res.data)){
+                    this.revdata.cmajor = 0;
+                }
+            });
+        },
+        checkmajor(jor,data){
+            let frag = false;
+            for(var i=0;i<data.length;i++){
+                var cah = data[i];
+                if(jor==cah.major_id){
+                    frag=true;
+                }
+            }
+            return frag;
+        }
+    },
+}
+</script>

src/components/page/reviewerImport.vue

@@ -0,0 +1,198 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-user-solid"></i> Import reviewer
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-form 
+                ref="import" 
+                :model="upform" 
+                label-width="120px"
+                v-loading="fullscreenLoading"
+                element-loading-spinner="el-icon-loading"
+                element-loading-background="rgba(0, 0, 0, 0.8)">
+                <el-form-item label="Journal">
+                    <el-select v-model="upform.journal" placeholder="Please select journal">
+                        <el-option
+                            v-for="item in items"
+                            :key="item.journal_id"
+                            :label="item.title"
+                            :value="item.journal_id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="Template">
+                    <el-link icon="el-icon-download" type="text" :href="getlinkurl">Download template</el-link>
+                    <div>please delete demo message before you import</div>
+                </el-form-item>
+                <el-form-item label="File">
+                    <el-upload
+                        :action="up_url"
+                        name="importExcel"
+                        :on-remove="handleRemove"
+                        accept=".xls, .xlsx"
+                        :before-upload="checkfile"
+                        :limit="1"
+                        :on-exceed="handleExceed"
+                        :on-success="upSuccess"
+                        :on-error="uperror"
+                    >
+                        <el-button size="small" type="text">upload excel</el-button>
+                        <div
+                            slot="tip"
+                            class="el-upload__tip"
+                        >Only excel files can be uploaded(.xls,.xlsx)</div>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item>
+                    <el-button
+                        type="primary"
+                        @click="onsubmit"
+                    >Import</el-button>
+                </el-form-item>
+            </el-form>
+            <el-divider></el-divider>
+            <el-table :data="tabledata" border>
+                <el-table-column prop="username" label="username" align="center"></el-table-column>
+                <el-table-column prop="realname" label="realname" align="center"></el-table-column>
+                <el-table-column prop="email" label="email" align="center"></el-table-column>
+                <el-table-column prop="gender" label="gender" align="center"></el-table-column>
+                <el-table-column prop="technical" label="technical" align="center"></el-table-column>
+                <el-table-column prop="country" label="country" align="center"></el-table-column>
+                <el-table-column prop="major" label="major" align="center"></el-table-column>
+                <el-table-column prop="field" label="field" align="center"></el-table-column>
+                <el-table-column prop="company" label="company" align="center"></el-table-column>
+            </el-table>
+        </div>
+        <el-dialog title="Import results" :visible.sync="dialogFormVisible">
+            <h3 v-show="erdata.lenght>0">error list</h3>
+            <el-table :data="erdata" row-class-name="warning-row">
+                <el-table-column type="index" label="No." align="center"></el-table-column>
+                <el-table-column prop="username" label="Username" align="center"></el-table-column>
+                <el-table-column prop="realname" label="Realname" align="center"></el-table-column>
+                <el-table-column prop="email" label="Email" align="center"></el-table-column>
+                <el-table-column prop="reason" label="reason" align="center"></el-table-column>
+            </el-table>
+            <el-divider></el-divider>
+            <h3 v-show="sudata.lenght>0">success list</h3>
+            <el-table :data="sudata" row-class-name="success-row">
+                <el-table-column type="index" label="No." align="center"></el-table-column>
+                <el-table-column prop="username" label="Username" align="center"></el-table-column>
+                <el-table-column prop="realname" label="Realname" align="center"></el-table-column>
+                <el-table-column prop="email" label="Email" align="center"></el-table-column>
+                <el-table-column prop="reason" label="result" align="center"></el-table-column>
+            </el-table>
+
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            mediaUrl:this.Common.mediaUrl,
+            baseUrl: this.Common.baseUrl,
+            fullscreenLoading: false,
+            username: localStorage.getItem('ms_username'),
+            upform: {
+                journal: '',
+                url: ''
+            },
+            items: [],
+            tabledata: [],
+            sudata: [],
+            erdata: [],
+            dialogFormVisible:false
+        };
+    },
+    created() {
+        this.initselect();
+    },
+    computed: {
+        up_url: function () {
+            return this.baseUrl + 'api/Admin/up_import';
+        },
+        getlinkurl:function(){
+            return this.mediaUrl+'static/import.xlsx'
+        }
+    },
+    methods: {
+        onsubmit() {
+            if (this.upform.journal == '' || this.upform.url == '') {
+                this.$message.error('please select journal and upload a excel');
+                return false;
+            }
+            this.fullscreenLoading = true;
+            this.$api.post('api/Admin/reviewerImport', this.upform).then((res) => {
+                this.fullscreenLoading = false;
+                this.sudata = res.sudata;
+                this.erdata = res.erdata;
+                this.dialogFormVisible = true;
+                console.log(res);
+            });
+        },
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal', { username: this.username })
+                .then((res) => {
+                    this.items = res;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //移除文件
+        handleRemove() {},
+        //审查文件
+        checkfile(file) {
+            // let isslx =
+            //     file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+            //     file.type === 'application/vnd.ms-excel';
+            // if (!isslx) {
+            //     this.$message.error('Only excel files can be uploaded(.xls,.xlsx)');
+            // }
+            // return isslx;
+        },
+        uperror(err) {
+            this.$message.error(err);
+        },
+        handleExceed() {
+            this.$message.error('limit one file');
+        },
+        //文件上传成功后的操作
+        upSuccess(res, file) {
+            if (res.code == 0) {
+                this.upform.url = 'reviewer/import/' + res.upurl;
+                this.gettables();
+            } else {
+                this.$message.error('service error' + res.msg);
+            }
+        },
+        //获取table数据
+        gettables() {
+            this.$api.post('api/Admin/getExcelData', this.upform).then((res) => {
+                this.tabledata = res;
+            });
+        }
+    }
+};
+</script>
+
+<style>
+  .el-table .warning-row {
+    background: rgb(252, 158, 158);
+  }
+
+  .el-table .success-row {
+    background: #d7f1c8;
+  }
+</style>

src/components/page/reviewerList.vue

@@ -0,0 +1,184 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-user"></i> Reviewer list
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <div class="handle-box">
+                <el-select
+                    v-model="query.journalId"
+                    @change="getdate"
+                    placeholder="Please select journal"
+                >
+                    <el-option :key="0" label="All journal" :value="0"></el-option>
+                    <el-option
+                        v-for="item in journalList"
+                        :key="item.journal_id"
+                        :label="item.title"
+                        :value="item.journal_id"
+                    ></el-option>
+                </el-select>
+                <!-- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addJournal">add</el-button> -->
+            </div>
+            <el-table
+                :data="tableData"
+                border
+                stripe
+                class="table"
+                ref="multipleTable"
+                header-cell-class-name="table-header"
+            >
+                <!-- <el-table-column prop="user_id" label="No." align="center"></el-table-column> -->
+                <el-table-column prop="account" label="Account" align="center"></el-table-column>
+                <el-table-column prop="country" label="Country" align="center"></el-table-column>
+                <el-table-column prop="company" label="Affiliation" align="center"></el-table-column>
+                <el-table-column label="" width="180" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            plain
+                            icon="el-icon-tickets"
+                            @click="showdetail(scope.row)"
+                        >Detail</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :current-page="query.pageIndex"
+                    :page-size="query.pageSize"
+                    :total="Total"
+                    @current-change="handlePageChange"
+                ></el-pagination>
+            </div>
+        </div>
+        <!-- <el-dialog title="change" :visible.sync="editVisible" width="40%">
+            <el-form ref="changform" :model="change" label-width="80px">
+                <el-form-item label="editormsg">
+                    <span>{{change.title}}</span>
+                </el-form-item>
+                <el-form-item label="state">
+                    <el-select v-model="change.editorId" placeholder="Please select">
+                        <el-option :key="0" label="Please select" :value="0"></el-option>
+                        <el-option
+                            v-for="item in editorList"
+                            :key="item.user_id"
+                            :label="item.account"
+                            :value='item.user_id'
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="editVisible = false">cancel</el-button>
+                <el-button type="primary" @click="">save</el-button>
+            </span>
+        </el-dialog> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            query: {
+                username: localStorage.getItem('ms_username'),
+                journalId:0,
+                pageIndex: 1,
+                pageSize: 10
+            },
+            tableData: [],
+            journalList:[],
+            Total: 0,
+            editVisible: false,
+        };
+    },
+    created() {
+        this.getdate();
+        this.initselect();
+    },
+    methods: {
+        // 获取编辑列表数据
+        getdate() {
+            this.$api
+                .post('api/User/getreviewerList', this.query)
+                .then(res => {
+                    this.Total = res.total;
+                    this.tableData = res.data;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        },
+        // 分页导航
+        handlePageChange(val) {
+            this.$set(this.query, 'pageIndex', val);
+            this.getdate();
+        },
+        showdetail(row) {
+            this.$router.push({ path: 'reviewerDetail', query: { id: row.user_id } });
+        },
+        //初始化期刊选项
+        initselect() {
+            this.$api
+                .post('api/Article/getJournal', { username: this.query.username })
+                .then(res => {
+                    this.journalList = res;
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.handle-box {
+    margin-bottom: 20px;
+}
+
+.handle-select {
+    width: 120px;
+}
+
+.handle-input {
+    width: 300px;
+    display: inline-block;
+}
+.table {
+    width: 100%;
+    font-size: 14px;
+}
+.red {
+    color: #ff0000;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.table-td-thumb {
+    display: block;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+.el-table .warning-row {
+    background: #f3ca7f;
+}
+.el-table .success-row {
+    background: #bcfc9a;
+}
+.el-table .normol-row{
+    background: #d8f1c7
+}
+.el-table .red-row{
+    background: #f05555;
+}
+</style>

src/components/page/submission.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <span>Welcome to the Submission system</span>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            journal:this.$route.query.journal,
+        };
+    },
+    created() {
+        this.$api.post('api/Article/getJournalByAlias',{alias:this.journal})
+        .then(res=>{
+            localStorage.setItem('ms_journal_alias',res.journal_id);
+            this.$router.push('/');
+        });
+        
+    }
+}
+</script>

src/components/page/test.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+    :row-class-name="tableRowClassName">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
+        }
+        return '';
+      }
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }]
+      }
+    }
+  }
+</script>

src/components/page/thanks.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="thankscontian">
+        <div class="msg_box">
+            <h3>Thank you for applying for our reviewer</h3>
+            <el-divider></el-divider>
+            <p>
+                We will process your request as soon as possible. The result of the request will be sent to your email address in the form of email. Please check it carefully
+            </p>
+            <el-divider></el-divider>
+            <div class="footer">
+                <el-link class="goregister" type="primary" @click="goregister">Go register</el-link>
+            </div>
+            <div class="footer">
+                <el-link class="gologin" type="primary" @click="gologin">Go log in</el-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            mydate:''
+        }
+    },
+    methods: {
+        goregister(){
+            this.$router.push('/register');
+        },
+        gologin(){
+            this.$router.push('/login');
+        }
+    },
+}
+</script>
+
+<style scoped>
+.thankscontian{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url(../../assets/img/login-bg.jpg);
+    background-size: 100%;
+}
+
+.msg_box{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 500px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+h3{
+    text-align: center;
+    margin: 15px 0;
+    color: rgb(19, 27, 21);
+}
+p{
+     text-indent:2em;
+     padding:20px 10px;
+}
+.goregister{
+    float: left;
+    font-size: 18px;
+    margin-left: 30px;
+    padding-bottom: 20px;
+}
+.gologin{
+    float: right;
+    font-size: 18px;
+    margin-right: 30px;
+    padding-bottom: 20px;
+}
+</style>

src/main.js

@@ -0,0 +1,65 @@
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import ElementUI, { TabPane } from 'element-ui';
+import VueI18n from 'vue-i18n';
+import { messages } from './components/common/i18n';
+import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
+// import './assets/css/theme-green/index.css'; // 浅绿色主题
+import './assets/css/icon.css';
+import './components/common/directives';
+import 'babel-polyfill';
+import api from './api/index.js';
+import Common from './components/common/common'
+
+Vue.prototype.Common = Common;
+
+
+Vue.prototype.$api = api
+
+Vue.config.productionTip = false;
+Vue.use(VueI18n);
+Vue.use(ElementUI, {
+    size: 'small'
+});
+const i18n = new VueI18n({
+    locale: localStorage.getItem('langs')||'en',
+    messages
+});
+//使用钩子函数对路由进行权限跳转
+router.beforeEach((to, from, next) => {
+    document.title = `${to.meta.title} | Traditional Medicine Research`;
+    const role = localStorage.getItem('ms_username');
+    const userrole = localStorage.getItem('ms_userrole');
+    if (!role && to.path!='/register'&&to.path!=='/submission'&& to.path !=='/reviewer'&&to.path !=='/thanks' &&to.path !== '/login'&&to.path.search(/retrieve/i)<0 ) {
+        next('/login');
+    // } else if (to.meta.permission) {
+    //     // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
+    //     // role === 'admin' ? next() : next('/403');
+    //     if(userrole == to.meta.permission){
+    //         next();
+    //     }else{
+    //         next('/403');
+    //     }
+
+    } else {
+        //审稿人导航
+        // if(to.path=='/reviewerArticleList'&&userrole!='reviewer'){
+        //     next('/authorApplyReviewer');
+        // }
+        // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
+        if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
+            Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
+                confirmButtonText: '确定'
+            });
+        } else {
+            next();
+        }
+    }
+});
+
+new Vue({
+    router,
+    i18n,
+    render: h => h(App)
+}).$mount('#app');

src/router/index.js

@@ -0,0 +1,234 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+
+export default new Router({
+    mode: 'history',
+    routes: [
+        {
+            path: '/',
+            redirect: '/dashboard'
+        },
+        {
+            path: '/',
+            component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
+            meta: { title: '自述文件' },
+            children: [
+                {
+                    path: '/dashboard',
+                    component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Dashboard.vue'),
+                    meta: { title: 'Home' }
+                },
+                // {
+                //     path: '/icon',
+                //     component: () => import('../components/page/Icon.vue'),
+                //     meta: { title: '自定义图标' }
+                // },
+                {
+                    path: '/articleList',
+                    component: () => import(/* webpackChunkName: "table" */ '../components/page/articleList.vue'),
+                    meta: { title: 'My manuscript' }
+                },
+                {
+                    path: '/articleListEditor',
+                    component: () => import(/* webpackChunkName: "table" */ '../components/page/articleListEditor.vue'),
+                    meta: { title: 'Manuscript to be examined' ,permission: 2}
+                },
+                {
+                    path:'/articleDetailEditor',
+                    component: () => import('../components/page/articleDetailEditor.vue'),
+                    meta: { title: 'Manuscript detail' ,permission: 2},
+                    hidden:true
+                },
+                {
+                    path: '/articleDetail',
+                    component: () => import('../components/page/articleDetail.vue'),
+                    meta: { title: 'Manuscript detail' ,},
+                    hidden:true
+                },
+                {
+                    path:'articleRevise',
+                    component:()=>import('../components/page/articleRevise.vue'),
+                    meta:{title:'Manuscript revise'},
+                    hidden:true
+                },
+                {
+                    path: '/articleAdd',
+                    component: () => import('../components/page/articleAdd.vue'),
+                    meta: { title: 'Add manuscript' }
+                },
+                {
+                    path:'/articleReviewer',
+                    component:()=>import('../components/page/articleReviewer.vue'),
+                    meta:{title:'Article reviewer'},
+                    hidden:true
+                },
+                {
+                    path:'/articleReviewerDetail',
+                    component:()=>import('../components/page/articleReviewerDetail'),
+                    meta:{title:'Article detail'},
+                    hidden:true
+                },
+                {
+                    path:'/editorList',
+                    component: ()=>import('../components/page/editorList.vue'),
+                    meta:{title:'Editor list'}
+                },
+                {
+                    path:'/editorAdd',
+                    component:()=>import('../components/page/editorAdd.vue'),
+                    meta:{title:'Editor add'}
+                },
+                {
+                    path:'/journalList',
+                    component:()=>import('../components/page/journallist.vue'),
+                    meta:{title:'Journal list'}
+                },
+                {
+                    path:'authorApplyReviewer',
+                    component:()=>import('../components/page/authorApplyReviewer.vue'),
+                    meta:{title:'Author apply'},
+                    hidden:true
+                },
+                {
+                    path:'/journalAdd',
+                    component:()=>import('../components/page/journalAdd.vue'),
+                    meta:{title:'Journal add'}
+                },
+                {
+                    path:'/reviewerApplyList',
+                    component:()=>import('../components/page/reviewerApplyList.vue'),
+                    meta:{title:'Reviewer aplly list'}
+                },
+                {
+                    path:'/reviewerApplyDetail',
+                    component:()=>import('../components/page/reviewerApplyDetail.vue'),
+                    meta:({title:'Reviewer apply detail'}),
+                    hidden:true
+                },
+                {
+                    path:'/reviewerArticleList',
+                    component:()=>import('../components/page/reviewerArticleList.vue'),
+                    meta:({title:'Reviewer article list'})
+                },
+                {
+                    path:'/reviewerArticleDetail',
+                    component:()=>import('../components/page/reviewerArticleDetail.vue'),
+                    meta:({title:'Reviewer article detail'}),
+                    hidden:true
+                },
+                {
+                    path:'/reviewerList',
+                    component:()=>import('../components/page/reviewerList.vue'),
+                    meta:{title:'Reviewer list'}
+                },
+                {
+                    path:'/reviewerDetail',
+                    component:()=>import('../components/page/reviewerDetail.vue'),
+                    meta:{title:'reviewer detail'},
+                    hidden:true
+                },
+                {
+                    path:'/adminImportReviewer',
+                    component:()=>import('../components/page/adminImportReviewer.vue'),
+                    meta:{title:'Import reviewer'}
+                },
+                {
+                    path:'/adminImportreviewerError',
+                    component:()=>import('../components/page/adminImportreviewerError.vue'),
+                    meta:{title:'Import error'}
+                },
+                {
+                    path:'/reviewerImport',
+                    component:()=>import('../components/page/reviewerImport.vue'),
+                    meta:{title:'Reviewer import'}
+                },
+                {
+                    path:'/authorApplySuccess',
+                    component:()=>import('../components/page/authorApplySuccess.vue'),
+                    meta:{title:'Apply success'}
+                },
+                {
+                    path:'/reviewerImportError',
+                    component:()=>import('../components/page/reviewerImportError.vue'),
+                    meta:{title:'Import error'}
+                },
+                {
+                    path:'/monitorManuscript',
+                    component:()=>import('../components/page/monitorManuscript.vue'),
+                    meta:{title:'Manuscript list'}
+                },
+                {
+                    path:'/monitorManuscriptDetail',
+                    component:()=>import('../components/page/monitorManuscriptDetail.vue'),
+                    meta:{title:'Manuscript detail'},
+                    hidden:true
+                },
+                {
+                    path: '/404',
+                    component: () => import(/* webpackChunkName: "404" */ '../components/page/404.vue'),
+                    meta: { title: '404' }
+                },
+                {
+                    path: '/403',
+                    component: () => import(/* webpackChunkName: "403" */ '../components/page/403.vue'),
+                    meta: { title: '403' }
+                },
+                // {
+                //     path: '/donate',
+                //     component: () => import(/* webpackChunkName: "donate" */ '../components/page/Donate.vue'),
+                //     meta: { title: '支持作者' }
+                // }
+            ]
+        },
+        {
+            path: '/login',
+            component: () => import(/* webpackChunkName: "login" */ '../components/page/Login.vue'),
+            meta: { title: 'Login' }
+        },
+        {
+            path: '/retrieve',
+            component: () => import(/* webpackChunkName: "retrieve" */ '../components/page/Retrieve.vue'),
+            meta: { title: 'Retrieve password' }
+        },
+        {
+            path: '/retrieveact',
+            component: () => import(/* webpackChunkName: "retrieveact" */ '../components/page/Retrieveact.vue'),
+            meta: { title: 'Retrieve password' }
+        },
+        {
+            path:'/submission',
+            component:()=>import('../components/page/submission.vue'),
+            meta:{title:'Submission system'}
+        },
+        {
+            path: '/register',
+            component: () => import(/* webpackChunkName: "register" */ '../components/page/Register.vue'),
+            meta: { title: 'Register' }
+        },
+        {
+            path:'/reviewer',
+            component:()=>import('../components/page/reviewer.vue'),
+            meta:{title:'reviewer'}
+        },
+        {
+            path:'/thanks',
+            component:()=>import('../components/page/thanks.vue'),
+            meta:{title:'thanks'}
+        },
+        {
+            path:'/test',
+            component:()=>import('../components/page/test.vue'),
+            meta:{title:'test'}
+        },
+        {
+            path: '*',
+            redirect: '/404'
+        }
+    ]
+});

src/utils/request.js

@@ -0,0 +1,34 @@
+import axios from 'axios';
+
+const service = axios.create({
+    // process.env.NODE_ENV === 'development' 来判断是否开发环境
+    // easy-mock服务挂了，暂时不使用了
+    // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
+    timeout: 5000
+});
+
+service.interceptors.request.use(
+    config => {
+        return config;
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+service.interceptors.response.use(
+    response => {
+        if (response.status === 200) {
+            return response.data;
+        } else {
+            Promise.reject();
+        }
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+export default service;