主题库上传功能

src/api/publish/publishHistory.js

@@ -0,0 +1,11 @@
+// 发布历史的接口
+import request from '@/utils/request'
+
+// 发布历史列表
+export function reqPublishHistory(parameter) {
+    return request({
+        url: 'api/release/getReleaseHistoryList',
+        method: 'get',
+        params: parameter
+    })
+}

src/api/publish/publishList.js

@@ -1,10 +0,0 @@
-// 管理发布列表的接口
-import request from '@/utils/request'
-
-export function reqPublishList(parameter) {
-  return request({
-    url: 'api/release/getReleaseList',
-    method: 'get',
-    params: parameter
-  })
-}

src/views/components/ThemeGalleryList.vue

@@ -9,22 +9,31 @@
           </el-checkbox-group>
         </el-form-item>
         <el-form-item label="设备方向" prop="direction">
-          <el-radio-group v-model="classifyForm.direction" @change="clearCheckbox()">
-            <el-radio :label="0">横屏</el-radio>
-            <el-radio :label="1">竖屏</el-radio>
+          <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 :src="imgSrc" alt="">
+          <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 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="submitForm('classifyForm')">新增</el-button>
-        <el-button round @click="resetForm('classifyForm')">关闭</el-button>
+        <el-button round @click="resetForm">关闭</el-button>
       </div>
     </el-dialog>
 
@@ -175,17 +184,17 @@ 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
-      // },
+      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
@@ -198,7 +207,7 @@ export default {
         id: '',
         orga_ids: ["133221333123111"],
         selectName: null,
-        direction: null,
+        direction: 1, //横竖屏
         selectNameList: [],
         img_path: ''
       },
@@ -213,7 +222,11 @@ export default {
         file: null
       },
       themeGalleryList: [],//主题库的列表
