From e9a75e020f409313694c7cd0edeb108ba0b6aa4d Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Fri, 25 Mar 2022 20:33:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=B3=E6=97=B6=E5=8F=91=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/material/material.js                  |   9 +
 src/api/release/release.js                    |  10 +
 src/utils/index.js                            |  10 +
 .../components/MaterialCompontentList.vue     | 201 +++++
 src/views/immediateRelease/index.vue          | 761 ++++++++++--------
 src/views/materialContent/index.vue           |  31 +-
 .../materialContent/materialList/index.vue    | 162 ++--
 7 files changed, 710 insertions(+), 474 deletions(-)
 create mode 100644 src/api/release/release.js
 create mode 100644 src/views/components/MaterialCompontentList.vue

diff --git a/src/api/material/material.js b/src/api/material/material.js
index 6e30808..9f2348f 100644
--- a/src/api/material/material.js
+++ b/src/api/material/material.js
@@ -53,3 +53,12 @@ export function moveMyMaterial(parameter) {
     data: parameter
   })
 }
+
+// 根据素材类型获取素材 - 素材库
+export function getMaterialByType(parameter) {
+  return request({
+    url: 'api/material/getMaterialByType',
+    method: 'get',
+    params: parameter
+  })
+}
diff --git a/src/api/release/release.js b/src/api/release/release.js
new file mode 100644
index 0000000..8a692d8
--- /dev/null
+++ b/src/api/release/release.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 编辑 - 发布信息
+export function saveRelease(parameter) {
+  return request({
+    url: 'api/release/saveRelease',
+    method: 'post',
+    data: parameter
+  })
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 55e0023..9074ae7 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -421,3 +421,13 @@ export function getSeconds(s) {
     return result
   }
 }
+
+// 字节大小转换为的KB、MB、GB
+export function formatBytes(bytes, decimals) {
+  if (bytes == 0) return '0 Bytes'
+  var k = 1024
+  var dm = decimals || 2
+  var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  var i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
diff --git a/src/views/components/MaterialCompontentList.vue b/src/views/components/MaterialCompontentList.vue
new file mode 100644
index 0000000..76944df
--- /dev/null
+++ b/src/views/components/MaterialCompontentList.vue
@@ -0,0 +1,201 @@
+<template>
+  <div ref="materialContent" class="material_content">
+    <div v-if="isToFolder" class="material_item cont_upload">
+      <el-button class="return_btn" round type="primary" @click="returnFolder">返回</el-button>
+    </div>
+    <!-- 文件夹list -->
+    <div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder']" @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>
+    </div>
+    <div
+      v-for="(item, index) in materialList"
+      :key="'list-'+index"
+      :class="['material_item', 'item_cont', { '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.material_type == 2" class="radio_img"></div>
+      <div class="item_format">
+        <span class="item_type">{{ materialPostfix[index] }}</span>
+        <span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span>
+      </div>
+      <div class="file_name">{{ item.material_name }}</div>
+      <span v-if="isMultiSelected" class="checked_btn" @click="checkedItem(item)"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMaterialList } from '@/api/material/material'
+import { getSeconds } from '@/utils/index.js'
+export default {
+  name: 'MaterialList',
+  components: { },
+  filters: {
+    getSeconds(s) {
+      return getSeconds(s)
+    }
+  },
+  props: {
+    isMultiSelected: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      orga_id: '133221333123111', // 机构ID
+      rootFolderId: null, // 根目录文件夹ID
+      thisFoldId: null, // 当前父文件夹ID
+      materialFolders: [], // 文件夹list
+      materialList: [], // 素材库list
+      materialPostfix: [], // 文件后缀格式
+      selectedMaterial: [], // 素材选中
+      selectedListId: [], // 素材选中的material_id
+      selectinFolderid: [], // 素材选中的和文件关联表id -- in_folder_id
+      isToFolder: false, // 是否进入文件夹
+      isReturn: false, // 是否返回父级文件夹
+      currentFolderId: null // 当前进入文件夹的ID
+    }
+  },
+  computed: {
+    changePlaceholder() {
+      return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01'
+    },
+    defaultImg() {
+      return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
+    }
+  },
+  watch: {
+    isMultiSelected(newName, oldName) {
+      if (newName === false) {
+        this.selectedListId = []
+      }
+    }
+  },
+  mounted() {
+    this.getMaterialList()
+  },
+  methods: {
+    // 获取素材库list
+    getMaterialList() {
+      this.materialFolders = []
+      this.materialList = []
+      let params
+      if (this.isToFolder) {
+        console.log('文件夹内')
+        let folder_id
+        if (this.isReturn) {
+          folder_id = this.rootFolderId
+        } else {
+          this.currentFolderId = localStorage.getItem('currentFolderId')
+          folder_id = this.currentFolderId
+        }
+        params = {
+          'folder_id': folder_id,
+          'material_name': null,
+          'material_type': null,
+          'orga_id': this.orga_id
+        }
+      } else {
+        console.log('文件夹外')
+        localStorage.removeItem('currentFolderId')
+        params = {
+          'folder_id': null,
+          'material_name': null,
+          'material_type': null,
+          'orga_id': this.orga_id
+        }
+      }
+      getMaterialList(params).then(res => {
+        if (res.code == 200) {
+          if (!this.isToFolder) {
+            localStorage.setItem('rootFolderId', res.data.thisFoldId)
+          }
+          this.materialFolders = res.data.materialFolders
+          this.materialList = res.data.pageThemeVO
+          // 创建文件夹获取data
+          this.thisFoldId = res.data.thisFoldId
+          // 素材类型格式处理
+          this.materialList.forEach((item, key) => {
+            this.materialPostfix[key] = item.deposit_url.substring(
+              item.deposit_url.lastIndexOf('.') + 1,
+              item.deposit_url.length
+            )
+          })
+        } else {
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          })
+        }
+      })
+    },
+    returnFolder() {
+      this.isReturn = false
+      this.isToFolder = false
+      this.rootFolderId = localStorage.getItem('rootFolderId')
+      this.getMaterialList()
+    },
+    // 文件夹双击操作
+    floderDbClick(item, index) {
+      this.isToFolder = true
+      this.currentFolderId = item.id
+      localStorage.setItem('currentFolderId', this.currentFolderId)
+      this.getMaterialList()
+      this.selectedListId = []
+    },
+    // 素材 - 多选
+    checkedItem(item) {
+      const id = item.material_id
+      const inFolderId = item.in_folder_id
+      const type = item.material_type
+      const arr = this.selectedListId
+      if (arr.includes(id)) {
+        const index = arr.indexOf(id)
+        if (index > -1) {
+          arr.splice(index, 1)
+          this.selectinFolderid.splice(index, 1)
+          this.selectedMaterial.splice(index, 1)
+        }
+      } else {
+        this.selectedListId.push(id)
+        this.selectinFolderid.push(inFolderId)
+        this.selectedMaterial.push(item)
+        this.formatType = type
+      }
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.material_content {
+  display: flex;
+  flex-wrap: wrap;
+  .material_item {
+    position: relative;
+    width: 174px;
+    height: 182px;
+    border-radius: 4px;
+    margin: 0 20px 20px 0;
+    overflow: hidden;
+  }
+  .item_cont {
+    border-color: #dcdde3;
+    img {
+      width: 100%;
+      height: 148px;
+    }
+    .radio_img {
+      width: 100%;
+      height: 148px;
+    }
+  }
+}
+</style>
diff --git a/src/views/immediateRelease/index.vue b/src/views/immediateRelease/index.vue
index 57d663f..c21b0d2 100644
--- a/src/views/immediateRelease/index.vue
+++ b/src/views/immediateRelease/index.vue
@@ -7,20 +7,11 @@
         <el-col :span="18">
           <div class="input_wrap">
             <span class="input_label">名称</span>
-            <el-input
-              v-model="form.relaase_name"
-              :placeholder="changePlaceholder"
-              class="input_name"
-            />
+            <el-input v-model="form.relaase_name" :placeholder="changePlaceholder" class="input_name" />
           </div>
         </el-col>
         <el-col :span="4" class="release_right">
-          <el-button
-            round
-            class="release_btn"
-            type="primary"
-            @click="releaseSubmit"
-          >发布</el-button>
+          <el-button round class="release_btn" type="primary" @click="releaseSubmit">发布</el-button>
           <el-button round type="primary">关闭</el-button>
         </el-col>
       </el-row>
@@ -28,54 +19,23 @@
       <el-row class="in_release_item">
         <el-col class="step_1">第一步：设置时间</el-col>
         <el-col class="step_form">
-          <el-form-item
-            label="发布时间"
-            prop="release_start"
-            :rules="[
+          <el-form-item label="发布时间" prop="release_start" :rules="[
               { required: true, message: '请选择发布时间', trigger: 'change' }
-            ]"
-            label-width="100px"
-          >
-            <el-date-picker
-              v-if="publishType == 0"
-              v-model="form.release_start"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="date"
-              placeholder="选择日期"
-            />
-            <el-date-picker
-              v-else
-              v-model="form.release_start"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            />
+            ]" label-width="100px">
+            <el-date-picker v-if="publishType == 0" v-model="form.release_start" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期" />
+            <el-date-picker v-else v-model="form.release_start" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
           </el-form-item>
