update 基本完成报表“

src/components/base-table/components/operationComponent.js

@@ -24,6 +24,8 @@ export default {
       },
       colors: {
         delete: '#FF5454',
+        preview: '#f09843',
+        design: '#99089f'
         // add more...
       },
       text: {
@@ -31,22 +33,35 @@ export default {
         edit: '编辑',
         detail: '详情',
         delete: '删除',
-        viewAttr: '查看属性'
+        viewAttr: '查看属性',
+        preview: '预览',
+        design: '设计'
         // add more...
       }
     }
   },
   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) {
     let btns = []
     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: '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)
   }

src/views/modules/monitoring/reportDetail.vue

@@ -120,12 +120,20 @@ export default {
 						{ prop: 'createTime', name: '创建时间', width: 200 },
 						{ prop: 'fileName', name: '报表名称' },
 						{ 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 }) {
+			console.log('operation data: ', data)
 			let id = data
 			switch (type) {
 				case 'change-category':
@@ -134,6 +142,21 @@ export default {
 					return this.addOrUpdateHandle(id)
 				case 'delete':
 					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 }) {

src/views/modules/monitoring/reportPreview.vue

@@ -7,14 +7,16 @@
 -->
 <template>
 	<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" />
 	</div>
 </template>
 <script>
+import SmallTitle from '@/components/small-title'
+
 export default {
-	components: {},
+	components: { SmallTitle },
 	props: {},
 	data() {
 		return {