KM-PC-Front-Milestone2/src/views/modules/knowledge/album/index.vue

<template>
  <div style="background: #FAFAFA;height: 100%;">
    <div class="contentAlbunMain">
      <div class="leftbox">
        <div class="leftboxTop">
          <div class="userHead">
            <img :src="imgUrl"/>
            <div>{{user.fullName}}</div>
          </div>
          <div class="userBtns">
            <div class="boxRow">
              <div @click="changeScope(1)">
                <img src="../../../../image/album/my.png"/>
                我的专辑
                <div class="actionBoxRow" v-if="scope==1"></div>
              </div>
              <div @click="changeScope(2)">
                <img src="../../../../image/album/all.png"/>
                全部专辑
                <div class="actionBoxRow" v-if="scope==2"></div>
              </div>
            </div>
            <div class="boxRow">
              <div @click="changeScope(3)">
                <img src="../../../../image/album/comment.png" style="width:1vw"/>
                我的点评
                <div class="actionBoxRow" v-if="scope==3"></div>
              </div>
              <div @click="goCreatData">
                <img src="../../../../image/album/add.png"/>
                新增专辑
              </div>
            </div>
          </div>
        </div>
        <div class="leftboxBottom" @mouseleave.stop="clearAllLevel">
          <div class="level1" v-for="(item, index) in classifyArr" :key="index">
            <div :class="level1Action==index?'level1Title level1Action':'level1Title'" @click.stop="selectLevel(index,item.pkId)" @mouseover="showMore(index)">
              <div>{{item.name}}</div>
              <a-icon v-if="item.children!=null" slot="suffixIcon" type="caret-down" :class="showLevel1Num==index?'classifyRight classifyRightAction':'classifyRight'"/>
            </div>
            <div class="level2Box" v-if="showLevel1Num==index">
              <div @click.stop="selectLevel2(index0,item0.pkId)" :class="level2Action==index0?'level1Action level2':'level2'" v-for="(item0, index0) in item.children" :key="index0">
                {{ item0.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="reightbox">
        <div class="reightboxTop">
          <search typeStr="content" :hideSelect="true" searchWidth="100%" @searchResult="searchResult"></search>
        </div>
        <div class="reightboxBottom">
          <div class="noDataBox" v-if="dataList.length==0">
            <img src="../../../../image/noDataNew.png" class="noData"/>
            <p class="noDataText">暂无搜索结果</p>
          </div>
          <div class="listBox" v-for="(item, index) in dataList" :key="index">
            <albumBox :item="item" @del='del' class="listBoxitem"></albumBox>
          </div>
        </div>
      </div>
    </div>
    <pageBar style="padding-bottom: 1.4125vw;" ref="pageBarref" @pageChange="pageChange" :total="total" :pageSize="pageSize"></pageBar>
    <a-modal
      title=""
      :visible="delVisible"
      :confirm-loading="false"
      class="delModal"
      :footer="null"
      :closable="false"
      dialogClass="delBox"
    >
      <div class="delBoxMain">
        <img src="../../../../image/confirm.png" class="confirmImg"/>
        <p class="confirmTitle">确认要删除这个知识内容吗？</p>
        <p class="confirmContent">您删除后的知识内容将无法恢复，请慎重操作。</p>
        <div>
          <div class="btnConfirmOk" @click="confirmOk">确认</div>
          <div class="btnConfirmCancel" @click="closeDel">取消</div>
        </div>
      </div>
    </a-modal>
</div>
</template>

<script>
import {mapState} from "vuex";
import search from '../components/search'
import albumBox from '../components/albumBox'
import pageBar from '../components/pageBar'
import album from '@/api/knowledge/album'
export default {
  name: 'contentData',
  components: {
    search,
    albumBox,
    pageBar
  },
  computed: {
    ...mapState({
        user: (state) => state.appSetting.user,
    })
  },
  data() {
    return {
      delId:'',
      delVisible:false,
      scope:2,//1-我的专辑  2-全部专辑  3-我的点评
      searchName:'',
      categoryId:'',
      pageSize:6,
      total:18,
      pageNum:1,
      dataList:[],
      imgUrl: require('@img/avatar2.jpg'),
      menuArr:['知识地图','新人地图','岗位地图','制度地图'],
      actionMenu:0,
      level1Action:-1,
      level2Action:-1,
      showLevel1Num:-1,
      classifyArr:[],
    }
  },
  created() {
    if (this.user.photo && this.user.photo != '') {
      this.imgUrl = '/api/api-system/system/core/sysFile/previewFile?fileId='+this.user.photo
    }
    album.categories().then((res) => {
      this.classifyArr = res.data
    })
  },
  mounted(){
    this.getData()
  },
  methods: {
    //搜索
    searchResult(data){
      this.searchName = decodeURI(data.keyword)
      this.getData()
    },
    //删除start
    del(id){
      this.delId = id
      this.delVisible = true
    },
    //删除确认
    confirmOk(){
      let postData = {ids:this.delId}
      album.del(postData).then((res) => {
        if(res.code == 200) {
          this.delVisible = false
          this.$message.success("删除成功!");
          this.getData()
        }
      })
    },
    closeDel(){
      this.delVisible = false
    },
    //删除end
    changeScope(num){
      this.scope = num
      this.pageNum = 1
      this.getData()
    },
    //查询数据
    getData(){
      let postData = {
        "pageNo": this.pageNum,
        "pageSize": this.pageSize,
        "params": {
          scope: this.scope
        }
      }
      if(this.categoryId!=''){
        postData.params.categoryId = this.categoryId
      }
      if(this.searchName!=''){
        postData.params.name = this.searchName
      }
      album.query(postData).then((res) => {
        this.dataList = res.result.data
        this.total = res.result.totalCount
        this.$refs.pageBarref.setPageNum(this.pageNum)
        this.$refs.pageBarref.setTotal(Number(this.total))
      })
    },
    //新增专辑
    goCreatData(){
      this.$router.push({
        name: "albumDetail",
        query: {
          isAdd: 1
        }
      })
    },
    //修改页码
    pageChange(num){
      this.pageNum = num
      this.getData()
    },
    //查看2级分类
    showMore(num){
      if(this.classifyArr[num].children.length!=0){
        this.showLevel1Num = num
      }
    },
    //关闭所有分类
    clearAllLevel(){
      if(this.level2Action==-1){
        this.showLevel1Num = -1
      }
    },
    //选择分类1级
    selectLevel(num,pkId){
      this.level2Action = -1
      if(this.level1Action == num){
        this.level1Action = -1
        this.categoryId = ''
      }else{
        this.level1Action = num
        this.categoryId = pkId
      }
      this.getData()
    },
    //选择分类2级
    selectLevel2(num,pkId){
      this.level1Action = -1
      if(this.level2Action == num){
        this.level2Action = -1
      }else{
        this.level2Action = num
        this.categoryId = pkId
        this.getData()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.contentAlbunMain{
  overflow: scroll;
  padding: 1.5625vw 10.93vw;
  width: 100%;
  display: flex;
  background: #FAFAFA;
  height: calc(100% - 4vw);
}
.leftbox{
  background: linear-gradient(180deg, #ECF3FF 0%, #FFFFFF 12vw);
  border-radius: 0.6vw;
  width: 18.6458vw;
  display: flex;
  flex-direction: column;
}
.reightbox{
  width: 58.22vw;
  flex-grow: 1;
  margin-left: 1.2vw;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.reightbox::-webkit-scrollbar { width: 0!important }
.reightboxTop{
  height: 6.6666vw;
  border-radius: 0.6vw;
  width: 100%;
  background: #fff;
  align-items: center;
  display: flex;
  padding: 1.71875vw;
}
.reightboxBottom{
  margin-top: 1.25vw;
  flex-grow: 1;
  border-radius: 0.6vw;
  background: #fff;
  padding: 1.15vw 0.5vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  .listBox{
    margin-top: 2.6vw;
    width: 33.3%;
  }
  .listBox:nth-child(-n+3){
    margin-top: 0vw;
  }
  .listBoxitem{
    cursor: pointer;
    margin:0 auto
  }
}

.leftboxTop{
  height: 17.1354vw;
  width: 100%;
  border-bottom: 1px solid #EEEEEE;
  display: flex;
  flex-direction: column;
}
.leftboxBottom{
  flex-grow: 1;
  padding-top: 1.354vw;
  overflow-y: scroll;
}
.leftboxBottom::-webkit-scrollbar { width: 0!important }
.level1Title{
  cursor: pointer;
  padding-left: 2vw;
  padding-right: 1.5625vw;
  display: flex;
  align-items: center;
  font-size: 1vw;
  color: #202124;
  height: 3vw;
  font-weight: 550;
}
.level1Title div{
  text-overflow:ellipsis;
  overflow: hidden;
  white-space:nowrap;
}
.level2{
  cursor: pointer;
  padding-left: 2vw;
  padding-right: 1.5625vw;
  height: 3vw;
  line-height: 3vw;
  color: #5E5E5E;
  font-size: 0.9375vw;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space:nowrap;
}
.userHead{
  margin-right: 1.09375vw;
  text-align: center;
  width: 100%;
  padding-top: 1.8vw;
  margin-bottom: 1.5625vw;
}
.userHead img{
  width: 5.5vw;
  height: 5.5vw;
  border-radius: 6vw;
}
.userHead div{
  color: #202124;
  font-size: 1.14vw;
  font-weight: 550;
  margin-top: 0.78125vw;
}
.userBtns{
  flex-grow: 1;
  padding-left: 2vw;
  padding-right: 1.5625vw;
  display: flex;
  flex-direction: column;
}
.userBtns div{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.userBtns div:last-child{
  margin-left: auto;
}
.userBtns img{
  width: 0.78125vw;
  margin-right: 0.9375vw;
}
.boxRow{
  width: 100%;
  display: flex;
  align-items: baseline!important;
  height: 2.7vw;
}
.boxRow div{
  font-size: 0.9375vw;
  color: #202124;
  cursor: pointer;
}
.classifyRight{
  color: #CBCCCC;
  transform: rotate(-90deg);
  width: 0.3125vw;
  margin-left: auto;
  transform-origin: 150% 60%;
}
.level1Action{
  background:#ECF3FF
}
.classifyRightAction{
  transform: rotate(0deg);
}
.actionBoxRow{
  background: #406cc4;
  height: 3px;
  width: 70%;
  margin-top: 4px;
}
</style>