8 changed files with 441 additions and 254 deletions
@ -0,0 +1,249 @@ |
|||
<template> |
|||
<div class="comp_box"> |
|||
|
|||
|
|||
<vuescroll :ops="scrollOptions" class="scroller"> |
|||
|
|||
<div v-for="(item, index) in templateAvailable"> |
|||
<!-- 原来是<el-collapse v-model="activeNames"> --> |
|||
<h3>{{ item.dictLabel }}</h3> |
|||
<div v-for="(itm, indx) in item.list" :key="indx" class="tplItem" :class="page!='home' ? 'item_sub' : 'item_home'" > |
|||
<!-- 模板内容 --> |
|||
<BroadcastTplShower class=" boardPreview" :text="itm.content" /> |
|||
<div class="infoBtnBox"> |
|||
<el-tooltip content="加入待下发信息" placement="top"> |
|||
<p @click="____onTplToDevice(itm)" class="btn btnApply"> |
|||
</p> |
|||
</el-tooltip> |
|||
<template v-if="page!='home'"> |
|||
<el-tooltip content="编辑" placement="top"> |
|||
<p @click="____onEditTemplate(itm)" class="btn btnEdit"></p> |
|||
</el-tooltip> |
|||
<el-tooltip content="删除" placement="top"> |
|||
<p @click="____onDeleteTemplate(itm)" class="btn btnDelete"></p> |
|||
</el-tooltip> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</vuescroll> |
|||
|
|||
|
|||
<broadcastEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" |
|||
:visible.sync="editDialog.visible" :tpl="editDialog.tpl"></broadcastEditor> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getTemplateList, deleteTemplate } from "@/api/broadcast/template"; |
|||
import BroadcastTplShower from "@screen/components/broadcast/BroadcastTplShower.vue"; |
|||
import broadcastEditor from "@screen/components/broadcast/broadcastEditor"; |
|||
import scrollOptions from "@/common/scrollbar.js"; |
|||
import vuescroll from "vuescroll"; |
|||
export default { |
|||
name: "BoardPreview", |
|||
data() { |
|||
return { |
|||
tplCategory: [], //模板 |
|||
templateAll: [], |
|||
templateAvailable: [], |
|||
editDialog: { |
|||
mode: "", |
|||
type: "", |
|||
visible: false, |
|||
tpl: {}, |
|||
}, |
|||
scrollOptions |
|||
} |
|||
}, |
|||
components:{ |
|||
BroadcastTplShower, |
|||
broadcastEditor, |
|||
vuescroll |
|||
}, |
|||
created(){ |
|||
Promise.all([ |
|||
this.____getTemplateCategory(), |
|||
this.____getAllTemplate() |
|||
]).then((res) => { |
|||
this.____sortTemplate(); |
|||
}); |
|||
}, |
|||
props: { |
|||
text: { |
|||
type: String, |
|||
default: "测试文字" |
|||
}, |
|||
page: { |
|||
type: String, |
|||
default: "channel" //channel:内页 home:首页 |
|||
}, |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
computed: { |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 获取信息模板分类 |
|||
____getTemplateCategory() { |
|||
return this.getDicts("iot_template_category").then((res) => { |
|||
this.tplCategory = res.data; |
|||
}); |
|||
}, |
|||
|
|||
____getAllTemplate() { |
|||
return getTemplateList().then((res) => { |
|||
this.templateAll = res.rows; |
|||
}); |
|||
}, |
|||
____sortTemplate() { |
|||
this.templateAvailable = []; |
|||
this.tplCategory.forEach((item, index) => { |
|||
|
|||
let temp = _.filter(this.templateAll, { category: item.dictValue }); |
|||
if (temp.length > 0) { |
|||
this.templateAvailable.push({ |
|||
...item, |
|||
list: temp, |
|||
}); |
|||
} |
|||
|
|||
}); |
|||
|
|||
}, |
|||
// 从模板新增待下发 |
|||
____onTplToDevice(item) { |
|||
this.$emit("onAddToDevice",item) |
|||
}, |
|||
____onEditTemplate(tpl) { |
|||
// type : board template |
|||
// mode : edit add |
|||
this.editDialog = { |
|||
visible: true, |
|||
mode: "edit", |
|||
type: "template", |
|||
tpl, |
|||
}; |
|||
}, |
|||
/** 删除按钮操作 */ |
|||
____onDeleteTemplate(item) { |
|||
const id = item.id; |
|||
let content = "确认删除?"; |
|||
this.$confirm(content, "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}).then(() => { |
|||
deleteTemplate(id).then(() => { |
|||
this.$message.success("删除成功"); |
|||
this.____refreshData(); |
|||
}); |
|||
}); |
|||
}, |
|||
____refreshData(){ |
|||
this.____getAllTemplate().then(this.____sortTemplate); |
|||
}, |
|||
____onEditSubmit(){ |
|||
this.editDialog.tpl = {}; |
|||
this.editDialog.visible = false; |
|||
this.____refreshData(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.comp_box{ |
|||
|
|||
.scroller { |
|||
|
|||
.tplItem { |
|||
margin-right: 14px; |
|||
display: flex; |
|||
align-items: stretch; |
|||
padding-bottom: 10px; |
|||
|
|||
.boardPreview { |
|||
// width: 560px; |
|||
// height:80px; |
|||
flex: 1; |
|||
} |
|||
|
|||
.infoBtnBox { |
|||
height: 50px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
.btn { |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 40px; |
|||
height: 40px; |
|||
|
|||
&.btnApply { |
|||
background-image: url(~@/assets/jihe/images/button/toLeft.svg); |
|||
} |
|||
|
|||
&.btnEdit { |
|||
background-image: url(~@/assets/jihe/images/button/edit.svg); |
|||
} |
|||
|
|||
&.btnDelete { |
|||
background-image: url(~@/assets/jihe/images/button/delete.svg); |
|||
} |
|||
} |
|||
|
|||
i { |
|||
font-size: 24px; |
|||
color: #666; |
|||
padding-left: 4px; |
|||
cursor: pointer; |
|||
caret-color: rgba(0, 0, 0, 0); |
|||
user-select: none; |
|||
} |
|||
|
|||
i:hover { |
|||
color: #05afe3; |
|||
} |
|||
|
|||
.disabledClass { |
|||
pointer-events: none; |
|||
cursor: auto !important; |
|||
color: #ccc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tplItem.item_home { |
|||
|
|||
.boardPreview { |
|||
border: none; |
|||
} |
|||
|
|||
.infoBtnBox { |
|||
width: 60px; |
|||
border: none; |
|||
background-color: #133242; |
|||
} |
|||
} |
|||
|
|||
.tplItem.item_sub { |
|||
.boardPreview { |
|||
border: 2px solid #004c64; |
|||
} |
|||
|
|||
.infoBtnBox { |
|||
margin-left: 10px; |
|||
width: 160px; |
|||
border: 2px solid #004c64; |
|||
background-color: #133242; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue