主题库 - tags

src/assets/styles/index.scss

@@ -135,7 +135,7 @@ aside {
   background-color: #fff;
   border-radius: 4px;
   // min-height: calc(100vh - 152px);
-  min-height: calc(100vh - 116px);
+  min-height: calc(100vh - 202px);
 }
 
 .components-container {

src/layout/components/AppMain.vue

@@ -45,11 +45,11 @@ export default {
 
 .hasTagsView {
   .app-main {
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - 154px);
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    padding-top: 154px;
   }
 }
 </style>

src/layout/components/TagsView/index.vue

@@ -12,15 +12,15 @@
         @click.middle.native="closeSelectedTag(tag)"
         @contextmenu.prevent.native="openMenu(tag, $event)"
       >
-        {{ tag.title }}
-        <span
+        {{ tag.name }}
+        <!-- <span
           v-if="!tag.meta.affix"
           class="el-icon-close"
           @click.prevent.stop="closeSelectedTag(tag)"
-        ></span>
+        ></span> -->
       </router-link>
     </scroll-pane>
-    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+    <!-- <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">刷新</li>
       <li
         v-if="!(selectedTag.meta && selectedTag.meta.affix)"
@@ -28,7 +28,7 @@
       >关闭</li>
       <li @click="closeOthersTags">关闭其他</li>
       <li @click="closeAllTags(selectedTag)">关闭全部</li>
-    </ul>
+    </ul> -->
   </div>
 </template>
 
@@ -49,7 +49,8 @@ export default {
   },
   computed: {
     visitedViews() {
-      return this.$store.state.tagsView.visitedViews
+      console.log(this.$store.state.permission.addRouters)
+      return this.$store.state.permission.addRouters
     },
     routes() {
       return this.$store.state.permission.routers
@@ -199,7 +200,6 @@ export default {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  display: none;
   height: 64px;
   // width: 100%;
   margin: 24px 24px 0 24px;

src/router/routers.js

@@ -53,7 +53,7 @@ export const constantRouterMap = [
       meta: {
         title: '首页',
         icon: 'shouye',
-        affix: true,
+        // affix: true,
         noCache: true
       }
     }]

src/views/components/MyAlbum.vue

@@ -96,6 +96,33 @@
         </div>
       </el-dialog>
     </div>
+
+    <div class="release_layer upload_layer">
+      <el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectContVisible" width="1200px">
+        <div slot="title" class="layer_tab_title">
+          <span>主题库</span>
+        </div>
+        <!-- 主题库 -->
+        <div class="theme_cont">
+          <!-- 主题库list -->
+          <ThemeGalleryList
+            ref="ThemeGalleryList"
+            :mulit-text="mulitText"
+            :mulit-album-in-theme="mulitAlbumInTheme"
+            :show-item-info="false"
+            :is-my-album="false"
+            :is-my-album-in-theme-layer="true"
+          />
+        </div>
+        <div class="upload_list_right">
+          <div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" round @click="addToAlbumBtn">确 定</el-button>
+          <el-button round @click="cancelAddToAlbum">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -103,9 +130,10 @@
 import { FetchMyAlbum, FetchDeleteMyAlbum, FetchSaveThemeFolder, FetchDeleteThemeFolder, FetchMoveMyThemeMaterial } from '@/api/theme/theme.js'
 import { getSeconds, getFileFormat } from '@/utils/index.js'
 import UploadCover from './upload_cover'
+import ThemeGalleryList from '@/views/components/ThemeGalleryList'
 export default {
   name: 'MyAlbum',
-  components: { UploadCover },
+  components: { UploadCover, ThemeGalleryList },
   filters: {
     getSeconds(s) {
       return getSeconds(s)
@@ -149,7 +177,9 @@ export default {
         name: '',
         orga_id: ''
       },
-      selectContVisible: false
+      selectContVisible: false,
+      mulitText: '多选',
+      mulitAlbumInTheme: false
     }
   },
   computed: {
@@ -158,8 +188,9 @@ export default {
     }
   },
   watch: {
-    isMultiSelected(newName, oldName) {
-      if (newName === false) {
+    isMultiSelected(newName) {
+      this.mulitAlbumInTheme = newName
+      if (newName == false) {
         this.selectedListId = []
         this.selectInFolderid = []
       }
@@ -173,6 +204,31 @@ export default {
     addThemeToAlbum() {
       this.selectContVisible = true
     },
+    // 多选btn
+    multiSelectBtn() {
+      this.mulitAlbumInTheme = !this.mulitAlbumInTheme
+      if (this.mulitAlbumInTheme) {
+        this.mulitText = '取消'
+      } else {
+        this.mulitText = '多选'
+      }
+    },
+    // layer - 添加到画册 - 确定
+    addToAlbumBtn() {
+      this.$refs.ThemeGalleryList.isAlbumList = this.isAlbumList
+      this.$refs.ThemeGalleryList.addToAlbum()
+      this.selectContVisible = false
+      this.mulitAlbumInTheme = false
+      this.mulitText = '多选'
+      this.getMyAlbum()
+    },
+    // layer - 添加到画册 - 取消
+    cancelAddToAlbum() {
+      this.$refs.ThemeGalleryList.selectedListId = []
+      this.selectContVisible = false
+      this.mulitAlbumInTheme = false
+      this.mulitText = '多选'
+    },
     breadcrumbToAlbum() {
       this.$router.push('/content/topic')
       this.getMyAlbum()
@@ -200,8 +256,6 @@ export default {
         'end_time': null,
         'folder_id': inOrOutFolderId
       }
-      // this.materialFolders = []
-      // this.themeGalleryList = []
       FetchMyAlbum(params).then(res => {
         if (res.code == 200) {
           this.materialFolders = res.data.materialFolders
@@ -209,6 +263,10 @@ export default {
 
           this.isAlbumList = res.data.pageThemeVO
           this.thisAlbumFoldId = res.data.thisFoldId
+          if (res.data.pageThemeVO.length) {
+            this.selectedListId = []
+            this.selectInFolderid = []
+          }
           if (!this.$route.query.folderTag) {
             localStorage.setItem('rootFolderId', res.data.thisFoldId)
           }
@@ -221,16 +279,32 @@ export default {
     },
     // 删除我的画册里的素材
     deltMyAlbumItem() {
-      const params = {
-        ids: this.selectInFolderid
-      }
-      FetchDeleteMyAlbum(params).then(res => {
-        if (res.code == 200) {
-          this.$message.success(res.msg)
-          this.getMyAlbum()
-        } else {
-          this.$message.error(res.msg)
+      this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          ids: this.selectInFolderid
         }
+        FetchDeleteMyAlbum(params).then(res => {
+          if (res.code == 200) {
+            this.$message.success(res.msg)
+            this.getMyAlbum()
+            console.log(this.isMultiSelected)
+            this.selectedListId = []
+            this.selectInFolderid = []
+            this.folderChecked = -1
+            this.isEditFolder = false
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          message: '已取消删除',
+          type: 'info'
+        })
       })
     },
     // 多选选中
@@ -286,6 +360,7 @@ export default {
       localStorage.setItem('currentFolderId', this.currentFolderId)
       this.getMyAlbum()
       this.selectedListId = []
+      this.selectInFolderid = []
       this.folderChecked = -1
       this.isEditFolder = false
     },
@@ -358,6 +433,8 @@ export default {
               })
               this.mkdirVisible = false
               this.getMyAlbum()
+              this.folderChecked = -1
+              this.isEditFolder = false
             } else {
               this.$message({
                 message: '创建文件夹失败',
@@ -476,6 +553,7 @@ export default {
         display: block;
         width: 140px;
         height: 250px;
+        object-fit: cover;
       }
     }
   }
@@ -505,4 +583,23 @@ export default {
     color: #999999;
   }
 }
+.theme_main{
+  .release_layer {
+    ::v-deep .el-tabs {
+      margin: -26px 0 8px 0;
+      padding: 0;
+    }
+    ::v-deep .el-tabs__nav-wrap::after {
+      display: none;
+    }
+    ::v-deep .el-tabs__active-bar {
+      display: none;
+    }
+    ::v-deep .theme_img{
+      height: auto;
+      padding: 0;
+      overflow: auto;
+    }
+  }
+}
 </style>

src/views/components/ThemeGalleryList.vue

@@ -9,10 +9,7 @@
       <el-tab-pane label="我的画册" name="2" />
     </el-tabs>
 
-    <div v-if="themeItemActive!=2 || !isMyAlbum" class="theme_img">
-      <!-- <div v-show="themeItemActive==2">
-        <MyAlbum ref="myAlbum" :is-multi-selected="isMultiSelected" />
-      </div> -->
+    <div v-if="themeItemActive!=2" class="theme_img">
       <div style="display:flex">
         <!-- 主题库list -->
         <div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', {'set_radio': !item.img_path && item.material_type == 2}, { 'item_multi': selectedListId.includes(item.material_id) }]">
@@ -25,7 +22,7 @@
             <span v-if="item.material_type != 0" class="item_time">{{ item.duration | getSeconds }}</span>
           </div>
           <div v-if="showItemInfo" class="file_name">{{ item.material_name }}</div>
-          <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span>
+          <span v-if="isMultiSelected || mulitAlbumInTheme" class="checked_btn" @click="selectedItem(item)"></span>
         </div>
       </div>
     </div>
@@ -60,8 +57,7 @@ export default {
   },
   props: {
     isMultiSelected: {
-      type: Boolean,
-      required: true
+      type: Boolean
     },
     mulitText: {
       type: String,
@@ -72,8 +68,13 @@ export default {
       required: true
     },
     isMyAlbum: {
-      type: Boolean,
-      required: true
+      type: Boolean
+    },
+    isMyAlbumInThemeLayer: {
+      type: Boolean
+    },
+    mulitAlbumInTheme: {
+      type: Boolean
     }
   },
   data() {
@@ -100,7 +101,9 @@ export default {
       selectedListId: [],
       selectInFolderid: [], // 关联素材得主键得ID
       selectedMaterial: [], // 素材选中
-      selectContVisible: false
+      selectContVisible: false,
+      thisAlbumFoldId: null,
+      isAlbumList: []
     }
   },
   computed: {
@@ -112,11 +115,10 @@ export default {
     isMultiSelected(newName, oldName) {
       if (newName === false) {
         this.selectedListId = []
-        // this.$refs.myAlbum.selectInFolderid = []
       }
     },
     isMyAlbum(newName, oldName) {
-      // console.log(newName)
+      // console.log('isMyAlbum', newName)
     }
   },
   mounted() {
@@ -138,24 +140,22 @@ export default {
       this.activeIndex = tab.index
       if (this.themeItemActive == 2) {
         this.selectedListId = []
-        // this.$refs.myAlbum.selectInFolderid = []
-        this.$emit('pf')
       } else {
+        if (this.$route.path != '/dashboard' && !this.isMyAlbumInThemeLayer) {
+          this.$router.push('/content/topic')
+        }
         this.themeGalleryList = []
         this.getThemeGallery()
       }
     },
     // 横屏 / 竖屏 / 画册切换
     tabItemClick(tab) {
+      this.$emit('tabItemClick', tab.index)
       this.themeItemActive = tab.index
       if (this.themeItemActive == 2) {
         this.selectedListId = []
-        this.$emit('pf')
-        // this.$root.bus.$emit('getMyAlbum')
-        // this.$nextTick(function() {
-        //   this.$refs.myAlbum.getMyAlbum()
-        // })
       } else {
+        this.$router.push('/content/topic')
         this.themeGalleryList = []
         this.getThemeGallery()
       }
@@ -182,23 +182,28 @@ export default {
     },
     // 添加到画册
     addToAlbum() {
-      const thisAlbumFoldId = this.$refs.myAlbum.thisAlbumFoldId
-      const isAlbumList = this.$refs.myAlbum.isAlbumList
-      const isRepeatItem = isAlbumList.filter(item => {
-        return this.selectedListId.indexOf(item.material_id) != -1
-      })
-      if (isRepeatItem.length != 0) {
-        this.$message.error('选中得素材，我的画册里已存在，请勿重复添加！')
-        return
+      if (!this.isMyAlbumInThemeLayer && this.$route.query.folderTag != 1) {
+        this.thisAlbumFoldId = localStorage.getItem('rootFolderId')
+      } else {
+        this.thisAlbumFoldId = localStorage.getItem('currentFolderId')
       }
+      // const isRepeatItem = this.isAlbumList.filter(item => {
+      //   return this.selectedListId.indexOf(item.material_id) != -1
+      // })
+      // if (isRepeatItem.length != 0) {
+      //   this.$message.error('选中得素材，我的画册里已存在，请勿重复添加！')
+      //   return
+      // }
+      console.log(this.mulitAlbumInTheme)
       const params = {
-        id: thisAlbumFoldId, // 文件夹id
+        id: this.thisAlbumFoldId, // 文件夹id
         material_ids: this.selectedListId, // 主题素材id集合
         orga_id: this.orga_id
       }
       FetchAddToMyAlbum(params).then(res => {
         if (res.code == 200) {
           this.$message.success('已成功添加到我的画册里啦~')
+          this.selectedListId = []
         } else {
           this.$message.error(res.msg)
         }
@@ -220,7 +225,6 @@ export default {
         this.selectedListId.push(id)
         this.selectInFolderid.push(inFolderId)
         this.selectedMaterial.push(item)
-        // this.formatType = type
       }
     },
     // 即时发布/定时发布

src/views/content/theme/index.vue

@@ -13,11 +13,11 @@
         ref="ThemeGalleryList"
         :is-multi-selected="isMultiSelected"
         :mulit-text="mulitText"
-        :show-item-info="showItemInfo"
+        :show-item-info="true"
         :tab-item="tabItem"
         :is-my-album="isMyAlbum"
-        @pf="parent"
         @changedMultiSelected="changedMultiSelected"
+        @tabItemClick="getTabTheme"
       />
       <MyAlbum v-show="isMyAlbum" ref="MyAlbum" :is-multi-selected="isMultiSelected" />
       <div class="material_btn">
@@ -211,7 +211,7 @@ export default {
       ],
       mulitText: '多选', // 主题库list - 多选操作
       isMultiSelected: false,
-      showItemInfo: true, // 判断是否显示画册
+      // showItemInfo: true, // 判断是否显示画册
       uploadDialogVisible: false, // 上传主题内容 - 弹框
       uploadHistoryVisible: false, // 上传主题历史 - 弹框
       uploadTitle: '上传', // 上传-弹框内
@@ -252,12 +252,16 @@ export default {
   watch: {
   },
   mounted() {
+    if (this.$route.query.folderTag) {
+      this.$refs.ThemeGalleryList.themeItemActive = '2' || 2
+      this.isMyAlbum = true
+    }
     // 上传历史list
     this.getThemeHistoryList()
   },
   methods: {
-    parent() {
-      this.isMyAlbum = this.$refs.ThemeGalleryList.themeItemActive == 2
+    getTabTheme(index) {
+      this.isMyAlbum = index == 2
       this.$refs.MyAlbum.selectInFolderid = []
       this.$refs.MyAlbum.getMyAlbum()
     },

src/views/dashboard/HomeThemeGallery.vue

@@ -13,7 +13,7 @@
       :is-multi-selected="isMultiSelected"
       :mulit-text="mulitText"
       :show-item-info="false"
-      :is-my-album="isMyAlbum"
+      :is-my-album-in-theme-layer="false"
     />
   </div>
 </template>
@@ -25,7 +25,6 @@ export default {
   components: { ThemeGalleryList },
   data() {
     return {
-      isMyAlbum: false,
       mulitText: '多选',
       isMultiSelected: false
     }