8 changed files with 640 additions and 212 deletions
-
2.eslintrc.js
-
2package.json
-
BINsrc/assets/images/num_bg1.png
-
BINsrc/assets/images/num_bg2.png
-
136src/assets/styles/adminIndex.scss
-
503src/views/immediateRelease/index.vue
-
22src/views/materialContent/materialList/index.vue
-
187src/views/publishContent/publishList/index.vue
|
After Width: 20 | Height: 14 | Size: 1.1 KiB |
|
After Width: 20 | Height: 14 | Size: 1.0 KiB |
@ -1,99 +1,476 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-row class="in_release_item" type="flex" justify="space-between"> |
|||
<el-col :span="3" class="item_title">创建即时发布</el-col> |
|||
<el-col :span="18"> |
|||
<div class="input_wrap"> |
|||
<span class="input_label">名称</span> |
|||
<el-input |
|||
v-model="form.name" |
|||
placeholder="即时发布 2022-1-1" |
|||
class="input_name" |
|||
/> |
|||
<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">创建即时发布</el-col> |
|||
<el-col :span="18"> |
|||
<div class="input_wrap"> |
|||
<span class="input_label">名称</span> |
|||
<el-input |
|||
v-model="form.name" |
|||
placeholder="即时发布 2022-1-1" |
|||
class="input_name" |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="4" class="release_right"> |
|||
<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-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="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> |
|||
</el-col> |
|||
<el-col :span="4" class="release_right"> |
|||
<el-button round class="release_btn">发布</el-button> |
|||
<el-button round type="primary">关闭</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudDept from '@/api/system/dept' |
|||
import draggable from 'vuedraggable' |
|||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|||
const defaultForm = { |
|||
name: '' |
|||
name: '', |
|||
date: [], |
|||
isTop: null, |
|||
deviceSelect: '' |
|||
} |
|||
export default { |
|||
name: 'ImmediateRelease', |
|||
components: { |
|||
draggable |
|||
}, |
|||
cruds() { |
|||
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}) |
|||
return CRUD({ |
|||
title: '部门', |
|||
url: 'api/dept', |
|||
crudMethod: { ...crudDept } |
|||
}) |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
data() { |
|||
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: { |
|||
|
|||
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> |
|||
<style rel="stylesheet/scss" lang="scss"> |
|||
.app-container{ |
|||
background: none; |
|||
padding: 0; |
|||
.app-container { |
|||
background: none; |
|||
padding: 0; |
|||
} |
|||
|
|||
.in_release_item{ |
|||
padding: 16px 24px; |
|||
.in_release_item { |
|||
padding: 16px 24px; |
|||
margin-bottom: 10px; |
|||
line-height: 34px; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
.item_title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #3a8aeb; |
|||
} |
|||
.input_wrap { |
|||
display: flex; |
|||
width: 282px; |
|||
height: 34px; |
|||
padding: 0 24px; |
|||
font-size: 14px; |
|||
background: #f5f6fa; |
|||
line-height: 34px; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
.item_title{ |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #3a8aeb; |
|||
border-radius: 34px; |
|||
.input_label { |
|||
&::after { |
|||
content: "|"; |
|||
padding-left: 8px; |
|||
color: #ccc; |
|||
} |
|||
} |
|||
.input_wrap{ |
|||
display: flex; |
|||
width: 282px; |
|||
height: 34px; |
|||
padding: 0 24px; |
|||
font-size: 14px; |
|||
.input_name { |
|||
width: 194px; |
|||
.el-input__inner { |
|||
border: none; |
|||
background: #f5f6fa; |
|||
line-height: 34px; |
|||
border-radius: 34px; |
|||
.input_label{ |
|||
&::after{ |
|||
content: "|"; |
|||
padding-left: 8px; |
|||
color: #ccc; |
|||
} |
|||
} |
|||
.input_name{ |
|||
width: 194px; |
|||
.el-input__inner{ |
|||
border: none; |
|||
background: #f5f6fa; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.release_right{ |
|||
.el-button { |
|||
font-size: 14px; |
|||
padding: 8px 24px; |
|||
border: none !important; |
|||
} |
|||
.release_btn { |
|||
color: #fff; |
|||
background: linear-gradient(to right, #fc8c6f, #fa544e) !important; |
|||
} |
|||
.release_right { |
|||
text-align: right; |
|||
.el-button { |
|||
font-size: 14px; |
|||
padding: 8px 24px; |
|||
border: none !important; |
|||
} |
|||
.release_btn { |
|||
color: #fff; |
|||
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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue