You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
414 lines
12 KiB
414 lines
12 KiB
<template>
|
|
<div class="list_warp">
|
|
<el-row :gutter="15">
|
|
<el-col>
|
|
<el-table
|
|
ref="table"
|
|
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" />
|
|
<el-table-column label="文件名称" align="center" prop="name" />
|
|
<el-table-column label="发布内容" align="center" prop="content">
|
|
<template slot-scope="scope">
|
|
<div>
|
|
<img width="100px" size="medium" :src="scope.row.cover" />
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="发布时间" align="center" prop="date" />
|
|
<el-table-column label="发布类型" align="center" prop="type">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.type ? '定时发布' : '即时发布' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="发布人" align="center" prop="user" />
|
|
<el-table-column label="状态" align="center" prop="enabled">
|
|
<template slot-scope="scope">
|
|
<div :class="{ 'stop_txt': scope.row.enabled }">{{ scope.row.enabled ? '发布中' : '停止' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<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
|
|
type="primary"
|
|
:class="['top_btn', { 'top_btn_active': scope.row.isTop }]"
|
|
@click="isTophandle(scope.$index, scope.row)"
|
|
>{{ scope.row.isTop ? '取消' : '置顶' }}</el-button>
|
|
<el-button
|
|
type="primary"
|
|
class="edit_btn"
|
|
@click="editForm(scope.$index, scope.row)"
|
|
>编辑</el-button>
|
|
<el-button
|
|
type="primary"
|
|
:class="['start_btn', { 'stop_btn': scope.row.enabled }]"
|
|
@click="isStopHandle(scope.$index, scope.row)"
|
|
>{{ scope.row.enabled ? '停止' : '恢复' }}</el-button>
|
|
<el-button type="info" class="delt_btn">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页组件-->
|
|
<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>
|
|
|
|
<script>
|
|
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',
|
|
components: { pagination },
|
|
cruds() {
|
|
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
|
|
},
|
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
|
data() {
|
|
return {
|
|
selectedList: [],
|
|
publishVisible: false,
|
|
messageVisible: false,
|
|
selectDeviceVisible: false,
|
|
isTypeDate: 0,
|
|
tableData: [
|
|
{
|
|
id: 1,
|
|
name: '及时发布 2022-1-1',
|
|
cover: require('@/assets/images/background.jpg'),
|
|
type: 0,
|
|
user: '某某某',
|
|
device: 0,
|
|
deviceData: [],
|
|
enabled: true,
|
|
isTop: true,
|
|
date: '2021-2-2'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '定时发布 2022-1-1',
|
|
cover: require('@/assets/images/background.jpg'),
|
|
type: 1,
|
|
user: '某某某2',
|
|
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: {
|
|
isTophandle(index, row) {
|
|
row.isTop = !row.isTop
|
|
},
|
|
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) {
|
|
this.clearBtnDisabled = false
|
|
} else {
|
|
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 = []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list_warp {
|
|
padding: 0 24px;
|
|
.stop_txt {
|
|
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>
|