From 26a8369e79339f2246f8d3775c491700015b74c5 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 31 Mar 2022 17:33:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/theme/theme.js                        |  18 +
 src/views/ThemeGallery/index.vue              | 471 +++++++++++++++---
 src/views/components/ThemeGalleryList.vue     | 277 +++-------
 src/views/components/upload.vue               |  35 +-
 .../materialContent/materialList/index.vue    |   3 +-
 .../publishContent/publishList/index.vue      |   6 +-
 6 files changed, 534 insertions(+), 276 deletions(-)

diff --git a/src/api/theme/theme.js b/src/api/theme/theme.js
index 95b7c52..2ac1f89 100644
--- a/src/api/theme/theme.js
+++ b/src/api/theme/theme.js
@@ -27,3 +27,21 @@ export function FetchAddOrEdit(parameter) {
     data: parameter
   })
 }
+
+// 主题库素材历史列表
+export function FetchThemeHistoryList(parameter) {
+  return request({
+    url: 'api/material/getThemeHistoryList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+// 改变素材库状态
+export function FetchUpdateThemeState(parameter) {
+  return request({
+    url: 'api/material/updateState',
+    method: 'post',
+    data: parameter
+  })
+}
diff --git a/src/views/ThemeGallery/index.vue b/src/views/ThemeGallery/index.vue
index a76c6c1..8e13b5d 100644
--- a/src/views/ThemeGallery/index.vue
+++ b/src/views/ThemeGallery/index.vue
@@ -1,31 +1,26 @@
 <template>
 
   <div class="app-container theme_main">
-    <el-tabs v-model="activeIndex" @tab-click="tabThemeClassifyClick">
-      <el-tab-pane v-for="(item,index) in tabItem" :key="index" :label="item.class_name" :name="item.name" />
-    </el-tabs>
     <!-- 右上角btn -->
     <div class="home_publish_btn">
       <el-button round class="el_button_green" @click="addEditClassify(0)">新增</el-button>
       <el-button round type="primary" @click="addEditClassify(1)">编辑</el-button>
-      <el-button round class="el_button_red" @click="upload()">上传</el-button>
+      <el-button round class="el_button_red" @click="uploadTheme()">上传</el-button>
     </div>
-    <div>
-      <el-tabs v-if="showItemInfo" v-model="themeItemActive" class="theme_item_tab" @tab-click="tabItemClick">
-        <el-tab-pane label="竖屏" name="1" />
-        <el-tab-pane label="横屏" name="2" />
-        <el-tab-pane label="我的画册" name="3" />
-      </el-tabs>
+    <div style="position:relative">
+      <!-- 主题库list -->
+      <ThemeGalleryList
+        ref="ThemeGalleryList"
+        :is-multi-selected="isMultiSelected"
+        :mulit-text="mulitText"
+        :show-item-info="showItemInfo"
+        :tab-item="tabItem"
+      />
       <div class="material_btn">
-        <!--  @click="uploadListVisible=true" -->
-        <el-button round type="primary" @click="uploadListVisible=true">上传历史</el-button>
+        <el-button round type="primary" @click="uploadHistoryVisible=true">上传历史</el-button>
         <el-button round @click="multiSelectBtn">{{ mulitText }}</el-button>
       </div>
     </div>
-    <div style="position:relative">
-      <!-- 主题库list -->
-      <ThemeGalleryList ref="ThemeGalleryList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :show-item-info="showItemInfo" />
-    </div>
 
     <!-- 平台技术人员-新增/编辑分类 -->
     <div class="upload_layer">
@@ -68,41 +63,134 @@
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" round @click="submitForm('classifyForm')">保存</el-button>
-          <el-button round @click="resetForm('classifyForm')">关闭</el-button>
+          <el-button type="primary" round @click="submitForm('classifyForm')">保 存</el-button>
+          <el-button round @click="resetForm('classifyForm')">关 闭</el-button>
         </div>
       </el-dialog>
     </div>
 
+    <!-- 平台技术人员-上传 -->
+    <el-dialog append-to-body :show-close="false" :visible.sync="uploadDialogVisible" :close-on-click-modal="false" :title="uploadTitle" class="upload_layer">
+      <el-form ref="uploadForm" :model="uploadForm" size="small" label-width="80px">
+        <el-form-item label="类别名称" prop="selectClassifyList">
+          <el-checkbox-group v-model="selectClassifyList">
+            <el-checkbox v-for="item in tabItem" :key="item.id" :label="item.id" :value="item.id">{{ item.class_name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="设备方向" prop="device_direction">
+          <el-radio-group v-model="uploadForm.device_direction">
+            <el-radio :label="1" value="1">横屏</el-radio>
+            <el-radio :label="2" value="2">竖屏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="isUploadThemeType == 1" label="文件名称">
+          <el-input v-model="uploadForm.material_name" style="width:336px" />
+        </el-form-item>
+        <el-form-item class="upload_source" label="上传内容" prop="deposit_url">
+          <div v-if="formatType != -1" class="source_cont">
+            <img v-if="formatType==0" :src="uploadForm.deposit_url" alt="" width="150" />
+            <video v-if="formatType==1" :src="uploadForm.deposit_url" controls width="200"></video>
+            <audio v-if="formatType==2" :src="uploadForm.deposit_url" controls></audio>
+            <p>文件名：{{ fileNames }}</p>
+          </div>
+          <Upload ref="uploadMaterial" :is-theme="isTheme" @saveMaterial="saveMaterial" />
+        </el-form-item>
+        <el-form-item v-if="formatType != 0" label="上传封面" prop="img_path">
+          <UploadCover ref="childUpload" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" round @click="uploadSubmit('uploadForm')">确 定</el-button>
+        <el-button round @click="resetForm('uploadForm')">关 闭</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 上传历史layer -->
+    <div class="upload_layer">
+      <el-dialog title="上传历史" :close-on-click-modal="false" :visible.sync="uploadHistoryVisible" width="1100px">
+        <!-- 上传历史 - 搜索 -->
+        <el-form ref="form" :model="queryForm" label-width="80px" class="query_history">
+          <el-form-item label="文件名称">
+            <el-input v-model="queryForm.name" style="width:200px" @keyup.enter.native="getThemeHistoryList(pager = 1)" @blur="getThemeHistoryList(pager = 1)" />
+          </el-form-item>
+          <el-form-item label="时间">
+            <el-date-picker v-model="queryForm.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getThemeHistoryList(pager = 1)" @blur="getThemeHistoryList(pager = 1)" />
+          </el-form-item>
+        </el-form>
+        <!-- 上传历史 - table-list -->
+        <el-table :data="uploadHistoryListData" :header-cell-style="{ color: '#333' }">
+          <el-table-column align="center" prop="material_name" label="文件名称" />
+          <el-table-column align="center" prop="cover" label="发布内容">
+            <template slot-scope="scope">
+              <div v-if="scope.row.img_path">
+                <img width="48px" height="64px" size="medium" :src="scope.row.img_path" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="classes" label="类别名称" width="180">
+            <template slot-scope="scope">
+              <div class="tag_list">
+                <el-tag v-for="tag in scope.row.classes.split(',')" :key="tag" type="primary">{{ tag }}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="device_direction" label="设备方向">
+            <template slot-scope="scope">
+              {{ scope.row.device_direction==2 ? "竖屏" : "横屏" }}
+            </template>
+          </el-table-column>
+          <!-- <el-table-column align="center" prop="agency" label="所属机构" /> -->
+          <el-table-column align="center" prop="create_time" label="上传时间" width="150">
+            <template slot-scope="{row}">
+              <div>{{ row.create_time | parseTime }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="create_by" label="发布人" />
+          <el-table-column align="center" prop="handle" label="操作">
+            <template slot-scope="scope">
+              <el-button type="primary" round class="edit_btn" @click="editUploadTheme(scope.row)">编辑</el-button>
+              <el-button type="primary" round :class="['start_btn', { stop_btn: scope.row.is_state == 1 }]" @click="isStopHandle(scope.row)">{{ scope.row.is_state == 1 ? "停用" : "恢复" }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页器 -->
+        <el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getThemeHistoryList" @size-change="handleSizeChange" />
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script>
-import { FetchThemeClassList, FetchAddOrEdit } from '@/api/theme/theme.js'
+import { FetchAddOrEdit, FetchThemeHistoryList, FetchUpdateThemeState } from '@/api/theme/theme.js'
+import { saveMaterial } from '@/api/material/material'
 import ThemeGalleryList from '../components/ThemeGalleryList.vue'
+import Upload from '../components/upload'
+import UploadCover from '../components/upload_cover'
+import { parseTime } from '@/utils/index.js'
 export default {
   name: 'ThemeGallery',
-  components: { ThemeGalleryList },
+  components: { ThemeGalleryList, UploadCover, Upload },
+  filters: {
+    parseTime(time, cFormat) {
+      return parseTime(time, cFormat)
+    }
+  },
   data() {
     return {
+      isTheme: true,
       orga_id: '133221333123111', // 机构ID
+      addDialogVisible: false, // 新增编辑-分类弹框
+      layerTitle: '新增',
+      isAddEdit: 0, // 判断分类菜单是新增还是编辑
       classifyForm: { //  主题库分类菜单form
         class_name: '',
         is_all: false,
         id: '',
         orga_ids: []
       },
+      tabItem: [], // 分类菜单data
       searchClassify: [], // 机构选择多选操作
       oldSearchClassify: [],
-      addDialogVisible: false,
-      layerTitle: '新增',
-      isAddEdit: 0, // 判断分类菜单是新增还是编辑
-      mulitText: '多选',
-      isMultiSelected: false,
-      showItemInfo: true,
-      themeItemActive: '1',
-      uploadDialogVisible: false,
-      uploadTitle: '上传',
       organOptions: [ // 机构list-data
         {
           label: '全部',
@@ -115,24 +203,53 @@ export default {
           id: '133221333123111'
         }
       ],
-      // 导航栏的lsit
-      tabItem: [],
-      activeIndex: 0
+      mulitText: '多选', // 主题库list - 多选操作
+      isMultiSelected: false,
+      showItemInfo: true, // 判断是否显示画册
+      uploadDialogVisible: false, // 上传主题内容 - 弹框
+      uploadHistoryVisible: false, // 上传主题历史 - 弹框
+      uploadTitle: '上传', // 上传-弹框内
+      isUploadThemeType: 0,
+
+      uploadForm: { // 上传素材
+        class_ids: [
+          // 素材类id集合
+        ],
+        deposit_url: null, // 素材存放路径
+        device_direction: null, // 横竖屏 1.横屏 2.竖屏,
+        duration: null, // 时长s
+        material_id: null,
+        folder_id: null, // 文件夹id
+        img_path: null, // 封面图片id
+        material_name: null, // 素材名称
+        material_type: null, // 素材类别
+        file_size: null, // 文件大小
+        orga_id: null, // 机构id
+        store_type: null // 库类型 1.素材库 2.主题库
+      },
+      fileNames: '',
+      formatType: -1,
+      materialImgPath: null,
+      materialDuration: null,
+      selectClassifyList: [],
+      queryForm: { // 历史list - 搜索
+        name: '',
+        date: []
+      },
+      uploadHistoryListData: [], // 上传历史list
+      isEditTheme: false,
+      page: 1,
+      size: 10,
+      total: 0
     }
   },
+  watch: {
+  },
   mounted() {
-    this.getThemeClassList()
+    // 上传历史list
+    this.getThemeHistoryList()
   },
   methods: {
-    // 根据机构id查询主题库分类列表
-    getThemeClassList() {
-      const { orga_id } = this
-      FetchThemeClassList(orga_id).then(res => {
-        if (res.code == 200) {
-          this.tabItem = res.data
-        }
-      })
-    },
     // 机构选择 全选 / 多选
     changeSelect(val) {
       const allValues = []
@@ -171,6 +288,8 @@ export default {
       if (index == 1) {
         this.layerTitle = '编辑'
         this.isAddEdit = 1
+        this.tabItem = this.$refs.ThemeGalleryList.tabItem
+        this.activeIndex = this.$refs.ThemeGalleryList.activeIndex
         this.classifyForm.class_name = this.tabItem[this.activeIndex].class_name
         this.classifyForm.id = this.tabItem[this.activeIndex].id
         // if (this.classifyForm.is_all) {
@@ -186,7 +305,7 @@ export default {
         this.classifyForm.class_name = ''
       }
     },
-    // 新增编辑
+    // 新增/编辑 - 分类菜单 - 提交
     submitForm(formName) {
       this.classifyForm.is_all = !!this.searchClassify.includes('ALL_SELECT')
       this.classifyForm.orga_ids = this.searchClassify.includes('ALL_SELECT') ? [] : this.searchClassify
@@ -204,7 +323,7 @@ export default {
               })
               this.addDialogVisible = false
               this.searchClassify = []
-              this.getThemeClassList()
+              this.$refs.ThemeGalleryList.getThemeClassList()
             }
           })
         } else {
@@ -213,22 +332,14 @@ export default {
         }
       })
     },
+    // 表单 - 关闭btn
     resetForm(formName) {
       this.addDialogVisible = false
       this.uploadDialogVisible = false
       this.searchClassify = []
       this.$refs[formName].resetFields()
     },
-    // 主题分类菜单-操作
-    tabThemeClassifyClick(tab) {
-      this.activeIndex = tab.index
-    },
-    // tabClick
-    tabItemClick(tab, event) {
-      console.log(this.themeItemActive)
-      console.log(tab, event)
-    },
-    // 多选btn
+    // list - 多选btn
     multiSelectBtn() {
       this.isMultiSelected = !this.isMultiSelected
       if (this.isMultiSelected) {
@@ -237,14 +348,190 @@ export default {
         this.mulitText = '多选'
       }
     },
+    // 新增 - 上传
+    uploadTheme() {
+      this.isEditTheme = false
+      this.$nextTick(() => {
+        this.tabItem = this.$refs.ThemeGalleryList.tabItem
+      })
+      this.uploadDialogVisible = true
+      this.isUploadThemeType = 0
+      this.uploadTitle = '新增'
+    },
+    // 编辑 - 上传
+    editUploadTheme(row) {
+      this.isEditTheme = true
+      this.uploadDialogVisible = true
+      this.isUploadThemeType = 1
+      this.uploadTitle = '编辑'
+      this.$nextTick(() => {
+        this.tabItem = this.$refs.ThemeGalleryList.tabItem
+        const classifyListName = row.classes.split(',')
+        if (classifyListName) {
+          this.selectClassifyList = []
+          this.tabItem.filter(item => {
+            if (classifyListName.indexOf(item.class_name) != -1) {
+              this.selectClassifyList.push(item.id)
+            }
+          })
+        }
+      })
+      this.uploadForm.device_direction = row.device_direction
+      this.uploadForm.material_name = row.material_name
+      this.fileNames = row.material_name
+      this.uploadForm.deposit_url = row.deposit_url
+
+      const postfix = row.deposit_url.substring(row.deposit_url.lastIndexOf('.') + 1, row.deposit_url.length)
+      if (postfix == 'mp3') {
+        this.formatType = 2
+        this.$nextTick(() => {
+          if (this.$refs.childUpload) {
+            this.$refs.childUpload.imageUrl = row.img_path
+          }
+        })
+      } else if (postfix == 'mp4') {
+        this.formatType = 1
+        this.$nextTick(() => {
+          if (this.$refs.childUpload) {
+            this.$refs.childUpload.imageUrl = row.img_path
+          }
+        })
+      } else if (postfix == ('jpg' || 'png' || 'gif')) {
+        this.formatType = 0
+      }
+      // this.materialImgPath = row.img_path
+      this.uploadForm.material_type = this.formatType
+      this.uploadForm.duration = row.duration
+      this.uploadForm.file_size = row.file_size
+      this.uploadForm.material_id = row.material_id
+    },
+    // 素材上传完之后 - 获取相关info
+    saveMaterial() {
+      console.log(this.$refs.uploadMaterial)
+      console.log(this.$refs.uploadMaterial.uploadFileUrl)
+      const formatType = this.$refs.uploadMaterial.formatType
+      const uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
+      // 视频和音频的时长
+      const duration = this.$refs.uploadMaterial.duration
+      switch (formatType) {
+        case 'image':
+          this.formatType = 0
+          this.materialImgPath = uploadFileUrl
+          this.materialDuration = 0
+          break
+        case 'video':
+          this.formatType = 1
+          this.materialDuration = duration
+          this.materialImgPath = null
+          break
+        case 'audio':
+          this.formatType = 2
+          this.materialDuration = duration
+          this.materialImgPath = null
+          break
+      }
+      this.uploadForm.deposit_url = uploadFileUrl
+      this.fileNames = this.$refs.uploadMaterial.fileNames
+      this.uploadForm.material_name = this.$refs.uploadMaterial.fileNames
+      this.uploadForm.material_type = this.formatType
+      this.uploadForm.file_size = this.$refs.uploadMaterial.fileSize
+      this.uploadForm.img_path = this.materialImgPath
+      this.uploadForm.duration = this.materialDuration
+    },
+    // 上传 - 提交btn
+    uploadSubmit(formName) {
+      if (this.isEditTheme) {
+        this.$nextTick(() => {
+          if (this.$refs.childUpload) {
+            this.uploadForm.img_path = this.$refs.childUpload.imageUrl
+          }
+        })
+      }
+      this.uploadForm.class_ids = this.selectClassifyList
+      // this.uploadForm.orga_id = this.orga_id
+      this.uploadForm.store_type = 2
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          setTimeout(() => {
+            saveMaterial(this.uploadForm).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '上传素材成功',
+                  type: 'success'
+                })
+                this.uploadDialogVisible = false
+                this.getThemeHistoryList()
+                this.$refs.uploadForm.resetFields()
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }, 200)
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 上传历史list - 主题库
+    getThemeHistoryList(pager = 1) {
+      this.page = pager
+      let start_time = ''
+      let end_time = ''
+      if (this.queryForm.date) {
+        start_time = this.queryForm.date[0]
+        end_time = this.queryForm.date[1]
+      } else {
+        start_time = end_time = null
+      }
+      const params = {
+        theme_name: this.queryForm.name,
+        theme_class: null,
+        device_direction: null,
+        orga_id: null,
+        start_time: start_time,
+        end_time: end_time,
+        folder_id: null,
+        page: this.page,
+        size: this.size
+      }
+      FetchThemeHistoryList(params).then(res => {
+        if (res.code === 200) {
+          this.uploadHistoryListData = res.data.content
+          this.total = res.data.totalElements
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.size = size
+      this.getThemeHistoryList()
+    },
     // 上传历史-停用/恢复
-    isStopHandle(index, row) {
-      row.enabled = !row.enabled
+    isStopHandle(row) {
+      row.is_state = row.is_state == 1 ? 2 : 1
+      const params = {
+        id: row.material_id,
+        state: row.is_state
+      }
+      FetchUpdateThemeState(params).then(res => {
+        if (res.code == 200) {
+          this.$message.success(res.msg)
+          this.getThemeHistoryList()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
     },
-    // 上传
-    upload() {
-      //  通知子组件发请求
-      this.$refs.ThemeGalleryList.saveMaterial()
+    // 当复选框发生改变的时候
+    handleCheckedCitiesChange(val) {
+      // const class_ids = []
+      // val.forEach(item => {
+      //   class_ids.push(item)
+      // })
     }
   }
 }
@@ -288,6 +575,7 @@ export default {
 .upload_layer {
   .query_history {
     display: flex;
+    margin-top: -16px;
   }
   ::v-deep .el-dialog__body {
     .el-form-item__label {
@@ -306,4 +594,67 @@ export default {
     }
   }
 }
+.upload_source {
+  ::v-deep .el-form-item__content{
+    display: flex;
+  }
+  .source_cont{
+    margin-right: 20px;
+    p{
+      font-size: 12px;
+      padding: 0 10px;
+      line-height: 32px;
+    }
+  }
+  video{
+    display: block;
+  }
+  audio{
+    display: block;
+  }
+  img{
+    display: block;
+  }
+}
+::v-deep .components_upload{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  text-align: center;
+  width: 128px;
+  height: 120px;
+  font-size: 14px;
+  border: 1px dashed #dcdde3;
+  background: #f2f7ff;
+  border-radius: 6px;
+  .cont_upload_btn{
+    display: block;
+    width: 100px;
+    height: 34px;
+    font-size: 14px;
+    left: 50%;
+    top: 14px;
+    margin-left: -50px;
+  }
+  #upFile{
+    margin: 0 auto;
+  }
+  .start_upload{
+    display: block;
+    width: 100px;
+    height: 34px;
+    color: #fff;
+    text-align: center;
+    border: none;
+    background: linear-gradient(to right, #fc8c6f, #fa544e);
+    border-radius: 34px;
+    margin: 10px auto;
+  }
+}
+.tag_list{
+  ::v-deep .el-tag{
+    margin:  0 5px 5px 0;
+  }
+}
 </style>
diff --git a/src/views/components/ThemeGalleryList.vue b/src/views/components/ThemeGalleryList.vue
index f4df37f..32243e4 100644
--- a/src/views/components/ThemeGalleryList.vue
+++ b/src/views/components/ThemeGalleryList.vue
@@ -1,80 +1,13 @@
 <template>
   <div>
-    <!-- 平台技术人员-上传 -->
-    <el-dialog append-to-body :show-close="false" :visible.sync="uploadDialogVisible" :title="uploadTitle" class="upload_layer">
-      <el-form ref="classifyForm" :model="classifyForm" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="类别名称" prop="tabItem">
-          <el-checkbox-group v-model="classifyForm.selectNameList" @change="handleCheckedCitiesChange">
-            <el-checkbox v-for="item in tabItem" :key="item.id" :label="item.id">{{ item.class_name }}</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-        <el-form-item label="设备方向" prop="direction">
-          <el-radio-group v-model="classifyForm.direction" @change="clearCheckbox">
-            <el-radio :label="1" value="across">横屏</el-radio>
-            <el-radio :label="2" value="vertical">竖屏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <!-- <el-form-item label="文件名称">
-          <el-input v-model="classifyForm.name" style="width:336px" />
-        </el-form-item> -->
-        <el-form-item label="上传内容" prop="img_path">
-          <img v-if="formatType==0" :src="imgSrc" alt="" width="200" height="150" />
-          <video v-else-if="formatType==1" width="320" height="240" controls>
-            <source :src="videoSrc" type="video/mp4" />
-          </video>
-          <audio v-else width="200" height="150" controls>
-            <source :src="audioSrc" />
-          </audio>
-          <Upload ref="uploadMaterial" @saveMaterial="saveMaterial" />
-        </el-form-item>
-        <el-form-item v-if="formatType != 0" el-form-item label="上传封面" prop="img_path">
-          <UploadCover ref="childUpload" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" round @click="submitForm('classifyForm')">新增</el-button>
-        <el-button round @click="resetForm">关闭</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 上传历史layer -->
-    <div class="upload_layer">
-      <el-dialog title="上传历史" :close-on-click-modal="false" :visible.sync="uploadListVisible" height="384px">
-        <el-form ref="form" :model="form" label-width="80px" class="query_history">
-          <el-form-item label="文件名称">
-            <el-input v-model="form.name" style="width:200px" />
-          </el-form-item>
-          <el-form-item label="时间">
-            <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
-          </el-form-item>
-        </el-form>
-        <el-table :data="uploadData" :header-cell-style="{ color: '#333' }">
-          <el-table-column align="center" prop="name" label="文件名称" />
-          <el-table-column align="center" prop="cover" label="发布内容">
-            <template slot-scope="scope">
-              <div>
-                <img width="48px" height="64px" size="medium" :src="scope.row.cover" />
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="type" label="类别名称" />
-          <el-table-column align="center" prop="direction" label="设备方向">
-            <template slot-scope="scope">
-              {{ scope.row.direction ? "竖屏" : "横屏" }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="agency" label="所属机构" />
-          <el-table-column align="center" prop="date" label="上传时间" width="150" />
-          <el-table-column align="center" prop="publisher" label="发布人" />
-          <el-table-column align="center" prop="handle" label="操作">
-            <template slot-scope="scope">
-              <el-button type="primary" class="edit_btn" @click="saveMaterial(scope.$index, scope.row)">编辑</el-button>
-              <el-button type="primary" :class="['start_btn', { stop_btn: scope.row.enabled }]" @click="isStopHandle(scope.$index, scope.row)">{{ scope.row.enabled ? "停止" : "恢复" }}</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-dialog>
-    </div>
+    <el-tabs v-model="activeIndex" @tab-click="tabThemeClassifyClick">
+      <el-tab-pane v-for="(item,index) in tabItem" :key="index" :label="item.class_name" :name="item.name" />
+    </el-tabs>
+    <el-tabs v-if="showItemInfo" v-model="themeItemActive" class="theme_item_tab" @tab-click="tabItemClick">
+      <el-tab-pane label="竖屏" name="1" />
+      <el-tab-pane label="横屏" name="2" />
+      <el-tab-pane label="我的画册" name="3" />
+    </el-tabs>
     <div class="theme_img">
       <!-- 我的画册-创建文件夹btn -->
       <div v-if="themeItemActive=='3'" class="theme_mkdir cont_upload" @click="handleMkdir">
@@ -141,7 +74,6 @@
         </div>
       </el-dialog>
     </div>
-
     <!-- 移动至layer -->
     <div class="wjj_layer">
       <!-- width="736px" -->
@@ -160,17 +92,13 @@
         </div>
       </el-dialog>
     </div>
-
   </div>
 </template>
 <script>
-import { FetchThemeGallery } from '@/api/theme/theme.js'
-// import { saveMaterial } from '@/api/material/material'
-import Upload from './upload'
-import UploadCover from './upload_cover'
+import { FetchThemeClassList, FetchThemeGallery } from '@/api/theme/theme.js'
 export default {
   name: 'ThemeGalleryList',
-  components: { UploadCover, Upload },
+  components: {},
   props: {
     isMultiSelected: {
       type: Boolean,
@@ -187,35 +115,6 @@ export default {
   },
   data() {
     return {
-      orga_id: '133221333123111', // 机构ID
-      queryInfo: {
-        theme_name: '', // 主题库的名字
-        theme_class: '', // 主题素材列表
-        device_direction: null, // 横竖屏
-        orga_id: 133221333123111,
-        start_time: '', // 搜索开始的时间
-        end_time: '', // 结束开始的时间
-        folder_id: '', // 文件夹的id
-        page: 1,
-        size: 3
-      },
-      // 选中的导航栏id
-      class_ids: [],
-      // 导航栏的lsit
-      tabItem: [],
-      uploadFileUrl: null, // 素材保存路径
-      classifyForm: {
-        class_name: '',
-        is_all_name: '',
-        is_all: false,
-        id: '',
-        orga_ids: ['133221333123111'],
-        selectName: null,
-        direction: 1, // 横竖屏
-        selectNameList: [],
-        img_path: ''
-      },
-      total: 0,
       themeItemActive: '1',
       mkdirVisible: false,
       movingVisible: false,
@@ -295,37 +194,14 @@ export default {
       ],
       uploadDialogVisible: false,
       uploadTitle: '上传',
-      rules: {
-        // name: [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
-        selectName: [
-          { required: true, message: '请选择类别名称', trigger: 'change' }
-        ],
-        selectNameList: [
-          { required: true, message: '请选择类别名称', trigger: 'change' }
-        ],
-        is_all: [
-          { required: true, message: '请选择所属机构', trigger: 'change' }
-        ],
-        direction: [
-          { required: true, message: '请选择设备方向', trigger: 'change' }
-        ]
-      },
       uploadListVisible: false,
-      uploadData: [
-        {
-          name: '图片1',
-          cover: require('@/assets/images/background.jpg'),
-          type: '为你推荐',
-          direction: 0,
-          agency: '全部',
-          date: '2022-1-1 15：00',
-          publisher: '张三',
-          enabled: false
-        }
-      ],
+
       imgSrc: '',
       videoSrc: '',
-      audioSrc: ''
+      audioSrc: '',
+      // 导航栏的lsit
+      tabItem: [],
+      activeIndex: 0
     }
   },
   watch: {
@@ -336,75 +212,81 @@ export default {
     }
   },
   mounted() {
+    this.getThemeClassList()
     this.getThemeGallery()
   },
   methods: {
-
-    // 获取主题库list
-    getThemeGallery() {
-      const params = this.queryInfo
-      FetchThemeGallery(params).then(res => {
-        console.log(res)
+    // 根据机构id查询主题库分类列表
+    getThemeClassList() {
+      const { orga_id } = this
+      FetchThemeClassList(orga_id).then(res => {
         if (res.code == 200) {
-          this.themeGalleryList = res.data.content
-          console.log(this.themeGalleryList)
-          this.total = res.data.totalElements
+          this.tabItem = res.data
         }
       })
     },
-    clearCheckbox(label) {
-      this.classifyForm.direction = label
-      console.log(this.classifyForm.direction)
-    },
-    // 当复选框发生改变的时候
-    handleCheckedCitiesChange(val) {
-      const class_ids = []
-      val.forEach(item => {
-        class_ids.push(item)
-      })
+    // 获取主题库list
+    getThemeGallery() {
+      const params = this.queryInfo
+      // FetchThemeGallery(params).then(res => {
+      //   console.log(res)
+      //   if (res.code == 200) {
+      //     this.themeGalleryList = res.data.content
+      //     console.log(this.themeGalleryList)
+      //     this.total = res.data.totalElements
+      //   }
+      // })
     },
-    // 上传
-    saveMaterial() {
-      console.log('-----------')
-      console.log(this.formatType)
-      this.uploadDialogVisible = true
-      this.$nextTick(() => {
-        if (formatType == 0) {
-          this.imgSrc = this.$refs.uploadMaterial.uploadFileUrl
-        } else if (formatType == 1) {
-          this.videoSrc = this.$refs.uploadMaterial.uploadFileUrl
-        } else {
-          this.audioSrc = this.$refs.uploadMaterial.uploadFileUrl
-        }
-
-        // console.log(this.formatType)
-        const duration = this.$refs.uploadMaterial.duration
-        this.fileSize = this.$refs.uploadMaterial.fileSize
-        // 主题名称
-        this.materialName = this.$refs.uploadMaterial.fileNames
-        // 图片音频视频 类别
-        const formatType = this.$refs.uploadMaterial.formatType
-        console.log(this.$refs.uploadMaterial.uploadFileUrl)
-      })
-      const params = {
-        class_ids: this.class_ids, // 主题库头部id集合
-        deposit_url: this.uploadFileUrl, // 素材存放路径
-        device_direction: this.classifyForm.direction, // 横竖屏
-        material_id: null,
-        folder_id: null, // 文件夹的id
-        img_path: this.materialImgPath, // 封面图片的id
-        material_type: this.formatType,
-        file_size: this.fileSize, // 文件大小
-        orga_id: this.queryInfo.orga_id, // 机构id
-        store_type: 2// 库类型 1.素材库 2.主题库
-      }
+    // 主题分类菜单-操作
+    tabThemeClassifyClick(tab) {
+      this.activeIndex = tab.index
     },
-    resetForm() {
-      this.addDialogVisible = false
-      this.uploadDialogVisible = false
-      this.$refs.classifyForm.resetFields()
+    // tabClick
+    tabItemClick(tab, event) {
+      console.log(this.themeItemActive)
+      console.log(tab, event)
     },
+    // 上传
+    // saveMaterial() {
+    //   console.log('-----------')
+    //   console.log(this.formatType)
+    //   this.uploadDialogVisible = true
+    //   this.$nextTick(() => {
+    //     if (formatType == 0) {
+    //       this.imgSrc = this.$refs.uploadMaterial.uploadFileUrl
+    //     } else if (formatType == 1) {
+    //       this.videoSrc = this.$refs.uploadMaterial.uploadFileUrl
+    //     } else {
+    //       this.audioSrc = this.$refs.uploadMaterial.uploadFileUrl
+    //     }
 
+    //     // console.log(this.formatType)
+    //     const duration = this.$refs.uploadMaterial.duration
+    //     this.fileSize = this.$refs.uploadMaterial.fileSize
+    //     // 主题名称
+    //     this.materialName = this.$refs.uploadMaterial.fileNames
+    //     // 图片音频视频 类别
+    //     const formatType = this.$refs.uploadMaterial.formatType
+    //     console.log(this.$refs.uploadMaterial.uploadFileUrl)
+    //   })
+    //   const params = {
+    //     class_ids: this.class_ids, // 主题库头部id集合
+    //     deposit_url: this.uploadFileUrl, // 素材存放路径
+    //     device_direction: this.classifyForm.direction, // 横竖屏
+    //     material_id: null,
+    //     folder_id: null, // 文件夹的id
+    //     img_path: this.materialImgPath, // 封面图片的id
+    //     material_type: this.formatType,
+    //     file_size: this.fileSize, // 文件大小
+    //     orga_id: this.queryInfo.orga_id, // 机构id
+    //     store_type: 2// 库类型 1.素材库 2.主题库
+    //   }
+    // },
+    // resetForm() {
+    //   this.addDialogVisible = false
+    //   this.uploadDialogVisible = false
+    //   this.$refs.classifyForm.resetFields()
+    // },
     // 创建文件夹
     handleMkdir() {
       this.mkdirVisible = true
@@ -441,7 +323,6 @@ export default {
         }
       )
     }
-
   }
 }
 </script>
diff --git a/src/views/components/upload.vue b/src/views/components/upload.vue
index 1f29645..b9676b0 100644
--- a/src/views/components/upload.vue
+++ b/src/views/components/upload.vue
@@ -1,13 +1,17 @@
 <template>
   <div class="components_upload">
-    <el-button class="cont_upload_btn" round type="primary">上传</el-button>
-    <input id="upFile" type="file" name="upFile" @change="changeFile($event)" />
-    <input type="button" name="开始上传" value="开始上传" @click="uploadFile()" />
+    <div v-if="isTheme">
+      <el-button class="cont_upload_btn" round type="primary">选择文件</el-button>
+      <input id="upFile" type="file" name="upFile" @change="changeFile($event)" />
+    </div>
+    <el-button v-if="!isTheme" class="cont_upload_btn" round type="primary">上传</el-button>
+    <input v-if="!isTheme" id="upFile" type="file" name="upFile" @change="changeFile($event)" />
+    <input type="button" name="开始上传" value="开始上传" class="start_upload" @click="uploadFile()" />
     <!-- <img v-if="coverUrl" :src="coverUrl" alt="封面" /> -->
-    <el-progress :percentage="filePercent" />
-    {{ filePercent }}
+    <el-progress v-if="filePercent" :percentage="filePercent" />
+    <!-- {{ filePercent }} -->
     <!-- 上传列表layer -->
-    <div class="upload_layer">
+    <div v-if="!isTheme" class="upload_layer">
       <!-- width="736px" -->
       <el-dialog
         title="上传列表"
@@ -73,6 +77,12 @@ import * as qiniu from 'qiniu-js'
 import { getQiniuToken } from '@/api/upload/upload'
 export default {
   name: 'Qiniu',
+  props: {
+    isTheme: {
+      type: Boolean,
+      required: true
+    }
+  },
   data() {
     return {
       file: null,
@@ -152,7 +162,6 @@ export default {
     uploadFile() {
       // 当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。
       const _this = this
-
       // 获取身份的token
       const token = _this.token
       console.log(token)
@@ -228,12 +237,12 @@ export default {
 }
 #upFile{
   display: block;
-    width: 114px;
-    height: 34px;
-    padding: 0;
-    font-size: 14px;
-    border: none;
-    opacity: 0;
+  width: 114px;
+  height: 34px;
+  padding: 0;
+  font-size: 14px;
+  border: none;
+  opacity: 0;
 }
 .cont_upload_btn{
   position: absolute;
diff --git a/src/views/materialContent/materialList/index.vue b/src/views/materialContent/materialList/index.vue
index fcb8bfe..9531476 100644
--- a/src/views/materialContent/materialList/index.vue
+++ b/src/views/materialContent/materialList/index.vue
@@ -157,8 +157,7 @@ export default {
       movingVisible: false,
       uploadListData: [ // 上传列表
       ],
-      folderListChecked: -1,
-      wjjList: []
+      folderListChecked: -1
     }
   },
   computed: {
diff --git a/src/views/publishContent/publishList/index.vue b/src/views/publishContent/publishList/index.vue
index d361655..f76bee6 100644
--- a/src/views/publishContent/publishList/index.vue
+++ b/src/views/publishContent/publishList/index.vue
@@ -7,8 +7,8 @@
           <el-table-column label="文件名称" align="center" prop="relaase_name" />
           <el-table-column label="发布内容" align="center" prop="content">
             <template slot-scope="scope">
-              <div>
-                <img width="100px" size="medium" :src="scope.row.release_first_img" />
+              <div v-if="scope.row.release_first_img">
+                <img width="48px" height="63px" size="medium" :src="scope.row.release_first_img" />
               </div>
             </template>
           </el-table-column>
@@ -210,7 +210,7 @@ export default {
 
 .publish_table {
   .tag_list {
-    text-align: left;
+    // text-align: left;
     .el-tag {
       height: 26px;
       line-height: 26px;