-          <el-form-item
-            v-if="publishType == 1"
-            label="设置周期"
-            prop="release_cycle"
-            :rules="[
+          <el-form-item v-if="publishType == 1" label="设置周期" prop="release_cycle" :rules="[
               { required: true, message: '请设置周期：', trigger: 'change' },
-            ]"
-            :class="['set_weekly',{'no_margin': form.release_cycle === '每周'}]"
-            label-width="100px"
-          >
+            ]" :class="['set_weekly',{'no_margin': form.release_cycle === '每周'}]" label-width="100px">
             <el-radio-group v-model="form.release_cycle" @change="clearCheckbox()">
               <el-radio label="每天" value="everyday" />
               <el-radio label="每周" value="weekly" />
             </el-radio-group>
           </el-form-item>
-          <el-form-item
-            v-if="form.release_cycle === '每周'"
-            :class="{'weekly_margin': form.release_cycle === '每周'}"
-            prop="release_weekly"
-            :rules="[
+          <el-form-item v-if="form.release_cycle === '每周'" :class="{'weekly_margin': form.release_cycle === '每周'}" prop="release_weekly" :rules="[
               { required: true, message: '请选择每周开机时间', trigger: 'change' },
-            ]"
-          >
+            ]">
             <el-checkbox-group v-model="form.release_weekly">
               <el-checkbox label="周一" name="release_weekly" />
               <el-checkbox label="周二" name="release_weekly" />
@@ -89,11 +49,7 @@
           <!-- :rules="[
               { required: true, message: '请选择是否置顶', trigger: 'change' }
             ]" -->
-          <el-form-item
-            label="是否置顶"
-            prop="is_topping"
-            label-width="100px"
-          >
+          <el-form-item label="是否置顶" prop="is_topping" label-width="100px">
             <!-- <el-radio v-model="form.is_topping" label="1">置顶</el-radio> -->
             <el-checkbox v-model="form.is_topping">置顶</el-checkbox>
           </el-form-item>
@@ -106,29 +62,20 @@
           <div class="step_select">
             <div>已选内容： 0</div>
             <div>内容总时长：0.00s</div>
-            <div>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont">选择文件</el-button></div>
+            <div>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont">选择文件</el-button>
+            </div>
           </div>
           <div class="step_select_list">
             <div class="step_upload" @click="selectContVisible = true"></div>
-            <draggable
-              v-model="materialSelected"
-              class="drag_list"
-              @end="dragEnd"
-            >
-              <div
-                v-for="(item, index) in materialSelected"
-                :key="'list-'+index"
-                :class="['material_item', 'item_cont']"
-                @click="selectedItem(item.material_id,item)"
-              >
+            <draggable v-model="selectedMaterial" class="drag_list" @end="dragEnd">
+              <div v-for="(item, index) in selectedMaterial" :key="'list-'+index" :class="['material_item', 'item_cont']" @click="clickMaterialItem(item.material_id,item)">
                 <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 class="item_format">
-                  <span class="item_type">{{ 1 }}</span>
+                  <span class="item_type">{{ materialPostfix[index] }}</span>
                   <span v-if="item.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span>
                 </div>
                 <div class="file_name">{{ item.material_name }}</div>
-                <!-- <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span> -->
                 <div v-if="contentIds.includes(item.material_id)" class="select_handle">
                   <div class="select_delt" @click.stop="selectDelt(item.material_id,index)">
                     <svg class="font-icon icon1" aria-hidden="true">
@@ -150,36 +97,24 @@
       <el-row class="in_release_item">
         <el-col class="step_1">第三步：选择设备</el-col>
         <el-col class="step_form">
-          <el-form-item
-            label=""
-            prop="release_device"
-            :rules="[
+          <el-form-item label="" prop="release_device" :rules="[
               { required: true, message: '请选择设备', trigger: 'change' },
-            ]"
-          >
-            <el-radio-group v-model="form.release_device">
-              <el-radio label="all" value="all">所有设备</el-radio>
-              <el-radio label="other" value="other">部分设备<i v-if="form.deviceSelect === 'other'" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
+            ]">
+            <el-radio-group v-model="form.release_device" @change="clearDevice()">
+              <el-radio label="1">所有设备</el-radio>
+              <el-radio label="2">部分设备<i v-if="form.release_device == 2" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
             </el-radio-group>
           </el-form-item>
-          <div v-if="form.release_device === 'all'" class="select_all_tip">所有设备都将被发送</div>
-          <div v-if="deviceTags.length > 0 && form.release_device === 'other'" class="select_other">
+          <div v-if="form.release_device == 1" class="select_all_tip">所有设备都将被发送</div>
+          <div v-if="deviceTags.length > 0 && form.release_device == 2" class="select_other">
             <el-row>
               <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
               <el-col :span="4">
                 <el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
               </el-col>
             </el-row>
-            <el-tag
-              v-for="tag in deviceTags"
-              :key="tag"
-              closable
-              :disable-transitions="true"
-              :hit="false"
-              color="#cbe3ff"
-              @close="deltTags(tag)"
-            >
-              {{ tag }}
+            <el-tag v-for="tag in deviceTags" :key="tag.device_id" closable :disable-transitions="true" :hit="false" color="#cbe3ff" @close="deltTags(tag)">
+              {{ tag.device_name }}
             </el-tag>
           </div>
         </el-col>
@@ -187,12 +122,7 @@
     </el-form>
     <!-- 第二步：选择内容 - 选择素材 -->
     <div class="release_layer upload_layer">
-      <el-dialog
-        :close-on-click-modal="false"
-        :show-close="false"
-        :visible.sync="selectContVisible"
-        width="1200px"
-      >
+      <el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectContVisible" width="1200px">
         <div slot="title" class="layer_tab_title">
           <span :class="{'active': activeIndex === 0}" @click="tabAll(0)">素材库</span>
           <span :class="{'active': activeIndex === 1}" @click="tabAll(1)">主题库</span>
@@ -200,40 +130,17 @@
         <!-- 素材库 -->
         <div v-if="activeIndex === 0">
           <ul class="tab_item">
