canvasScreen_admin/src/views/components/materialFolder.vue

<template>
  <div v-if="themeItemActive==2" style="display:flex; flex-wrap: wrap">
    <!-- 我的画册-创建文件夹btn -->
    <div v-if="!isToFolder" class="theme_mkdir cont_upload" @click="handleMkdir(0)">
      <svg class="font-icon icon" aria-hidden="true">
        <use xlink:href="#icon-a-xinzeng" />
      </svg>
      <el-button class="mkdir_btn" round type="primary">创建文件夹</el-button>
    </div>
    <div v-else class="theme_mkdir cont_upload">
      <el-button class="cont_upload_btn" round type="primary">添加</el-button>
      <el-button class="return_btn" round type="primary" @click="breadcrumbToAlbum">返回</el-button>
    </div>
    <!-- 我的画册-某一文件夹 -->
    <div v-for="(item,index) in childMaterialFolders" :key="item.id" :class="[,'theme_mkdir', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)">
      <div class="icon_bg">
        <svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true">
          <use xlink:href="#icon-wenjianjia" />
        </svg>
        <img v-else :src="item.imgPath" />
      </div>
      <p class="file_name">{{ item.name }}</p>
      <span v-if="folderChecked == index" class="checked_btn"></span>
    </div>
    <!-- 创建文件夹layer / 编辑 -->
    <div class="publish_layer">
      <el-dialog title="创建文件夹" :close-on-click-modal="false" :show-close="false" :visible.sync="mkdirVisible" width="616px" height="384px">
        <el-form ref="folderForm" :inline="true" :model="folderForm" size="small" label-width="100px">
          <el-form-item
            label="文件夹名称"
            prop="name"
            :rules="[
              { required: true, message: '请输入名称', trigger: 'blur' }
            ]"
          >
            <el-input v-model="folderForm.name" style="width: 336px" />
          </el-form-item>
          <el-form-item label="封面" prop="file">
            <UploadCover ref="childUpload" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="submitFolderForm('folderForm')">保 存</el-button>
          <el-button round @click="mkdirVisible=false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 移动至layer -->
    <div class="wjj_layer">
      <!-- width="736px" -->
      <el-dialog title="移动至" :close-on-click-modal="false" :show-close="false" :visible.sync="movingVisible" width="576px" height="384px">
        <div class="wjj_list">
          <div v-for="(item, index) in folderList" :key="index" :class="['wjj_item', { 'wjj_item_active': folderListChecked == index }]" @click="wjjSelected(item,index)">
            <svg class="font-icon icon" aria-hidden="true">
              <use xlink:href="#icon-wenjianjia" />
            </svg>
            <p class="wjj_name">{{ item.name }}</p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="moveFile">确定</el-button>
          <el-button round @click="movingVisible=false">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { FetchSaveThemeFolder, FetchDeleteThemeFolder, FetchMoveMyThemeMaterial } from '@/api/theme/theme.js'