-
+      formatType: null, // 上传素材类型 0 img 1 video 2 audio
+      materialImgPath: '', // 素材封面
+      materialDuration: 0, // 时长
+      materialName: '', // 素材名称
+      fileSize: '',//大小
       listThemeData: [
         {
           id: '1',
@@ -306,7 +319,9 @@ export default {
           enabled: false
         }
       ],
-      imgSrc: ''
+      imgSrc: '',
+      videoSrc: '',
+      audioSrc: ''
     }
   },
   watch: {
@@ -317,58 +332,82 @@ export default {
     }
   },
   mounted () {
-    // this.getThemeGallery()
+    this.getThemeGallery()
     this.getHeaderList()
   },
   methods: {
     // 获取主题库list
-    // getThemeGallery () {
-    //   const params = this.queryInfo
-    //   reqThemeGallery(params).then(res => {
-    //     if (res.code == 200) {
-    //       this.themeGalleryList = res.data.content
-    //       this.total = res.data.reqThemeGallery
-    //     }
-    //   })
-    // },
+    getThemeGallery () {
+      const params = this.queryInfo
+      reqThemeGallery(params).then(res => {
+        console.log(res)
+        if (res.code == 200) {
+          this.themeGalleryList = res.data.content
+          console.log(this.themeGalleryList)
+          this.total = res.data.totalElements
+        }
+      })
+    },
     getHeaderList () {
       const { orga_id } = this
       reqHeaderList(orga_id).then(res => {
         if (res.code == 200) {
           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)
       })
-      console.log(class_ids)
+      // console.log(class_ids)
     },
     // 上传
     saveMaterial () {
+      console.log('-----------')
+      console.log(this.formatType)
       this.uploadDialogVisible = true
       this.$nextTick(() => {
-        this.imgSrc = this.$refs.uploadMaterial.uploadFileUrl
+        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)
       })
-      // if (row) {
-      //   console.log(row.type)
-      //   this.uploadTitle = '编辑'
-      //   this.classifyForm.name = row.name
-      //   this.classifyForm.direction = row.direction
-      //   this.classifyForm.selectNameList.push(row.type)
-      // } else {
-      //   this.uploadTitle = '上传'
-      // }
+      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 (formName) {
+    resetForm () {
       this.addDialogVisible = false
       this.uploadDialogVisible = false
-      this.$refs[formName].resetFields()
+      this.$refs.classifyForm.resetFields()
     },
 
     // 创建文件夹

src/views/device/deviceConfig.vue

@@ -302,6 +302,7 @@ export default {
     },
     // 每天/每周切换的情况下数据处理
     clearCheckbox () {
+
       if (this.form.open_setting === 1) {
         this.open_weekly = []
         this.form.open_weekly = null

src/views/materialContent/materialList/index.vue

@@ -13,7 +13,6 @@
         <el-button v-if="!isToFolder" class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button>
         <el-button v-else class="return_btn" round type="primary"><a href="/content">返回</a></el-button>
       </div>
-
       <!-- 文件夹list -->
       <div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)">
         <div class="icon_bg">
@@ -388,6 +387,7 @@ export default {
         console.log(this.$refs.uploadMaterial.fileSize)
         const formatType = this.$refs.uploadMaterial.formatType
         this.uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
+        // 视频和音频的时长
         const duration = this.$refs.uploadMaterial.duration
         this.materialName = this.$refs.uploadMaterial.fileNames
         switch (formatType) {

src/views/publishContent/historyList/index.vue

@@ -3,35 +3,50 @@
     <el-row :gutter="15">
       <el-col>
         <!--  v-loading="crud.loading" -->
-        <el-table
-          ref="table"  
-          :data="tableData"
-          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
-          @selection-change="handleSelectionChange"
-        >
+        <el-table ref="table" :data="publishHistoryList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" />
-          <el-table-column label="文件名称" align="center" prop="name" />
+          <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.cover" />
+                <img width="100px" size="medium" :src="scope.row.release_first_img" />
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="发布时间" align="center" prop="date" />
-          <el-table-column label="发布周期" align="center" prop="cycle" />
+          <el-table-column label="发布时间" align="center" prop="date">
+            <template slot-scope="scope">
+              <div v-if="scope.row.release_type==0">{{ scope.row.release_start }}</div>
+              <div v-else>{{scope.row.release_start+" 至 "+scope.row.release_end}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布周期" align="center" prop="cycle">
+            <template slot-scope="scope">
+              {{scope.row.release_cycle==0?(''):((scope.row.release_cycle==1?'每天':'每周'+setWeekly(row.release_weekly)))}}
+            </template>
+          </el-table-column>
           <el-table-column label="发布类型" align="center" prop="type">
             <template slot-scope="scope">
-              <div>{{ scope.row.type ? '定时发布' : '即时发布' }}</div>
+              <div>{{ scope.row.release_type==1 ? '定时发布' : '即时发布' }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="发布人" align="center" prop="user" />
+          <el-table-column label="发布人" align="center" prop="nick_name" />
           <el-table-column label="状态" align="center" prop="enabled">
             <template slot-scope="scope">
-              <div :class="{ 'stop_txt': scope.row.enabled }">{{ scope.row.enabled ? '发布中' : '停止' }}</div>
+              <div :class="{ stop_txt: scope.row.is_state }">
+                {{ scope.row.is_state==0 ? '':(scope.row.is_state==1? '每天':'每周') }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="release_device" align="center" label="发布设备">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.release_device == 2 ? "" : "全部设备" }}
+              </div>
+              <div>
+                <el-tag v-for="tag in scope.row.binding_device" :key="tag">{{ tag }}</el-tag>
+              </div>
             </template>
           </el-table-column>
-          <el-table-column prop="device" align="center" label="发布设备" />
         </el-table>
         <!--分页组件-->
       </el-col>
@@ -40,44 +55,79 @@
 </template>
 
 <script>
+import { parseTime } from '@/utils/index.js'
+import { reqPublishHistory } from "@/api/publish/publishHistory";
 export default {
   name: 'HistoryList',
-  data() {
+  filters: {
+    parseTime (time, cFormat) {
+      return parseTime(time, cFormat)
+    }
+  },
+
+  data () {
     return {
-      form:{
+      form: {
 
       },
+      queryInfo: {
+        release_name: '',
+        orga_id: '133221333123111',
+        page: 1,
+        size: 3
+      },
+      //发布历史列表
+      publishHistoryList: [],
+      // 总条数
+      total: 0,
       selectedList: [],
-      tableData: [
-        {
-          id: 1,
-          name: '图片1',
-          cover: require('@/assets/images/background.jpg'),
-          type: 0,
-          user: '某某某',
-          device: '所有设备',
-          enabled: true,
-          isTop: true,
-          cycle: '每天',
-          date: '2021-2-2 至 2022-4-6'
-        },
-        {
-          id: 2,
-          name: '图片2',
-          cover: require('@/assets/images/background.jpg'),
-          type: 1,
-          user: '某某某2',
-          device: '所有设备',
-          enabled: false,
-          isTop: false,
-          cycle: '每天',
-          date: '2021-2-2 至 2022-4-6'
+
+    }
+  },
+  computed: {
+    // 将字符串渲染成汉字显示到页面
+    setWeekly () {
+      const a = {
+        1: '一',
+        2: '二',
+        3: '三',
+        4: '四',
+        5: '五',
+        6: '六',
+        7: '七'
+      }
+      return function (str) {
+        if (str) {
+          return str.split(',').map(i => a[i]).join('/')
         }
-      ]
+      }
     }
+
+  },
+  mounted () {
+    this.getPublishHistory()
   },
   methods: {
-    handleSelectionChange(val) {
+    // 获取发布历史列表
+    getPublishHistory () {
+      const params = this.queryInfo
+      reqPublishHistory(params).then(res => {
+        if (res.code == 200) {
+          this.publishHistoryList = res.data.content
+          this.total = res.data.totalElements
+          this.publishHistoryList.forEach(item => {
+            item.release_start = parseTime(item.release_start).split("00:00:00")[0]
+            item.release_end = parseTime(item.release_end).split("00:00:00")[0]
+            if (item.binding_device) {
+              item.binding_device = item.binding_device.split(",")
+            }
+          })
+
+          console.log(this.publishHistoryList)
+        }
+      })
+    },
+    handleSelectionChange (val) {
       this.selectedList = val
       if (val.length > 0) {
         this.clearBtnDisabled = false