Compare commits
2 Commits
be5b91aa8b
...
8b1e82b74c
| Author | SHA1 | Date |
|---|---|---|
 hui
|
8b1e82b74c | 6 months ago |
|
hui
|
ac53e3bdb7 | 6 months ago |
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