import UploadCover from './upload_cover'
export default {
  name: 'MaterialFolder',
  components: { UploadCover },
  props: {
    themeItemActive: {
      type: String,
      required: true
    },
    materialFolders: {
      type: Array,
      required: true
    },
    isToFolder: {
      type: Boolean,
      required: true
    },
    thisFoldId: {
      type: String,
      required: true
    },
    selectedListId: {
      type: Array,
      required: true
    },
    selectInFolderid: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      orga_id: '133221333123111', // 机构ID
      movingVisible: false,
      folderForm: { // form
        fid: '',
        id: '',
        img_path: '',
        name: '',
        orga_id: ''
      },
      childMaterialFolders: [], // 文件夹list
      rootFolderId: null,
      isEditFolder: false, // 是否编辑文件夹
      mkdirVisible: false, // 新建编辑layer
      folderChecked: -1, // 文件夹是否单击选中
      isEditMaterial: false, // 是否是编辑素材
      folderList: [], // 文件夹list
      folderListChecked: -1,
      currentFolder: '', // 当前进入的文件夹名
      currentFolderId: null
    }
  },
  computed: {
    defaultImg() {
      return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
    }
  },
  watch: {
    materialFolders(newName, oldName) {
      this.childMaterialFolders = newName
    },
    thisFoldId(newName, oldName) {
      this.thisChildFoldId = newName
    },
    selectedListId(newName, oldName) {
      this.ChildSelectedListId = newName
    },
    selectInFolderid(newName, oldName) {
      this.ChildSelectInFolderid = newName
    }
  },
  mounted() {
    console.log('444444444444')
    console.log(this.childMaterialFolders)
    console.log('555')
    // this.$emit('getMyAlbum')
    document.addEventListener('click', this.hiddenFolderActiveClick)
  },
  methods: {
    breadcrumbToAlbum() {
      this.$router.push('/theme')
      this.$emit('getMyAlbum')
    },
    // 新建 / 编辑 文件夹
    handleMkdir(mkdirType) {
      this.mkdirVisible = true
      this.folderForm.fid = this.thisChildFoldId
      this.folderForm.orga_id = this.orga_id
      if (mkdirType === 0) {
        this.$nextTick(() => {
          this.$refs.childUpload.imageUrl = ''
          this.folderForm.img_path = ''
          this.folderForm.name = ''
        })
        delete this.folderForm.id
      } else {
        this.$nextTick(() => {
          this.$refs.childUpload.imageUrl = this.folderForm.img_path
        })
      }
    },
    // 文件夹双击操作
    floderDbClick(item, index) {
      this.isEditMaterial = false
      this.$router.replace(
        {
          path: '/theme', query: { folderTag: 1 }
        }
      )
      this.currentFolder = item.name
      this.currentFolderId = item.id
      localStorage.setItem('currentFolder', this.currentFolder)
      localStorage.setItem('currentFolderId', this.currentFolderId)
      this.$emit('getMyAlbum')
      this.ChildSelectedListId = []
      this.folderChecked = -1
      this.isEditFolder = false
    },
    // 点击其他区域选中的文件夹 去掉选中样式
    hiddenFolderActiveClick() {
      this.folderChecked = -1
      this.isEditFolder = false
    },
    // 选择 编辑 文件夹
    editFolder(item, index) {
      this.isEditMaterial = false
      this.ChildSelectedListId = []
      // 有选择中的文件夹时，同时存在素材多选操作时
      this.$emit('changedMultiSelected')
      if (index != this.folderChecked) {
        this.folderChecked = index
        this.isEditFolder = true
        this.folderForm = {
          fid: item.fid,
          id: item.id,
          name: item.name,
          img_path: item.imgPath,
          orga_id: item.orgaId
        }
      } else {
        this.folderChecked = -1
        this.isEditFolder = false
      }
    },
    // 删除 文件夹
    deleteMaterialFolder() {
      console.log(this.folderForm.id)
      this.$confirm('此操作将永久删除该文件夹, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        ids.push(this.folderForm.id)
        const params = {
          ids: ids
        }
        FetchDeleteThemeFolder(params).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '删除文件夹成功',
              type: 'success'
            })
            // this.getMyAlbum()
            this.$emit('getMyAlbum')
            this.folderChecked = -1
            this.isEditFolder = false
          }
        })
      }).catch(() => {
        this.$message({
          message: '已取消删除',
          type: 'info'
        })
      })
    },
    // 提交表单 - 新建/编辑
    submitFolderForm(formName) {
      this.folderForm.img_path = this.$refs.childUpload.imageUrl
      console.log(this.folderForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          FetchSaveThemeFolder(this.folderForm).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '创建文件夹成功',
                duration: 2000,
                type: 'success'
              })
              this.mkdirVisible = false
              // this.getMyAlbum()
              this.$emit('getMyAlbum')
            } else {
              this.$message({
                message: '创建文件夹失败',
                duration: 2000,
                type: 'warning'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击-移动btn
    moveingTo(index) {
      this.folderList = []
      if (this.childMaterialFolders.length > 0) {
        this.folderList = this.childMaterialFolders.slice(0, this.materialFolders.length)
      }
      this.rootFolderId = localStorage.getItem('rootFolderId')
      const returnFolder = {
        id: this.rootFolderId,
        name: '返回上一级'
      }
      this.folderList.unshift(returnFolder)
      this.movingVisible = true
    },
    // 文件夹list - 选中操作
    wjjSelected(item, index) {
      this.folderListChecked = index
      this.thisChildFoldId = item.id
    },
    // 点击确定 - 移动素材
    moveFile() {
      if (this.childMaterialFolders.length > 0) {
        if (this.thisChildFoldId == this.rootFolderId) {
          this.$message({
            message: '不能讲文件移动到自身目录下哦~',
            type: 'error'
          })
          return
        }
      } else {
        this.thisChildFoldId = this.rootFolderId
      }
      const params = {
        'folder_id': this.thisChildFoldId,
        'ids': this.ChildSelectInFolderid,
        'material_ids': this.ChildSelectedListId
      }
      FetchMoveMyThemeMaterial(params).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '移动成功',
            type: 'success'
          })
          this.movingVisible = false
          // this.getMyAlbum()
          this.$emit('getMyAlbum')
          this.ChildSelectedListId = []
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tabs {
  margin-bottom: 0;
}
::v-deep .el-tabs__item.is-active {
  color: #3a8aeb;
}

  .theme_mkdir {
    position: relative;
    width: 140px;
    height: 250px;
    margin: 0 24px 24px 0;
    &.cont_upload .font-icon {
      width: 45px;
      height: 45px;
      margin-bottom: 20px;
    }
    &.folder .font-icon {
      width: 84px;
      height: 69px;
    }
    .icon_bg{
      img{
        display: block;
        width: 140px;
        height: 250px;
      }
    }
  }
  .theme_item {
    width: 140px;
    height: 250px;
  }
  .icon_bg {
    height: 220px;
  }
  .theme_item {
    .file_name {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 30px;
      background: rgba(255, 255, 255, 0.6);
      line-height: 30px;
    }
  }

.material_crumbs {
  padding: 15px 24px 0 24px;
  line-height: 30px;
  background: #fff;
  ::v-deep .el-breadcrumb {
    font-size: 12px;
    color: #999999;
  }
}
</style>