-            <li
-              v-for="(item, index) in materialTabItem"
-              :key="index"
-              :class="{'active': activeItemIndex === index}"
-              @click="tab(index)"
-            >{{ item.name }}<span>{{ item.num }}</span>
+            <li v-for="(item, index) in materialTabItem" :key="index" :class="{'active': activeItemIndex === index}" @click="tab(index)">{{ item.name }}<span>{{ item.num }}</span>
             </li>
           </ul>
-          <div class="material_list">
-            <div
-              v-for="(item, index) in listData"
-              :key="index"
-              :class="['material_item', 'item_cont',{ 'item_multi': uploadContentIds.includes(item.id) }]"
-            >
-              <img v-if="item.coverImg" :src="item.coverImg" alt />
-              <div v-if="item.type == 'audio'" class="radio_img"></div>
-              <div class="item_format">
-                <span class="item_type">{{ item.type }}</span>
-                <!-- <span v-if="item.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span> -->
-              </div>
-              <div class="file_name">{{ item.name }}</div>
-              <span v-if="isMultiSelected" class="checked_btn" @click="selectedListItem(item.id, item.type)"></span>
-            </div>
+          <div class="material_list" style="min-height: 260px">
+            <MaterialList ref="MaterialList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" />
           </div>
         </div>
         <!-- 主题库 -->
         <div v-if="activeIndex === 1" class="theme_cont">
           <!-- 主题库list -->
-          <ThemeGalleryList
-            ref="ThemeGalleryList"
-            :is-multi-selected="isMultiSelected"
-            :mulit-text="mulitText"
-            :show-item-info="false"
-          />
+          <ThemeGalleryList ref="ThemeGalleryList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :show-item-info="false" />
         </div>
         <div class="upload_list_right">
           <div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div>
@@ -246,19 +153,11 @@
     </div>
     <!-- 编辑播放内容 -->
     <div class="upload_layer">
-      <el-dialog
-        title="请选择播放内容"
-        :close-on-click-modal="false"
-        :visible.sync="listEditVisible"
-      >
+      <el-dialog title="请选择播放内容" :close-on-click-modal="false" :visible.sync="listEditVisible">
         <div class="total_time">
           内容总时长：3m15s
         </div>
-        <div
-          v-for="(item, index) in selectedData"
-          :key="index"
-          class="edit_material"
-        >
+        <div v-for="(item, index) in selectedEditData" :key="index" class="edit_material">
           <div class="edit_img">
             <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>
@@ -267,67 +166,62 @@
           <div class="edit_cont">
             <div class="edit_cont_base">
               <p>{{ item.material_name }}</p>
-              <span>{{ item.material_type }}</span>
-              <span>{{ item.size }}</span>
+              <span>{{ materialPostfix[index] }}</span>
+              <span>{{ item.file_size | formatBytes }}</span>
             </div>
-            <div v-if="item.material_type == 0" class="edit_cont_set">
+            <!-- <div v-if="item.material_type == 0" class="edit_cont_set"> -->
+            <el-form v-if="item.material_type == 0" :ref="setMaterialForm" :model="setMaterialForm.form" class="edit_cont_set" size="small">
               <div class="set_time">
                 <span>展示时长</span>
-                <el-input v-model="time" type="text" style="width: 66px" />
+                <el-form-item :prop="'form.'+index+'.showTime'" style="width: 100px">
+                  <el-input v-model="item.showTime" type="text" style="width: 66px" />
+                </el-form-item>
                 <em>秒</em>
               </div>
               <div class="set_animation">
                 <span class="set_item">切换动效</span>
-                <el-select v-model="animation" style="width:100px">
-                  <el-option label="无动画" value="0">无动画</el-option>
-                  <el-option label="动画1" value="1">动画1</el-option>
-                  <el-option label="动画2" value="2">动画2</el-option>
-                </el-select>
+                <el-form-item :prop="'form.'+index+'.showAnimation'" style="width: 100px">
+                  <el-select v-model="item.showAnimationName" size="small" class="filter-item" value-key="name" @change="selectAnimation($event, item)">
+                    <el-option v-for="items in animationData" :key="items.key" :label="items.name" :value="items" />
+                  </el-select>
+                </el-form-item>
               </div>
               <div class="set_time set_audio">
                 <span>音频：</span>
-                <p class="audio_name">audio.mp3</p>
+                <p class="audio_name">{{ showAudioName }}</p>
                 <!-- 主题库音频文件不可选择 -->
                 <el-button type="primary" round @click="selectAudioCont">选择文件</el-button>
               </div>
-            </div>
+            </el-form>
+            <!-- </div> -->
             <div v-else class="edit_cont_other">内容时长：{{ item.duration | getSeconds }}</div>
           </div>
         </div>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" round @click="submitForm('form')">保 存</el-button>
+          <el-button type="primary" round @click="editMaterialSubmit()">保 存</el-button>
           <el-button round @click="listEditVisible = false">取 消</el-button>
         </div>
       </el-dialog>
     </div>
     <!-- 素材库 - 音频选择 -->
     <div class="release_layer upload_layer">
-      <el-dialog
-        :close-on-click-modal="false"
-        :show-close="false"
-        :visible.sync="selectAudioVisible"
-        width="1200px"
-      >
+      <el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectAudioVisible" width="1200px">
         <div slot="title" class="layer_tab_title">
           <span class="active">素材库</span>
         </div>
         <div>
           <ul class="tab_item">
-            <li>音频<span>3</span></li>
+            <li>音频<span>{{ audioListData.length }}</span></li>
           </ul>
           <div class="material_list">
-            <div
-              v-for="(item, index) in listData"
-              :key="index"
-              :class="['material_item', 'item_cont',{ 'item_multi': audioChecked === index }]"
-            >
-              <img v-if="item.coverImg" :src="item.coverImg" alt />
-              <div v-if="item.type == 'audio'" class="radio_img"></div>
+            <div v-for="(item, index) in audioListData" :key="index" :class="['material_item', 'item_cont',{ 'item_multi': audioChecked == index }]">
+              <img v-if="item.img_path" :src="item.img_path" alt />
+              <div v-else class="radio_img"></div>
               <div class="item_format">
-                <span class="item_type">{{ item.type }}</span>
-                <span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
+                <span class="item_type">mp3</span>
+                <span class="item_time">{{ item.duration | getSeconds }}</span>
               </div>
-              <div class="file_name">{{ item.name }}</div>
+              <div class="file_name">{{ item.material_name }}</div>
               <span v-if="isMultiSelected" class="checked_btn" @click="audioCheckedHandle(index)"></span>
             </div>
           </div>
@@ -336,29 +230,16 @@
           <div class="mulit_btn" @click="multiSelectBtn('audio')">{{ mulitText }}</div>
         </div>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" round>确 定</el-button>
+          <el-button type="primary" round @click="audioCheckedSubmit">确 定</el-button>
           <el-button round @click="cancelContSelect('audio')">取 消</el-button>
         </div>
       </el-dialog>
     </div>
     <!-- 添加发布的设备 -->
     <div class="add_device_layer">
-      <el-dialog
-        title="请选择设备"
-        :close-on-click-modal="false"
-        :visible.sync="selectDeviceVisible"
-        width="400px"
-      >
-        <el-tag
-          v-for="tag in deviceAllTags"
-          :key="tag"
-          :disable-transitions="true"
-          :hit="false"
-          color="#cbe3ff"
-          class="all_tags"
-          @click="tagHandle(tag)"
-        >
-          {{ tag }}
+      <el-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="selectDeviceVisible" width="400px">
+        <el-tag v-for="tag in deviceAllTags" :key="tag.device_id" :disable-transitions="true" :hit="false" color="#cbe3ff" class="all_tags" @click="tagHandle(tag)">
+          {{ tag.device_name }}
         </el-tag>
       </el-dialog>
     </div>
