前端初始化

2022-08-31 13:33:52 +08:00
commit 0a11097b80
108 changed files with 14283 additions and 0 deletions
@@ -0,0 +1,154 @@
+<template>
+    <div class="content-height report-detail">
+        <div class="title">
+            <el-tooltip :content="row.name" placement="top-start">
+                <span>{{ row.name || '-' }}</span>
+            </el-tooltip>
+        </div>
+        <div class="desc">
+            <el-row>
+                <el-col :span="24" class="desc-item">
+                    <label>关键词</label>
+                    <div>{{ row.keyContent || '-' }}</div>
+                </el-col>
+                <el-col :span="24" class="desc-item">
+                    <label>内容摘要</label>
+                    <p>{{ row.mainContent || '-' }}</p>
+                </el-col>
+                <el-col :span="24" class="desc-item">
+                    <label>所属部门</label>
+                    <div>{{ row.department || '-' }}</div>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="report-download">
+            <span>报告详情</span>
+            <el-button type="primary" @click="downloadRow(row)">报告下载</el-button>
+        </div>
+        <div class="preview-content" v-html="content"></div>
+    </div>
+</template>
+
+<script>
+import {downloadFile} from "../../utils/downloadFile";
+
+export default {
+    name: "ReportDetail",
+    data(){
+        return {
+            content: '',
+            row: {},
+        }
+    },
+    methods: {
+        // 预览
+        previewRow() {
+            if(!this.$route.query.row){
+                this.$router.push({path: '/report/list', query: {id: this.$route.query.id}});
+                return
+            }
+            this.row = JSON.parse(this.$route.query.row);
+            this.$api.report.reportGetReportHtmlId({id: this.row.id}).then(({data}) => {
+                this.content = data.content;
+            })
+        },
+        // 下载
+        downloadRow(row){
+            // this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
+            //     confirmButtonText: '确定',
+            //     cancelButtonText: '取消',
+            //     type: 'warning'
+            // }).then(() => {
+                this.$api.report.reportDownload({fileId: row.fileId}).then(res => {
+                    downloadFile(res);
+                })
+            // })
+        }
+    },
+    created() {
+        this.previewRow();
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-detail {
+    .title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        border-bottom: 1px solid #EBEEF5;
+        height: 42px;
+        line-height: 42px;
+        margin: 0 18px 0 22px;
+        text-align: center;
+
+        span {
+            font-size: 16px;
+            font-weight: 600;
+            color: #262626;
+        }
+    }
+    .desc{
+        padding: 11px 26px 6px 48px;
+
+        .desc-item{
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            margin-bottom: 12px;
+            label{
+                display: inline-block;
+                height: 19px;
+                line-height: 19px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #595959;
+                width: 64px;
+                border-right: 1px solid #BFBFBF;
+                margin-right: 9px;
+            }
+            div,p{
+                flex: 1;
+                font-size: 14px;
+                font-weight: 400;
+                color: #434343;
+            }
+            p{
+                line-height: 20px;
+                text-align: justify;
+            }
+        }
+    }
+
+    .report-download {
+        height: 40px;
+        background: #F2F6FC;
+        border: 1px solid #EBEEF5;
+        margin: 0 14px 0 13px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 7px 0 9px;
+
+        span {
+            font-size: 16px;
+            font-weight: 500;
+            color: #262626;
+        }
+    }
+
+    .preview-content {
+        margin: 0 14px 0 13px;
+        padding-bottom: 11px;
+
+        img {
+            max-width: 100% !important;
+        }
+        table{
+            margin: 0 auto;
+        }
+
+    }
+}
+</style>