|
|
|
@ -7,6 +7,7 @@ |
|
|
|
v-loading="crud.loading" |
|
|
|
:data="tableData" |
|
|
|
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }" |
|
|
|
class="publish_table" |
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
> |
|
|
|
<el-table-column type="selection" width="55" /> |
|
|
|
@ -30,7 +31,20 @@ |
|
|
|
<div :class="{ 'stop_txt': scope.row.enabled }">{{ scope.row.enabled ? '发布中' : '停止' }}</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="device" align="center" label="发布设备" /> |
|
|
|
<el-table-column prop="device" align="center" label="发布设备" width="300px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
{{ scope.row.device ? '' : '全部设备' }} |
|
|
|
<div class="tag_list"> |
|
|
|
<el-tag |
|
|
|
v-for="tag in scope.row.deviceData" |
|
|
|
:key="tag" |
|
|
|
type="primary" |
|
|
|
>{{ tag }}</el-tag> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作" width="220px" align="center" fixed="right"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
@ -41,7 +55,7 @@ |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="edit_btn" |
|
|
|
@click="editFormData(scope.$index, scope.row)" |
|
|
|
@click="editForm(scope.$index, scope.row)" |
|
|
|
>编辑</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
@ -56,6 +70,141 @@ |
|
|
|
<pagination /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<div class="publish_layer"> |
|
|
|
<el-dialog |
|
|
|
title="编辑" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="publishVisible" |
|
|
|
width="872px" |
|
|
|
height="384px" |
|
|
|
> |
|
|
|
<el-form ref="form" :model="form" size="small" label-width="100px"> |
|
|
|
<el-form-item |
|
|
|
label="发布名称" |
|
|
|
prop="name" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '请输入发布名称', trigger: '' } |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="form.name" style="width: 674px;" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
label="发布时间" |
|
|
|
prop="date" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '请选择发布时间', trigger: 'change' } |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-date-picker |
|
|
|
v-if="isTypeDate===0" |
|
|
|
v-model="form.date" |
|
|
|
type="date" |
|
|
|
placeholder="选择日期" |
|
|
|
/> |
|
|
|
<el-date-picker |
|
|
|
v-else |
|
|
|
v-model="form.date" |
|
|
|
type="daterange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="上传内容" prop="file"> |
|
|
|
<el-upload action="#" list-type="picture-card" :auto-upload="false"> |
|
|
|
<!-- <i slot="default" class="el-icon-plus"></i> --> |
|
|
|
<img src="@/assets/images/t-sc.png" alt /> |
|
|
|
<div slot="file" slot-scope="{file}"> |
|
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt /> |
|
|
|
<!-- <span class="el-upload-list__item-actions"> |
|
|
|
<span |
|
|
|
class="el-upload-list__item-preview" |
|
|
|
@click="handlePictureCardPreview(file)" |
|
|
|
> |
|
|
|
<i class="el-icon-zoom-in"></i> |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-if="!disabled" |
|
|
|
class="el-upload-list__item-delete" |
|
|
|
@click="handleDownload(file)" |
|
|
|
> |
|
|
|
<i class="el-icon-download"></i> |
|
|
|
</span> |
|
|
|
<span |
|
|
|
v-if="!disabled" |
|
|
|
class="el-upload-list__item-delete" |
|
|
|
@click="handleRemove(file)" |
|
|
|
> |
|
|
|
<i class="el-icon-delete"></i> |
|
|
|
</span> |
|
|
|
</span>--> |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
<!-- <el-dialog :visible.sync="dialogVisible"> |
|
|
|
<img width="100%" :src="dialogImageUrl" alt /> |
|
|
|
</el-dialog>--> |
|
|
|
</el-form-item> |
|
|
|
<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-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button> |
|
|
|
<el-button round @click="crud.cancelCU">关闭</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-tag> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -64,6 +213,10 @@ import crudDept from '@/api/system/dept' |
|
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
|
import pagination from '@crud/Pagination' |
|
|
|
const defaultForm = { |
|
|
|
name: '', |
|
|
|
date: null, |
|
|
|
deviceSelect: '', |
|
|
|
file: '' |
|
|
|
} |
|
|
|
export default { |
|
|
|
name: 'PublishList', |
|
|
|
@ -75,30 +228,38 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
selectedList: [], |
|
|
|
publishVisible: false, |
|
|
|
messageVisible: false, |
|
|
|
selectDeviceVisible: false, |
|
|
|
isTypeDate: 0, |
|
|
|
tableData: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: '图片1', |
|
|
|
name: '及时发布 2022-1-1', |
|
|
|
cover: require('@/assets/images/background.jpg'), |
|
|
|
type: 0, |
|
|
|
user: '某某某', |
|
|
|
device: '所有设备', |
|
|
|
device: 0, |
|
|
|
deviceData: [], |
|
|
|
enabled: true, |
|
|
|
isTop: true, |
|
|
|
date: '2021-2-2 至 2022-4-6' |
|
|
|
date: '2021-2-2' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: '图片2', |
|
|
|
name: '定时发布 2022-1-1', |
|
|
|
cover: require('@/assets/images/background.jpg'), |
|
|
|
type: 1, |
|
|
|
user: '某某某2', |
|
|
|
device: '所有设备', |
|
|
|
device: 1, |
|
|
|
deviceData: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'], |
|
|
|
enabled: false, |
|
|
|
isTop: false, |
|
|
|
date: '2021-2-2 至 2022-4-6' |
|
|
|
} |
|
|
|
] |
|
|
|
], |
|
|
|
deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'], |
|
|
|
deviceTags: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -108,6 +269,23 @@ export default { |
|
|
|
isStopHandle(index, row) { |
|
|
|
row.enabled = !row.enabled |
|
|
|
}, |
|
|
|
editForm(index, row) { |
|
|
|
this.publishVisible = true |
|
|
|
this.form.name = row.name |
|
|
|
this.isTypeDate = row.type |
|
|
|
if (this.isTypeDate === 0) { |
|
|
|
this.form.date = row.date |
|
|
|
} else { |
|
|
|
const dateSplice = row.date.split('至') |
|
|
|
this.form.date = dateSplice |
|
|
|
} |
|
|
|
if (row.device === 0) { |
|
|
|
this.form.deviceSelect = 'all' |
|
|
|
} else { |
|
|
|
this.form.deviceSelect = 'other' |
|
|
|
} |
|
|
|
this.deviceTags = row.deviceData |
|
|
|
}, |
|
|
|
handleSelectionChange(val) { |
|
|
|
this.selectedList = val |
|
|
|
if (val.length > 0) { |
|
|
|
@ -116,6 +294,20 @@ export default { |
|
|
|
this.clearBtnDisabled = true |
|
|
|
} |
|
|
|
console.log(val) |
|
|
|
}, |
|
|
|
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 = [] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -128,4 +320,95 @@ export default { |
|
|
|
color: #3a8aeb; |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .el-range-separator{ |
|
|
|
width: 24px; |
|
|
|
} |
|
|
|
::v-deep .el-radio-group{ |
|
|
|
display: block; |
|
|
|
.el-radio{ |
|
|
|
position: relative; |
|
|
|
line-height: 40px; |
|
|
|
.radio_tip{ |
|
|
|
position: absolute; |
|
|
|
right: -45px; |
|
|
|
top: 0; |
|
|
|
display: block; |
|
|
|
width: 42px; |
|
|
|
height: 21px; |
|
|
|
line-height: 21px; |
|
|
|
font-size: 12px; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
background: url(~@/assets/images/an-tj.png) no-repeat; |
|
|
|
background-size: 42px 21px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.select_all_tip{ |
|
|
|
width: 336px; |
|
|
|
height: 32px; |
|
|
|
line-height: 32px; |
|
|
|
margin: -20px 0 0 100px; |
|
|
|
padding: 0 14px; |
|
|
|
font-size: 12px; |
|
|
|
color: #999; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 0 0 5px rgba(0,0,0,.14); |
|
|
|
} |
|
|
|
.select_other{ |
|
|
|
width: 600px; |
|
|
|
margin: -20px 0 0 100px; |
|
|
|
padding: 18px 23px; |
|
|
|
background: #f8f8f8; |
|
|
|
border: 1px solid #dcdde3; |
|
|
|
border-radius: 4px; |
|
|
|
.other_tip{ |
|
|
|
line-height: 24px; |
|
|
|
span{ |
|
|
|
display: inline-block; |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-button { |
|
|
|
padding: 5px 8px; |
|
|
|
border: none !important; |
|
|
|
} |
|
|
|
.delt_btn { |
|
|
|
color: #fff; |
|
|
|
background-color: #ee5747 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.publish_layer, |
|
|
|
.add_device_layer{ |
|
|
|
.el-tag--small{ |
|
|
|
height: 28px; |
|
|
|
line-height: 26px; |
|
|
|
padding: 0 24px; |
|
|
|
margin: 18px 16px 0 0; |
|
|
|
font-size: 14px; |
|
|
|
// color: #3a8aeb; |
|
|
|
::v-deep .el-icon-close{ |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.add_device_layer{ |
|
|
|
::v-deep .el-dialog__body{ |
|
|
|
padding: 0 20px 30px 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.publish_table{ |
|
|
|
.tag_list{ |
|
|
|
text-align: left; |
|
|
|
.el-tag { |
|
|
|
height: 26px; |
|
|
|
line-height: 26px; |
|
|
|
margin: 5px 10px 5px 0; |
|
|
|
background: #cbe3ff; |
|
|
|
color: #3a8aeb; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
