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> |
<template> |
||||
<div class="app-container"> |
<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> |
</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> |
</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> |
||||
<style rel="stylesheet/scss" lang="scss"> |
<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; |
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; |
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> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue