@@ -24,6 +24,8 @@ export default { | |||||
}, | }, | ||||
colors: { | colors: { | ||||
delete: '#FF5454', | delete: '#FF5454', | ||||
preview: '#f09843', | |||||
design: '#99089f' | |||||
// add more... | // add more... | ||||
}, | }, | ||||
text: { | text: { | ||||
@@ -31,22 +33,35 @@ export default { | |||||
edit: '编辑', | edit: '编辑', | ||||
detail: '详情', | detail: '详情', | ||||
delete: '删除', | delete: '删除', | ||||
viewAttr: '查看属性' | |||||
viewAttr: '查看属性', | |||||
preview: '预览', | |||||
design: '设计' | |||||
// add more... | // add more... | ||||
} | } | ||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
// 发射事件 | // 发射事件 | ||||
emit(eventType) { | |||||
this.$emit('emit-data', { type: eventType, data: this.injectData.head?.emitFullData ? this.injectData : this.injectData.id }) | |||||
emit(opt) { | |||||
let emitFull = false | |||||
let eventType = 'default' | |||||
let customField | |||||
if (typeof opt === 'object') { | |||||
eventType = opt.name | |||||
customField = opt.emitField || 'id' | |||||
emitFull = opt.emitFull || false | |||||
} else { | |||||
eventType = opt | |||||
} | |||||
this.$emit('emit-data', { type: eventType, data: emitFull ? this.injectData : customField ? this.injectData[customField] : this.injectData.id }) | |||||
} | } | ||||
}, | }, | ||||
render: function (h) { | render: function (h) { | ||||
let btns = [] | let btns = [] | ||||
for (const optionStr of this.injectData.head?.options) { | for (const optionStr of this.injectData.head?.options) { | ||||
const optObj = typeof optionStr === 'object' | |||||
// btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr)) | // btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr)) | ||||
btns.push(h('el-button', { props: { type: 'text' }, style: { color: this.colors[optionStr] || '#409EFF' }, on: { click: this.emit.bind(null, optionStr) } }, this.text[optionStr])) | |||||
btns.push(h('el-button', { props: { type: 'text' }, style: { color: optObj ? this.colors[optionStr.name] : this.colors[optionStr] || '#409EFF' }, on: { click: this.emit.bind(null, optionStr) } }, typeof optionStr === 'object' ? this.text[optionStr.name] : this.text[optionStr])) | |||||
} | } | ||||
return h('span', null, btns) | return h('span', null, btns) | ||||
} | } |
@@ -120,12 +120,20 @@ export default { | |||||
{ prop: 'createTime', name: '创建时间', width: 200 }, | { prop: 'createTime', name: '创建时间', width: 200 }, | ||||
{ prop: 'fileName', name: '报表名称' }, | { prop: 'fileName', name: '报表名称' }, | ||||
{ prop: 'category', name: '报表分类', subcomponent: CategoryList, options: categories }, | { prop: 'category', name: '报表分类', subcomponent: CategoryList, options: categories }, | ||||
{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['preview', 'design', 'edit', 'delete'] } | |||||
{ | |||||
prop: 'operations', | |||||
name: '操作', | |||||
fixed: 'right', | |||||
width: 180, | |||||
subcomponent: TableOperateComponent, | |||||
options: [{ name: 'preview', emitField: 'fileName' }, { name: 'design', emitField: 'name' }, 'edit', 'delete'] | |||||
} | |||||
] | ] | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
handleOperations({ type, data }) { | handleOperations({ type, data }) { | ||||
console.log('operation data: ', data) | |||||
let id = data | let id = data | ||||
switch (type) { | switch (type) { | ||||
case 'change-category': | case 'change-category': | ||||
@@ -134,6 +142,21 @@ export default { | |||||
return this.addOrUpdateHandle(id) | return this.addOrUpdateHandle(id) | ||||
case 'delete': | case 'delete': | ||||
return this.deleteHandle(id) | return this.deleteHandle(id) | ||||
case 'design': | |||||
return this.$router.push({ | |||||
name: 'monitoring-reportDesign', | |||||
query: { | |||||
// data 的数据是 emitField 的值 | |||||
name: data | |||||
} | |||||
}) | |||||
case 'preview': | |||||
return this.$router.push({ | |||||
name: 'monitoring-reportPreview', | |||||
query: { | |||||
name: data | |||||
} | |||||
}) | |||||
} | } | ||||
}, | }, | ||||
updateCategory({ id, fileName, categoryId }) { | updateCategory({ id, fileName, categoryId }) { | ||||
@@ -7,14 +7,16 @@ | |||||
--> | --> | ||||
<template> | <template> | ||||
<div v-loading="loading" :class="$style.container"> | <div v-loading="loading" :class="$style.container"> | ||||
<h1 >{{ $route.query.name }}</h1> | |||||
<small-title :size="'md'" style="margin-bottom: 10px">报表名称:{{ $route.query.name }}</small-title> | |||||
<iframe id="reportView" :class="$style.mainIframe" name="mainIframe" :src="url" frameborder="0" scrolling="auto" /> | <iframe id="reportView" :class="$style.mainIframe" name="mainIframe" :src="url" frameborder="0" scrolling="auto" /> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import SmallTitle from '@/components/small-title' | |||||
export default { | export default { | ||||
components: {}, | |||||
components: { SmallTitle }, | |||||
props: {}, | props: {}, | ||||
data() { | data() { | ||||
return { | return { | ||||