|
|
@ -1,5 +1,6 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="app-container"> |
|
|
<div class="app-container"> |
|
|
|
|
|
<el-form ref="form" :model="form" size="small"> |
|
|
<el-row class="in_release_item" type="flex" justify="space-between"> |
|
|
<el-row class="in_release_item" type="flex" justify="space-between"> |
|
|
<el-col :span="3" class="item_title">创建即时发布</el-col> |
|
|
<el-col :span="3" class="item_title">创建即时发布</el-col> |
|
|
<el-col :span="18"> |
|
|
<el-col :span="18"> |
|
|
@ -13,32 +14,289 @@ |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col :span="4" class="release_right"> |
|
|
<el-col :span="4" class="release_right"> |
|
|
<el-button round class="release_btn">发布</el-button> |
|
|
|
|
|
|
|
|
<el-button |
|
|
|
|
|
round |
|
|
|
|
|
class="release_btn" |
|
|
|
|
|
:loading="crud.status.cu === 2" |
|
|
|
|
|
type="primary" |
|
|
|
|
|
@click="crud.submitCU" |
|
|
|
|
|
>发布</el-button> |
|
|
<el-button round type="primary">关闭</el-button> |
|
|
<el-button round type="primary">关闭</el-button> |
|
|
</el-col> |
|
|
</el-col> |
|
|
</el-row> |
|
|
</el-row> |
|
|
|
|
|
<el-row class="in_release_item"> |
|
|
|
|
|
<el-col class="step_1">第一步：设置时间</el-col> |
|
|
|
|
|
<el-col class="step_form"> |
|
|
|
|
|
<el-form-item |
|
|
|
|
|
label="发布时间" |
|
|
|
|
|
prop="date" |
|
|
|
|
|
:rules="[ |
|
|
|
|
|
{ required: true, message: '请选择发布时间', trigger: 'change' } |
|
|
|
|
|
]" |
|
|
|
|
|
label-width="100px" |
|
|
|
|
|
> |
|
|
|
|
|
<el-date-picker |
|
|
|
|
|
v-model="form.date" |
|
|
|
|
|
type="daterange" |
|
|
|
|
|
range-separator="至" |
|
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
|
end-placeholder="结束日期" |
|
|
|
|
|
/> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
<!-- :rules="[ |
|
|
|
|
|
{ required: true, message: '请选择是否置顶', trigger: 'change' } |
|
|
|
|
|
]" --> |
|
|
|
|
|
<el-form-item |
|
|
|
|
|
label="是否置顶" |
|
|
|
|
|
prop="isTop" |
|
|
|
|
|
label-width="100px" |
|
|
|
|
|
> |
|
|
|
|
|
<el-radio v-model="form.isTop" label="1">置顶</el-radio> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
<el-row class="in_release_item"> |
|
|
|
|
|
<el-col class="step_1">第二步：选择内容</el-col> |
|
|
|
|
|
<el-col class="step_form"> |
|
|
|
|
|
<div class="step_select"> |
|
|
|
|
|
<div>已选内容： 0</div> |
|
|
|
|
|
<div>内容总时长：0.00s</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="step_select_list"> |
|
|
|
|
|
<div class="step_upload"></div> |
|
|
|
|
|
<draggable |
|
|
|
|
|
v-model="listData" |
|
|
|
|
|
class="drag_list" |
|
|
|
|
|
@end="dragEnd" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
v-for="(item, index) in listData" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="['material_item', 'item_cont']" |
|
|
|
|
|
@click="selectedItem(item.id,item)" |
|
|
|
|
|
> |
|
|
|
|
|
<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.type !== 'JPG'" class="item_time">03:00</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="file_name">{{ item.name }}</div> |
|
|
|
|
|
<div v-if="contentIds.includes(item.id)" class="select_handle"> |
|
|
|
|
|
<div class="select_delt" @click.stop="selectDelt(item.id,index)"> |
|
|
|
|
|
<svg class="font-icon icon1" aria-hidden="true"> |
|
|
|
|
|
<use xlink:href="#icon-guanbi2" /> |
|
|
|
|
|
</svg> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="select_edit" @click.stop="selectEdit()"> |
|
|
|
|
|
<svg class="font-icon icon1" aria-hidden="true"> |
|
|
|
|
|
<use xlink:href="#icon-bianji" /> |
|
|
|
|
|
</svg> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</draggable> |
|
|
|
|
|
</div> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
<el-row class="in_release_item"> |
|
|
|
|
|
<el-col class="step_1">第三步：选择设备</el-col> |
|
|
|
|
|
<el-col class="step_form"> |
|
|
|
|
|
<el-form-item |
|
|
|
|
|
label="" |
|
|
|
|
|
prop="deviceSelect" |
|
|
|
|
|
:rules="[ |
|
|
|
|
|
{ required: true, message: '请选择设备', trigger: 'change' }, |
|
|
|
|
|
]" |
|
|
|
|
|
> |
|
|
|
|
|
<el-radio-group v-model="form.deviceSelect"> |
|
|
|
|
|
<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> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
<div v-if="form.deviceSelect === 'all'" class="select_all_tip">所有设备都将被发送</div> |
|
|
|
|
|
<div v-if="deviceTags.length > 0 && form.deviceSelect === 'other'" 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="handleClose(tag)" |
|
|
|
|
|
> |
|
|
|
|
|
{{ tag }} |
|
|
|
|
|
</el-tag> |
|
|
|
|
|
</div> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
</el-form> |
|
|
|
|
|
<div class="upload_layer"> |
|
|
|
|
|
<el-dialog |
|
|
|
|
|
title="请选择播放内容" |
|
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
|
:visible.sync="listEditVisible" |
|
|
|
|
|
width="800px" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
v-for="(item, index) in selectedData" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
class="edit_material" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="edit_img"> |
|
|
|
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt /> |
|
|
|
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div> |
|
|
|
|
|
<span class="">{{ index+1 }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="upload_list_right"> |
|
|
|
|
|
<div class="save_btn">保存</div> |
|
|
|
|
|
<div class="upload_return">取消</div> |
|
|
|
|
|
</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-tag> |
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import crudDept from '@/api/system/dept' |
|
|
import crudDept from '@/api/system/dept' |
|
|
|
|
|
import draggable from 'vuedraggable' |
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
const defaultForm = { |
|
|
const defaultForm = { |
|
|
name: '' |
|
|
|
|
|
|
|
|
name: '', |
|
|
|
|
|
date: [], |
|
|
|
|
|
isTop: null, |
|
|
|
|
|
deviceSelect: '' |
|
|
} |
|
|
} |
|
|
export default { |
|
|
export default { |
|
|
name: 'ImmediateRelease', |
|
|
name: 'ImmediateRelease', |
|
|
|
|
|
components: { |
|
|
|
|
|
draggable |
|
|
|
|
|
}, |
|
|
cruds() { |
|
|
cruds() { |
|
|
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}) |
|
|
|
|
|
|
|
|
return CRUD({ |
|
|
|
|
|
title: '部门', |
|
|
|
|
|
url: 'api/dept', |
|
|
|
|
|
crudMethod: { ...crudDept } |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
|
|
|
|
|
|
selectDeviceVisible: false, |
|
|
|
|
|
listEditVisible: false, |
|
|
|
|
|
deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'], |
|
|
|
|
|
deviceTags: [], |
|
|
|
|
|
listData: [ |
|
|
|
|
|
{ |
|
|
|
|
|
id: '1', |
|
|
|
|
|
name: '1', |
|
|
|
|
|
type: 'JPG', |
|
|
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
|
|
time: '' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: '2', |
|
|
|
|
|
name: '2', |
|
|
|
|
|
type: 'vedio', |
|
|
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
|
|
time: '03:00' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: '3', |
|
|
|
|
|
name: '3', |
|
|
|
|
|
type: 'vedio', |
|
|
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
|
|
time: '03:00' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: '4', |
|
|
|
|
|
name: '4', |
|
|
|
|
|
type: 'vedio', |
|
|
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
|
|
time: '03:00' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: '5', |
|
|
|
|
|
name: '5', |
|
|
|
|
|
type: 'audio', |
|
|
|
|
|
coverImg: '', |
|
|
|
|
|
time: '01:20' |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
contentIds: [], |
|
|
|
|
|
selectedData: [] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
|
|
|
|
|
|
selectEdit() { |
|
|
|
|
|
this.listEditVisible = true |
|
|
|
|
|
// console.log(this.selectedData) |
|
|
|
|
|
}, |
|
|
|
|
|
dragEnd() { |
|
|
|
|
|
// console.log(this.listData) |
|
|
|
|
|
// console.log(this.selectedData) |
|
|
|
|
|
}, |
|
|
|
|
|
selectDelt(id, i) { |
|
|
|
|
|
const index = this.contentIds.indexOf(id) |
|
|
|
|
|
this.contentIds.splice(index, 1) |
|
|
|
|
|
this.selectedData.splice(index, 1) |
|
|
|
|
|
this.listData.splice(i, 1) |
|
|
|
|
|
}, |
|
|
|
|
|
selectedItem(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) |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
this.contentIds.push(id) |
|
|
|
|
|
this.selectedData.push(item) |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
addDeviceTag() { |
|
|
|
|
|
this.selectDeviceVisible = true |
|
|
|
|
|
}, |
|
|
|
|
|
tagHandle(tag) { |
|
|
|
|
|
console.log(tag) |
|
|
|
|
|
this.deviceTags.push(tag) |
|
|
|
|
|
}, |
|
|
|
|
|
handleClose(tag) { |
|
|
|
|
|
this.deviceTags.splice(this.deviceTags.indexOf(tag), 1) |
|
|
|
|
|
console.log(this.deviceTags) |
|
|
|
|
|
}, |
|
|
|
|
|
clearDevice() { |
|
|
|
|
|
this.deviceTags = [] |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
@ -50,6 +308,7 @@ export default { |
|
|
|
|
|
|
|
|
.in_release_item { |
|
|
.in_release_item { |
|
|
padding: 16px 24px; |
|
|
padding: 16px 24px; |
|
|
|
|
|
margin-bottom: 10px; |
|
|
line-height: 34px; |
|
|
line-height: 34px; |
|
|
background: #fff; |
|
|
background: #fff; |
|
|
border-radius: 6px; |
|
|
border-radius: 6px; |
|
|
@ -84,6 +343,7 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.release_right { |
|
|
.release_right { |
|
|
|
|
|
text-align: right; |
|
|
.el-button { |
|
|
.el-button { |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
padding: 8px 24px; |
|
|
padding: 8px 24px; |
|
|
@ -94,6 +354,123 @@ export default { |
|
|
background: linear-gradient(to right, #fc8c6f, #fa544e) !important; |
|
|
background: linear-gradient(to right, #fc8c6f, #fa544e) !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.step_1{ |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
line-height: 54px; |
|
|
|
|
|
border-bottom: 1px solid #eee; |
|
|
|
|
|
} |
|
|
|
|
|
.step_select{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
div{ |
|
|
|
|
|
margin-right: 30px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.step_select_list{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
.step_upload{ |
|
|
|
|
|
width: 164px; |
|
|
|
|
|
height: 172px; |
|
|
|
|
|
margin-right: 16px; |
|
|
|
|
|
border: 1px dashed #dcdde3; |
|
|
|
|
|
background: url(~@/assets/images/t-sc.png) #f2f7ff no-repeat center center; |
|
|
|
|
|
background-size: 36px 29px; |
|
|
|
|
|
border-radius: 6px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.material_item{ |
|
|
|
|
|
position: relative; |
|
|
|
|
|
.select_delt{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 12px; |
|
|
|
|
|
right: 12px; |
|
|
|
|
|
.font-icon{ |
|
|
|
|
|
width: 19px; |
|
|
|
|
|
height: 19px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.select_edit{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 44px; |
|
|
|
|
|
background: rgba(0,0,0,.5); |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
.font-icon{ |
|
|
|
|
|
width: 16px; |
|
|
|
|
|
height: 17px; |
|
|
|
|
|
margin-top: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.step_form{ |
|
|
|
|
|
padding-top: 30px; |
|
|
|
|
|
.select_all_tip{ |
|
|
|
|
|
margin: -20px 0 0 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.select_other{ |
|
|
|
|
|
margin: -20px 0 0 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.drag_list{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
} |
|
|
|
|
|
.edit_material{ |
|
|
|
|
|
padding: 12px 0; |
|
|
|
|
|
border-bottom: 1px solid #f2f6fd; |
|
|
|
|
|
.edit_img{ |
|
|
|
|
|
position: relative; |
|
|
|
|
|
width: 58px; |
|
|
|
|
|
height: 77px; |
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
img{ |
|
|
|
|
|
display: block; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
.radio_img { |
|
|
|
|
|
width: 58px; |
|
|
|
|
|
height: 77px; |
|
|
|
|
|
background: url(~@/assets/images/t-yp.png) no-repeat #b3e8fa center; |
|
|
|
|
|
background-size: 40px 40px; |
|
|
|
|
|
} |
|
|
|
|
|
span{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
display: block; |
|
|
|
|
|
width: 20px; |
|
|
|
|
|
height: 14px; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
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(even){ |
|
|
|
|
|
.edit_img{ |
|
|
|
|
|
span{ |
|
|
|
|
|
background: url(~@/assets/images/num_bg1.png) no-repeat; |
|
|
|
|
|
background-size: 20px 14px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
</style> |
|
|
</style> |
