advertSystem/src/components/businessMoudle/materialLibr.../album.vue

<template>
  <div class="screenBox_mini tMar0">
    <el-input v-model="pageInfo.keyword" placeholder="请输入" style="width: 300px" @change="typeChange">
      <template #prepend>
        <el-select v-model="pageInfo.type" style="width: 80px" @change="pageInfo.keyword ? typeChange() : ''">
          <el-option label="全部" value="1" />
          <el-option label="专辑" value="2" />
          <el-option label="文件夹" value="3" />
        </el-select>
      </template>
    </el-input>
    <span class="pointer c-theme lMar10" @click="clearEvent">清空</span>
  </div>
  <div class="albumBox flex">
    <div class="albumTree">
      <div class="title flex">
        <span class="pointer f-wei-600" @click="initAllAlbum(true),allAlbumClick()">全部专辑</span>
        <div class="lMarauto narrowBtnBox" @click="addAlbumEvent">新建专辑</div>
      </div>
      <div class="treeBox" v-loading="allAlbumLoading">
        <el-tree ref="treeRef"  :data="pageInfo.allAlbumList" :props="defaultProps"
                 :current-node-key="pageInfo.albumId" node-key="id"
                 :expand-on-click-node="false"  :highlight-current="pageInfo.hightLightFlag"
                 @node-click="handleNodeClick">
          <template #default="{ node }">
            <span class="prefix" :class="{ 'is-leaf': node.isLeaf }"><el-icon color="#333" class="rMar5"><i-ep-Folder/></el-icon></span>
            <span>{{ node.label }}</span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="albumContent">
      <div class="title flex">
        <el-button type="primary" @click="uploadMaterialEvent">上传素材</el-button>
        <el-button type="primary" plain @click="addFileEvent" v-if="pageInfo.breadList&&pageInfo.breadList.length > 0">新建文件夹</el-button>
        <el-button type="primary" plain @click="batchFileShow=true" v-if="pageInfo.breadList&&pageInfo.breadList.length > 0">批量操作文件夹</el-button>
<!--        <el-button type="primary" plain @click="batchMaterialEvent">批量管理素材</el-button>-->
        <div class="lMarauto flex">
          <span class="pointer c-theme rMar10" @click="initFile_Album(1)">刷新</span>
          <Select ref="sortRef"
                  :clearFlag="false"
                  :haverMar="false"
                  title=""
                  selectWidth="160px"
                  placeholderTxt="排序"
                  @changeEvent="sortEvent" @clearEvent="sortEvent"
                  :options="pageInfo.sortList"/>
        </div>
      </div>
      <div class="breadBox">
        <div v-if="!batchFileShow" class="breadBtn">
          <span  @click="allAlbumClick();pageInfo.hightLightFlag = false" :class="pageInfo.breadList&&pageInfo.breadList.length > 0 ? 'active' : ''">全部专辑</span>
          <span v-for="(b,idx) in pageInfo.breadList" :key="b.id"
                :class="idx < (pageInfo.breadList&&pageInfo.breadList.length-1) ? 'active' : ''"
                @click="breadClick(b,idx)">
             <span class="c-999" style="margin: 0 4px;"> / </span> {{b.name || '-'}}
          </span>
        </div>
        <div class="flex" v-else>
          <el-checkbox v-model="allBatchFileVal" @change="allBatchFileEvent">全选</el-checkbox>
          <span class="c-theme lMar10">已选{{pageInfo.chooseFileList&&pageInfo.chooseFileList.length || 0}}个文件夹</span>
          <div class="lMarauto">
            <el-button @click="moveFileEvent" :disabled="pageInfo.chooseFileList&&pageInfo.chooseFileList.length == 0">移动文件夹</el-button>
            <el-button type="primary" @click="closeBatchFileEvent">关闭</el-button>
          </div>
        </div>
      </div>
      <div class="contentBox">
        <div class="flexWrap" v-loading="fileLoading">
          <template v-for="item in pageInfo.fileList">
            <fileBlock v-if="item.type==0" :key="item.id" :paramsObj="item"
                       :folderObj="pageInfo.breadList[pageInfo.breadList.length-1]"
                       :checkShow="batchFileShow"
                       @checkChange="checkChangeItem"
                       @fileJunior="fileJuniorEvent(item)"
                       @init="init_all"></fileBlock>
            <materialBlock v-if="item.type==1" :key="item.id"
                           @init="initFile_Album(1)"
                           idName="filesId"
                           :paramsObj="item"></materialBlock>
          </template>
          <noData v-if="pageInfo.fileList && pageInfo.fileList.length==0"></noData>
<!--          <albumBlock :key="item.id" :paramsObj="item"></albumBlock>-->
        </div>

        <div class="paginationBox" v-if="total>0">
          <el-pagination
              :small="true"
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[20, 50, 80, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>

  <!-- 新建文件夹-->
  <newFile ref="newFileRef" @init="init_all" :folderObj="pageInfo.breadList[pageInfo.breadList.length-1]"></newFile>
  <!-- 新建专辑-->
  <newAlbum ref="newAlbumRef" @init="init_all"></newAlbum>
  <!-- 上传素材-->
  <uploadMaterial ref="uploadMaterialRef" :folderObj="pageInfo.breadList&&pageInfo.breadList.length == 1 ? {} : pageInfo.breadList[pageInfo.breadList.length-1]"
                  @init="initFile_Album(1)"></uploadMaterial>
  <!--  移动文件夹-->
  <moveFile ref="moveFileRef" :fids="pageInfo.chooseFileList" @init="init_all"></moveFile>
</template>
<script setup lang="ts">
import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
import Select from '@/components/capsulationMoudle/_select.vue'
import Input from '@/components/capsulationMoudle/_input.vue'
import Dropdown from '@/components/capsulationMoudle/_dropdown.vue'
import noData from '@/components/capsulationMoudle/noData.vue'
import {fileParam, reactiveTableAndAny} from "@/api/ApiModel";
import albumBlock from './block/albumBlock.vue'
import fileBlock from './block/fileBlock.vue'
import materialBlock from './block/materialBlock.vue'
import newAlbum from './dialog/newAlbum.vue'
import newFile from './dialog/newFile.vue'
import uploadMaterial from './dialog/uploadMaterial.vue'
import { Search } from '@element-plus/icons-vue'
import {Api} from "@/api/api";
import {ElMessage} from "element-plus";

const { proxy } = getCurrentInstance() as any;
// 全局方法定义
const NumberHandle = proxy.$NumberHandle
const defaultProps = {
  children: 'child',
  label: 'name',
}

const treeRef = ref<any>()
const pageInfo = reactive<reactiveTableAndAny>({
  sortList:[
    {label:'按名称降序',value:'1'},
    {label:'按名称升序',value:'2'},
    {label:'按更新时间降序',value:'3'},
    {label:'按更新时间升序',value:'4'},
    {label:'按创建时间降序',value:'5'},
    {label:'按创建时间升序',value:'6'},
  ],
  albumList:[],
  fileList:[],
  materialList:[],
  chooseFileList:[],
  allAlbumList:[],
  breadList:[],
  sortObj:{
    sort_field:'created_at',
    order:'asc'
  },
  albumId:0,
  keyword:'',
  type:'1',
  hightLightFlag:true
})

//批量操作文件夹
const batchFileShow = ref<boolean>(false)
const allBatchFileVal = ref<boolean>(false)
const closeBatchFileEvent = () => {
  batchFileShow.value = false
  allBatchFileVal.value = false
  pageInfo.chooseFileList=[]
  pageInfo.fileList.forEach(item=>{
    item.checked = false
  })
}

//移动文件夹
const moveFileRef = ref<{switchShow:(val:boolean)=>void}>()
const moveFileEvent = () => {
  moveFileRef.value!.switchShow(true)
}
//选择文件夹
const checkChangeItem = (val: any,id:string|number|undefined) => {
  if(val){
    pageInfo.chooseFileList.push(id)
  }else{
    let idx:number = pageInfo.chooseFileList.findIndex(n=>n==id)
    pageInfo.chooseFileList.splice(idx,1)
  }
}
//全选文件夹
const allBatchFileEvent = (val: any) => {
  if(val){
    pageInfo.chooseFileList = []
    pageInfo.fileList.forEach(item=>{
      item.checked = true
      if(item.type==0){
        pageInfo.chooseFileList.push(item.folderId)
      }
    })
  }else{
    pageInfo.chooseFileList = []
    pageInfo.fileList.forEach(item=>{
      item.checked = false
    })
  }
}


//文件夹
const newFileRef = ref<{switchShow:(val:Boolean)=>void}>()
const addFileEvent = () => {
  newFileRef.value!.switchShow(true)
}
const typeChange = () => {
  pageInfo.breadList = []
  if(pageInfo.keyword){
    pIdCommon.value = ''
  }else{
    pIdCommon.value = 0
  }
  pageInfo.hightLightFlag = false
  initFile_Album(1)
}
const clearEvent = () => {
  if(pageInfo.keyword){
    pageInfo.keyword = ''
    typeChange()
  }
}
const pIdCommon = ref<number|string>(0)
const total = ref<number>()
const currentPage = ref<number>(1)
const pageSize = ref<number>(20)
const handleCurrentChange = (val:number) => {
  initFile_Album(val)
}
const fileLoading = ref<boolean>(false)
const initFile_Album = async (page?:number) => {
  fileLoading.value = true
  currentPage.value = page ? page : 1
  closeBatchFileEvent()
  const paramsModel = reactive<fileParam>({
    type:Number(pageInfo.type),
    keyword:pageInfo.keyword,
    pid:pIdCommon.value,
    page:page?page:currentPage.value,
    page_size:pageSize.value,
  })
  let res:any = await proxy.$http.get(Api.file_list,Object.assign(paramsModel,pageInfo.sortObj))
  fileLoading.value = false
  if(res&&res.errNo=='0'){
    let resNew:any = res.rst
    pageInfo.fileList = resNew.data
    total.value = resNew.pageInfo.total
  }else{
    ElMessage.error(res.errMsg)
  }
}
const sortRef = ref<{value:string}>()
const sortEvent = (val:string | number | object) => {
  if(val=='1'){
    pageInfo.sortObj.sort_field = 'name'
    pageInfo.sortObj.order = 'desc'
  }else if(val=='2'){
    pageInfo.sortObj.sort_field = 'name'
    pageInfo.sortObj.order = 'asc'
  }else if(val=='3'){
    pageInfo.sortObj.sort_field = 'updated_at'
    pageInfo.sortObj.order = 'desc'
  }else if(val=='4'){
    pageInfo.sortObj.sort_field = 'updated_at'
    pageInfo.sortObj.order = 'asc'
  }else if(val=='5'){
    pageInfo.sortObj.sort_field = 'created_at'
    pageInfo.sortObj.order = 'desc'
  }else if(val=='6'){
    pageInfo.sortObj.sort_field = 'created_at'
    pageInfo.sortObj.order = 'asc'
  }else{
    pageInfo.sortObj.sort_field = 'created_at'
    pageInfo.sortObj.order = 'asc'
  }
  initFile_Album(1)
}

//素材
const uploadMaterialRef = ref<{switchShow:(val:Boolean)=>void}>()
const uploadMaterialEvent = () => {
  uploadMaterialRef.value!.switchShow(true)
}

//专辑
const newAlbumRef = ref<{switchShow:(val:Boolean)=>void}>()
const allAlbumLoading= ref<boolean>(false)
const addAlbumEvent = () => {
  newAlbumRef.value!.switchShow(true)
}
//全部专辑
const initAllAlbum = async (flag:boolean) => {
  allAlbumLoading.value = true
  let res:any = await proxy.$http.get(Api.file_list_select)
  allAlbumLoading.value = false
  if(flag){
    pIdCommon.value = 0
  }
  if(res&&res.errNo=='0'){
    let resNew:any = res.rst
    pageInfo.allAlbumList = resNew
    if(pageInfo.breadList&&pageInfo.breadList.length>0){
      pageInfo.albumId = pageInfo.breadList[pageInfo.breadList.length-1].id
      nextTick(()=>{treeRef.value!.setCurrentKey(pageInfo.albumId)})
    }
  }else{
    ElMessage.error(res.errMsg)
  }
}
const batchMaterialEvent = () => {}

// 专辑树点击
interface Tree {
  label: string
  children?: Tree[]
}
const findParent = (obj:any) => {
  if(obj.parent){
    pageInfo.breadList.unshift({
      name:obj.data.name,
      id:obj.data.id
    })
    findParent(obj.parent)
  }
}
const handleNodeClick = (v1:any,data:any) => {
  pageInfo.keyword = ''
  pageInfo.hightLightFlag = true
  pageInfo.breadList = []
  findParent(data)
  pIdCommon.value = v1.id
  initFile_Album(1)
}
//面包屑点击
const breadClick = (item:any,idx:number) => {
  pageInfo.breadList = pageInfo.breadList.slice(0, idx + 1)
  pIdCommon.value = item.id
  pageInfo.keyword = ''
  pageInfo.hightLightFlag = true
  pageInfo.albumId = pageInfo.breadList[pageInfo.breadList.length-1].id
  nextTick(()=>{treeRef.value!.setCurrentKey(pageInfo.albumId)})
  initFile_Album(1)
}
const allAlbumClick = () => {
  pageInfo.breadList = []
  pIdCommon.value = 0
  pageInfo.keyword = ''
  initFile_Album(1)
}

//文件夹块点击
const fileJuniorEvent = (item:any) => {
  pageInfo.breadList.push({
    name: item.name,
    id: item.folderId
  })
  pageInfo.hightLightFlag = true
  pIdCommon.value = item.folderId
  pageInfo.albumId = item.folderId
  nextTick(()=>{treeRef.value!.setCurrentKey(pageInfo.albumId)})
  initFile_Album(1)
}

//更新全部
const init_all = () => {
  initAllAlbum(false)
  initFile_Album(1)
}

onMounted(()=>{
  nextTick(()=>{
    initAllAlbum(true)
    initFile_Album(1)
    sortRef.value!.value = '6'
  })
})
</script>
<style lang="scss" scoped>
.albumBox{
  align-items: flex-start;
  .albumTree{
    background-color: #fff;
    width: 20%;
    padding: 0 10px;
    margin-right: 10px;
    flex-shrink: 0;
    .title{
      height: 46px;
      padding: 0 10px;
    }
    .treeBox{
      height: calc(100vh - 245px);
      overflow-y: auto;
    }
  }
  .albumContent{
    background-color: #fff;
    flex: 1;
    padding: 10px 13px;
    .breadBox{
      height: 60px;
      line-height: 60px;
      border-top: 1px solid #F7F7F7;
      border-bottom: 1px solid #F7F7F7;
      margin: 15px 0 20px;
      font-size: 14px;
      .breadBtn{
        color: #161E46;
        .active{
          color: #3173FF;
          cursor: pointer;
        }
      }
    }
    .contentBox{
      width: 100%;
      height: calc(100vh - 285px - 60px);
      overflow-y: auto;
      .paginationBox{
        padding: 10px 0;
        border-top: 1px solid #ddd;
        margin-top: 10px;
      }
    }
  }
}
</style>