smoa_web/src/pages/other/file-manage.vue

<template>
  <div class="other-container" style="margin-top: 178px;">
    <IHeader :departmentId="department.departmentId"/>
    <div  class="main">

      <div class="main-table">

        <div class="main-left">
          <el-select v-model="searchDepartment" filterable clearable placeholder="关键字搜索部门" @change="handleChangeDepart">
            <el-option
              v-for="item in userDepartments"
              :key="item.departmentId"
              :label="item.department"
              :value="item"
            >
            </el-option>
          </el-select>

          <el-menu
            :default-active="''+department.departmentId"
            class="el-menu-vertical-demo"
            @select="handleSelectDepart">
            <template  v-for="item in userDepartments" >
              <el-menu-item :index="''+item.departmentId" v-bind:key="item.departmentId">
                <el-button v-if="item.departmentId == department.departmentId" type="text">
                  {{ item.department}}
                </el-button>
                
                
                <el-button v-else type="text" style="color:#000">
                  
                  {{ item.department}}
                  
                </el-button>
              </el-menu-item>
            </template>
          </el-menu>
        </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>{{ department.department }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>


          <IPanel :account="account" :departmentId="department.departmentId"></IPanel>




          <!-- <IArtical :department="department" type="laws"
            :list="restaurants.laws" @more="handleOpenMore('laws')" @download="downloadFile"></IArtical>
          <IArtical :department="department" type="mechanism"
            :list="restaurants.mechanism" @more="handleOpenMore('mechanism')" @download="downloadFile"></IArtical>
          <IArtical :department="department" type="result"
            :list="restaurants.result" @more="handleOpenMore('result')" @download="downloadFile"></IArtical>
          <IArtical :department="department" type="other"
            :list="restaurants.other" @more="handleOpenMore('other')" @download="downloadFile"></IArtical> -->

        </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>

    <IFooter />

  </div>
</template>

<script>
import IHeader from "./components/IHeader";
import IPanel from "./components/IPanel";
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 {getDepartmentAccount}  from '@/api/user.js'
import { mapActions, mapGetters } from "vuex";

export default {
  name: 'application',
  components: {
    IHeader,
    IArtical,
    IFooter,
    IPanel
  },
  data() {
    return {
      categorys:data.categorys,
      dialogFormVisible: false,
      leaderId:0,
      glIcon: glIcon,
      searchDepartment: "",
      department:{ departmentId:0, department:''},
      account: {},
      restaurants: {},
      form:{},
      state3: '',
      category:'',
      isShowMore: false,
      screenWidth: document.body.clientWidth
    }
  },
  computed: {
  	...mapGetters("user", ["userDepartments"])
  },
  beforeMount( ){
    let departmentId = localStorage.getItem("@departmentId")||0;
    this.department = data.getDepart( departmentId, this.userDepartments );
    this.leaderId = data.getLeader( departmentId, this.userDepartments)
    this.getDepartmentAccount()
  },
  filters:{
    filterTitle(val){
      if( val.length > 35) {
        return val.substr(0,32)+"..."
      }else{
        return val
      }
    }
  },
  methods: {
    ...mapActions("user", ["setArticals"]),
    downloadFile(o){
      this.form = o;
      this.dialogFormVisible = true
    },
    getDepartmentAccount(){
      let departmentId = +this.department.departmentId;
      getDepartmentAccount( {departmentId}).then( res=>{
        if( res.code == 200){
          let account ={}
          for( let i in res.data){
            let item = res.data[i]
            account[item.category+item.status] = item.count;
          }
          this.account = account;
        }
      })
    },
    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);
    },
    handleChangeDepart(item){
      console.log("handleChangeDepart", item);
      this.department = item;
      // 切换文件列表
    },
    handleSelectDepart( departId ) {
      localStorage.setItem("@departmentId", departId)
      this.department = data.getDepart( departId, this.userDepartments)
      console.log("handleSelectDepart", this.department );
      this.getDepartmentAccount();
      // 切换文件列表
    },
    querySearch( item ){
      console.log( "search item")

    },
    handleOpenMore(type){
      console.log("handleOpenMore", this)
      let query = {category:type, departmentId: this.selectDepartId}
      let path = '/file-search'
      this.$router.push( {path, query})
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-breadcrumb{
    display: inline-block;
    padding-left: 10px;
  }
  .box-card{
    margin-bottom: 20px;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }

</style>