@@ -368,36 +249,46 @@
 <script>
 import draggable from 'vuedraggable'
 import ThemeGalleryList from '../components/ThemeGalleryList.vue'
-import { getSeconds } from '@/utils/index.js'
+import MaterialList from '../components/MaterialCompontentList.vue'
+import { getMaterialByType } from '@/api/material/material'
+import { ReqDeviceList } from '@/api/device/deviceList.js'
+import { getSeconds, formatBytes } from '@/utils/index.js'
 export default {
   name: 'ImmediateRelease',
   components: {
     draggable,
-    ThemeGalleryList
+    ThemeGalleryList,
+    MaterialList
   },
   filters: {
-    getSeconds(s) {
+    getSeconds (s) {
       return getSeconds(s)
+    },
+    formatBytes (bytes, decimals) {
+      return formatBytes(bytes, decimals)
     }
   },
-  data() {
+  data () {
     return {
-      materialSelected: [], // 从其他页面选择带过来的素材
+      orga_id: '133221333123111',
+      selectedMaterial: [], // 从其他页面选择带过来的素材
+      materialPostfix: [],
       publishType: 0, // 判断是定时发布还是即时发布页面
-      time: 15,
-      audio_name: 'audio.mp3',
-      animation: null,
-      selectDeviceVisible: false,
-      listEditVisible: false,
-      selectContVisible: false,
-      activeIndex: 0,
-      activeItemIndex: 0,
-      selectAudioVisible: false,
-      audioChecked: null,
-      deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
-      deviceTags: [],
+      themeType: null,
+      page: 1,
+      pageSize: 10,
+      audioListData: [], //
+
+      selectDeviceVisible: false, // 设备list - layer
+      deviceAllTags: [], // 设备list
+      deviceTags: [], // 已选择设备list
+      selectContVisible: false, // 选择内容素材/主题 - layer
+      selectAudioVisible: false, // 音频list-layer
+      audioChecked: null, // 音频已选中的
+
       mulitText: '多选',
       isMultiSelected: false,
+
       form: {
         name: '',
         date: null,
@@ -409,6 +300,7 @@ export default {
         actual_end: '', // “实际结束时间 yyyy-MM-dd HH:mm:ss”,
         is_topping: false, // 是否置顶,
         orga_id: '', // "机构id"
+        bgm_main: '',
         relaase_name: '', // 发布名称
         release_cycle: '', // 发布周期 0.无 1.每天 2.每周
         release_weekly: '', // 发布每周 如果设置为每天则为空
@@ -431,44 +323,33 @@ export default {
         release_start: '', // 发布开始时间 yyyy-MM-dd HH:mm:ss
         release_type: '' // 发布类型
       },
-      listData: [
-        {
-          id: '1',
-          name: '1',
-          type: 'JPG',
-          size: '12kb',
-          coverImg: require('@/assets/images/background.jpg'),
-          time: ''
-        },
+      contentIds: [],
+      listEditVisible: false, // 可编辑list素材-layer
+      selectedEditData: [], // 可编辑list内容 - 选择的item
+      showAudioName: '',
+      showAudioUrl: '',
+      // formListData: []
+      setMaterialForm: [],
+      // setMaterialForm: {
+      //   showTime: 15,
+      //   showAnimation: 0,
+      //   showAnimationName: ''
+      // },
+      animationData: [
         {
-          id: '2',
-          name: '2',
-          type: 'JPG',
-          size: '12kb',
-          coverImg: require('@/assets/images/background.jpg'),
-          time: ''
+          key: '0',
+          name: '无动画'
         },
         {
-          id: '3',
-          name: '4',
-          type: 'VEDIO',
-          size: '12kb',
-          coverImg: require('@/assets/images/background.jpg'),
-          time: '03:00'
+          key: '1',
+          name: '动画1'
         },
         {
-          id: '4',
-          name: '4',
-          type: 'audio',
-          size: '12kb',
-          coverImg: '',
-          time: '01:20'
+          key: '2',
+          name: '动画2'
         }
       ],
-      contentIds: [],
-      uploadContentIds: [],
-      selectedData: [], // 选择内容 - 选择的item
-      materialTabItem: [
+      materialTabItem: [ // 素材库 - tab切换title
         {
           key: 1,
           name: '全部',
@@ -489,22 +370,32 @@ export default {
           name: '音频',
           num: '1'
         }
-      ]
+      ],
+      activeIndex: 0,
+      activeItemIndex: 0,
+      uploadContentIds: [] // 素材 / 主题库已选择的
     }
   },
   computed: {
-    changePlaceholder() {
+    changePlaceholder () {
       return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01'
     },
-    defaultImg() {
+    defaultImg () {
       return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
     }
   },
-  created() {
-    this.materialSelected = JSON.parse(localStorage.getItem('selectedMaterial'))
-    console.log(this.materialSelected)
+  created () {
+    this.selectedMaterial = JSON.parse(localStorage.getItem('selectedMaterial'))
+    console.log(this.selectedMaterial)
+    // 素材类型格式处理
+    this.selectedMaterial.forEach((item, key) => {
+      this.materialPostfix[key] = item.deposit_url.substring(
+        item.deposit_url.lastIndexOf('.') + 1,
+        item.deposit_url.length
+      )
+    })
   },
-  mounted() {
+  mounted () {
     console.log(this.$route.query.tag)
     if (this.$route.path === '/release') {
       this.materialTabItem.pop()
@@ -512,53 +403,228 @@ export default {
     if (this.$route.query.tag) {
       this.publishType = this.$route.query.tag
     }
+    this.ReqDeviceList()
   },
   methods: {
     // 发布提交
-    releaseSubmit() {
+    releaseSubmit () {
       console.log(this.form)
       console.log(this.form.relaase_name)
       console.log(this.form.release_start)
       console.log(this.form.is_topping)
+      console.log(this.form.release_device)
+      if (this.form.release_device == 1) {
+        this.form.release_deviceDTOs = []
+      } else {
+        if (this.deviceTags.length == 0) {
+          this.$message.error('请选择设备 ！')
+          return
+        }
+        this.form.release_deviceDTOs = this.deviceTags.map(item => {
+          const json = {}
+          json.device_id = item.device_id
+          return json
+        })
+      }
+      console.log(this.form.release_deviceDTOs)
+      this.form.release_type = this.publishType
+      console.log(this.form.release_type)
+      this.form.release_end = this.publishType ? '' : this.form.release_start
+      console.log(this.form.release_end)
+      console.log('-----------------------------')
+      console.log(this.selectedMaterial)
+      console.log('-----------------------------')
+      console.log("看这里这里")
+      console.log(this.selectedEditData)
+      console.log(this.selectedMaterial)
+      console.log("看这里这里")
+      this.form.release_materialDTOs = this.selectedMaterial.map(item => {
+        const json = {}
+        if (item.material_type == 0 && (item.showTime || item.showAnimationName || item.showAnimation)) {
+          json.duration = item.showTime
+          json.effect = item.showAnimation
+          json.bgm_path = ''
+        } else {
+          json.duration = 0
+          json.effect = 0
+          json.bgm_path = null
+        }
+        json.material_id = item.material_id
+        json.material_name = item.material_name
+        json.img_path = item.img_path
+        json.file_size = item.file_size
+        json.rm_id = null
+        return json
+      })
       console.log(this.form.release_materialDTOs)
+      console.log("看这里release_materialDTOs")
+      const isBgm = this.selectedMaterial.find(item => {
+        return item.material_type == 2
+      })
+      console.log(this.form.bgm_main)
     },
-
-    selectEdit() {
-      this.listEditVisible = true
-      // console.log(this.selectedData)
+    // 获取设备列表
+    ReqDeviceList () {
+      const params = {
+        device_id: '',
+        device_name: '',
+        is_state: '',
+        page: 1,
+        size: 10
+      }
+      ReqDeviceList(params).then(res => {
+        if (res.code == 200) {
+          this.deviceAllTags = res.data.content
+          // this.total = res.data.totalElements
+          // this.queryInfo.size = res.data.size
+        } else {
+          return this.$message.error('获取设备列表失败！')
+        }
+      })
+    },
+    // 设备list - show
+    addDeviceTag () {
+      this.selectDeviceVisible = true
+    },
+    // 设备选中list
+    tagHandle (tag) {
+      if (this.deviceTags.length == 0) {
+        this.deviceTags.push(tag)
+      } else {
+        const result = this.deviceTags.find((item) => {
+          return item == tag
+        })
+        if (!result) {
+          this.deviceTags.push(tag)
+        } else {
+          this.$message.error('已选择过了~')
+        }
+      }
     },
-    dragEnd() {
-      // console.log(this.listData)
-      // console.log(this.selectedData)
+    // 删除已选择的设备
+    deltTags (tag) {
+      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
     },
-    selectDelt(id, i) {
+    // 清空已选择的设备
+    clearDevice () {
+      this.deviceTags = []
+    },
+    // 根据素材类型获取素材
+    getMaterialByType () {
+      const params = {
+        'theme_name': '',
+        'theme_type': this.themeType,
+        'theme_type_not': '',
+        'orga_id': this.orga_id,
+        'page': this.page,
+        'size': this.pageSize
+      }
+      getMaterialByType(params).then(res => {
+        if (res.code == 200) {
+          this.audioListData = res.data.content
+          // 素材类型格式处理
+          this.audioListData.forEach((item, key) => {
+            this.materialPostfix[key] = item.deposit_url.substring(
+              item.deposit_url.lastIndexOf('.') + 1,
+              item.deposit_url.length
+            )
+          })
+        } else {
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          })
+        }
+      })
+    },
+    // 删除选择的素材
+    selectDelt (id, i) {
       const index = this.contentIds.indexOf(id)
       this.contentIds.splice(index, 1)
-      this.selectedData.splice(index, 1)
-      this.listSelectedData.splice(i, 1)
+      this.selectedEditData.splice(index, 1)
+      this.selectedMaterial.splice(i, 1)
     },
-    selectedItem(id, item) {
+    // 选中可编辑的
+    clickMaterialItem (id, item) {
       const arr = this.contentIds
       if (arr.includes(id)) {
         const index = arr.indexOf(id)
         if (index > -1) {
           arr.splice(index, 1)
-          this.selectedData.splice(index, 1)
+          this.selectedEditData.splice(index, 1)
         }
       } else {
         this.contentIds.push(id)
-        this.selectedData.push(item)
+        this.selectedEditData.push(item)
+      }
+
+    },
+    // 编辑-已选择的
+    selectEdit () {
+      this.listEditVisible = true
+      let form = {
+        showTime: 15,
+        showAnimation: '',
+        showAnimationName: ''
+      }
+      this.selectedEditData.map((item, index) => {
+        if (item.material_type == 0) {
+          this.setMaterialForm.push(form)
+        }
+      })
+    },
+    dragEnd () {
+      // console.log(this.selectedEditData)
+      // console.log(this.selectedMaterial)
+    },
+    // 选择音频
+    selectAudioCont () {
+      this.isMultiSelected = false
+      this.mulitText = '选择'
+      this.selectAudioVisible = true
+      this.themeType = 2
+      this.getMaterialByType()
+    },
+    // 音频选中-单选
+    audioCheckedHandle (index) {
+      if (index != this.audioChecked) {
+        this.audioChecked = index
+      } else {
+        this.audioChecked = -1
       }
     },
+    audioCheckedSubmit () {
+      this.selectAudioVisible = false
+      if (this.audioChecked != -1) {
+        const index = this.audioChecked
+        this.showAudioName = this.audioListData[index].material_name
+        this.showAudioUrl = this.audioListData[index].deposit_url
+      } else {
+        this.showAudioName = ''
+        this.showAudioUrl = ''
+      }
+    },
+    // 动画切换
+    selectAnimation (event, item) {
+      console.log(event)
+      console.log(item)
+      console.log(event.key + ".." + event.name)
+      item.showAnimationName = event.name
+      item.showAnimation = event.key
+    },
+    // 提交 - 编辑素材
+    editMaterialSubmit () {
+      this.listEditVisible = false
+    },
     // 多选btn
-    multiSelectBtn(type) {
+    multiSelectBtn (type) {
       this.isMultiSelected = !this.isMultiSelected
       if (this.isMultiSelected) {
         this.mulitText = '取消'
       } else {
-        if (type === 'audio') {
+        if (type == 'audio') {
           this.mulitText = '选择'
-          this.audioChecked = null
+          this.audioChecked = -1
         } else {
           this.mulitText = '多选'
           this.uploadContentIds = []
@@ -566,7 +632,7 @@ export default {
       }
     },
     // 多选选中
-    selectedListItem(id) {
+    selectedListItem (id) {
       const arr = this.uploadContentIds
       if (arr.includes(id)) {
         const index = arr.indexOf(id)
@@ -577,58 +643,31 @@ export default {
         this.uploadContentIds.push(id)
       }
     },
-    // 设备选择
-    addDeviceTag() {
-      this.selectDeviceVisible = true
-    },
-    tagHandle(tag) {
-      console.log(tag)
-      this.deviceTags.push(tag)
-    },
-    // 删除已选择的设备
-    deltTags(tag) {
-      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
-      console.log(this.deviceTags)
-    },
-    // 清空已选择的设备
-    clearDevice() {
-      this.deviceTags = []
-    },
     // 选择内容-素材库/主题库 tab
-    tabAll(index) {
+    tabAll (index) {
       this.activeIndex = index
       this.activeItemIndex = 0
       this.isMultiSelected = false
       this.mulitText = '多选'
       this.uploadContentIds = []
     },
-    tab(index) {
+    tab (index) {
       this.activeItemIndex = index
     },
     // 时间设置-切换到每天时
-    clearCheckbox() {
+    clearCheckbox () {
       if (this.form.timePeriod === '每天') {
         this.form.onweek = []
       }
     },
-    // 选择音频
-    selectAudioCont() {
-      this.isMultiSelected = false
-      this.mulitText = '选择'
-      this.selectAudioVisible = true
-    },
-    // 音频选中-单选
-    audioCheckedHandle(index) {
-      this.audioChecked = index
-      console.log(this.audioChecked)
-    },
+
     // 素材选择 - 取消按钮
-    cancelContSelect(type) {
+    cancelContSelect (type) {
       this.isMultiSelected = false
-      if (type === 'audio') {
+      if (type == 'audio') {
         this.selectAudioVisible = false
         this.mulitText = '选择'
-        this.audioChecked = null
+        this.audioChecked = -1
       } else {
         this.selectContVisible = false
         this.mulitText = '多选'
@@ -694,40 +733,40 @@ export default {
   }
 }
 
-.step_1{
+.step_1 {
   font-size: 16px;
   line-height: 54px;
   border-bottom: 1px solid #eee;
 }
 .set_weekly {
-  ::v-deep .el-form-item__label{
+  ::v-deep .el-form-item__label {
     line-height: 40px;
   }
 }
 .no_margin {
   margin: 0;
 }
-.weekly_margin{
+.weekly_margin {
   margin: 0 0 6px 100px;
-  ::v-deep .el-form-item__error{
+  ::v-deep .el-form-item__error {
     top: 70%;
   }
 }
-.step_select{
+.step_select {
   display: flex;
   font-size: 14px;
   margin-bottom: 20px;
-  div{
+  div {
     margin-right: 30px;
   }
-  .step_select_audio{
+  .step_select_audio {
     margin-left: 5px;
     padding: 5px;
   }
 }
-.step_select_list{
+.step_select_list {
   display: flex;
-  .step_upload{
+  .step_upload {
     width: 164px;
     height: 172px;
     margin-right: 16px;
@@ -737,26 +776,26 @@ export default {
     border-radius: 6px;
   }
 }
-.material_item{
+.material_item {
   position: relative;
-  .select_delt{
+  .select_delt {
     position: absolute;
     top: 12px;
     right: 12px;
-    .font-icon{
+    .font-icon {
       width: 19px;
       height: 19px;
     }
   }
-  .select_edit{
+  .select_edit {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 44px;
-    background: rgba(0,0,0,.5);
+    background: rgba(0, 0, 0, 0.5);
     text-align: center;
-    .font-icon{
+    .font-icon {
       width: 16px;
       height: 17px;
       margin-top: 12px;
@@ -764,44 +803,44 @@ export default {
   }
 }
 
-.step_form{
+.step_form {
   padding-top: 30px;
-  .select_all_tip{
+  .select_all_tip {
     margin: -20px 0 0 0;
   }
-  .select_other{
+  .select_other {
     margin: -20px 0 0 0;
   }
 }
 
-.drag_list{
+.drag_list {
   display: flex;
   flex-wrap: wrap;
 }
-.upload_return{
+.upload_return {
   color: #8ebcfe;
 }
-.total_time{
+.total_time {
   position: absolute;
   top: 72px;
   right: 24px;
   font-size: 14px;
   color: #000;
 }
-.edit_material{
+.edit_material {
   display: flex;
   padding: 12px 0;
   border-bottom: 1px solid #f2f6fd;
-  &:nth-last-child(2){
+  &:nth-last-child(2) {
     border-bottom: none;
   }
-  .edit_img{
+  .edit_img {
     position: relative;
     width: 58px;
     height: 77px;
     border-radius: 4px;
     overflow: hidden;
-    img{
+    img {
       display: block;
       width: 100%;
       height: 100%;
@@ -812,7 +851,7 @@ export default {
       background: url(~@/assets/images/t-yp.png) no-repeat #b3e8fa center;
       background-size: 40px 40px;
     }
-    span{
+    span {
       position: absolute;
       top: -1px;
       left: -1px;
@@ -823,41 +862,40 @@ export default {
       text-align: center;
       color: #fff;
       line-height: 14px;
-
     }
   }
-  &:nth-child(odd){
-    .edit_img{
-      span{
-         background: url(~@/assets/images/num_bg2.png) no-repeat;
-      background-size: 20px 14px;
+  &:nth-child(odd) {
+    .edit_img {
+      span {
+        background: url(~@/assets/images/num_bg2.png) no-repeat;
+        background-size: 20px 14px;
       }
     }
   }
-  &:nth-child(even){
-    .edit_img{
-      span{
-         background: url(~@/assets/images/num_bg1.png) no-repeat;
-      background-size: 20px 14px;
+  &:nth-child(even) {
+    .edit_img {
+      span {
+        background: url(~@/assets/images/num_bg1.png) no-repeat;
+        background-size: 20px 14px;
       }
     }
   }
 
-  .edit_cont{
+  .edit_cont {
     display: flex;
-    flex-direction: column ;
+    flex-direction: column;
     justify-content: space-between;
     flex: 1;
     padding: 10px 0 8px 0;
     font-size: 14px;
     margin-left: 25px;
-    .edit_cont_base{
+    .edit_cont_base {
       display: flex;
-      p{
+      p {
         margin-right: 14px;
         color: #000;
       }
-      span{
+      span {
         display: inline-block;
         padding: 0 5px;
         margin-right: 8px;
@@ -868,63 +906,71 @@ export default {
         border-radius: 2px;
       }
     }
-    .edit_cont_set{
+    .edit_cont_set {
       display: flex;
       font-size: 12px;
       color: #666;
+      height: 26px;
       line-height: 26px;
-      .set_time{
+      .set_time {
         display: flex;
         margin-right: 30px;
-        span{
+        span {
           margin-right: 8px;
         }
-        em{
+        em {
           display: block;
-           margin-left: 8px;
+          margin-left: 8px;
           font-style: normal;
         }
       }
-      .set_animation{
+      .set_animation {
         display: flex;
         margin-right: 30px;
-        span.set_item{
+        span.set_item {
           margin-right: 8px;
         }
+        ::v-deep .el-form-item__content {
+          height: 28px;
+        }
+        ::v-deep .el-input__suffix {
+          height: 26px;
+        }
       }
-      .set_audio{
-        .audio_name{
+      .set_audio {
+        flex: 1;
+        .audio_name {
           margin-right: 10px;
         }
-        ::v-deep .el-button--small{
+        ::v-deep .el-button--small {
           padding: 0 15px;
           border: none;
         }
       }
-      ::v-deep .el-input__inner{
+      ::v-deep .el-input__inner {
         text-align: center;
         height: 27px;
         line-height: 27px;
       }
-      ::v-deep .el-input__icon{
+      ::v-deep .el-input__icon {
         line-height: 27px;
       }
     }
-    .edit_cont_other{
+    .edit_cont_other {
       line-height: 27px;
       font-size: 12px;
       color: #666;
     }
   }
 }
-.release_layer{
-  ::v-deep .el-dialog__header{
+.release_layer {
+  ::v-deep .el-dialog__header {
     padding: 0;
     height: 60px;
   }
-  .layer_tab_title{
+  .layer_tab_title {
     display: flex;
-    span{
+    span {
       position: relative;
       display: block;
       margin-right: 32px;
@@ -932,10 +978,10 @@ export default {
       font-size: 18px;
       color: #666;
       cursor: pointer;
-      &.active{
+      &.active {
         color: #333;
       }
-      &.active::after{
+      &.active::after {
         content: "";
         position: absolute;
         left: 0;
@@ -946,32 +992,32 @@ export default {
       }
     }
   }
-  .tab_item{
+  .tab_item {
     display: flex;
     font-size: 14px;
     color: #666;
     margin: -14px 0 16px 0;
-    li{
+    li {
       margin-right: 30px;
       cursor: pointer;
-      span{
+      span {
         display: inline-block;
         margin-left: 4px;
       }
-      &.active{
+      &.active {
         color: #3a8aeb;
       }
     }
   }
-  .material_list{
+  .material_list {
     display: flex;
     flex-wrap: wrap;
-    .item_cont{
+    .item_cont {
       margin: 0 24px 20px 0;
     }
   }
 }
-.theme_cont{
+.theme_cont {
   ::v-deep .el-tabs__header {
     padding: 0;
     margin-bottom: 0;
@@ -979,15 +1025,14 @@ export default {
 }
 
 .release_layer {
-  ::v-deep .el-tabs{
+  ::v-deep .el-tabs {
     margin: -26px 0 8px 0;
   }
-  ::v-deep .el-tabs__nav-wrap::after{
+  ::v-deep .el-tabs__nav-wrap::after {
     display: none;
   }
-  ::v-deep .el-tabs__active-bar{
+  ::v-deep .el-tabs__active-bar {
     display: none;
   }
 }
-
 </style>
diff --git a/src/views/materialContent/index.vue b/src/views/materialContent/index.vue
index 47b4f1c..04e6466 100644
--- a/src/views/materialContent/index.vue
+++ b/src/views/materialContent/index.vue
@@ -2,14 +2,7 @@
   <div class="app-container">
     <div class="content_warp">
       <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="全部" name="first">
-          <MaterialList
-            ref="MaterialList"
-            :is-multi-selected="isMultiSelected"
-            :mulit-text="mulitText"
-            @changedMultiSelected="changedMultiSelected"
-          />
-        </el-tab-pane>
+        <el-tab-pane label="全部" name="first" />
         <el-tab-pane name="second">
           <span slot="label">
             图片
@@ -32,6 +25,7 @@
           yinp
         </el-tab-pane>
       </el-tabs>
+      <MaterialList ref="MaterialList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" @changedMultiSelected="changedMultiSelected" />
     </div>
     <div class="material_btn">
       <el-button round type="primary" @click="handleUpload">上传列表</el-button>
@@ -45,31 +39,26 @@ import MaterialList from './materialList/index'
 export default {
   name: 'MaterialContent',
   components: { MaterialList },
-  data() {
+  data () {
     return {
-      activeName: 'first',
+      activeIndex: 0,
       isMultiSelected: false,
       mulitText: '多选'
     }
   },
   methods: {
-    handleClick(tab, event) {
-      console.log(tab, event)
+    handleClick (tab) {
+      console.log(tab.index)
     },
-    handleUpload() {
+    handleUpload () {
       this.$refs.MaterialList.UploadList()
     },
-    multiSelectBtn() {
+    multiSelectBtn () {
       this.isMultiSelected = !this.isMultiSelected
-      if (this.isMultiSelected) {
-        this.mulitText = '取消'
-      } else {
-        this.mulitText = '多选'
-      }
-      // this.$refs.MaterialList.multiSelectList()
+      this.mulitText = this.isMultiSelected ? '取消' : '多选'
     },
     // 有选择中的文件夹时，同时存在素材多选操作时，素材多选操作取消
-    changedMultiSelected() {
+    changedMultiSelected () {
       if (this.isMultiSelected) {
         this.isMultiSelected = false
         this.mulitText = '多选'
diff --git a/src/views/materialContent/materialList/index.vue b/src/views/materialContent/materialList/index.vue
index de5f05c..7e8d0f8 100644
--- a/src/views/materialContent/materialList/index.vue
+++ b/src/views/materialContent/materialList/index.vue
@@ -26,11 +26,7 @@
         <span v-if="folderChecked == index" class="checked_btn"></span>
       </div>
       <!-- 素材库list -->
-      <div
-        v-for="(item, index) in materialList"
-        :key="'list-'+index"
-        :class="['material_item', 'item_cont', { 'item_multi': selectedList.includes(item.material_id) }]"
-      >
+      <div v-for="(item, index) in materialList" :key="'list-'+index" :class="['material_item', 'item_cont', { '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.material_type == 2" class="radio_img"></div>
         <div class="item_format">
@@ -38,27 +34,17 @@
           <span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span>
         </div>
         <div class="file_name">{{ item.material_name }}</div>
-        <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.material_id, item.in_folder_id, item.material_type)"></span>
+        <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span>
       </div>
     </div>
 
     <!-- 创建文件夹layer / 编辑 -->
     <div class="publish_layer">
-      <el-dialog
-        :title="layerTitle"
-        :close-on-click-modal="false"
-        :show-close="false"
-        :visible.sync="mkdirVisible"
-        width="616px"
-      >
+      <el-dialog :title="layerTitle" :close-on-click-modal="false" :show-close="false" :visible.sync="mkdirVisible" width="616px">
         <el-form ref="folderForm" :inline="true" :model="folderForm" size="small" label-width="100px">
-          <el-form-item
-            :label="labelTxt"
-            prop="name"
-            :rules="[
+          <el-form-item :label="labelTxt" prop="name" :rules="[
               { required: true, message: '请输入名称', trigger: 'blur' }
-            ]"
-          >
+            ]">
             <el-input v-model="folderForm.name" style="width: 336px" />
           </el-form-item>
           <el-form-item v-if="formatType != 0" label="封面">
@@ -74,26 +60,17 @@
     </div>
 
     <!-- 多选操作 -->
-    <div v-if="selectedList.length != 0 || folderChecked != -1" class="multi_handle">
-      <div v-if="isEditFolder != true && folderChecked == -1 && isMultiSelected">
+    <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>
-        <el-button
-          type="button"
-          class="mulit_btn"
-          :disabled="selectedList.length > 1"
-          @click="editContent()"
-        >编辑</el-button>
+        <el-button type="button" class="mulit_btn" :disabled="selectedListId.length > 1" @click="editContent()">编辑</el-button>
         <el-button type="button" class="mulit_btn">下载</el-button>
         <el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button>
         <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMyMaterial">删除</el-button>
       </div>
       <div v-else>
-        <el-button
-          type="button"
-          class="mulit_btn"
-          @click="handleMkdir(1)"
-        >编辑</el-button>
+        <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>
@@ -101,21 +78,9 @@
     <!-- 移动至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"
-      >
+      <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)"
-          >
+          <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>
@@ -132,15 +97,15 @@
 </template>
 
 <script>
-import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial, deleteMyMaterial, moveMyMaterial } from '@/api/material/material'
+import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial, deleteMyMaterial, moveMyMaterial, getMaterialByType } from '@/api/material/material'
 import Upload from '../../components/upload'
 import UploadCover from '../../components/upload_cover'
 import { getSeconds } from '@/utils/index.js'
 export default {
-  name: 'MaterialList',
+  name: 'Material',
   components: { Upload, UploadCover },
   filters: {
-    getSeconds(s) {
+    getSeconds (s) {
       return getSeconds(s)
     }
   },
@@ -150,7 +115,7 @@ export default {
       required: true
     }
   },
-  data() {
+  data () {
     return {
       orga_id: '133221333123111', // 机构ID
       rootFolderId: null, // 根目录文件夹ID
@@ -176,12 +141,12 @@ export default {
       materialDuration: 0, // 时长
       materialName: '', // 素材名称
       uploadFileUrl: null, // 素材保存路径
-      selectedList: [], // 素材选中的material_id
+      selectedMaterial: [], // 素材选中
+      selectedListId: [], // 素材选中的material_id
       selectinFolderid: [], // 素材选中的和文件关联表id -- in_folder_id
       layerTitle: '创建文件夹', // 文件夹/素材编辑框title
       labelTxt: '文件夹名称',
       isToFolder: false, // 是否进入文件夹
-      isToFolderRouter: null,
       currentFolder: '', // 当前进入的文件夹名
       currentFolderId: null,
       movingVisible: false,
@@ -192,19 +157,18 @@ export default {
     }
   },
   computed: {
-    defaultImg() {
+    defaultImg () {
       return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
     }
   },
   watch: {
-    isMultiSelected(newName, oldName) {
+    isMultiSelected (newName, oldName) {
       console.log('newName', newName)
       if (newName === false) {
-        this.selectedList = []
+        this.selectedListId = []
       }
-      this.isPropMultiSelected = newName
     },
-    '$route.query.folderTag'(Val) {
+    '$route.query.folderTag' (Val) {
       console.log(Val)
       // if (Val) {
       //   this.isToFolder = true
@@ -213,14 +177,14 @@ export default {
       // }
     }
   },
-  mounted: function() {
+  mounted: function () {
     console.log(this.$route.query.folderTag)
     this.getMaterialList()
     document.addEventListener('click', this.hiddenFolderActiveClick)
   },
   methods: {
     // 获取素材库list
-    getMaterialList() {
+    getMaterialList () {
       let params
       if (this.$route.query.folderTag) {
         console.log('文件夹内')
@@ -264,7 +228,7 @@ export default {
       })
     },
     // 新建 / 编辑 文件夹
-    handleMkdir(mkdirType) {
+    handleMkdir (mkdirType) {
       this.mkdirVisible = true
       this.folderForm.fid = this.thisFoldId
       this.folderForm.orga_id = this.orga_id
@@ -282,7 +246,7 @@ export default {
       }
     },
     // 文件夹双击操作
-    floderDbClick(item, index) {
+    floderDbClick (item, index) {
       this.isEditMaterial = false
       this.$router.replace(
         {
@@ -294,19 +258,19 @@ export default {
       localStorage.setItem('currentFolder', this.currentFolder)
       localStorage.setItem('currentFolderId', this.currentFolderId)
       this.getMaterialList()
-      this.selectedList = []
+      this.selectedListId = []
       this.folderChecked = -1
       this.isEditFolder = false
     },
     // 点击其他区域选中的文件夹 去掉选中样式
-    hiddenFolderActiveClick() {
+    hiddenFolderActiveClick () {
       this.folderChecked = -1
       this.isEditFolder = false
     },
     // 选择 编辑 文件夹
-    editFolder(item, index) {
+    editFolder (item, index) {
       this.isEditMaterial = false
-      this.selectedList = []
+      this.selectedListId = []
       // 有选择中的文件夹时，同时存在素材多选操作时
       this.$emit('changedMultiSelected')
       if (index != this.folderChecked) {
@@ -325,7 +289,7 @@ export default {
       }
     },
     // 删除 文件夹
-    deleteMaterialFolder() {
+    deleteMaterialFolder () {
       this.$confirm('此操作将永久删除该文件夹, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -353,7 +317,7 @@ export default {
       })
     },
     // 提交表单 - 新建/编辑
-    submitForm(formName) {
+    submitForm (formName) {
       this.folderForm.img_path = this.$refs.childUpload.imageUrl
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -381,21 +345,23 @@ export default {
       })
     },
     // 重置表单
-    resetForm() {
+    resetForm () {
       // 强制重置folderForm表单
       // Object.assign(this.$data.folderForm, this.$options.data.call(this).folderForm)
       this.mkdirVisible = false
     },
     // 选择素材 - to 即时发布/定时发布
-    publishHandle(index) {
+    publishHandle (index) {
       this.$router.push(
         {
           path: '/release', query: { tag: index }
         }
       )
+      localStorage.removeItem('selectedMaterial')
+      localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
     },
     // 素材 - 编辑
-    editContent() {
+    editContent () {
       this.mkdirVisible = true
       this.labelTxt = '文件名称'
       this.isEditMaterial = true
@@ -407,7 +373,7 @@ export default {
         this.layerTitle = '图片编辑'
       }
       const checkedMaterial = this.materialList.filter(item => {
-        return item.material_id == this.selectedList[0]
+        return item.material_id == this.selectedListId[0]
       })
       this.materialId = checkedMaterial[0].material_id
       this.folderForm.name = checkedMaterial[0].material_name
@@ -416,9 +382,10 @@ export default {
       this.materialImgPath = checkedMaterial[0].img_path
     },
     // 上传素材
-    saveMaterial() {
+    saveMaterial () {
       if (!this.isEditMaterial) {
         console.log('新增')
+        console.log(this.$refs.uploadMaterial.fileSize)
         const formatType = this.$refs.uploadMaterial.formatType
         this.uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
         const duration = this.$refs.uploadMaterial.duration
@@ -449,7 +416,7 @@ export default {
       setTimeout(() => {
         const params = {
           'class_ids': [
-          // 素材类id集合
+            // 素材类id集合
           ],
           'deposit_url': this.uploadFileUrl, // 素材存放路径
           'device_direction': 1, // 横竖屏 1.横屏 2.竖屏,
@@ -459,6 +426,7 @@ export default {
           'img_path': this.materialImgPath, // 封面图片id
           'material_name': this.materialName, // 素材名称
           'material_type': this.formatType, // 素材类别
+          'file_size': this.$refs.uploadMaterial.fileSize, // 文件大小
           'orga_id': this.orga_id, // 机构id
           'store_type': 1 // 库类型 1.素材库 2.主题库
         }
@@ -481,29 +449,34 @@ export default {
       }, 200)
     },
     // 素材 - 多选
-    selectedItem(id, inFolderId, type) {
-      const arr = this.selectedList
+    selectedItem (item) {
+      const id = item.material_id
+      const inFolderId = item.in_folder_id
+      const type = item.material_type
+      const arr = this.selectedListId
       if (arr.includes(id)) {
         const index = arr.indexOf(id)
         if (index > -1) {
           arr.splice(index, 1)
           this.selectinFolderid.splice(index, 1)
+          this.selectedMaterial.splice(index, 1)
         }
       } else {
-        this.selectedList.push(id)
+        this.selectedListId.push(id)
         this.selectinFolderid.push(inFolderId)
+        this.selectedMaterial.push(item)
         this.formatType = type
       }
     },
     // 素材 - 删除
-    deleteMyMaterial() {
+    deleteMyMaterial () {
       this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         const params = {
-          ids: this.selectedList
+          ids: this.selectedListId
         }
         deleteMyMaterial(params).then(res => {
           if (res.code === 200) {
@@ -512,7 +485,7 @@ export default {
               type: 'success'
             })
             this.getMaterialList()
-            this.selectedList = []
+            this.selectedListId = []
           }
         })
       }).catch(() => {
@@ -522,11 +495,11 @@ export default {
         })
       })
     },
-    UploadList() {
+    UploadList () {
       this.uploadListVisible = true
     },
     // 点击-移动btn
-    moveingTo(index) {
+    moveingTo (index) {
       this.folderList = []
       if (this.materialFolders.length > 0) {
         this.folderList = this.materialFolders.slice(0, this.materialFolders.length)
@@ -540,14 +513,13 @@ export default {
       this.movingVisible = true
     },
     // 文件夹list - 选中操作
-    wjjSelected(item, index) {
+    wjjSelected (item, index) {
       this.folderListChecked = index
       this.thisFoldId = item.id
     },
     // 点击确定 - 移动素材
-    moveFile() {
+    moveFile () {
       if (this.materialFolders.length > 0) {
-        console.log(this.materialFolders)
         if (this.thisFoldId == this.rootFolderId) {
           this.$message({
             message: '不能讲文件移动到自身目录下哦~',
@@ -561,7 +533,7 @@ export default {
       const params = {
         'folder_id': this.thisFoldId,
         'ids': this.selectinFolderid,
-        'material_ids': this.selectedList
+        'material_ids': this.selectedListId
       }
       moveMyMaterial(params).then(res => {
         if (res.code === 200) {
@@ -571,14 +543,14 @@ export default {
           })
           this.movingVisible = false
           this.getMaterialList()
-          this.selectedList = []
+          this.selectedListId = []
         }
       })
     },
-    format(percentage) {
+    format (percentage) {
       return percentage === 100 ? '100%' : `${percentage}%`
     },
-    start() {
+    start () {
       const that = this
       that.$nextTick(() => {
         that.progressLoading = true
@@ -591,7 +563,7 @@ export default {
       })
     },
     // 进度条结束
-    end() {
+    end () {
       this.loading_txt = '继续'
       // const that = this
       // that.percentage = 100
@@ -605,9 +577,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.material_crumbs{
+.material_crumbs {
   padding: 0 24px 15px 24px;
-  ::v-deep .el-breadcrumb{
+  ::v-deep .el-breadcrumb {
     font-size: 12px;
     color: #999999;
   }
@@ -636,8 +608,8 @@ export default {
     }
   }
 }
-.upload_layer{
-  ::v-deep .el-dialog__body{
+.upload_layer {
+  ::v-deep .el-dialog__body {
     padding: 0 20px 30px 20px;
   }
 }
@@ -650,8 +622,8 @@ export default {
     }
   }
 }
-.multi_handle{
-  div{
+.multi_handle {
+  div {
     display: flex;
   }
 }