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.
385 lines
12 KiB
385 lines
12 KiB
<template>
|
|
<div class="list_warp">
|
|
<el-row :gutter="15">
|
|
<el-col>
|
|
<!-- v-loading="crud.loading" -->
|
|
<el-table
|
|
ref="table"
|
|
: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"
|
|
:show-close="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">
|
|
<!-- :loading="crud.status.cu === 2"
|
|
@click="crud.submitCU"-->
|
|
<el-button
|
|
type="primary"
|
|
round
|
|
>保存</el-button>
|
|
<el-button round @click="publishVisible=false">关闭</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 pagination from '@crud/Pagination'
|
|
import {reqPublishList} from '@/api/publish/publishList'
|
|
export default {
|
|
name: 'PublishList',
|
|
components: { pagination },
|
|
data() {
|
|
return {
|
|
queryInfo:{
|
|
release_name:'',
|
|
orga_id:'',
|
|
page:1,
|
|
size:3,
|
|
},
|
|
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: []
|
|
}
|
|
},
|
|
mounted(){
|
|
this.getPublishList()
|
|
},
|
|
methods: {
|
|
// 获取发布列表的数据
|
|
getPublishList(){
|
|
const params=this.queryInfo
|
|
reqPublishList(params).then(res=>{
|
|
if(res.code==200) {
|
|
this.publishList=res.data.content
|
|
}
|
|
})
|
|
},
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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>
|