主题库2

src/api/theme/theme.js

@@ -80,3 +80,21 @@ export function FetchSaveThemeFolder(parameter) {
     data: parameter
   })
 }
+
+// 删除文件夹 - 主题库 - 我的画册
+export function FetchDeleteThemeFolder(parameter) {
+  return request({
+    url: 'api/material/deleteThemeFolder',
+    method: 'post',
+    data: parameter
+  })
+}
+
+// 移动素材 - 主题库 - 我的画册
+export function FetchMoveMyThemeMaterial(parameter) {
+  return request({
+    url: 'api/material/moveMyThemeMaterial',
+    method: 'post',
+    data: parameter
+  })
+}

src/views/ThemeGallery/index.vue

@@ -15,6 +15,7 @@
         :mulit-text="mulitText"
         :show-item-info="showItemInfo"
         :tab-item="tabItem"
+        @changedMultiSelected="changedMultiSelected"
       />
       <div class="material_btn">
         <el-button round type="primary" @click="uploadHistoryVisible=true">上传历史</el-button>
@@ -543,12 +544,12 @@ export default {
         }
       })
     },
-    // 当复选框发生改变的时候
-    handleCheckedCitiesChange(val) {
-      // const class_ids = []
-      // val.forEach(item => {
-      //   class_ids.push(item)
-      // })
+    // 有选择中的文件夹时，同时存在素材多选操作时，素材多选操作取消
+    changedMultiSelected() {
+      if (this.isMultiSelected) {
+        this.isMultiSelected = false
+        this.mulitText = '多选'
+      }
     }
   }
 }

src/views/components/ThemeGalleryList.vue

@@ -8,16 +8,27 @@
       <el-tab-pane label="横屏" name="2" />
       <el-tab-pane label="我的画册" name="3" />
     </el-tabs>
+    <div v-if="isToFolder && themeItemActive=='3'" class="material_crumbs">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item><a href="/theme">主题库</a></el-breadcrumb-item>
+        <el-breadcrumb-item><a @click="breadcrumbToAlbum">我的画册</a></el-breadcrumb-item>
+        <el-breadcrumb-item>{{ currentFolder }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <div class="theme_img">
       <!-- 我的画册-创建文件夹btn -->
-      <div v-if="themeItemActive=='3'" class="theme_mkdir cont_upload" @click="handleMkdir(0)">
+      <div v-if="themeItemActive=='3' && !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-if="themeItemActive=='3' && isToFolder" 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-if="themeItemActive=='3'">
+      <div v-if="themeItemActive=='3'" style="display:flex">
         <div v-for="(item,index) in materialFolders" :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">
@@ -30,7 +41,7 @@
         </div>
       </div>
       <!-- 主题库list -->
-      <div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', { 'item_multi': selectedListIds.includes(item.material_id) }]">
+      <div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', { 'item_multi': selectedListId.includes(item.material_id) }]">
         <img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
         <div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
         <div v-if="showItemInfo" class="item_format">
@@ -42,7 +53,7 @@
       </div>
     </div>
     <!-- 多选操作 -->
-    <div v-if="selectedListIds.length !== 0" class="multi_handle">
+    <div v-if="selectedListId.length !== 0 || folderChecked != -1" class="multi_handle">
       <div v-if="!isEditFolder && folderChecked == -1 && isMultiSelected">
         <el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button>
         <el-button type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button>
@@ -55,7 +66,6 @@
         <el-button type="button" class="mulit_btn" @click="handleMkdir(1)">编辑</el-button>
         <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button>
       </div>
-
     </div>
     <!-- 创建文件夹layer / 编辑 -->
     <div class="publish_layer">
@@ -86,7 +96,7 @@
       <!-- 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 wjjList" :key="index" :class="['wjj_item', { 'wjj_item_active': movingChecked === index }]" @click="wjjSelected(index)">
+          <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>
@@ -94,7 +104,7 @@
           </div>
         </div>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" round>确定</el-button>
+          <el-button type="primary" round @click="moveFile">确定</el-button>
           <el-button round @click="movingVisible=false">取消</el-button>
         </div>
       </el-dialog>
@@ -102,7 +112,7 @@
   </div>
 </template>
 <script>
-import { FetchThemeClassList, FetchThemeGallery, FetchMyAlbum, FetchAddToMyAlbum, FetchDeleteMyAlbum, FetchSaveThemeFolder } from '@/api/theme/theme.js'
+import { FetchThemeClassList, FetchThemeGallery, FetchMyAlbum, FetchAddToMyAlbum, FetchDeleteMyAlbum, FetchSaveThemeFolder, FetchDeleteThemeFolder, FetchMoveMyThemeMaterial } from '@/api/theme/theme.js'
 import { getSeconds, getFileFormat } from '@/utils/index.js'
 import UploadCover from './upload_cover'
 export default {
@@ -161,23 +171,20 @@ export default {
         orga_id: ''
       },
       materialFolders: [], // 文件夹list
-      selectedListIds: [],
+      selectedListId: [],
       selectinFolderid: [], // 关联素材得主键得ID
       selectedMaterial: [], // 素材选中
+      rootFolderId: null,
       thisAlbumFoldId: null,
       isEditFolder: false, // 是否编辑文件夹
       mkdirVisible: false, // 新建编辑layer
       folderChecked: -1, // 文件夹是否单击选中
-      wjjList: [
-        {
-          id: '1',
-          name: '文件夹1'
-        },
-        {
-          id: '2',
-          name: '文件夹2'
-        }
-      ]
+      isEditMaterial: false, // 是否是编辑素材
+      folderList: [], // 文件夹list
+      folderListChecked: -1,
+      isToFolder: false, // 是否进入文件夹
+      currentFolder: '', // 当前进入的文件夹名
+      currentFolderId: null
     }
   },
   computed: {
@@ -188,13 +195,14 @@ export default {
   watch: {
     isMultiSelected(newName, oldName) {
       if (newName === false) {
-        this.selectedListIds = []
+        this.selectedListId = []
       }
     }
   },
   mounted() {
     this.getThemeClassList()
     this.getMyAlbum()
+    document.addEventListener('click', this.hiddenFolderActiveClick)
   },
   methods: {
     // 根据机构id查询主题库分类列表
@@ -220,12 +228,17 @@ export default {
     // 横屏 / 竖屏 / 画册切换
     tabItemClick() {
       if (this.themeItemActive == 3) {
+        this.$router.push('/theme')
         this.getMyAlbum()
       } else {
         this.themeGalleryList = []
         this.getThemeGallery()
       }
     },
+    breadcrumbToAlbum() {
+      this.$router.push('/theme')
+      this.getMyAlbum()
+    },
     // 获取主题库list
     getThemeGallery() {
       this.themeListForm.orga_id = this.orga_id
@@ -244,21 +257,42 @@ export default {
     },
     // 获取我的画册 list
     getMyAlbum() {
+      let inOrOutFolderId
+      if (this.$route.query.folderTag) {
+        console.log('文件夹内')
+        this.isToFolder = true
+        this.currentFolder = localStorage.getItem('currentFolder')
+        this.currentFolderId = localStorage.getItem('currentFolderId')
+        inOrOutFolderId = this.currentFolderId
+      } else {
+        console.log('文件夹外')
+        this.isToFolder = false
+        localStorage.removeItem('currentFolder')
+        localStorage.removeItem('currentFolderId')
+        inOrOutFolderId = null
+      }
       const params = {
-        theme_name: null,
-        theme_class: null,
-        device_direction: null,
-        orga_id: this.orga_id,
-        start_time: null,
-        end_time: null,
-        folder_id: null
+        'theme_name': null,
+        'theme_class': null,
+        'device_direction': null,
+        'orga_id': this.orga_id,
+        'start_time': null,
+        'end_time': null,
+        'folder_id': inOrOutFolderId
       }
+      this.materialFolders = []
+      this.themeGalleryList = []
       FetchMyAlbum(params).then(res => {
         if (res.code == 200) {
           this.materialFolders = res.data.materialFolders
           this.themeGalleryList = res.data.pageThemeVO
           this.isAlbumList = res.data.pageThemeVO
           this.thisAlbumFoldId = res.data.thisFoldId
+          if (!this.$route.query.folderTag) {
+            localStorage.setItem('rootFolderId', res.data.thisFoldId)
+          }
+          // 创建文件夹获取data
+          this.thisFoldId = res.data.thisFoldId
         } else {
           this.$message.error(res.msg)
         }
@@ -267,7 +301,7 @@ export default {
     // 添加到画册
     addToAlbum() {
       const isRepeatItem = this.isAlbumList.filter(item => {
-        return this.selectedListIds.indexOf(item.material_id) != -1
+        return this.selectedListId.indexOf(item.material_id) != -1
       })
       console.log(isRepeatItem)
       if (isRepeatItem.length != 0) {
@@ -276,7 +310,7 @@ export default {
       }
       const params = {
         id: this.thisAlbumFoldId, // 文件夹id
-        material_ids: this.selectedListIds, // 主题素材id集合
+        material_ids: this.selectedListId, // 主题素材id集合
         orga_id: this.orga_id
       }
       FetchAddToMyAlbum(params).then(res => {
@@ -307,7 +341,7 @@ export default {
       const id = item.material_id
       const inFolderId = item.in_folder_id
       // const type = item.material_type
-      const arr = this.selectedListIds
+      const arr = this.selectedListId
       if (arr.includes(id)) {
         const index = arr.indexOf(id)
         if (index > -1) {
@@ -316,7 +350,7 @@ export default {
           this.selectedMaterial.splice(index, 1)
         }
       } else {
-        this.selectedListIds.push(id)
+        this.selectedListId.push(id)
         this.selectinFolderid.push(inFolderId)
         this.selectedMaterial.push(item)
         // this.formatType = type
@@ -345,14 +379,14 @@ export default {
       this.isEditMaterial = false
       this.$router.replace(
         {
-          path: '/content', query: { folderTag: 1 }
+          path: '/theme', query: { folderTag: 1 }
         }
       )
       this.currentFolder = item.name
       this.currentFolderId = item.id
       localStorage.setItem('currentFolder', this.currentFolder)
       localStorage.setItem('currentFolderId', this.currentFolderId)
-      this.getMaterialList()
+      this.getMyAlbum()
       this.selectedListId = []
       this.folderChecked = -1
       this.isEditFolder = false
@@ -383,45 +417,115 @@ export default {
         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.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.getMaterialList()
-          //   } else {
-          //     this.$message({
-          //       message: '创建文件夹失败',
-          //       duration: 2000,
-          //       type: 'warning'
-          //     })
-          //   }
-          // })
+          FetchSaveThemeFolder(this.folderForm).then(res => {
+            if (res.code === 200) {
+              this.$message({
+                message: '创建文件夹成功',
+                duration: 2000,
+                type: 'success'
+              })
+              this.mkdirVisible = false
+              this.getMyAlbum()
+            } else {
+              this.$message({
+                message: '创建文件夹失败',
+                duration: 2000,
+                type: 'warning'
+              })
+            }
+          })
         } else {
           console.log('error submit!!')
           return false
         }
       })
     },
-    // 移动至
+    // 点击-移动btn
     moveingTo(index) {
+      this.folderList = []
+      if (this.materialFolders.length > 0) {
+        this.folderList = this.materialFolders.slice(0, this.materialFolders.length)
+      }
+      this.rootFolderId = localStorage.getItem('rootFolderId')
+      const returnFolder = {
+        id: this.rootFolderId,
+        name: '返回上一级'
+      }
+      this.folderList.unshift(returnFolder)
       this.movingVisible = true
-      // this.movingChecked = index
     },
-    // 选择文件夹
-    wjjSelected(index) {
-      this.movingChecked = index
-      console.log(this.movingChecked)
+    // 文件夹list - 选中操作
+    wjjSelected(item, index) {
+      this.folderListChecked = index
+      this.thisFoldId = item.id
+    },
+    // 点击确定 - 移动素材
+    moveFile() {
+      if (this.materialFolders.length > 0) {
+        if (this.thisFoldId == this.rootFolderId) {
+          this.$message({
+            message: '不能讲文件移动到自身目录下哦~',
+            type: 'error'
+          })
+          return
+        }
+      } else {
+        this.thisFoldId = this.rootFolderId
+      }
+      const params = {
+        'folder_id': this.thisFoldId,
+        'ids': this.selectinFolderid,
+        'material_ids': this.selectedListId
+      }
+      FetchMoveMyThemeMaterial(params).then(res => {
+        if (res.code === 200) {
+          this.$message({
+            message: '移动成功',
+            type: 'success'
+          })
+          this.movingVisible = false
+          this.getMyAlbum()
+          this.selectedListId = []
+        }
+      })
     },
-
     // 即时发布/定时发布
     publishHandle(index) {
       this.$router.push(
@@ -455,6 +559,13 @@ export default {
       width: 84px;
       height: 69px;
     }
+    .icon_bg{
+      img{
+        display: block;
+        width: 140px;
+        height: 250px;
+      }
+    }
   }
   .theme_item {
     width: 140px;
@@ -475,4 +586,13 @@ export default {
     }
   }
 }
+.material_crumbs {
+  padding: 15px 24px 0 24px;
+  line-height: 30px;
+  background: #fff;
+  ::v-deep .el-breadcrumb {
+    font-size: 12px;
+    color: #999999;
+  }
+}
 </style>