yos_web/src/SManagement/archives/index.vue

<template>
  <div class="normal-card" style="padding-top:0">
      <el-tabs v-model="activeName">
        <el-tab-pane label="营销物料" name="营销物料"></el-tab-pane>
        <el-tab-pane label="我的收藏" name="我的收藏"></el-tab-pane>
      </el-tabs>
    <!--营销物料-->
    <div  v-if="activeName == '营销物料'">
      <!--面包屑-->
      <div class="header-panl">
        <bread-crumbs :tempFileData="tempFileData" @BreadCrumbsChange="BreadCrumbsChange"></bread-crumbs>
        <div style="display:flex">
          <search style="height:32px" @searchActive="searchActive" @clearData="clearData" ref="search"></search>
          <!--切换最热最新-->
          <hot-new-control style="height:32px;line-height:32px" @sortTypeChange="sortTypeChange" v-if="tool.checkAuth($route.name, 'read')"></hot-new-control>
        </div>
      </div>
      <div class="content">
        <!--文件展示-->
        <file-list :fileData="fileData" @upFileData="upFileData" @statusChange="statusChange" :isCollect="true"
          v-if="tool.checkAuth($route.name, 'read')">
        </file-list>
        <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
          @pageChange="pageChange">
        </pagination>
      </div>
    </div>
    <admag v-if="activeName == '我的收藏'"/>
  </div>
</template>

<script>
import FileList from '@/SManagement/archives/components/FileList'
import SelectPanl from '@/SManagement/submitedit_one/components/SelectPanl'
import HotNewControl from '@/components/hot-new-control/HotNewControl'
import search from '@/components/search/index'
import BreadCrumbs from '@/components/bread-crumbs/BreadCrumbs'
import Pagination from '@/components/pagination/Pagination'

import admag from '../archivesmag/index'

export default {
  name: 'index',
  data() {
    return {
      params: {
        "accesstoken": "14fed62faa62714a6a1e2ebe2d3997e3",
        "classname": "saletool.salematerial.salematerial",
        "method": "selectList",
        "content": {
          "nocache": true,
          "pageNumber": 1,
          "pageSize": 25,
          "parentid": 0,
          "where": {
            "condition": "",
          }
        }
      },
      /**
       * data:存放临时文件数据
       * @param filename : 文件夹名
       * @param data     : 文件夹id
       */
      tempFileData: [{
        filename: '文件',
        id: null,
      }],
      fileData: [],
      //当前所在文件夹位置
      currentFileIndex: 0,
      //文件信息面板是否显示
      isFileInfoPanlShow: true,
      total: 0,
      sort: "",
      activeName:'营销物料'
    };
  },
  components: {
    SelectPanl,
    search,
    FileList,
    HotNewControl,
    BreadCrumbs,
    Pagination,
    admag
  },
  computed: {
  },
  watch: {
    activeName(val) {
      val == '营销物料' && this.getFileList()
    }
  },
  created() {
    this.getFileList()
    this.tempFileData[0].id = 1
  },
  methods: {
    //获取文件数据 //salematerialfolderid
    async getFileList() {
      console.log(this.params)
      this.params.content.parentid = JSON.parse(sessionStorage.getItem("folderid")).salematerialfolderid
      let res = await this.$api.requested(this.params)
      this.total = res.total
      this.params.content.sort = res.sort
      this.fileData = this.fileType.fileList(res.data)
    },
    pageChange(n) {
      this.params.content.pageNumber = n
      this.getFileList()
    },
    searchActive(txt) {
      this.params.content.where.condition = txt
      this.getFileList()
    },
    clearData() {
      this.params.content.where.condition = ''
      this.getFileList()
    },
    //监听文件夹单击事件
    upFileData(parentid, name, id) {
      this.params.content.parentid = id
      this.currentFileIndex = id
      this.tempFileData[this.tempFileData.length - 1].id = parentid
      this.getFileList()
      this.tempFileData.push({
        filename: name,
        id: id
      })
    },
    //面包屑发出的事件
    BreadCrumbsChange(index) {
      if (this.tempFileData.length <= 1) return
      this.params.content.parentid = index
      this.tempFileData.splice(this.tempFileData.indexOf(this.tempFileData.find(item => item.id == index)) + 1)
      this.params.content.pageNumber = 1
      this.$refs.search.clearData()
      this.getFileList()
    },
    //修改收藏状态
    statusChange(id, item) {
      this.params.content.parentid = item.parentid
      this.getFileList()
    },
    //监听最热组件变化
    sortTypeChange(name) {
      for (let i = 0; i < this.params.content.sort.length; i++) {
        this.params.content.sort[i].sorted = this.params.content.sort[i].sortname == name ? 1 : 0
      }
      this.getFileList()
      this.currentFileIndex = 0
    },
  }
}
</script>

<style scoped>


.normal-card {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-height: 100%;
  position: relative;
}

.normal-card .el-breadcrumb {
  margin-bottom: 34px;
}

.normal-card .header-panl {
  display: flex;
  justify-content: space-between;
  height: 32px;
}

.normal-card .header-panl .el-dropdown-link {
  display: flex;
}

.normal-card .header-panl .el-dropdown .el-dropdown-link .select {
  margin-left: 8px;
}
.normal-card .content {
  position: relative;
  padding-bottom: 30px;
  min-height: calc(100vh - 270px);
}
.normal-card .content .el-pagination {
  position: absolute;
  bottom: 0;
  right: 16px;
  margin-bottom: 0;
}

</style>