|
|
|
@ -3,7 +3,7 @@ |
|
|
|
<el-form ref="form" :model="form" size="small"> |
|
|
|
<!-- 创建标题 --> |
|
|
|
<el-row class="in_release_item" type="flex" justify="space-between"> |
|
|
|
<el-col :span="3" class="item_title">创建{{ publishType === 0 ? "即时发布" : "定时发布" }}</el-col> |
|
|
|
<el-col :span="3" class="item_title">创建{{ publishType == 0 ? "即时发布" : "定时发布" }}</el-col> |
|
|
|
<el-col :span="18"> |
|
|
|
<div class="input_wrap"> |
|
|
|
<span class="input_label">名称</span> |
|
|
|
@ -27,30 +27,23 @@ |
|
|
|
</el-form-item> |
|
|
|
<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 == 2}]" 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 :label="1">每天</el-radio> |
|
|
|
<el-radio :label="2">每周</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="form.release_cycle === '每周'" :class="{'weekly_margin': form.release_cycle === '每周'}" prop="release_weekly" :rules="[ |
|
|
|
{ required: true, message: '请选择每周开机时间', trigger: 'change' }, |
|
|
|
<el-form-item v-if="form.release_cycle == 2" :class="{'weekly_margin': form.release_cycle == 2}" 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" /> |
|
|
|
<el-checkbox label="周三" name="release_weekly" /> |
|
|
|
<el-checkbox label="周四" name="release_weekly" /> |
|
|
|
<el-checkbox label="周五" name="release_weekly" /> |
|
|
|
<el-checkbox label="周六" name="release_weekly" /> |
|
|
|
<el-checkbox label="周日" name="release_weekly" /> |
|
|
|
<el-checkbox-group v-model="selectWeekly"> |
|
|
|
<el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</el-form-item> |
|
|
|
<!-- :rules="[ |
|
|
|
{ required: true, message: '请选择是否置顶', trigger: 'change' } |
|
|
|
]" --> |
|
|
|
<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> |
|
|
|
</el-col> |
|
|
|
@ -62,7 +55,7 @@ |
|
|
|
<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>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont(0,-1)">选择文件</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="step_select_list"> |
|
|
|
@ -174,7 +167,7 @@ |
|
|
|
<div class="set_time"> |
|
|
|
<span>展示时长</span> |
|
|
|
<el-form-item :prop="'form.'+index+'.showTime'" style="width: 100px"> |
|
|
|
<el-input v-model="item.showTime" type="text" style="width: 66px" /> |
|
|
|
<el-input v-model="item.showTime" type="text" placeholder="15" style="width: 66px" /> |
|
|
|
</el-form-item> |
|
|
|
<em>秒</em> |
|
|
|
</div> |
|
|
|
@ -188,9 +181,9 @@ |
|
|
|
</div> |
|
|
|
<div class="set_time set_audio"> |
|
|
|
<span>音频：</span> |
|
|
|
<p class="audio_name">{{ showAudioName }}</p> |
|
|
|
<p class="audio_name">{{ item.showAudioName }}</p> |
|
|
|
<!-- 主题库音频文件不可选择 --> |
|
|
|
<el-button type="primary" round @click="selectAudioCont">选择文件</el-button> |
|
|
|
<el-button type="primary" round @click="selectAudioCont(1,index)">选择文件</el-button> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<!-- </div> --> |
|
|
|
@ -214,7 +207,7 @@ |
|
|
|
<li>音频<span>{{ audioListData.length }}</span></li> |
|
|
|
</ul> |
|
|
|
<div class="material_list"> |
|
|
|
<div v-for="(item, index) in audioListData" :key="index" :class="['material_item', 'item_cont',{ 'item_multi': audioChecked == index }]"> |
|
|
|
<div v-for="(item, index) in audioListData" :key="index" :class="['material_item', 'item_cont',{ 'item_multi': audioChecked == index }]" @click="audioCheckedHandle(index)"> |
|
|
|
<img v-if="item.img_path" :src="item.img_path" alt /> |
|
|
|
<div v-else class="radio_img"></div> |
|
|
|
<div class="item_format"> |
|
|
|
@ -222,13 +215,13 @@ |
|
|
|
<span class="item_time">{{ item.duration | getSeconds }}</span> |
|
|
|
</div> |
|
|
|
<div class="file_name">{{ item.material_name }}</div> |
|
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="audioCheckedHandle(index)"></span> |
|
|
|
<span v-if="audioChecked == index" class="checked_btn"></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="upload_list_right"> |
|
|
|
<!-- <div class="upload_list_right"> |
|
|
|
<div class="mulit_btn" @click="multiSelectBtn('audio')">{{ mulitText }}</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round @click="audioCheckedSubmit">确 定</el-button> |
|
|
|
<el-button round @click="cancelContSelect('audio')">取 消</el-button> |
|
|
|
@ -252,6 +245,7 @@ import ThemeGalleryList from '../components/ThemeGalleryList.vue' |
|
|
|
import MaterialList from '../components/MaterialCompontentList.vue' |
|
|
|
import { getMaterialByType } from '@/api/material/material' |
|
|
|
import { ReqDeviceList } from '@/api/device/deviceList.js' |
|
|
|
import { saveRelease } from '@/api/release/release.js' |
|
|
|
import { getSeconds, formatBytes } from '@/utils/index.js' |
|
|
|
export default { |
|
|
|
name: 'ImmediateRelease', |
|
|
|
@ -277,26 +271,17 @@ export default { |
|
|
|
themeType: null, |
|
|
|
page: 1, |
|
|
|
pageSize: 10, |
|
|
|
audioListData: [], // |
|
|
|
|
|
|
|
audioListData: [], // 音频list |
|
|
|
isMainBgm: null, //是最外层的bgm还是里面的 |
|
|
|
selectDeviceVisible: false, // 设备list - layer |
|
|
|
deviceAllTags: [], // 设备list |
|
|
|
deviceTags: [], // 已选择设备list |
|
|
|
selectContVisible: false, // 选择内容素材/主题 - layer |
|
|
|
selectAudioVisible: false, // 音频list-layer |
|
|
|
audioChecked: null, // 音频已选中的 |
|
|
|
|
|
|
|
mulitText: '多选', |
|
|
|
isMultiSelected: false, |
|
|
|
|
|
|
|
form: { |
|
|
|
name: '', |
|
|
|
date: null, |
|
|
|
isTop: null, |
|
|
|
deviceSelect: '', |
|
|
|
timePeriod: null, |
|
|
|
onweek: [], |
|
|
|
|
|
|
|
actual_end: '', // “实际结束时间 yyyy-MM-dd HH:mm:ss”, |
|
|
|
is_topping: false, // 是否置顶, |
|
|
|
orga_id: '', // "机构id" |
|
|
|
@ -326,16 +311,9 @@ export default { |
|
|
|
contentIds: [], |
|
|
|
listEditVisible: false, // 可编辑list素材-layer |
|
|
|
selectedEditData: [], // 可编辑list内容 - 选择的item |
|
|
|
showAudioName: '', |
|
|
|
showAudioUrl: '', |
|
|
|
// formListData: [] |
|
|
|
thisEditIndex: null, // 当前音乐选择的index |
|
|
|
setMaterialForm: [], |
|
|
|
// setMaterialForm: { |
|
|
|
// showTime: 15, |
|
|
|
// showAnimation: 0, |
|
|
|
// showAnimationName: '' |
|
|
|
// }, |
|
|
|
animationData: [ |
|
|
|
animationData: [ // 图片素材切换动态 - 编辑动画 |
|
|
|
{ |
|
|
|
key: '0', |
|
|
|
name: '无动画' |
|
|
|
@ -349,6 +327,37 @@ export default { |
|
|
|
name: '动画2' |
|
|
|
} |
|
|
|
], |
|
|
|
selectWeekly: [], |
|
|
|
weeklyList: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
name: '周一' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '周二' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '周三' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
name: '周四' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '5', |
|
|
|
name: '周五' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '6', |
|
|
|
name: '周六' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '7', |
|
|
|
name: '周七' |
|
|
|
} |
|
|
|
], |
|
|
|
materialTabItem: [ // 素材库 - tab切换title |
|
|
|
{ |
|
|
|
key: 1, |
|
|
|
@ -378,7 +387,7 @@ export default { |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
changePlaceholder () { |
|
|
|
return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01' |
|
|
|
return this.publishType == 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01' |
|
|
|
}, |
|
|
|
defaultImg () { |
|
|
|
return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"' |
|
|
|
@ -386,7 +395,6 @@ export default { |
|
|
|
}, |
|
|
|
created () { |
|
|
|
this.selectedMaterial = JSON.parse(localStorage.getItem('selectedMaterial')) |
|
|
|
console.log(this.selectedMaterial) |
|
|
|
// 素材类型格式处理 |
|
|
|
this.selectedMaterial.forEach((item, key) => { |
|
|
|
this.materialPostfix[key] = item.deposit_url.substring( |
|
|
|
@ -396,23 +404,20 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
console.log(this.$route.query.tag) |
|
|
|
if (this.$route.path === '/release') { |
|
|
|
this.materialTabItem.pop() |
|
|
|
} |
|
|
|
if (this.$route.query.tag) { |
|
|
|
this.publishType = this.$route.query.tag |
|
|
|
} |
|
|
|
// 设备list |
|
|
|
this.ReqDeviceList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 发布提交 |
|
|
|
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) |
|
|
|
this.form.orga_id = this.orga_id |
|
|
|
if (this.form.release_device == 1) { |
|
|
|
this.form.release_deviceDTOs = [] |
|
|
|
} else { |
|
|
|
@ -426,24 +431,32 @@ export default { |
|
|
|
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('-----------------------------') |
|
|
|
// 先判断编辑还是新增 |
|
|
|
this.form.actual_end = this.publishType == 0 ? null : '' |
|
|
|
if (this.publishType == 0) { |
|
|
|
this.form.release_cycle = 0 |
|
|
|
this.form.release_weekly = null |
|
|
|
this.form.release_end = this.form.release_start |
|
|
|
} |
|
|
|
if (this.form.release_cycle == 2) { |
|
|
|
this.form.release_weekly = this.selectWeekly.join(',') |
|
|
|
} |
|
|
|
if (this.form.release_start instanceof Array) { |
|
|
|
const arrDate = this.form.release_start |
|
|
|
this.form.release_start = arrDate[0] |
|
|
|
this.form.release_end = arrDate[1] |
|
|
|
} |
|
|
|
console.log("看这里这里") |
|
|
|
console.log(this.selectedEditData) |
|
|
|
console.log(this.selectedMaterial) |
|
|
|
console.log("看这里这里") |
|
|
|
this.form.release_materialDTOs = this.selectedMaterial.map(item => { |
|
|
|
this.form.release_materialDTOs = this.selectedMaterial.map((item, index) => { |
|
|
|
const json = {} |
|
|
|
if (item.material_type == 0 && (item.showTime || item.showAnimationName || item.showAnimation)) { |
|
|
|
json.duration = item.showTime |
|
|
|
json.effect = item.showAnimation |
|
|
|
json.bgm_path = '' |
|
|
|
if (item.material_type == 0) { |
|
|
|
json.duration = (item.showTime || item.showAnimationName || item.showAnimation) ? item.showTime : 15 |
|
|
|
json.effect = (item.showTime || item.showAnimationName || item.showAnimation) ? item.showAnimation : 0 |
|
|
|
json.bgm_path = (item.showAudioName || item.showAudioUrl) ? item.showAudioUrl : null |
|
|
|
} else { |
|
|
|
json.duration = 0 |
|
|
|
json.effect = 0 |
|
|
|
@ -454,14 +467,25 @@ export default { |
|
|
|
json.img_path = item.img_path |
|
|
|
json.file_size = item.file_size |
|
|
|
json.rm_id = null |
|
|
|
json.ranking = index + 1 |
|
|
|
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) |
|
|
|
if (isBgm) { |
|
|
|
this.form.bgm_main = isBgm.deposit_url |
|
|
|
} else { |
|
|
|
this.form.bgm_main = null |
|
|
|
} |
|
|
|
saveRelease(this.form).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.$message.success('发布成功！') |
|
|
|
// this.selectedMaterial = [] |
|
|
|
} else { |
|
|
|
this.$message.error(res.msg) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取设备列表 |
|
|
|
ReqDeviceList () { |
|
|
|
@ -475,8 +499,6 @@ export default { |
|
|
|
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('获取设备列表失败！') |
|
|
|
} |
|
|
|
@ -557,13 +579,12 @@ export default { |
|
|
|
this.contentIds.push(id) |
|
|
|
this.selectedEditData.push(item) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
// 编辑-已选择的 |
|
|
|
selectEdit () { |
|
|
|
this.listEditVisible = true |
|
|
|
let form = { |
|
|
|
showTime: 15, |
|
|
|
showTime: '15', |
|
|
|
showAnimation: '', |
|
|
|
showAnimationName: '' |
|
|
|
} |
|
|
|
@ -578,12 +599,16 @@ export default { |
|
|
|
// console.log(this.selectedMaterial) |
|
|
|
}, |
|
|
|
// 选择音频 |
|
|
|
selectAudioCont () { |
|
|
|
selectAudioCont (type, index) { |
|
|
|
this.audioChecked = -1 |
|
|
|
this.thisEditIndex = index |
|
|
|
this.isMultiSelected = false |
|
|
|
this.mulitText = '选择' |
|
|
|
this.selectAudioVisible = true |
|
|
|
// 根据类型获取素材 - audio - 2 |
|
|
|
this.themeType = 2 |
|
|
|
this.getMaterialByType() |
|
|
|
this.isMainBgm = type == 0 ? 0 : 1 |
|
|
|
}, |
|
|
|
// 音频选中-单选 |
|
|
|
audioCheckedHandle (index) { |
|
|
|
@ -593,22 +618,30 @@ export default { |
|
|
|
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 |
|
|
|
if (!this.isMainBgm) { |
|
|
|
this.selectedMaterial.find((item, key) => { |
|
|
|
if (item.material_type == 2) { |
|
|
|
this.selectedMaterial.splice(key, 1) |
|
|
|
this.audioListData[index].material_type = 2 |
|
|
|
this.selectedMaterial.push(this.audioListData[index]) |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.selectedEditData[this.thisEditIndex].showAudioName = this.audioListData[index].material_name |
|
|
|
this.selectedEditData[this.thisEditIndex].showAudioUrl = this.audioListData[index].deposit_url |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.showAudioName = '' |
|
|
|
this.showAudioUrl = '' |
|
|
|
this.selectedEditData[this.thisEditIndex].showAudioName = '' |
|
|
|
this.selectedEditData[this.thisEditIndex].showAudioUrl = '' |
|
|
|
} |
|
|
|
}, |
|
|
|
// 动画切换 |
|
|
|
selectAnimation (event, item) { |
|
|
|
console.log(event) |
|
|
|
console.log(item) |
|
|
|
console.log(event.key + ".." + event.name) |
|
|
|
item.showAnimationName = event.name |
|
|
|
item.showAnimation = event.key |
|
|
|
}, |
|
|
|
@ -656,18 +689,16 @@ export default { |
|
|
|
}, |
|
|
|
// 时间设置-切换到每天时 |
|
|
|
clearCheckbox () { |
|
|
|
if (this.form.timePeriod === '每天') { |
|
|
|
this.form.onweek = [] |
|
|
|
if (this.form.release_cycle == 2) { |
|
|
|
this.selectWeekly = [] |
|
|
|
this.form.release_weekly = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 素材选择 - 取消按钮 |
|
|
|
cancelContSelect (type) { |
|
|
|
this.isMultiSelected = false |
|
|
|
if (type == 'audio') { |
|
|
|
this.selectAudioVisible = false |
|
|
|
this.mulitText = '选择' |
|
|
|
this.audioChecked = -1 |
|
|
|
} else { |
|
|
|
this.selectContVisible = false |
|
|
|
this.mulitText = '多选' |
|
|
|
@ -910,8 +941,8 @@ export default { |
|
|
|
display: flex; |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
height: 26px; |
|
|
|
line-height: 26px; |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
.set_time { |
|
|
|
display: flex; |
|
|
|
margin-right: 30px; |
|
|
|
|
