'normal'

src/App.vue

@@ -11,76 +11,7 @@ export default {
 </script>
 
 <style lang="scss">
-  body {
-    /*background-color: #F7F7F7;*/
-    background: url("./assets/images/sm_zjt_topbanner.png") center top no-repeat #F7F7F7;
-    font-size: 14px;
-  }
-  #app {
-    font-family: "Avenir", Helvetica, Arial, sans-serif;
-  }
-  /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
-  html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-    padding: 0; }
+ @import "./assets/css/base.css";
+ @import "./assets/css/main.css";
 
-  h1, h2, h3, h4, h5, h6 {
-    font-size: 100%;
-    font-weight: normal; }
-
-  ul {
-    list-style: none; }
-
-  button, input, select, textarea {
-    margin: 0; }
-
-  html {
-    box-sizing: border-box; }
-
-  *, *::before, *::after {
-    box-sizing: inherit; }
-
-  img, video {
-    height: auto;
-    max-width: 100%; }
-
-  iframe {
-    border: 0; }
-
-  table {
-    border-collapse: collapse;
-    border-spacing: 0; }
-
-  td, th {
-    padding: 0; }
-
-  td:not([align]), th:not([align]) {
-    text-align: left; }
-  .el-carousel__container{
-    background: #F5F7FA;
-    border-color: 1px solid #dfe4ed;
-  }
-  .fl{float:left;}
-  .fr{float:right;}
-  .ss{float:right;width:355px;}
-  .banner{margin:0 auto;width:1000px;height:176px;}
-  .logo{ margin-top:61px; float:left;}
-  .jsj{ margin-top:63px; float:left; margin-left:50px;}
-  .nav{ height:50px; background:#0078c7; margin:0 auto; width:1000px;}
-
-
-  .nav ul li{ float:left; line-height:50px;}
-
-  .nav ul li a{ padding:0 27px; color:#FFF; display:block; height:50px;}
-
-  .nav ul li a:hover{ background:#85BBD2; text-decoration:none;}
-
-  .navfirst a{ background:#ffa200; display:block;}
-
-  .sousuo{ height:37px; line-height:37px; background:#efefef; border-bottom:1px solid #e7e7e7; width:1000px; margin:0 auto;}
-  .sousuo h4{ margin-left:20px;}
-
-  .footer{ height:200px; margin: 20px auto 0;width: 1000px;}
-  .footer p{ text-align:center; color:#FFF; line-height:28px;}
-  .footer p a{ color:#FFF;}
 </style>

src/api/article.js

@@ -10,7 +10,7 @@ export const getArticalList = (data) => {
 
 export const getHotArticalList = (data) => {
     return service({
-        url: "/api/artical/getHotArticalList",
+        url: "/api/base/getHotArticalList",
         method: 'post',
         data
     })
@@ -24,6 +24,38 @@ export const getApplyArticalList = (data) => {
     })
 }
 
+export const getReplyArticalList = (data) => {
+    return service({
+        url: "/api/artical/getReplyArticalList",
+        method: 'post',
+        data
+    })
+}
+
+export const getMyArticalList = (data) => {
+    return service({
+        url: "/api/artical/getMyArticalList",
+        method: 'post',
+        data
+    })
+}
+
+export const getViewArticalList = (data) => {
+    return service({
+        url: "/api/artical/getViewArticalList",
+        method: 'post',
+        data
+    })
+}
+
+export const getDownloadArticalList = (data) => {
+    return service({
+        url: "/api/artical/getDownloadArticalList",
+        method: 'post',
+        data
+    })
+}
+
 export const addArtical = (data) => {
     return service({
         url: "/api/artical/addArtical",
@@ -39,3 +71,28 @@ export const getArticalInfo = (data) => {
         data
     })
 }
+
+
+export const likeArtical = (data) => {
+    return service({
+        url: "/api/artical/likeArtical",
+        method: 'post',
+        data
+    })
+}
+
+export const unLikeArtical = (data) => {
+    return service({
+        url: "/api/artical/unLikeArtical",
+        method: 'post',
+        data
+    })
+}
+
+export const getArticalLikeList = (data) => {
+    return service({
+        url: "/api/artical/getArticalLikeList",
+        method: 'post',
+        data
+    })
+}

src/api/user.js

@@ -1,27 +1,10 @@
 import request from '@/utils/request'
 
-export function login(data) {
-  return Promise.resolve({
-    token: 'e703977d9b82d2de3a878abe0e12e8f90'
-  })
-  // return request({
-  //   url: '/vue-element-admin/user/login',
-  //   method: 'post',
-  //   data
-  // })
-}
-
-export function getInfo(token) {
-  return request({
-    url: '/vue-element-admin/user/info',
-    method: 'get',
-    params: { token }
-  })
-}
 
-export function logout() {
+export function getMyDepartmentList() {
   return request({
-    url: '/vue-element-admin/user/logout',
-    method: 'post'
+    url: '/api/department/getMyDepartmentList',
+    method: 'post',
+    data: { }
   })
 }

src/assets/css/base.css

@@ -0,0 +1,74 @@
+ body {
+    /*background-color: #F7F7F7;*/
+    background: url("../images/sm_zjt_topbanner.png") center top no-repeat #F7F7F7;
+    font-size: 14px;
+  }
+  #app {
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
+  }
+  /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+  html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 0; }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    font-weight: normal; }
+
+  ul {
+    list-style: none; }
+
+  button, input, select, textarea {
+    margin: 0; }
+
+  html {
+    box-sizing: border-box; }
+
+  *, *::before, *::after {
+    box-sizing: inherit; }
+
+  img, video {
+    height: auto;
+    max-width: 100%; }
+
+  iframe {
+    border: 0; }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+
+  td, th {
+    padding: 0; }
+
+  td:not([align]), th:not([align]) {
+    text-align: left; }
+  .el-carousel__container{
+    background: #F5F7FA;
+    border-color: 1px solid #dfe4ed;
+  }
+
+
+  .fl{float:left;}
+  .fr{float:right;}
+  .ss{float:right;width:355px;}
+  .banner{margin:0 auto;width:1000px;height:176px;}
+  .logo{ margin-top:61px; float:left;}
+  .jsj{ margin-top:63px; float:left; margin-left:50px;}
+  .nav{ height:50px; background:#0078c7; margin:0 auto; width:1000px;}
+
+
+  .nav ul li{ float:left; line-height:50px;}
+
+  .nav ul li a{ padding:0 27px; color:#FFF; display:block; height:50px;}
+
+  .nav ul li a:hover{ background:#85BBD2; text-decoration:none;}
+
+  .navfirst a{ background:#ffa200; display:block;}
+
+  .sousuo{ height:37px; line-height:37px; background:#efefef; border-bottom:1px solid #e7e7e7; width:1000px; margin:0 auto;}
+  .sousuo h4{ margin-left:20px;}
+
+  .footer{ height:200px; margin: 20px auto 0;width: 1000px;}
+  .footer p{ text-align:center; color:#FFF; line-height:28px;}
+  .footer p a{ color:#FFF;}

src/assets/css/main.css

@@ -0,0 +1,40 @@
+.main{
+  width: 1000px;
+}
+
+.main-body{
+  background: #FFF;
+  margin-top:20px;
+}
+
+.main-table{
+  background: #FFF;
+  margin-top:20px;
+}
+
+.main-left{
+  width: 200px;
+  display:inline-block;
+}
+
+.main-right{
+  width: 800px;
+  display:inline-block;
+  padding: 0 10px;
+  vertical-align: top;
+}
+
+.mt20{
+  margin-top: 20px;
+}
+
+.p20{padding: 20px;}
+
+.ml20{ margin-left: 20px;}
+.ml10{ margin-left: 10px;}/
+.ml2{ margin-left: 2px;}
+
+.mt35{ margin-top: 35px;}
+.mt20{ margin-top: 20px;}
+.mt15{ margin-top: 15px;}
+.mt10{ margin-top: 10px;}

src/main.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
 
 import App from './App'
-import store from './store'
+import store  from '@/store/index'
 import router from './router'
 import Cookies from 'js-cookie'
 
-import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
+// import enLang from 'element-ui/lib/locale/lang/cn'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
 import Element from 'element-ui'
 import './styles/element-variables.scss'
 import './styles/index.scss' // global css
@@ -15,16 +15,37 @@ import './icons' // icon
 import './permission' // permission control
 import './utils/error-log' // error log
 import Bus from '@/utils/bus.js'
+import ElementUI from 'element-ui';
+Vue.use(ElementUI);
+Vue.component(ElementUI.Message)
 
 import * as filters from './filters' // global filters
 
-Vue.use(Element, {
-  size: Cookies.get('size') || 'medium', // set element-ui default size
-  locale: enLang // 如果使用中文，无需设置，请删除
-})
+
+
+Vue.use(Element)
+// Vue.use(Element, {
+//   size: Cookies.get('size') || 'medium', // set element-ui default size
+//   locale: enLang // 如果使用中文，无需设置，请删除
+// })
 
 Vue.use(Bus)
 
+
+Vue.prototype.$message.successMsg = function (msg, duration=2) {
+    return ElementUI.Message.success({
+        message: msg,
+        duration: duration*1000
+    })
+}
+
+Vue.prototype.$message.errorMsg = function (msg, duration=2) {
+    return ElementUI.Message.error({
+        message: msg,
+        duration:duration*1000
+    })
+}
+
 // register global utility filters
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])

src/pages/data/data.js

@@ -83,13 +83,10 @@ export default {
             "department": "项目中心"
         }
     ],
-  filelist:[
-    { "value": "文件名1", "address": "部门1" },
-    { "value": "文件名2", "address": "部门2" },
-    { "value": "文件名3", "address": "部门1" },
-    { "value": "文件名4", "address": "部门2" },
-    { "value": "文件名5", "address": "部门1" },
-    { "value": "文件名6", "address": "部门2" },
-    { "value": "文件名7", "address": "部门1" }
+  categorys:[
+    { "id": "law", "value": "法律法规" },
+    { "id": "mechanism", "value": "机制类" },
+    { "id": "result", "value": "成果类" },
+    { "id": "other", "value": "其他" }
   ]
 }

src/pages/login/components/SignInForm.vue

@@ -54,6 +54,9 @@
 <script>
 import { validateLoginname, validatePassword } from '@/utils/validate'
 import md5 from '@/utils/md5'
+import { mapActions } from "vuex";
+
+
 
 export default {
   name: 'Login',
@@ -88,6 +91,7 @@ export default {
      this.redirect = this.$route.query.redirect
   },
   methods: {
+    ...mapActions("user", ["login", "loadDepartment"]),
     checkCapslock(e) {
       const { key } = e
       this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
@@ -104,21 +108,18 @@ export default {
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/login', { username: this.loginForm.username, password: md5(this.loginForm.password) })
-            .then(() => {
-              console.log("q", this.redirect )
-              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
-              this.loading = false
-            })
-            .catch(() => {
-              this.loading = false
-            })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
+        if (!valid)  return;
+        this.loading = true
+        let param = { username: this.loginForm.username, password: md5(this.loginForm.password) }
+        let path = this.redirect || '/';
+        this.login( param).then(() => {
+          this.$router.push({ path, query: this.otherQuery })
+          this.loadDepartment()
+          this.loading = false
+        }).catch((err) => {
+          console.log("err", err)
+          this.loading = false
+        })
       })
     }
   }

src/pages/login/index.vue

@@ -38,6 +38,7 @@ export default {
   watch: {
     $route: {
       handler: function(route) {
+        console.log("route", route)
         const query = route.query
         if (query) {
           this.redirect = query.redirect

src/pages/other/apply-list.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="other-container" style="margin-top: 178px;">
-    <IHeader />
-    <div style="background: #FFF;margin-top:20px;">
+  <div class="main">
+    <div class="main-body">
       <el-card class="box-card">
         <div slot="header" class="clearfix" >
           <span>申请记录</span>
@@ -60,11 +59,6 @@
         <el-button type="primary" size="medium" style="width: 100px; padding: 10px; margin: 20px;" @click="dialogFormVisible=false">允许下载</el-button>
       </div>
     </el-dialog>
-
-    <IFooter />
-
-
-
   </div>
 </template>
 
@@ -160,11 +154,6 @@ export default {
   .el-card__body .text{
     margin: 5px 0;
   }
-  .el-button--medium{
-    margin: 0;
-    padding: 0;
-    color: #303133
-  }
   .el-card{
     color: #1890ff;
   }

src/pages/other/components/IArtical.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-card class="mt20">
+    <div slot="header" class="clearfix">
+      <span>{{department}} {{department?'-':''}} {{categorys[type]}}</span>
+      <el-button class="more-btn" type="text" @click="$emit('return')" v-if="more"><<返回</el-button>
+      <el-button class="more-btn" type="text" @click="handleOpenMore(type)" v-else>更多>></el-button>
+    </div>
+    <div v-for="(o,index) in list" :key="o.id" class="text item">
+      <div style="display: inline-block;width: 100%;"  >
+
+        <!-- <el-link target="_blank" :download="o.filename"  :href="'/'+o.filename" :underline="false" v-if="o.isOpen">
+          <span class="oneline" >
+            【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
+          </span>
+        </el-link> -->
+
+
+        <span @click="downloadFile(o)"  style="color: #606266;" >
+           <span class="oneline" >
+               【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
+           </span>
+        </span>
+
+
+        <span class="fr" style="color: #b4b4b4;">{{o.createAt }}</span>
+        <span style="clear: both;"></span>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+
+  export default {
+    props: {
+      department: {
+        type: String,
+        default: ''
+      },
+      type:{
+        type: String,
+        default:"laws"
+      },
+      more:{
+        type: Boolean,
+        default:false
+      },
+      list:{
+        type: Array,
+        default:()=>[]
+      }
+    },
+    data() {
+      return {
+        categorys:{'laws':'法律法规', 'mechanism':'机制类','result':'成果类', 'other':'其他类', 'more':'更多'}
+      };
+    },
+    filters:{
+      filterTitle(val){
+        if( val.length > 35) {
+          return val.substr(0,32)+"..."
+        }else{
+          return val
+        }
+      }
+    },
+    methods: {
+
+      handleOpenMore( type ){
+        this.$emit("more", type)
+      },
+      downloadFile( item){
+        let query= {articalId: item.articalId }
+        this.$router.push( {path: '/file-info', query})
+        // this.$emit("download", type)
+      }
+    }
+  }
+
+</script>
+
+<style>
+  .el-card__body .text{
+    margin: 5px 0;
+  }
+  .el-card{
+    color: #1890ff;
+  }
+  .el-card__header{
+    padding: 15px 20px;
+  }
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+  }
+
+  .more-btn{
+    float: right;
+    padding: 5px 0;
+    color: #999;
+    font-size: 16px;
+  }
+
+  .oneline {
+    cursor:hand;
+    line-height: 30px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .oneline:hover{
+    cursor: pointer;
+    font-weight: 900;
+    color: #1890FF;
+  }
+</style>

src/pages/other/components/IHeader.vue

@@ -35,15 +35,17 @@
           style="width: 200px;margin-right: 5px;"
           size="mini"
           prefix-icon="el-icon-search"
+          clearable
         ></el-autocomplete>
-        <el-button type="primary" size="mini">搜索</el-button>
-        <el-button type="success" size="mini">高级搜索</el-button>
+        <el-button type="primary" size="mini" @click="handlerSearch">搜索</el-button>
+        <el-button type="success" size="mini" @click="handlerSearch">高级搜索</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import { mapGetters } from "vuex";
 export default {
   data() {
     return {
@@ -56,48 +58,42 @@ export default {
      link:{
       type : String,
       default:  'file-manage'
+     },
+     selectDepartId:{
+      type: [String,Number],
+      default: 0
      }
   },
+  computed: {
+  	...mapGetters("user", ["getArticals"])
+  },
   methods: {
-    loadAll() {
-      return [
-        { "value": "测试数据1" },
-        { "value": "测试数据2" },
-        { "value": "测试数据3" },
-        { "value": "测试数据4" },
-        { "value": "测试数据5" },
-        { "value": "测试数据6" },
-        { "value": "测试数据7" },
-        { "value": "测试数据8" },
-        { "value": "测试数据9" },
-        { "value": "测试数据10" },
-        { "value": "测试数据11" }
-      ];
-    },
     isActive( path ){
       let rpath = this.$route.path;
       return rpath.indexOf( path )> -1;
     },
     querySearchAsync(queryString, cb) {
-      var SearchList = this.SearchList;
-      var results = queryString ? SearchList.filter(this.createStateFilter(queryString)) : SearchList;
-
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        cb(results);
-      }, 1000 * Math.random());
+      let results = [];
+      for ( let id in this.getArticals){
+        let item = this.getArticals[id]
+        if(item.title.indexOf( queryString)>-1 ){
+          results.push( {id: id, value: item.title})
+        }
+      }
+      setTimeout(res=>{cb &&cb(results) }, 100 );
     },
     createStateFilter(queryString) {
       return (state) => {
-        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        return (state.title.indexOf(queryString.toLowerCase()) === 0);
       };
     },
     handleSelect(item) {
-      console.log(item);
+      this.$router.push( {path:'/file-info', query:{articalId: item.id}})
+      console.log("search", item);
+    },
+    handlerSearch(){
+      this.$router.push( {path:'/file-search', query:{keyword: this.searchInfo}})
     }
-  },
-  mounted() {
-    this.SearchList = this.loadAll();
   }
 }
 </script>

src/pages/other/components/ISelect.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/pages/other/file-info.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="main">
+    <div class="main-body">
+      <div class="xl_main mt15 mar-B20" v-loading="loading">
+        <div class="n-tit">
+          <h3>{{info.title}}</h3>
+
+          <h4>
+            {{info.createAt|toDatetime}} &nbsp;&nbsp;
+            <span class="ml10"><i class="el-icon-view"></i> {{info.viewCount}}</span>
+            <span class="ml10"><i class="el-icon-download"></i> {{info.downloadCount}}</span>
+          </h4>
+        </div>
+        <div class="mt35">
+          <h2> 文章简介 </h2>
+          <div class="content mt20 p20">
+            <div>{{info.brief}} </div>
+          </div>
+        </div>
+
+        <div class="p20">
+          <el-button v-if="!isLike" icon="el-icon-star-off" @click="likeArtical"> 收藏</el-button>
+          <el-button v-else icon="el-icon-star-on" type="info" @click="unLikeArtical">取消</el-button>
+
+          <el-button  icon="el-icon-download" @click="likeArtical"> 下载</el-button>
+
+
+        </div>
+
+
+      </div>
+    </div>
+      <!--  -->
+    <el-card class="mt10">
+      <el-row>
+        <el-col :span="12" >
+           <h2>我的下载记录</h2>
+        </el-col>
+
+        <el-col :span="12">
+           <h2>我的下载记录</h2>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <div style="height: 60px;"></div>
+  </div>
+</template>
+
+<script>
+  import IHeader from "./components/IHeader";
+  import IFooter from "./components/IFooter";
+  import {toDatetime } from '@/utils/date.js'
+  import { getArticalInfo, likeArtical, unLikeArtical} from '@/api/article.js'
+
+  export default {
+    name: 'application',
+    components: {
+      IHeader,
+      IFooter
+    },
+    filters: {
+      toDatetime
+    },
+    data() {
+      return {
+        loading:false,
+        articalId: 0,
+        isLeader:0,
+        recommend: [],
+        apply_list: [],
+        isLike: 0,
+        info: {}
+      }
+    },
+    created() {
+      this.articalId = +this.$route.query.articalId || 0;
+      if (this.articalId) {
+        this.getArticalInfo()
+      }
+    },
+    methods: {
+      likeArtical(){
+        let param ={articalId: this.articalId}
+        this.loading = true;
+        likeArtical( param ).then( res=>{
+          if( res.code == 200){
+            this.$message.successMsg("收藏成功", 1)
+            this.isLike = 1
+          }
+          this.loading = false;
+        }).catch( ()=>{
+          this.loading = false
+        })
+
+      },
+      unLikeArtical(){
+        let param ={articalId: this.articalId}
+        this.loading = true;
+        unLikeArtical( param ).then( res=>{
+          console.log("res", res)
+          if( res.code == 200){
+            this.$message.successMsg("取消成功", 1)
+            this.isLike = 0
+          }
+          this.loading = false;
+        }).catch( ()=>{
+          this.loading = false
+        })
+      },
+      getArticalInfo() {
+        let param = {
+          articalId: this.articalId
+        }
+        getArticalInfo(param).then(res => {
+          if (res.code == 200) {
+            this.info = res.data.info;
+            this.recommend = res.data.recommend || [];
+            this.apply_list = res.data.apply_list || [];
+            this.isLike = res.data.isLike || 0;
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .xl_main {
+    width: 960px;
+    padding: 0px 20px;
+  }
+
+
+
+  .mar-B20 {
+    margin-bottom: 20px;
+  }
+
+  .mar-T15 {
+    margin-top: 15px;
+  }
+
+  .n-tit {
+    text-align: center;
+    border-bottom: 1px dashed #ccc;
+    padding-bottom: 10px;
+  }
+
+  .n-tit h3 {
+    font-size: 22px;
+    font-weight: bold;
+    padding-top: 25px;
+    text-align: center;
+    line-height: 36px;
+  }
+
+  .box1 {
+    margin-top: 20px;
+    padding: 0px 36px 18px 36px;
+    font-size: 16px;
+    color: #000000;
+  }
+
+  p {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  }
+
+  h5 {
+    display: block;
+    font-size: 0.83em;
+    margin-block-start: 1.67em;
+    margin-block-end: 1.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+
+  .xl_btn {
+    display: inline-block;
+    width: 60px;
+    height: 29px;
+    line-height: 29px;
+    text-align: center;
+    margin: 0 10px;
+  }
+</style>

src/pages/other/file-manage.vue

@@ -1,183 +1,64 @@
 <template>
   <div class="other-container" style="margin-top: 178px;">
-    <IHeader />
-    <div style="padding-top: 10px;background: #FFF;margin-top:20px;">
-      <div style="width: 200px;display:inline-block;">
-        <el-select v-model="searchDepartId" filterable clearable placeholder="关键字搜索部门" @change="handleChangeDepart">
-          <el-option
-            v-for="item in list"
-            :key="item.department_id"
-            :label="item.department"
-            :value="item.department_id"
-          >
-          </el-option>
-        </el-select>
-        <el-menu
-          :default-active="selectDepartId"
-          class="el-menu-vertical-demo"
-          @select="handleSelectDepart">
-          <template  v-for="(item, index) in list">
-            <el-menu-item :index="item.department_id">
-              <span>{{ item.department}}</span>
-            </el-menu-item>
-          </template>
-        </el-menu>
-      </div>
-      <div style="width: 800px;display:inline-block;padding: 0 20px;vertical-align: top;">
-        <div style="margin: 10px;position:relative;">
-          <i class="el-icon-location"></i>
-          <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-            <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
-            <el-breadcrumb-item>文件列表</el-breadcrumb-item>
-            <el-breadcrumb-item>{{ selectDepartName }}</el-breadcrumb-item>
-          </el-breadcrumb>
-          <div style="position:absolute;right: -10px;top:-5px;">
-            <el-autocomplete
-              popper-class="my-autocomplete"
-              v-model="state3"
-              :fetch-suggestions="querySearch"
-              clearable
-              placeholder="搜索文件"
-              size="mini"
-              @select="handleSelectFile">
-              <i
-                class="el-icon-search el-input__icon"
-                slot="suffix"
-              />
-              <template slot-scope="props">
-                <div class="name">{{ props.item.value }}<span class="addr">({{ props.item.address }})</span></div>
-              </template>
-            </el-autocomplete>
-          </div>
+    <IHeader :departmentId="selectDepartId"/>
+    <div  class="main">
+
+      <div class="main-table">
+
+        <div class="main-left">
+          <el-select v-model="searchDepartId" filterable clearable placeholder="关键字搜索部门" @change="handleChangeDepart">
+            <el-option
+              v-for="item in list"
+              :key="item.department_id"
+              :label="item.department"
+              :value="item.department_id"
+            >
+            </el-option>
+          </el-select>
+          <el-menu
+            :default-active="selectDepartId"
+            class="el-menu-vertical-demo"
+            @select="handleSelectDepart">
+            <template  v-for="(item, index) in list">
+              <el-menu-item :index="item.department_id">
+                <span>{{ item.department}}</span>
+              </el-menu-item>
+            </template>
+          </el-menu>
         </div>
 
-
-        <el-card class="box-card" v-if="!isShowMore">
-          <div slot="header" class="clearfix">
-            <span>{{ selectDepartName }} 法律法规类资料</span>
-            <el-button style="float: right; padding: 3px 0;color: #999;font-size: 12px;" type="text" @click="handleOpenMore(1)">更多></el-button>
-          </div>
-          <div v-for="(o,index) in restaurants.laws" :key="o.id" class="text item">
-            <div style="display: inline-block;width: 100%;"  >
-
-              <el-link target="_blank" :download="o.filename"  :href="'/'+o.filename" :underline="false" v-if="o.isOpen">
-                <span class="oneline" >
-                  【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
-                </span>
-              </el-link>
-
-              <span v-else @click="downloadFile(o)"  style="color: #606266;" >
-                 <span class="oneline" >
-                     【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
-                 </span>
-              </span>
-
-
-              <span class="fr" style="color: #b4b4b4;">{{o.createAt }}</span>
-              <span style="clear: both;"></span>
-            </div>
-          </div>
-        </el-card>
-
-        <el-card class="box-card" v-if="!isShowMore">
-          <div slot="header" class="clearfix">
-            <span>{{ selectDepartName }} 机制类资料</span>
-            <el-button style="float: right; padding: 3px 0;color: #999;font-size: 12px;" type="text" @click="handleOpenMore(2)">更多></el-button>
-          </div>
-          <div v-for="(o,index) in restaurants.mechanism" :key="o.id" class="text item">
-            <div style="display: inline-block;width: 100%;">
-              <el-link target="_blank" :download="o.filename"  :href="'/'+o.filename" :underline="false" v-if="o.isOpen">
-                <span class="oneline" >
-                  【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
-                </span>
-              </el-link>
-
-              <span v-else @click="downloadFile(o)"  style="color: #606266;" >
-                 <span class="oneline" >
-                     【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
-                 </span>
-              </span>
-
-              <span class="fr" style="color: #b4b4b4;">{{o.createAt }}</span>
-              <span style="clear: both;"></span>
-            </div>
-          </div>
-        </el-card>
-
-
-        <el-card class="box-card" v-if="!isShowMore">
-          <div slot="header" class="clearfix">
-            <span>{{ selectDepartName }} 成果类资料</span>
-            <el-button style="float: right; padding: 3px 0;color: #999;font-size: 12px;" type="text" @click="handleOpenMore(3)">更多></el-button>
-          </div>
-
-          <div v-for="(o,index) in restaurants.result" :key="o.id" class="text item">
-            <div style="display: inline-block;width: 100%;">
-
-              <el-link target="_blank" :download="o.filename"  :href="'/'+o.filename" :underline="false" v-if="o.isOpen">
-                <span class="oneline" >
-                  【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
-                </span>
-              </el-link>
-
-              <span v-else @click="downloadFile(o)"  style="color: #606266;" >
-                 <span class="oneline" >
-                     【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
-                 </span>
-              </span>
-
-
-              <span class="fr" style="color: #b4b4b4;">{{o.createAt }}</span>
-              <span style="clear: both;"></span>
-            </div>
+        <div class="main-right">
+          <div style="margin: 16px;position:relative;">
+            <i class="el-icon-location"></i>
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+              <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
+              <el-breadcrumb-item>文件列表</el-breadcrumb-item>
+              <el-breadcrumb-item>{{ selectDepartName }}</el-breadcrumb-item>
+            </el-breadcrumb>
           </div>
-        </el-card>
 
 
+          <IArtical :department="selectDepartName" type="laws"
+            :list="restaurants.laws" @more="handleOpenMore('laws')" @download="downloadFile"></IArtical>
+          <IArtical :department="selectDepartName" type="mechanism"
+            :list="restaurants.mechanism" @more="handleOpenMore('mechanism')" @download="downloadFile"></IArtical>
+          <IArtical :department="selectDepartName" type="result"
+            :list="restaurants.result" @more="handleOpenMore('result')" @download="downloadFile"></IArtical>
+          <IArtical :department="selectDepartName" type="other"
+            :list="restaurants.other" @more="handleOpenMore('other')" @download="downloadFile"></IArtical>
 
-
-        <el-card class="box-card" v-if="isShowMore">
-          <div slot="header" class="clearfix">
-            <span>{{ selectDepartName }} 成果类资料</span>
-          </div>
-          <div v-for="(o,index) in restaurants.result" :key="o.id" class="text item">
-            <div style="display: inline-block;width: 100%;">
-              <el-link target="_blank" :download="o.filename"  :href="'/'+o.filename" :underline="false" v-if="o.isOpen">
-                <span class="oneline" >
-                  【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
-                </span>
-              </el-link>
-
-              <span v-else @click="downloadFile(o)"  style="color: #606266;" >
-                 <span class="oneline" >
-                     【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
-                 </span>
-              </span>
-              <span class="fr" style="color: #b4b4b4;">{{o.createAt }}</span>
-              <span style="clear: both;"></span>
-            </div>
-          </div>
-
-          <el-pagination
-            :current-page="1"
-            :page-size="10"
-            :page-sizes="[10, 30, 50, 100]"
-            :style="{float:'right',padding:'20px'}"
-            :total="315"
-            layout="total, sizes, prev, pager, next, jumper"
-          ></el-pagination>
-        </el-card>
+        </div>
       </div>
 
+      <el-dialog title="申请材料" center :visible.sync="dialogFormVisible"  >
+        <h3> 【{{form.title}}】非公开，需要向对应科室申请</h3>
+        <div class="dialog-footer" slot="footer">
+          <el-button type="warning" size="medium" style="width: 100px; padding: 10px; margin: 20px;" @click="dialogFormVisible=false">取 消</el-button>
+          <el-button type="primary" size="medium" style="width: 100px; padding: 10px; margin: 20px;" @click="dialogFormVisible=false">确认申请</el-button>
+        </div>
+      </el-dialog>
     </div>
-    <el-dialog title="申请材料" center :visible.sync="dialogFormVisible"  >
-      <h3> 【{{form.title}}】非公开，需要向对应科室申请</h3>
-      <div class="dialog-footer" slot="footer">
-        <el-button type="warning" size="medium" style="width: 100px; padding: 10px; margin: 20px;" @click="dialogFormVisible=false">取 消</el-button>
-        <el-button type="primary" size="medium" style="width: 100px; padding: 10px; margin: 20px;" @click="dialogFormVisible=false">确认申请</el-button>
-      </div>
-    </el-dialog>
 
     <IFooter />
 
@@ -188,19 +69,23 @@
 
 <script>
 import IHeader from "./components/IHeader";
+import IArtical from "./components/IArtical";
 import IFooter from "./components/IFooter";
 import glIcon from '@/icons/img/2016smyjj_gl_icon.jpg'
 import data  from '../data/data.js'
 import {getHotArticalList,getArticalList}  from '@/api/article'
+import { mapActions } from "vuex";
 
 export default {
   name: 'application',
   components: {
     IHeader,
+    IArtical,
     IFooter
   },
   data() {
     return {
+      categorys:{'laws':'法律法规', 'mechanism':'机制类','result':'成果类', 'other':'其他类'},
       dialogFormVisible: false,
       glIcon: glIcon,
       list: data.departs,
@@ -226,23 +111,8 @@ export default {
       }
     }
   },
-  watch: {
-    selectDepartId: function(newDepartId, oldDepartId) {
-      this.getHotArticalList()
-    }
-  },
   methods: {
-    querySearch(queryString, cb) {
-      var restaurants = this.restaurants;
-      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
-      // 调用 callback 返回建议列表的数据
-      cb(results);
-    },
-    createFilter(queryString) {
-      return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-      };
-    },
+    ...mapActions("user", ["setArticals"]),
     downloadFile(o){
       this.form = o;
       this.dialogFormVisible = true
@@ -254,18 +124,15 @@ export default {
       }
       getHotArticalList( param ).then( res=>{
         this.restaurants = res.data
-        console.log("getHotArticalList", res)
+        this.initSearch()
+
       })
     },
-    querySearchAsync(queryString, cb) {
-      var restaurants = this.restaurants;
-      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
-      cb(results);
-    },
-    createStateFilter(queryString) {
-      return (state) => {
-        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-      };
+    initSearch(){
+      this.setArticals( this.restaurants.laws||[] )
+      this.setArticals( this.restaurants.mechanism||[] )
+      this.setArticals( this.restaurants.result||[] )
+      this.setArticals( this.restaurants.other||[] )
     },
     handleSelectFile(item) {
       console.log("handleSelectFile", item);
@@ -275,18 +142,25 @@ export default {
       this.selectDepartId = item;
       // 切换文件列表
     },
-    handleSelectDepart(key, keyPath) {
-      console.log("handleSelectDepart", key, keyPath);
-      this.selectDepartId = key;
+    handleSelectDepart( departId ) {
+      this.selectDepartId = departId;
+      for( let i in data.departs){
+        if( data.departs[i].department_id == departId){
+          this.selectDepartName = data.departs[i].department;
+        }
+      }
+      console.log("handleSelectDepart", this.selectDepartId,this.selectDepartName );
+      this.getHotArticalList();
       // 切换文件列表
     },
-    handleOpenMore(index){
-      console.log("handleOpenMore", index);
-      this.isShowMore = true;
+    querySearch( item ){
+      console.log( "search item")
+
     },
-    handleCloseMore(){
-      console.log("handleCloseMore");
-      this.isShowMore = false;
+    handleOpenMore(type){
+      let query = {category:this.categorys[type], departmentId: this.selectDepartId}
+      let path = '/file-search'
+      this.$router.push( {path, query})
     }
   }
 }
@@ -319,29 +193,5 @@ export default {
       }
     }
   }
-  .el-card__body .text{
-    margin: 5px 0;
-  }
-  .el-button--medium{
-    margin: 0;
-    padding: 0;
-    color: #303133
-  }
-  .el-card{
-    color: #1890ff;
-  }
-  .el-card__header{
-    padding: 15px 20px;
-  }
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 200px;
-    min-height: 400px;
-  }
 
-  .oneline {
-    line-height: 30px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 </style>

src/pages/other/file-search.vue

@@ -1,69 +1,89 @@
 <template>
-  <div class="other-container" style="margin-top: 178px;">
-    <IHeader />
-    <div style="background: #FFF;margin-top:20px;">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix" >
-          <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
-          	<el-form-item label="搜索文件">
-              <el-input placeholder="" v-model="searchInfo.keyword" clearable></el-input>
-            </el-form-item>
-
-            <el-form-item>
-              <el-button @click="getArticalList" type="primary">搜索</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-
-        <el-table :data="list"  border stripe>
-          <el-table-column label="序号" min-width="50" prop="id">
-          </el-table-column>
-
-          <el-table-column label="文件标题" min-width="200" prop="title">
-          </el-table-column>
-
-          <el-table-column label="科室" min-width="50" prop="department">
-          </el-table-column>
-
-          <el-table-column label="分类" min-width="50" prop="category">
-          </el-table-column>
-
-
-          <el-table-column
-            align="center"
-            min-width="60"
-            label="操作"
-            class-name="small-padding fixed-width"
-          >
-            <template slot-scope="{row, $index}">
-              <el-button
-                size="small"
-                type="primary"
-                @click="applyDoc(row)"
-              >下载</el-button>
-            </template>
-          </el-table-column>
-
-        </el-table>
-
-
-        <el-pagination
-          :current-page="1"
-          :page-size="10"
-          :page-sizes="[10, 30, 50, 100]"
-          :style="{float:'center',padding:'20px'}"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-        ></el-pagination>
-      </el-card>
+  <div class="main">
+    <div class="main-body">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix" >
+            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
+              <el-form-item label="选择部门">
+                <el-select v-model="searchInfo.department" collapse-tags placeholder="请选择"  clearable>
+                  <div class="el-input" style="width:90%;margin-left:5%;">
+                    <input type="text" placeholder="请输入" class="el-input__inner" v-model="dropDownValue">
+                  </div>
+                  <el-option
+                  v-for="(item,index) in showDepartments"
+                  :value="item.department_id"
+                  @click.native="selectDepartment(item)"
+                  :key="index"
+                  :label="item.department"></el-option>
+                </el-select>
+
+              </el-form-item>
+
+              <el-form-item label="选择分类">
+                <el-select v-model="searchInfo.category" collapse-tags placeholder="请选择"  clearable>
+                  <el-option v-for="(item,index) in categorys"
+                  :value="item.value" :key="index" :label="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="文件标题">
+                <el-input placeholder="" v-model="searchInfo.keyword" clearable></el-input>
+              </el-form-item>
+
+
+              <el-form-item>
+                <el-button @click="getArticalList" type="primary">搜索</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <el-table :data="list"  border stripe>
+            <el-table-column label="序号" min-width="50" prop="articalId">
+            </el-table-column>
+
+            <el-table-column label="文件标题" min-width="200" prop="title">
+            </el-table-column>
+
+            <el-table-column label="科室" min-width="50" prop="department">
+            </el-table-column>
+
+            <el-table-column label="分类" min-width="50" prop="category">
+            </el-table-column>
+
+
+            <el-table-column
+              align="center"
+              min-width="60"
+              label="操作"
+              class-name="small-padding fixed-width"
+            >
+              <template slot-scope="{row, $index}">
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="applyDoc(row)"
+                >详情</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination
+            :current-page="1"
+            :page-size="10"
+            :page-sizes="[10, 30, 50, 100]"
+            :style="{float:'center',padding:'20px'}"
+            :total="total"
+            layout="total, sizes, prev, pager, next, jumper"
+          ></el-pagination>
+        </el-card>
     </div>
-  <IFooter />
   </div>
 </template>
 
 <script>
 import IHeader from "./components/IHeader";
 import IFooter from "./components/IFooter";
+import data  from '../data/data.js'
 import {getArticalList} from '@/api/article.js'
 
 export default {
@@ -75,9 +95,14 @@ export default {
   data() {
     return {
       list: [],
-      id:1,
+      departmentId:0,
       pageSize:10,
       page:1,
+      total:0,
+      dropDownValue:'',
+      departments:data.departs,
+      showDepartments:data.departs,
+      categorys:data.categorys,
       searchInfo:{
         keyword: ''
       }
@@ -87,11 +112,30 @@ export default {
   mounted(){
     this.getArticalList()
   },
+  watch:{
+    dropDownValue(val){
+      this.showDepartments = this.departments.filter( item=>{
+        return item.department.indexOf( val  )>-1
+      })
+    },
+    "searchInfo.category"(val){
+      this.getArticalList()
+    }
+  },
   methods: {
+    selectDepartment(item){
+      this.departmentId = +item.department_id
+      this.getArticalList()
+    },
+    applyDoc(item){
+        let query= {articalId: item.articalId }
+        this.$router.push( {path: '/file-info', query})
+    },
     getArticalList(){
       let param = {
-        departmednt_id:this.id,
+        departmentId:this.departmentId,
         keyword: this.searchInfo.keyword,
+        category: this.searchInfo.category,
         page: this.page,
         pageSize: this.pageSize
       }

src/pages/other/index.vue

@@ -0,0 +1,43 @@
+<template lang="html">
+  <div class="other-container" style="margin-top: 178px;">
+    <IHeader />
+     <div>
+      <router-view></router-view>
+     </div>
+     <IFooter />
+  </div>
+</template>
+<script>
+
+import IHeader from "./components/IHeader";
+import IFooter from "./components/IFooter";
+import { mapActions,mapGetters } from "vuex";
+
+export default {
+  components: {
+    IHeader,
+    IFooter
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+  	...mapGetters("user", ["userInfo", "userDepartments"])
+  },
+  methods: {
+    ...mapActions("user", ["loadDepartment"])
+  },
+  created() {
+    console.log("userInfo", this.userInfo )
+    if( this.userInfo && this.userInfo.userId) return;
+    this.loadDepartment()
+  }
+};
+</script>
+<style lang="css">
+.el-dialog {
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/pages/other/my-file.vue

@@ -1,26 +1,25 @@
 <template>
-  <div class="other-container" style="margin-top: 178px;">
-    <IHeader />
-    <div style="padding-top: 10px;background: #FFF;margin-top:20px;">
-      <div style="width: 200px;display:inline-block;">
+  <div class="main">
+    <div class="main-table">
+      <div class="main-left">
         <el-menu
-          :default-active="selectDepartId"
+          default-active="1-1"
           class="el-menu-vertical-demo"
           style="min-height: 700px;"
-          @select="handleSelectDepart">
+          >
           <template  v-for="(item, index) in options">
-            <el-menu-item :index="item.id.toString()">
+            <el-menu-item :index="'1-'+item.id" @click="selectTag(item)">
               <span>{{ item.value }}</span>
             </el-menu-item>
           </template>
         </el-menu>
       </div>
 
-      <div style="width: 800px;display:inline-block;padding: 0 20px;vertical-align: top;">
+      <div class="main-right">
         <el-card class="">
           <div slot="header" class="clearfix">
             <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
-            	<el-form-item :label="selectDepartName">
+            	<el-form-item :label="selectName">
                 <el-input placeholder="" v-model="searchInfo.keyword" clearable></el-input>
               </el-form-item>
 
@@ -33,13 +32,13 @@
 
 
           <el-table :data="list"  border stripe>
-            <el-table-column label="序号" width="50" prop="id">
+            <el-table-column label="序号" width="50" prop="articalId">
             </el-table-column>
 
             <el-table-column label="标题" min-width="200" prop="title">
             </el-table-column>
 
-            <el-table-column label="发布时间" min-width="60" prop="createAt">
+            <el-table-column label="时间" min-width="60" prop="createAt">
               <template slot-scope="{row, $index}">
                 <span> {{row.createAt|toDatetime}}</span>
               </template>
@@ -59,7 +58,6 @@
 
       </div>
     </div>
-  <IFooter />
   </div>
 </template>
 
@@ -67,24 +65,30 @@
 import IHeader from "./components/IHeader";
 import IFooter from "./components/IFooter";
 import {getArticalList,getApplyArticalList}  from '@/api/article'
+import {getMyArticalList, getArticalLikeList,getViewArticalList, getDownloadArticalList}  from '@/api/article'
 import {toDatetime} from '@/utils/date.js'
 
 const options = [{
-  id: 1,
+  id: "1",
   value: '我发布的文件',
-  label: '我发布的文件'
+  label: '我发布的文件',
+  listApi:getMyArticalList
 }, {
-  id: 2,
+  id: "2",
   value: '我收藏的文件',
-  label: '我收藏的文件'
+  label: '我收藏的文件',
+  listApi:getArticalLikeList
 }, {
-  id: 3,
+  id: "3",
   value: '最近浏览的文件',
-  label: '最近浏览的文件'
+  label: '最近浏览的文件',
+  listApi:getViewArticalList
+
 }, {
-  id: 4,
+  id: "4",
   value: '最近下载的文件',
-  label: '最近下载的文件'
+  label: '最近下载的文件',
+  listApi:getDownloadArticalList
 }];
 
 export default {
@@ -93,6 +97,11 @@ export default {
     IHeader,
     IFooter
   },
+  watch:{
+    'searchInfo.keyword'(val){
+      this.getArticalList()
+    }
+  },
   data() {
     return {
       list: [],
@@ -101,13 +110,14 @@ export default {
       pageSize: 10,
       page:1,
       searchDepartId: "",
+      listApi: getMyArticalList,
       restaurants: [],
       searchInfo:{
         keyword:''
       },
       state3: '',
-      selectDepartId:1,
-      selectDepartName: '我发布的文件',
+      selectId:"1",
+      selectName: '我发布的文件',
       isShowMore: false
     }
   },
@@ -120,29 +130,21 @@ export default {
   mounted() {
     this.getArticalList();
   },
-  watch: {
-    selectDepartId: function(newDepartId, oldDepartId) {
-      let that = this
-      console.log("selectDepartId", newDepartId, oldDepartId)
-      options.filter(function(item){
-        if(item.id == newDepartId){
-          that.selectDepartName = item.value
-        }
-      })
-    }
-  },
   methods: {
-    handleSelectDepart(key, keyPath) {
-      console.log("handleSelectDepart", key, keyPath);
-      this.selectDepartId = key;
+    selectTag( item ) {
+      this.selectId = item.id;
+      this.listApi = item.listApi,
+      this.selectName = item.value
+      console.log( "selectTag", item)
+      this.getArticalList()
       // 切换文件列表
     },
     getArticalList(){
-      let param = {page:this.page,pageSize: this.pageSize}
-      getArticalList( param ).then( res=>{
+      let param = {page:this.page,pageSize: this.pageSize, keyword: this.searchInfo.keyword}
+      this.listApi( param ).then( res=>{
         if( res.code == 200){
-          this.list = res.data.list
-          this.total = res.data.total
+          this.list = res.data.list||[]
+          this.total = res.data.total||0
         }
       })
     }

src/pages/other/reply-list.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="other-container" style="margin-top: 178px;">
-    <IHeader />
-    <div style="background: #FFF;margin-top:20px;">
+  <div class="main">
+    <div class="main-table">
       <el-card class="box-card">
         <div slot="header" class="clearfix" >
           <span>我的申请</span>
@@ -40,7 +39,7 @@
                 type="text"
                 size="small"
                 @click="applyDoc(row)"
-              >等到审核</el-button>
+              >等待审核</el-button>
             </template>
           </el-table-column>
 
@@ -162,11 +161,6 @@ export default {
   .el-card__body .text{
     margin: 5px 0;
   }
-  .el-button--medium{
-    margin: 0;
-    padding: 0;
-    color: #303133
-  }
   .el-card{
     color: #1890ff;
   }

src/permission.js

@@ -18,23 +18,18 @@ router.beforeEach(async(to, from, next) => {
 
   // set page title
   document.title = getPageTitle(to.meta.title)
-
-  // next()
-
-  // determine whether the user has logged in
+  if (to.path === '/login') {
+    next()
+     // if is logged in, redirect to the home page
+    // next({ path: '/login' })
+    // NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
+    return
+  }
   const hasToken = getToken()
-
-  if (hasToken) {
-    if (to.path === '/login') {
-      // if is logged in, redirect to the home page
-      next({ path: '/' })
-      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
-    } else {
-       next()
-    }
+  //
+  if( hasToken ){
+     next()
   } else {
-    /* has no token*/
-
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
       next()

src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
+import main from '@/pages/other/index'
+
 Vue.use(Router)
 
 /* Layout */
@@ -39,85 +41,102 @@ import Layout from '@/layout'
  * all roles can be accessed
  */
 export const constantRoutes = [
-  {
-    path: '/login',
-    component: () => import('@/pages/login/index'),
-    hidden: true
-  },
-  {
-    path: '/auth-redirect',
-    component: () => import('@/pages/login/auth-redirect'),
-    hidden: true
-  },
-  {
-    path: '/200',
-    component: () => import('@/pages/error-page/200'),
-    name: 'page200',
-    hidden: true
-  },
-  {
-    path: '/404',
-    component: () => import('@/pages/error-page/404'),
-    hidden: true
-  },
-  {
-    path: '/401',
-    component: () => import('@/pages/error-page/401'),
-    hidden: true
-  },
-  {
-    path: '/file-manage',
-    component: () => import('@/pages/other/file-manage'),
-    hidden: true
-  },
-  {
-    path: '/apply-list',
-    component: () => import('@/pages/other/apply-list'),
-    hidden: true
-  },
-  {
-    path: '/reply-list',
-    component: () => import('@/pages/other/reply-list'),
-    hidden: true
-  },
-  {
-    path: '/file-search',
-    component: () => import('@/pages/other/file-search'),
-    hidden: true
-  },
-  {
-    path: '/my-file',
-    component: () => import('@/pages/other/my-file'),
-    hidden: true
-  },
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/file-manage',
-  }
-]
+    {
+      path: '/login',
+      component: () => import('@/pages/login/index'),
+      hidden: true
+    },
+    {
+      path: '/auth-redirect',
+      component: () => import('@/pages/login/auth-redirect'),
+      hidden: true
+    },
+    {
+      path: '/200',
+      component: () => import('@/pages/error-page/200'),
+      name: 'page200',
+      hidden: true
+    },
+    {
+      path: '/404',
+      component: () => import('@/pages/error-page/404'),
+      hidden: true
+    },
+    {
+      path: '/401',
+      component: () => import('@/pages/error-page/401'),
+      hidden: true
+    },
+    {
+      path: '/file-manage',
+      component: () => import('@/pages/other/file-manage'),
+      hidden: true
+    },
+    {
+      path: '/',
+      redirect: '/file-manage',
+      hidden: true
+    },
+    {
+      path: '/user',
+      name: 'user',
+      component: main,
+      children: [{
+          path: '/apply-list',
+          component: () => import('@/pages/other/apply-list'),
+          hidden: true
+        },
+        {
+          path: '/reply-list',
+          component: () => import('@/pages/other/reply-list'),
+          hidden: true
+        },
+        {
+          path: '/file-search',
+          component: () => import('@/pages/other/file-search'),
+          hidden: true
+        },
+        {
+          path: '/my-file',
+          component: () => import('@/pages/other/my-file'),
+          hidden: true
+        },
+        {
+          path: '/file-info',
+          component: () => import('@/pages/other/file-info'),
+          hidden: true
+        }
+      ],
+    }
+  ]
 
-/**
- * asyncRoutes
- * the routes that need to be dynamically loaded based on user roles
- */
-export const asyncRoutes = [
-  // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
-]
+    /**
+     * asyncRoutes
+     * the routes that need to be dynamically loaded based on user roles
+     */
+    export const asyncRoutes = [
+      // 404 page must be placed at the end !!!
+      {
+        path: '*',
+        redirect: '/404',
+        hidden: true
+      }
+    ]
 
-const createRouter = () => new Router({
-  // mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
+    const createRouter = () => new Router({
+      // mode: 'history', // require service support
+      scrollBehavior: () => ({
+        y: 0
+      }),
+      routes: constantRoutes
+    })
 
-const router = createRouter()
+    const router = createRouter()
 
-// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter() {
-  const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
-}
+    // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+    export function resetRouter() {
+      const newRouter = createRouter()
+      router.matcher = newRouter.matcher // reset router
+    }
 
-export default router
+    export default router

src/router/modules/charts.js

@@ -1,36 +0,0 @@
-/** When your routing table is too long, you can split it into small modules**/
-
-import Layout from '@/layout'
-
-const chartsRouter = {
-  path: '/charts',
-  component: Layout,
-  redirect: 'noRedirect',
-  name: 'Charts',
-  meta: {
-    title: 'Charts',
-    icon: 'chart'
-  },
-  children: [
-    {
-      path: 'keyboard',
-      component: () => import('@/views/charts/keyboard'),
-      name: 'KeyboardChart',
-      meta: { title: 'Keyboard Chart', noCache: true }
-    },
-    {
-      path: 'line',
-      component: () => import('@/views/charts/line'),
-      name: 'LineChart',
-      meta: { title: 'Line Chart', noCache: true }
-    },
-    {
-      path: 'mix-chart',
-      component: () => import('@/views/charts/mix-chart'),
-      name: 'MixChart',
-      meta: { title: 'Mix Chart', noCache: true }
-    }
-  ]
-}
-
-export default chartsRouter

src/router/modules/components.js

@@ -1,102 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const componentsRouter = {
-  path: '/components',
-  component: Layout,
-  redirect: 'noRedirect',
-  name: 'ComponentDemo',
-  meta: {
-    title: 'Components',
-    icon: 'component'
-  },
-  children: [
-    {
-      path: 'tinymce',
-      component: () => import('@/views/components-demo/tinymce'),
-      name: 'TinymceDemo',
-      meta: { title: 'Tinymce' }
-    },
-    {
-      path: 'markdown',
-      component: () => import('@/views/components-demo/markdown'),
-      name: 'MarkdownDemo',
-      meta: { title: 'Markdown' }
-    },
-    {
-      path: 'json-editor',
-      component: () => import('@/views/components-demo/json-editor'),
-      name: 'JsonEditorDemo',
-      meta: { title: 'JSON Editor' }
-    },
-    {
-      path: 'split-pane',
-      component: () => import('@/views/components-demo/split-pane'),
-      name: 'SplitpaneDemo',
-      meta: { title: 'SplitPane' }
-    },
-    {
-      path: 'avatar-upload',
-      component: () => import('@/views/components-demo/avatar-upload'),
-      name: 'AvatarUploadDemo',
-      meta: { title: 'Upload' }
-    },
-    {
-      path: 'dropzone',
-      component: () => import('@/views/components-demo/dropzone'),
-      name: 'DropzoneDemo',
-      meta: { title: 'Dropzone' }
-    },
-    {
-      path: 'sticky',
-      component: () => import('@/views/components-demo/sticky'),
-      name: 'StickyDemo',
-      meta: { title: 'Sticky' }
-    },
-    {
-      path: 'count-to',
-      component: () => import('@/views/components-demo/count-to'),
-      name: 'CountToDemo',
-      meta: { title: 'Count To' }
-    },
-    {
-      path: 'mixin',
-      component: () => import('@/views/components-demo/mixin'),
-      name: 'ComponentMixinDemo',
-      meta: { title: 'Component Mixin' }
-    },
-    {
-      path: 'back-to-top',
-      component: () => import('@/views/components-demo/back-to-top'),
-      name: 'BackToTopDemo',
-      meta: { title: 'Back To Top' }
-    },
-    {
-      path: 'drag-dialog',
-      component: () => import('@/views/components-demo/drag-dialog'),
-      name: 'DragDialogDemo',
-      meta: { title: 'Drag Dialog' }
-    },
-    {
-      path: 'drag-select',
-      component: () => import('@/views/components-demo/drag-select'),
-      name: 'DragSelectDemo',
-      meta: { title: 'Drag Select' }
-    },
-    {
-      path: 'dnd-list',
-      component: () => import('@/views/components-demo/dnd-list'),
-      name: 'DndListDemo',
-      meta: { title: 'Dnd List' }
-    },
-    {
-      path: 'drag-kanban',
-      component: () => import('@/views/components-demo/drag-kanban'),
-      name: 'DragKanbanDemo',
-      meta: { title: 'Drag Kanban' }
-    }
-  ]
-}
-
-export default componentsRouter

src/router/modules/nested.js

@@ -1,66 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const nestedRouter = {
-  path: '/nested',
-  component: Layout,
-  redirect: '/nested/menu1/menu1-1',
-  name: 'Nested',
-  meta: {
-    title: 'Nested Routes',
-    icon: 'nested'
-  },
-  children: [
-    {
-      path: 'menu1',
-      component: () => import('@/views/nested/menu1/index'), // Parent router-view
-      name: 'Menu1',
-      meta: { title: 'Menu 1' },
-      redirect: '/nested/menu1/menu1-1',
-      children: [
-        {
-          path: 'menu1-1',
-          component: () => import('@/views/nested/menu1/menu1-1'),
-          name: 'Menu1-1',
-          meta: { title: 'Menu 1-1' }
-        },
-        {
-          path: 'menu1-2',
-          component: () => import('@/views/nested/menu1/menu1-2'),
-          name: 'Menu1-2',
-          redirect: '/nested/menu1/menu1-2/menu1-2-1',
-          meta: { title: 'Menu 1-2' },
-          children: [
-            {
-              path: 'menu1-2-1',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-              name: 'Menu1-2-1',
-              meta: { title: 'Menu 1-2-1' }
-            },
-            {
-              path: 'menu1-2-2',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-              name: 'Menu1-2-2',
-              meta: { title: 'Menu 1-2-2' }
-            }
-          ]
-        },
-        {
-          path: 'menu1-3',
-          component: () => import('@/views/nested/menu1/menu1-3'),
-          name: 'Menu1-3',
-          meta: { title: 'Menu 1-3' }
-        }
-      ]
-    },
-    {
-      path: 'menu2',
-      name: 'Menu2',
-      component: () => import('@/views/nested/menu2/index'),
-      meta: { title: 'Menu 2' }
-    }
-  ]
-}
-
-export default nestedRouter

src/router/modules/table.js

@@ -1,41 +0,0 @@
-/** When your routing table is too long, you can split it into small modules **/
-
-import Layout from '@/layout'
-
-const tableRouter = {
-  path: '/table',
-  component: Layout,
-  redirect: '/table/complex-table',
-  name: 'Table',
-  meta: {
-    title: 'Table',
-    icon: 'table'
-  },
-  children: [
-    {
-      path: 'dynamic-table',
-      component: () => import('@/views/table/dynamic-table/index'),
-      name: 'DynamicTable',
-      meta: { title: 'Dynamic Table' }
-    },
-    {
-      path: 'drag-table',
-      component: () => import('@/views/table/drag-table'),
-      name: 'DragTable',
-      meta: { title: 'Drag Table' }
-    },
-    {
-      path: 'inline-edit-table',
-      component: () => import('@/views/table/inline-edit-table'),
-      name: 'InlineEditTable',
-      meta: { title: 'Inline Edit' }
-    },
-    {
-      path: 'complex-table',
-      component: () => import('@/views/table/complex-table'),
-      name: 'ComplexTable',
-      meta: { title: 'Complex Table' }
-    }
-  ]
-}
-export default tableRouter

src/store/index.js

@@ -22,4 +22,5 @@ const store = new Vuex.Store({
   getters
 })
 
+
 export default store

src/store/modules/permission.js

@@ -12,7 +12,6 @@ function hasPermission(roles, route) {
     return true
   }
 }
-
 /**
  * Filter asynchronous routing tables by recursion
  * @param routes asyncRoutes
@@ -20,7 +19,6 @@ function hasPermission(roles, route) {
  */
 export function filterAsyncRoutes(routes, roles) {
   const res = []
-
   routes.forEach(route => {
     const tmp = { ...route }
     if (hasPermission(roles, tmp)) {
@@ -30,7 +28,6 @@ export function filterAsyncRoutes(routes, roles) {
       res.push(tmp)
     }
   })
-
   return res
 }
 

src/store/modules/tpl.js

@@ -1,54 +0,0 @@
-import { getTplList } from '@/api/rental'
-import { authDB } from '@/db'
-
-const state = {
-  comment: {},
-  province: {}
-}
-
-const mutations = {
-  SET_PROVINCE: (state, province) => {
-    authDB.set('province', province)
-    state.province = province
-  },
-  SET_COMMENT: (state, comment) => {
-    authDB.set('comment', comment)
-    state.comment = comment
-  },
-  SET_WEBSITE: (state, website) => {
-    authDB.set('website', website)
-    state.website = website
-  }
-}
-
-const actions = {
-  // get user info
-  getTplList({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      getTplList().then(response => {
-        if (!response) {
-          reject('Verification failed, please Login again.')
-        }
-        console.log("getTplList", response)
-        const { province, comment, website } = response;
-        commit('SET_PROVINCE', province)
-        commit('SET_COMMENT', comment)
-        commit('SET_WEBSITE', website)
-        // commit('SET_ROLES', roles)
-
-        // commit('SET_AVATAR', avatar)
-        // commit('SET_INTRODUCTION', introduction)
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}

src/store/modules/user.js

@@ -1,4 +1,5 @@
 import { login, getUserInfo } from '@/api/auth'
+import {getMyDepartmentList} from '@/api/user.js'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
 import { authDB } from '@/db'
@@ -9,20 +10,20 @@ const state = {
   name: '',
   avatar: '',
   introduction: '',
-  roles: []
+  roles: [],
+  departments:[],
+  articals: {}
 }
 
 const mutations = {
-  SET_INFO: (state, info) => {
-    console.log( "set_info", info)
-    const { uid, token } = info
-    authDB.set('uid', uid)
-    state.userInfo = info
+  SET_INFO: (state, user) => {
+    authDB.set('userId', user.userId)
+    authDB.set('nickname', user.nickname)
+    state.userInfo = user
   },
   SET_TOKEN: (state, token) => {
     setToken(token)
     authDB.set('token', token)
-    console.log( "token", token)
     state.token = token
   },
   SET_INTRODUCTION: (state, introduction) => {
@@ -36,6 +37,22 @@ const mutations = {
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
+  },
+  SET_DEPARTMENT( state, deparments){
+    state.departments = deparments
+  },
+  Logout(state) {
+    state.userInfo = {}
+    state.token = ""
+    removeToken()
+    router.push({ path: '/login', replace: true })
+    window.location.reload()
+  },
+  APPEND_ARTICAL: (state, articals) => {
+    for( let i in articals){
+      let item = articals[i]
+      state.articals[item.articalId] = item;
+    }
   }
 }
 
@@ -44,13 +61,13 @@ const actions = {
   login({ commit }, userInfo) {
     const { username, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
-        const { token, ...user } = response.data;
-        console.log('response', response);
+      login({ username: username.trim(), password }).then(response => {
+        const { token, user } = response.data;
         commit('SET_TOKEN', token)
         commit('SET_INFO', user)
-        resolve()
+        resolve( user )
       }).catch(error => {
+        console.log("catch", error)
         reject(error)
       })
     })
@@ -69,8 +86,6 @@ const actions = {
         commit('SET_INFO', userInfo)
         commit('SET_ROLES', roles)
 
-        // commit('SET_AVATAR', avatar)
-        // commit('SET_INTRODUCTION', introduction)
         resolve(response)
       }).catch(error => {
         reject(error)
@@ -79,17 +94,26 @@ const actions = {
   },
 
   // user logout
-  LoginOut({ commit, state, dispatch }) {
+  Logout({ commit, state, dispatch }) {
     commit('SET_TOKEN', '')
     commit('SET_ROLES', [])
     removeToken()
-    resetRouter()
+    commit("Logout")
+  },
 
-    // reset visited views and cached views
-    // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
-    dispatch('tagsView/delAllViews', null, { root: true })
+  setArticals( {commit}, articals){
+    commit('APPEND_ARTICAL', articals )
   },
 
+  loadDepartment( {commit, state} ){
+    if( !state.token )  return;
+    getMyDepartmentList( {}).then( res=>{
+      if( res.code == 200){
+        commit('SET_DEPARTMENT', res.data)
+      }
+    })
+
+  },
   // remove token
   resetToken({ commit }) {
     return new Promise(resolve => {
@@ -121,9 +145,29 @@ const actions = {
   }
 }
 
+
+const getters=  {
+  getArticals(state) {
+    return state.articals
+  },
+  userInfo(state){
+    if( state.userInfo && state.userInfo.userId ){
+      return state.userInfo;
+    }
+    let userId = authDB.get("userId")
+    let nickname = authDB.get("nickname")
+    let token = authDB.get("token")
+    return {userId, nickname, token}
+  },
+  userDepartments(state){
+    return state.departments
+  }
+}
+
 export default {
   namespaced: true,
   state,
+  getters,
   mutations,
   actions
 }

src/utils/request.js

@@ -1,6 +1,6 @@
 import axios from 'axios'; // 引入axios
 import { Message } from 'element-ui';
-import { store } from '@/store/index'
+import store  from '@/store/index'
 import context from '@/main.js'
 import { authDB } from '@/db'
 
@@ -63,24 +63,24 @@ service.interceptors.response.use(
         if (response.headers["new-token"]) {
             store.commit('user/setToken', response.headers["new-token"])
         }
+
         if (response.data.code == 200 || response.headers.success === "true") {
             return response.data
         } else {
-            Message({
-                duration:2000,
-                showClose: true,
-                message: response.data.msg || decodeURI(response.headers.msg),
-                type: response.headers.msgtype||'error',
-            })
-            
-            if (response.data.data && response.data.data.reload) {
-                store.commit('user/LoginOut')
-            }
-            return response.data.msg ? response.data : response
+          if (response.data.data && response.data.data.reload) {
+              store.commit('user/Logout')
+              return
+          }
+          Message({
+              duration:2000,
+              showClose: true,
+              message: response.data.msg || decodeURI(response.headers.msg),
+              type: response.headers.msgtype||'error',
+          })
+          return response.data.msg ? response.data : response
         }
     },
     error => {
-        // closeLoading()
         Message({
           duration:2000,
             showClose: true,